COMP1649 - SECTION 2 - UNDERSTANDING AND CONCEPTUALISING INTERACTION

COMP1649 - HUMAN COMPUTER INTERACTION AND DESIGN 

Lecture 02: UNDERSTANDING AND CONCEPTUALISING INTERACTION

Outcome: 

  • understand the different ways in which the term “conceptual model” is used in HCI
  • describe the difference between verbal and virtual interface metaphors
  • explain why the development of composite interface metaphors has been necessary
  • discuss the problems and advantages of using metaphors at the interface
  • decide whether you think the interfaces that you use or develop should model some aspects of the world (that is, metaphor-based) or that it should be invisible to the user (that is ubiquitous computing)
  • appreciate the existence of other interface paradigms

Understanding the problem space

  • What do you want to create?
  • What are your assumptions?
  • Will it achieve what you hope it will?

What is an assumption?

Taking something for granted when it needs further investigation. For example: people will want to watch TV while driving. 


A framework for analysing the problem space

  • Are there problems with an existing product or user experience? If so, what are they?
  • Why do you think there are problems?
  • How do you think your proposed design ideas might overcome these?

If you are designing for a new user experience how do you think your proposed design ideas support, change, or extend current ways of doing things?

***********************************************************************************
Activity (10 mins): What are the assumptions and claims made about 3D TV?


3D TV first went on sale in 2010. There was much hype and fanfare about the enhanced user experience it would offer, especially when watching movies, sport’s events and dramas. An assumption was that people would not mind wearing the glasses that are needed to see in 3D, nor would they mind paying a lot more for a new 3D-enabled TV screen.  A claim was that people would really enjoy the enhanced clarity and color detail provided by 3D, based on the favourable feedback received worldwide when viewing 3D films, such as Avatar, at a cinema. 

But the unanswered question was: could the enhanced cinema experience become a desired living room experience? There is no existing problem to overcome – what is being proposed is a new way of experiencing TV. A user experience question is how will people take to wearing the special glasses in their living room? Will it become the norm for people to carry around their own set of personalized glasses (cf to the iPod earbuds that many people wear under their clothing), and don them when watching TV at home or when visiting their family or friends? Could they even be designed to become a fashion item?  

Assumptions: realistic or wish-list?

  • People would not mind wearing the glasses that are needed to see in 3D in their living rooms - reasonable
  • People would not mind paying a lot more for a new 3D-enabled TV screen- not reasonable
  • People would really enjoy the enhanced clarity and color detail provided by 3D - reasonable
  • People will be happy carrying around their own special glasses - reasonable only for a very select bunch of users

***********************************************************************************

From problem space to design space

  • Having a good understanding of the problem space can help inform the design space. e.g. what kind of interface, behaviour, functionality to provide
  • But before deciding upon these it is important to develop a conceptual model

There is also an assumption that all images will be better when viewed in 3D. But whilst it may be a joy to see your team score a goal, will it by the same token, be more painful to watch the opponents score? And what about those who like to catch up on the news whilst eating breakfast and reading email on their laptop? Will it be unpleasant having to constantly switch between the real world, a 2D display and a 3D TV? Or will it become second nature? 

Conceptual models

This is a generic term that describes the various ways in which systems are understood by different people. Primarily, these consist of

  • the way users conceptualize and understand the system and
  • the way designers conceptualize the view of the system. 

The way users normally find out about the design model is through the interface, its behavior and the documentation, collectively called the system image. 


See: Stanford university presentation on conceptual models


Other example: NO ROOM


Which conceptual model is best?

  • Direct manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing, flying, driving, sizing windows
  • Issuing instructions is good for repetitive tasks, e.g. spell-checking,  file management 
  • Having a conversation is good for children, computer-phobic, disabled users and specialized applications (e.g. phone services)
  • Hybrid conceptual models are often employed, where different ways of carrying out the same actions is supported at the interface - but can take longer to learn

Which is easiest and why?

Explanation

  • The first vending machine has been designed using simple instructions. There is a small number of drinks to choose from and each is represented by a large button displaying the label of each drink. The user simply has to press one button and this should have the effect of returning the selected drink. 
  • The second machine is more complex, offering a wider range of snacks. The trade-off for providing more choices, however, is that the user can no longer instruct the machine by using a simple one-press action but is required to use a more complex process, involving: 
    • (i) reading off the code (e.g., C12) under the item chosen, then 
    • (ii) keying this into the number pad adjacent to the displayed items, and 
    • (iii) checking the price of the selected option and ensuring that the amount of money inserted is the same or greater  (depending on whether or not the machine provides change).

