SlideShare a Scribd company logo
3 Common UX
Mistakes Killing
Good Design
3 Common UX Mistakes
Killing Good Design
Copyright © 2015 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded
or posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed
“Attention: Permissions Request,” to hello@uxpin.com.
Authors
Co-founder and head of product, Kamil pre-
viously worked as a UX/UI Designer at Gru-
pa Nokaut. He studied software engineer-
ing in university, but design and psychology
have always been his greatest passions.
Follow me on Twitter @ziebak
Jerry Cao is a content strategist at UXPin
where he gets to put his overly active imag-
ination to paper every day. In a past life, he
developed content strategies for clients at
Brafton and worked in traditional advertis-
ing at DDB San Francisco. In his spare time
he enjoys playing electric guitar, watching
foreign horror films, and expanding his
knowledge of random facts.
Follow him on Twitter.
3 Common UX Mistakes That Kill
Good Design
As a digital designer, it’s not always possible to be everything
to everyone and wear all of the hats at the same time. Clients
and stakeholders sometimes misunderstand the design pro-
cess. They perhaps don’t always know that backend develop-
ment and UX design are different disciplines to web design
itself and so expect you, the designer, to be the all-knowing,
all-fixing genius.
Photo credit: “brain picture”. Allan Ajifo. Creative Commons.
With this in mind and when you’re relatively new to UX de-
sign, you’ll certainly make some mistakes – nobody is infal-
lible and some projects are just incredibly complex. To help
reaffirm some good fundamentals, we’ve compiled some of
the most common mistakes that we see in UX and some tips
to help you to avoid them.
3 Common UX Mistakes Killing Good Design 5
1.	 Designing for yourself
We’ve all been guilty of the “genius mentality” at some point.
When you work in a creative field, you form strong opinions
and always try to filter facts through your own experience.
But to be a successful designer, you must isolate passion from
ego. You’re not out to prove anything with your design, your
only goal is to help the user while creating a memorable ex-
perience in the process.
Of course, it’s not always easy to distance your wants from
the needs of the user. Designers feel an almost parental sense
of responsibility over their creations, but you must make
sure the responsibility is to users and not your ego.
The best way to learn how to balance restraint with passion
is deconstructing the work of others.
Let’s take a look at the BBQ Cultures site by Weber Grills as
an example of confident design that embraces its no-BS au-
dience.
3 Common UX Mistakes Killing Good Design 6
Photo credit: BBQ Cultures
Photo credit: BBQ Cultures
The bold rich colors, high definition images, and crisp intro
video paired with masculine voiceover all appeal to the out-
doorsman (or weekend warrior, for that matter). The site even
uses a slider to reproduce some of the excitement of snap-
ping open a grill to reveal the smoky meat – as you drag the
3 Common UX Mistakes Killing Good Design 7
hand icon from left to right, the grill lid opens. The mad-libs
style form is also a perfect choice for the site since it creates
self-confidence (no doubt appealing to the male audience).
The site understands the power of narrative, presenting the
product in the context of a camping trip between a group of
friends. But it doesn’t go overboard with design tricks: the
animations and video last just long enough to capture your
interest, then the site lets illustrations explain how to actu-
ally use the grill.
Photo credit: Google Mobile Friendly Test Tool
Richly animated yet content-focused, BBQ Cultures further
delivers a consistent experience across all devices. When run
through the Google Mobile Friendly Test Tool, the site even
earns an excellent score for mobile optimization.
3 Common UX Mistakes Killing Good Design 8
Now that we’ve explored a visual case study, let’s examine
a few more tips on staying grounded in the design process
(from our free e-book Web UI Best Practices):
•	 Always put yourself in the user’s shoes at every stage of
the design process.
•	 Create user journeys to map out how the site will be used
by different user groups.
•	 Work on buyer personas to further understand how dif-
ferent users groups navigate websites and what they want
from the site and the company.
•	 Identify difficult aspects of the UI in order to create initial
wireframes for those parts so that it fits in with UX prac-
tices such as user mapping and journeys.
•	 Test on as many real-world devices as possible. If the proj-
ect is big enough, conduct some field research with users
(at the minimum, you should always run moderated or un-
moderated usability tests).
•	 Carry out A/B testing to test various design elements such
as colors, buttons, text, images, etc. .
3 Common UX Mistakes Killing Good Design 9
2.	 Mistaking UX for UI
Like we described in Chapter 1 of Web UI Best Practices, UX
does not equal UI.
Mixing up UI with UX is a common mistake, probably due
to the renewed interest that we’ve seen in both disciplines.
It’s not surprising, as the abbreviations are similar and this
is enough to confuse some people who aren’t familiar with
the disciplines in the first instance.
The other reason is that the two are of course related. UI is
concerned with how the user interacts with the interface
of the site, which is naturally a part of the overall user ex-
perience.
Photo credit: Hello Erik
3 Common UX Mistakes Killing Good Design 10
But while UI is all about which buttons to press and where
to go next (e.g. the clarity of the interface with regards to
user goals), UX is concerned with how the overall design
makes the user feel.
In a nutshell, the goal of UI design is to create efficient yet
captivating interfaces that help create a good overall user ex-
perience.
Referring back to our previous point, usability testing ensures
that you remain focused on the overall experience when de-
signing the interface. Don’t be guilty of the Dribbblisation of
Design. Before you even touch Photoshop or Sketch, know
your users – their fears, their goals, their desires, behaviors,
and ambitions.
Understand that like the graphic above shows, UX requires
mastery of many different disciplines. Just because you have
a beautiful interface doesn’t mean it will work well, and just
because you have a functional interface doesn’t mean peo-
ple will love it.
When it comes to UX or UI design, start with the content
first. After some initial user research, create an interactive
site map that actually clicks through to your pages. Wheth-
3 Common UX Mistakes Killing Good Design 11
er you’re using Keynote or a digital prototyping tool, always
start with a site map so you can gauge the overall flow of
the experience.
Photo credit: UXPin via Barrel NY
As you can see above from design agency Barrel NY, this site
map documents the information architecture for your site.
Once you’ve created this page, make sure you allow each
“branch” to then click through to the wireframe or proto-
type of the page itself. We’ve tried this ourselves and it works
in just about any tool from specialized prototyping apps to
presentation software.
3 Common UX Mistakes Killing Good Design 12
By working through the content first before wireframing,
you prioritize your design accordingly:
•	 Content structure
•	 Interaction design
•	 Visual design
This process makes sense because content forms the founda-
tion of all design, and it’s what users actually care about. Sec-
ondly, iterating on the interactions through low or mid-fi-
delity prototyping helps you better control the flow through
that content. Thirdly, or usually simultaneously, you then
polish the visual design so the experience feels as inviting
as possible (considering that vision is our strongest sense).
3 Common UX Mistakes Killing Good Design 13
3.	 Asking users for too much information
Users are lazy. The more forms you add, the less motivated
users feel.
Like we described in Interaction Design Best Practices, you gen-
erally want to create as frictionless an experience as possi-
ble. Duolingo, for example, only asks for the language you
want to learn and enough contact information to set up an
account.
Photo credit: Duolingo Signup form
A study carried out on Imaginary Landscapes some years
ago actually tested the theory that too many fields discour-
age user signups. The test compared an 11 field form with
one with only 4 form fields.
3 Common UX Mistakes Killing Good Design 14
The form with 11 fields required the following information:
1.	 Name
2.	 Company
3.	 Address
4.	 City
5.	 State
6.	 Zip
7.	 Phone
8.	 Fax
9.	 Email
10.	Preferred contact method
11.	Comments
It also included checkboxes at the end asking how the visi-
tor heard about the site.
The shorter, 4-field form cut down the information required:
1.	 Name
2.	 Phone
3.	 Email
4.	 Comments
Of course, you could shorten the form further by removing
the phone number and comments (which generally aren’t
that helpful). Depending on your industry, a phone number
3 Common UX Mistakes Killing Good Design 15
might be critical for lead generation, but you’ll find people
are far more hesitant to risk unsolicited calls.
So what was the bottom line of the study? They found that
the shorter form’s signups exceeded that of the longer form
by 140%. Additionally, the number of conversions “increased
sharply with the use of the more abbreviated form” by near-
ly 120%. The study also found that the removed fields had
“no impact on the quality of conversions.”
Photo credit: Squarespace
In order to arrive at the correct number of fields required,
you should study your users and first define exactly all of
the necessary data that you need to collect from them. While
we can’t emphasize enough that you shouldn’t list a DMV-
3 Common UX Mistakes Killing Good Design 16
like form, we also understand that there’s no magic number.
The reality is that it’s a tradeoff. You’re dealing with com-
peting priorities: sales teams usually want more lead infor-
mation, while designers fight for the best user experience
(which indirectly meets business needs). The only way to
strike a balance is to test.
For example, Expedia found that removing one field from
their form (for Company Name – it confused users as to what
they were supposed to enter) caused an upsurge in sales to
the tune of $12m.
Those types of results are reason enough to justify A/B test-
ing on form elements.
3 Common UX Mistakes Killing Good Design 17
5.	 Further Tips and Advice
You probably know this, but we’ve only skimmed the surface.
Nonetheless, there are some simple rules to bear in mind,
although you should always approach each design project
individually.
•	Keep it simple, stupid– Minimalism and flat design are so
popular because they strip away everything that doesn’t di-
rectly help users engage with content. Like we recommend-
ed in Web Design for the Human Eye, adopt a content-first de-
sign philosophy and practice sculpture through subtraction.
•	Navigation – Build your navigation with a mobile-first
philosophy. Ensure that enough padding exists around
clickable areas so that they don’t encroach on surround-
ing fields. More importantly, design each page as if it will
be the user’s first experience with your site. A “lost trav-
eler” design mentality ensures that your site always pro-
vides clear orientation (the user’s current location) as well
as simple navigation (the next step in the journey).
•	Psychological tricks – All design is based in psychology.
Your design must foster trust, inspire emotions and more,
so read up on topics such as color psychology, personal-
ity in design, and the seductive art of interaction design.
3 Common UX Mistakes Killing Good Design 18
We understand that it’s a lot to wrap your head around, so
it’s normal to make errors while you’re still learning the dis-
cipline (which is equal parts art form). When in doubt, ask
yourself what the user would do, then slowly work your way
back to the business goals.
Business goals might decide the destination, but user re-
quirements must always steer the ship.
Start prototyping better experiences in UXPin (free trial)
Complete prototyping framework for web and mobile
Collaboration and feedback for any team size
Lo-fi to hi-fi design in a single tool
Integration with Photoshop and Sketch
Everything you ever wanted
in a UX Design Platform
TRY IT NOW FOR FREE

