Advanced Interaction Design

A3: Computing by the Inch, Foot, & Yard

A3.1

Thursday 4/27

Sketch interface designs for the following screens:

• Inch: A screen smaller than that of a phone (a watch, widget, a thermostat controller)
• Foot: A horizontal multi-touch screen with a diagonal length of 12" (1 foot). Be sure to use the multi-touch functionality in your sketches.
• Yard: A public wall display

Make sure to use the same persona and user interface/domain for all form factors. The task, however, could be different for each. Really think about these tasks and work with each form factor.

Rubric

1. A description for the persona picked is submitted.
2. The persona described is realistic and the description focuses on user goals.
3. A description of a specific task is present and clearly fits with the persona.
4. An interface sketch for the Inch scale is submitted and the task it accomplishes is appropriate for the form factor.
5. The Inch scale sketch has enough detail to understand the interactions involved.
6. An interface sketch for the Foot scale is submitted and the task it accomplishes is appropriate for the form factor.
7. The Foot scale sketch has enough detail to understand the interactions involved.
8. An interface sketch for the Yard scale is submitted and the task it accomplishes is appropriate for the form factor.
9. The Yard scale sketch has enough detail to understand the interactions involved.
10. The tasks for all three form factors fall under the same domain.

A3.2

Tuesday 5/2

Select an actual person and design interfaces that help that person accomplish a task across three form factors:

• Inch: A screen smaller than that of a phone (a watch, widget, a thermostat controller)
• Foot: A horizontal multi-touch screen with a diagonal length of 12" (1 foot). Be sure to use the multi-touch functionality.
• Yard: A public wall display

- Make sure the interfaces across the form factors are designed for the user you picked and for the same application domain.

- Find specific user needs and understand the tasks as they do it now (it may or may not involve digital devices). Your goal is to understand the successes, breakdowns, and latent opportunities that occur and use it to inform your design.

- Each interface must help the user accomplish a specific task that is plausible for the form factor. Be sensitive to the functionalities and limitations each provides.

- Consider how interaction moves across the form factors and keep the design elements consistent across the three.

- These interfaces must all involve an input interface. Be open to all interaction styles including voice, gestures and haptic sensors. You can assume sensing and recognition work flawlessly.

- You can either build on the sketches you worked on for A3.1 or change your application and design entirely. The choice is yours.

- The user you pick may or may not match the persona from A3.1 - For this assignment, just be sure to make design decisions that creatively help the user accomplish the task.

Try to do something edgy, creative and interesting - and have fun while you're at it!

Submit:

