Adding Information To Icons, Folders
The current system of icons indicating creating program is barely data, let alone information. The metaphor of window implies a certain transparency. An insight into something beyond the window object itself. Both folders and icons are opaque, informatively speaking they don’t fit. You can tell which program created an icon, creation date and file size, which is just barely useful for information age workers.
ICON: 1,024 pixels doing the work of five letters.
— Guy Kawasaki, The Computer Curmudgeon (Hayden Books, 1992)Guy Kawasaki seems to have the right idea, calling an icon “1,024 pixels doing the work of five letters.” So instead of making them the toy you and I both know they are, how about an Icon Utility roughly like this:
Let’s say you are doing a newscast. The time for the one hour news cast is something like 42 minutes, one hour less commercials. There are going to be 6 stories of 7 minutes each in a dynamically changing folder called News At 11 -- 8/19/2002 Then, there’s a breaking story. You have to rejigger the cast for 7 stories of 6 minutes each. Each story has to have 100 words shaved off to make the new time configuration.
Basically you could have a folder with certain attributes, in this case a timeline of 42 minutes. Story objects made up of text files coming in from 2 in studio anchors and via Internet from 3 beat reporters, blue screen objects and/or video clips need to be grouped together. At the same time, the dimension of time and object order along the time line must be *easily visualized*. In other words, it is not enough to have a folder as dumb container with icons haphazardly strewn about.
The stories must be about 700 words each. And so the system can know or be told fairly easily that text files of 350 words or so are about 50% complete. Furthermore, there may need to be an editor to clear each story before it gets read for broadcast. So the icons can indicate this at-a-glance by changing their background color from red to transparent. Video objects from field reporters run instead of text, so for every minute of video, the text has to run 100 words less. Furthermore stories and video have to somehow go together and indicate, for instance where it falls in the overall sequence of the 42 minute time line. So a 90 second video linked to a 700 word text object would cause both to turn red. This red state would continue until the requirements imposed by the folder object higher up in the hierarchy are met. Also, the arrangement within the area of the folder represents the order in which the segments will run on the air. And grabbing the segment handle would allow you to move everything in the segment, reordering the segments while reducing the risks of mixing up their various elements.
Now, you don’t just have a dumb box with dumb elements, you have a dynamic system based on (visually) simple rules. So when the new element drops into the folder, this shoots the 42 minute limit and so turns everything linked to it red. The parent folder, the other objects in the folder. Again, this will remain until both the conditions of time, and the editor okay for each segment’s new edit are met.
This example is applicable to a lot of different situations, including seminar speaking and presentations. The more important reasoning behind this example is:
1) The example represents a chaotic and rapidly changing environment. Supposedly just what the leading books on the fabled new economy say is taking place more and more in every workplace.
2) It takes into account various types of objects from multiple source applications, their representations, and adds an element of context currently lacking in today’s task–centric scheme.
3) It acknowledges the context of use. Normally a scheduling program would force the user to adapt to internal ‘integrated’ toolsets, instead of integrating itself with tools the user may already be using
4) It illustrates the concept that objects used for organization can and should be aware of what is going on up and down the hierarchy between parent and child object, as well as within user constraints.
5) Folders could have other dimensions: location, time, process steps, information relationships obscured by interfaces built around how the computer organizes files, views of icon elements not seen in other folders, and even more advanced concepts.
The Recycle Bin in Windows or Mac Garbage Can (parent object) is a kind of folder which changes its image, or reflects the underlying state of what is inside it (child object) without you having to look inside, or it would work that way with an informative, rather than binary, implementation. (context: empty, filling, full, and needs user attention). Now if we can extend this idea to the rest of the desktop, there may be some hope for creating the modern information workspace.
Web Icons: UI Design Versus Interface Decoration
Most web design falls under the category of interface decoration, not user interface design. Gone are the lessons of desktop interaction design about the difference between menu commands and toolbars.
CSSplay has a pie menu layout suitable for the action items users expect from web UI design using icons. While pie menus are good UI design, this example has an innovative use of submenu items which make sense. Menu designs are especially egregious, often no more than a junk drawer for hiding the work that wasn’t done simplifying the web site in ways users appreciate.
Here, hovering over the shopping cart reveals actions for Add, View and Remove from cart in true toolbar fashion. With some minor changes, such menus could support the desirability design goal of supporting shopping behavior, where most web design only supports the trasaction at the end.
Resources
- The New File Interaction Proposal introduced in the KDE desktop is a hopeful sign for interaction design on the desktop.
- Scrolling pie menus and Quicksilver show a radial configuration for apps and icons recommended for usability.
- Smart Folders in OS X could be the most useful idea most Mac users never heard of. “Smart Folders contain documents grouped together based on search criteria that you define instead of their physical location. Computer file systems are rigid: a file can only be in one folder inside a hierarchy of other folders on your disk. Smart Folders fundamentally change the way you organize your stuff because now a file can literally be in two folders (or many) at once without duplicating or moving the underlying file.”
- The Best Cellars site makes good use of icons for their original attribute map of wine. Tilted more toward perceptions of casual shoppers than wine experts, an interesting take on faceted categorization.
- The Graphical Passwords project proposes graphic passwords (you can see an example here). Icon and image passwords have better user recall.
- Exploring The Craft Of Icon Design and Diffusion Of Web Icons are good background for interaction designers of all types.
- On the web Thermal Mapping of Weblogs takes the fairly opaque blog calendar archive and gives a graphical indication of hot days (scent in information design parlance). The alternative is to click through each day and hope to hit a topic of interest which has an active thread of comments.
- CSSplay A circular menu with sub menus is less about being creative for its own sake and more about sound user interface design. Menu Design: Theory and Practice — PIE Menus explains the interaction design principle behind the concept.
Here’s a proposal to ponder and evolve: Let’s do something interesting with the interrobang. A combination of exclamation and question, this experiment in punctuation was introduced in 1962 by Martin Speckter to express “… Modern Life’s Incredibility.” And what better match than for today’s interaction design, and the user experience of interacting with technology mediated life. Although it manages to surface in esoteric discussion now and again, here’s hoping users and designers find the interrobang a place in interface and web graphics.