Designing interactive experiences in Flash is such a fast-paced profession that it is subject to an abundance of superfluous visual trends, which usually look dated shortly after they are published online (if not before). Another challenge to design- ing Flash interfaces is creating something that is intuitive enough for the user to learn and navigate. This is demanding because we have so many options that making the appropriate choices often means practicing self-restraint.
In this chapter, you will learn concepts and theories to help you find successful design solutions for Flash. You can depend on this chapter for that next inspiration to help you create something appropriate and innovative. It will also give you some ver- biage to assist you in selling your Flash-based ideas to your clients.
Creative direction
First, let’s characterize some ingredients of a successful interface design. Just about every project comes about by using the basic research, plan, design, develop, and deploy process. It doesn’t really matter if you are a mechanic, a chef, or a web designer. Chances are, if you are a seasoned professional, you are familiar with and use some variety of this process on each of your projects. The part of the interface designer, especially when designing for a Flash solution, is an integral role during
CREATING USABLE AND
INNOVATIVE EXPERIENCES
16
CHAPTER 2
Figure 2-1. You can think of the structure of your creation as a cake, with each element represented by a layer in the cake.
Design layers
Think of the structure of your creation as a delicious cake, as illustrated in Figure 2-1. Each element is represented by another layer in the cake. The icing and decoration might look fantastic on the surface, but without all of the good stuff inside, it would be hollow—and no one wants to eat a hollow cake!
Now let’s look at each of these layers in your design, starting with the innermost one.
Purpose
As advanced designers, we want our designs to be part of the solution, not simply decoration for con- tent and functionality. The first step in this process starts by understanding the project’s purpose. What will the content be? What are the business or nonbusiness objectives? Who will be using it? What is the desired path or action a user should take? Understanding a project’s purpose will help you come up with the best solutions for your interface when time is a commodity in short supply. Compiling all of this information into a creative/design brief is a good exercise for understanding the project’s purpose. Creating a creative/design brief will also provide the nondesigner members of your team with a deliverable that helps them understand the creative decisions you will make during the project. The following is an example of what you might include in a creative/design brief:
Audience: Consider to whom the design is supposed to appeal. Use age, sex, ethnicity, income,
hobbies, or anything else that is relevant.
Technical considerations: Determine which plug-ins will be needed. Are there special consid-
erations for style sheets? How much content is anticipated and in what format?
CREATING USABLE AND INNOVATIVE EXPERIENCES
Positioning: Clearly state in one sentence the message the users of the project will get.
Describe how the design will support this message.
Tone: List keywords that express the atmosphere of the interface. For example, clean, natural,
modern, classy, and so on.
Imagery: Describe the types of images, photos, illustrations, typography, and colors you pro-
pose to use on the project. Describe how this imagery supports your tone.
Desired actions: Decide which actions the user needs to take while visiting the interface to
complete the objectives.
Flushing out all of these ideas and putting them on paper will help you point to something later on during the project to help you justify your design decisions should they come under scrutiny. It also serves as a basic road map to use when trying to come up with ideas during your design phase. Using a creative/design brief gives everyone an opportunity to put in their two cents about what they expect the project to include. This gives you a good idea about how to design for the project and makes it easier for everyone else on the team to support your creative decisions, since they can see their input being implemented in the design.
The foundation of your soon-to-be-successful project is its purpose. So do a little research and know your subject.
Style
In how many other jobs do you get to be an integral part of a music label one week, a blockbuster movie promotion the next, and a modern furniture company the week after that? Truly one of the things to absolutely love about being a creative professional is that the job is also a vehicle to learn about so many subject matters. The job of the designer is to place those subject matters in their proper context. We communicate messages by using the visual vocabulary of our project’s genre. We determine if a design is exciting, relaxing, fun, sad, scary, and so on.
For example, for a ski resort client, one of your assignments might be to create a Flash site that appeals to families looking for winter vacations, and another assignment might be to create something that encourages college students to apply for part-time jobs as ski instructors or lift operators. Aside from the related subject matter of winter activities, these are very different audiences that would require very different styles.
Designers understand how to appeal to an audience of BMX enthusiasts, as well as to consumers of high-fashion apparel. In other words, the style must make sense for the subject matter.
Structure
By nature, most interface designers are multimedia mavericks. We bend, twist, and combine text, ani- mation, video, and sound into interactive experiences. And what better medium for all of these dif- ferent media types to converge than in Flash?
When thinking about the structure of any interactive project, the designer must consider the content first and foremost. Select the technologies and production techniques that best support the content. You must also select the technologies that will best support the user’s experience. Is it all Flash? Should you use HTML/CSS? Does the project require a database or an XML feed? There are a myriad
Figure 2-2. This interface is designed to be interactive as well as autoplay.
of different ways to integrate search functionality with Flash interfaces, and all of those decisions impact design and animation.
Consider designing a map-based search that shows ski lifts and lodging accommodations vs. a drop- down menu interface that sorts available job schedules. The impact is obvious to an interface designer. Always remember that the best interfaces are intuitive and look good at the same time.
To the advanced interface designer, there are very few limits to what technology or interaction we can design on any given project. It is the appropriate use of these tools that challenges us.
Craftsmanship
It takes a natural problem solver to take on a complicated medium like the Web and tame it enough to craft a quality experience. Many tools are available for interface designers, but it is the practical knowledge designers bring to the table that carries the key ideas and goals through to fruition. Ironically, sometimes the best test of craftsmanship is whether or not the user noticed it. The most polished and intuitive interfaces are transparent to the point that the user doesn’t even think about whether anything is misplaced or accidental. Through testing, failure, and determination, the advanced designer practices a heightened level of craftsmanship that allows everything else to shine as bright as it can. This aspect of interface design is probably the most frustrating because of all of the options we have for constructing a project. Fine-tuning how those options fit together isn’t always the same on a per-project basis, which makes each solution unique.
For example, when I designed the streaming media showcase for VitalStream, shown in Figure 2-2, the assignment was to seamlessly integrate video controls and video sorting/preview options into a branded interface. The challenge of designing these types of elements and interactions is that they need to be intuitive enough for most users to notice and understand but cannot overpower the con- tent itself.
18
CREATING USABLE AND INNOVATIVE EXPERIENCES The craftsmanship of a project is apparent in all of the tiny details. High-quality design and craftsman- ship cannot carry an interactive experience alone, but they can most certainly single-handedly destroy its effectiveness.
Surface
The surface of your design is the first superficial exposure a user has to the work, and it is where everything comes together or falls apart. To the trained eye, the surface of a project shows the pro- duction value and the effort that went into the project.
If the designer didn’t take the time and effort to explore all of the necessary building blocks leading up to the surface, it will be obvious, and the whole experience will most likely lack the consistency and continuity that are expected from advanced designers. If all of the fundamentals were given proper consideration, the typical user won’t notice at all. Ironically, this is the reaction you want. It shows that you have created an intuitive design solution—one that doesn’t require any second guessing. It’s a somewhat thankless job, but you still get the satisfaction of knowing that what you’ve accomplished provides the perfect solution for the client, and hopefully you enjoyed creating it as well.
From the surface perspective, all of the elements that create the experience should be present in the design. Consistency and attention to detail will prevail over corner-cutting production techniques on the surface of any interface design.
Critiques
Generally, an interface design is deconstructed in team critiques during the design and development process. This is a good exercise for getting professional feedback from people who understand the project. It is important for those participating in a critique to constantly approach the design from what they perceive the perspective of the target audience to be. Critiques can provide a valuable opportunity to deconstruct the user from many different perspectives, and this usually improves your design. Anyone who has experienced the critique can tell you that it can be the best or worst thing to happen to a design. At worst, it can be a design-by-committee session, where your design will get ripped apart and put back together inappropriately. At best, it is a pleasant gathering where everyone on your team congratulates you for finding the perfect solution and gives you meaningful feedback on how to improve the concept.
In most cases, the work generally speaks for itself, and an impartial jury of your peers is the best place for it to succeed or fail. But critiques don’t exist to simply showcase the work; they are supposed to make it better. The level of purpose, style, structure, craftsmanship, and surface should be analyzed in these sessions. Here are some general guidelines for critiquing an interface:
Does the design make a clear statement that supports the content and goals of the project? (This addresses the purpose layer.)
Does the style make sense for the subject matter? (Obviously, this is about the style layer.) Is the important content easy to get to and is the design intuitive? (This relates to the structure layer.)
Is there anything that looks out of place or seems like a mistake? (This deals with the crafts- manship layer.)
Many designers succeed by seeking criticism more than praise. If you are stuck on a design for what- ever reason, show it to someone on your team who knows the project and get her critique. If you don’t have that luxury, show it to anyone who will give you his opinion. Generally, if you get an “I think it’s perfect” type of reaction, disregard it and move on to the next person. Get a consensus. Working through criticisms will most likely guide you to a better solution.
The experience
Interface designers generally must consider many aspects of a project beyond simply the way it looks. They also need to create how the interface feels. Using metaphors, visual/animated narratives, and consistent interactions can also add to the “feeling” of your interface design.
The goal of every interface should be to extend the user identity to include the experience you cre- ated. This means that the interface should completely absorb the users, as if they were playing a game or driving a car. A successful interactive experience usually happens in four steps:
Departure: The user is sent to a website, uses a kiosk, or is given a CD-ROM. The first impres-
sion is made from the surface of your design.
Discovery: The user is exposed to the surface of the experience and interacts with it. At this
point, all of the elements of your interface design will intrigue the user into digging deeper into the experience. He can identify with the style, and the structure is intuitive.
Point of no return: The user is hooked. He has found something of interest in the content and is
actively interacting with your interface to learn more. At this point, your surface design is second- ary to the content, but the structure of the navigation and content is what is keeping your user engaged. The craftsmanship of your work is imperative to maintaining this successful experience.
Realization: The user has made a personal connection with the material. He has found mean-
ing in the content and hopefully accomplished the task at hand. Later, when thinking about the material, the user will most likely first visualize the interface as a point of reference.
Flash is the best tool for creating these types of immersive interactive experiences because it gives designers a fundamental tool for making broadband-type interactions accessible to broad audiences. As interface designers, we can create animation- and video-based experiences for kiosks and CD-ROMs, as well as for a majority of websites. Flash interface designers have the freedom to choose the context of content based on how it will be the most meaningful. This flexibility makes interactive experiences in general more meaningful for everyone.
Metaphors
The vernacular of Interface design largely consists of metaphors designers have taken from real-life objects. Using metaphors can be a risky business, as they can easily be overimplemented or too cute to be effective. Perhaps in the future, metaphors will be less relevant and the use of them will be more sentimental. But for the foreseeable future, metaphors are a practical tool for solving design problems. Three main types of metaphors are used successfully in interface design:
Tangible: These types of metaphors are usually seen on interactive elements in the form of
textures, bevels, drop shadows, and so on, but they can also include using real-world bitmap textures throughout an interface.
20
Figure 2-3. An interface that uses a tangible metaphor
CREATING USABLE AND INNOVATIVE EXPERIENCES
Conceptual: These are very common in navigation as icons, such as a printer to indicate print-
able content or a clock to indicate a block of time. Using conceptual metaphors is extremely helpful when you don’t have room on a button label to fully explain the button’s purpose.
Physical: These metaphors imply a sense of place, such as a map or a house as the structure of
the experience. Physical metaphors are most common in game interfaces, but more and more Flash interface designers are using them successfully for all types of experiences.
Let’s take a closer look at each of these types of metaphors.
Tangible metaphors
Most browser or operating system scrollbars emulate something tangible. They look like something you can literally grab onto and move inside a track. Designers have harnessed bevels, gradients, drop shadows, textures, and so on to indicate interactive elements so that they are more intuitive for a broader audience. This phenomenon may be due to the fact that using a screen to accomplish tasks is still relatively new when you compare it to something like a typewriter or printed materials. Users seem to intuitively comprehend these types of tangible cues more than flat shapes. As a result, the use of this metaphorical technique has become a convention of interface design. The book you hold in your hands is chock-full of helpful lessons for pulling off similar techniques.
You can find inspiration from many types of tangible objects you interact with all the time: car dash- boards, kitchen appliances, stereo receivers, cameras . . . you name it. If you look around, you will find that your world is packed with toggles, switches, push buttons, scroll wheels, knobs, levers, and other objects for you to emulate in your interfaces.
Figure 2-3 shows an example of an interface I created for prospective patients to take a virtual tour of a private hospital facility. I used textures from photos I took while taking a real tour of the facility to serve as background textures in the interface. You can see how I used the woodwork and wallpaper textures throughout the interface to help convey the atmosphere of the place.
Conceptual metaphors
The best interface designers make it a point to immerse themselves in as many different types of media and entertainment forms as possible—movies, magazines, video games, theater, architecture, and so on. You will never have to create something in a vacuum if you take advantage of these resources. Many Flash designers use visual techniques that have been adapted from these other types of media. This is especially true with transitions between content and navigation sets. You may have seen plenty of “Flashturbation” in the form of website transitions. But if they are done graciously, transitions can assist in extending the user-based identity to your interface.