Category Archives: Design Exercises

Design Exercise: Displaying State

Complex systems like the stock market  or election results, and gameworlds like The Sims or World or Warcraft or a fantasy football league have many variables, some of which may be changing in realtime. Some systems that affect our lives profoundly like changes in global climate or the  global finance transactions that created a world-wide financial crisis or the health care system of insurance companies, hospitals, doctors, government organizations, and multiple categories of patients are hard to sum up so that the cause and effect relationships are clear.  The challenge for designers creating interactive models of  dynamic and complex systems is to display the  state. Displaying the state may involve creating a readable summary  of the general current condition that can be examined more closely to make clear the individual states of system components. Ideally it should also provide a way for interactors to explore the causal connections that make up the system, providing visibility for the rules by which the system operates.

Choose an example of a digital display strategy for any such complex system and with a well-focused image and no more than 200 words make clear why it succeeds or fails in conveying the overall state of the system, the state of key components,  and the cause and effect relationships among them.

Design Exercise: Controlled Vocabulary

Find an example from digital media, legacy media, or the world at large of an information space which is overseen by an authority of some kind who dictates what things can and cannot be called through a controlled vocabulary. For example, libraries control what subjects books are listed under, local governments control the names of streets, and government and industry regulators control the use of consumer-directed descriptors such as “For Mature Audiences” or “All Natural.”  The growth of media aggregators for music, film, and television, and new media artifacts such as video games, is creating new opportunities for controlled vocabularies.

Pick a specific case in which a controlled vocabulary is not enough to avoid confusion (e.g. the many Atlanta streets with Peachtree in the name) and illustrate it with an image and a brief description indicating how it got that way, how people cope with it now,  and what might be done to amend it.

Design Exercise: Media Aggregation

Chose a digital artifact that includes two or more media types (text, still images, moving images) related to the same topic, such as a story on a news site that includes text and video, or a social media app  (such as Facebook, Tumbler, Pinterest) that provides containers for aggregating multiple media artifacts.

Consider: What are the principles of organization? How do you go about locating something that is not recent? What granularities of access are available (e.g. albums, single pictures, a person within a picture)? What legacy media structures are used?

Illustrate a well-designed or poorly designed element of one such aggregation application.

Design Exercise: Companionship

Based on the discussion in Chapter 11, post a screenshot and short commentary that illustrates how a particular digital artifact creates EITHER

  • a welcome and/or reliable experience of companionship to a human interactor OR
  • an intrusive and/or disappointing experience of companionship to a human interactor

Possible examples include

  • an explicitly personified information agent like Siri
  • a helpful game character
  •  a recommendation system like the ones on  amazon or Netflix
  • a customized ad system  like the ones on  Google  or Facebook
  • a contextual help system in a familiar digital tool or game.

How visible is the surveillance the companion system is exercising? How voluntary is it?  How appropriate are the suggestions? What expectations do you bring to these environments? How does the experience of the system match your expectations? What would you like such systems to do better 5, 10, or 20 years from now?

Design Exercise: Agency in an Interactive Model

Choose one of the interactive models below or another of your choosing, and play  through multiple turns. If possible, replay it with different settings. Post an illustrative image and short description of how well or badly the model creates the experience of agency.

When you approach the model do you  have specific expectations of the kinds of outcomes it can have and the kinds of decisions you will be able to make? If so, where did these come from? Does the model draw on these expectations? How does the model communicate to you what actions you can take? How does it communicate the connection between your actions and the outcomes the systems produces?  Are there other ways the same system could be modeled? How would the interaction be structured in a model that reflected a different interpretation of the same real world system?

Note that agency does not mean ease of accomplishing a particular goal within the scenario.  Making some outcomes difficult or even impossible to achieve can create the experience of agency if the obstacle represents a meaningful interpretation of the system being modelled.

Examples:

Lemonade Stand  or any other version of it or any similar  “Tycoon” game

Fatworld

Kabul Kaboom

Sim City

Design Exercise: Labeling for Navigation

From any website of a large and complex organization or information space, such as a news site or a university website, choose an example of particularly good or bad labeling within the main menu system and justify your choice. Are the words chosen for the labels meaningful? Are they at the same level of abstraction? Are they distinct from one another? Is there a hierarchy, and if so is it coherent — can you predict and remember which labels are under which top-level category? How many of the labels are there at any one level? Can you tell where you are in the hierarchy when you are several levels down? Can you reach across the structure easily?  Does the navigation system also serve as a page title?

Design Exercise: Legacy Conventions

Good or Bad Use of Legacy Conventions

For any digital artifact (e.g. a website, a digital camera, a digital cell phone), chose a particularly good or bad example of the use of one or more media conventions  (e.g. headlines, screen overlays, video control icons, keyboard layout) adapted from a legacy media form (e.g. print, movies, an analog camera, a hard-wired
analog phone). Make an image that focuses on the adapted legacy conventions and justify your choice as a particularly good or bad design example. What function does the convention serve that is common across media? How does its use change when it is moved from the legacy format to the digital medium?

How to Use the Design Exercises on this Site

The Design Exercises on this site, like the Design Explorations in the book, are appropriate thought exercises for designers which should help them to think outside their disciplinary training and focus on the collective process of inventing the medium.

For students, these Design Exercises are appropriate for short weekly assignments to develop the habit of critiquing design with carefully chosen words and specific examples. A good way to organize this assignment is to have students submit a 50-200 word text and an image with link to an online video, app,  or live website as appropriate, and to have them look at one another’s submissions by posting them to a shared page, like a wiki or a page generated by php from a shared folder. They are a good complement to courses that also include substantial hands-on project development.

The Design Explorations in the book can also be used in the same way but they tend to be more open-ended and time-intensive group activities, suitable for an in-class design lab or longer-term student project development.

Design Exercise: Visual Overviews

Using one of the sites below, or any site of your own choosing that offers visual access to  a complex information space, evaluate whether and how  it affords  Overview, Zoom, Filtering,  and Details on Demand (Ben Shneiderman’s design values).  Are  size, color, proximity, used semantically?  Does the user navigate up and down a hierarchy? across a network? Can the user rearrange the elements? Is there a choice of multiple granularities? What is an example of a specific task that the site supports particularly well or particularly badly?

Smartmoney Map of the Market

Gapminder World

external link: http://www.wefeelfine.org/wefeelfine_pc.html

http://worrydream.com/

http://feltron.com/