Channels ▼
RSS

Parallel

Designing for Multi-Touch, Multi-User and Gesture-Based Systems


Summary of Specific Recommendations

  • Affordances
    • Focus on features, actions, and interactions that can be represented visually, as opposed to actions or features that are hidden within non-visible menus. Users need to see what is possible just by glancing at your system.
    • Read up on Gestalt principles of design (based on Gestalt psychology), to understand how the form and visual treatment of objects relates to user perception. Use physical icons (phicons) to bridge the tangible and digital worlds.
  • Engagement
    • Keep users in the flow by focusing on simple, quick, natural interactions. Emotional attachment that is created during fun, playful interactions with your application will transfer to how users feel about your brand long after using your system.
    • Strive for good interaction aesthetics (how the interactions feel while accomplishing something over time); as opposed to visual aesthetics that mainly impact initial perceptions, interaction aesthetics are all about how your system feels while interacting with it.
  • Feedback
    • Feedback must be immediate, and easily noticeable by all concurrent users; use visual design rather than textual feedback.
    • Leverage existing social behavior that people will naturally exhibit, such as verbal communication and simply being able to see what collaborating users are doing. Because of the natural social norms of users, you don't have to design for many potential conflicting user actions (for example, two users trying to play a song at the same time).
  • Don't Make Us Think
    • Try to minimize hidden functionality, except for contextual features that only make sense when revealed during specific interactions. All primary objects that can be interacted with should be visible so that users do not have to remember what is possible. A new user should be able to learn how to use your system just by watching others use it.
    • Use a mix of phicons (physical icons) and digital objects to allow multiple concurrent users to easily see the complete state of the system.

References

Clark, Andy. Supersizing the Mind: Embodiment, Action, and Cognitive Extension

Few, Stephen. Information Dashboard DesignThe Effective Visual Communication of Data

Gibson, John J. The Ecological Approach to Visual Perception

Krug, Steve. Don't Make Me Think: A Common Sense Approach to Web Usability, Second Edition

Norman, Don. The Design of Everyday Things

Norman, Don. Things That Make Us Smart: Defending Human Attributes In The Age Of The Machine


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video