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

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
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
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
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
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
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
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
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
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
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
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
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
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 

WCSD-UI