Killer UIs Principle #9. Organize the Page Into Logical Groups

If there’s a lot of content on a page, organize the content into logical groupings. Use space between logical groupings and each other.

Section 7 addresses a functional layout. As a further refinement to that, group similar content together and separate that group from other objects or text.

Grouping similar data, data entry fields, text, objects, etc. together, and then separating those groups from each other helps the user to understand the function of the page. It’s easy to grasp the separate topics when similar items are grouped together, and much easier than trying to comprehend an entire page at one glance.

Demonstration Examples

www.wheelcovers.com

This site is very clean. You’ll notice that there’s a nice banner graphic that is visually appealing that separates content above and below and is the centerpoint of the page. The header area has the contact info clearly displayed as well as Search and the Cart. These are the most commonly used functions by online catalog shoppers and these functions are grouped together and easy to find by users.

Between the header and banner ad is a drop-down menu. Below the banner ad are nicely arranged images with each product category clearly displayed. Below that are featured items.

Each section of the page has similar content and it’s well laid out.

WheelCovers-com

www.urbanroad.com.au

This website features a much more contemporary style. It also has logical groupings of content and it’s easy to navigate, with information grouped together in an easy-to-find layout.

In addition to having a completely different style, the layout is different as well. Even with a completely different look and feel, the page can be easily navigated and is a nice example of the right way to lay out a page.

UrbanRoad

 

www.lovoda.com

The last example is a fashion website, so we’re covering a wide range of user demographics–and completely different-looking UIs.

This third example is also nicely laid out and the user can navigate it easily, another good example of a logical layout.

Lovoda

Summary Note

The principles demonstrated by the websites apply to installed apps as well. Installed apps are limited to the display area of the smallest monitor used by customers, requiring better planning of content on each page. Especially with this limitation, one must avoid cramming content onto the page while continuing to follow the earlier principles for layout, spacing, coloring, etc.

With the limited space for apps, it’s crucial to have menus with logical content under each title, and having the right content on the screen. Screen content often includes buttons or icons that direct the user to subsequent pages. Arranging these action buttons must follow the logical layout.

The three examples above also demonstrate most of the earlier principles, particularly the use of white space and spacing. (No color gradations or background images in these examples!)

Each has an aesthetic look that the target demographic relates to. Wheel Covers has a very strong, macho look to it, perfect for its target market. Urban Roads has a very contemporary look that mirrors the style of the products they sell. Lovoda has excellent appeal for women. The style and look of the page is reflective of the fashions they sell.

When you design a website or an app, you need to apply all of the applicable principles. When looking at apps and websites, notice those that appeal to you and pick out the principles that are followed.

When looking at apps and websites that you don’t like, identify the principles that are violated. You will start to develop your eye for what makes a great app or page.

 

©2017 Curt Larson. All Rights Reserved.

Advertisements

8. Alignment! Alignment! Alignment!

Don’t arrange content haphazardly on the page! Arrange objects and text in rows or columns. While there might be space between objects and text instead of lines and borders, arrange objects and text neatly on the page with everything lining up.

Make objects, such as icons, the same size. Make text fields the same size. Sometimes text fields have to fit different lengths of data; in this case, commonize as close as possible. For example, addresses. Addresses are a long text field, cities can be long, however state and zip are short. Each may require a different length. For the sake of appearance, take the address and city and make those the same length, then make the state and zip code fields the same length. Line up the boxes so that they align on the left and the right.

This section should not require a lot of description to explain. Yet there are still a ton of websites where text fields do not align, spacing between fields changes, icons are different sizes, and so on.

No matter how you slice it or dice it, the page looks neat and orderly or it looks cluttered or messy. Aligning and sizing fields and elements makes it look neat and orderly. Neat and orderly wins the day.

Demonstration Example

Here’s an example of a PDF form from the US Gov to fill out a passport. Note that this form is used to demonstrate the difference between poor and good alignment of fields.

