Wednesday, 15 October 2014

UX Hacks: Leading the User

Here are a few quick UX tips, tricks and hacks taken from the Hacking the User Experience Pluralsight course.

Original UI:

image

UI redesigned to remove noise and simplify the design:

image

Leading the user

Visual clues added to lead the user through the process (step 1, 2 and 3):

image

Another option for leading the user is an introduction overlay:

image

A third option could be to introduce a wizard:

image

Some more UX resources:

http://usabilityhub.com

image

image

Calculating color contrast in JavaScript

image

To calculate which foreground color to use on a background we have the following function:

Taken from: http://24ways.org/2010/calculating-color-contrast/

You can use this website to confirm it meets the W3C standards:  http://snook.ca/technical/colour_contrast/colour.html

Tuesday, 14 October 2014