Design Axioms

Let data scream

The data is THE story; it should be front and center. Stories are often muddied by information-starved graphics. Aesthetically beautiful diagrams can suffer from low data-to-ink ratios (lots of paint, little useful data). Don’t pollute the data with eye candy: aim for clear, clean displays. One bite, big flavor.

Other concepts: information density, 80% of screen real estate should be dedicated to data; less than 20% to interface, and let data sing (listening to data can be more story-rich than using your eyeballs).

Reality Bites

Use real data. It’s the truth.

Design with fake data = fake design. Using fake data in your comps and early prototypes will lead to dead wrong ideas and influence bad decision making.

Ban lorem ipsum. It’s a crutch and hazardous to your design health. Using lorem ipsum as data filler is a classic design practice that instantly screws the pooch. Planting fake data into the comps and service produces a fake product.

Listen to the Reality bites rant on the Digital Life podcast in Feb 2011.

Prototype like crazy

Iteration is paramount. Produce many mockups, and the best will shine through.

Get criticism early and often

Good designers are nimble

Great designers build: dive into the tech, build, learn

Pixel Perfect

Show customers and potential users the highest quality comps possible. People latch onto colors, typefaces, interactions, and layout. Instead of concentrating solely on interaction and function design within wireframes, give customers pixel-perfect comps... so they can talk to layout, color, and interaction design.

High fidelity comps = high fidelity feedback

Wireframes are abstract

Bitch loud and often

Allow users to bitch about your service quickly, while it’s still fresh in their minds. Design 1-click feedback from anywhere in the service. Wufoo.com asks for an emotional state in the feedback form. RescueTime.com gets back to complaints and questions within 1 business hour and then asks users to participate in upcoming testing. Treat thy customers like you want to be treated: listen to complaints, respond quickly.

In-interface concepts: tell me what’s happening right now and as I type, teach me (in-context help handling not error handling).

Eat your own dog food

No amount of great design skills or assiduous user testing makes up for actually using the damn thing. If you're going to create interfaces, you need to use them. A LOT. Only through truly living with a product like your users will can you glean the real successes and failures of what you've created.

Use the services you design

Live and breathe the process (or you won’t feel the users’ pain)

Stop seeking others approval

Designers look for idea validation and feedback and often STOP the design process if usability or direct feedback isn't incorporated at that particular moment. Don't stop building and wait for validation from above. Don't wait for explicit blessings to start a new design, project, or direction. Go, go, and go.

Don't wait, just GO

Avoid big bangs (micro releases versus the massive v1)

Sin boldly, ask for forgiveness

Date your users

Talk, listen, watch, buddy-up

Feedback email to dev team: get continual feedback

  • Get continual feedback: instant feedback via email to the development team = service requirement
  • The engineering and design team needs to hear the feedback.... and engage with people using their service. Even 1 step removal from the feedback (like having marketing handle it) hurts. Part of the immediacy is lost. The emotion is lost. Don’t let someone else handle bugs and user experience problems. Hear it first hand (in the language of the customer) and without your marketing/QA spin control+verbage. Make the dev team feel the users EMOTIONAL response.
  • Always have a contact email or form available from every “page” of your service. Don’t make me hunt around in 10s of pages and clicks and force me down a ‘select this problem’ path only to get another FAQ page.
  • Note: Amazon and Google’s help mechanism = what not to do. Look at Wufoo and RescueTime as good examples.
  • Free food works

  • Free lunch draws out the crabbiest of engineers and users. Use the free lunch card to lubricate the feedback lips.
  • Let them bitch and find their pain points

    Organize sessions with users. Not just everyday users, but lead users... people who abuse your service, want to create their own tools (developers who use your API and dev their own tools), advanced users, experts in the field (who may not even use your app).

    Grow an early adopters group immediately. Before coding a single line, have a handful of people who maybe domain experts (like a geologist if you’re building an identify-this-rock service) work with your team... to make you smarter on their work and processes... and to get them involved in the development and evolution of their service. Manage their expectations from the food to managing the meeting to emailers to the service performance and interface design.

Grid it

Graphic design and grid construction are key visual design concepts for interface designers. Grid hierarchies and basic information layouts (similar in book, mag, and newspaper design) will be described and diagrammed. InfoViz enthusiasts, scientists, and engineers often don't know basic graphic design and layout practices. By instituting a few straightforward grids and thinking about how to align and design data (beautiful evidence), data visualization will become an even more powerful storytelling technique.

Gutter, column, margin, captions =

Use one grid and stick to it

When in doubt, bang left

Bend it like Beckham: once mastered, break the grid for elements that need a different treatment

Type less + less type

Typography is the red-headed stepchild of interface design: forgotten, abused, but always visible. It’s the visual hierarchy for words. It’s the interface design for text. Good typography practice is critical for readability and scanning.

Chapter concepts: 5 and 1 rule (use < 5 type treatments of only 1 type face), speak the user’s language (use vocabulary the service target audience is accustomed to, don’t evoke new language patterns unless absolutely necessary), require less reading and use more visual guides (because people don’t read, they skim to the good parts), and use better words and less of them (grab a copy of The Elements of Style and edit text like a crazy person down to every word).

Other concepts: use consistent symbolic vocabulary and the gutter is for bullets and quotes.

Color carefully

