What Drives Interactive Design

Aliyah Marr: The following is a script for a movie I produced on interactive design for Media Bistro e-Learning division.

Introduction
189 words / 1:10 min

Hi, this is Aliyah Marr. Welcome to my tutorial entitled “What Drives Interactive Design”

I’ll never forget my first manual car. It took me a while to get the shifting down, but once I understood the principle, it opened up a whole new world for me. My understanding of gears was crucial to my understanding of the way the engine on my car worked.

In the same way, every website can be said to fit a kind of gear ratio: slow and powerful 1st gear for those sites that need power over speed right up to those sites in overdrive that trade power for lightning quick speed and entertainment value.

Web design is like the manual transmission on a car, with different gears and different speeds for different kinds of work. My sister, who is a scientist, says that no matter what gear you are in, the amount of work that you have to do remains the same. Since the work of designing a great website is essentially the same, so why not use the right gear for the job?

Let’s gear up and start driving!


(I created over 100 e-learning movies for MediaBistro / Graphics.com over a two year period from 2008-2012. Following is the script for the six movies for one project. I have included some graphics that were in the original movies.)


First GEAR
400 words / 274 seconds

When you start your manual car, you always start in first gear.

In first gear, you exchange speed and distance for power. A single rotation of the gear is easier but doesn’t translate to much distance under your tire. First gear is made for hills and for dragging the family camper across the dirt road or for getting yourself out of a rut. In web design, a site in the lowest gear will read the same on all browsers, is based on good design principles, and gets the job done without a lot of fuss.

First gear is basic, quietly powerful. In the same way, designers should always have a strong, powerful grounding in a solid design education.

You can’t get any more grounded in graphic design principles than the American Institute of Graphic Arts. Since the advent of graphic design in the late 19th century, the grid has been the basic unit of design, lending structure to pages and aiding communication.

The AIGA site shows a strong grid and typographical sense, despite the limitations of the medium.

But the clean, spare design is not the only reason that this site revs its engine in the most powerful gear. Let’s look at the source code for this site.

(show source code)

If you choose, as this designer did, to adhere to a streamlined discipline of pure HTML text, enlivened by only basic Javascript rollovers and cascading style sheet definitions, then your site will be fast, and the site will be easy for the search engines to index. There are no graphics to speak of on this site, and what graphics are here are fast light gif files. I did some Photoshop detective work to see if they are using gifs that are web safe colors and found out that they are.

Only the AIGA logo is not a gif, which would make sense as the text, being larger, needs the gradation of a jpg.

Odopod is a site that showcases the incredible portfolio of an outstanding web design firm. Although they obviously do some innovative user interface design, they decided on a simple HTML-looking Flash interface with a minimalist classic site architecture that highlights the work they have done for some of the biggest brands and plum projects. This decision and the beautiful minimalist UI interface and design place them squarely in 1st gear.

Now let’s look at a site that qualifies for 1st gear due to its powerful but slow interface, heavy graphics, and powerful sound design.

I’ll leave you the pleasure of exploring this site on your own. Whenever you choose to design a heavy site such as this, make sure your target audience will stick around long enough to see your hard work.

OK, we started the car and got up some major hills, now it’s time to move a little faster and shift into second gear.


Second Gear
755 words / 4:58 min

Second gear is powerful, moving; great for going uphill or getting out of tight spots. Second gear powers cars up steep hills and drives search engines to find you.

Feulhaus.com shows a classic Bauhaus design and clever branding. They have rethought the idea of marketing and branding in the realm of interactive design to allow the user to control his branding experience.

Clicking on a style to the right changes the “skin” of the entire site. Key to what Feulhaus is selling, the designer has chosen to bring the viewer fully into the branding experience.

My only criticism is that the design errs on the side of being a bit too subtle. I would not have known that the site could change skins on the fly if I had not been told that it did. You could blame me for not looking carefully at the right-hand column – a notoriously dangerous spot to put critical interactive elements – but how many people have the time to explore these days?

Be careful of being so subtle that your user doesn’t even notice how cool you are, especially when your brand hinges on something that is hiding in your design.

The reason this site is in second gear is because a large part of this site is in text, and text is what search engines search. Even most of the nav bar on the left is in text, only the word “capabilities” is a graphical rendering.

That word is not important, but the words below it are brand identity, print design, etc.

Also, the text block in the main part of the page is text as well, allowing the spider to consume more words that fall into their chosen category.

Spiders have evolved enough intelligence to know when a site is “real” and when it is a spider trap. The text here gives the spider plenty of food for thought without giving it a belly-ache.

schematic

Now let’s look at a site with a powerful interface that gets our minds fully into second gear. Schematic is an agency that has a scope of work that spans every medium. How do you show all this work in an interface that is powerful and easy to use?

Most designers today still conceive sites as page-based interface design. But what if the whole site were a single page? And what if the user had the ability to see the sections of this site in close-up? This idea is far from new; it is a model of interactivity I first saw in a poem on Born Magazine way back in 1998.

