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.

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?

http://en.wikipedia.org/wiki/Blissymbols

http://www.blissymbolics.org/

 

 

© The Communication Studio LLC

Advertisements