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

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.

 

Maps

Where am I?

Sitemap

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

 

Illustration

This is a Visual Expression of the different “types” of Contracts.

It helps explain the relationships.

See it in context: User Assistance

 

Task Flow

This is a Visual Expression of the interactive process.

It lays out the roles, activity and workflow .

See it in context: Design Specifications

 

Icons

Visual shorthand

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:

Actions

… are visual calls to action (especially for clickable elements)

Open a Webpage

Edit this

Top of page

 

Attributes

… indicate qualities

Task Done

 Rising, Growing

Endorsement

 

Functionality

… describe how something works

Undo function

 

Symbolism

… identify ‘types’ of information

Brand Identity

Document Type

Nation/Region

 

Symbolic Language

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.

symbols-1983

These were a rudimentary ‘first cut’ at accessible symbolic communication for common online behaviors: Store, Glossary, Fast Forward (scan), Purchase, Retrieve, Break, Back, Important, Help, Next (sequential), More (relevant), Delete

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 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?

Here are some of the assumptions underlying my interest in symbolic communication.

Symbolic Shorthand

Early insight on interactive platforms: visual space would be at a premium

  • iconic symbols can be efficient

Symbols might transcend language differences (i.e. they’re “global”, if not universal)

  • Like mathematical symbols, they express a “logical language”
  • easy annotation
  • clarify the complexity and nuance of verbal language

 

 

© The Communication Studio LLC