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

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
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
 
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
 
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 Processorsdebabhi2
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
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 SavingEdi Saputra
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
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
 
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
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
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 educationjfdjdjcjdnsjd
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
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
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 

Recently uploaded (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
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
 
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
 
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
 
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 ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
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
 
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
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
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...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

WCSD-UI