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.
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.
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
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%
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
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
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,.
Â
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
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
Â