Monday, October 29, 2012

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

Friday, October 12, 2012

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 :)

Thursday, October 4, 2012

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.

Tuesday, October 2, 2012

Additional needfinding strategies

Diary studies - users add records of specific piece of information; tailor the recording to the context; the easier the  tools are for participants to record their stuff the better results you will get.

Experience sampling - beep people that they would write down a piece of information at that moment. (where are you, how happy are you, how energetic do you feel .. )

Lead users- they can give a lot of ideas about great solutions ;  they sometimes already have done some hacks themselves.

Extreme users - you can see what kind of problems occur if a system is used extremely ..

=====================================

Keep in mind the users from whom you did study a lot from the beginning . To do that create personas.

A model of a person, an example
Include demographic information, but also capture persons motivation, beliefs, intentions, behavior, goals
Draw a picture or have a photo of your persona - it makes it more real
Give them a name, occupation, background, social situation, hopes - story to tell
Knowing what your persona thinks, does and feel helps to build empathy

Helps to understand the state of mind, emotion, philosophy, beliefs or point of view of the user. 

Interviewing

Choose the right people for interviewing.

There can be many stakeholders to involve - non users, already users of some other system, representative of target user. But keep mind, find different users - representatives of major different user groups!

Thank people for their time - you can give them a little gift for example.

Approximate if necessary. For example - you are designing for doctors but you can´t reach real doctors at the beginning of your design process. You might use medical students instead - not the same but approximate    :).

The more open ended questions you ask, the more interesting answers you will get.

- no to leading questions
- no to design questions (what would you like a tool to be?)
- no to hypothetical scenarios 
- no to how often they do things
- no to asking to evaluate things on scale (what does a particular number mean in this case?)
- no to binary questions

Use more concrete questions.

Participant observation


  • Its good to be apprentice and do some hands on learning
Don´t believe what people say day do, watch them acting!

Dont´t ask leading questions if you don´t want to hear obvious answers.