SlideShare a Scribd company logo
1 of 62
Download to read offline
How To Fix Bad UI
                         Why UI Makes A Difference


                               Steve Zehngut
                              Zeek 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 Nielsen
                         http://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 changes
                             from 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 the
                         Familiar 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

                           Firebug
                         Web Developer




Saturday, March 24, 12
XScope




Saturday, March 24, 12
Color Schemer Studio




Saturday, March 24, 12
CSS Generators

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




Saturday, March 24, 12
Site Samples




Saturday, March 24, 12
Huff Po
                         http://huffingtonpost.com




Saturday, March 24, 12
Toastmasters
                         http://toastmasters.org




Saturday, March 24, 12
Mike Ferry
                         http://mikeferry.com




Saturday, March 24, 12
Coming Out Support
                         http://comingoutsupport.com




Saturday, March 24, 12
Essence Expressions
                         http://essenceexpressions.com




Saturday, March 24, 12
Catholic Radio Dramas
                         http://catholicradiodramas.com




Saturday, March 24, 12
Web King
                         http://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
Steve Zehngut
                             steve@zeek.com

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




Saturday, March 24, 12

More Related Content

Similar to WCSD-UI

ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TVESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
eswcsummerschool
 

Similar to WCSD-UI (11)

Blogging for Business and SEO that Works
Blogging for Business and SEO that WorksBlogging for Business and SEO that Works
Blogging for Business and SEO that Works
 
Responsive design presentation
Responsive design presentationResponsive design presentation
Responsive design presentation
 
Adapting to the Unknown
Adapting to the UnknownAdapting to the Unknown
Adapting to the Unknown
 
BuddyPress and bbPress
BuddyPress and bbPressBuddyPress and bbPress
BuddyPress and bbPress
 
Concurrent Programming Using The Disruptor - Copenhagen
Concurrent Programming Using The Disruptor - CopenhagenConcurrent Programming Using The Disruptor - Copenhagen
Concurrent Programming Using The Disruptor - Copenhagen
 
7pitfall for crappy UI design
7pitfall for crappy UI design7pitfall for crappy UI design
7pitfall for crappy UI design
 
Email marketing and customer retention
Email marketing and customer retentionEmail marketing and customer retention
Email marketing and customer retention
 
Strategy for a successful WordPress project
Strategy for a successful WordPress projectStrategy for a successful WordPress project
Strategy for a successful WordPress project
 
Wordcamps 2013
Wordcamps 2013Wordcamps 2013
Wordcamps 2013
 
ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TVESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
ESWC SS 2012 - Thursday Keynote Lora Aroyo: NoTube. This is future TV
 
University of Abertay Dundee - evening
University of Abertay Dundee - eveningUniversity of Abertay Dundee - evening
University of Abertay Dundee - evening
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

WCSD-UI