The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.
Interaction design is largely about removing cognitive friction or producing a happy path—in order to manipulate someone into realizing a goal. That type of manipulation is typically called “helping,” and it is often, actually, helpful.
Jon Kolko in Manipulation and Design
Principle one: Make it direct
In Page Edit
- Single Field Inline Edit
- Multi Field Inline Edit
- Overlay Edit
- Table Edit
- Group Edit
- Module Configuration
Drag and Drop
- Drag and Drop Module
- Drag and Drop Object
- Drag and Drop Action
- Drag and Drop Collection
- The Challenges of Drag and Drop
- Toggle Selection
- Collected Selection
- Object Selection
- Hybrid Selection
Principle 2: Keep It Lightweight
- Fitt’s Law
- Contextual Tools
- Always Visible Tools
- Hover-Reveal Tools
- Toggle Reveal Tools
- Multi Level Tools
- Secondary Menu
Principle 3: Stay on the Page
- Dialog Overlay
- Detail Overlay
- Input Overlay
- Dialog Inlay
- List Inlay
- Detail Inlay
- Inlay Versus Overlay?
- Virtual Scrolling
- Inline Paging
- Scrolled Paging: Carousel
- Virtual Panning
- Zoomable User Interface
- Paging versus Scrolling
- Interactive Single Page Process
- Inline Assistant Process
- Dialog Overlay Process
- Confirgurator Process
- Static Single Page Process
Principle 4: Provide an Invitation
- Call to Action Invitations
- Tour Invitation
- Hover Invitation
- Affordance Invitation
- Drag and Drop Invitation
- Inference Invitation
- More Content Invitation
- Brighten and Dim
- Self-Healing Fade
Purpose of Transitions
Principle 6: React Immediately
- Live Suggest
- Live Search
- Refining Search
- Live Preview
- Progressive Disclosure
- Progress Indicator
- Periodic Refresh
My job is making applications and Web sites meaningful (wow, big word). How does that work?
- Thinking relevance. I ensure that functionality and content is relevant to what users actually want or is in the scope of what they might want.
- Thinking logic. I develop a structure that is consistent but does not exclude users with a different view on the content’s organisation.
- Thinking culture. I explore shared values, ideas, and activities of users in order to create a meaningful digital environment.
- Thinking narrative. Every product wants to tell a story. I apply that story to the structure, the navigation journeys, and the placement of contextual information.
“In software, design permeates construction.”
The four design problems in software development:
- Design of the problem
- Design of the solution
- How do we build it?
- Builing it
Alan Cooper (video): Similarities Between Interaction Designers and Agile Programmers
The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.” Moving focus from one element to another is instant and seamless. On the flip side, separating elements onto different screens slows things down with navigation while increasing clarity. There is more room for explanation and luxurious space when fewer elements occupy the page. The eye has less to filter through. The course of action is more obvious.
From Ryan in the Article ‘Learning from bad UI‘
- Experience design is remediating design: (…) it understands its relationship to earlier media forms
- Experience design is diverse (…) it welcomes the multiplicity of digital media forms
- Experience design is embodied design (…) it recognizes how digital technologies seek to embody he virtual
- Experience design is contextual design (…) it understands the importance of the cultural and economic contexts in which it will function
From: Bolter, Jay David and Gromala, Diane (2003), Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency, Cambridge, MA: MIT Press, p. 148
- Strive for consistency
- Enable frequent users to use shortcuts
- Offer informative feedback
- Let the user know when they have completed a task
- Offer simple error handling
- Permit easy undo
- Provide a sense of user-control
- Reduce short-term memory load
From: Shneiderman, B. (1997), Designing the User Interface, Wokingham: Addison-Wesley
- Involving users in the design process helps with expectation
management and feelings ownership, but how and when to involve
users is a matter of dispute.
- Putting a user-centered approach into practice requires much
information about the users to be gathered and interpreted.
- Ethnography is a good method for studying users in their natural
- Representing the information gleaned from an ethnographic study
so that it can be used in design has been problematic
- The goals of ethnography are to study the details, while the
goals of system design are to produce abstractions; hence they
are not immediately compatible.
- Coherence is a method that provides focus questions to help guide
the ethnographer towards issues that have proved to be important
in systems development.
- Contextual Design is a method that provides models and techniques
for gathering contextual data and representing it in a form
suitable for practical design.
- PICTIVE and CARD (collaborative analysis of requirements and
design) are both participatory design techniques that empower
users to take an active part in design decisions.
From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley, p. 312
- Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based)
- High-fidelity prototypes may be vertical or horizontal.
- Low-fidelity prototypes are quick and easy to produce and modify and are used in the early stages. There are two aspects to the design activity: conceptual design and physical design.
- Conceptual design develops a model of what the product will do and how it will behave, while physical design specifies the details of the design such as screen layout and menu structure.
- We have explored three perspectives to help you develop conceptual models: an interaction paradigm point of view, an interaction mode point of view, and a metaphor point of view.
- Scenarios and prototypes can be used effectively in conceptual design to explore ideas.
- We have discussed four areas of physical design: menu design, icon design, screen design and information display.
- There is a wide variety of support tools available to interaction designers.
From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley, p.277-8