Class #6: Interaction / Interface Design

Massive topic again, amazing field and 86 slides (when the previous class went overtime with 67 slides :)).

Interaction design is process of designing methods and systems for users to interact with digital products, environments, software or hardware.

IxD: Context, Feedback, Delight.

5 Principles of IxD

In class I broke down Instagram based on the 5 principles.

  1. Feedback — liking an image displays an animated heart over the image and turns the heart icon under the image red. Pull-down refresh is an example for both feedback and affordance — even though some consider it unnecessary.
  2. Affordance — the Discover section has many small photos and a scroll bar indicating there are more if the user scrolls down. The scroll bar becomes smaller if there is more content below the screen creating a visual way to process this information. Another good example outside of Instagram is the bold font of all unread emails in your inbox.
  3. Spatial awareness — when editing photos I am aware that I am in a different section and what my options are in this section (main image is large with smaller icons for options like filters or photo editing). Outside this app another good example are breadcrumbs.
  4. User focus — the new Stories feature is highlighted in the top left corner of the app (also subtly bringing the logo colors into the otherwise minimal design)
  5. Brand tone & voice — very minimal, Instagram puts the user in the forefront by offering a clean and simple interface to eliminate clutter and focus on user content. The font the logo uses also suggests an app used for creative purposes. Pinterest also did a fantastic job emulating the offline experience of “pinning” on a board.

When designing interactions, one has to consider:

  • The interaction model — context, ergonomics, orientation, method of interaction (no hover state on mobile, voice search)
  • Visual elements — type, texture, colors, placement etc.
  • Motion — Gestures, transitions, feedback (iPhone passcode error shakes the screen). According to Neil this is peaking and is going to become more subtle in the next few years.

Another important consideration is whether you really need to implement a feature because once you add it it’s difficult to remove it as people now expect it to be there.

A sidenote: instead of onboarding, a lot of apps and sites use coachmarks and the approach of progressive help as an interactive method of learning new features and functionality.

Interface design

The second part of the class was mostly about user interface considerations. There are so many elements to consider this class could be infinite. I think the main takeaway is to focus on your user and design the interface based on your previous information about the strategy, scope, structure and skeleton.

A few key points:

  • Make sure it’s obvious that a button is clickable, even if it’s flat design
  • Toggles should have obvious states and optimally, text within the design (off / on)
  • Ain’t nobody got time for tabs / accordions
  • Radio buttons = single choice, checkboxes = multiple choice
  • There are many UI / IxD pattern libraries available for common situations

Our exercise for this class was to come up with different variations for a particular UI feature.

  1. Create 3 different ways a search field could display a dropdown of suggested categories based on your search
  2. Suggest 3 different ways a 6-item menu could be displayed on a mobile screen
  3. Point out 3 possible ways a form can be validated

This is what our team came up with:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.