The graphical “design-y” aspects of User Interface and Interaction Design are a big, big part of the user experience. Without organization, they are merely decoration.
There’s a lot of overlap among the different visual techniques offered here. These are just some high-level observations. You could write a book…
In early days of IA/UxP (before we had the fancy titles), we were often referred to as “Souped-up Graphics Artists“.
Identity, Maps & Icons
Visual technique has always been an important UI skill in a screen-dominated environment. These visual shortcuts & cues are particularly critical now, with the ubiquity of small-screen handheld devices and a desire for speed, speed, speed.
identity : Branding as Information
The Electronic Sales Assistant needed an identity. I felt that these simple geometic shapes offered a distinctive “look” that was unique, dynamic and subtle.
CityTime is a “time management” tool for city services agencies. The idea here was to present a cityScape. The colors of the sky, silhouette and logo might change gradually over the course of a day in order to to indicate the passage of time.
The “You-Eye Guy” was probably the first ever unique brand identity that I designed, circa 1971. Like, wow. Over the years I used the TCS Eyeball to brand several ventures. It remains my business identity to this day.
Where am I?
This is a Visual Expression of how the service is logically organized.
It usually presents the structure of the site as a logical hierarchy.
See it in context: Sitemap
This is a Visual Expression of the different “types” of Contracts.
It helps explain the relationships.
See it in context: User Assistance
This is a Visual Expression of the interactive process.
It lays out the roles, activity and workflow .
See it in context: Design Specifications
I also design custom icons for use within the interactive environment.
If the UI can be self-explanatory or indicative – without clutter – it’s a good thing. People learn it pretty quickly. The classic underline-indication-that-This-Is-Clickable is a good example. In fact, it’s so much of a “given” that you don’t find the underline as a purely decorative style in most interactive interfaces.
The ability to include a lot of different “sideways” & referential path links in a page is a mixed blessing – esp. since – in a complex info environment – you might be opening up new browser windows or in-page popups.
I like to use icons embedded in CSS styling to indicate “out-of-the-mainWindow” links. For example:
- a globe icon indicates that we’re opening an outside-of-this-site WWW page in a new browser window
- a document icon or PDF icon opens a reference document in a new browser window
- a question mark icon opens an FAQ or Help popup
Each of these usually has visible text in the label, as well as a mouseover tooltip explanation that helps prep you for what’s coming.
Here are a few examples:
… are visual calls to action (especially for clickable elements)
Open a Webpage
Top of page
… indicate qualities
… describe how something works
… identify ‘types’ of information
Iconic language isn’t necessarily infallible, but it can compete with representational symbols – often without all the historical/cultural overhead.
Early on in my interactive career (1983) I proposed a set of iconic shortcuts. The purpose was to overcome the confusion of multiple terms for the same functions in a non-standardized marketplace.
The backstory on the lack of accepted conventions …
Pointing the Way
Arrows – like most icons, words, and other communication – generally have a more subtle meaning based on their CONTEXT: An observation which should resonate with most UX-ers.
An arrow without context? Sure, that might be misconstrued somehow, tho it often “works”. And there always is *some* context for its usage (placement on page, placement relative to content, etc). The up/down arrows on the right sidebar of my browser – and this editing field – work pretty well.
When combined with another symbol, the communication becomes even richer:
An arrow down into a container? … Save/Store
An arrow up from a container? …. Retrieve
By way of clarification about compound icons:
An arrow DOWN INTO a container? … Save/Store locally
An arrow UP FROM a container? …. Retrieve from local storage
An arrow DOWN FROM a container (a Cloud, for instance)? …. Retrieve from networked storage
An arrow UP INTO a container (a Cloud, for instance)? …. Save to networked storage
Currently we use “up” and “down” to describe our relationship with network/local, so these arrow directions may resonate. Differentiating the Box container from the Cloud kind of reinforces that relationship. Is this a Forever Perception? Perhaps not. But it sort-of addresses the issue of “that which is public storage” vs “that which is private storage”. But that’s another thread…
Net neutrality, anyone?
© The Communication Studio LLC