Chapter 2: Understanding and conceptualizing interaction

Slides:



Advertisements
Similar presentations
Conceptualizing interaction
Advertisements

Understanding and conceptualizing interaction. Recap HCI has moved beyond designing interfaces for desktop machines About extending and supporting all.
Chapter 11 Designing the User Interface
Graphical input techniques
Interaction Techniques Level 2 Prepared by: RHR First Prepared on: Nov 23, 2006 Last Modified on: Quality checked by: MOH Copyright 2004 Asia Pacific Institute.
Understanding and conceptualizing interaction. Understanding the problem space –What do you want to create? –What are your assumptions? –Will it achieve.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
Interface metaphors & analogies pp pp
Vocabulary of Design Visibility - –how easily a user can see what can be done and how to do it Mappings - –how a control and object are related –suffers.
Recap HCI has moved beyond designing interfaces for desktop machines
The Psychopathology of Everyday Things
User Interface Design Notes p7 T120B pavasario sem.
From requirements to design
Dialog Styles. The Five Primary Styles of Interaction 4 Menu selection 4 Form fill-in 4 Command language 4 Natural language 4 Direct manipulation.
Usability goals Effective to use (Man kan göra det man vill göra.)
Dialog Styles. The Six Primary Styles of Interaction n Q & A n Menu selection n Form fill-in n Command language n Natural language n Direct manipulation.
ID Conceptual Models (Mental Models) Summary
Knowledge Acquisitioning. Definition The transfer and transformation of potential problem solving expertise from some knowledge source to a program.
7M701 1 User Interface Design Sommerville, Ian (2001) Software Engineering, 6 th edition: Chapter 15
Lecture 7 Date: 23rd February
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Understanding and Conceptualizing Interaction Chapter 2.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
User-Centered Design and Development
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
1 FJK User-Centered Design and Development Instructor: Franz J. Kurfess Computer Science Dept. Cal Poly San Luis Obispo.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Understanding Task Orientation Guidelines for a Successful Manual & Help System.
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
CS305: Fall2008 Mental and Conceptual Models Readings: Chapter 2 of ID-Book.
Chapter 2: Understanding and conceptualizing interaction Question 1.
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
GENERAL CONCEPTS OF OOPS INTRODUCTION With rapidly changing world and highly competitive and versatile nature of industry, the operations are becoming.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
Understanding and conceptualizing interaction. Recap HCI has moved beyond designing interfaces for desktop machines About extending and supporting all.
INTERACTION DESIGN. Today’s objectives Understanding & conceptualizing interaction Control Design Challenge.
CS CS 5150 Software Engineering Lecture 11 Usability 1.
INTERACTION DESIGN. Today’s objectives Understanding & conceptualizing interaction Control Design Challenge.
Conceptual Model Design Informing the user what to do Lecture # 11 Gabriel Spitz.
Human Computer Interaction
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
Understanding and conceptualizing interaction
Software Architecture
Conceptual Models. Conceptual model A conceptual model is: “a high-level description of how a system is organized and operates.” (Johnson and Henderson,
Chapter 2: Understanding and conceptualizing interaction.
The Design of Everyday Things Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?
Chapter 1: What is interaction design?. Bad designs From:
Task Analysis CSCI 4800/6800 Feb 27, Goals of task analysis Elicit descriptions of what people do Represent those descriptions Predict difficulties,
CS 5150 Software Engineering Lecture 9 Usability 1.
Conceptual Model Design Informing the user what to do Lecture 10 Gabriel Spitz 1.
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Chapter 5:User Interface Design Concepts Of UI Interface Model Internal an External Design Evaluation Interaction Information Display Software.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
1 CS 501 Spring 2003 CS 501: Software Engineering Lecture 13 Usability 1.
Chapter 2: Advanced programming concepts Part 3: The user interface Lecture 5 1.
Conceptual Model Design Informing the user what to do Gabriel Spitz 1.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Chapter 2 Understanding and conceptualizing interaction
How to think about interaction
CEN3722 Human Computer Interaction Interface Metaphors and Conceptual Models Dr. Ron Eaglin.
Conceptual Model Design Informing the user what to do
Heuristic Evaluation Jon Kolko Professor, Austin Center for Design.
Dialog Design 2 Direct Manipulation
Models, Metaphor, Paradigms
Presentation transcript:

Chapter 2: Understanding and conceptualizing interaction It is important to have a clear understanding of why and how you are going to design something before you start writing lines of code or mock-up an user interface. This ensures that ill-thought out ideas and designs and such other incompatible models are not developed.

Understanding the problem space What do you want to create? What are your assumptions? What are your claims? Use of Augmented reality for everything might not be the best way to do things. IN general it doesn’t make sense to decide on what kind of interface or what the end tool is before you understand the nature of the problem and the nature of the user interaction. Usability and user experience goals must be understood before you can understand the problem space. You need to understand the assumptions(things that you can take for granted) and claims(stating something to be true, when it is still open to question). It is a good idea to write down the various assumptions and claims and try and defend them. This helps ensure the you understand the problem space better. Typically, this is done as a group, the team as a whole tries to talk through the various assumptions and claims, sometimes, different people have different perspectives on things, getting to consider all perspectives ensures this will be of great benefit to the team in the long run. When you make claims about product success it is important to ask yourself Will it achieve what you hope it will? If so, how?

A framework for analyzing the problem space Are there problems with an existing product or user experience? Why do you think there are problems? How do you think your proposed design ideas might overcome these? When designing for a new user experience how will the proposed design extend or change current ways of doing things?

Conceptual model “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26) Having a good understanding of the problem space can help inform the design space e.g., what kind of interface, behavior, functionality to provide. You need to first think about how the system will appear to users (i.e. how they will understand it) It is not a description of the user interface but a structure outlining the concepts and the relationships between them. It enables “designers to straighten out their thinking before they start laying out their widgets” (p. 28). It provides a working strategy and a framework of general concepts and their interrelations

