Editor’s Note: This article is excerpted from James Pannafino’s new book: Interdisciplinary Interaction Design: A Visual Guide to Basic Theories, Models and Ideas for Thinking and Designing for Interactive Web Design and Digital Device Experiences.
Throughout the web design process, the designer and developer work together to create a product that gives the user the best possible experience. The starting point of the user experience is clicking a button and having the interface respond to that interaction. If the user doesn’t know where to click, it might cause frustration and deter them from further exploring the digital interface.
Designers need to make sure the user can recognize where to interact with an interface (be it a web page or mobile device). The funny thing, is industrial designers have been dealing with interface interaction for ages. They have to think about how people will hold, use and manipulate their products for the optimal experience. Donald Norman’s book “The Design of Everyday Things” can help website designers learn from that product design expertise.
Is your website design as easy as possible for users—even those who aren’t web savvy—to understand and navigate? And what happens when a user accesses your website design on a tablet or mobile device? Here’s a look at how button states—visual clues that help users press, click and scroll through a website—can influence the user experience.
Are you making your way from print design into the digital design space? HOW Design Live in San Francisco, June 22-26, offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.
Helping Users Navigate a Website
In this analog keyboard example we see how the physical dimension of the button lets the user press down on it. There are two states: the static up state and the press down state.
Industrial designers most commonly create 3D interface interactions, where web designers usually create interactions between a flat-screen device and the user.
Using Signal and Cue in Web Design
A strategy that Web designers can use to increase initial interaction is Signal and Cue. The Signal is an visual indicator that tells the user that an interaction can take place. The Cue is a response that the signal has been activated. Digital devices demonstrate signals and cues through icons/graphics, visual metaphors and transmission of sounds.
In the analog scenario above, the Signal is seen when the mail box flag is raised. The raised flag tells the mail carrier that mail is ready to be picked up. Once the mail has been picked up, the carrier lowers the flag, creating a Cue to the homeowner that the interaction has taken place.
Above is an example of how this Signal-and-Cue methodology works in website design. It would be easy to choose a poorly designed web page, but this example has a solid design to it. The navigation is clear, there is good spacing and the web page has a well-define structure.
If we take a closer look at this web page, we find variance in Signals and Cues. Note that there are a lot of different Signals for the user to take in (like underlined and colored text indicating links). If the user is using a desktop computer, the mouse and arrow can help him discover what is clickable.
When a user accesses a website on a tablet device, the exploration aspect of it is gone and the user must go from clicking to pressing. This is why it’s important to create a clear Signal and Cue to afford the user clear interaction across all platforms.
In the above example, the use of the color pink communicates to the user what is clickable. Secondly the use of button dimension and graphics also reinforces another type of Signal and Cue. Signal and Cue can be visually communicated through color, button dimension and the proximity to other elements in the overall composition.
Interactive buttons can have up to four different states (top), but depending on the type of device certain states may be unavailable. Desktop button (middle) usually uses the static and hover state, where mobile devices (bottom) mainly use the static and active state.
Web designers should always help users recognize how to navigate a site through buttons and links and use Signal and Cue to help them interact with the content, no matter the platform. And designers should prep the design documents with clearly labeled button states to insure that the developer knows what visual indicators to create in the development stage. By giving the user a clear path of interaction, the overall interactive experience will improve greatly.
MORE WEB DESIGN RESOURCES:
- Learn web design from the expert instructors at HOW Design University, including upcoming workshops on Adobe Digital Publishing Suite.
- Catch author James Pannafino’s online design tutorial, 7 Basic Web Design Components that Are Often Overlooked
- Want to grow your web design career? Build your skills and knowledge of interaction design with our superior library of web design books. Visit MyDesignShop.com for new releases and discounts.