Problems that can arise from this type of interaction are the customer misreading the code and or miskeying in the code, resulting in the machine not issuing the snack or providing the wrong item.

A better way of designing an interface for a large number of choices of variable cost might be to continue to use direct mapping, but use buttons that show miniature versions of the snacks placed in a large matrix (rather than showing actual versions). This would use the available space at the front of the vending machine more economically. The customer would need only to press the button of the object chosen and put in the correct amount of money. There is less chance of error resulting from pressing the wrong code or keys. The trade-off for the vending company, however, is that the machine is less flexible in terms of which snacks it can sell. If a new product line comes out they will also need to replace part of the physical interface to the machine – which would be costly.

Metaphors

Definition “a figure of speech in which a word or phrase is applied to an object or action to which it is not literally applicable”  Oxford English Dictionary 2012.  

A person with Asperger’s syndrome might well feel confused by a comment such as “if I eat any more I’ll burst, “He got to the bottom of the problem”

Analogy

Definition “a comparison between one thing and another, typically for the purpose of explanation or clarification:”  Oxford English Dictionary 2012

“I feel like a fish out of water” 

“Life is like box of chocolates”

First steps in formulating a conceptual model

  • What will the users be doing when carrying out their tasks?
  • How will the system support these?
  • What kind of interface metaphor, if any, will be appropriate?
  • What kinds of interaction modes and styles to use?
    Always keep in mind when making design decisions how the user will understand the underlying conceptual model 

Many kinds ò interface types available ...

Command, Speech, Data-entry, Form filll-in, Query, Graphical, Web, Pen, Augmented reality, Gesture.... (for more detail refer section 6). 

Interface Metaphors

One way of describing conceptual models is in terms of interface metaphors. Definition is that the image represents a system object as if it were another type of object  eg network file structure represented as file folders.  

Its purpose is to use our knowledge of familiar, concrete objects to understand abstract computer and task Concepts.

The problem with metaphors is if it portrays inaccurate/ naive conceptual model of the system.

Use metaphors that matches user's conceptual task desktop metaphor for office workers paintbrush metaphor for artists.  Choose the metaphor close  to the way the system works.

Metaphors

Benefits:  Interface metaphors provide users with a familiar orienting device, helping them understand and learn how to use a system. 

Criticisms :  

  • Breaks the rules – Cultural and logical contradictions. E.g. bin on desk.
  • Too constraining. E.g. icons for hundreds of files should be replaced by a search by name.
  • Conflicts with design principles. E.g. destroy/eject on Mac bin.
  • Not being able to understand the system functionality beyond the metaphor 
  • Overly literal translation of existing bad designs. E.g. calculator.
  • Limits the designer’s imagination in conjuring up new paradigms and models (use of “tired” ideas).

Composite metaphors and multiple mental models 

Examples include the scrollbar which exists only in a metaphorical sense and not in real life. 

From a cognitive perspective, contrary to expectations, people seem able to readily assimilate differing concepts and develop multiple mental models. People just interact with the system, thinking in terms of window, menus, icons, scroll bars and so on, as if they were everyday items.

Mental Models and Icons

We look at icons and our neural nets unconsciously map them to what we know already about the image or components of the image.

Icons

Horton’s icon checklist (Benyon et al. 2011) for icon design.

  • Understandable    Does the image spontaneously suggest the intended concept to the viewer?
  • Familiar   Are the objects in the icon ones familiar to the user?
  • Unambiguous   Are additional cues (label, other icons, documentation) available to resolve any ambiguity?
  • Memorable      Where possible, does the icon feature concrete objects in action? Are actions shown as operations on concrete objects?
  • Informative Why is the concept important?
  • Few         Is the number of arbitrary symbols less than 20?
  • Distinct Is every icon distinct from all others?
  • Attractive Does the image use smooth edges and lines?
  • Legible Have you tested all combinations of colour and size in which the icon will be  displayed?
  • Compact Is every object, every line, every pixel in the icon necessary? 
  • Coherent Is it clear where one icon ends and another begins?
  • Extensible Can I draw the image smaller? Will users still recognise it?
***********************************************************************************
Activity (20 mins): Design an icon for a social networking site. List the assumptions you have made. 

***********************************************************************************

Next section 3. Human Cognition








Comments