Introduction to Interaction Design

I recently ran into a fellow STC member, Jennifer Square, in the elevator of a large company where I am contracting. We didn't have much time to catch up, so Jennifer e-mailed me later. Her e-mail signature contained an intriguing new job title: interaction designer. I had heard of interaction design but had never known anyone who actually did the work. I wondered what disciplines it encompassed. Was it just something that all good Web designers did anyway, unconsciously? How did it differ from information architecture? Did I do this in my job without realizing it? Was it something I could list on my résumé? In this column, I will define interaction design by comparing it to information architecture, a related field.

Leonard-Wilkinson, Theresa A. W-edge Design (2003). Careers>Web Design>Interaction Design

An Introduction to Interaction Design  

The ability to build interactions that support, enable, and improve communication is a valuable skill for help developers, Web-site designers, multimedia content developers, information-rich user interface designers--anyone who designs and develops information to be used online. This paper presents the basics of interaction design for information products and describes some basic underlying human factors and user-interface design principles.

Ames, Andrea L. STC Proceedings (2002). Design>Web Design>Interaction Design

JavaScript 101, Part 1: The Basics

One of the primary aspects of effective web experiences is interactivity. Although most Flash developers will try to state otherwise, the reality of the fact is that the majority of non-standard interactivity, that is interactivity beyond what the broswer provides automatically, is driven by JavaScript. Over the last few years the acceptance of both standards and some new JavaScript technologies such as XMLHttpRequest, or AJAX to the masses, has opened up a whole new realm of possibilites that have helped to bring JavaScript back into the mainstream focus as an important and leading-edge technology. The purpose of this series of articles is to introduce newcomers to the concepts and fundamentals of JavaScript, so that you can begin to leverage the power of this technology in your own web projects.

Williams, Rob. Community MX (2006). Design>Web Design>Interaction Design>JavaScript

Keeping it Small in Flash

If your Flash efforts need to go on some sort of weight loss program, here's a good place to start.

Green, Tom. Community MX (2006). Design>Web Design>Interaction Design>Flash

The Lack of Interactivity and Hypertextuality in Online Media  

The main focus of this article is related to the forms of mediated content that are offered in online space. Two specific aspects of new cyber-textuality are discussed--the notion of hypertextuality and the potential of interactivity. Both characteristics are understood as new challenges that reflect specific communication potentials of the internet. In an empirical sense, the article tries to show the extent these significant forms of mediation are used in online media news. For this reason a comparison between media content in print and online media has been made. The findings reveal the lack of interactivity in practice and explore its diversity as a communication form between media producers and reader. Regarding the hypertextuality, the analysis shows the complexity of this concept, which in the realm of news media online is still maturing.

Oblak, Tanja. International Communication Gazette (2005). Articles>Web Design>Hypertext>Interaction Design

Lean Interaction Design and Implementation

Lean UI development in Feature Driven Development is achieved through right-first-time implementation of the interaction designer's intent using David Harel's Statechart notation to model the interaction design.

Anderson, David J. UIdesign (2003). Design>Web Design>Project Management>Interaction Design

Living Multiple Lives — The New Technical Communicator

In this podcast, Noz Urbina talks about how Web 2.0 is changing the role of the technical communicator into one who drives product R&D and interaction design. The interview covers how the role of the technical communicator has evolved into a diversity of roles; how awareness of user needs and requirements allows technical communicators to get involved in product R&D and user interaction design; and how implementing a backwards flow of data from hundreds of internal and external users changes the role of a technical writer to one who aggregates, synthesizes, and ensures quality rather than one who merely writes.

Urbina, Noz and Tom H. Johnson. Tech Writer Voices (2008). Articles>Interviews>Web Design>Interaction Design

Make Internal Links Scroll Smoothly with JavaScript

When they’re navigating through a long document, users often are confused or disoriented when they click a link that jumps to another location in that same document.

Langridge, Stuart. SitePoint (2003). Design>Web Design>Interaction Design>JavaScript

Mastering Ajax, Part 1: Introduction to Ajax

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Mastering Ajax, Part 1: Introduction to Ajax

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

Mastering Ajax, Part 2: Make Asynchronous Requests with JavaScript and Ajax

Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.

McLaughlin, Brett D. IBM (2006). Articles>Web Design>Interaction Design>Ajax

No-One Looks at the Screen

One of the most fundamental factors in designing for screen-based media is: No-one likes looking at a computer screen.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>Human Computer Interaction>User Centered Design

Now Serving Interactive Information Units  

Interactive information units (IIUs) are online, interactive HTML documents that modify their content based on user input. You can use IIUs to document tasks that are not performed frequently enough to merit a wizard and are too complex for traditional documentation. Content is essential in IIUs and appearance varies. You can provide interactive function with a variety of languages. HTML makes production faster and cost efficient. The Internet makes updating transparent. IIUs are just another example of a great idea brought about by new technology.

Cromarty, Valerie Christensen. STC Proceedings (1998). Articles>Web Design>Interaction Design

Prognostication Digitalis

