[youtube http://www.youtube.com/watch?v=M1P61O_8ydU&w=560&h=349]

Designer Paul Rand pointed out that, sadly, we’re more familiar with bad design than good design. And that's caused us to be more conditioned to prefer bad design. But we don’t have to put up with it. We're delighted when we experience good design. Speaking to a room of developers at Silicon Valley Code Camp, Uday Gajendar, Principal Product Designer for Citrix, gave a session on the "Fundamentals of Good UI Design." As you go into any screen design project, he said, remember that every button, icon, text, tab and menu item is yet another visual and cognitive signal a user must process and learn. After the presentation, Gajendar and I joked about how the audience was looking for tools and recipes to create the perfect design. The problem is design isn't an exact science. It's never clear when you have it perfectly right. It requires lots and lots of practice. Eight Fundamentals to Good UI Gajendar broke up his presentation into eight fundamentals. The first half are the visual presentation of communications. The second half are about interaction and experience. Fundamental #1: Grids/Layout/Structure “A well designed UI must be grounded in strong layouts with a grid. Grids provide order, regularity, rhythm and control. Knowing how to work with grids is a vital interface design skill, which takes years to master,” said Gajendar. A grid helps with understanding. It lets items with higher priority or focus live and have their place. There are three levels of structure:

• Navigational – Easy, meaningful path. (taskflow)
• Informational – Sensible grouping of content and actions (menus and tabs)
• Visual – Attractive, clear organization of screen’s content (layout)

Even when you have dense data, you can organize it with a grid and make it consistent so it’s not confusing. Fundamental #2: Typography Type is about tone of voice, readability, and legibility. Diligently crafted type is paramount for effective communication. It has a tone of voice. Just rendering your font in different ways says something differently even though the words are exactly the same. Gajendar points out that Google actually has too many fonts, where Quora doesn't. The fonts on Quora are organized so as not to be overwhelming. Gajendar suggests a good starting point is three font variations. See if you can solve all the communications on your site with just three fonts. If not, start to scale up from there. Fundamental #3: Color "Color follows the same constraints as type, with the exception that color gets to the core emotional impact of the product in a more direct, visceral way that type does not. Where type speaks, color punctuates," said Gajendar. To create a color palette, he suggests using Adobe Kuler. Use the color system to solve functional issues first. Then add expressive, emotive, and brand qualities. Fundamental #4: Icons/Imagery Gajendar's biggest issue with icons is their overuse. They're visual indicators of status, functionality or branding. They should complement the main content, not contribute to UI clutter or noise. For these first four fundamentals, layout, type, color, and icons, be judicious and use restraint. See what you can do with minimal color , type and icons. Fundamental #5: Metaphor "A proper mental model drives good design. Expressed as a metaphor, it frames the product properly in your mind. Intentional and contextual, it shapes understanding of the product’s purpose and how to use it," Gajendar says. Your UI is having a dialogue with the user (e.g., You do this and I give you this in return.) A slider is a good way to create a metaphor. “Many design problems are simply issues of poor terminology: button labels, menu items, feature names, etc. Generally speaking, product language should be no more complicated than everyday conversation. Ask your target audience.” Fundamental #6: Behavior “A digital product is used to do something. Interactive behavior and specifically the ability to directly manipulate data with an input device as an intuitive, seamless extension of the user’s hand mind, are critical in that regard.” Affordances, motion and feedback are key. These are the three ingredients to show things that are behaving well. You need to give information back to the user. What happens when you mouse over something, drag, click, etc. Affordances suggests what you can do with the information. Feedback says it has accepted what you’ve done. Fundamental #7: Patterns “A pattern describes an optimal solution to a common problem within a specific context,” said Gajendar. “As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above and reach the status of a digital pattern.” Fundamental #8: Coherence Through Principles Everything you do with each one of these fundamentals, whether visual or behavioral, should adhere to your stated goals. If you're ever questioning why something is there, just refer to your principles. Ultimately, you're trying to solve the problem of what is a good interface. NOTE: Many of the quotes attributed to Gajendar should be "co-attributed" to Andrei Herasimchuk of Twitter as the two of them wrote this presentation together.