(Important note: The third version of this form is NOT an example of the best way to design a page, not by a long shot! This example is used to show the impact of bad alignment, and the difference or improvement when you clean up the alignment.)

Their online form is much cleaner, fortunately, however this PDF form is a great illustration of the WRONG things to do. At first glance, it’s confusing. The switch between one solid field and one box for each letter is visually odd. Spacing between data fields varies and similar data fields have different lengths.

About the only positives on this page are 1) it fits on 8-1/2 x 11 sheet of paper, 2) it contains all the needed info, 3) the left margin is consistent.

Converting this form to change the letter box fields to standard data fields, keeping the same locations of the fields, it looks like this:

This is an example of what some web forms look like. I have filled out web forms like this! It’s hard to visually follow what data goes where and users spend additional time trying to find where specific data fields are.

If we clean up this form so that data fields line up, and rearrange a few to keep similar data fields in a column, it looks better:

Notice the difference?

This version is much more pleasing to the eye, and the alignment conveys a sense of order instead of confusion. Without the constraints of fitting this on an 8-1/2 x 11 piece of paper, even better alignment of data fields can be achieved.

An important note, while outside the scope of this chapter, the brown background color is a poor choice for customer satisfaction. Light blues, greens, grays, even light pink or yellow is much more pleasing to the eye. Please refer to the appropriate chapters for background colors, fades, etc.

Good Examples

These examples are samples of design templates found by a Google search. Notice with all three examples how the alignment of fields to the left AND right helps convey a sense of balance and order.

The first example does a nice job using three different field lengths, and has them nicely aligned in columns.

The second example below has all the fields the same length, even if not needed, like for the zip code. However the consistent alignment makes the form look clean and neat.

The second example (above) could use a shaded background to make it more appealing, which is covered in an earlier chapter.

This third example adds a gray background and helps the data fields pop out. They’ve used a drop-down field for the state, but it’s not offensive.

The important point of this chapter is to make the content align. Many examples can be found on the internet of good and bad forms.

While forms have been used to illustrate the Alignment principle, good alignment applies to all page layouts, whether web pages, installed app UIs, reports, icons, descriptive text with images and icons, interactive menus and so on. Keep the content on the page aligned. It makes for a much cleaner UI, is pleasing to customers, and helps achieve that all-important customer satisfaction.

 

© 2017 Curt Larson. All rights reserved.

7. Ergonomics: Functionality Wins!

Definition—Ergonomics: scientific study of the efficiency of people in the workplace.

A classic example of ergonomics is driving your car—how easy or how convenient is it to manipulate the various devices, buttons, knobs and switches in your car? Are all of the controls reachable with only moving your hands and arms, or do you have to lean forward or sideways? What is accessible on the steering wheel and what is on the steering column, accessible with a flick of the fingers?

Ergonomics in software design follows that same principal. Are all of the user controls easy to manipulate? Is the layout intuitive to the user, following a left-right, top-down philosophy?

Good ergonomics in software design means not only an aesthetic layout of functions, but a logical layout of functions that matches the actions a user normally performs or would be expected to perform.

In other words, what is the user going to do and how would he or she intuitively do that? Match the software to the natural tendencies of users and you have a winner.

How do you do that?

It’s one thing to say, “Put the most-used functions up front, and then the least-used in sub-menus.”

One way to identify the most commonly used features is to do user testing and see what functions users will try to do the most. Another is having analytics in your existing software that counts the number of times each item has been clicked.

Once you have the functionality identified, you have to eliminate menu clicks as much as possible. For example, when I want to use bluetooth headphones with my iPad, I simply turn on the headphones to the bluetooth setting and the iPad connects to it.

With my Android phone, even though the headset is already registered, I have to go through a pairing process after I turn the headphones on. What a pain! Why do I have to do that? Why can’t the software automatically re-connect to the registered device?

Part of functionality is simplicity. Make the functions SIMPLE.  Why make users perform required actions that can be automated? Why ask questions that 99% of users will answer the same?

