Mark Calkins
I am a software product manager. I also have expertise in product marketing, marketing, UX design, prototyping and web development.
UX PRINCIPLES
FOR DEVELOPERS
MAKING WEB APPS SIMPLY USABLE
Mark Calkins
VP Development
Bluehost
Goal is no longer about making things possible on the web ...
Now it is all about making web apps extremely easy to use
Left Brain
Logical
Sequential
Rational
Analytical
Objective
Looks at parts
Right Brain
Random
Intuitive
Holistic
Synthesizing
Subjective
Looks at wholes
DEVELOPER
UX DESIGNER
Why is this a challenge for us?
IT MIGHT BE MORE LIKE THIS
solve problems with code
facilitate user goal achieve-ment
You want your users to:
Two Types of FRICTION
Both slow the user down and make the user experience more painful
UX is the measure of
FRICTION
between a user and their goal
Great UX Yields Three Feelings
Delighted
Satisfied
Productive
=> word of mouth
=> increased loyalty
=> become proponents
MINDSET SHIFT
Does the coding decision I'm making benefit the user more or me?
REDUCE COGNITIVE FRICTION
COMMON UX TRAPS
Throwing data on the screen
Expose technical jargon to the user
Forcing the user to think like a dba
Jam as much on the screen as possible
Coding for the power user
Being inconsistent
Creating a messy UI
GOOD UX REQUIRES US TO
UX MYTHS
many of the rules have changed
Counting clicks is important
W h i t e s p a c e i s w a s t e d s p a c e
scrolling is evil
avoid horizontal scrolling
small details don't matter
give users too many choices
Users know what they want
users don't care what your app/site looks like
let's make our app (site) look like apple, google or amazon
WHAT IS OUR GOAL?
Lower cognitive friction
COGNITIVE FRICTION
WHAT CAUSES COGNITIVE FRICTION?
Slow app performance
App is difficult to use
App is difficult to use
App becomes too complex over time
App has too many choices, too many options
Hick's Law
REDUCING COGNITIVE FRICTION?
VISION AND MENTAL HACKS
CENTRAL VISION =
High Res
PERIPHERAL VISION =
Low Res
The brain loves easy to recognize shapes
White space creates low cognitive friction
GROUP
HACK
space,
color
& shapes
delineate
groups
repeating
elements
need
clear
spacing
ALIGNMENT HACK
a single pixel alignment issue increases friction
ATTENTION
HACK
user movement
in user's
peripheral vision
to get their
attention
COLOR HACK
avoid color combinations that create cognitive friction
LEADING HACK
help the user's brain work less by leading them to their goal
PROGRESSIVE HACK
not overwhelming the user by only showing what they need when they need it
STATUS HACK
keep the user's brain calm by keeping them informed
RECOGNITION HACK
always rely on recognition, not recall
MOBILE DEVICE CONSIDERATIONS
Do the same principles apply for responsive apps?
Lines between device classes are blurring
no more phone, tablet & desktop
now it's small, medium & large
reorder media queries so cascades go from small to large screens
Mobile First
Images are challenging for web sites ...
scope images within media queries
picture element
resolution switching
srcset
responsive images
look ahead browser pre-parsers still download all images on mobile devices
For Web Apps Use
vector graphics
font icons
Old Input Model
New Model
We can no longer make assumptions about input based on screen size or form factor.
And it is getting more complex ...
In Conclusion
Resources
slides located at: https://slides.com/markcalkins/ux4devs
provide feedback: https://joind.in/event/openwest-2015
More Resources
By Mark Calkins
User experience is a much neglected aspect of developing web applications. This presentation will explore what UX or user experience is, UX myths and many key principles that can help involve UX principles into your web apps. We’ll review both good and bad examples of web apps and how they use or ignore good UX principles. Finally, we’ll discuss how to add UX testing into your development to give you the information to improve your web apps.
I am a software product manager. I also have expertise in product marketing, marketing, UX design, prototyping and web development.