What's Between Your Faces?

January 10, 2000
by Alan Levine

In this column I will try to write about something in which I have no formal training nor academic expertise. But that has never stopped me before. Phil Thompson emailed me from Scotland suggesting that I write about interface design. Phil said he had the code skills, but in building graphical interfaces, he was weary of the gleaming metallic control panel knock-offs. What else is out there?

Well, Phil, here's my spin... I have no clearly formulated idea. Let's break out the word analyzer.

"Interface"... "between faces"? An old dictionary definition pins it as a "surface regarded as a common boundary" (that's the face part) between two bodies or spaces (and there is the "inter" for you word origin fans).

In our favorite topic of interest, our raison d'etrêtre, multimedia, we are largely talking about the two dimensional surface (computer screen) that connections the lucky person using your Director-created masterpiece with the logic you have placed inside of that file-- maybe all Lingo, maybe pure score based animation with a few canned behaviors, or maybe the grail-like one frame movie with no sprites all driven by OOP code (I have seen an app done this way- the score was completely blank!). For some people a interface is just the look of screen layout, but I think it should also include the logical connections within your application, the brains behind the face as well.

Alan's First Law of Interface Design is: Alan can most easily design interfaces that are Alan-centric, that is, completely intuitive to me. Everybody else in the user-universe is on their own-- the degree of intuitiveness falls off beyond the Zone of Alan-ness, quite often dramatically. Likewise, my good friend Zac is excellent at creating Zac-centric designs, some of which may completely baffle me (Editor's note: some of Zac's interface ideas confuse him as well) .

I'm not just playing a word game here or being cute; the truth is that as the closest person to a project or a design, your perception gets distorted by familiarity that others may never achieve... those "others" being the people who actually use your product. It is easy to lose track of this when you are ear-deep in buggy code, mis-matched graphics, scratchy audio, and choppy video, but it may help to put a small post-it reminder on the side of your computer monitor that reads:

"I am trying to build something for someone else to use."

How well this happens has a lot to do with the meeting of "surfaces"- one you may not well know (the kind of person using your work, their skills, expectations, patience), and the other face you know all too well, the code you spent 500 hours building for which you will be lucky if you can bill 80.

Icons and Pitfalls

I first cut my multimedia teeth with HyperCard (not counting some kludges I did in FORTRAN). I loved HyperCard because it was the true version of a computer erector set-- you could just piece together parts for no real reason or you could build a fully functional machine, limited only by your imagination (or how many pieces of metal you got in your box).

Once proficient in this tool and after looking at lots of other stacks, I started sensing that despite its many graphic tools (or because of things like the icon editor), every HyperCard designer had their own take on icons and their meaning, which meant that every HyperCard stack was another piece of software to learn how to use, a hundred thousand different interface designs. I clicked at a bunch of icons that I had no idea what were meant to do (was this an alpha version of the web of the 90s?).

Alan's Second Law of Interface Design is: not everyone will get it. In fact quite a few won't. Ever.

Think about it this way. Pick any movie and you can find people that love it and others that find it garbage or dull or "obtuse" (well any movie except 'Mod Squad', the agreement is clear there, pure stinker). Or take ethnic food, books, CDs, cars, living room furniture, etc. Across the spectrum of people you find a spectrum of likes, dislikes.

Yet, we have this illusion that on something as visually limited as a computer screen (the density of information even on the Apple Cinema Screens pales to a printed page or photograph) we can design an interface that will be intuitive to almost anyone? It's almost ludicrous. No, it is. You are fortunate if it is intuitive to a few people.

At best, what you do when you select an interface design is to shoot for a reasonable range of people for whom it will make sense (hopefully, those are the ones that will be laying out actual moolah, dinero, for your efforts). Hopefully what you shoot for is done with more thought than a "pin the tail on the interface" choice or some knockoff of a popular computer game.

Consider the impact of the web. Besides the pervasiveness of poor web design, think of the positive effect that people are now very accustomed to clicking hypertext, or looking for clickable objects. Some of course will overdo it, but the web has, to some degree, raised the level of computer sophistication across the board and brought a much more diverse group of computer users into the tent.

The level of computer sophistication of the people using your creations (I do hate the word "user", a rather cold, generic icon image of what it represents, a person) is a moving target. I finished a Director 5 CD ROM in 1997, a grammar program designed for ESL (English as a Second Language) students-- a target audience our teachers said was not computer savvy. Therefore, we made a full-screen projector for an audience that might not be comfortable with applications in a window. But we did run into some problems when a student needed to print-- if the printer was not already selected or was offline (you cannot get to your print chooser control panel), students had only the option to quit, and try to return, and would have to redo all of that work!

This was the tradeoff we made to keep the interface simpler. However, after two and half years of use, our teachers now report the same student body has grown much more aware and thus our next version would run the app in a window instead. They tell us their average students, who are not your Quake-nauts or click-happy web surfers, but working class adults, have no problem switching between applications.

So if your project has a shelf life longer than initially planned (gasp!) your initial target audience may have moved on you.

Enough Blabbing, What About the $*#^ / at / &! Interfaces?

So where do you start? Look around at real objects that have interfaces. Pick up a copy of any of Donald Norman's books, especially "Design of Everyday Things". It is an elegant treatment of the subject, and readable by ordinary humans, with examples of mundane objects like doors, switches, knobs, car radios, etc. What is the connection to computers? The best interface for ordinary objects are the ones you barely notice!

One of my favorite parts is Norman's emphasis on "natural mappings" of interfaces to their function:

If a design depends upon labels, it may be faulty. Labels are important and often necessary, but the appropriate use of natural mappings can minimize the need for them. Whenever labels seem necessary, consider another design.

Impressed by an interface? Then it may not be doing its job; it should fade into the background. The WOW! factor may be high on the first view, but how about the tenth? the hundredth? Good interfaces are often ones barely noticed, because their function is so clear.

Legendary designer Bruce Tognazzini spells it clearly from his Ask Tog site:

Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time. Effective applications and services perform a maximum of work, while requiring a minimum of information from users.

The web has pretty much conditioned us to click on blue underlined text, or anything where the cursor changes to a hand. But yikes! Lots of sites have hypertext that you cannot readily differentiate from the un-hypertext. And what about some of these Gee-Whiz Flash sites where you cannot tell the purpose of one throbbing blob in a row of four similar blobs until you click them. Silly goose.

I found "Usability" guru Jakob Nielsen's book Usability Engineering , a "textbook on the methods needed to make interfaces easier to use" was so generalized to be, well, not usable. However, his Alertbox web columns are very much to the point. From November 14, 1999, "When Bad Design Elements Become the Standard":

Web design is easy: If you are thinking about how to design a certain page element, all you have to do is to look at the twenty most-visited sites on the Internet and see how they do it.

which shows why so many sites ended up looking like c|net on speed, why there are about a million clones of Yahoo, and the preponderance of ridiculous front page teaser site openers.

And finally for a joyful book experience, grab any of the titles by Edward Tufte, such as "Visual Explanations", which goes deeper and further about ideas on intelligent graphic and information design than any other source.

Wasted Clicks

There are tons of interfaces we could look at. Let's start with Director's itself. Do you know your away around the menus, dialog boxes, and gobs of windows because it is intuitive or just by repetition? Here's one thing that drives me nuts. Director's 8 sets of preferences are accessed from a menu off of the File menu. But once you set one preference and dismiss the dialog box, you have to start completely over again from the menu (okay, you could do command-U, a cheap alternative). Meanwhile, PhotoShop's preference dialog box allows you to cycle through all of the settings from a single dialog box.

This has been mentioned in a few previous Director beta cycles, but some standard mumbling macro-reply is something about the underpinning architecture, the phase of Jupiter, and other byte code hex encoded comments. Blechhhh. Now I may sound petty, but it is just an example where the human factors are considered of less importance than the limitations of whatever environment is used to build Director.

Did you know that just like every woman is born with a finite number of eggs, each human can only have so many mouse clicks in their life until their hands curl up in hideous, rigor mortis pain! Every dead web link, every misleading dialog box, every vague menu, just takes you closer to this sad destiny.

I made that up. Stop writing that taunting reply.

But I am firmly against wasted mouse clicks. The only good thing about wasted mouse clicks is that they are a dead sign that something is wrong with an interface. Think about it the next time you are wading through the menus and dialog boxes of MS Word.

Sigh, Flash, Yawn

I am impressed with Flash as a technology. It performs magic in streaming rich media with a minimal footprint. When you look at a Flash site, you do not stare at some Macromedia logo for 10 minutes waiting, waiting, waiting... You see content almost instantly.

And I do not have to say much about the authoring environment, because most of us know it is either a cruel joke or a sheer horror show. I was all thumbs with Flash 4. It was a cursefest. If you are familiar with Director, you will feel as though you've slipped into some Rod Serling hosted mirror universe, where most things and people look familiar, but nothing really is what it seems. And to write the Flash equivalent of code, takes many mouse clicks from your life supply and an equal tax on scalp follicles.

But what really yanks my chain is the striking limit of imaginative uses of this technology. How many more long winded swirling shapes for web site openings to you have to see? Does every web site have to be a drawn out drama of swirling text? It is like having to see the entire credits sequence for a TV show every time you change the channel. And how enticing is it to return to a flash-introduced site for the 2nd time? the 10th? Yes, I know there is often a "skip" intro button, but then what else is the purpose of the intro, except as eye-candy?

I see the majority of Flash encrusted sites as doing it for the same reason my dog licks himself... because he can.

Flash - yes it is neat, but has pretty limited range of bi-directional interactivity. It is great for passive viewing of Dilbert, but that is all one way communication. I could go on, but Jason Kottke on his "A List Apart" site, sums it up well in his article Woosh! Whoosh! Using Flash and DHTML for Good, Not Evil:

"STILL LOADING? Sheesh. Okay, here it comes. Nope, that was just a bit of text. Where's my navigation? Maybe this dot down in the corner can tell me something." Suddenly, the dot explodes and whooshes about the screen for 15 seconds before settling in the upper right hand corner of the screen. Then, each of the menu items pops out of the dot and onto the screen, finally providing you with a way to actually start using the site. That is if you'd stuck around long enough to get to that point."

Yeah, I might use Flash here and there for perhaps a widget in Director or as an alternative to delivering a PowerPoint show, but I'm not about to pawn off my other tools. It is just too limiting and focuses too much energy on how content looks rather than what it says.

It puts too much distance between the "surfaces" I am most interested in (the person visiting my site and what I have provided them), and fills that space with empty calories. Just because I can.

What About Director

Yes! You, my Lingo enthusiast friends, have the ability in Director to do better than the smart people that built Director in the first place! You can make intuitive, non bloated interfaces! Right now!

"So wise guy, what is a good interface example?" One might be tempted to look at the ones that have been copied the most! The one that comes to mind is the Director 4 Resume created by Joe Mack, the "interactive Job Seek". Shaped like a futuristic PDA back in 1994, you can find about ten of these in every animation class where students are charged with the assignment of making a computer portfolio. Not there.

What else is out there? The Passages to Vietnam CD-ROM introduced a navigational "cube" that was a fresh approach to menus and buttons. Myst got away with visible interface elements completely; while your degrees of movement may be much more restricted that lurching through the tunnels of Doom, the minimalist interface left you to focus on the story. I copied this navigational approach a few times over.

It's hard to be original on the web besides being original for the sake of being original, but I really look the look and feel of Derek Pawazek's sites like Kvetch, which is not more than HTML and Javascript, but it has a purpose that grabs your attention, rather than the interface itself.

Most of you should be familiar with the attempts at new 3D navigation designs by Che Tamahori. Likewise the Navihedera site from the clever folks at Amaze are putting out there an alternative navigational element that is layered but logically connected. And while you are in the Amaze neighborhood, check out Mr Noddlebox. The folks at Triplecode have some very cool stuff, especially the demo for Architectural Response Kollection CD.

These sites are pushing the familiar in terms of navigation controls that are "out of the box" but I cannot help but wonder whether they appeal to us on a technical envy level, and if they are reachable by the common person clicking around the web. Are the faces far apart here? Might they ever draw closer together? It's pretty sad to think of a world reduced to grey beveled 4 bit color scheme buttons or "click here" hypertext.

My hunch is that simpler is better for navigation, a concept I cannot really copyright. But what does it mean to be simple? It means logical and parallel grouping of elements. It means concepts of Norman's "natural mapping". It means questioning every piece and saying, "Is it critical? Does this take too many steps to get here? Is there a quick exit? Are the navigation elements drawing attention to themselves or are they subtly hinting at their purpose?"

Another often repeated design sin (especially on web sites) is having too many layers of menus and choices. I look at a lot of web sites and the first thing I look for is a simple statement that describes what the site is about. For example, I visited the site for GeoCommunity. What is this site about? I'll try the "corporate" link (2 clicks deep). I see two paragraphs and more links. Next try "about us" (3 clicks deep). This screen still lacks content, just four more links, "Our Mission", "Our History", "Location & Facilities", and "Contact Us". Yikes, I am 4 clicks deep and I have to wade through a corporate mission statement to come close to what I was looking for.

How do you avoid this? You spend a lot more up front making logical grouping of content, and you spread it wide across your information space, not deep. You lay out your screens on paper and you put them in front of real people and see how they go through them. You stamp out and abolish redundancy (apologies to MAD magazine!) You slash and burn, pinch and knead your navigation structures until they are sleek athletes, not fat couch potatoes.

Here is another observation. In Director/Shockwave 7 you have wide ranging control over the loading/streaming of your media, but how many sites have you sat there staring at the Macromedia logo while the whole 500k downloads? Just because you have lightning fast DSL access to the net, there is no reason to foist a long wait on some poor sod like me who still uses a modem. Get in that Library palette and dig out some of those streaming media behaviors. There is no excuse to force someone to stare at a blank screen for long. And isn't there some other creative expression we can use besides "loading"?

And in my opinion anything that is "hot" or "clickable" in a shockwave app should have a cursor change rollover to indicate linkage. Director comes with a canned behavior for cursor changes, and if they are too bulky for your tastes (they are for me) it is easy enough to roll your own. But the point is, if you are integrating shockwave into a web page, try to make its navigational elements fit in too. That means a little friendly hand when you roll over a hot area.

The Big Finale

Well Phil, I feel like I filled a column yet danced around your question. I don't know a direct way to say, "this is what should be in an interface." I am somewhat clouded by my own Alan-centric preferences and clouded by too many views of web sites. Below you will find a few resource (web sites) that I recommend.

You will find yourself torn between pushing the envelope with a novel interface (a 3D Navihedra) and boring your audience with a row of regular beveled buttons with icons right out of the Windows collection. Between the unfamiliar, but perhaps intriguing and the familiar and perhaps un-noticed. There is a time for either of these faces and for many shades of gray in between.

But if you find yourself more caught up in a how an interface looks or how cool a button squishes than what it does or represents, you will find me scolding and wagging a finger.

And code freaks, I humbly apologize, this article has not one scant line of Lingo. There is a very good reason for this... to be revealed (with code) next month.

Be random, but also be simple.

Random Resources for Design

Advance for Design hopes "to establish a new community of design practitioners who are challenged to design for a world that is increasingly digital and connected." You will find lots of resources but a noisy multicolored background that says someone from vivid was here

Interface Interest and Research Group IIRG! from Indiana University, "is a group of instructional designers interested in practical application of research to the design of instructional and performance support software." Here you will find more of your academic airs.

Interaction and Information Design Resources a long list of resources collected by from Nathan Shedroff, big design cheese at vivid studios (I bet a New York hot dog guy rues that day his missed logging this domain!)

The Consummate Design Centerr (TCDC) "is a virtual resource center for all types of designers. Its purpose is to help promote design principles, methods, and technologies that lead to the creation of quality products and services for our global society." They've got Leonardo DaVinci's guy in a circle as a logo, but don't let this put you off.

Monkey Media a design firm from Austin, features a collection of resources and articles about information design (they also have Flash and Shockwave work, last we checked they were hiring!).

Usable Web "is a collection of links about human factors, user interface issues, and usable design specific to the World Wide Web." Lots and lots of links, no frills.

User Interface (or is that "In-your-face"?) a comprehensive resource written by David K. Every, including a treatise on the computer desktop metaphors: "There is an ongoing myth that Microsoft is justified in ripping off the Macs User Interface, because Apple had ripped off the MacUI from Xerox PARC (Palo Alto Research Center). Many go on to further say that Apple took the UI from the ALTO or STAR. Of course the people that say this have never used a Mac and an Alto or a Star, or they would know how silly these claims are."

Copyright 1997-2024, Director Online. Article content copyright by respective authors.