• Link to a 1-minute video capturing your user stating their tasks and overall goal.
• Link to a pdf with pixel prototypes (black and white - don't use any color) for the inch, foot, and yard scale displays.

Rubric

1. A persona is described and reflects a real person.
2. A 1-minute video stating the tasks and the overall user goal is submitted.
3. The video captures the real user described as the persona.
4. The video captures the task(s) the design helps accomplish.
5. A pdf with pixel prototypes that don’t use any color is submitted.
6. The pixel prototype for the inch display has enough detail to understand the interactions involved.
7. The pixel prototype for the foot display has enough detail to understand the interactions involved.
8. The pixel prototype for the yard display has enough detail to understand the interactions involved.
9. The user interfaces showcased through the pixel prototypes help accomplish the task(s) and the user goal captured in the video.
10. The design elements are consistent across the three form factors.

A3.3

Thursday 5/4

Build on your design from A3.2 to create user interfaces for the following form factors:

• Inch: A screen smaller than that of a phone (a watch, widget, a thermostat controller)
• Foot: A horizontal multi-touch screen with a diagonal length of 12" (1 foot). Be sure to use the multi-touch functionality.
• Yard: A public wall display

Make design decisions that enable an actual person to accomplish a task (this person can be the same person you interviewed from A3.2 - but feel free to change your user if you find the need to). All the data shown in the design should be driven by the real world. This means that if you show available rooms at Geisel library, these rooms need to exist. You can assume things are "smarter" (For example, rooms in the library can have different sensors etc).

- Think about features of the yard scale display that you could take advantage of: Try and incorporate the opportunity for collaboration. What happens if there is more than one person interacting with it? What can make it alluring from a distance? How does its behavior change when you get closer?

- The interfaces must all involve an input interface. Be open to all interaction styles including voice, gestures and haptic sensors. You can assume sensing and recognition work flawlessly.

- Keep the design elements across the form factors consistent.

- You can choose to sketch your design or create pixel prototypes - focus on the interactions at each scale. If you choose to sketch the designs out, use a marker (no pencil). For pixel prototypes, you can use PowerPoint, Keynote or any other lightweight digital tool.

- Do not use any color in your sketches/prototypes. However, it can be grayscale.

Submit:

• A link to a 1-2 minute video that showcases the user interface at the inch, foot and yard scale.
• Design sketches/pixel prototypes (You can attach pictures or a pdf here)

Rubric

1. A 1-2 minute video showcasing the user interfaces for the inch, foot, and yard scale displays is submitted.
2. A pdf/images of the prototypes is submitted.
3. The inch prototype is designed for a screen smaller than that of a phone and includes an input interface.
4. The interactions on the inch scale is appropriate for the form factor.
5. The foot prototype is designed for a horizontally touch screen with a diagonal length of 12” and includes an input interface.
6. The foot prototype allows for multi-touch interactions.
7. The interactions on the foot scale is appropriate for the form factor.
8. The yard prototype is designed for a large wall display, includes an input interface, and is sensitive of the fact that it is in public.
9. The interactions on the yard scale is appropriate for the form factor.
10. None of the prototypes submitted use color.

A3.4

Tuesday 5/9

Build on your design from A3.3 to create user interfaces for the following form factors:

• Inch: A screen with a diagonal length of 1.5" or less. (Doesn't have to be a watch.)
• Foot: A horizontal multi-touch screen with a diagonal length of 12" (1 foot). Be sure to use the multi-touch functionality.
• Yard: A public wall display

Make design decisions that enable an actual person to accomplish a task. All the data shown in the design should be driven by the real world (This means that any information on your prototypes should be valid/present in the real world - just like in @30).

You need to have a user and a scenario for each of your three scales. These needn't be the same across form factors but it needs to make sense as a whole. Designs for all three form factors should still be in the same domain (same "application"/system). (So you could have a system where different displays cater to a different user/task)

The interfaces must all involve an input interface. Be open to all interaction styles including voice, gestures and haptic sensors. You can assume sensing and recognition work flawlessly. Stay task focused and think about whether the input is valid for the user.

Design your interfaces to have good defaults - no configuration capabilities are allowed. Work extra hard to avoid clutter, and avoid redundant information.

Create real pixel prototypes - these can include color and can be made with any digital tool of your choice. Using real pixels means the prototypes look exactly as they would in the final application - each pixel should be in the right place. Ensure your design stays consistent across the form factors.

There are no constraints placed on the font(s) used. As you think about typography, think about what should be larger and what should be smaller. Information critical to the task should be given importance. Information that changes a lot should be bigger in comparison to more static content. There should be a clear visual hierarchy in your designs.

Think through the tasks, the placement of the different elements, the information shown, and even the colors you pick based on the form factor and the environment it is used in.

• On the inch scale: How do you take a super common task and make it less error prone? How do you present the key information so you are getting what you need even before you click on it? Space on the inch scale is constrained and you really only get one nugget of information on a screen. Maximize pixel usage and be judicious in what you show.
• On the yard scale: This scale is great for multiple people, try and incorporate the opportunity for collaboration. Don't show private information - save that for more personal scales. Show real content but don't crowd it so much that nothing is legibile from a distance.
• At the inch and the yard, a dark background often (though not always) works better than a white background. On a backlit watch or wall display, full-screen white can feel like a blinding light. When just the information is 'lit up', it's often easier to read. (Obviously white backgrounds often work great at the foot scale.)
• Make sure all the text is readable.

Submit:

• Description of the user and the scenario/task for each form factor.
• Design (pixel) prototypes (sized to scale, except for yard). (You can attach a pdf here.)

For class on 5/9:

• Bring your prototypes printed out (in color) to scale - cut out to the actual shape. (For the yard scale prototype, bring an A4 printout)
  Use the full-view template(s) here and cut them out to shape so that they can be worn in class.
• Before class begins, queue up your yard scale prototypes to be viewed on one of the three TVs in the classroom. It might be best to use one laptop per TV and have around 8-10 people per screen.

Rubric

1. A concrete description of a real user is present.
2. A description for concrete scenarios across the three form factors is present.
3. A pdf with pixel prototypes of all three user interfaces is submitted.
4. The user interfaces across all form factors involve an input interface.
5. The user interface designs have a clean layout (there are no awkward line-breaks or uneven gaps between blocks) and are not cluttered.
6. The user interface designs allow for good defaults (There is no unnecessary configuration).
7. The information shown across the form factors is readable and uses the screen space wisely.
8. The user interfaces have good visual hierarchy - Large blocks should contain the information most valuable to a user's task. Information that changes a lot should be bigger in comparison to more static content.
9. The color scheme chosen is appropriate for the form factor and environment it will be used in.
10. The tasks each user interface helps accomplish is appropriate for the form factor. (Inch scale should have common tasks, yard scale shouldn’t show private information)

A3.5

Thursday 5/11

For this assignment, evaluate the feedback you received and work on refining your designs from A3.4.

- Make sure the content is real - there should be no placeholder content.
- Avoid clutter, extraneous lines, 'chartjunk', unnecessarily repeated elements, and any extraneous information.
- Use space judiciously and think of the information presented. Is it useful for people? Could you show more (or less) of it? Is there a better/different way?

You will also redesign a peer's user interface. Think of interaction gaps present and of how you would do things differently.

Submit:

• A 2-3 sentence summary of the feedback you received on Tuesday (5/9).
• Pixel prototypes that reflect an iteration on your own work based on the feedback.
• Paper sketches (this could be separate sketches or just sketched on top of the current design) reflecting the redesign of a peer's interface.

Rubric

1. A 2-3 sentence summary of feedback is present.
2. A pdf or pictures of pixel prototypes for all three form factors is present.
3. Peer redesign paper sketches are submitted.
4. The content on the pixel prototypes for all three form factors is valid in the real world. There is no placeholder content.
5. The pixel prototype for the inch scale has a clear grid from top to bottom and does not contain any chartjunk.
6. The pixel prototype for the inch scale uses space judiciously and the information is easy to read.
7. The pixel prototype for the foot scale has a clear grid from top to bottom and does not contain any chartjunk.
8. The pixel prototype for the foot scale uses space judiciously and the information is easy to read.
9. The pixel prototype for the yard scale has a clear grid from top to bottom and does not contain any chartjunk.
10. The pixel prototype for the yard scale uses space judiciously and the information is easy to read.