Designing websites for users

All too often we go from client's needs to designing and developing websites, why don't we consider changing our thinking and considering the user first? After all, they are the ones using the site the most right?

Presentation for WordCamp Auckland Conference in New Zealand, March 2017

Transcript

1. ngaire@designack.com http://designack.com http://kiwifootprints.com Designing websites for users Ngaire Ackerley
2. ngaire@designack.com 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
3. ngaire@designack.com http://designack.com http://kiwifootprints.com When you start a web project, what are your first steps?
4. Let’s make STEP 1: the user After all, they are the ones who will use it the most, right? ngaire@designack.com http://designack.com http://kiwifootprints.com
5. Designing for users • User personas • User journey mapping • Navigation • Imagery and content • Layout • Fonts • Responsive and Accessible ngaire@designack.com http://designack.com http://kiwifootprints.com
6. User Personas Who are the people we’re creating the site for? ngaire@designack.com http://designack.com http://kiwifootprints.com
7. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
8. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
9. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
10. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
11. User Journey Mapping How will the users use the website? ngaire@designack.com http://designack.com http://kiwifootprints.com
12. • 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 ngaire@designack.com http://designack.com http://kiwifootprints.com User Journey Mapping
13. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
14. Example of a user journey ngaire@designack.com http://designack.com http://kiwifootprints.com
15. Example of a user journey ngaire@designack.com http://designack.com http://kiwifootprints.com
16. Example of a user journey ngaire@designack.com http://designack.com http://kiwifootprints.com
17. Navigation How can we direct the user around our website? ngaire@designack.com http://designack.com http://kiwifootprints.com
18. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
19. Example of navigation sitemap ngaire@designack.com http://designack.com http://kiwifootprints.com
20. Imagery and Content What do the users need? ngaire@designack.com http://designack.com http://kiwifootprints.com
21. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
22. Layout Making a website easy to use and a good experience ngaire@designack.com http://designack.com http://kiwifootprints.com
23. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
24. Text stuff ngaire@designack.com http://designack.com http://kiwifootprints.com Typography (Fonts)
25. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
26. More about fonts • Consider styling of quotes, bullets, headings • Paragraph formatting • Consistency ngaire@designack.com http://designack.com http://kiwifootprints.com
27. The internet is open to everyone everywhere ngaire@designack.com http://designack.com http://kiwifootprints.com Responsive and Accessible
28. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
29. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
30. 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 ngaire@designack.com http://designack.com http://kiwifootprints.com
31. ngaire@designack.com http://designack.com http://kiwifootprints.com Thanks! ngaire@designack.com http://designack.com http://kiwifootprints.com