Flash Interface Usability
Posted on 07 Mar 2001
by merien kunst (quintus)
Rated 4.34 (Ratings: 14)
- More articles in IA/Usability
Looking at FlashFor the last 2.5 years I have been running the Quintus Flash Index, which is a rather large collection of links to Flash sites. The reason I started it was simple enough: at the time, there weren't any decent collections of Flash work on the Web. Yet I wanted to check sites out to see what Flash could do. So I went searching, exploring the world of Flash. As I explored, I decided to bookmark all the Flash sites that I came across. I ended up with a categorized, static list of about 150 links, which I then posted as a Web page, thinking that others might find it useful. Suddenly, I was getting 150 visitors a day, which is really not bad for a one-page site. As part of my internship, my supervisor suggested to implement the thing in ASP, add some ding-dongs, and put it online like that. So I did - and it took off. Today, the QFI has links to over 2,200 Flash sites, and (amazingly) over 12,000 visitor comments. The comments area was just something I added because I thought it would be a nice feature for people to show their approval or critique on a site, certainly very useful for the developers. At first I posted a lot of comments myself, trying to inspire people to follow my example. I focused mainly on overall impression and user friendliness, not really from an expert point of view, but rather like a regular user. But the more sites I reviewed, the more I found similar errors and mistakes that would confuse visitors. Over time, many other people at my site also helped out the site developers: by indicating what elements of the sites were unclear, confusing, or even irritating.
Usability: the User ExperienceConsequently, I have had the opportunity to learn a lot about Internet usability and interface design. I found that a lot of the site critiques on the Quintus Flash Index could be traced back to basic usability design rules. Not a big surprise, but rather a very clear indication of the value of some of these rules. Usability may sound mystifying to some people, and some best-selling books may champion the obscurity of this subject, but there's really nothing too complex about it. Usability is the extent to which a system supports its users in completing their tasks efficiently, effectively, and satisfactorily - which may also include the experience of aesthetic pleasure. On the web, this leads to topics like navigation, speed, clarity and readability. The real trick about usability is the horrible task of letting it seep through in your design. Usability extremists call out for Websites with barely any graphics, using only default browser fonts (and default colors), and certainly no plug-ins. But the fact is that Flash is one of the best design tools to effectively break most of those extreme rules of usability - and in a very short time. This tutorial attempts to steer both beginning and also experienced Flash designers towards a more responsible use of Flash. While this may sound a bit loaded, you should realize that, by now, quite a few sites have banned the use of Flash entirely - simply because they had the unfortunate experience of having Flash implemented on their behalf, but in the wrong way. Yet, when Flash is used the wrong way, it creates havoc. But the same might be said of HTML. (The designers should have been blamed, rather than the tool!) So, to help Flash designers avoid making the same errors all over again, I've written out some pointers, highlighting many of the common errors I've encountered when reviewing Flash sites. I hope these hints will be useful to you.
Flash is a Tool, Not a PlatformFlash sites are either sites with Flash elements or 100% Flash sites. The latter is a very decent option for small sites, like personal sites, or sites that are meant purely for entertainment by animation and sound. But you may want to develop a more elaborate site with features like a forum, chat room, response forms, user registration, content management or a search option. While doing this strictly in Flash is certainly a great technical challenge, it's not a very wise decision. The fact is that Flash is just a tool that offers a means for designers to turn their ideas into reality. It is not a platform on which to build a Website. The best sites out there combine Flash with other techniques and formats like DHTML, streaming video, MP3, Java, the common image formats like JPG and GIF, as well as any other medium that will offer the needed content in the most appropriate way to the visitor. The magic rule is to consider every possible medium for each element you want to develop. If you understand the strengths and weaknesses of Flash, you can apply it where it is suitable, or decide when it may not be the best solution.
Button Hit Area: Number 1 MistakeThe single most common error should be mentioned first. When a text button is created, it is essential that the hit area frame of the button be filled with a solid shape in roughly the same size as the button text field. The effect of an empty hit area frame is a very jerky reaction of the mouse pointer. Often, such buttons require surgical precision to simply use the button. The best thing to do when creating any button is to choose a filled shape that covers the maximum dimensions of your button and put it in the hit area frame of the button.
Font Size, Font Type: Squint, IgnoreOn many occasions designers choose to use a Flash movie to display textual content in their Website or presentation. Whenever large pieces of static text are involved, you should question whether Flash is the best medium to present this information to your audience. The downside of embedding large text areas in your Flash movies mostly an issue of legibility, but also concerns further processing of the information by the viewer. Often, users aren't prepared to read through pages of small, anti-aliased text, and will usually choose to skip this information - which may be vital. One technique to solve this problem in Flash 5 is offered in the form of Dynamic Text fields. Dynamic Text fields are presented as aliased, selectable text, which not only increases the legibility of small fonts, it also provides a more useful way to present the text. That's because this technique enables users to select an area of text and copy it to the clipboard. This is more user friendly, since it provides better access to the information. Many visitors will want a way to extract specific pieces of information. This technique allows them to store this information wherever they want, exactly like copying text from HTML pages. For large amounts of text, Flash is usually not the best medium, and other media like HTML, plain text, Adobe Acrobat, or word processor documents should be considered. Think twice before you start pasting long passages of text into your Flash movie.
Menu Look and Feel: Is this a Button?To hang a painting you need a hammer and a nail (and a wall), to water the plants you need a hose. How about this one: to find a phone number, you need to start reading each page in the phone book from page 1, until you reach the page where the wanted name is listed. No? To view your favorite TV show, you zap to the right channel, watch 30 seconds of a creepily familiar introduction video clip, and then the show starts. If you change the channel, but then come back again, you get to watch the introduction all over again� Does that sound right? When you take the elevator, you just press any of the new symbols that are displayed on a huge array of buttons, and see what each one does. You keep pressing them, one by one, until you reach the right floor. Oh, and the buttons look like chewing gum stuck to the wall. In fact, some of the buttons aren't even buttons: that is gooey chewing gum that you just stuck your finger in! Getting annoyed yet? Well, you're not alone. Usability is all about offering people something they are looking for. That means offering it quickly, correctly, and with maximum accessibility. On a Website, accessibility depends on factors like loading times, user requirements and navigation. Navigation breaks down into buttons, structure, and guidance. Flash offers wonderful tools to create menus, navigation tricks, and really exotic buttons. Everybody that is starting to work with Flash will be thinking about things like an interactive phone for a menu, or a tree, a remote control, body parts, cubes, balls, subway maps, giant fruit baskets, planetary models - but remember, no matter how cute or cool or ingenious your interface might seem to you, it doesn't work if it doesn't work.
Not Many People Think, "Gray, Square Buttons..."Yet, the gray, square buttons are what people know and understand, just like blue, underlined text. Not very exciting, so we'll need to work out how to merge our galaxy model (or fruit basket) with the users' idea of a menu, and motivate them to navigate through the Website with it. A solution might be to reconsider your ideas and shape them into a more recognizable menu scheme, making your menu items look a bit more like classic buttons and placing them on the top, side, or bottom of the screen. A less drastic solution might be to have people test your interface. This way, you could see how (or if) they figure out that those thingies are functional buttons, and then make design improvements based on that information. A menu design can often be improved by adding pointers, like small pop-ups with your buttons, or a help function that delivers a quick explanation. You should expect that Website visitors aren't very patient, so make sure that a minimal effort is required to use your brilliant interface. Finally, you won't really be testing your navigation with people if you help them, as this will make this a useless test - unless, of course, you also have an ingenious plan to be there to help everyone that visits your site. If you want to design usable Websites, you must be hard on yourself - because your visitors will certainly be unforgiving of your self-indulgent design lapses.
Some pointers based on problems I often recognize in Flash menus:
- Transitions should be short. It doesn't help if the needed segment takes 10 seconds or more to unfold � only to show submenu items.
- Try to have the current location highlighted in the menu; this visual cue helps people figure out where they are.
- Moving or rotating buttons: even buttons that stop when you move the mouse over them are often very confusing. Slow movement is sometimes acceptable.
- Button presentation. Sometimes, buttons don't reveal their function until they're clicked, which is not user friendly. If a square shape takes me to the links page, does the triangle shape mean I can send an e-mail? What about the donut? Good practice is to use the right icons, or add text to your buttons.
Skip Intro: All the WayAnimated Flash introductions: if you really want one, start it with a SKIP button. In general, don't make intros. They can be interesting for some entertainment sites, or designer agencies, but it's not right to assume that:
- The visitor wants to wait for the loading of the intro.
- The visitor will be entertained for 30 seconds.
- The visitor will then wait for the first page to load.
The visitor will stay long enough to access yourinformation.