705_Week 3 - Interactive Design by David Edwin Meyers

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Interac/ve Design (?)

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Interac/ve Design As you've learned, one key factor that deﬁnes digital media is interac/vity—the ac/ve par/cipa/on that transforms audiences into users, players, and par/cipants

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Let us examine several different defini/ons of interac/vity and will formulate our own defini/on

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

During Unit 2, you will learn about: • develop a working deﬁni/on of interac/vity • study the history of computer input and output methods • examine the fundamental elements of interac/on design • design and produce conceptualiza/on and visualiza/on materials for their midterm projects • cri/que their peers’ in‐progress conceptualiza/on and visualiza/on materials

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

As creators of digital ar/facts, we are engaging in

second‐order design.

This means that we create systems that are used by our audiences, who in turn generate their own experiences based on the ways they interact with our systems

First‐Order Logic: Observer has no eﬀect on opera?on of the system. Second‐Order Logic: Takes the observer in account as a part of the system.

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

At the core of interac/vity is the point of engagement for the experience

the interface

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Basketball: the interface consists of: • ? • ? • ?

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Basketball: the interface consists of: • the court • the ball • the goal

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Warioware, (Wii): the interface consists of:

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Warioware, (Wii): the interface consists of: • Wiimote • the screen

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Simply put, the interface is the place where the digital ar?fact and the audience come in contact... the common boundary between the thing and the person.

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Jef Raskin, one of the designers of the Macintosh graphical user interface (GUI), promoted the idea of humane interfaces that make the act of interac/on transparent:

An interface is humane if it is responsive to human needs and considerate of human frail/es. [1]

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Interac/on designers MUST understand that the digital ar/facts they create are going to be used by people. • Not everyone is an expert at understanding and using digital media. • We must be aware of the limita/ons of human thinking and ac/on.

Otherwise, we risk?

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Otherwise, we risk: X . crea/ng things only experts can (or would want to) use and experience X . Losing our audience X . Designing an inferior experience (product)

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Semio/cs and Interpreta/on Interac/vity is a form of communica/on. Therefore, understanding the basics of how communica/on works is essen/al to an understanding of interac/vity. Semio/cs provides the basic recipe for communica/on: • A sign represents something other than itself, the signiﬁed. • Signs are interpreted by interpreters. • Meaning results when a sign is interpreted by an interpreter. • Context shapes the interpreta/on of meaning. [2] Semio?cs: the study of signs and symbols as elements of communica?ve behavior.

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

The key to interpreta/on: which is the ﬁrst step of engaging with the interface of a digital ar/fact, is repe??on ‐ the consistent meaning of a sign in a variety of context.

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Agency Theory Agency theory is a useful tool for thinking about the process of interac?ng with a digital ar?fact via an interface. There are ﬁve steps to the theory’s process: • The beliefs and preconcep?ons that an agent (user/ player/par?cipant) brings to the table his or her reac?on to your work. • An agent’s reac?on forms his or her desires. • These desires lead to the crea?on of the agent’s inten?ons (what they will do to achieve their desires). • These inten?ons then lead to one or more ac?ons. • These ac?ons create a new state in the digital ar?fact, leading to a new reac?on.

AGENCY THEORY Unique Reaction v Forms Desires v Creates Intentions (what they will do to achieve their desires)

v Leads to One or More Actions v Creates New State > Leads to New Reaction

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Imagine you are playing PiNall on an Atari 2600. You are presented with a man standing in a ﬂat landscape, and your only means of interac?ng with him is a four‐way joys?ck with a single red buUon. • A log rolls toward the man, and a hole in the ground appears just before him. • You ins?nc?vely push the joys?ck in the direc?on away from the log, but now you are near the log. • You hit the buUon, and the man jumps over the hole, and con?nues successfully oﬀ screen. Agency theory has guided your pixel‐man to the safety of the next screen.

