Good UX KarmaGuiding Principles toSimpler / Easier / HappierUser Interface Design

STL UX 2011February 25, 2011

Presented by

Hafiz Huda and Ryan Swarts

HELLO.

Hafiz HudaVP, Executive Creative Director

@lostpear

Ryan Swarts Art Director / Usability Analyst

@swartsr

WHAT IS IT? WHY SHOULD I CARE?

UX KARMA

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

CONTEXT + MAPPINGS

CONTEXT + MAPPINGS

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

CONTEXT + MAPPINGS

REMEMBER THE

DO UNTO OTHERS as you would have them do unto you.

GOLDEN RULE.

WITH

FOR THE

DESIGNEMPATHYUSER.

USER.

PERSON.

YOU ARE A

MOST IMPORTANT...YOU ARE A

Good UX Design

=

Happy People =

Smart Business

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

CONTEXT + MAPPINGS

Our Guiding Principles.

Visual Confidence

Context + Mapping

Make It Easier

Misconceptions

Being Human

Make It Easier

Context + Mapping

Misconceptions

Being Human

Visual Confidence

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

VISUAL CONFIDENCE

Point the way with good hierarchy.

01

No Hierachy = No Confidence

Good hierarchy helps guide the eye through a page of content.

A page without a strong hierarchy can be as stressful to the user as a design without proper space.

Prioritize the intended user interactions.

Methods to define hierarchy.

From Graphic Design: The New Basics — GDBasics.com

Group information into distinct elements.

From BigSpaceship.com

Leverage size to indicate hierarchy.

From BigSpaceship.com

Break up large articles.

From MSNBC.com

We access information in small chunks.

From MSNBC.com

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

VISUAL CONFIDENCE

Make commonly used elements bigger.

02

Size Matters

If people use an area of your website often, make it easier to find and interact with.

Don’t reduce key interaction elements.

The most important call to action should be the biggest on screen.

Pagination Buttons: only 19x19 pixels?

From VEER.com

Large thumbnails to review products.

From Etsy.com

Large BUY NOW button. No subtlety.

From LivingSocial.com

Returning visitors clearly see SIGN IN.

From BankOfAmerica.com

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

VISUAL CONFIDENCE

Give me some room!

03

A little bit of elbow room and whitespace goes a long way

Strike a balance between positive and negative space to highlight content.

Avoid cluttering the visual canvas.

Each key element serves a purpose, so define the boundaries and space to emphasize importance.

Open spaces invite exploration.

From BatamHousing.com — Joel Sanders, Architect | Blesso Lofts, NYC, NY

Letting the page “breathe”

From HUGEinc.com

Let the page breathe.

From Logitech.com

Visual Confidence

Make It Easier

Misconceptions

Being Human

Context + Mapping

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

CONTEXT + MAPPING

Cues and Clues: Guide Your Users.

04

FILL ‘ER UP.

WHERE IS THE GAS TANK LOCATED?

What’s behind door #3?

Where are we? Where we going?

Cues can save people a lot of time and hassle.

Indicate where they are and where they need to go next to complete an action.

Use indicators like color, font weight, shadows, and arrows to guide a person’s eye toward the next steps.

Where do you begin?

From www.facebook.com/BMWUSA

Animated setup: follow the arrow!

From DropBox Application Installation (Mac)

Cues can help your global navigation.

From USAToday.com

Ba-bam! Surprise!

From USAToday.com

Deliver expectations through cues.

What’s the booking process?

From Southwest.com

Guide the user through multiple steps.

From Crocs.com

Users need reassurance on the process.

From Crocs.com

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

CONTEXT + MAPPING

Adaptation: Design Responsively.

05

Consider the context of the interface.

Ubiquitous computing means differentdevices, screens, and situations.

Information and composition shift depending on the needs and affordances of the device.

Placement dictates relevance.

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

From tappinn.com

AWKWARD

PLACEMENT

From 100 yards away, exclusive content.

From http://qranywhere.blogspot.com

CollyLogic.com

“Narrow Version”

CollyLogic.com

“Wide Screen”

Feedly.com

Standard

Feedly.com

Wide Edition

Adaptation saves development/design time.

From CSSgrid.net

Flexible framework adapts to device.

From LessFramework.com

Visual Confidence

Make It Easier

Context + Mapping

Being Human

Misconceptions

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

