Stanford University

Assignment 4: Interaction Design

Part I

Final team

You will be assigned a team of three or four people from your studio.


Interactive Explanation

From any of the interactive explanations prototyped by any of your A3 teams, select a concept you will focus on implementing in high-fidelity for this final assignment. When selecting a concept to implement, try to strike a good balance between a challenging concept to teach and an approach that can be realistically implemented before the end of the quarter. While you might choose to start with the final prototypes developed in A3, you may also choose to start from an earlier iteration of prototypes. In the first part of this assignment you will develop high-fidelity (look and feel) prototypes (e.g. mockups) and do a bit of implementation.

Note: It is okay for multiple groups to work on the same concept.

Identify the sub-concepts

As you saw from your prototypes created in A3, teaching a concept involves (1) coming up with a strategy for explaining it interactively and (2) breaking down the strategy into sub-concepts. Each sub-concept can experienced though text, visuals, or interaction. For example, here some sub-concepts in the Parable of the Polygons and the interaction and visuals that convey them:

  • Sub-concept: Polygons prefer diversity
    • Interaction: Drag polygon from no diversity to some diversity. See it become happy.
  • Sub-concept: Polygons can be happy, sad, or meh.
    • Visual: Illustrate an unhappy polygon with less that 1/3 of neighbors like him.
    • Visual: Illustrate a happy polygon with exactly 1/3 of neighbors like him.
    • Visual: Illustrate a “meh” polygon with all neighbors like him.
  • Sub-concept: Every polygon would be happy with a mixed neighborhood, but small biases add up.
    • Interaction: Move unhappy polygons until everyone is happy or sad (see that the board is more segregated)

For the concept you selected, first identify all the sub-concepts necessary for a complete explanation, then add a brief summary of the visuals and interactive elements that will convey it. The goal is to choose the overall scope of your explanation (what aspects of the concept will your explanation cover and what aspects will it leave out.)

Hand sketch three storyboards of the design

Now that you have an overview of all sub-concepts your explanation will contain, it is time to start brainstorming visual designs (e.g. storyboards) for your interactive explanation. We want to see three different storyboards for the full website of your interactive explanation. In each of the three storyboards, hand sketch each of it's sections (each section should roughly correspond to a sub-concept). The sections should be drawn big, and put on a separate piece of paper. (Note: we are differenting hand-sketching from using the program Sketch). A section might correspond to one part of a scrollable page, or to one page within a multi-page website.

You may reuse some ideas (and some of the section drawings) between the three storyboards, but you should experiment with different user flows through the application, different grid structures, and calling attention to information through negative space. Aim for variety — diversity in your designs will make it easier to find the one that you like best. Focus on layout and wse grayscale to differentiate between the different parts of your design (you will choose colors and other visual design elements later). One piece of advice: don't make it too complex, since you'll be implementing it soon.

Here is an example sketch for one section of a project building a physician newsleter portal:

Courtesy of Julie Stanford and Sliced Bread Design

Two Pixel-Perfect Mocks

Pick your top two hand sketched storyboards and create pixel perfect mocks for each.

If you can get your hands on a Mac, we strongly recommend the trial version of Sketch for OS X. (You can also install it on the cluster computers.) Its large library of templates can give you tons of premade elements (especially helpful for this assignment: the Twitter Bootstrap UI elements) so you don't need to reinvent everything from scratch. An alternative is Adobe Illustrator or Photoshop, available on Stanford cluster machines. Many of the UI template libraries work with these tools as well. However, they have high learning curves. If you are truly stuck, tools such as Figma or Keynote or Powerpoint can work, but be aware that it can be difficult to use them to produce designs that look like they would be realistic web sites rather than slideware. It's fine to use Sketch UI kits for default styles and buttons, since the focus isn't on visual design right now. Likewise, you can use Lorem Ipsum text if you need.

Below are example Sketch mocks for three sections of a mobile app. Note that the look and feel are in high fidelity, but the text might not be fully realized and and interactions are not implemented.

We recommend making sure to get feedback in studio or office hours at this point, before narrowing down to a single design to pursue!

Courtesy of Julie Stanford and Sliced Bread Design

Implement one interaction

In your list of sub=concepts, you identified several interactive elements of your explanation. Pick the one of the key (e.g. risky) interactive element from your design and implement it. The implementation does not have to be perfect, but it has to been good enough to get useful feedback from users. This interaction should be used with both of your pixel-perfect mocks. Put this on the web for real users to test using their own computers.

User feedback

After your interaction is ready, use the techniques you learned in CS 147 to get feedback from users on your designs and the interaction you implemented. Summarize what you learned, and how you will be iterating based on the feedback. Aim for at least five users (and ten if you want to impress us).

Submit and Present

On Canvas

Pull everything together into your submission for A4-1 on Canvas. This includes:

  • The outline of your sub-concepts with accompanying visuals or interactions
  • Your three hand sketched storyboards
  • Your two pixel-perfect mocks
  • A link to a live version of your interaction
  • A summary of your user feedback method, results, and plans

In Studio

Print out your storyboards and pixel-perfect mocks and bring them with you to studio for critique. You will have five minutes to lay out your goal, designs, and user feedback.