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

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.

The Twelve Principles of Great UI Design

The sub-title of this series of blog posts addressing UI Design is: “Creating User lnterfaces for Applications That Are Easy to Use, Look Good, and Drive Customer Adoption.”

The twelve principles of UI Design focus a designer’s or developer’s efforts towards these three points:

  1. Easy to Use
  2. Look Good
  3. Satisfy the Customer

That’s what you’re trying to achieve, and if you create UIs that are easy to use, look good and satisfy the customer, you will drive customer adoption. So that fourth point is really to not only satisfy the customer, but to get that customer or potential customer so satisfied that they will buy and use the product–and the word-of-mouth creates a tsunami of growth.

Thus the three points become:

  1. Easy to Use
  2. Look Good
  3. Drive Customer Adoption

That’s WHAT you want to accomplish. HOW to accomplish it, that is the six million dollar question!

And thus we have twelve principles of UI Design that, when followed, result in killer User Interfaces that ARE easy to use, look good, and customers buy it. In volume.

The Twelve Principles

  1. KISS—keep it simple, stupid.
  2. A sense of aesthetics.
  3. White space is good for background!
  4. Use space as a border and separator
  5. Consistent color theme
  6. Color gradations add appeal
  7. Ergonomics: Functionality wins!
  8. Alignment! Alignment! Alignment!
  9. Organize the page into logical groupings
  10. Keep fonts in a similar style or family
  11. Have actions clearly visible to execute
  12. Shade alternate rows or columns with a light hue of the main color.

I’ll cover each of the above points in much more detail in further posts.

 

©2017 Curt Larson. All Rights Reserved.

“Art” and UI Design

No matter what document or specification or standard is used, good UI design, like fashion, has a subjective quality to it. In other words, there is still opinion involved on whether or not someone likes it. It’s like that age-old quote about art: “I may not know what art is, but I know what I like.”

The twelve guidelines remove the subjective aspect of evaluating a UI—or at least reduce it substantially! There IS a technology to UI design, there ARE basic principles that result in better interfaces.

The ultimate arbiter is the customer and how well volumes of customers like and adopt the product. The UI is the first, the foremost, and the primary interaction with the product by the customer and thus has a huge impact on the success of a product. It’s worth getting it right.

Good underlying code impacts the performance of a product and the reliability of a product. Long-term satisfaction is obtained by having bug-free software and good software performance.

Yes, following good coding practices and making code tight and efficient are good engineering principles to follow and certainly help speed subsequent releases. I wholly support–and recommend–good engineering practices that result in logical code that is well laid out, well-documented, that can be upgraded and updated without tearing one’s hair out.

However it’s the UI that drives success. The underlying code can be a rat’s nest but as long as it works and looks good, will the typical customer care?

You can have a great product. The code is tight, well architected, robust, with nary a bug in sight. But if the UI is plain jane, if the user interaction with the software is clunky and it’s hard to use, your success will be limited.

(Yes, some software products have succeeded in spite of themselves. Government regulation, filling a specific market niche, the only product available, killer marketing, there are factors that can drive a product to success in spite of itself. But if they had a great UI…)

With the UI the most important part, how to you design a great UI when there is a subjective quality to “art?”

The fact of the matter is, there are technical factors with art that make it appealing to the viewer. “Good” artists know these things, either instinctively or by training and apply them. While there will always be a subjective quality to what is considered good–cars come in MANY different colors, for example–there are certain principles that apply to great UI design.

There are reasons why people like certain things. With the User Interface, just as there are technical laws behind what constitutes good “art,” there are certain principles that define a great UI. I have identified twelve principles of UI design that, when applied, result in great UIs.

What we’re going for is a UI that looks good, is easy to use and satisfies the customer. Following the twelve principles will result in a good UI. To make a great UI, it takes that artistic touch, that drive to perfection, applying the basics with a touch of flair.

In my next post, I’ll get into the twelve principles. Stay tuned!

 

Classics Rock

I think a true classic endures the test of time. As a car fanatic, certain car designs transcend the era in which the vehicle was built. What looked great fifty years ago still looks great today.

For example, the Duesenberg looks fantastic and I love to look at the lines and curves and swoops of an excellently restored example. The Bugatti Atlantic Coupe and Talbot Lago, similar styling in my mind, take my breath away.

I still think the Jaguar XKE, coupe or convertible, is the sexiest car ever made. The 1963 Chevrolet Corvette split-window coupe remains an icon and I wish I could afford one! The ’57 T-bird still turns heads driving down the street. There are more on my list of personal favorites, such as the Ferrari 250 GTO and the Ford GT40.

Today’s styling is completely different than these classic cars. Yet these great car designs persist over time, turning heads and capturing hearts of new generations. Some cars are so classic, car companies are re-creating them today.

