website design with ux in mind

#DMFB15 @melissa_egg

UX Presentation by

Website Design with

Melissa Eggleston

in Mind


Ever say this about a website?

“It’s too easy.”

“It didn’t challenge me.”

“It was way too much fun.”


How often do you fail online?

F


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


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)


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.


There is no “typical user”


Computers way outnumber users


Users Want a Sense of Place


Logo/Tagline

innovationThe Institute for

in Public School Choice

IIPSC


Consistency


Navigation Bar Indicator


Breadcrumbs

Breadcrumb Trail


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.


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.


Hamburger Menu Debate


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


Users Act as if Something is on Fire


What is Satisficing?

Satisficing is making decisions that are good enough, not necessarily optimal.

sufficing + satisfying

Plan for fast-moving, distracted and impatient users.


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%


No time for a “Wall of Words”


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


I waited 25 seconds for this.


Check Your Speed

•  Google PageSpeed Tools or simply search for “test my website speed”

•  Consider recommendations – What can

you fix quickly and easily?


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


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


Users Prefer Using Minimal Brainpower


Meeting User Expectations


Where did I go?


Navigation


Why?


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


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


Website Example


Website Example

44


Website Example


Better Website Example

46


Better Website Example

47


Realistic Design vs. Flat Design


•  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


Users Want Information-Rich Visuals


Information-Rich

•  meaningful to users

•  authentic subjects

•  full of helpful information


Decorative “Filler” Photos


Filler Photos on Mobile Make Us Sad


Better Images for Mobile


Real Images Are Scrutinized


Give me some real bakers!


If your homepage uses a hero image, it damn well better be heroic.


Confused?


Huh?


This cat might also have a cape


Great action shot


Victory


"I know it when I see it.”

-‐ Supreme Court Jus7ce PoLer Stewart Jacobellis v. Ohio (1964)


Learn Some Photography •  Local class with live teacher

•  Lynda.com – Ben Long

This will also raise your video standards and improve your personal photos.


Sending Eyes Away


Sending eyes away


User Focus Example


Carousels/Sliders


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


Resources for Further Learning

Steve Krug’s Don’t Make Me Think book

Nielsen Norman Group weekly e-newsletter

Smashing Magazine usability articles


Talk to your users &

Watch what they do

Final Thought


Ask Me Questions

Email: [email protected] Twitter: @melissa_egg Slides: melissaegg.com/blog