In person experiments

You can get the feedback, see the errors by yourself and overall have better engagement with your participant.

Before study lay out the scope and clear goals what do you want to know about your design. - It´s ok to have narrow scope, you dont need to test the large design at once.

Think about the testing environment - if this would be used in a crowded place, test it there; if it would be used in a quiet place, you need to test there.

How many people?

Come up with scenarios that users could really relate to.

Come up with concrete tasks.

Its necessary that you give the same tasks and the same input to all participants - this gives you the comparison moment.

You are testing the site not the user!

Experimental details

• Order of the tasks
• Training before the test (depends on whether the real users afterwards will get any training or not)
• What will you do when the user does not finish a task.
• Pilot the study - try it out before you are going to use it on the real participants.

Think out aloud method

Ask users to talk while performing tasks

• tell us what they are thinking
• tell us what they are trying to do
• tell us questions that arise as they work
• tell us things they read

Promt participants during the session to continue thinking aloud. They can easily forget it because it is not natural for them.

Designing Experiments

Independent variables - variables that the experimenter can manipulate before the experiment

Dependent variables - variables that the experimenter measures in the experiment.

Internal validity (kehtivus) - if i would fun the same test again would you see the same result

External validity - does it apply to only specific group or the whole world?


You have to use fair comparisons. You cant compare apples to oranges. The IPhone keypad example.


Vacuum cleaner example

Manipulation: vacuum cleaner
Measures: cleanliness, speed

Between subjects design - half of the participants use one vacuum cleaner the other half the other one.
Its hard to say if one vacuum cleaner is better then the other one. Maybe the ones we assigned to one vacuum cleaner are just better cleaners?
Worry about individual differences.

Within subjects design - everyone uses both interfaces.
Worry about ordering effects - in which order the participants use the different vacuum cleaner.
Half of your participants could test one vacuum cleaner first end the second afterwards and the second half of the group could do it in vice verse order. Its also good to vary the tasks environments. 



Three Major Strategies

1. Within-subjects: everyone tries all the options. Good when you’re not worried about learning/practice/exposure issues (that trying one version will ‘pollute’ the date from another version)
2. Between-participants: each person tries one. Requires more people, and more attention to fair assignment. Has the benefit that each participant is uncorrupted (at least by the study...)
3. Counterbalancing can help minimize variation in a between-subjects design

Visual design

Three goals for visual design

1. Guide - Convey structure, relative importance, relationships
2. Pace - Draw people in, help orient, provide hooks to dive deep
3. Message - Express meaning and style, breathe life into the content

Scott used cool trick. He showed 4 different webpages and blurred them. After the blurring you could still recognize the main elements of the webpages (like navigation bars, articles, interesting picture etc).

Three basic tools for visual design

1. Typography
2. Layout
3. Color

Typography

Gill Sans (1928)

Six typographic terms

1. Point size - is not letter size but the box around the letter
2. Leading
3. x-height - height of the lower case letter (letter x). - Typefaces with higher x-height are easier to read by lower point sizes and lover resolution screens. Lower x-height gives ore elegance to your text.
4. Ascenders and Dscenders - above and below x-height.
5. Weight (light, regular, bold)
6. Serifs

Numbers have small caps- lowcase too.

alexpoole.info - serif and sans serif typefaces - is one better to read?

Expectation plays an important role (example with the phrase "The Cat" or "Tae Cht").

Grids, grouping and alignment

When creating templates design for longest text block.
In general left-aligmet text is faster to skim.

Design in gray-scale at first. When this works add colors.

Its good to use color for elements for example that are clickable.

Reading and navigating
Informavores - go through a lot of information quickly and get what you need.

How do you know a page has poor scent?

• flailing
• low confidence - they dont know where to click
• back button - they are using it a lot of

If using icons use also words next to them to help to understand. Use trigger words, not words that are funny. You can also use longer terms .. like 7 words.

You can use also block navigation - speaking block navigation. Often more is better. 

People are more than happy to scroll if they think they will be rewarded.

http://hciwithscottklemmer.blogspot.com/2012/09/introduction-course-design-for.html

Representation and cognition

A Good Representation sows all of the relevant information, and nothing else.
Should enable:

1.  Comparison
2.  Exploration
3.  Problem solving

When interfaces help people distribute cognition, it can...

• Encourage experimentation (Tetris)

• Scaffold learning and reduce errors (Montessouri blocks)

• Show (only) differences that matter (London Underground)

• Convert slow calculation into fast perception (Map coloring)

• Support chunking, especially by experts (Chess & gestures)

• Increase efficiency (diagrams)

• Facilitate collaboration (cockpits)

Direct manipulation

The gulf of execution - the gulf of evaluation.
Know what to do and evaluate what happened after the action.

The making of gulfs. How easily can someone:

Determine the function of the device?
Tell what actions are possible?
Determine mapping from intention to physical movement?
Perform the action?
Tell what state the system is in? / if its in desired state?
Determine mapping from system state to interpretation


