SlideShare a Scribd company logo
1 of 19
Download to read offline
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

Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
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 DesignShiran Sanjeewa
 
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!Jayan Narayanan
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patternsdanhermes
 
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 - 2014Shah Muhammad Baig
 
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 07Siegrid Agravante
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
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 PracticesAvijit Chinara
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Lewis Lin 🦊
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEJoseph Ssekono
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 
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_2Lewis Lin 🦊
 
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 )Shervin Mashayekh
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016Mark N Swaine
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
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...Everett McKay
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 

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

Principles of visual consistency
Principles of visual consistencyPrinciples of visual consistency
Principles of visual consistencyHalil Eren Çelik
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren Çelik
 
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?DariaPersell
 
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-2015Harsh Wardhan Dave
 
Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patternsKevinHao14
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Akhil Kumar
 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate DemandWorxwideConsulting1
 
UX Design for ChatBots
UX Design for ChatBotsUX Design for ChatBots
UX Design for ChatBotsYounes Benaomar
 
From Zero to Hero
From Zero to HeroFrom Zero to Hero
From Zero to HeroAndy Marshall
 
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 designInVision App
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01Jayannarayanan uxdesignpresentation 141110023429 conversion gate01
Jayannarayanan uxdesignpresentation 141110023429 conversion gate01Vera Kovaleva
 
UX design presentation
UX design presentationUX design presentation
UX design presentationAjanthan M
 
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?Marc Miquel
 
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 CampFrank La Vigne
 
Uxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesUxpin web ui_design_best_practices
Uxpin web ui_design_best_practicesimdurgesh
 
Specialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerSpecialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerAttiullah Attiaie
 
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 sellInVision App
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick PresentationDeimantas BrandiĹĄauskas
 

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

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 2016Halil Eren Çelik
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchyHalil Eren Çelik
 
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 typographyHalil Eren Çelik
 

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

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal
 
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceanilsa9823
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
 
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcdGovernment polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcdshivubhavv
 

Recently uploaded (20)

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
 
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcdGovernment polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcd
 
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 

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