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

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 WorksIdris Fashan
 
Responsive design presentation
Responsive design presentationResponsive design presentation
Responsive design presentationMario Noble
 
Adapting to the Unknown
Adapting to the UnknownAdapting to the Unknown
Adapting to the UnknownR/GA
 
BuddyPress and bbPress
BuddyPress and bbPressBuddyPress and bbPress
BuddyPress and bbPressJohn Jacoby
 
Concurrent Programming Using The Disruptor - Copenhagen
Concurrent Programming Using The Disruptor - CopenhagenConcurrent Programming Using The Disruptor - Copenhagen
Concurrent Programming Using The Disruptor - CopenhagenTrisha Gee
 
7pitfall for crappy UI design
7pitfall for crappy UI design7pitfall for crappy UI design
7pitfall for crappy UI designjunxiao
 
Email marketing and customer retention
Email marketing and customer retentionEmail marketing and customer retention
Email marketing and customer retentionBlue Sky Factory
 
Strategy for a successful WordPress project
Strategy for a successful WordPress projectStrategy for a successful WordPress project
Strategy for a successful WordPress projectWes Chyrchel
 
Chris Boos, arago AG: Big Data means new programs
Chris Boos, arago AG: Big Data means new programsChris Boos, arago AG: Big Data means new programs
Chris Boos, arago AG: Big Data means new programsCloudcamp
 
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 TVeswcsummerschool
 
University of Abertay Dundee - evening
University of Abertay Dundee - eveningUniversity of Abertay Dundee - evening
University of Abertay Dundee - eveningRachel Andrew
 

Similar to WCSD-UI (12)

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
 
Chris Boos, arago AG: Big Data means new programs
Chris Boos, arago AG: Big Data means new programsChris Boos, arago AG: Big Data means new programs
Chris Boos, arago AG: Big Data means new programs
 
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

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 

Recently uploaded (20)

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 

WCSD-UI