Now, if you are going to introduce a different kind of interface, you need to provide the user with a clear idea of where he is, and how to navigate. Schematic’s user interface is a bit obscure. Even though the nav is clearly available and obvious, it’s function is a bit less so. One has to explore.

Until I clicked on this button, it was not entirely apparent that the site consists of just one large page of pages.

Navigating by dragging the site, and choosing by clicking a page is easy to understand. However, once in close-up, how do you go back a level? The square icon, representing the idea of “schematic” is the fairly obscure interactive element I was looking for.

This site is a good choice for second gear. Packed with media intense and potentially heavy elements, it navigates like a dream. The interface is smooth, powerful and surprisingly nimble on a tough road filled with many interactive obstacles.

studio2a

Adam Kruvand of Studio2 architectural rendering site, says of his site: “It not only looks good, but it gets the results we want on most search engines.

The site combines a Flash top showcase of their work with a table-based javascript-powered base.

With just enough motion to keep interest, notice how the elements in this single image move when you roll over the image, but each one is moving at a different rate, just as if you were moving in the landscape: a fast load time, minimum interactivity, and just enough power – through its HTML base – to get up the steepest hill of search engine ratings, this site powers through second gear without a glitch.

Now, let’s get out of the outback and onto the road.


Third Gear
740 words 5:37 min

targetscope.com

Hi, this is Aliyah Marr for Graphics.com learning. When you are in third gear, you are moving faster, going through turns. Your power is balanced by speed, and you cruise smoothly and effortlessly through the hood.

Dallas advertising agency Targetscope has chosen to design a metaphor-rich site to emphasize its specialty of target marketing. While Feulhaus showed a strong second gear emphasis on chameleon-like branding and image marketing, Targetscope carries a powerful single brand throughout the site, smoothly shifting their brand into the faster speed and power of third gear.

A look at the page source revealed that the site is mostly Flash, but contains text for hungry spiders. In the same way that third gear is a balance of speed and power on the road, Targetscope is an example of the powerful harmony of beautiful design, consistency, search engine optimization and a reasonably fast interface.

zazios.com

Another site that balances speed, interactivity and functionality is the restaurant site Zazios. At first site, Zazios just looks like another nice clean, Flash site, with some minor motion and interactivity.

Nothing to put it in the faster speed of third gear. But a closer look reveals a cool feature that puts you in the driver’s seat.

There is nothing new about Quicktime VR, in fact, I was making art with it way back in ’99. VR is a great way to show a space or to show a product. QTVR is pretty self-explanatory, but for those who may still be fumbling around for the gear shift, there are some exterior buttons with obvious rollovers indicating functionality. The Quicktime walkthrough accelerates this piece from second to third gear, the power of showing this space is balanced by the speed of the interactivity and ease of use.

funneldesigngroup

I love the quirky character of this site. Like any good Flash site, the interface has just enough motion graphics and interactivity to keep the attention of the user. I am not sure how the theme of the site works with the brand, however.

I like how the robot’s actions reflect my decisions, in this case, choosing a category.

Clicking on an item brings it up in the “porthole viewer”, albeit very small.

However, opening the example brings up a tiny window. This is an error, in my opinion. The resulting experience is a lesson in frustration: the user has already seen a small example in the viewer, so his expectation is that clicking on open will show the example in a larger size. That doesn’t happen, and while the average person would only feel a vague frustration; while a designer such as myself, who makes her living by knowing what is wrong with a website — in design, architecture, user expectations, and branding — will pick up on this immediately.

One of my cardinal rules as an interactive designer is to meet or exceed the expectations of the user and never, ever frustrate him. The small amount of interactivity, tiny examples, and unrelated branding keep this site in 4th gear.

www.mutabor.de

When cruising through the design district, don’t forget to sightsee a little after you buy your Danish and coffee. Mutabor is the winner of the Flash Forward conference’s competition in the category of typographical design. I’m a sucker for an innovative interface.

A homage to innovative interface design, Mutabor fascinates and distracts. When you are tooling down the city streets looking at all the great design in the windows, you don’t want to be going too fast or you might attract the attention of the cops, Mutabor’s interface of girls and placards is amusing and light, but now it’s time to get on the highway. So let’s crank it up into high gear.


Fourth Gear
670 words / 5:49 min

www.creaktif.com/

Hi, this is Aliyah Marr for Graphics.com learning.

We’ve navigated through city streets and now we are on a fun little twisty two-lane highway, jetting towards our destination in a red coupe. Fourth gear is a combination of speed and fun, and we have taken this route to see the landscape and discover landmarks.

Creatif, a French-born design firm comes into view; it is a small house – like an amusement-park fun house with all kinds of interesting stuff behind every door. Creatif has resolved a problem that many of us encounter; the designers work in several mediums, and need to represent each one in a way that reinforces their brand while showing the scope of what they do.

