The document discusses key insights into website user experience (UX) and strategies to enhance user success and engagement. It emphasizes the importance of clear navigation, minimizing cognitive load, and utilizing meaningful visuals over decorative elements. The document also suggests actionable tips for website design to optimize user interaction and satisfaction.

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