MAKE IT EASIER

Simplify Things: Kill the Distractions.

06

Too many options become overwhelming

Cut the number of options and your process goes from a chore to a delight.

Limiting options leaves a person feeling more confident and ultimately more satisfied.

Focus on the task goals at hand.

Empower the user to make a decision.

Where do you begin?

From KCSTAR.com

Hierarchy + Limit the story options and ads.

From MSNBC.com

Single call-to-action and clearing obstactles.

From Huggies.com

You’re here to do only one thing. Win. Win.

From www.SUBWAYfreshbuzz.com

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

MAKE IT EASIER

Reduce the number of steps.

07

If possible, reduce the steps in repetative tasks

Examine your user-flow closely: can you combine any steps or remove a few?

Use technology for efficiencies: cookies, pre-populated fields, etc.

Less of a hassle means a happier person.

The double-confirmation:You REALLY sure you wantto watch this program?

bit.lyAuto-Shorteningupon Copy/Paste

Facebook SharingSHARE simultaneously

closes the window

Where’s the phone number?

From SuperPages.com

Click AGAIN to reveal the phone number.

From SuperPages.com

People expect numbers in directories.

From YP.com

Return visits are encouraged.

From HendricksGin.com

Visual Confidence

Make It Easier

Context + Mapping

Being Human

Misconceptions

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

Misconceptions

Users want reinvention.

08

People don’t always want you to reinvent accepted practices

The Myth: As designers, we must create new UI to stay innovative. People love seeing pretty designs.

There’s always room to improve upon old conventions, but consider the user.

Don’t force them to learn established UI elements and interactions.

By going against the grain, are you improving the experience or are you putting up walls?

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGSIS THIS THE BEST LOCATION?

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

PRACTICALvs.

CLEVER?

Not the flair you want on your site.

From TGIFridays.com

NOT A BUTTON

BUTTONS

Most of these buttons are made by http://design-freak.com.

Major complaint about e-readers is that their page numbers didn’t correspond to the page numbers in a printed book.

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

Misconceptions

The Myth of “The Fold.”

09

Newspapers and Screens. People scroll. Really!

The Myth: Users Won’t See Past ”The Fold”

Constant requests to cram as much information above the fold as possible.

Use visual cues (such as cut-off images and text) and compelling content to draw the user down the page.

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

4,314 pixels of postssince January.

Our little Facebook page...

The essential elements are above the fold.

From www.boxee.tv

The essentials.

Great content and features.

Repeat those essentials.

Nice, big content blocks without clutter.

From www.boxee.tv

Thanks for scrolling 2,800+ pixels. Ready to BUY?

From www.boxee.tv

Recommendations

Stop cramming stuff above a specific pixel point in your designs.

The three highest fold locations: 570, 590 and 600 pixels (all different browsers) on 1024×768. FORGET IT.

Offer compelling content for the scroll.

What’s at the bottom? More than a copyright and footer?

When the Fold Matters.

If a specific piece of content is essential to your business, move it to the top.

Advertisers will still want their ads towards the top of the page.

Screen height matters with applications.

Visual Confidence

Make It Easier

Context + Mapping

Misconceptions

Being Human

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

Being Human

Real language. Honesty. Personality.

10

DIVDER PAGE HEADLINE

DIVDER PAGE SUB

DIVDER PAGE HEADLINE

CONTEXT + MAPPINGS

Treat the user as a person

Kill jargon when you can and speak frankly and honestly.

Bring brand personality when appropriate.

Be aware of people’s time and efforts.

Close Button? Just deal.

From KCstar.com

Where to? Where from? Speak Up!

From JetBlue.com

Conversational language works.

From Southwest.com

Congratulate your customers for doing a

good job.

Build your family profile.

From Alice.com

Monkeys make everyone smile.

From MailChimp.com

“Nuts, you had a few people jump ship. Ah, who needs them anyway?”

From MailChimp.com

Discover opportunities to help, guide, and delight.

People gravitate to brands that value them. Customers are people, not simply “users.”

Step in their shoes and you’ll create better digital experiences.

Happy customers. Repeat business. You create fans, followers, and advocates!

UX KARMADESIGNING A BETTER WORLD.

USERS.

WE AREPEOPLE.

MORE THAN

THANKS.

Hafiz Huda@lostpear

Ryan Swarts @swartsr