Lecture 2: Background: Design Principles Conceptual Models

1. Lecture 2:Background: Design Principles & Conceptual Models Lecturer: Dr Greg Hooper Convener: Dr Geraldine Fitzpatrick

2. In this lecture we will... Understand some usability / design principles, and their implications for design Understand different conceptual models in design Understand how choices of conceptual models help realise (or not!) design principles

3. Design Principles 

4. Usability goals Usability goals Effectiveness Efficiency Safety Utility Learnability Memorability [Rogers at al, pp14-18]

5. Design Principles

6. Visibility

7. Visibility (2) You need to insert your room key � a card � into the slot by the buttons How would you make this action more visible?

8. Feedback Sending information back to the user about what has been done Includes sound, highlighting, animation and combinations of these e.g. when screen button clicked on provides sound or red highlight feedback:

9. Constraints Restricting the possible actions that can be performed Helps prevent user from selecting incorrect options Three main types physical cultural logical

10. Physical constraints Refer to the way physical objects restrict the movement of things E.g. design only one way to insert a mouse connection; and only one way to insert a keyboard connection, and make them different

11. Logical constraints Exploit people�s reasoning about relationships between objects in the world

12. Cultural constraints

14. Mapping Relationship between controls and their movements and the results in the world Which is the better mapping?

15. Mapping (2) Which is the better mapping, and why?

16. Consistency Design interfaces to have similar operations and use similar elements for similar tasks For example: always use ctrl key plus first initial of the command for an operation � ctrl+C, ctrl+S, ctrl+O Main benefit is consistent interfaces are easier to learn and use

17. Consistency breakdowns What happens if there is more than one command starting with the same letter? e.g. save, spelling, select, style Have to find other initials or combinations of keys, thereby breaking the consistency rule E.g. ctrl+S, ctrl+Sp, ctrl+shift+L Increases learning burden on user, making them more prone to errors

18. Internal and external consistency Internal consistency refers to designing operations to behave the same within an application Difficult to achieve with complex interfaces External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices Very rarely the case, based on different designers� preference

19. External inconsistency

20. Affordances Refers to an attribute of an object that allows people to know how to use it e.g. a mouse button invites pushing, a door handle affords pulling Norman (1988) used the term to discuss the design of everyday objects Since has been much popularised in interaction design to discuss how to design interface objects e.g. scrollbars to afford moving up and down, icons to afford clicking on

21. Affordances Physical affordances What do the following physical objects afford? Are the affordance obvious?

22. Based on slide by Saul Greenberg Example Scissors affordances: holes for insertion of fingers blades for cutting constraints big hole for several fingers, small hole for thumb mapping between holes and fingers suggested and constrained by appearance positive transfer learnt when young conceptual model implications clear of how the operating parts work

23. Based on slide by Saul Greenberg Bad Example Digital Watch affordances four push buttons, not clear what they do contraints and mapping unknown no visible relation between buttons and the end-result of their actions negative transfer little association with analog watches cultural standards somewhat standardized functionality, but highly variable conceptual model must be taught; not obvious How to design a better one?

24. Digital Watch Redesigned for Affordances (Rachna Dhamija)

25. Digital Watch Redesigned for Affordances (Ping Yee)

26. Affordances Virtual affordances How do the following screen objects afford? What if you were a novice user? Would you know what to do with them?

27. Relationships between usability principles Visibility Feedback Constraints Mapping Consistency Affordance Principles are not mutually exclusive What are the ways they can relate to each other?

28. Conceptual Models

29. Generating requirements through using conceptual models How the system will appear to users and how they will understand it [Related to usability principles, affordances etc] A conceptual model is a high level description of: �the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended� [Rogers et al, Interaction Design, p40] Independent of implementation details

30. Conceptual Models (2) Many kinds of conceptual models Many ways of classifying them Tied up with user interaction modes Conceptual models based on: Activities � 4 types Objects Conceptual models and interface metaphors

31. Conceptual Models and Activities CM(1) Giving instructions issuing commands using keyboard and function keys, selecting options via menus CM (2) Conversing interacting with the system as if having a conversation CM(3) Manipulating and navigating acting on objects and interacting with virtual objects CM(4) Exploring and browsing finding out and learning things

32. CM(1): Giving Instructions Where users instruct the system and tell it what to do Commands via keyboard and function keys, menu options e.g. tell the time, print a file, save a file Very common conceptual model, underlying a diversity of devices and systems e.g. CAD, word processors, VCRs, vending machines

33. CM(1): Giving Instructions (2)

34. Pros and cons of the instructional conceptual model Main benefit - supports quick and efficient interaction good for repetitive kinds of actions performed on multiple objects Need to learn how to frame and issue instructions for particular applications

35. CM(2): Conversing Underlying model � interacting with the system as if having a conversation Range from simple voice recognition menu-driven systems to more complex �natural language� dialogues e.g. timetables, some search engines, advice-giving systems, help systems Recently, interest in having virtual agents at the interface, who converse with you e.g. Microsoft�s Bob and Clippy

