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:

  • Be more productive with less training
  • Feel more satisfaction using your app

Two Types of FRICTION

  • Cognitive friction - mental challenges
  • Emotional friction - feeling challenges

 

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

  • YOU love to solve technical problems
  • A UX focus is about coding for a new platform -- the human brain

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

  • present data that is meaningful
  • use terms your users will understand
  • display just enough information
  • code for the common user
  • be consistent throughout the app
  • deliver a clean UI

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

  • Increases needless brain activity
  • Breaks in user's flow of thinking

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

  • numbering the steps
  • onboarding overlays
  • wizards

PROGRESSIVE HACK

not overwhelming the user by only showing what they need when they need it

  • just-in-time information
  • make common options and commands visible
  • hide less common options

STATUS HACK

keep the user's brain calm by keeping them informed

  • provide up-to-date information
  • animated countdown bar

RECOGNITION HACK

always rely on recognition, not recall

  • icons
  • visual previews
  • list of things to
    choose from

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

  • UX is all about minimizing cognitive friction
  • Mental and visual hacks help us minimize cognitive friction
  • UX applies to small, medium and large screens
  • Don’t Make Me Think, Steve Krug
  • Lean UX, Jeff Gothelf & Josh Seiden
  • Effective UI, Jonathan Anderson, John McRee, Robb Wilson & the EffectiveUI Team
  • User-Centered Design, Travis Lowdermilk
  • Web Design for Developers, Brian Hogan
  • User Experience Design, Smashing Magazine
  • UX for Lean Startups, Laura Klein

Resources

slides located at:  https://slides.com/markcalkins/ux4devs

provide feedback:  https://joind.in/event/openwest-2015

More Resources

UX Principles for Developers

By Mark Calkins

UX Principles for Developers

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.

  • 1,112