Balancing Visual and Structural Complexity in Interaction Design

Usability is based on principles such as 'Less is more' and 'Keep it simple, stupid'. But there is more to simplicity than meets the eye. By reducing visual complexity at the cost of structural simplicity, you will give your users a hard time understanding and navigating the content of a web site.

GUUUI (2003). Design>Web Design>Interactive>User Centered Design

Building Preloaders and Progress Bars in Macromedia Flash

One of the unique features of web content built with Macromedia Flash is the ability to control when and how the content loads. When loading a heavy HTML page, the user is usually stuck looking at a blank window until the content starts appearing. Flash allows for the creation of animated preloaders, which give the user precise information about the progress of the loading process. A simple rectangular progress bar or percentage indicator will do the job, but why stop there? A preloader should be given just as much love and consideration as the rest of the site content, especially on a site that is trying to evoke a mood, or create an immersive experience. If a preloader is engaging enough, the user won't mind waiting for content, and the time it takes to load will seem shorter. The preloader is the first element someone will see when visiting your site. You can make a good first impression by welcoming your visitors with a snappy preloader.

Hirsch, Joshua. Adobe (2005). Design>Web Design>Interactive>Flash

Componentes Problemáticos de Interacción Web

A continuación se exponen los que, desde mi punto de vista, considero componentes problemáticos a la hora de hacer uso de ellos en nuestras webs.

Hassan Montero, Yusef. Nosolousabilidad.com (2002). (Spanish) Design>Web Design>Interactive>Usability

Create a Client-Side Image Map

Want to add another dimension to your site's images? Consider using image maps. With an image map you can break up a single image into multiple clickable regions, each with it's own hot spot.

Shadovitz, Deborah. Mac Design Magazine (2005). Design>Web Design>Interactive

Creating Events Using the EventDispatcher Class

Handle Flash events more efficiently in your code by using the event listener object model.

Toley, Kenneth J. III. Adobe (2004). Design>Web Design>Interactive>Flash

Flash + Information Visualization = Great User Experiences

By combining tools like Flash and information visualization, designers can dramatically improve how users work with large, multidimensional data sets.

Klee, Matthew. User Interface Engineering (2002). Design>Web Design>Interactive>Flash

Flash 5: The Color Object

Give your visitors the option to control the color in your Flash movies by using the Color Object. An object is a piece of data (color, sound, movie, etc.) that contains a set of methods (the things that objects do).

Berg, Debbie. WebDeb (2002). Design>Web Design>Interactive>Flash

Flash and Web-Based Applications

In usability tests of 46 Flash applications, we identified several basic issues related to Web-based functionality's ephemeral nature. Some findings restate old truths about GUIs; others reflect the Net's new status as nexus of the user experience.

Nielsen, Jakob. Alertbox (2002). Design>Web Design>Interactive>Flash

Flash Satay: Embedding Flash While Supporting Standards

I’ve worked with Flash for several years and have always been slightly dissatisfied with the markup needed to embed a movie in web pages. When I recently published a site in XHTML, my dissatisfaction with the markup grew as I realized that it simply wasn’t valid in this context and was bloating my pages to unacceptable levels. A leaner, standards-compliant method of embedding Flash movies was called for.

Mclellan, Drew. List Apart, A (2002). Design>Web Design>Interactive>Flash

Flash Strikes Back: Creating Powerful Web Applications

Flash is a powerful tool that offers developers huge capabilities. Until recently, developers mostly utilized Flash's strengths to create complex animations or fast-loading movies. However, the most recent versions of Flash offer developers power that's far beyond the tool's original scope. With the advent of Flash MX, we've seen that developers have the power to create web applications with more sophisticated client- and server-side interactivity. When integrated with sophisticated server-side software like ColdFusion Server and JRun, Flash delivers the power and flexibility to become a serious contender in the web application space.

Perfetti, Christine. User Interface Engineering (2002). Design>Web Design>Interactive>Flash

Flash: Create a Disjointed Rollover

While image rollovers are the standard for navigation, they do have some limitations. Would you like to create a rollover that doesn't have to be the same size as the original image, nor does it need to be stacked on top of the original image? That's what disjointed rollovers are all about, and Flash makes it easy to create rollovers that load quickly and look great!

Berg, Debbie. WebDeb (2002). Design>Web Design>Interactive>Flash

Forms as Design Elements

Before there was Java, before there was JavaScript, before there was Shockwave or FutureSplash or frames - hell, before there were tables - there were tools built into HTML that let you add interactivity, layer text, and generally differentiate your Web site from a hard-to-read magazine. Known as forms, they were developed as a uniform system for collecting user input on the Web. But feh! Who cares what they're supposed to do? When I look at pulldown menus, I see cleverly concealed sidebars; radio buttons and checkboxes become visual accents; and scrolling menus make me think, 'Hey, Bill, I got yer floating frame right here.'

