Interaction design The process of interaction design Requirements Data gathering Interpretation and data analysis Conceptual design Prototyping Physical design
Conceptual design Introduction It aims to turn requirements into a conceptual model A conceptual model is a high-level description of the proposed system, addressing what the system should do and how it should look like Conceptual model User interface - Mental model
Conceptual design Some recommendations Do not forget the users and the context wherein the interaction takes place Strategy: think of them while building the conceptual design Aim for discussing your ideas with the users Our contact with the users do (should) not end after having gathered the requirements Design low-level prototypes to engage the users in the discussion To have a more focused discussion Iterate, iterate, and iterate
Conceptual design A three-pronged strategy: Interaction style Interaction mode Metaphor Interaction paradigm Strategy
Conceptual design Strategy Interaction style The type of interface and the interaction it implies, for example, command line, GUI, or speech Interaction mode Refers to perceptual modalities (e.g. visual, auditory or haptic Based on activities Instructions Conversations (command language, form filling ) Manipulation Exploration (command language, menu selection ) Based on objects Analogies
Conceptual design Strategy Interaction mode What kind of activities does a game have? What kind of activities does a graphic package have?
Conceptual design Strategy Interaction mode What kind of activities does a game have? Manipulation and navigation What kind of activities does a graphic package have? Instructions and conversation
Conceptual design Strategy Interaction mode In a system like Google Calendar, how can we carry out the task of making an appointment amongst various users considering their restrictions (time, relevance )? Conversation (which date? I select the date) Forms? Command language? Menu? Speech?
Conceptual design Metaphor - background Metaphors are pervasive in everyday life, not just in language but in thought and action ARGUMENT IS WAR Your claims are indefensible I demolished his argument You disagree? Okay, shoot! Though there is no physical battle, there is a verbal battle, and the structure of an argument attack, defense- reflects this Lakoff, George, 1998 (2003). Metaphors we live by, London: The University of Chicago Press
Conceptual design Metaphor - background The essence of metaphor is understanding and experiencing one thing in terms of another ARGUMENT is structured in terms of WAR Another type of metaphors are orientational A whole system of concepts is organised with respect to another concept HAPPY IS UP; SAID IS DOWN That boosted my spirits I m low these days Lakoff, George, 1998 (2003). Metaphors we live by, London: The University of Chicago Press
Conceptual design Metaphor in design Combine familiar knowledge with new one, with the aim of helping the user to understand how to interact with the system Desktop metaphor: we place documents in the desktop, we have folders on the desktop Mix of known and unknown elements We know what a bin or trash is, but we do not usually have a bin/trash in our desktop (we have it underneath, for instance)
Metaphor Conceptual design Metaphor in design
Conceptual design Metaphor in design Metaphor How to come up with a good metaphor? To understand what the system will do To identify what areas will be difficult to understand or give rise to problems To generate metaphors The desktop metaphor The system will allow the user to edit documents (pictures, videos, text ), the user might work with more than one at the same time and need to know where the documents are if we look at how most of them work, they have the documents on their desk
Conceptual design Metaphor in design Metaphor Should answer questions such as: What is the structure of the metaphor? (folders, files ) Is it worth designing a metaphor? (can we do it in another way?) Is it possible to create the metaphor? (depending on the concept and amount of information ) Will users understand the metaphor? Is it extensible / flexible? (desktop metaphors works in different windows operating systems )
Conceptual design Metaphor in design Metaphor How can we answer these questions with respect to the Google Calendar exercise? Structure Relevance Representation Comprehension Extensible
Conceptual design Interaction paradigm Interaction paradigm A model or pattern of HCI that encompasses all aspects of interaction, including physical, virtual, perceptual, and cognitive Following up on our calendar: Ubiquitous/Pervasive computing Computers considered a part of the fabric of our lives and something that resides in a grey box. Wearable computing http://www.interaction-design.org/ encyclopedia/ wearable_computing.html
Conceptual design Wrapping-up We have developed a vision of the system What to do How to do it Discuss / evaluate the conceptual design with your users
Conceptual design Wrapping-up More aspects to consider Technologies Multimedia Virtual reality Immerse humans in a virtual world Augmented reality Integration between real and virtual objects in a way that augments the user s perception and experience. The user must maintain a sense of presence in the real world http://www.youtube.com/watch?v=jsnb06um5r4 User interfaces Touch screen Voice recognition
Interaction design The process of interaction design Requirements Data gathering Interpretation and data analysis Conceptual design Prototyping Physical design
Prototypes What is a prototype? Why do we design and evaluate prototypes? Low-fidelity prototypes High-fidelity prototypes Which prototype?
What is a prototype? A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from (Wikipedia) Paper-based prototypes Digital prototypes (material) model
Why prototypes? People are more comfortable criticizing paper prototypes than high-fidelity ones (lots of time and energy to build) In most of the cases, people cannot tell you exactly what they want, but if they see something and use it, they can tell you what they do not want
Why prototypes? We usually build more than one prototype: Feasibility we can actually build it Clarify requirements Compatibility with other parts of the system Take the best of every prototype, rather than focusing on only one
Why prototypes? Prototypes come in many ways and levels of detail Horizontal Breadth of functionality Without specifying details Vertical Do not show the broad picture Represent a specific area with a complete drill-down to the lowest levels Diagonal Combination of both
Low-fidelity prototypes Low-fidelity prototypes are more focused on how the design works than on what it will look like They are easy, and inexpensive to make They should be flexible enough to be changed They are used early and often No special knowledge is required: all team members can create them Pencil drawings http://www.youtube.com/watch?v=grv2szurpv0
Low-fidelity prototypes Storyboard Involves using a series of pictures that describes a particular process Storyboards take the form of a rough scenario that tells a story, and they can be explored at any point to determine the dynamics and objects involved Storyboards can be used to study existing work flows or generate requirements
Low-fidelity prototypes Storyboard (Hartfield and Winograd 1996)
Low-fidelity prototypes Storyboard Filling up the gas tank of my car
Low-fidelity prototypes
Low-fidelity prototypes Sketching Based on using drawings made by the users We create things which illustrate how the system works
Sketching Low-fidelity prototypes
Low-fidelity prototypes Wizard of Oz People interact with a computer system (or prototype) that they believe to be autonomous, but which is actually being operated or partially operated by an unseen human being
Low-fidelity prototypes Guided A team member interacts with the prototype and the end-user observes the interaction, and comments on it We do not need to design low-level details (for instance, we can talk to the user and discuss them)
Digital High-fidelity prototypes Set of screens, interactive, operative, Director, Visual Basic, Dreamweaver ios (https://www.flinto.com/, https://popapp.in/#overview, ) Android (https://fluidui.com/,...)
High-fidelity prototypes Analyse technical issues, sell ideas They are (very) visual We should not use them to explore ideas Why?
Which type of prototype? Prototypes might evolve over time Low-fidelity prototypes explore, iterate, easy, quickly High-fidelity prototypes can confuse the end-user Sometimes, we have to start from scratch
Using prototypes in conceptual design The aim of a prototype is to gather information about our design This information can be provided by end-users, team members If we wish to confirm our design, horizontal highfidelity prototypes can help us to do so
Interaction design The process of interaction design Requirements Data gathering Interpretation and data analysis Conceptual design Prototyping Physical design
Physical design Once the conceptual design has evolved sufficiently, we can begin to think about the physical design, envisioning what it will look like, what components it will require, and how the screens will be laid out There is no clear-cut distinction between the conceptual design and the physical design; there is simply a natural progression Not to force the conceptual design by imposing predetermined ideas about screen layout and interface components Iterate
Physical design Once we have determined that the design is conceptually complete, we can begin to design the actual screens and page layouts.
Physical design Design principles: derived from theory (of information, design..) Recalling rather than remembering Rules: specific versions of design principles Consistency across different screens
Physical design Interface design standards: set of principles, rules, based on previous experiences, which increase efficiency ISO9241 Ergonomic Requirements for Office Work with Visual Display Terminals ISO13407 Human-centered design processes for Interactive Systems ISO 14915 Design of the User Interface in Multimedia Applications
Physical design Design principles: Eight golden rules [Shneiderman 1998]: 1 Strive for consistency. Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout. 2 Enable frequent users to use shortcuts. As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.
Physical design 3 Offer informative feedback. For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. 4 Design dialog to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.
Physical design 5 Offer simple error handling. As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error. 6 Permit easy reversal of actions. This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
Physical design 7 Support internal locus of control. Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders. 8 Reduce short-term memory load. The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.