36. Microsoft Bob (1995) CM(2): Conversing (2)

37. Hi! My name is Clippy, and Office XP has me sweating (and rusting). Why? Because Office XP works so easily that it's made Office Assistants like me useless. Obsolete. And, I'm told, hideously unattractive, as well as annoying. CM(2): Conversing (3) -The Unfortunate Demise of Clippy

38. Allows users, especially novices and technophobes, to interact with the system in a way that is familiar makes them feel comfortable, at ease and less scared Annoying! User expectations of �intelligence�; difficult to train Misunderstandings when the system does not know how to parse what the user says e.g. child types into a conversational search engine (e.g. Jeeves): �How many legs does a centipede have?� Pros and cons of the conversational conceptual model

39. Pros and cons of the conversational conceptual model (2)

40. CM(3): Manipulating and Navigating Involves dragging, selecting, opening, closing, zooming actions on virtual objects Exploit�s users� knowledge of how they move and manipulate in physical world Exemplified by what you see is what you get (WYSIWYG) the direct manipulation approach (DM) Shneiderman (1983) coined DM from his fascination with computer games

41. CM(3): Direct Manipulation (DM) Continuous representation of objects and actions of interest Physical actions and button pressing instead of issuing commands with complex syntax Rapid reversible actions with immediate feedback on object of interest

42. CM(3): DM Games

43. Pros and Cons of the Manipulation and Navigation Conceptual Model Good user support Novices can learn easily, experienced users can work fast Immediate visual feedback Sense of mastery and control Not always appropriate Not all tasks can be described by objects, nor actions done directly e.g., each email as an object; delegation of spell checking

44. CM(4): Exploring and Browsing Similar to how people browse information with existing media e.g. newspapers, magazines, libraries, pamphlets Scan, flick through to find something of interest Information is structured to allow flexibility in searching for information e.g. multimedia, web

45. CM(4): Exploring and Browsing (2)

46. Pros and Cons of the Exploration and Browsing Conceptual Model Can be really useful when people aren�t sure what they want Serendipitous information discovery Can take more time Needs very skilled design to properly structure information and navigation

47. Conceptual Models based on Objects Usually based on an analogy with something in the physical world Often associated with particular contexts and dedicated activities e.g. books, tools, vehicles�. Classic examples Offices/desktops (Star system) Ledgers/calculators (VisiCalc)

48. Xerox Star Interface (1982)

49. Spreadsheet (Bricklin 1979)

50. Activities 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 specialised applications (e.g. phone services) Direct manipulation is good for �doing� types of tasks, e.g. designing, drawing, flying, driving, sizing windows Exploring and browsing Is good for supporting more open-ended interactions Objects Objects more specific than activities, brings in context and targeted use scenarios Hybrid conceptual models mix different models. Provide different ways of carrying out the same actions but can take longer to learn Which conceptual model is best?

51. Interface designed to be similar to a physical entity but also has own properties e.g. desktop metaphor, web portals as gateways Can be based on an activity, object or combination e.g. typing, tabbed notebook, spreadsheet Exploit user�s familiar knowledge, helping them to understand �the unfamiliar� e.g. typewriting � word processing Conjures up essence of the unfamiliar activity, enabling users to leverage this to understand more aspects of the unfamiliar functionality Interface Metaphors

52. Makes learning new systems easier Helps users understand underlying conceptual model Makes computers more accessible Confuses users (and designers) �The computer frees us to do tasks impossible in the physical world. A real-world metaphor, though, supplies us with only a �real world� user model.� [Rogers et al] Typewriter � word processing... Breaks conventions and cultural constraints e.g. recycle bin placed on desktop Limits designers� imagination in coming up with new conceptual models The literal calculator Pros and Cons of Interface Metaphors

53. �the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended� [Rogers et al, Interaction Design, p40] choice of model (and/or metaphor) depends on what we know about: - user characteristics persona, observational studies - user tasks task description, task analysis - user goals scenario, use cases [to be covered in later lectures] Conceptual Models and UCD

54. So � steps in moving from conceptual model to design What will the user be doing when carrying out their tasks (problem space)? What is the user interaction mode when they are interacting with a system, e.g. instructing, talking, browsing or other What conceptual model will the system use to support these? What kind of interface metaphor, if any, will be appropriate? What kinds of interaction styles to use? Always keep in mind when making design decisions how the user will understand the underlying conceptual model

55. Summary In Lecture 2 we looked at: Usability/design principles Conceptual models and their pros and cons in design (and helping realise design principles) In Lecture 3 we will start walking through the UCD process, beginning with how to evaluate existing systems.

56. Reading Ch 1.6, Ch 2 Rogers et al (2002) Interaction Design Website: id-book.com (material associated with Ch 2)

58. Spare slides � might want to replace mapping slides with these if you want to buidl the story more???