More Related Content

What's hot

What's hot (18)

Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patterns
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILE
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 
Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2
 
UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 

Similar to 3 common ux mistakes killing good design

Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
Akhil Kumar
 
Graphic Design For Developers Richmond Code Camp
Graphic Design For Developers Richmond Code CampGraphic Design For Developers Richmond Code Camp
Graphic Design For Developers Richmond Code Camp
Frank La Vigne
 

Similar to 3 common ux mistakes killing good design (20)

Principles of visual consistency
Principles of visual consistencyPrinciples of visual consistency
Principles of visual consistency
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate Demand
 
UX Design for ChatBots
UX Design for ChatBotsUX Design for ChatBots
UX Design for ChatBots
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
 
From Zero to Hero
From Zero to HeroFrom Zero to Hero
From Zero to Hero
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
 
UX design presentation
UX design presentationUX design presentation
UX design presentation
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
Graphic Design For Developers Richmond Code Camp
Graphic Design For Developers Richmond Code CampGraphic Design For Developers Richmond Code Camp
Graphic Design For Developers Richmond Code Camp
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practices
 
Specialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerSpecialization for Web & Graphic Designer
Specialization for Web & Graphic Designer
 
How to design enterprise apps that sell
How to design enterprise apps that sellHow to design enterprise apps that sell
How to design enterprise apps that sell
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
 

