Interaction Design 101

Weather App

Weather App by Sergey Valiukh

What is Interaction Design?

Ever used a mobile app and felt like you figured out how to use it within the first couple of minutes? When you went on the Twitter app and pressed the box to type something, did a keyboard popup so seamlessly that you didn’t even notice there may have been some other interaction? Ever pressed a button expecting one action, but got another?

Interaction design (IxD) is the process for creating logical and thought out interfaces. It helps users easily learn and use the interface in an engaging and intuitive way to prevent unnecessary roadblocks when the user is trying to complete a task. IxD is one of many segments (i.e. Information Architecture, UX Research) that make the UX field. Having intuitive interaction design in your site, app, or whatever interface you may be designing, is a crucial element for delivering a positive user experience.

IxD Concepts: The Basics

UX Booth came out with an awesome article in 2009, “Complete Beginners Guide To Interaction Design”, about the top concepts that interaction designers use to drive their work forward:

  • Goal-driven design: What is the number one goal that your users want to do on your app? Figure it out by conducting user research and make sure your app does this one thing exceptionally well.
  • Interface as magic: “The best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
  • Usability: Your users want to achieve their goal by using your interface easily. If you can do this, they will favor it.
  • Affordances: In a nutshell, links should look and act like links, and should invite users to interact with the link the way they would expect to. Same goes for buttons, and any other interactive element. “Because affordances express a great deal about the underlying functionality behind a web site or service, it’s essential that designers utilize this concept consistently and cohesively throughout their designs.”
  • Learnability: They key here is to simply not reinvent the wheel when facing similar design challenges. A set of design patterns has already been established and are ready for interaction designers to use. Note that if the design uses a truly unique interface, interaction designers should take great effort in making that interface learnable, which is not an easy task since it requires a strong knowledge of current design conventions, affordances, and overall usability.
iOS New Gestures

iOS New Gestures by Javi Perez

“First Principles” of IxD

Bruce “Tog” Tognazzini, a human-computer interaction guru, outlines 19 “first principles” to design effective interfaces.

Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and can settle down to do their work. Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time. Effective applications and services perform a maximum of work, while requiring a minimum of information from users.

Full list of principles:

Aesthetics

  • Aesthetic design should be left to those schooled and skilled in its application: Graphic/visual designers
  • Fashion should never trump usability
  • User test the visual design as thoroughly as the behavioral design

Anticipation

  • Bring to the user all the information and tools needed for each step of the process

Autonomy

  • The computer, interface, and task environment all “belong” to the user, but user-autonomy doesn’t mean we abandon rules
  • Enable users to make their own decisions, even ones aesthetically poor or behaviorally less efficient
  • Exercise responsible control
  • Use status mechanisms to keep users aware and informed
  • Keep status information up to date and within easy view
  • Ensure status information is accurate

Color

  • Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presented (Color Blindness)
  • Test your site to see what color-blind individuals see (Color Blindness)
  • Do not avoid color in the interface just because not every user can see every color
  • Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad

Consistency

  • The importance of maintaining strict consistency varies by level (Levels of Consistency)
  • It is just important to be visually inconsistent when things act differently as it is to be visually consistent when things act the same (Induced Inconsistency)
  • Over time, strive for continuity, not consistency (Continuity)
  • “The most important consistency is consistency with user expectations” (Consistency with User Expectation)

Defaults

  • Defaults within fields should be easy to “blow away”
  • Defaults should be “intelligent” and responsive
  • Replace the word “default” with a more meaningful and responsive term
  • Both your vocabulary and visual design must communicate the scope of a reversion

Discoverability

  • Any attempt to hide complexity will serve to increase it
  • If you choose to hide complexity, do so in the showroom only
  • If the user cannot find it, it does not exist
  • Use Active Discovery to guide people to more advanced features
  • Controls and other objects necessary for the successful use of software should be visibly accessible at all times
  • There is no “elegance” exception to discoverability
  • With the exception of small mobile devices, controls do not belong in the middle of the content area
  • Communicate your gestural vocabulary with visual diagrams (example below)
    Screen Shot 2015-06-30 at 2.26.04 PM
  • Strive for Balance
  • User-test for discoverability

Efficiency of the User

  • Look at the user’s productivity, not the computer’s
  • Keep the user occupied
  • To maximize the efficiency of a business or other organization you must maximize everyone’s efficiency, not just the efficiency of the IT department or a similar group
  • The great efficiency breakthroughs in software are to be found in the fundamental architecture of the system, not in the surface design of the interface
  • Error messages should actually help

Explorable Interfaces

  • Give users well-marked roads and landmarks, then let them shift into four-wheel drive
  • Sometimes you do have to provide deep ruts
  • Offer users stable perceptual cues for a sense of “home”
  • Make Actions reversible
  • Always allow “Undo”
  • Always allow a way out
  • Make it easy and attractive to stay in

Fitts’s Law

  • The time to acquire a target is a function of the distance to and size of the target
  • Multiple Fitts: The time to acquire multiple targets is the sum of the time to acquire each
  • Fitts’s Law is in effect regardless of the kind of pointing device or the nature of the target
  • Fitts’s Law requires a stop watch test

Human-Interface Objects

  • Human-interface objects can be seen, heard, felt, or otherwise perceived
  • Human-interface objects have a standard way of being manipulated
  • Human-interface objects have standard resulting behaviors
  • Human-interface objects should be understandable, self-consistent, and stable
  • Use a new object when you want a user to interact with it in a different way or when it will result in different behavior

Latency Reduction

  • Wherever possible, use multi-threading to push latency into the background
  • Reduce the user’s experience of latency
  • Keep users informed when they face delay
  • Make it faster to begin with 🙂

Learnability

  • Limit the Trade-Offs
  • Avoid only testing for learnability

Metaphors

  • Choose metaphors that will enable users to instantly grasp the finest details of the conceptual model
  • Bring metaphors “alive” by appealing to people’s perceptions–sight, sound, and touch – as well as triggering their memories
  • Expand beyond literal interpretation of real-world counterparts
  • If a metaphor is holding you back, abandon it

Protect Users’ Work

  • Ensure that users never lose their work

Readability

  • Text that must be read should have high contrast
  • Use font sizes that are large enough to be readable on standard displays
  • Favor particularly large characters for the actual data you intend to display, as opposed to labels and instructions.
  • Menu and button labels should have the key word(s) first, forming unique labels
  • Test all designs on your oldest expected user population
  • There’s often an inverse relationship between the “prettiness” of a font and its readability.

Simplicity

  • Balance ease of installation vs. ease of use
  • Avoid the “Illusion of Simplicity”
  • Use Progressive Revelation to flatten the learning curve
  • Do not simplify by eliminating necessary capabilities

State: Track it

  • Because many of our browser-based products exist in a stateless environment, we have the responsibility to track state as needed
  • State information should be stored in encrypted form on the server when they log off
  • Make clear what you will store & protect the user’s information

Visible Interfaces

  • Make navigation visible
  • Limit screen counts by using overlays

Leading IxD Examples

Apple Watch by Jakub Antalík

Apple Watch

Android Wear by Ramotion

Android Wear

Float Label Form Interaction by Matt D. Smith

Form animation

 Mobile Animations & Interactions

Mobile Animations & Interactions

Resources:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s