“Developers do tons of design work and often have bigger impact on the design than the designer,” say RJ Owen, Design Researcher, and Michael Salamon, Lead Experience Architect for EffectiveUI. The two led a session at the Future Insights Live conference entitled Design Essentials for Developers.
Given that developers are so integral to the process, they need to understand the language of design in order to better communicate with designers, and vice versa. We talked about the biggest mistakes designers and developers make when they work together.
Three areas of design that are of greatest importance to developers are graphic design, interaction design, and design research.
This is comprised of order, variety, contrast, symmetry, tension, balance, scale, texture, space, shape, light, shade and color. We use graphic design to make intent visible and emotional.
This is the process of exposing intent through actions and feedback. To better illustrate, Owen and Salamon offered up Don Norman’s design vocabulary:
- Visibility: The ability to tell if something is or isn’t interactive. The user can simply identify what the item is and how they actually work with it. For example, a lamp with a switch is obvious. Sometimes you can break this rule, but people might not know how to interact with (e.g., a lamp with no visible switch).
- Affordances: Visible objects where you can easily see and know how to interact with them. They afford how they should be used. For example, with door handles, a horizontal one says you should push while a vertical one says you should pull. In the digital world buttons are for pushing, not pulling or spinning.
- Feedback: Gives information as to the current system state. When a door lock is horizontal, the door is locked. When it’s vertical it’s unlocked. It’s easy to screw this up and not give people good feedback. A good example is a progressive loading bar that’s architected poorly or doesn’t let you know when it’s finished.
- Mapping: The system’s interface should conform to the user’s idea of how something should work. The whole concept of folders on your computer is a good example. Files aren’t stored in actual folders on a computer. A file is actually in a bunch of different places on a disk. But we understand the concept of files in folders, so that’s how they’re represented.
- Constraints: Prevent errors before they can occur. Limit people from going out of bounds and causing errors. For instance, choosing dates. If you want to take a flight somewhere, a travel site won’t let you pick a date in the past. You’re essentially providing guardrails for users so they don’t run off the path.
- Consistency: Maintaining a standard in the way visual objects are used. This is not a hard and fast rule as there are examples of breaking convention when you’re trying to create a mood. But be careful of breaking consistency, since you’ll sacrifice ease of use.
The process of pretending to be, interviewing or shadowing users in context of using your device. When you’re done doing your research and interviews, analyze your results. Turn your results into findings. Summarize the findings in terms of a set of agreed-upon design heuristics.
Owen and Salamon offer the following tips for a better working relationship. Developers should:
- Respect designers
- Appreciate beautiful design
- Validate hunches with quick user interviews
- Feel empowered to design