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
 
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 (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

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 WorkerThousandEyes
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
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 connectorsNanddeep Nachan
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 

Recently uploaded (20)

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
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
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
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 

WCSD-UI