Website Design with UX in Mind
•
67 likes•32,403 views
Are you designing your websites with users in mind? Here are slides from my talk about user experience at the Digital Marketing for Business Conference in Raleigh, NC, in May 2015. This contains some high-level concepts to keep in mind as well as practical tips.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Website Design with UX in Mind
Similar to Website Design with UX in Mind (20)
More from Melissa Eggleston
More from Melissa Eggleston (7)
Recently uploaded
Recently uploaded (20)
Website Design with UX in Mind
- 1. #DMFB15@melissa_egg UXPresentation by Website Design with Melissa Eggleston in Mind
- 2. #DMFB15@melissa_egg Ever say this about a website? “It’s too easy.” “It didn’t challenge me.” “It was way too much fun.”
- 3. #DMFB15@melissa_egg How often do you fail online? F
- 5. #DMFB15@melissa_egg 84% for websites accessed on desktop* 62% for websites accessed on mobile* Success rate = the percentage of tasks that users complete correctly *in a lab, not in “real-life” situations Success Rates Online
- 6. #DMFB15@melissa_egg Our Goals 1. Learn four big ideas about users to increase success and engagement on your website (Stop making people feel like losers) 2. Receive actionable items that you can use when designing your website (Get practical tips you can use now)
- 7. #DMFB15@melissa_egg What is UX? UX “encompasses all aspects of the end- user's interaction with the company, its services, and its products.” - Jakob Nielsen and Don Norman Considering UX is everyone’s job Great UX is a competitive advantage.
- 8. #DMFB15@melissa_egg There is no “typical user”
- 12. #DMFB15@melissa_egg Users Want a Sense of Place
- 13. #DMFB15@melissa_egg Logo/Tagline innovation The Institute for in Public School Choice IIPSC
- 19. #DMFB15@melissa_egg Not So Helpful Links Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent urna sem, vehicula vel click here efficitur non, scelerisque et dolor. Tristique aliquam interdum lorem ac libero blandit auctor. Donec eu mauris et lorem consectetur aliquet a vehicula enim. In et dignissim leo. Mauris placerat diam quis nulla click here luctus. • Vestibulum vitae justo bibendum • scelerisque nisi ac, euismod leo • sit amet venenatis est euismod. Click here tempus ipsum sit amet pretium. In a eros enim. Duis vitae sem ante. Vestibulum vehicula dapibus fermentum.
- 20. #DMFB15@melissa_egg Helpful, Descriptive Links Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent urna sem, vehicula vel our XYZ services efficitur non, scelerisque et dolor. Tristique aliquam interdum lorem ac libero blandit auctor. Donec eu mauris et lorem consectetur aliquet a vehicula enim.Mauris placerat diam quis nulla a wide range of clients luctus. • Vestibulum vitae justo bibendum • scelerisque nisi ac, euismod leo • sit amet venenatis est euismod. Read full details about our new program. Tempus ipsum sit amet pretium. In a eros enim. Vestibulum vehicula dapibus fermentum.
- 22. #DMFB15@melissa_egg Users Want a Sense of Place • Make it obvious who you are • Use “breadcrumbs” for deep content sites • Make it clear where they are, where they’ve been, and where they can go • Factor in site entrance NOT via home page • Design for consistent experience/look/feel on multiple devices
- 24. #DMFB15@melissa_egg Users Act as if Something is on Fire
- 25. #DMFB15@melissa_egg What is Satisficing? Satisficing is making decisions that are good enough, not necessarily optimal. sufficing + satisfying Plan for fast-moving, distracted and impatient users.
- 26. #DMFB15@melissa_egg Most Important Things First Lorem ipsum dolor sit amet, consectetur adipiscing elit. E7am quis nulla nec eros auctor blandit at et massa. Pellentesque scelerisque feugiat libero sed hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur viverra por?tor massa a scelerisque. Donec ut aliquet libero. Sed consectetur, urna eu por?tor volutpat, nunc quam lobor7s lectus, id vulputate lorem tortor sit amet mauris. Phasellus dapibus felis vitae tellus ultrices pre7um. Nulla nec justo non eros volutpat vehicula a non enim. Curabitur eget aliquam nulla. Donec non purus justo. Sed et lorem purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas risus urna, viverra rhoncus sagi?s eu, fermentum vel quam. Praesent luctus varius velit bibendum aliquam. In laoreet placerat justo, u 81% 71% 63% 32%
- 27. #DMFB15@melissa_egg No time for a “Wall of Words”
- 29. #DMFB15@melissa_egg Response Time Limits for Webpages • 0.1 seconds gives the feeling of instantaneous response. • 1 second keeps the user's flow of thought seamless. • 10 seconds keeps the user's attention.* * in a lab, it depends on user motivation
- 30. #DMFB15@melissa_egg I waited 25 seconds for this.
- 31. #DMFB15@melissa_egg Check Your Speed • Google PageSpeed Tools or simply search for “test my website speed” • Consider recommendations – What can you fix quickly and easily?
- 32. #DMFB15@melissa_egg Two Questions to Ask Yourself 1. “Am I saving myself time at the expense of the user?” 2. “How can I save the user time here?” - from Paul Boag “Stop Wasting Users’ Time” Smashing Magazine, 4/25/14
- 33. #DMFB15@melissa_egg Users Act as if Something’s on Fire • Make sure important elements are easy to see and find • Plan for glancing and scanning not scrutinizing • Avoid walls of words • Design for a speedy site
- 35. #DMFB15@melissa_egg Users Prefer Using Minimal Brainpower
- 37. #DMFB15@melissa_egg Where did I go?
- 41. #DMFB15@melissa_egg No Visual Hierarchy Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum nunc vel nulla rutrum, non posuere nunc facilisis. Curabitur ornare nibh sed adipiscing laoreet. Ut nisl urna, bibendum vitae hendrerit at, pharetra a est. Etiam euismod consectetur lacinia. Integer vestibulum nisl odio, eu ultrices tellus ornare Heading Morbi pellentesque nibh sed sapien tristique, ut tempor augue consequat. Nullam augue metus, iaculis eget euismod posuere, mollis sed arcu. Sed rhoncus risus vel felis elementum vulputate. Aliquam eget ultrices ante. Suspendisse potenti. Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum nunc vel nulla rutrum, non posuere nunc facilisis. Curabitur ornare nibh sed adipiscing laoreet. Ut nisl urna, bibendum vitae hendrerit Heading Morbi pellentesque nibh sed sapien tris7que, ut tempor augue consequat. Nullam augue metus,.
- 42. #DMFB15@melissa_egg Better Visual Hierarchy Important Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum nunc vel nulla rutrum, non posuere nunc facilisis. Curabitur ornare nibh sed adipiscing laoreet. Ut nisl urna, bibendum vitae hendrerit at, pharetra a est. Etiam euismod consectetur lacinia. Integer vestibulum nisl odio, eu ultrices tellus ornare Less Important Heading Morbi pellentesque nibh sed sapien tristique, ut tempor augue consequat. Nullam augue metus, iaculis eget euismod posuere, mollis sed arcu. Sed rhoncus risus vel felis elementum vulputate. Aliquam eget ultrices ante. Suspendisse potenti. Even less important Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum nunc vel nulla rutrum, non posuere nunc facilisis. Curabitur ornare nibh sed adipiscing laoreet. Ut nisl urna, bibendum vitae hendrerit Even less important Morbi pellentesque nibh sed sapien tris7que, ut tempor augue consequat. Nullam augue metus,.
- 48. #DMFB15@melissa_egg Realistic Design vs. Flat Design
- 49. #DMFB15@melissa_egg • Build on proven conventions, unless you have a good reason not to • Let people search your website, please • Have a visual hierarchy, guide eyes • Be careful with flat design, ensuring clickable items (links, buttons) are obvious Users Prefer Using Minimal Brainpower
- 52. #DMFB15@melissa_egg Information-Rich • meaningful to users • authentic subjects • full of helpful information
- 55. #DMFB15@melissa_egg Filler Photos on Mobile Make Us Sad
- 56. #DMFB15@melissa_egg Better Images for Mobile
- 57. #DMFB15@melissa_egg Real Images Are Scrutinized
- 58. #DMFB15@melissa_egg Give me some real bakers!
- 59. #DMFB15@melissa_egg If your homepage uses a hero image, it damn well better be heroic.
- 62. #DMFB15@melissa_egg This cat might also have a cape
- 65. #DMFB15@melissa_egg "I know it when I see it.” -‐ Supreme Court Jus7ce PoLer Stewart Jacobellis v. Ohio (1964)
- 66. #DMFB15@melissa_egg Learn Some Photography • Local class with live teacher • Lynda.com – Ben Long This will also raise your video standards and improve your personal photos.
- 73. #DMFB15@melissa_egg Users Want Information-Rich Visuals • Cut the filler photos • Pack real photos with information your users might want • Guide users’ eyes • Kill the carousels • Consider visuals carefully, don’t just slap them up there to fill space
- 75. #DMFB15@melissa_egg Resources for Further Learning Steve Krug’s Don’t Make Me Think book Nielsen Norman Group weekly e-newsletter Smashing Magazine usability articles
- 76. #DMFB15@melissa_egg Talk to your users & Watch what they do Final Thought
- 77. #DMFB15@melissa_egg Ask Me Questions Email: melissa@melissaegg.com Twitter: @melissa_egg Slides: melissaegg.com/blog