Interaction Types and Ideation

INFO-I441 Interaction Design Practice is a direct sequel to INFO-I300. Where INFO-I300 was a survey course that taught HCI and interaction design, I441 focuses just on design. Remember from the start of I300 that HCI is a broader field that includes the study (theories, experiments, psychology, etc.) of how humans interact with computers. Interaction design (also called UX for User eXperience) involves the creation of user interfaces, devices, and products that humans will use (interact with). Interaction design benefits from the conclusions of HCI, but it doesn’t necessarily look to learn new results along those lines; it instead seeks to apply them in order to create better human-computer interactions.

One of the fundamental early results from I300 is that the human-computer interaction is an execution-evaluation cycle. The user executes (does something) and then they evaluate (observes and interprest feedback from the system). The interaction designer seeks to avoid problems (gulfs) in either of these phases of the cycle by making controls discoverable and feedback helpful. Expert evaluation techniques like cognitive walkthroughs help ensure there are no gulfs, and design artifacts like use cases provide a detailed map for what the interaction will be like.

Before the designer has created use cases, designed the interface, or evaluated it, they must first understand their users (the Golden Rule of Interaction Design). Chapter 6 of The Design of Everyday Things is about this design process and the broader concept of design thinking. That chapter, one of the last we used in I300, goes into detail about how design is first a search to understand or define the correct problem and then a search to find the best solution. These two searches led to the double-diamond model of design.

That chapter also described how a typical design process should unfold in four steps:

1. Observation
2. Ideation
3. Prototyping
4. Testing

These four steps are cyclic because often after testing, new information will be observed which causes the design to change in major or minor ways. The cyclic nature of this process emphasizes how design is an iterative process that allows improvements to be made as new information is learned from prototyping and testing a design.

Observation initially involves research and later involves interpreting the results of testing. Ideation involves the generation of multiple competing designs so that the best one can be found and further developed. A common description of ideation is “exploring the design space”. The design space means the set (or space) of all possible designs that satisfy a given design problem. Some will be better than others. Because design solutions are inherently imprecise (how can you ever know you have found the “best” design?”), it is important to consider many possibilities, identify good candidates, and iteratively improve them. Considering multiple candidate designs during ideation then means that the designer is literally exploring the design space.

One way to explore the design space is to force yourself to create designs that are different. All too often, students who are asked to create two designs end up creating one and then changing it in some minor way. For instance, the student may move the navigation from the top of the page to a sidebar. This is not a different design. There may be reasons to prefer one over the other, but it is a minor variation. To consciously consider major variations, it is useful to know the 4 interaction types. This categorization is due to Rogers, Sharp, and Preece in their textbook Interaction Design. They 4 types are:

1. Instructing – the user issues commands (instructs the computer)
2. Conversing – the user and computer have a dialog or conversation. The computer helps the user achieve their goal instead of passively waiting for the user to instruct.
3. Manipulating – the user changes something directly, e.g. by using dragging to resize, moving a file from one folder to the next, and so on…
4. Exploring – this category is the loosest. The user is given the most freedom to navigate through the system and interact. Computer games are the easiest example of this interaction type.

Only the simplest apps will use just one of these; instead an app will usually have a dominant interaction type and use the others to a lesser degree. Or different parts of an app will have different dominant interaction types. For example the Windows File Explorer or the Finder is MacOS are parts of their respective operating system that allow the user to manage files. In either, files are icons that the user can manipulate by dragging between folders, to the desktop, and so on. Beyond manipulating, both also support instructing via toolbars and pull-down menus. Similarly, Powerpoint supports instructing via its Ribbon interface and pull-down menus (Mac only). Powerpoint also supports manipulating by dragging elements of slides to move them, resize them, or other modify them. Almost all of these actions can be done by instructing, too. Right-clicking an element can be used to open a format menu where the position or size can be entered exactly (instructing). Both interactions types have their advantages. Manipulating allows immediate feedback and is intuitive to most users. Instructing allows precise control down to the pixel. Instructing also allows universal access for users who are not able to operate mice or other devices to manipulate.

An easy way to explore the design space when beginning a design is to consider each of the interaction types and imagine how the user could complete their goals using that type as the dominant one. The designer would end up with 4 designs with major variations.

It’s also easy to imagine that multiple designs could use the same interaction type but still be major variations. The exploration of the design space now looks like:

Finally, note that exploring the design space is the start of the process, but then iterative refinement begins. Promising designs are kept while less promising ones are discarded. Rather than keeping promising designs as is, it’s good to refine them and continue to explore variations of them. After some iterations of this process, a design solution may be reached.

Ideation Methods

Ideation methods exists to help designers explore the design space in this fashion. One called 10+10 (ten plus ten) suggests the designer consider 10 major variations that all solve the same design problem. While creating these variations, be as creative and nonjudgemental as possible. After they are created they can be evaluated, but this kind of filtering is not helpful while ideating. Once you have created 10 or more designs and evaluated, keep the promising designs while discarding the rest. For each promising design, consider 10 minor variations on each of the major ones:

The multitude of different designs don’t all need to be fleshed out the same amount. They just need to be concepts giving the gist of the design. The point is to consciously consider major variations, choose the promising ones, and then consider minor variations. Since much of design is searching for the problem as well as the solution, it’s not really possible to immediately jump to the optimal solution. Especially before experience with design is built up, consideration of many alternatives is the way to proceed. This ideation method and other similar techniques are taken from Sketching User Experiences by Bill Buxton and Sketching User Experiences: The Workbook by Greenberg et al.

Iterative refinement is the way to proceed from initial idea(s) to a successful solution to a design problem.