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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s