U Iq A Presentation
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View U Iq A Presentation as PDF for free.
More details
- Words: 1,240
- Pages: 74
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 typos
inconsistencies kinks
cock-ups
bugs
...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
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 typos
inconsistencies kinks
cock-ups
bugs
...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
