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!
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.