AGENCY THEORY Unique Reaction (T) v Reaction Forms Desires (T) v Creates Intentions (T) (what they will do to achieve their desires) v Leads to One or More Actions (A) v Creates New State > Leads to New Reaction

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Input/Output Systems Interactivity begins with the input/ output system. In the digital artifacts of today, this system is made up of a finite set of devices:

Input • Keyboard • Mouse • Microphone • Joys/ck • Card reader • Touch screen • Scroll/jog wheel • Bucon • Stylus • Sensor • Hap/c input device, such as a digital glove or mo/on sensor (physical compu/ng) Output • Screen • Speakers • Physical feedback device, such as a “rumble pack” in a game controller • Printout

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

For each combination of input and output, there is a finite set of actions around which we can design interactivity. • Keyboards can be tapped; • mice can point, click, and drag; • joysticks can be pointed; • card readers can input data, etc. An incredible range of interactive experiences can be designed from this relatively small set of input/output devices.

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Gillian Crampton-Smith identifies five qualities of well-designed interactivity: • clear mental model • feedback • navigability • consistency • intuitiveness Let’s look at each of these in turn. Gillian Crapton-Smith is the leading academic in the kind of interaction design taught at schools of art and design. In 1989 she established the first program in interaction design at the Royal College of Art in London.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Clear Mental Model For a digital artifact's interaction design to be effective, there must be a clear model in the mind of the user for how the digital artifact is used.

Take a screwdriver as a simple example. There is an innate intuitiveness to the object— a handle to grip and an end with a flat head or a cross. We understand where to hold the tool and what kind of object can be manipulated with it. We can clearly conceive of how we'll use it, and, when we do, our mental model holds true.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Clear Mental Model However, with digital artifacts, the mental model is often much less clear. Our physical world and the computer’s virtual world seem miles apart…. However, a clear mental model is no less important to the success of a digital artifact’s interface. The mode of interaction should be made evident by the interface.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Clear Mental Model Consider Guitar Hero II as an example. The primary input interface is the guitar-shaped controller with five colored buttons on the neck placed along the fret board, one button where the pickup would usually be, and a whammy bar.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Clear Mental Model The mental model for Guitar Hero II is very clear. The primary interface mimics the shape of a guitar, though it lacks strings, and has a thin button in the place of the pickups. Onscreen, an elongated fret board has colored circles moving across it. This technique creates a connection between the input method on the controller, the colored buttons, and the images onscreen.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Feedback Crampton-Smith identifies feedback as the second important element of interaction design. As she puts it, "A well-designed system has reassuring feedback, so that we know what we've done when we've done it." [3] Feedback allows the user or player to know that they have affected change in a meaningful way.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Navigability Once the user has formed a mental model and has had it confirmed through system feedback, the digital artifact must be navigable. As Crampton-Smith puts it, "Navigability is also essential, particularly with things that are primarily on screen. You need to know where you are in the system, what you can do there, where you can go next, and how to get back." [4] In other words, the experience provided by a digital artifact should have a clear means of use and movement.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Consistency Consistency is of the utmost importance to good interaction design. If you conceive of and create an interaction model that has a clear mental model, provides concise feedback, and is easily navigable, but then you change something about any of qualities, you run the risk of leaving your user confused and uncertain about what to do next. As Crampton-Smith states, "A certain command in one part of the system should have the same effect in another part.”

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Intuitiveness The last of Gillian Crampton-Smith's five attributes of good interaction design is intuitiveness: When we interact with everyday artifacts, like a car, we don't spend too much time thinking about the interaction: we think about where we're heading and what we want to do. Intuitive interaction minimizes the burden of conscious thought needed to operate the system, leaving us to concentrate on our goals.

• clear mental model • feedback • navigability • consistency • intuitiveness

ITGM705 Interac/ve Design/Media Applica/ons ITGM‐705

Intuitiveness When designing interaction, we should remember that the user wants to focus on the experience, not the means of use. If we are designing a game like Guitar Hero II, the player wants to rock, not fumble around with the controller.