Thursday, August 28, 2014

Function Follows Form / Form Follows Function

When it comes to buzz words and phrases in the UX forum, one term comes to mind. Or, rather two phrases come to mind "Form follows function" and the other is "Function follows form". In this article, I will hopefully help shed some light on these two terms and how they apply to what we do in User Experience.

Form Follows Function
"Form follows function" is a principle that has followed architectural design around for some time. Another name you may know this by is "Functionalism". The principle means that what is created is created based on it's intended function rather than based on the intended look. 

Designs born of this concept are likely to be characterized by being minimally decorated, straight angles, flat surfaces, bland color schemes, low movement, and simple. Some might consider these sorts of designs boring.

Here's an example of a building design from the 1930's where the function of the design was much more important than the aesthetics of the building.

And here's a modern day example of a program that has put design in the backseat while function drives...

Really the biggest thing to notice is the purpose of these two examples. They are both focused on getting stuff done. Getting the job accomplished. Completion or fulfillment.

The problem
They may allow the job to get done, or provide a solution to the equation, but do the users of such products want to use the products? If the user's are not invested in usage, there is a likelihood that they will shortly become discontent and seek out a product that is more appealing. Maybe they will look over the fence to see if the grass is greener over there. Maybe they will look for an equivalent that is simply more pretty, or attractive. Just because a design allows the capability to complete a task, does not necessarily mean that the user will find satisfaction in using it.

Function Follows Form
This phrase is a bit newer term that is generally used to downplay the old "Form Follows Function" term. It's basically saying that the design should come first, then depending on the design, we'll figure out what we can do with it. Yikes!!!

I don't think that I've seen this second term employed in that exact context. More often though we can see that an item may be super artistic, almost so much in fact that the design outweighs the purpose or function of the product. 

Here's an example where the design is so overpowering it's difficult to determine what it is that we are looking at. What is it?! I don't know, but I want it because it's so FETCH!!!

And here's a website example. Again, the design is simply overpowering the purpose and action that the website is trying to present. While I'm watching as this website loads various fancy visual effects (which I'm very pleased to be experiencing), I'm finally left on this page. Where do I start? What do I do?

I've personally known folks that will muddle with a product that looks good for a long time even though it may not be functional. It's clear that the problem with this is that looks can only take us so far. At the end of this sort of day, the user's time has been wasted, and they must inevitably seek out a more usable, more capable solution to their goal.

It is clear that form following function, and function following form are not principles that should be adhered to completely or to any great extent. They both can lead to a product that will simply leave us wanting. 

When you are designing your product combine these two principles into one. Remember that without purpose, the product is just a distraction. Without beauty, a product is boring or uninviting. Ideally we should strive to create beautiful, usable products.

Usability is the measure of how well a design meets the needs and expectations of a user without causing them hindrance or hesitation. They are likely going to expect a product to look good AND to meet their needs.


Monday, August 4, 2014

Tooltips Best Practices

This article presents some considerations that should be observed when using Tooltips in your design.

Some people may argue that there shouldn't be a need for tooltips. But, let's be honest... There are times where we need to use the tooltip. So then, if we absolutely must use this little guy, then what are some things that we should consider when implementing it into our designs?

1. Open via click, not hover
Sometimes you see a design that has the tooltip automatically open upon mouse hover. The problem with this is that it doesn't port over well to the other channels in a full cross channel experience. Try hovering your finger on an iPad, or PS3 Sony browser. Not much will happen. It's always a best practice to let the user drive the engagement with an interactive element. If the interaction occurs without the user's explicit input, they will likely be shocked or surprised. Additionally, this can be frustrating. Especially if they are trying to get something done.

2. Limit usage
Just like with any screen element, too many of these little "helpful" info tips can result in them NOT being helpful. Consider this... Every data element on screen competes for the user's attention with every other data element on the screen. What this means is that the more of these little info tips you present to the user, then less impact the screen's overall visual or architectural prioritization will have an effect on driving the user to the main call or process flow. Plus, who likes clutter anyway?!

3. Use standard icons
Here are some tooltip icons that have been used. Some of them are more common. If you glance through, you will likely see one or two that you recognize.

Just to clarify a bit. Most common would be an "i" in a circle which stands for "information", or a question mark ("?") in a circle indicating that there is additional help information available.

The rule of thumb here is that it's best to use what is most common in order to ensure that user expectations are being met. When you deviate from the standard, it must be to improve on the standard, without kicking the metaphorical chair of existing know-how out from underneath the user.

4. Tooltips should be deprioritized
As tempted as you are to make the tooltip the main call to action, it's important to us that someone smacks you with a corn-dog. The very purpose of the tooltip is to get excess on-screen help out of the visible and placed into a tiny little hiding compartment so that when users get into a bind, they have a place to go to get the info they need. Tooltips should be used to simplify the screen so that the main call to action can be louder and prouder!

5. Tooltip should be fully visible when opened
One of the beautiful things about a tooltip is that it can help save space anywhere on screen. This means that there is a high probability that the tooltip will appear in obscure areas on various designs. When you are putting tooltips together, remember that when a user clicks the tooltip, they will likely expect the tooltip to appear in their visible window no matter where the scroll bar is set. A modal popup that centers the tooltip is probably the most elegant, versatile implementation that I've seen. The point here is that if a user clicks the tooltip and it pops up, but only half of the tooltip is visible, then you've positioned it incorrectly.

6. Keep your info-tips short and sweet
When a user clicks the info tip, chances are they are not expecting a book to popup on screen. If that level of information is needed in order to help them 1) there is a good chance, you need someone to proofread the work, 2) the process is too complex, 3) It may be information that is going to best serve the user if it had it's own section on the site.

Keep the tooltip short, and concisely written to support quick skimming and scanning. User's will thank you if you can provide them what they need, in a tiny package.

Hope the list helps you. There may be more, but for now, this is all we have for this very simple, very useful design element.

Whitespace should be strategic

This article is a reminder of the importance of strategically incorporating whitespace into our design decisions.

In some cases, we see designs consisting of too much or not enough empty space. Insufficient or inappropriate whitespace can lead to…

•  Difficulty in skimming and scanning information
•  Difficulty in differentiating section groupings
•  Difficulty in determining main calls to action
•  Lowered perception of the design of the website
•  Anxiety, confusion, frustration, disorientation, and possibly anger

One scientific principle that we tend to follow is known as the Gestalt principle of proximity which says that things that are close to one another are perceived to be more related than things that are spaced further apart. When users see all the content as one long run-on, it is difficult for them to differentiate the related information. 

This proximity problem can be visually dominating over other screen prioritization techniques (for example: font-weight, color, and/or size).

Consider strategically incorporating whitespacing as part of the design decision making process. It is best to make this decision rather than allowing the design to make the decision for you.