u Iq a Presentation

8/14/2019 u Iq a Presentation

1/74


2/74

WHO AM I?

Very new to Drupal

Web Design background

Independent Quality

Assurance Analyst

2Saturday, 20 June 2009


3/74

AGENDA (OR NOT)

What UI/UX Evaluation Is and Isnt

Ten Simple Yet Important Things toEvaluate

Automate with Selenium IDE



4/74

A UI/UX EVAL IS...

Finding and reporting resolvable...

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

inconsistencieskinks

errors

bugscock-ups

typos



5/74

ALSO...

Best done by someone other than the creation team

Test as often as possible

Great for the Agile methodology



6/74

A UI/UX EVAL ISNT...

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.



7/74

WHEN YOU DO ANEVALUATION

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

Agree on areas to focus on up front

Agree on reporting method

Keep it flexible and fun



8/74


9/749Saturday, 20 June 2009


13/74

SCREEN RESOLUTIONS

Content needs to sit above the fold

Users need to know the pages has changed

1024x768 has the highest usage worldwideSource: http://marketshare.hitslink.com/report.aspx?qprid=17

43% of users use 1024x768 or lowerSource: http://www.w3schools.com/browsers/browsers_display.asp

Can test your fold with jpgs in the browser

http://www.w3schools.com/browsers/browsers_display.asphttp://marketshare.hitslink.com/report.aspx?qprid=17http://marketshare.hitslink.com/report.aspx?qprid=17http://marketshare.hitslink.com/report.aspx?qprid=17http://www.w3schools.com/browsers/browsers_display.asphttp://www.w3schools.com/browsers/browsers_display.asphttp://marketshare.hitslink.com/report.aspx?qprid=17http://marketshare.hitslink.com/report.aspx?qprid=17


14/74

SCREEN RESOLUTIONS

Web Developer Firefox extension lets you resize thewindow:

Right click > Web Developer > resize > Edit Resizedimensions

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 tomeasure screen elements in pixels



15/74

SCREEN RESOLUTIONS

There are also

40,000,000iPhoneswith browsingcapability

(plus all the othermobile devices)



17/74

COLOR CONTRAST

Sadly, eyes degenerate with age :(

10% of men suffer from colorblindnessin the United StatesSource: "Color Blindness: More Prevalent Among Males". Hhmi.org. http://www.hhmi.org/senses/b130.html.

There should be sufficient foreground andbackground contrast in color and brightness of anypage element (link, hover, background colors etc)

http://www.hhmi.org/senses/b130.htmlhttp://www.hhmi.org/senses/b130.html


18/74


19/74

COLOR CONTRAST

Dont make users huntfor inline links



20/74

COLOR CONTRAST

Use the Juicy StudioColour ContrastAnalyser FirefoxAdd-on

Shows pass/fail onLuminosity Contrast

Ratio, Difference inBrightness andDifference in Color



21/74


22/74

COLOR CONTRAST



24/74


25/74

NOT-GREAT DEFAULTERROR PAGE



26/74

DEFAULT DRUPALERROR PAGE



27/74

CUTE(?) CUSTOMERROR PAGE



28/74

CUTE(?) CUSTOMERROR PAGE



29/74

SILLY BUT GOODCUSTOM ERROR PAGE



30/74


31/74



32/74


33/74

SEARCH RESULTS



34/74

SEARCH RESULTS



35/74

SEARCH RESULTS

Made scannable

with dotted linesand avatars

Date info

Links distinctivefrom body copy



36/74

SEARCH RESULTS



37/74


38/74

SEARCH RESULTS



39/74

SEARCH RESULTS

This needs better, customized copy:



40/74

SEARCH RESULTS

Number of matches and default sorting of results

Re-sort and filtering

Show hit highlighting (default?)

Date each result was created/updated



41/74



42/74

CROSS-BROWSERTESTING

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



43/74

CROSS-BROWSERTESTING



44/74



45/74

MICROCOPY

Short but sweet:

Examples

Inline help

Instructions

Hints



46/74

MICROCOPY



47/74

MICROCOPY



48/74

MICROCOPY



49/74

MICROCOPY



50/74

MICROCOPY

A usable design is far better than help/instruction

Make it clear that people must include e-mail on acontact form if they want a response

Borrow a friend to sanity check your copy



51/74


52/74

FORM FUNCTIONALITY

Check that the contact form is being sent to the righte-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



53/74

FUNCTIONALITY

Page redirects

Links (inline, navigation, footer etc)

Cancel/Reset button

Delete

Browser back button

File uploads



54/74



55/74

THE WHERE AM I? TEST



56/74


57/74



58/74

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 WAVEtoolbar, and section 508 and WAI validators



59/74



60/74

ACCESSIBILITY

Manually tab throughyour pages

Good default tab order?

Active tab visible?



61/74

ACCESSIBILITY

Turn off CSS/styles

Turn off Javascript

Is site still usable?

Does it degradegracefully?



62/74


JAM YOUR SITE FULL OF


63/74

JAM YOUR SITE FULL OFCONTENT

A newly birthed website is merely a skeleton. Time toget 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



64/74



65/74

SELENIUM IDE



66/74

SELENIUM IDE



67/74

SELENIUM IDE



68/74

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 uniquetitles



69/74



70/74


71/74

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

http://www.checkmycolours.com/https://addons.mozilla.org/en-US/firefox/addon/9108https://addons.mozilla.org/en-US/firefox/addon/7313http://www.checkmycolours.com/http://www.checkmycolours.com/https://addons.mozilla.org/en-US/firefox/addon/9108https://addons.mozilla.org/en-US/firefox/addon/9108https://addons.mozilla.org/en-US/firefox/addon/9108https://addons.mozilla.org/en-US/firefox/addon/9108https://addons.mozilla.org/en-US/firefox/addon/7313https://addons.mozilla.org/en-US/firefox/addon/7313https://addons.mozilla.org/en-US/firefox/addon/7313https://addons.mozilla.org/en-US/firefox/addon/7313


72/74

RESOURCES

Microcopy and Custom Error Pages:

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

Defensive Design for the Web by 37signals

Dont Make Me Think by Steve Krug

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


73/74

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

http://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://jimthatcher.com/http://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://www.totalvalidator.com/tool/fulltool.htmlhttp://jimthatcher.com/http://jimthatcher.com/http://www.section508.gov/http://www.section508.gov/


74/74

Lisa Rex @lisarexhttp://www.lisarex.com

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

Documents

u Iq a Presentation