They have chosen to put each medium behind a door or window in the house. More than a simple way to organize information logically, the house metaphor allows the user to understand that the firm can accommodate the needs of their clients in every medium.

This site is a model of creative interactive design. Just as jetting down the freeway in 5th gear at high speeds, it’s slightly dangerous here, with “weird people” behind the gate.

< rollover the gate>

Rolling over the labeled windows shows something of what is behind each. Definitely, a fun, light site inviting higher interaction and freeway speeds.

This is an example of how a designer can design a site to bring the information up to the user, with a “single level” site, using Flash.

Beyond the stunning inspirational visuals, this site has some really nice touches.

Watch how this “pop-up” box loads the graphics and text and gives the user a nice feedback on the progress of the load. The speed of this load definitely puts this site into 5th gear. Making the site Flash definitely was a good decision, but more importantly, the designers at Creaktif made some good decisions regarding the size of the graphics.

By designing a small pop-up window to hold the user selection, they cut out a lot of download time. Remember, that bitmapped images will load slower than vector graphics. This is because the vector image is based upon pure algebra, not upon heavy pixels. After all, if you wanted to speed down the freeway, you would not do it in a truck loaded with concrete.

Creatif is a site that allows us to jet down the freeway in 4th gear, as the sign on the building implies, it’s slightly dangerous, fun and interesting.

www.mediaboom.com/viewpoint

Mediaboom’s viewpoint site is 4th gear for the incredible fly-through of the inside and the outside of the building, super fast 3D movie adds smoothness and speed to the driving experience, great play off the name of the project

The seamless interface is like a Sunday ride through the countryside on a weekend vacation from work. Great interactive design is transparent, meaning that the user doesn’t have to work to understand how to navigate or use the site. The interface elements are obvious and self-explanatory like these arrows here that rotate the building.

Rolling over the floors in the building show that these are interactive elements.

Clicking on one reveals the floor plan as expected.

However, clicking on one of the apartments downloads a pdf of the apartment plan. In general, avoid downloads if possible. If you must include a download, warn the user first.

Another nice feature is the map of the area with rollover popups that help familiarize the potential customer with the neighborhood. One of the most effective uses of interactive design is the ability to enable the user to see himself or herself using the product or being in the locale.

Now its is time to put the pedal to the metal on the freeway of interactive design and programming.


590 words / Fifth Gear 4min 51 secs

http://www.theflagshipexperience.com/flashpage.html?en_2

Fifth gear is for cruising on the freeway, it’s easy on the car and easy on the driver, super fast, super responsive, easy to navigate, fun and light.

I just had to include this site the fantastic quality of the motion graphics and the imagery rev us quickly up to 5th gear. American Airlines helps us imagine what it would be like to fly in complete luxury and comfort. No more tiny cramped accommodations, this seat does everything, or rather, it allows you to do everything from the comfort of your seat.

I just love how the elements of the scene fly into place.

I find each one of these interactive sections fun, and I want to play with the interface to see more, but at the same time, I am learning about the product/service without even trying. What a great way to pre-sell the experience of flying American Airlines flagship experience.

The design of this site engages the viewer. Who couldn’t get excited about the product when it is shown with such sophistication?

http://www.mystvgame.com/us/

Myst shows us how a site about gaming should be done: include games in the interface! They even let us win something! I love the interactive device that opens to reveal a crystal ball menu.

While I am not much of a game player, I can see how someone who loves games could be presold on this product, even if they had no previous experience with Myst.

This site is fun, qualifying it for a 5th gear site. I could spend a lot of time here, refueling my creative muse.

http://eccoworld.ecco.com.pl/

And finally, Eccoworld, a shoe site. It is a bit ironic that I end the final 5th gear section with a site that is based on a walking metaphor, but there you are. What is 5th gear but easy, loose and fun?

The Eccoworld site features a character strolling through an environment that matches his shoes.

Choose a male character from the menu at the bottom, and it loads the shoes from the male collection and switches the walking loop. Now it is a guy strolling through a landscape.

Choosing the business category makes the character switch his entire outfit and the landscape in which he is strolling reflects your choice as well as his shoes.

This final example is great on so many levels that it qualifies for 5th gear status easily, in fact, Eccoworld is a Flashforward finalist.

This site exhibits seamless interactivity, a flawless mashup of live-action video, animated cartoon-like graphics, 3D imagery, and effortless branding. The result is that the user can really imagine using this product. The user knows how to use the interface instinctively, the brand is clear, the metaphor appropriate, the imagery interesting, the interactive elements simple and engaging, and most of all, the site is fun, and makes the user want to prolong the virtual experience into an actual experience by buying the shoes.

Ah, the beauty and wonder of well designed and executed sites that inspire us designers like a good run down the freeway in a jag! Every site that I have mentioned in this tutorial has merit for different reasons.

There may be times when you want the power of first gear, just as there are times when you need to cruise down the interactive highway in fifth gear. Just obey the laws of good design, watch out for speed traps and have fun shifting!