Quantcast
Channel: Teradata Developer Exchange - All blogs
Viewing all articles
Browse latest Browse all 136

Visual Design is an Important Part of the User Experience

$
0
0
Short teaser: 
A user experience without well thought visual design is not a very good experience.
Cover Image: 

As an interaction designer working on Viewpoint, it is my job to take data and turn it into useful software interfaces. Who will use it? What do they need to accomplish? How often do they do it? How will they know when they have accomplished their goal? These are some of the many questions that need to be answered as I start with product requirements and use research to define how software should behave in order to make it as intuitive as possible. There is some subjectivity to the process, but the goal is to use data in order to provide an objective, logical design that meets customer need, not my interpretation of what customers should have.

But, there is another aspect of user experience design that can be a bit murky – visual design. Ask five people what their favorite color is and you can get 5 different answers. Does the layout look right? What is the best font? There are many design aspects that elicit strong opinions. Luckily, there are some design heuristics and principles of visual perception that can be used to reduce subjectivity.

Turning More into Less

For complex software, grouping and labeling data is an important way to focus the user on what matters. Just as a dictionary is indexed so that you can quickly jump to a relevant section of data, software interfaces can be chunked so users can first focus on a small set of groups, and then determine whether it is necessary to look at the details of a group. For example, if you have data for 3 systems on a screen and all of the data visually runs together it can take some time to visually parse all of the information and learn the structure of the data. If the data is visually grouped using easily differentiable headings, you can scan the three headings for the one system you care about before paying attention to the details, quickly decreasing the amount of information you parse by two-thirds.

Hey, Look at Me!

How old is your monitor? How old are you? Designers should always be mindful that not all users will have the same monitor nor the same visual acuity. Creating an interface with overly subtle differentiation in the color of interface elements can be problematic for users who cannot see that level of subtleness on their monitors. For example, using a very light gray on a white background may not have the intended effect for some users.

Even when bolder colors are used, the styles used to differentiate content are important to ensure that users can focus their attention. If headings look very similar to regular content, the headings become less useful as grouping elements. Interactive elements should generally stand out more than static data and should not look overly muted or disabled. Grouping styles should clearly delineate chunks of information.

Lowering the Learning Curve

One of the best ways to reduce the learning curve for software is to be consistent. It takes time to learn how to use software with complexity and frequency of use being important factors. If users can learn general patterns rather than parsing all data, they can once again eliminate some of the noise and spend less time memorizing. What you don't want is for people to have to think about what something should look like on a per-screen basis because it distracts from the task they are trying to achieve.

Headings are a good candidate for consistency because the user can look for the same visual cue to delineate chunks of data. Having a consistent visual cue for interactive/clickable objects is a good way to help users quickly scan a screen to see what tasks can be performed without needing to focus on non-interactive data. Using a consistent, differentiated look for selected items helps users quickly identify the context of what they are looking at and to differentiate between static and interactive data. Placing similar actions in a consistent place helps develop muscle memory so that navigation becomes second nature. Even using consistent capitalization and font styling rules can help users by eliminating differences from the norm that may catch a users attention and cause them to question whether the differences have some meaning or are intentionally placing emphasis.

As a final note on consistency, be sure to use it only when it makes sense. I sometimes see examples where consistency is applied but it actually makes software less usable. For example, consistently showing a set of functions via command buttons on every screen of an application in order to preserve position when some of the functions are not applicable to some of the screens.

Know Thy User

In the end, it is all about understanding content, use cases, and your audience.

If you have a simple, single task interface like Gmail that people use frequently, you can afford to let the visual design of the interface be more subtle and implicit. People will be able to learn how to accomplish their primary goals in a short period of time due to the limited scope of the product and from the application of basic grouping.

When designing for a product like Viewpoint with its high data density and many different interfaces, explicitly focusing a user's attention on the right interface to accomplish a task is key.  Daily users will learn the interfaces and rely upon familiarity and consistency to focus on data rather than navigation. Monthly users will typically not memorize the interface and will need more visual guidance to focus attention and to help them discover the data and functions they need. All users will want to be able to look at the screen and focus on important data and the task at hand rather than spending time deciphering layout and navigation.

Ignore ancestor settings: 
0
Apply supersede status to children: 
0

Viewing all articles
Browse latest Browse all 136

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>