EVALUATING THE USER

INTERFACE AND USER

EXPERIENCE

Lisa Rex @lisarex

http://www.lisarex.com
Saturday, 20 June 2009 1
 WHO AM I?

Very new to Drupal

Web Design background

Independent Quality
Assurance Analyst

Saturday, 20 June 2009 2

 AGENDA (OR NOT)

What UI/UX Evaluation Is and Isn’t

Ten Simple Yet Important Things to

Evaluate

Automate with Selenium IDE

Saturday, 20 June 2009 3

 A UI/UX EVAL IS...

Finding and reporting resolvable...

errors inconsistencies

typos kinks
bugs
cock-ups

...before the public, client or stakeholders find them

Saturday, 20 June 2009 4

 ALSO...

Best done by someone other than the creation team

Test as often as possible

Great for the Agile methodology

Saturday, 20 June 2009 5

 A UI/UX EVAL ISN’T...

Supposed to make you feel bad about your work

A waste of money (when done properly)

A great way to be popular with developers

Unit testing, regression testing, stress testing, etc.

Saturday, 20 June 2009 6

 WHEN YOU DO AN
EVALUATION

The best way to ensure a truly professional, kick-ass

deliverable

Agree on areas to focus on up front

Agree on reporting method

Keep it flexible and fun

Saturday, 20 June 2009 7

 Ten Simple Yet
Important Things to
Evaluate

Saturday, 20 June 2009 8

 1. SCREEN
RESOLUTIONS

Saturday, 20 June 2009 9

Saturday, 20 June 2009 10
Saturday, 20 June 2009 11
Saturday, 20 June 2009 12
 SCREEN RESOLUTIONS

Content needs to sit above the fold

Users need to know the pages has changed

1024x768 has the highest usage worldwide

Source: http://marketshare.hitslink.com/report.aspx?qprid=17

43% of users use 1024x768 or lower

Source: http://www.w3schools.com/browsers/browsers_display.asp

Can test your fold with jpgs in the browser

Saturday, 20 June 2009 13

 SCREEN RESOLUTIONS

Web Developer Firefox extension lets you resize the

window:

Right click > Web Developer > resize > Edit Resize
dimensions

Enter a variety of popular resolutions for repeat use

Try your page in other resolutions online

MeasureIt is a Firefox add-on that allows you to

measure screen elements in pixels

Saturday, 20 June 2009 14

 SCREEN RESOLUTIONS

There are also

40,000,000
iPhones
with browsing
capability

(plus all the other

mobile devices)

Saturday, 20 June 2009 15

 2. FOREGROUND AND
BACKGROUND COLOR
CONTRAST

Saturday, 20 June 2009 16

 COLOR CONTRAST