Cohen, June. Webmonkey (1997). Design>Web Design>Interactive

Good Forms

So you've decided it's time to interact with your users. You're tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you'll need to provide a way for people to enter information. Therefore, you're going to need an HTML form.

Greenspan, Jay. Webmonkey (1999). Design>Web Design>Interactive>Forms

Help is a Pop-Up Menu

Efficient layout is a key to a good website. When you've got a lot of links one option that can help is a pop-up menu. You can use a ULR popup menu in its generic form or you can use CSS to customize its look. This tutorial shows a simplified use.

Mac Design Magazine (2005). Design>Web Design>Interactive>DHTML

Les Images et les Animations Attirent plus l'attention!

Toutes les études indiquent que, sur Internet, contrairement à la presse imprimée, les utilisateurs accordent beaucoup plus facilement attention aux textes et hypertextes qu'aux images fixes ou animées ! Les trois premières 'fixations oculaires' qu'effectueraient les internautes sur une page web porteraient dans 22% des cas seulement sur des images, contre 78% pour les textes. La plupart du temps, les utilisateurs plongent directement sur les gros titres ou les brèves. Il arrive qu'ils ne fassent attention à une image qu'au bout de leur deuxième ou troisième visite.

Redaction (2004). (French) Design>Web Design>Interactive

Interacción y Tiempo

La interacción es un elemento clave en la adquisición de conocimiento. Depende básicamente de dos factores: tiempo y control. En este artículo consideramos la importancia del primero.

Dursteler, Juan Carlos. InfoVis (2003). (Spanish) Design>Web Design>Interactive>User Centered Design

Introduction to Interaction Design  

This column explores trends in Web design, describes techniques, and offers advice on how to design successful and valuable Web sites.

Leonard-Wilkinson, Theresa A. Intercom (2003). Articles>Web Design>Interactive

Making Flash Usable for Users With Disabilities

Flash designs are easier for users with disabilities to use when designers combine visual and textual presentations, minimize incessant movement, decrease spacing between related objects, and simplify features.

Nielsen, Jakob. Alertbox (2002). Design>Web Design>Interactive>Flash

Making the Most of Interactivity Online  

Technical communicators need to foster useful online interaction to help users understand the scope, purpose, and limits of the online documents we create. Ideally, a well-designed online document provides a total integrated data environment. It functions as the interface between the user and a system, allowing for the retrieval and integration of supporting data as needed to perform a task. Online information can be presented in a variety of ways, including online help systems, computer-based training (CBT) programs, and interactive electronic technical manuals (IETM). The benefits of an effective online information system include the elimination of paper bulk and storage, improved document usability through interactivity, and the use of the document as a learning, training, and research aid.

Andrisani, Debbie, Anna V. Gaal, David Gillette and Sherry Steward. STC Proceedings (2000). Design>Web Design>Interactive>Online

Menús Pastel

Los menús-pastel (pie-menus) muestran cierta superioridad sobre los ubicuos menús lineales a los que estamos tan acostumbrados. ¿Por qué no han proliferado más y sólo se muestran en algunas aplicaciones?

Dursteler, Juan Carlos. InfoVis (2003). (Spanish) Design>User Interface>Interactive>Web Design

Night of the Image Map

CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML.

Robertson, Stuart. List Apart, A (2003). Design>Web Design>Interactive>CSS

Opening Pandora's Box: Special Deliverable

In the first of a continuing series, Dan Brown will seek to elaborate on the preparation of deliverables, a crucial component in the maturation of Interactive Design. He will regularly explore the nuances of artifacts and share techniques that can help make your deliverables more valuable to other team members and clients.

Brown, Dan. Boxes and Arrows (2002). Design>Web Design>Interactive

Usability Heuristics for Rich Internet Applications

Over the coming months and years, RIAs will move from cutting edge to mainstream. That transformation will accelerate with the Flash and user experience communities working together to understand and develop best practices and shared knowledge.

McMullin, Jess and Grant Skinner. Boxes and Arrows (2003). Design>Web Design>Interactive>Flash

Users Decide First, Move Second

Designers use interactive design elements, such as fly outs, rollovers, and dropdowns, to conserve space, make the screen less cluttered, and enhance the users' experience. We were surprised when users succeeded more often when they didn't encounter these design elements than when they did.

Ojakaar, Erik. User Interface Engineering (2002). Design>Web Design>Interactive

Using Flash for the First Time, Part 1: Building a Banner

This is part one of a three-part article on how to build a simple animated banner in Flash and add it to a web page using Macromedia Dreamweaver. You'll learn how to create a file and modify its settings, import and add graphics to the Stage from the library, and create layers in part one. In parts two and three you'll add an animation and create a button that opens a browser window. Then you'll specify publish settings, and add the banner to a web page.

deHaan, Jen. Adobe (2005). Design>Web Design>Interactive>Flash