In short, the Classics rock, whether it’s cars, music or great UIs.

While people get nostalgic over the Commodore 64, the Apple II, the Altair, the Tandy, and even Pong, Asteroids and Pac-Man are remembered fondly, if I ask, “What are the classic UIs?” nothing really stands out. People might answer, “Windows 3.1” or “the Macintosh.” Not because the UIs were great, but because these UIs were a quantum leap in functionality.

What makes a car design become a classic can be boiled down to a couple of descriptive words: Elegance, style, flair. Great cars evoke a passion within us and new generations still look at these examples and go, “Wow!”

I believe that great UIs can be created with elegance, style and flair, and these transcend the latest fashions. You might say we don’t need a UI to create passion, but why not? Mac users love their Macs. It’s not just because their MacBook Air weighs 12.7 ounces and practically levitates in the air. They have an interaction with their pc that is generated by the UI.

Whether you’re following the Metro trend, or the Apple trend, or some other “style” (style as in type, or kind), a great UI has an aesthetic quality to it that is pleasing to the eye. Whether the buttons are mono-color or the old “3D” look, an elegant UI is an elegant UI.

Great UIs are well laid out, with the bits and pieces well organized, it’s easy to read, it’s easy to use. They’re not just utilitarian, they have some flair to them, a touch of elegance, a dash of class.

My personal opinion is: don’t worry so much about the latest trend. Instead worry about functionality and elegance, flair and class. AND if you can incorporate the latest trend, then do it! Creating a UI that follows (or leads) the latest trend shouldn’t be the primary design consideration, making a great UI should be #1.

Create the Classics.

Design Tastes, Fads, “Fashion” and UI Design

True design guidelines apply regardless of the latest trend, fashion or fad. As time goes by, what is considered a “good UI” changes, just like fashion. For example, the Aero look was “the next big thing” when Windows Vista was released, and this dictated UI design for several years. Apple upped the ante with the iPad and this look influenced design for a number of years. Windows then came out with Windows 8, and evidently everything associated with Vista was bad, because they completely abandoned the Aero look in favor of Metro. The Metro look is currently in vogue and the next big “fashion trend” will change how UIs look and feel yet again.

As new products hit the market, the market itself changes and, like fashion, what is considered good UI design can be a moving target. A good UI designer will take the current fashion style and use his or her tools to create a great UI that is pleasing to the customer and meets the customer’s idea of what is good. When UI design is well executed, you will find that the principles of UI design have been implemented, either knowingly or subconsciously by the designer. (I like to think of it as intuitive design, intuitively knowing and following the principles.)

The aesthetics of a design takes into account what the customer currently considers or will consider is a “good UI” based on the current fashion trends, while adhering to the principles.

The twelve principles of UI design apply regardless of fashion. Two points, using white space or applying fades, may change with UI fashion and these points may need to be updated, however the underlying theory applies. All twelve principles have been proven over time as key fundamentals that when implemented, result in killer UIs.

Design according to the latest fashion, whether Aero, Metro, Apple, etc., while following the twelve principles. You can’t help but have a great UI.

©2017 Curt Larson. All Rights Reserved.

Designing Great UIs

A developer recently asked for UI design guidelines. While I’ve worked to a set of design principles evolved over years of developing products, I didn’t have a “Go To” manual of the key design principles to show others.

A Google search followed. After all, there are certain principles that great UIs embody and UI designers I’ve worked with have followed these same principles. Surely someone wrote a book on the “Laws of UI Design” that I could refer to. I found volumes of information. Literally, volumes. One document was 384 pages, another 760, still another over 500 pages. With such lengthy standards on UI design, they miss the first and most important point: make UI designs simple. If it takes 500 pages to define simple, they’ve missed the boat.

Detailed standards serve large corporations well and serve an important purpose, ensuring that everything produced in the company meets a standard. At the same time, the very essence of good UI design is lost in the immense detail. While it’s good to sweat the details to achieve perfection, defining the details loses sight of the over-arching goal: to satisfy customers so they buy and use software, and the very principles one must follow to achieve that.

In the volumes and volumes of information, I found a couple of documents on UI design that covered important data. While several important points are covered, they did not include key elements that I’ve learned and applied over the years. To remedy that, I wrote a Guide that pulls together twelve fundamentals and defines the essence of what makes a UI great. This blog will cover each chapter of the Guide. And since I can’t stop once I get going on a topic, I’ll probably add more detail–resulting in updating the guide to version 2.

The principles of good UI design apply to web pages, web apps as well as installed programs. There are differences in execution, as web apps and installed programs are designed to be used, while web pages (not including on-line shops) are designed to interest as a Marketing tool, to sell as a pre-Sales tool, or assist as a post-Sales or Support tool. This difference in function dictates differences in content as well as look and feel, however the twelve key points still apply.

Here’s to your next great UI.