Designing websites for users

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

9d852ad65e88b3836261a29d427849b2?s=128

Ngaire Ackerley

March 06, 2017
Tweet

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