Book index: Designing Web Interfaces

Bill Scott: Designing Web Interfaces: Principles and Patterns for Rich Interactions

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

Direct Selection
• Toggle Selection
• Collected Selection
• Object Selection
• Hybrid Selection

Principle 2: Keep It Lightweight

Contextual Tools
• …
• 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

Overlays
• Dialog Overlay
• Detail Overlay
• Input Overlay

Inlays
• Dialog Inlay
• List Inlay
• Detail Inlay
• Tabs
• Inlay Versus Overlay?

Virtual Pages
• Virtual Scrolling
• Inline Paging
• Scrolled Paging: Carousel
• Virtual Panning
• Zoomable User Interface
• Paging versus Scrolling

Process Flow
• …
• Interactive Single Page Process
• Inline Assistant Process
• Dialog Overlay Process
• Confirgurator Process
• Static Single Page Process

Principle 4: Provide an Invitation

Static Invitations
• Call to Action Invitations
• Tour Invitation

Dynamic Invitations
• Hover Invitation
• Affordance Invitation
• Drag and Drop Invitation
• Inference Invitation
• More Content Invitation
• …

Principle 5: Use Transitions

Transitional Patterns

• Brighten and Dim
• Expand/Collapse
• Self-Healing Fade
• Animation
• Spotlight

Purpose of Transitions
• Engagement
• Communication

Principle 6: React Immediately

Lookup Patterns
• Auto-Complete
• Live Suggest
• Live Search
• Refining Search

Feedback Patterns
• Live Preview
• Progressive Disclosure
• Progress Indicator
• Periodic Refresh

IA/UX: Making stuff meaningful

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.

The four design problems in software development

“In software, design permeates construction.”

The four design problems in software development:

1. Design of the problem
2. Design of the solution
3. How do we build it?
4. Builing it

Alan Cooper (video): Similarities Between Interaction Designers and Agile Programmers

The trade-offs between elements adjacent in space versus stacked in time

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

1. Experience design is remediating design: (…) it understands its relationship to earlier media forms
2. Experience design is diverse (…) it welcomes the multiplicity of digital media forms
3. Experience design is embodied design (…) it recognizes how digital technologies seek to embody he virtual
4. 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

8 golden rules for interface design

1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Let the user know when they have completed a task
5. Offer simple error handling
6. Permit easy undo
7. Provide a sense of user-control
8. Reduce short-term memory load

From: Shneiderman, B. (1997), Designing the User Interface, Wokingham: Addison-Wesley

User-centred approaches to interaction design

1. 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.
2. Putting a user-centered approach into practice requires much
   information about the users to be gathered and interpreted.
3. Ethnography is a good method for studying users in their natural
   surroundings.
4. Representing the information gleaned from an ethnographic study
   so that it can be used in design has been problematic
5. 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.
6. Coherence is a method that provides focus questions to help guide
   the ethnographer towards issues that have proved to be important
   in systems development.
7. Contextual Design is a method that provides models and techniques
   for gathering contextual data and representing it in a form
   suitable for practical design.
8. 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

Design, prototyping and construction

1. Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based)
2. High-fidelity prototypes may be vertical or horizontal.
3. 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.
4. 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.
5. 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.
6. Scenarios and prototypes can be used effectively in conceptual design to explore ideas.
7. We have discussed four areas of physical design: menu design, icon design, screen design and information display.
8. 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

The process of Interaction Design

KEY POINTS
1. The interaction design process consists of four basic activities:
   identifying needs and establishing requirements, developing
   alternative designs that meet those requirements, building
   interactive versions of the designs so that they can be
   communicated and assessed, and evaluating them.
2. Key characteristics of the interaction design process are
   explicit incorporation of user involvement, iteration, and
   specific usability criteria.
3. Before you can begin to establish requirements, you must
   understand who the users are and what their goals are in using
   the device.
4. Looking at others’ designs provides useful inspiration and
   encourages designers to consider alternative design solutions,
   which is key to effective design.
5. Usability criteria, technical feasibility, and users’ feedback on
   prototypes can all be used to choose among alternatives.
   – Prototyping is a useful technique for facilitating user feedback
   on designs at all stages.
6. Lifecycle models show how development activities relate to one
   another.
7. The interaction design process is complementary to lifecycle
   models from other fields.

From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley