Graphic Design Language Consistency

While I have often said that a lot of UI changes are simply eye candy, and add nothing important other than “bling” to a design, not all UI changes fall into that category. However, looking back, I noticed my posts have beat around this huge unaddressed important distinction of UI design that pretty much no company and very few active designers today seems to completely understand, judging from the latest and “greatest” products that are just as confusing for experienced users as they are for newbies.

While, we all seem to inherently understand some form of graphic design language, few aside from UI designers are conscious of it. And even fewer of the professionals understand this graphic design language has rules and conventions based on solid interaction principles. They seem to take for granted, that this control is a certain way without question, and either they use it improperly or worse, they break the convention. Both of these problems are caused because the UI designer does not know the reason behind the convention. I am sure many UI designers will rebuff me — and know the reasons behind certain choices, but not all. The problem is, if the designer has read literature or learned UI from someone else that omitted the explanations and reasoning behind the conventions, they only have half an education.

When people are new to computers often have a difficult time adapting to new environments, this is because they do not know the conventions either. However, to those of us that have been using GUIs for about 3 decades, things are so ingrained they are transparent, and we might not realize how they came about. This leads to familiarity bias when it comes to explaining things to newer users. New users are often taught from the perspective someone that has subconsciously internalized this understanding of the graphic design language. This is kind of like teaching 5-year olds math starting with algebra, or 2 year-olds to write without teaching them the alphabet first.

However, for advanced users, when we see things that do not make sense, it is because the designer probably didn’t know the rules he or she was breaking, nor how to break them without degrading usability. Our bias is based upon long time understanding of decades graphic conventions used. The lack of this ingrained experience and knowledge leads to products that not only perform worse than older products, but are also incomprehensible to new users, and thus destined for the trash bin. As a designer, when inconsistent design cues jumps out at me, I wonder why the designer was that did this or that, and immediately realize that they came from the art scroll of design (with an emphasis on aesthetics), not the functional school of design (with an emphasis on clarity).

While this distinction might not seem important to many, popular design conventions form a design language that people use to learn new software and find efficient use techniques embedded in the visual cues. In fact some design innovation that have become standard were because the person did not know the “rules” and had a beneficial outcome of creating a better way. However, more often than not this lack of understanding leads to UIs that are worse than a very simple and basic one that does not violate any conventions. Not knowing the proper conventions is like not knowing the proper syntax to construct a sentence. This idea also extends to word choice and even things as basic as punctuation and color.

While certain styles and colors are not world-wide conventions, in Western countries, the designers of sites and software for them should understand what certain colors imply, indicate and what certain symbols (whether they be textual, punctuation, or shape based).

Color is an often ignored element and in some schools of thought. Designers are taught they need to be able to make a design stand on its own in black and white. I tend to agree for the most part, but I extend the idea to use color as another information channel. Time sensitive and important warnings can be embellished (tagged) with yellows oranges and reds, while medical can be tagged with light blue, and financial data can be tagged with green — at least in the Western world.

Fonts style is often used to indicate the professionalism, fashion sense and lifestyle view. All of these are fine uses. However, it is apparent that the clean look of san serif fonts is superseding readability studies that serif fonts are easier to track on a line. (Even I am guilty of breaking that rule because sometimes the look of the font conveys so much of the tone that, as long as it is readable, and the copy is not too long, it works.)

While, generally, non-symmetrical shapes suggest energy and unconventional approaches, squares and rectangles suggest stability and circles suggest wholeness; specific shapes and locations of elements suggest specific functions. A rectangle with a rounded top suggests a tab one can click, and an underlined word suggests a link one can click. A rounded rectangle with a dark background and lighter text suggests a button. More advanced symbols include a sideways triangle suggests a drop down widget, that when clicking rotates to point down and reveal more content.

However, when these conventions are mixed up in a page they cause undo confusion among new and old users alike. A rounded top suggesting a clickable folder tab on a table header row will make people mis-click it, especially when mixed with actual clickable tabs.

What these confusing design cues do is muddy the look of the page from obvious row of tabs to implicit tabs everywhere. Sure, people will learn or know to filter this inconsistency, but it will add a second or two of confusion to any reasonable person. And when taking a user-centric approach to design, we have to eliminate any source of confusion — even if this confusion is only temporary. Why? Confusion adds stress, decreases efficiency, and decreases enjoyment of a product — be it a web site or program or physical product. Overall this impacts negatively of the perceived professionalism, enjoyment and reputation of the site.

Fixing this can take a lot or very little time. I gave one community site 3 options to fix this tabs in table header row, in order of what would take the most time to the least time. In my opinion time will be spent on one end (the design phase) or the other (the use phase). So, the less time taken in producing something means the extra time end users have to use to adjust to a product which only increases with more users. So, either you “pay” for it in the front end or the back end. User-centric design is about eliminating as much time taken by each and every user within reason. So, if it takes you 5 years to design something that decreases user time by 1 second, then it will take over 31 million uses to recoup that time. However, if it takes you 8 hours to make something that saves 5 minutes per use, it will take only 96 uses to get a return on everyone’s time. Some people might not care, but I always try to think of the greater good: a design done properly influences future designers, and is reflected in their work. Good design propagates and your minor innovation slowly becomes a standard convention. Standard conventions are used because they do the job well and help people transfer knowledge of one app’s symbol set to other applications. This is why, by default (except for the modifier key), quit, print, cut, copy and paste are the same keys between all OSes: quit=command/control-q, print=command/control-p, cut = command/control-x, copy= command/control-c, paste=command/control-v.

So, the moral of this story is: if you know the reason for a convention, then you are free to judge if it should be broken for the sake of usability. If you do not know, then either look it up or follow it and do not break convention: your stylistic choice that you think is cool will only hinder an App’s usefulness and as a result, its success.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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