responsive and user testing

MTM1532

Tiffany Tse

tset@algonquincollege.com


website of the day

What is responsive design?

Ethan Marcotte

Progressive Enhancement

M & M's Peanut

Peanut 

HTML

Chocolate

CSS

candy coating

Javascript and Interactivity (CSS3)

Viewport vs. resolution

Viewport

The viewport for web design is defined as the rectangular area (measured in pixels) that is viewable on the screen.

We will often set the viewport to the device width; to ensure our pages are viewed at 100%



http://webdev-il.blogspot.ca/2011/04/mobile-web-design-viewport-size-vs.html

screen resolution

For many desktops/laptops the screen resolution is the same as the viewport; except with retina displays.

Media Queries

usability testing

Test often.

Test early.

Don't stress.

Focus Groups vs. Usability testing

Focus Group

  • Small group (5-8) sit around a table and react to ideas 
    and designs that are shown to them 

  • Group process - much of the value comes from
    group interactions/opinions
     

  • Good for getting a sampling of opinions and feelings

Usability test

  • One user at a time is shown something 

  • Could be a web page, prototype, wire-frame or sketches 

  •  Asked to figure out what it is, or to do a typical task

Testing one person
is better than
Testing none.

It can be effective

Even if it is poorly done. 
Because you will always learn something.

do not test to prove 

or disprove something

Iterative process

Meaning you must do it over and over.

testing with no budget

Usability testing

3 to 4 users. 

Traditional tests call for around 8 users.




Usability testing

1989 Jacob Nielsen wrote a paper 
“Usability Engineering at a Discount” 


He said you could achieve the same results with fewer users (5)

Problems

First three users are most likely to encounter all major problems.

Because we are testing more than once, we don't have to test as many people each time.

Pick Any Apple

  • Doesn’t much matter who you test 

  • You just need people who know how to use the web,
     or depending on the site your testing, the mobile web
     

  • If narrowing down to your target demographic
    won’t reduce the number of tests you do, then go for it

Where do we test?

Who Should Test?

Observers?

What to test

"Get It" Testing

vs.

Key Task Testing

What to test

  • Usually you want someone to understand
     your site before you ask them questions or tasks about it 

  • Start with “Get It? “ Questions

Sample Test Session

Volunteer from the class.

Sample Test Session

  • Start with introductions 

  • Make clear that you are testing the site, not them 

  • Don’t worry about hurting our (company’s) feelings 

  • Take notes (or record, if they’ll allow it) 

  • Make sure to tell them that you may not be
    able to answer their questions right away
    - because of the test - since you are interested
    in how people do when they don’t have someone beside them

Sample Test session

Start with background questions: 

  • What do you do? 

  • How many hours a week do you spend online? 

  • How do you spend that time?

Sample Test Session

  • Reactions to the homepage 

  • Look at this page, what do you think it is?
     
  • What strikes you about it? 

  • What would you click/tap on first?

Sample Test Session

  • In a normal test, one person might say they love
     the colours and another might hate them 

  • If the user is not thinking aloud, remind them to do so
     
  • That way you can record or take notes about what they noticed

Sample Test Session

  • At this point, you might choose to throw
     in some of the questions you have prepared
     

  • What do make of the slide show of images? Is it helpful? 

Sample Test Session

Task oriented questions: 

  • Can you think of something you
    might want to get on a restaurant’s website?
     

  • Where would you normally be looking this up?
     
  • How would you get there on this site?

Review

Review your results right away 


Triage (reviewing the problems) 


Problem Solving (how do we fix them?)

Typical problems

Concept is a bit foggy 


The words they are looking for don’t exist, you’ve called it something other than what they want to click on 


Too much stuff going on

Typical problems

Ignore ‘kayak’ problems 


Try not to fix problems by adding things 


Take the little victories ( problems / solutions that were super obvious right away) and ( solutions that require little to no effort to change) 

Zurb


Sign up for Solidify.


View Blackboard for further instructions.

Title

Responsive and user testing

By tset

Responsive and user testing

  • 1,856