Layout and Presentation Advice for the UX Designer

Shane Morris, a former Microsoft UX Evangelist and currently an independent UX Architect, held a session called “Pimp My App” at TechEd Australia 2010, presenting 5 things to know before starting to create a UX, 4 steps for creating a good layout, and 6 tips on how to make a product look great.

Morris considers that UX development should follow these steps: first is the Conceptual Design followed by Information Design, then Interaction Design, and last comes Presentation Design. While UX might be considered an art/science of creating good looking pages, that is the last part in creating UX. He enlists 5 things one should know before doing UX:

1. The first role of a UX design is not to establish the colors and the fonts, but to categorize the information to be displayed and to establish the workflow of that information, helping the user to find his way through it and how to realize the task at hand. Then follows the “emotional tone” of the product.
2. Set the goals from the user, business, usability, and experience perspective because they will affect the design.
   What does the user look for when he is using a product or accessing a page?
   What is the organization offering the product trying to achieve?
   What makes a product usable? Easy to use? Flexible? Adaptable?
   What is the desired experience using the product? This is best found out if provided by potential users of the product, otherwise the designer should ask himself what he would like to see if he were a customer.
3. “You are not your user”. While the designer should try to imagine what the user would like to see when using the product, he must remember that he does not really understand what the user is like or what he feels like, so he should not assume all users will like what he likes.
4. Perform usability tests every two-three sprints to make sure new design implementations are well received.
5. Acquire a good understanding of the flow of the information throughout the product because it helps imagine better ways presenting that information. That’s where one should start when designing the UI.

Morris continues with 4 layout steps:

1. Map out the workflow – determine the sequence of actions the user is likely to perform in order to do his job.
2. List your contents – determine the widgets needed to make the workflow possible. Appropriately choose check boxes, radio buttons, spin buttons, etc. Choose the terminology used, i.e. words appearing on buttons, check boxes, etc.
3. Layout elements in order. Arranging visual elements on a page must consider the flow of a page, which  is top to bottom and left to right for most countries, and the natural order those elements are to be used.
4. Check grouping. Some of the elements are strongly related to one another so it is natural to group them on the page, this might requiring some rearranging of the elements.

He then presents 6 tips to improve how the product looks like:

1. Remove every unnecessary element, a minimalist approach being recommended. Every decoration should be done with a specific purpose in mind. If dealing with a previously designed product, one should remove any element that is not really needed or clutters the view or is misleading in regard to its purpose. For example, 2 related elements should be enclosed by a single group box instead of two, one for each element, if group boxes are chosen to separate an element from other elements on the page.
2. Minimize variation. One should be  consistent with the fonts, layout and colors used. That does not mean using the same characteristics all over the page but the amount of variation should be limited. People are more attracted to consistent and predictable GUIs.
   On the other hand, variation is good to mark different sections or phases of the application. For example, the checkout page on a website should be marked differently then other pages to draw the attention that the page’s purpose  differs from those offering product information.
3. Line stuff up. It is important that various elements on a page to be aligned as much as possible to create a visual flow, making it easier for the user to read the page.
4. Space and size things evenly. There has to be some balance on how elements are sized and spaced. The eye prefers similarly sized and spaced elements, but if they are all the same, there is no variation on the page making it look unnatural.
5. Indicate grouping through group boxes, similarity, proximity, alignment, white space.
6. Adjust visual weight. Attributing different visual weights to elements - using colors, size, shape, contrast, misalignment, animation - helps the user navigate a page in the proper order. For example, the eye will notice faster the elements that are larger or having greater contrast with the background color or having a hot color.

Morris also offered advice on using colors:

• “Red and green should not be seen without a color in between” – taking care of color combinations.
• Using a minimalist approach to the number of colors. Morris asks designers to pick for themselves a number on a scale from 1 to 5, 1 corresponding to having no UX skills while 5 meaning he is an expert designer, then to use the same number of colors in a project. So, if a developer thinks he has no design skills, but he needs to make decisions on the looks of an application, he should go with one color. If someone thinks he is a good designer and he deserves a three on the scale, then he can go with 3 colors. An expert could go with up to 5 colors, but he probably already knows that.
• The background color should be a neutral one - white, gray, black, navy blur or brown – because it works well with most other colors that will be on the page.
• Those not sure what colors to use should go with tints of the same color.
• Choose color palettes from kuler.adobe.com or colourlovers.com.
• Pay attention to color blindness which affects 10% of men, according to Morris. vischeck.com is helpful to make sure the design is appropriate in that respect, and one should not rely only on color to communicate information.
• Cool colors - blue, green – tend to recede so they should be used for elements that are intended to be father away from the viewer, while hot colors – red, orange – tend to approach so they should be used for elements that are closer to the viewer as shown in the image below, the first example being the recommended one.

Regarding the number of fonts, Morris suggested to use the same approach used to determine the number of colors based on the level of UX expertise. Novices should go with one font, while experts can use up to five.

Other resources: UX Pattern Library.