Part of functionality is EASY. When the Model T was first invented, there was a hand-crank starter until the electric starter was invented. Now we’ve even eliminated having to put the key in the ignition. If it’s in your pocket and you’re close to the car, you can start your car at the push of a button.

The fourth component of functionality is to group common functions together. We’re all familiar with the File and Edit menus, with similar functions grouped together. The most commonly-used functions get big buttons on the main screen, while lesser functions are accessed via a menu. The menu title is logical with the listed functions and the menu items are similar in nature.

Thus Functionality breaks down to:

  1. Most commonly-used functions are the easiest to find and execute, preferably with dedicated buttons on a main page
  2. Functions are SIMPLE to execute (the bare minimum of menu clicks)
  3. Functions are EASY to execute (no or few decisions to make)
  4. The remaining functions are logically grouped into menus

Killer UIs are easy to learn because they follow a functional layout. Killer UIs are easy to use because there’s a minimum of menu clicks to execute the important functions.

Make the UI functional, easy and simple–and toss in an aesthetic flair–and you can’t lose.

 

 

 

6. Color Gradations Add Appeal

Color gradations can be better than solid colors for page or section backgrounds. Fading means the transition from a color to a lighter color or tint of the same color, or to a darker color or shade of the same color. (Tint: a color mixed with white in greater or lesser amounts.)(Shade: a color mixed with black in greater or lesser amounts.)

Tinting or shading a color gradient are the same concept, just a matter of direction. In one direction you’re shading the starting color darker, in the other direction you’re tinting the starting color lighter.

Blues and grays are the most common backgrounds to fade, although any color can be used. The background color must match the theme of the site, and follow Color Theory as described in Section 5.

Here’s two examples of fades, the first from white to light blue, the second from light gray to white.

Of course, fades don’t have to start or end in white. Fading from a light gray to a lighter gray is common and is a nice look. Fading from a blue to a lighter blue can also look elegant. There’s no hard and fast rule for when to fade and when not to fade; experimenting with different looks will help choose what looks best.

Here’s the same two swatches from above, but instead of white a lighter blue or lighter gray is used. This is a more subtle change, yet still gives a pleasant look and feel.

If the initial design for a UI results in it looking spartan, adding a fade to the background can give it some flair.

Another technique is fading from one color to another, known as a blend. Blending from a color to a gray gives a nice look, but care must be taken to match the tint or shade of the color to the proper tone of gray.

Green

This concept can be used when gray is part of the website theme, part of the look and feel of the site. Adding a gray blend when the gray is not otherwise utilized adds a random color into the site’s theme and can look jarring.

Blending from one color to another is tough to pull off. They can be great for certain websites, however for desktop apps this is way other the top. If you have a great sense of color and follow the Color Wheel accurately, you can achieve a nice look. It’s tough to pull off though, so if you’re just starting in app design, leave it alone.

Here’s a couple of examples where fades have been used to good effect on websites. Note that these are not apps, however they show the use of a faded background to make the page easier to read and add an aesthetic.

Advanced applications of the fade are demonstrated with these two images:

The sky background uses the fade principal to great effect, going from blue to white. The ocean image uses blue and a turquoise-blue, two different but closely related colors, fading from dark-to-light blue on top, then a transition with the beach and a very slight fade of the crystal clear water. Very eye catching, not boring, and can make a website pop.

Important Note: It’s very unusual for an app to use images for a background, as the use of an image is to capture interest and attention for a marketing purpose, to get the viewer to interact with the site.

An app typically requires the user to perform functions and you want to focus the user’s interest and attention on the actions to be performed. Using a simple color gradation adds an aesthetic without pulling attention away from the functional aspect of the app. These image examples are used to illustrate how color gradients are used for both apps and websites.

Here’s another color gradient with the ocean and sky, staying in the blue theme entirely. Both the sky and the water lighten as you move towards the center. This use of a color gradient in an image really focuses the viewer’s eye on the center of the page.

Ocean2

Applying the image version of the color gradient to a website, it really makes the site pop and focuses the viewer’s eye right where you want it.

