Skip to content
Skip to section menu
Search this site
ServicesDesign

Interaction Design

summary | detail

Interaction design is creating a visual model of the way an application behaves in response to user action or input. It shows how functionality is presented and labeled, including user interface widgets, screen layout, and screen flow. The representation can be low-fidelity—for example, a storyboard, sketch, or wireframe—or higher fidelity, such as a detailed interactive screen mockup.

An interaction design shows:

  • How functionality should be presented (for example, which widget to use—dropdown menu, checkbox, option button, or icon)
  • How functionality should be labeled (for example, the label for a text input field)
  • Generic presentation and layout for the interface (widgets, labels, and instructions to present on each page or area of the interface)

A user interface design does not specify:

  • Colors, shapes, images, or fonts used in the interface
  • Visual alignment and flow
  • Page layout
  • Placement and presentation of specific information
  • How to code the interface

All but the last item above are part of a product’s visual design. Although user interface design mockups may show specific widgets, these objects are generic and require visual design to ensure that the interface is both usable and aesthetically pleasing.

An interaction design project might include any or all of the following activities:

  • Screen or web page mockups
  • Supplementary descriptions of interface behavior
  • Task flow diagrams
  • Storyboards or wireframes
  • Paper prototypes for typical user tasks
  • User interface style guide for developers

When to Choose This Method

In a typical product development cycle, interaction design follows requirements gathering. The interaction design is evaluated and tested before developers begin coding or building the product interface.

Samples

Interaction Design Sample

Graph Design Sample

Content of Dropdown Menus Sample

Style Guide Sample

Related Topics

For help with defining an interaction design project or if you have questions about Tec-Ed’s services, please contact Tec-Ed at inquiries@teced.com.

return to top