User Interface Design as a Collaborative Process

These are brief notes about the process of user interface / experience design and how I’ve been shepherding the process in recent years, and currently in the Digital Innovation Lab.

How User Interface Design Emerges

User interface design is not a science, not the result of a formula or diagnosis. It is the result of a creative process that attempts to negotiate between application needs, technological capabilities, a conceptual model and collective bargaining between human contributors.

Design is a result of negotiation between tradeoffs: what seems like a good design and tradeoff for me may not be for others. It is, therefore, vital to include multiple contributors and perspectives!

Collecting Requirements

Although the design and target of a software application (whether or not it is implemented as a web-based application) may evolve over time, the first step you should take is to collect basic information about the goals of the platform and the target audience:

  • What is its purpose? What goals are to be supported by its use?
  • Who is the intended audience? What are their abilities and background?
  • What are use-case scenarios?

Determining Technical Affordances and Limitations

The next step I recommend is determining the capabilities and limitations of the technology upon which the application will be running. This is particularly important for web-based applications, given the wide range of devices that end-users might be using. You can ask such questions as:

  • What is the range of devices and technologies that will be used?
  • What are their current and foreseeable capabilities, affordances, and limitations?

For example, devices with a mouse have the ability to hover without selection, unlike (most) touch screens.

Graphic User Interface Design Principles

Although GUIs have matured greatly through the years and standardized widgets and toolboxes provide ready-made solutions to many design challenges, and there are many different guidelines for designing application interfaces, the following principles have remained most useful in my own process of formulating a GUI:

  • Create a clear and consistent conceptual model of the data and application’s methods of dealing with it
  • Deploy clear and familiar metaphors
  • Group similar things together in visual space
  • Create intuitive spatial movements and patterns
  • Provide good default settings: user only inspects/changes if needed
  • Invite the user to explore the interface through low-risk experimentation

Use Focus Groups

Bringing in multiple collaborators can usually enhance your creative processes and synergies, as long as everyone is committed to respectful dialog and negotiation over aspects of design. Although different projects may need different stages of design, I have in my work in the DIL broken design into three stages, bringing in collaborators with particular backgrounds for each:

  • Conceptual design: Decide what the application is meant to do (and not do), and the relevant set of metaphors and analogous processes. Bring in stakeholders who are your potential end-users.
  • Graphical user interface design: Decide how those goals and metaphors are to be translated into a set of icons, images, and layout on the display. Bring in potential end-users as well as people will design skills (such as graphic designers and GUI programmers).
  • Software implementation: Decide how the software will be implemented: which platforms, frameworks and libraries to use. Bring in collaborators, peers with relevant experience, system administrators, etc.

Avoid Blank-Page Syndrome: Create then Critique

It can be overwhelming for people to start every design dialog from scratch. In recent years I have created an initial proposal in a collaborative online document (e.g., GoogleDocs) that everyone can read and comment upon beforehand. This accelerates the process by giving a starting point, even if it is flawed or incomplete.

In the case of GUI design, you may wish to use an online design tool.

Brainstorm Freely, then Winnow

Let everyone freely contribute ideas and concepts and analogies in the early stages of brainstorming. Narrow these down to viable options later.

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