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.

 

Advertisements

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.

2. The Importance of Aesthetics

Much can be written about aesthetics and defining what constitutes an aesthetic look and feel. The condensed version is this: aesthetics are pleasing to the eye and elicit a warm reaction. Aesthetics are critical to customer acceptance.

Most people cannot describe or define what makes a UI look good. However people do respond well to aesthetic layouts, and react with difficulty, confusion, a slight frown, or other lesser reactions when the aesthetics are off-kilter.

As a comparison, people often object to loud music. Closer studies show that the distortion present in poor quality sound systems contributes to the objection and when the sound quality is clear a higher volume can be tolerated (for music not to the taste of the listener) or enjoyed (for music the listener actually likes!) .

In the same vein, the visual aesthetics of an app or webpage contribute to the user experience and their positive reaction to what they’re working on. UIs that have good aesthetic qualities elicit positive customer reactions and greatly contribute to the success of the product.

There are three parts to aesthetics that must be considered and they work in concert with each other:

  1. Balance
  2. Harmony
  3. Color

Balance

Balance is how well items are arranged on the page. Top to bottom, left to right, there’s an evenness and a logical order to how the page is laid out. Don’t overload content on one side of the page with very little on the other.

If you’re showing images with text to one side, be consistent: all text on the left and all images on the right (or vice versa), or switch text-left/image-right with image-left/text-right and follow that pattern.

Don’t cram content together. Don’t overload any section with vibrant color or a “heavy” image while other sections have lighter images.

The exception to this is when you’re deliberately focusing attention with a vibrant color, font or image. When you’re purposefully focusing attention, following the relevant UI Design points contributes to a positive customer reaction.

Harmony

Harmony is how well everything works together. While color impacts harmony, we’re really addressing how well the elements work together. Elements are similar in size, shape and appearance.

Elements can also be complementary in size, shape and appearance. For example, there can be a banner image that spans the width of the page. Then the page itself is in two columns below that, with images contained within each column the same size.

Don’t mix and match sizes of graphics. If graphics are different sizes, have them be the same ratio of bigger or smaller, such as 100%, 75%, 125%. Or 100%, 67%, 33%. The eye notices these ratios. DON’T have a second image at 75% the size of the first, then a third image 112% the size of the first. This is subconsciously jarring to the viewer.

Whether they are similar or complementary, the elements work together in a consistent, orderly and pleasing fashion.

Icons are similar. Text boxes or data entry fields are the same height and length, or in a couple of lengths. Proportions match. Artistic design is consistent throughout the page—rich, vibrant images are not interspersed with water color-type images (unless you’re showcasing an art gallery). There’s no jarring impact from elements on the page. Rather, all the elements work together, they’re in harmony.

Color

Color is so important that it’s discussed separately in more detail. The overall sense of color and interplay of color conveys an aesthetic. The use of color works in conjunction with a balanced page and a harmony of elements on the page to create an aesthetic.

You have to work all three elements together: balance, harmony and color, to achieve a great aesthetic.

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

1. KISS–Keep it Simple, Stupid

The simpler the UI, the better. Put the main stuff on the first page, move the lesser-used stuff to other pages. Make the pages straightforward and easy to read.

The layout itself needs to be simple. Organization of the page is important. Group related content together with a logical flow from left to right, top to bottom. When looking at a website or an app, our eyes go towards the center upper first, then upper left, followed by moving to the right and scanning down, unless there are compelling images or attention-grabbing elements on the page. Perhaps it’s our years of reading, left to right, top to bottom, and those habits continue when looking at software UIs.

Make use of that natural tendency when you arrange content on the page.

Don’t overload the page with content—too busy is daunting and causes the viewer to withdraw. Always strive to make the page look simpler, cleaner, easier to understand.

“Make everything as simple as possible, but not simpler.” –Albert Einstein

And just like the title says, this post is simple. Make your UIs simple.

©2017 Curt Larson. All Rights Reserved.