wcsd-ui

62
How To Fix Bad UI Why UI Makes A Difference Steve Zehngut Zeek Interactive @zengy Saturday, March 24, 12

Upload: steve-zehngut

Post on 19-May-2015

3.373 views

Category:

Technology


0 download

DESCRIPTION

How To Fix Bad UI - 3/24 WordCamp San Diego

TRANSCRIPT

Page 1: WCSD-UI

How To Fix Bad UIWhy UI Makes A Difference

Steve ZehngutZeek Interactive

@zengy

Saturday, March 24, 12

Page 2: WCSD-UI

UI, UX & Usability

Saturday, March 24, 12

Page 3: WCSD-UI

From Wikipedia:

User Interface - The aggregate of means by which users interact with the system (e.g., all the means of input and output)

Saturday, March 24, 12

Page 4: WCSD-UI

From Wikipedia:

User Experience - The architecture and interaction models that impact a user's perception of a device or system (“all aspects of the user’s interaction with the product”).

Saturday, March 24, 12

Page 5: WCSD-UI

“So it seems like UI would deal with the ‘how’ of creating an interface (implementing shiny controls, that sort of thing) and UX would deal with the ‘why’ (creating a good experience for the user).”

Source: http://ux.stackexchange.com/questions/7174/difference-between-ui-and-ux

Saturday, March 24, 12

Page 6: WCSD-UI

From Wikipedia:

Web usability is an approach to make web sites easy to use for an end-user, without the requirement that any specialized training be undertaken.

Saturday, March 24, 12

Page 7: WCSD-UI

Saturday, March 24, 12

Page 8: WCSD-UI

Jakob Nielsenhttp://useit.com

Saturday, March 24, 12

Page 9: WCSD-UI

Saturday, March 24, 12

Page 10: WCSD-UI

Saturday, March 24, 12

Page 11: WCSD-UI

Saturday, March 24, 12

Page 12: WCSD-UI

How To Develop a Sh*tty Website

Saturday, March 24, 12

Page 13: WCSD-UI

Don’t plan.

“Let’s start coding immediately!”

Saturday, March 24, 12

Page 14: WCSD-UI

Defend to the death every development and design decision.

“Don’t tell me how to do my job!”

Saturday, March 24, 12

Page 15: WCSD-UI

Stick with a broken design.

“The client signed off on this and we have a deadline to hit.”

Saturday, March 24, 12

Page 16: WCSD-UI

Shove everything above the fold.

“No one scrolls these days.”

Saturday, March 24, 12

Page 17: WCSD-UI

Put 50 links in your navigation.

“I want every user to be able to find everything right at the top.”

Saturday, March 24, 12

Page 18: WCSD-UI

Allow endless changesfrom the client.

“Wouldn’t it be great if...”

Saturday, March 24, 12

Page 19: WCSD-UI

Common Mistakes

Saturday, March 24, 12

Page 20: WCSD-UI

Inconsistent Layout

Saturday, March 24, 12

Page 21: WCSD-UI

Inconsistent Fonts

Saturday, March 24, 12

Page 22: WCSD-UI

Inconsistent Navigation

Saturday, March 24, 12

Page 23: WCSD-UI

Poor Color Contrast

Saturday, March 24, 12

Page 24: WCSD-UI

Too Many Colors

Saturday, March 24, 12

Page 25: WCSD-UI

No Clear CTAs(Calls To Action)

Saturday, March 24, 12

Page 26: WCSD-UI

Deviating From theFamiliar Browser Interface

Saturday, March 24, 12

Page 27: WCSD-UI

Long Load Times

Saturday, March 24, 12

Page 28: WCSD-UI

404 Errors

Saturday, March 24, 12

Page 29: WCSD-UI

Poor Mobile Experience

Saturday, March 24, 12

Page 30: WCSD-UI

My Process

Saturday, March 24, 12

Page 31: WCSD-UI

Questions To Ask

Saturday, March 24, 12

Page 32: WCSD-UI

Who is the audience?

Saturday, March 24, 12

Page 33: WCSD-UI

What are the goals of the site?Traffic? Uniques? Length of Stay?

Saturday, March 24, 12

Page 34: WCSD-UI

What is the budget?

Saturday, March 24, 12

Page 35: WCSD-UI

What is the timeline?

Saturday, March 24, 12

Page 36: WCSD-UI

Tools of the Trade

Saturday, March 24, 12

Page 37: WCSD-UI

FireFox Plugins

FirebugWeb Developer

Saturday, March 24, 12

Page 38: WCSD-UI

XScope

Saturday, March 24, 12

Page 39: WCSD-UI

Color Schemer Studio

Saturday, March 24, 12

Page 40: WCSD-UI

CSS Generators

http://css3generator.comhttp://www.css3.me

Saturday, March 24, 12

Page 41: WCSD-UI

Site Samples

Saturday, March 24, 12

Page 42: WCSD-UI

Huff Pohttp://huffingtonpost.com

Saturday, March 24, 12

Page 43: WCSD-UI

Toastmastershttp://toastmasters.org

Saturday, March 24, 12

Page 44: WCSD-UI

Mike Ferryhttp://mikeferry.com

Saturday, March 24, 12

Page 45: WCSD-UI

Coming Out Supporthttp://comingoutsupport.com

Saturday, March 24, 12

Page 46: WCSD-UI

Essence Expressionshttp://essenceexpressions.com

Saturday, March 24, 12

Page 47: WCSD-UI

Catholic Radio Dramashttp://catholicradiodramas.com

Saturday, March 24, 12

Page 48: WCSD-UI

Web Kinghttp://webking.com

Saturday, March 24, 12

Page 49: WCSD-UI

Books

Saturday, March 24, 12

Page 50: WCSD-UI

Saturday, March 24, 12

Page 51: WCSD-UI

Saturday, March 24, 12

Page 52: WCSD-UI

Saturday, March 24, 12

Page 53: WCSD-UI

Saturday, March 24, 12

Page 54: WCSD-UI

Saturday, March 24, 12

Page 55: WCSD-UI

What Can You Do Differently?

Saturday, March 24, 12

Page 56: WCSD-UI

Ask questions.

Saturday, March 24, 12

Page 57: WCSD-UI

Listen.

Saturday, March 24, 12

Page 58: WCSD-UI

Be open to criticism.

Saturday, March 24, 12

Page 59: WCSD-UI

Solicit other opinions.

Saturday, March 24, 12

Page 60: WCSD-UI

Beta Test.

Saturday, March 24, 12

Page 61: WCSD-UI

Revise and refine.Do it early and often.

Saturday, March 24, 12

Page 62: WCSD-UI

Steve [email protected]

http://facebook.com/zengyTwitter: @zengy

Saturday, March 24, 12