PicLens

Notice that the background has a gray fade going on, while the image uses real-life elements of blue to white from left to right to lend dramatic effect with the powder (snow) indicating action and excitement, and the vivid blue sky, which has its own dark to light gradient going from top to bottom.

The image banner really works, and the subtle gray gradient in the background adds a pleasant element.

Wix.com has this website template ready for use. It uses color gradients and different shades of blue with the ocean to make the image interesting. It captures interest and certainly conveys an idea to the viewer! Notice that the insert is in a green, a cross between the green vegetation on the land and the blue of the water, without resorting to turquoise.

Wix

Somebody has been paying attention to Color Theory, keeping the website theme constant on the page. Not only does this showcase the color gradient, it’s an excellent example for Section 5 as well.

While the images are an advanced application of the use of color gradients, notice how the color gradient works in them, adding visual appeal for the viewer.

5. The Use of Color

Companies often have a color associated with them. The company logo has a predominant color and this color is carried through their branding. Take the Green Bay Packers, the green and gold is nearly synonymous in the minds of football fans with The Pack. Their website uses the green and gold theme in the design of their website to good effect, with titles and fonts, highlights and backgrounds, adhering to the theme. The use of images that showcase the green and gold as well is a subtle but effective application of this principle.

Packers-a

Antivirus software apps follow the color theme of the company. Symantec and Norton products use gold and dark brown (or gold and black) in their website and in their app. Kaspersky uses green. Trend Micro augments this and uses red and white, with complementary colors to highlight.

Use colors that complement each other

If you have no sense of “color style,” use a color wheel to get complementary colors (ref: Color Theory)

Some people have no sense of color. You’ve seen them—images of guys who should let their wives choose their wardrobe spring readily to mind.

For the layman, there is a tool known as a “color wheel” that displays the spectrum of colors. Googling “color wheel” or “color theory” will bring up numerous references on how to use the color wheel to choose the correct that complement each other. Several references are listed at the end of this chapter and more can be easily found online.

The wheel on the left shows the 12 major colors, called hues. The wheel on the right shows the infinite gradations blending from color to color (hue to hue).

You can also have “flavors” of a color. Starting with the standard hues, going to lighter or darker colors is defined by the following:

  • A tint adds white to a color
  • A shade adds black to a color
  • A tone adds gray to a color

The wheel on the left shows the range of tints—amount of white—in a color, with gradations from pure white to the solid hue. The wheel on the right shows the twelve standard hues with the respective tints, shades and tones.

The Color Theory charts discussed in this write-up identify what combinations of colors can be used together. In addition, you can use tints, shades and tones of a hue with the pure hue with good effect.

Certain combinations of colors are pleasing to the eye. These combinations have been codified into rules, called relationships. These rules can be found by searching “Color Theory” and “Color Wheel.” Knowing and using these rules will yield color combinations that customers find pleasing. Combinations of colors that are different than the rules are jarring to the eye.

When you select a color and theme, follow the color wheel to select your complimentary colors.

Using colors in your app from the wrong combination(s) will produce a UI that, when viewed by customers, will not be accepted and even worse, rejected and not purchased or used.

Using colors with conflicting tints, shades or tones can also result in visual displeasure. For example, orange and blue are complementary, according to the chart. But a dark blue with a light orange isn’t quite as pleasing, or a dark orange with a light blue. When using tints, shades and tones, first match the colors according to Color Theory, and then use the same level of tint, shade or tone with all colors.

  • Seth Wilson has a couple of great charts on Color Theory. Google “Seth Wilson Color Theory” to find copies of his charts, as well as related references.
  • graf1x.com has interesting information on the history of the color wheel and sells posters.
  • inkfumes.blogspot.com also has information and a source for Color Theory posters as well.

The main point of this chapter is that COLOR is important, using color consistently throughout the app is important, and the various colors used need to be coordinated. Following Color Theory will help you coordinate your colors in a way that is pleasing.

