wcsd-ui
DESCRIPTION
How To Fix Bad UI - 3/24 WordCamp San DiegoTRANSCRIPT
How To Fix Bad UIWhy UI Makes A Difference
Steve ZehngutZeek Interactive
@zengy
Saturday, March 24, 12
UI, UX & Usability
Saturday, March 24, 12
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
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
“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
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
Saturday, March 24, 12
Jakob Nielsenhttp://useit.com
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
How To Develop a Sh*tty Website
Saturday, March 24, 12
Don’t plan.
“Let’s start coding immediately!”
Saturday, March 24, 12
Defend to the death every development and design decision.
“Don’t tell me how to do my job!”
Saturday, March 24, 12
Stick with a broken design.
“The client signed off on this and we have a deadline to hit.”
Saturday, March 24, 12
Shove everything above the fold.
“No one scrolls these days.”
Saturday, March 24, 12
Put 50 links in your navigation.
“I want every user to be able to find everything right at the top.”
Saturday, March 24, 12
Allow endless changesfrom the client.
“Wouldn’t it be great if...”
Saturday, March 24, 12
Common Mistakes
Saturday, March 24, 12
Inconsistent Layout
Saturday, March 24, 12
Inconsistent Fonts
Saturday, March 24, 12
Inconsistent Navigation
Saturday, March 24, 12
Poor Color Contrast
Saturday, March 24, 12
Too Many Colors
Saturday, March 24, 12
No Clear CTAs(Calls To Action)
Saturday, March 24, 12
Deviating From theFamiliar Browser Interface
Saturday, March 24, 12
Long Load Times
Saturday, March 24, 12
404 Errors
Saturday, March 24, 12
Poor Mobile Experience
Saturday, March 24, 12
My Process
Saturday, March 24, 12
Questions To Ask
Saturday, March 24, 12
Who is the audience?
Saturday, March 24, 12
What are the goals of the site?Traffic? Uniques? Length of Stay?
Saturday, March 24, 12
What is the budget?
Saturday, March 24, 12
What is the timeline?
Saturday, March 24, 12
Tools of the Trade
Saturday, March 24, 12
FireFox Plugins
FirebugWeb Developer
Saturday, March 24, 12
XScope
Saturday, March 24, 12
Color Schemer Studio
Saturday, March 24, 12
CSS Generators
http://css3generator.comhttp://www.css3.me
Saturday, March 24, 12
Site Samples
Saturday, March 24, 12
Huff Pohttp://huffingtonpost.com
Saturday, March 24, 12
Toastmastershttp://toastmasters.org
Saturday, March 24, 12
Mike Ferryhttp://mikeferry.com
Saturday, March 24, 12
Coming Out Supporthttp://comingoutsupport.com
Saturday, March 24, 12
Essence Expressionshttp://essenceexpressions.com
Saturday, March 24, 12
Catholic Radio Dramashttp://catholicradiodramas.com
Saturday, March 24, 12
Web Kinghttp://webking.com
Saturday, March 24, 12
Books
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
What Can You Do Differently?
Saturday, March 24, 12
Ask questions.
Saturday, March 24, 12
Listen.
Saturday, March 24, 12
Be open to criticism.
Saturday, March 24, 12
Solicit other opinions.
Saturday, March 24, 12
Beta Test.
Saturday, March 24, 12
Revise and refine.Do it early and often.
Saturday, March 24, 12