We stand poised to dive into the new year. What will 2003 hold for the profession known as 'what we do' and its children, information architecture, usability, interaction design, interface design, and graphic design? We asked our authors to hazard a guess.

Wodtke, Christina. Boxes and Arrows (2003). Design>Web Design>Information Design>Interaction Design

Progressive Disclosure: The Best Interaction Design Technique?

Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications. Progressive disclosure follows the typical notion of moving from 'abstract to specific'; only it may mean sequencing interactions and not necessarily level of detail (information). In other words, progressive disclosure is not just about displaying abstract then specific information, but rather about 'ramping up' the user from simple to more complex actions.

Spillers, Frank. Demystifying Usability (2004). Design>Web Design>Personalization>Interaction Design

Quick and Easy Flash Prototypes: Bring Your Wireframes to Life

To tackle the classic “how to prototype rich interactions” problem, Alexa Andrzejewski developed a process for translating static screen designs (from wireframes to visual comps) into interactive experiences using Flash. Requiring some fairly basic ActionScript knowledge, these prototypes proved to be a quick yet powerful way to bring interaction designs to life.

Andrzejewski, Alexa. Boxes and Arrows (2008). Articles>Web Design>Interaction Design>Flash

Read and Display Server-Side XML with JavaScript

XML is a very important base on which Web Services work, and, in conjunction with a number of client- and server-side languages, can be put to good effect. Let's see how we can use XML and client side JavaScript to display the contents of a XML file, access child elements, manipulate elements, and more!

Pillai, Premshree. SitePoint (2003). Design>Web Design>Interaction Design>Ajax

Recipe for a Successful Website

Listen up, this one's a no-brainer. Building a successful website is as simple as an Easy-Bake Oven™. Although it's a lot of hard work, it isn't very difficult to understand. The directions are clear. Here's the list of ingredients-and there are only six: Content, Information Design, Performance, Compatibility, Visual Design, and Interaction Design. Each of these ingredients is important and not one can be left out. Would you leave out sugar in a cake recipe? Would you bake bread without yeast? Of course not, but that's what 95% of the websites on the Internet are doing-especially the commercial sites where it is even more important. Most sites serve up pages like half-baked cookies without everything necessary to make them delicious. They usually get the sugar in there but they often forget even more essential elements like flour and water, making their servings hard to swallow and even more difficult to stomach. A successful website might be able to get by with only five of these ingredients-if they are ex

Shedroff, Nathan. nathan.com (1994). Resources>Web Design>Interaction Design

RIAs: The Technology Is Exciting, but They Really Do Help Users

Recently, there has been a lot of talk about Rich Internet Applications (RIAs), how they work, and how to choose the appropriate RIA technology. Unfortunately, so far, we've had few discussions about the value of RIAs to users and how RIA technologies let us create better, more usable Web applications.

Heller, David. UXmatters (2005). Design>Web Design>Interaction Design

The Roles of an Interaction Designer

Explains the relation between the interaction designer and the design situation. The design situation includes the users, imagined users, customers, current practice, and competitors. The designer needs to be sensitive to and use precision when acting upon the situation.

Lowgren, Jonas. Usability Professionals Association (2002). Design>Web Design>Interaction Design

Scrolling and Scrollbars

Despite posing well-known risks, websites continue to feature poorly designed scrollbars. Among the ongoing problems that result are frustrated users, accessibility challenges, and missed content.

Nielsen, Jakob. Alertbox (2005). Articles>Web Design>Human Computer Interaction>Usability

Selling Yourself As an Interaction Designer

Rather than focusing on how the site looks, interaction designers are primarily concerned with how an application or Web site functions. They investigate whether the application or Web site performs the intended task in a predictable manner. Interaction design incorporates a lot of skills from other disciplines, such as technical writing and information architecture.

Leonard-Wilkinson, Theresa A. W-edge Design (2004). Careers>Web Design>Interaction Design

So You Want to be an Interaction Designer

We get a lot of email from students and usability professionals asking how one goes about becoming an interaction designer, and what background one needs to get into the field. What are good interaction design programs? What real-world skills and experience are required? What, exactly, do interaction designers do on a day-to-day basis?

Reimann, Robert. Cooper Interaction Design (2001). Careers>Web Design>Interaction Design

Spell Checking HTML Forms with JavaScript and PHP  

Have you ever had to write a large amount of text into a field on an HTML form and been uncertain of just how reliable your spelling skills are? Wouldn't it be nice if HTML forms, like most other applications, had one of those handy little 'Spell Check' buttons? In this article we'll look at how easy it is to implement this functionality using a PHP/JavaScript solution called Speller Pages.

Williams, Rob. Community MX (2006). Design>Web Design>Interaction Design>JavaScript

The Standards Way to Do Dynamic Data

Somewhere in between presenting static information graphics and complex, interactive data dashboards there’s a need for a way to visualize moderately dynamic data on the web. Oftentimes the solutions you see implemented are clunky, for example, manually creating multiple frames of various data points and uploading them by hand.

Madden, Sean. Vitamin (2008). Articles>Web Design>Standards>Interaction Design