Sadly, eyes degenerate with age :(

10% of men suffer from colorblindness

in the United States
Source: "Color Blindness: More Prevalent Among Males". Hhmi.org. http://www.hhmi.org/senses/b130.html.

There should be sufficient foreground and

background contrast in color and brightness of any
page element (link, hover, background colors etc)

Saturday, 20 June 2009 17

 COLOR CONTRAST

Saturday, 20 June 2009 18

 COLOR CONTRAST

Don’t make users hunt

for inline links

Saturday, 20 June 2009 19

 COLOR CONTRAST

Use the Juicy Studio

Colour Contrast
Analyser Firefox
Add-on

Shows pass/fail on
Luminosity Contrast
Ratio, Difference in
Brightness and
Difference in Color

Saturday, 20 June 2009 20

 COLOR CONTRAST

Saturday, 20 June 2009 21

 COLOR CONTRAST

Saturday, 20 June 2009 22

 3. CUSTOM 404 ERROR
PAGE

Saturday, 20 June 2009 23

 FAIRLY USELESS
DEFAULT ERROR PAGE

Saturday, 20 June 2009 24

 NOT-GREAT DEFAULT
ERROR PAGE

Saturday, 20 June 2009 25

 DEFAULT DRUPAL
ERROR PAGE

Saturday, 20 June 2009 26

 CUTE(?) CUSTOM
ERROR PAGE

Saturday, 20 June 2009 27

 CUTE(?) CUSTOM
ERROR PAGE

Saturday, 20 June 2009 28

 SILLY BUT GOOD
CUSTOM ERROR PAGE

Saturday, 20 June 2009 29

 GOOD DRUPAL CUSTOM
ERROR PAGE

Saturday, 20 June 2009 30

 4. SEARCH RESULTS

Saturday, 20 June 2009 31

 SEARCH RESULTS

Allow people to get to information fast

Style to be scannable

Manipulate-able (is that a word?)

Saturday, 20 June 2009 32

 SEARCH RESULTS

Saturday, 20 June 2009 33

 SEARCH RESULTS

Saturday, 20 June 2009 34

 SEARCH RESULTS

Made scannable
with dotted lines
and avatars

Date info

Links distinctive
from body copy

Saturday, 20 June 2009 35

 SEARCH RESULTS

Saturday, 20 June 2009 36

 SEARCH RESULTS

Saturday, 20 June 2009 37

 SEARCH RESULTS

Saturday, 20 June 2009 38

 SEARCH RESULTS

This needs better, customized copy:

Saturday, 20 June 2009 39

 SEARCH RESULTS

Number of matches and default sorting of results

Re-sort and filtering

Show hit highlighting (default?)

Date each result was created/updated

Saturday, 20 June 2009 40

 5. CROSS-BROWSER
TESTING

Saturday, 20 June 2009 41

 CROSS-BROWSER
TESTING

Ideal: test in native environment

Alternative: emulator

Online and free static images: Browsershots, Litmus,

IE NetRenderer

Online and not free static images: BrowserCam,

NetMechanic Browser Photo, Litmus

Saturday, 20 June 2009 42

 CROSS-BROWSER
TESTING

Saturday, 20 June 2009 43

 6. MICROCOPY

Saturday, 20 June 2009 44

 MICROCOPY

Short but sweet:

Examples

Inline help

Instructions

Hints

Saturday, 20 June 2009 45

 MICROCOPY

Saturday, 20 June 2009 46

 MICROCOPY

Saturday, 20 June 2009 47

 MICROCOPY

Saturday, 20 June 2009 48

 MICROCOPY

Saturday, 20 June 2009 49

 MICROCOPY

A usable design is far better than help/instruction

Make it clear that people must include e-mail on a

contact form if they want a response

Borrow a friend to sanity check your copy

Saturday, 20 June 2009 50

 7. FUNCTIONALITY

Saturday, 20 June 2009 51

 FORM FUNCTIONALITY

Check that the contact form is being sent to the right

e-mail address

Test what formats are accepted by your text inputs

Check that text inputs are a sensible length

Ensure field validation is properly implemented

Zip/state combo is not useful outside US/Can

Saturday, 20 June 2009 52

 FUNCTIONALITY

Page redirects

Links (inline, navigation, footer etc)

Cancel/Reset button

Delete

Browser back button

File uploads

Saturday, 20 June 2009 53

 8. THE ‘WHERE AM I?’
TEST

Saturday, 20 June 2009 54

 THE ‘WHERE AM I?’ TEST

Saturday, 20 June 2009 55

 THE ‘WHERE AM I?’ TEST

Saturday, 20 June 2009 56

 9. ACCESSIBILITY

Saturday, 20 June 2009 57

 ACCESSIBILITY

Aim to meet level AA of the WCAG

Aim to meet Section 508 requirements

Include ‘skip to content’ links

Validate a cross-section of pages with the WAVE

toolbar, and section 508 and WAI validators

Saturday, 20 June 2009 58

Saturday, 20 June 2009 59
 ACCESSIBILITY

Manually tab through

your pages

Good default tab order?

Active tab visible?

Saturday, 20 June 2009 60

 ACCESSIBILITY

Turn off CSS/styles

Turn off Javascript

Is site still usable?

Does it degrade
gracefully?

Saturday, 20 June 2009 61

 10. JAM YOUR SITE
FULL OF CONTENT

Saturday, 20 June 2009 62

 JAM YOUR SITE FULL OF
CONTENT

A newly birthed website is merely a skeleton. Time to

get to meat onto those bones.

Populate all content streams (use Selenium IDE!)

Tag clouds and other text containers

Search and search results

Check for for pagination issues

Saturday, 20 June 2009 63

 Selenium IDE

Saturday, 20 June 2009 64

 SELENIUM IDE

Saturday, 20 June 2009 65

 SELENIUM IDE

Saturday, 20 June 2009 66

 SELENIUM IDE

Saturday, 20 June 2009 67

 SELENIUM IDE

Number each test case in the suite

Create separate test suites for different user types

Reuse tests

Split test cases into 2 or more parts if if needed

Use JavaScript to create random numbers for unique

titles

Saturday, 20 June 2009 68

 Resources

Saturday, 20 June 2009 69

 RESOURCES

Screen Resolutions:

https://addons.mozilla.org/en-US/firefox/addon/
539

https://addons.mozilla.org/en-US/firefox/addon/
60

Saturday, 20 June 2009 70

 RESOURCES

Color Contrast:

https://addons.mozilla.org/en-US/firefox/addon/
7313

https://addons.mozilla.org/en-US/firefox/addon/
9108

http://www.checkmycolours.com

Saturday, 20 June 2009 71

 RESOURCES

Microcopy and Custom Error Pages:

http://bokardo.com/archives/writing-microcopy/

Defensive Design for the Web by 37signals

Don’t Make Me Think by Steve Krug

Saturday, 20 June 2009 72

 RESOURCES

Section 508: http://www.section508.gov/

WAI: http://www.w3.org/WAI/

Jim Thatcher: http://jimthatcher.com/

Total Validator: http://www.totalvalidator.com

WAVE toolbar: https://addons.mozilla.org/en-US/

firefox/addon/6720

Saturday, 20 June 2009 73

 Thank You

Lisa Rex @lisarex

http://www.lisarex.com
Boston Drupal Design Camp 2009

Saturday, 20 June 2009 74