Main components Metaphors and Analogies. Concepts Relationships Concept  User Experience Goals. Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity. Concepts that users are exposed to through the product and the relationship between the concepts. e.g., one object contains another. The mappings between the concepts and the user experience the product is designed to support. Just like developing an ER model, people might feel comfortable, developing the actual interface, drawing the screen, positioning the widgets rather than thinking about it from an abstract sense.

Benefits How do users understand the interaction model? Not to become narrowly focused early on Establish a set of common terms they all understand and agree upon Reduce the chance of misunderstandings and confusion arising later on Orient themselves towards asking questions about how the conceptual model will be understood by users. Establish a set of common terms they all understand and agree upon to help reduce the chance of misunderstandings and confusion arising later on

A classic conceptual model: the spreadsheet Analogous to ledger sheet Interactive and computational Easy to understand Greatly extending what accountants and others could do It was simple, clear, and obvious to the users how to use the application and what it could do It on user’s familiarity with ledger sheets Got the computer to perform a range of different calculations and recalculations in response to user input www.bricklin.com/history/refcards.htm

The Star interface 8010 Star office system targeted at workers not interested in computing per se. The idea here was to make the computer invisible to the user. Spent several person-years at beginning working out the conceptual model. They chose the analogy of an office environment, except that the workers will be manipulating virtual objects instead of the real objects. So you got the concepts of documents being maintained in files and stored in folders and cabinets and the use of picture icons to represent these concepts. They also developed new concepts such as placing a document on a printer for printing it etc. Simplified the electronic world, making it seem more familiar, less alien, and easier to learn

Interface metaphors Designed to be similar to a physical entity but also has own properties e.g. desktop metaphor, search engine Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’. It conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them

Benefits of interface metaphors Makes learning new systems easier Helps users understand the underlying conceptual model It can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users

Problems with interface metaphors (Nelson, 1990) Break conventional and cultural rules e.g., recycle bin placed on desktop Can constrain designers in the way they conceptualize a problem space Conflict with design principles Forces users to only understand the system in terms of the metaphor Designers can inadvertently use bad existing designs and transfer the bad parts over Limits designers’ imagination in coming up with new conceptual models

Interaction types Instructing Conversing Manipulating Exploring Another way of conceptualizing the design space is in terms of the users interactions with a system or product. Instructing issuing commands using keyboard and function keys and selecting options via menus Conversing interacting with the system as if having a conversation Manipulating interacting with objects in a virtual or physical space by manipulating them Exploring moving through a virtual environment or a physical space

Instructing Where users instruct a system by telling it what to do e.g., tell the time, print a file, find a photo Very common interaction type underlying a range of devices and systems A main benefit of instructing is to support quick and efficient interaction. It is good for repetitive kinds of actions performed on multiple objects

Conversing Like having a conversation with another human Examples include search engines, advice-giving systems and help systems Differs from instructing in that it more like two-way communication, with the system acting like a partner rather than a machine that obeys orders Ranges from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogues 1-800-4-GOOG PROS and CONS: Useful for technophobes, they are less scared and gives them a confident to interact with the system. There is a good change of misunderstanding(phone based systems)

Manipulating Exploit’s users’ knowledge of how they move and manipulate in the physical world Virtual objects can be manipulated by moving, selecting, opening, and closing them Tagged physical objects (e.g., bricks, blocks) that are manipulated in a physical world (e.g., placed on a surface) can result in other physical and digital events. Blocks with RFID tags to teach children how to mix colors. It has been shown that children are more creative in mixing colors when using this model rather than when using a digital or a physical cubes.

Direct manipulation Proposes that digital objects be designed so they can be interacted with analogous to how physical objects are manipulated Shneiderman (1983) coined the term Direct Manipulation. It came from his fascination with computer games at the time. Assumes that direct manipulation interfaces enable users to feel that they are directly controlling the digital objects

Core principles of 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 According to these principles, the object on the screen remains visible as the user interact with it and any actions performed on it are immediately visible.

Why are DM interfaces so enjoyable? Novices can learn the basic functionality quickly Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions Intermittent users can retain operational concepts over time Error messages rarely needed Immediate feedback Users gain confidence and mastery and feel in control

What are the disadvantages with DM? Not all tasks can be described by objects and not all actions can be done directly Some tasks are better achieved through delegating rather than manipulating e.g., spell checking Moving a mouse around the screen can be slower than pressing function keys to do same actions

Exploring Involves users moving through virtual or physical environments physical context aware worlds, embedded with sensors, that present digital information to users at appropriate places and times . Automatic lights, smart home, ambient wood, Lilly Arbor project.

A virtual world 3D desktop virtual worlds where people navigate using mouse around different parts to socialize (e.g., Second Life)

A CAVE CAVEs where users navigate by moving whole body, arms, and head Which interaction type is the best? Coupling – Tight(visibility is important) versus loose(games)

Let’s inspect your project As a team look at your use cases: What is the ideal interaction type to accomplish each use case? Instructing Conversing Manipulating Exploring

Now look at your screens Is the “ideal” type of interaction you just chose actually expressed on each of your related screens?

Brainstorm A list of “improvements” you could make to your screens, based on a better choice of interaction types. Explain to the class how each of these new these choices is based on your analysis