[email protected] http://designack.com http://kiwifootprints.com Designing websites for users Ngaire Ackerley

[email protected] http://designack.com http://kiwifootprints.com Who am I? • Digital Designer by day
 • Freelance WordPress Designer and Developer • 6 years travelling the world & living in UK
 • Past organiser of WordPress London and presented in UK, USA, NZ • Blogger & Photographer

[email protected] http://designack.com http://kiwifootprints.com When you start a web project, what are your first steps?

Let’s make STEP 1: the user After all, they are the ones who will use it the most, right? [email protected] http://designack.com http://kiwifootprints.com

Designing for users • User personas • User journey mapping • Navigation • Imagery and content • Layout • Fonts • Responsive and Accessible [email protected] http://designack.com http://kiwifootprints.com

User Personas Who are the people we’re creating the site for? [email protected] http://designack.com http://kiwifootprints.com

What is a user persona? • Represents a main type of user for your website • Shows their needs • How a user moves through website and what expectations they have • Helps identify features and functionality • User goals and values [email protected] http://designack.com http://kiwifootprints.com

How to discover user personas • User research, analytics, speaking to users, clients • Identify key points from the research • Brainstorm • Separate the main personas into primary, secondary, and related categories. • Develop the appropriate descriptions of each personas background, needs, expectations and environment [email protected] http://designack.com http://kiwifootprints.com

What a user persona looks like • Goals & Motivations • Current pain points/frustrations • Demographic data • Quote capturing their attitude general/towards the site • Short Bio • Technical ability & devices use/how often • Other brands/websites they may like [email protected] http://designack.com http://kiwifootprints.com

Example: user persona Ricky, 30, South Auckland, Office worker, lives alone • Wants to volunteer or donate - help in some way • Used to be bullied as a child • Donations take too long, too much personal information is asked • Excited to help make a difference • Bit introverted, reads and watches tv, donates to street appeals, dreams of doing good in the world • Very tech-savvy, owns iPad, iPhone, Laptop, works on Desktop • Other brands/websites: BBC News, LinkedIn, Reddit [email protected] http://designack.com http://kiwifootprints.com

User Journey Mapping How will the users use the website? [email protected] http://designack.com http://kiwifootprints.com

• Series of steps of how a user might interact with the website (current / future) • Helps understand user behaviour • Helps identify functionality • Helps define navigation and interface requirements [email protected] http://designack.com http://kiwifootprints.com User Journey Mapping

Creating a user journey • From the Persona’s think about the main tasks that each user persona wants to achieve • Context • Progression • Devices • Functionality • Emotion [email protected] http://designack.com http://kiwifootprints.com

Example of a user journey [email protected] http://designack.com http://kiwifootprints.com

Example of a user journey [email protected] http://designack.com http://kiwifootprints.com

Example of a user journey [email protected] http://designack.com http://kiwifootprints.com

Navigation How can we direct the user around our website? [email protected] http://designack.com http://kiwifootprints.com

Navigation • Shorter the distance to reach the goal, the more motivated they will be to reach it • People are lazy, most websites need to be designed more for scanning than reading [email protected] http://designack.com http://kiwifootprints.com

Example of navigation sitemap [email protected] http://designack.com http://kiwifootprints.com

Imagery and Content What do the users need? [email protected] http://designack.com http://kiwifootprints.com

Imagery and Content • Read and source imagery and content before designing to understand meaning, tone etc. • Work with the client • Create a brief style guide for the site to follow • Think about how we can create appropriate content to help the different user personas achieve their goals • People are attracted to imagery, faces, eyes • People are easily distracted [email protected] http://designack.com http://kiwifootprints.com

Layout Making a website easy to use and a good experience [email protected] http://designack.com http://kiwifootprints.com

Layout • Start with wireframes - identify the key elements and functionality • Return to user journeys and goals • How can you best present the content and imagery without overpowering the website? • Think about visual cues to direct user through their journey to their goals [email protected] http://designack.com http://kiwifootprints.com

Text stuff [email protected] http://designack.com http://kiwifootprints.com Typography (Fonts)

Typography (Fonts) • Web fonts - they aren’t the same as print fonts • Readability - different sizes, styles (bold, italics), glyphs, numbers • Avoid quirky fonts that break convention • Consider the letter and word spacing of a font before choosing it, make sure they are comfortable and easy to read • Choose complementary fonts carefully [email protected] http://designack.com http://kiwifootprints.com

More about fonts • Consider styling of quotes, bullets, headings • Paragraph formatting • Consistency [email protected] http://designack.com http://kiwifootprints.com

The internet is open to everyone everywhere [email protected] http://designack.com http://kiwifootprints.com Responsive and Accessible

Responsive and Accessible • Let content, not device size determine breakpoints • Keep it fluid and logically flowing • Keep media queries simple • Balance accessibility & obtrusiveness • Test on as many devices/platforms as possible [email protected] http://designack.com http://kiwifootprints.com

Review • User personas 
 Who are the people using our website and what are their goals? • User journey mapping 
 How will our users achieve their goals? What are their steps? • Navigation 
 Keep it simple and easy to use • Layout
 Keep it user focused and consistent • Typography/fonts
 Readability • Responsive & Accessible
 Design for content and as many people as possible [email protected] http://designack.com http://kiwifootprints.com

Design for users key links • Personas: 
 https://www.usability.gov/how-to-and-tools/methods/ personas.html • User Journey:
 http://theuxreview.co.uk/user-journeys-beginners-guide/ • Smashing Magazine (sign up for the newsletter):
 https://www.smashingmagazine.com • https://speakerdeck.com/smashingmag/the-invisible-side-of- design [email protected] http://designack.com http://kiwifootprints.com

[email protected] http://designack.com http://kiwifootprints.com Thanks! [email protected] http://designack.com http://kiwifootprints.com