More from Halil Eren Çelik (6)

The Best Web Designs Of 2015 and 2016
The Best Web Designs Of 2015 and 2016The Best Web Designs Of 2015 and 2016
The Best Web Designs Of 2015 and 2016
 
Mobile card_interfaces
Mobile card_interfacesMobile card_interfaces
Mobile card_interfaces
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchy
 
flat design and colors
flat design and colorsflat design and colors
flat design and colors
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 

Recently uploaded

CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
SudhanshuMandlik
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
anasabutalha2013
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 

Recently uploaded (14)

CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
The Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to FashionThe Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to Fashion
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
BIT- Pinal .H. Prajapati Graphic Designer
BIT- Pinal .H. Prajapati  Graphic DesignerBIT- Pinal .H. Prajapati  Graphic Designer
BIT- Pinal .H. Prajapati Graphic Designer
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptx
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 

3 common ux mistakes killing good design

  • 1. 3 Common UX Mistakes Killing Good Design
  • 2. 3 Common UX Mistakes Killing Good Design Copyright © 2015 by UXPin Inc. All rights reserved. No part of this publication text may be uploaded or posted online without the prior written permission of the publisher. For permission requests, write to the publisher, addressed “Attention: Permissions Request,” to hello@uxpin.com.
  • 3. Authors Co-founder and head of product, Kamil pre- viously worked as a UX/UI Designer at Gru- pa Nokaut. He studied software engineer- ing in university, but design and psychology have always been his greatest passions. Follow me on Twitter @ziebak Jerry Cao is a content strategist at UXPin where he gets to put his overly active imag- ination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertis- ing at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.
  • 4. 3 Common UX Mistakes That Kill Good Design As a digital designer, it’s not always possible to be everything to everyone and wear all of the hats at the same time. Clients and stakeholders sometimes misunderstand the design pro- cess. They perhaps don’t always know that backend develop- ment and UX design are different disciplines to web design itself and so expect you, the designer, to be the all-knowing, all-fixing genius. Photo credit: “brain picture”. Allan Ajifo. Creative Commons. With this in mind and when you’re relatively new to UX de- sign, you’ll certainly make some mistakes – nobody is infal- lible and some projects are just incredibly complex. To help reaffirm some good fundamentals, we’ve compiled some of the most common mistakes that we see in UX and some tips to help you to avoid them.
  • 5. 3 Common UX Mistakes Killing Good Design 5 1. Designing for yourself We’ve all been guilty of the “genius mentality” at some point. When you work in a creative field, you form strong opinions and always try to filter facts through your own experience. But to be a successful designer, you must isolate passion from ego. You’re not out to prove anything with your design, your only goal is to help the user while creating a memorable ex- perience in the process. Of course, it’s not always easy to distance your wants from the needs of the user. Designers feel an almost parental sense of responsibility over their creations, but you must make sure the responsibility is to users and not your ego. The best way to learn how to balance restraint with passion is deconstructing the work of others. Let’s take a look at the BBQ Cultures site by Weber Grills as an example of confident design that embraces its no-BS au- dience.
  • 6. 3 Common UX Mistakes Killing Good Design 6 Photo credit: BBQ Cultures Photo credit: BBQ Cultures The bold rich colors, high definition images, and crisp intro video paired with masculine voiceover all appeal to the out- doorsman (or weekend warrior, for that matter). The site even uses a slider to reproduce some of the excitement of snap- ping open a grill to reveal the smoky meat – as you drag the
  • 7. 3 Common UX Mistakes Killing Good Design 7 hand icon from left to right, the grill lid opens. The mad-libs style form is also a perfect choice for the site since it creates self-confidence (no doubt appealing to the male audience). The site understands the power of narrative, presenting the product in the context of a camping trip between a group of friends. But it doesn’t go overboard with design tricks: the animations and video last just long enough to capture your interest, then the site lets illustrations explain how to actu- ally use the grill. Photo credit: Google Mobile Friendly Test Tool Richly animated yet content-focused, BBQ Cultures further delivers a consistent experience across all devices. When run through the Google Mobile Friendly Test Tool, the site even earns an excellent score for mobile optimization.
  • 8. 3 Common UX Mistakes Killing Good Design 8 Now that we’ve explored a visual case study, let’s examine a few more tips on staying grounded in the design process (from our free e-book Web UI Best Practices): • Always put yourself in the user’s shoes at every stage of the design process. • Create user journeys to map out how the site will be used by different user groups. • Work on buyer personas to further understand how dif- ferent users groups navigate websites and what they want from the site and the company. • Identify difficult aspects of the UI in order to create initial wireframes for those parts so that it fits in with UX prac- tices such as user mapping and journeys. • Test on as many real-world devices as possible. If the proj- ect is big enough, conduct some field research with users (at the minimum, you should always run moderated or un- moderated usability tests). • Carry out A/B testing to test various design elements such as colors, buttons, text, images, etc. .
  • 9. 3 Common UX Mistakes Killing Good Design 9 2. Mistaking UX for UI Like we described in Chapter 1 of Web UI Best Practices, UX does not equal UI. Mixing up UI with UX is a common mistake, probably due to the renewed interest that we’ve seen in both disciplines. It’s not surprising, as the abbreviations are similar and this is enough to confuse some people who aren’t familiar with the disciplines in the first instance. The other reason is that the two are of course related. UI is concerned with how the user interacts with the interface of the site, which is naturally a part of the overall user ex- perience. Photo credit: Hello Erik
  • 10. 3 Common UX Mistakes Killing Good Design 10 But while UI is all about which buttons to press and where to go next (e.g. the clarity of the interface with regards to user goals), UX is concerned with how the overall design makes the user feel. In a nutshell, the goal of UI design is to create efficient yet captivating interfaces that help create a good overall user ex- perience. Referring back to our previous point, usability testing ensures that you remain focused on the overall experience when de- signing the interface. Don’t be guilty of the Dribbblisation of Design. Before you even touch Photoshop or Sketch, know your users – their fears, their goals, their desires, behaviors, and ambitions. Understand that like the graphic above shows, UX requires mastery of many different disciplines. Just because you have a beautiful interface doesn’t mean it will work well, and just because you have a functional interface doesn’t mean peo- ple will love it. When it comes to UX or UI design, start with the content first. After some initial user research, create an interactive site map that actually clicks through to your pages. Wheth-
  • 11. 3 Common UX Mistakes Killing Good Design 11 er you’re using Keynote or a digital prototyping tool, always start with a site map so you can gauge the overall flow of the experience. Photo credit: UXPin via Barrel NY As you can see above from design agency Barrel NY, this site map documents the information architecture for your site. Once you’ve created this page, make sure you allow each “branch” to then click through to the wireframe or proto- type of the page itself. We’ve tried this ourselves and it works in just about any tool from specialized prototyping apps to presentation software.
  • 12. 3 Common UX Mistakes Killing Good Design 12 By working through the content first before wireframing, you prioritize your design accordingly: • Content structure • Interaction design • Visual design This process makes sense because content forms the founda- tion of all design, and it’s what users actually care about. Sec- ondly, iterating on the interactions through low or mid-fi- delity prototyping helps you better control the flow through that content. Thirdly, or usually simultaneously, you then polish the visual design so the experience feels as inviting as possible (considering that vision is our strongest sense).
  • 13. 3 Common UX Mistakes Killing Good Design 13 3. Asking users for too much information Users are lazy. The more forms you add, the less motivated users feel. Like we described in Interaction Design Best Practices, you gen- erally want to create as frictionless an experience as possi- ble. Duolingo, for example, only asks for the language you want to learn and enough contact information to set up an account. Photo credit: Duolingo Signup form A study carried out on Imaginary Landscapes some years ago actually tested the theory that too many fields discour- age user signups. The test compared an 11 field form with one with only 4 form fields.
  • 14. 3 Common UX Mistakes Killing Good Design 14 The form with 11 fields required the following information: 1. Name 2. Company 3. Address 4. City 5. State 6. Zip 7. Phone 8. Fax 9. Email 10. Preferred contact method 11. Comments It also included checkboxes at the end asking how the visi- tor heard about the site. The shorter, 4-field form cut down the information required: 1. Name 2. Phone 3. Email 4. Comments Of course, you could shorten the form further by removing the phone number and comments (which generally aren’t that helpful). Depending on your industry, a phone number
  • 15. 3 Common UX Mistakes Killing Good Design 15 might be critical for lead generation, but you’ll find people are far more hesitant to risk unsolicited calls. So what was the bottom line of the study? They found that the shorter form’s signups exceeded that of the longer form by 140%. Additionally, the number of conversions “increased sharply with the use of the more abbreviated form” by near- ly 120%. The study also found that the removed fields had “no impact on the quality of conversions.” Photo credit: Squarespace In order to arrive at the correct number of fields required, you should study your users and first define exactly all of the necessary data that you need to collect from them. While we can’t emphasize enough that you shouldn’t list a DMV-
  • 16. 3 Common UX Mistakes Killing Good Design 16 like form, we also understand that there’s no magic number. The reality is that it’s a tradeoff. You’re dealing with com- peting priorities: sales teams usually want more lead infor- mation, while designers fight for the best user experience (which indirectly meets business needs). The only way to strike a balance is to test. For example, Expedia found that removing one field from their form (for Company Name – it confused users as to what they were supposed to enter) caused an upsurge in sales to the tune of $12m. Those types of results are reason enough to justify A/B test- ing on form elements.
  • 17. 3 Common UX Mistakes Killing Good Design 17 5. Further Tips and Advice You probably know this, but we’ve only skimmed the surface. Nonetheless, there are some simple rules to bear in mind, although you should always approach each design project individually. • Keep it simple, stupid– Minimalism and flat design are so popular because they strip away everything that doesn’t di- rectly help users engage with content. Like we recommend- ed in Web Design for the Human Eye, adopt a content-first de- sign philosophy and practice sculpture through subtraction. • Navigation – Build your navigation with a mobile-first philosophy. Ensure that enough padding exists around clickable areas so that they don’t encroach on surround- ing fields. More importantly, design each page as if it will be the user’s first experience with your site. A “lost trav- eler” design mentality ensures that your site always pro- vides clear orientation (the user’s current location) as well as simple navigation (the next step in the journey). • Psychological tricks – All design is based in psychology. Your design must foster trust, inspire emotions and more, so read up on topics such as color psychology, personal- ity in design, and the seductive art of interaction design.
  • 18. 3 Common UX Mistakes Killing Good Design 18 We understand that it’s a lot to wrap your head around, so it’s normal to make errors while you’re still learning the dis- cipline (which is equal parts art form). When in doubt, ask yourself what the user would do, then slowly work your way back to the business goals. Business goals might decide the destination, but user re- quirements must always steer the ship. Start prototyping better experiences in UXPin (free trial)
  • 19. Complete prototyping framework for web and mobile Collaboration and feedback for any team size Lo-fi to hi-fi design in a single tool Integration with Photoshop and Sketch Everything you ever wanted in a UX Design Platform TRY IT NOW FOR FREE