Color is one of the easiest tools for designers to use. It is also one of the most difficult tools to actually use well. In most cases, rather than being the hero, color should be a careful accent that helps what really matters - the information, the interaction, the user experience - accomplish its intended goals directly and elegantly. This typical requires color restraint.

Use color sparingly

The document should be center stage, not the paint

What interface?

Great interfaces disappear and have low cognitive overhead and over time become invisible (a la the iPhone photo app). People should be engaging directly with the content, manipulating photos and sorting piles of content without thinking about or seeing an interface ("where the damn edit button?!").

The photo browser for the iPhone/touch is just so perfect to explain what this chapter should cover. You could read all the competing design books, and many others, but I don't think that any of them would have inspired that UI. They would all talk about how to manage what's expected, not achieve the unexpected. "A photo browser without any scroll bars? No previous and next buttons? No "jump to photo" pulldown? No buttons zoom in and out? No button to switch between portrait and landscape? No label on screen that says "Photo 14 of 27"? No button to jump to the first/last photo? Incredible. Breaks every rule in interface books.

Manipulate the data, not the interface

Over time as you use a service or product, the interface melts into the background. You don’t notice it anymore.

Elegance can crush practicality, beauty can be worth more than utility

Repeat customers rock

Design first for the repeat user, then novice, and then finally for the infrequent, inexperienced user. When you first sat in the driver’s seat of your family car, your 16-year old brain freaked out. Reading the dashboard takes enormous cognitive load... during the first 10 neighborhood drives. After 1, 2, 10 or 50 years of driving, hundreds of decisions per second are made within a blink of an eye.

Imagine the dashboard printed with explicit directions for each function, light, and warning. The dash would be washed away by on-screen help and descriptions and the actual dials and driver metrics would be completely obfuscated.

You want experienced users to:

  • become jedis by using your service
  • tell their friends about it
  • demand other services to hook into it
  • make their work products better
  • make users happy (by being efficient)
  • purchase upgrades, future products = loyalty

Deja vu all over again

Experience breeds familiarity, and in interface design familiarity promotes usability. By creating simple, logical patterns within our designs we are able to provide interfaces that users enjoy using, promoting additional use, loyalty and commitment. Building familiar interactions is key for shortcuts, palettes, action location, and overall design.

Feels familiar: shortcuts, palettes, action location, overall look

Cognitive heat sink: I get it, feels right, go here... instead of oh yeah, I remember where that was

Get physical

The keyboard shortcuts, physical engagement with screens....

Lust to dust

Take a system engineering approach to interface and service design.

Design every second of the experience from the packaging to the delivery service (arrives at your home in a beautiful, hand-made paper carton) to plugging it in to all the aspects of using the damn thing.

Performance counts. Response times, load times, how one constructs and engineers the front and backend... all contribute to the snappiness of the service.

Graceful degradation. Design for death.

Missionette Statement

Architects are expected to have a handle on civil, material, and mechanical engineering, landscape architecture, building contracting and city codes, aesthetics, interior design, manipulating light, home energy consumption, and how people engage with buildings and each other.

Interface designers require a similarly broad spectrum of skills from typography to layout and graphic design to interaction design to storytelling.

The Design Axioms describe the minimal rule set for designing interfaces: the 16 foundational concepts that are required knowledge for engineers and designers to create usable and elegant interfaces.

The design of the content (and book) will follow the same tenets outlined within it. Diagrams, screenshots, and pictures (the visual story) dominate the content; text-based descriptions are short and to the point.

Why do we need this?

We’re all designers. We all make conscious and unconscious design decisions every day from the act of walking to lunch, creating a task list, or writing a technical review. Some of us are paid to design in disciplines that require planning the underlying purpose of products or planning the working of something before it is built.

This is a re-education for designers. For 15 years, a production stratification has evolved into stove-piped disciplines from information architecture to user experience to interaction design to usability to graphic design much to the detriment of designers. Emerging from this new discipline of 30 years is the Renaissance interface designer: a technically savvy artist that’s fluent in the fundamentals of good typography, color theory and its application, composition, layout, usability, scripting, and interaction design.

People will tolerate a lot when a service is cheap or free. Do not confuse what people put up with as a measure of what constitutes something that is well designed. Products thrive (or wither) based on the users’ experience from the service company’s reputation to the sale to packaging to visual design to how the software feels to training and help. Users become product apostles when the service experience exceeds their expectations and rocks their world. They spread the word through their social network and drive friends and family to take the service for a spin. Ka-ching.

Great user interface design is critical to produce elegant design solutions that spark people’s interest... and keep them buying into and recommending a service.

Presentations

Design Axioms talk in Feb 2011 at TTI Vanguard as a part of 'Design as Strategy' conference.

Startup-oriented 'Designing User Interfaces Workshop' in April 2011 at Mass Challenge in Boston.

Regular podcast as part of the Digital Life series in 2011. Already in the can are:

Open to all

To keep pace with the evolution of this young discipline, a companion wiki will allow citizens of planet earth can add to and edit the design tenets.

Next steps

Start writing/designing the actual book.

Poster series: each concept (such as “Type less + less type”) has a visual story breakdown on a 4’x3’ poster. The posters will be dominated by large diagrams and sketched examples with callouts. They need to be readable from 15” away and instantly show the singular message of each tenet. Bold graphic iconography and typography are required. The poster series should develop a symbolic vocabulary around each topic (this is VERY tricky).