To reduce the gulfs, provide...
Visibility (perceived accordance or signifies)
Feedback
Consistency (also known as standards)
Non-destructive operations (hence the importance of undo)
Discoverability: All operations can be discovered by systematic exploration of menus
Reliability. Operations should work. Period. And events should not happen randomly

Heuristic evaluation

 System status 
Feedback on where the system is and where the user is.

• show time (over one sec - you need to provide feedback).
• use progressbar
• show space - how much space does the user have left to use etc.
• show change - ask user if he wants to save something etc - when user changes something.
• show action - for example traffic lights have the color coding but also the most important color "red" is at the highest position. This indicates what user can do.
• show next steps - it can be also as a text.
• show completion  - the picture with a message "Put down that cocktail .. your smth is ready"

 Familiar metaphors & language 

Mach some UI features to the real world where the user has experiences. Speak the users language and use conventions that are used in online world and in real world.

• identify the terms and language the users understand
• use familiar categories
• use familiar choices - explain the choices to the user that he could make the decision

 User control and & freedom 

Don´t force user to fixed paths. Let them redo, undo and exit.

• preview of the path can be really valuable for making decisions
• freedom to explore

 Consistency & standards  

• consistent layout
• consistent names and using your language
• don´t use system terms in UI - for example behind the curtains a big company devides a term into many different ones  but for the users those actually mean the same. (note to myself - think about ITB).
• ask people how would they categorize things
• you can use the type 'other' and afterwards analyze the results bow people describe the categories 
• consistent choices - "yes" is always something positive.. like yes i want to continue, yes i want to save etc. Do not violate it by asking the question through negative perspective. For example those two mean the same thing but the user has to give different answers to continue his doings:
• do you want to close the application? - NO
• do you want to continue - YES
• clearer choices - don´t use always yes and no buttons - sometimes it is useful to describe the actions behind them

 Error prevention  

• prevent data loss - for example before asking if i would like to overwrite files i would like to see the preview to make my decision.
• prevent clutter (segadus) - quite the same explanation ad by data loss
• prevent confusing flow - for example you use button named 'cancel' to actually continue the flow and the user can suffer under data loss etc.
• prevent bad input - for example there is no datepicker associated with the input fielt that should take date as his value
• prevent unnecessary constraints - don´t limit the user 

 Recognition over recall  
Recognition (äratundmine)

• avoid codes!
• avoid extra hurdles (takistusi?) - set up reasonable defaults to avoid those
• recognition with previews

 Flexibility and efficiency  

• flexible shortcuts
• flexible defaults with options - commonly used options are already listed to you - last one is a option where you can enter freely your value
• ambient (ümbritsev) information - for example you can see weather forecast in your weekly calendar
• proactive - for example Gmail offers you to unsubscribe from a list which is probably just a spam list. PS! If you use it, you have to do it well.
• provide recommendations 
• keep it relevant (asjakohane)

 Aesthetic & minimalist design  

• above the fold - the screen that a user can see at first - for example you could see only one third of a long page at the time, this is above the fold. Think what people should see there. Put core information above the fold!
• signal to noise - use colors when they need something -- not just randomly all over the page. Another example - using tables with borders where the data is much more important - at a glance users would see the table not the data inside it
• minimalist login
• using redundancy you will loose in webpages real estate - you push more important information off the page.

 Recognize, diagnose & recover from errors  

• make the problem clear that the user faces
• provide a solution
• show a path forward - for example you as a user try to open a file but there is no right application for it -- the message should provide a solution how can i open that file.
• purpose an alternative  (paku alternatiive)

 Help  

• learning with examples
• choices with examples
• guide the way
• show the steps
• point things out (for example tooltips)
• provide more information  - for example you want to unsubscribe from a mailing list and you choose the reason 'I received too many e-mails' --  the application then prompts a possibility to you -- you can change the frequency.
• be clear by helping - not too many info! For example no-one reads ULA-s (user licence agreements), but you could summarize the key points and force users to accept them - then you can be sure they know the very most important terms.
• help people have fun :)

Prototyping and mockups

Storyboars

• Don't focus on UI before focusing on the task the UI should help to accomplish.
• Story boarding focuses only on tasks.
• It should focus on tasks that a persons UI helps them to accomplish.
• Shows flow in time and key points at it.
• Use stars for drawing people  - star people :).
• At the end the positive outcome should also be added.

It should convey:

 Setting 

1. people involved
2. environment
3. task being accomplished

 Sequence 

1. What steps are involved?
2. What leads someone to use the app?
3. What task is being illustrated?

 Satisfaction 

1. What motivates people to use the system?
2. What does this enable people to accomplish?
3. What need does the system fill?

Use timeframe! Dont spend too much time doing it!

Paper prototyping

Be creative and you can use all kinds of materials !

Digital mockups

If you need already more pixel based preview of your design idea.