This chapter is by no means a complete tutorial on Color Theory! It points you to Color Theory and emphasizes the importance of following it. It works.

©2017 Curt Larson. All Rights Reserved.

4. Use Space as a Border and Separator

Point #4 in the 12 Principles for Creating Great User Interfaces addresses a second way of using space to great advantage.

Using space between objects acts as a visual separator or border between them and works to emphasize the items. The lack of other “clutter” makes the images and text stand out.

Apple uses whitespace on their website to great effect. There are no lines separating sections on their webpage—the closest they come to a line is a light gray shading, a shadow that is almost invisible.

Point #3 addresses whitespace as a background. Point #4 emphasizes space instead of lines or borders around sections. Grouping elements together, and then grouping other elements together, with space between the two groups, gives an uncluttered look. You can see the use of space in the examples in the previous section.

Apps have more info gathered into a small space, even if it’s a browser- based UI with scrolling capability. Space between objects and text is cleaner than a line border or box and can be used to great effect. Consider using it in your app design.

I’m a car enthusiast (aka car nut) and I’ve owned a few BMWs. There’s an aftermarket parts company, Bavarian Autosport, that does on nice job on their site of using space between the different sections. It’s basically an on-line catalog and it’s a clean layout.

They have enough space between the various elements in the header, menu bar, vehicle selection section, and the catalog listings. The site is easy to read, easy to use, the eye can easily find the important info on the page.

Some might say it’s not sexy, but it works very well and is a good example of both the use of whitespace for background and space between objects.

Bavarian Autosport: http://www.bavauto.com

cropped-afsa-2014-4xc-125h  ©2017 Curt Larson. All Rights Reserved.

 

3. The Use of Whitespace

Apple is famous for their use of whitespace on their website for good reason—it works! Whitespace sets off the objects and text on top of it, giving them greater emphasis and clarity.

Other colors can be used but you must maintain SIMPLE with your design.

For apps, white can be too plain and apps need framing and background besides the Windows border to work visually. Light grays work well as a backdrop for apps. Darker colors work well for navigation bars, title bars, headers and footers, contrasting with a white, light gray or light color body background.

When using other colors as a backdrop to create space and achieve a similar effect, particularly with apps, it requires more skill and color coordination. White works with anything, while a color background must be coordinated with the other colors. (This is described in detail in principle #5.)

Darker colors can also be used for background but care must be taken to prevent overwhelming the eyes with the background color. Apple has gone with a black background for the iPhone 7 webpage, giving a very dramatic look. It’s harder to make a dark background work but when done well, makes the page distinctive and stands out from the crowd.

Samsung has taken their cue from Apple and made their own distinctive page. It’s not quite as “clean” as the Apple site, but it does use white space and black background to good effect.

Sony, on the other hand, has embraced more of the Metro look and placed a number of images in a tiled arrangement. The page is a lot busier and crams a ton of sensory input into a given size.

The advantage of whitespace is it highlights, emphasizes and helps to focus the attention on the important elements on the page. With a page like Sony’s, every element is competing with every other element for attention. While exciting and visually stimulating, if this was an app it would be confusing to use.

The Sony page is more like a dinner buffet–everything is presented at once and in bulk and the user must sift through all the info to pick what he wants. Apple’s site moves the user through from beginning to end, clearly presenting each concept so that the user understands it. It’s like a five-course meal at a nice restaurant, where each course is presented to the customer and the visual appeal adds to the experience.

With an app, the page needs to focus the user’s attention on the actions the customer needs to take, and move the user through a sequence of actions or thought processes, with the end goal of the user easily doing the action (or actions) required.

Whitespace helps. When executed well, it adds an aesthetic quality, focuses the user’s attention properly, and separates distinctive elements or sections smoothly.

iPhone 7 page (black background): https://www.apple.com/iphone-7/

iPad page (white background): https://www.apple.com/ipad/

Samsung Galaxy page: http://www.samsung.com/us/mobile/galaxy/

Sony page: https://www.sony.com/

©2017 Curt Larson. All Rights Reserved.