Website Design with UX in Mind
ā¢
67 likesā¢32,406 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 Ā Ā Ā