Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Design with UX in Mind

21,731 views

Published on

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.

Published in: Design, Marketing
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Earn $500 for taking a 1 hour paid survey! read more... ●●● http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE... https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Forget about surgery, pills and weights, they DONT work! This DOES work, but you need to follow the methods contained in the guide. Let's be honest, penis size is an important aspect of any man's life whether they want to admit it or not. The market is flooded with products and solutions that claim to have the answer to making your member bigger, but usually these products fail to deliver. Luckily, I happened to come across what might be the "Holy Grail of Penis Enlargement", it's written by this guy named John Collins and it's called the Penis Enlargement Bible. What I found mind blowing about John's program is that he backs up his claims with actual video proof and testimonials from customers who have used the product. It's said that a picture is worth a thousand words, but I would say most of these videos are worth 3 to 4 inches! Forget extenders, pills, suction devices and surgery. They are either expensive, too painful or they just don't work. The Penis Enlargement Bible is a proven two step program that combines natural over the counter supplements with a specially designed exercise regime to achieve up to 4" of growth within just a few months. If you are serious about getting bigger, check out the Penis Enlargement Bible here ◆◆◆ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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
  4. #DMFB15@melissa_egg
  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”
  9. #DMFB15@melissa_egg Computers way outnumber users
  10. #DMFB15@melissa_egg
  11. #DMFB15@melissa_egg
  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
  14. #DMFB15@melissa_egg Consistency
  15. #DMFB15@melissa_egg Consistency
  16. #DMFB15@melissa_egg Navigation Bar Indicator
  17. #DMFB15@melissa_egg Navigation Bar Indicator
  18. #DMFB15@melissa_egg Breadcrumbs   Breadcrumb Trail
  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.
  21. #DMFB15@melissa_egg Hamburger Menu Debate
  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
  23. #DMFB15@melissa_egg
  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”
  28. #DMFB15@melissa_egg
  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
  34. #DMFB15@melissa_egg
  35. #DMFB15@melissa_egg Users Prefer Using Minimal Brainpower
  36. #DMFB15@melissa_egg Meeting User Expectations
  37. #DMFB15@melissa_egg Where did I go?
  38. #DMFB15@melissa_egg Navigation
  39. #DMFB15@melissa_egg Navigation
  40. #DMFB15@melissa_egg Why?
  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,.  
  43. #DMFB15@melissa_egg Website Example
  44. #DMFB15@melissa_egg Website Example 44  
  45. #DMFB15@melissa_egg Website Example
  46. #DMFB15@melissa_egg Better Website Example 46  
  47. #DMFB15@melissa_egg Better Website Example 47  
  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
  50. #DMFB15@melissa_egg
  51. #DMFB15@melissa_egg Users Want Information-Rich Visuals
  52. #DMFB15@melissa_egg Information-Rich •  meaningful to users •  authentic subjects •  full of helpful information
  53. #DMFB15@melissa_egg Decorative “Filler” Photos
  54. #DMFB15@melissa_egg Decorative “Filler” Photos
  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.
  60. #DMFB15@melissa_egg Confused?
  61. #DMFB15@melissa_egg Huh?
  62. #DMFB15@melissa_egg This cat might also have a cape
  63. #DMFB15@melissa_egg Great action shot
  64. #DMFB15@melissa_egg Victory
  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.
  67. #DMFB15@melissa_egg
  68. #DMFB15@melissa_egg Sending Eyes Away
  69. #DMFB15@melissa_egg Sending eyes away
  70. #DMFB15@melissa_egg User Focus Example
  71. #DMFB15@melissa_egg User Focus Example
  72. #DMFB15@melissa_egg Carousels/Sliders
  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
  74. #DMFB15@melissa_egg
  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      

×