Watch “Create More Efficient Files in Adobe Fireworks” >

I showed how to use the Master Page, Shared Layers, Symbols, and Styles to save time and effort when working in Adobe Fireworks. These techniques are relevant if you use Fireworks for interaction design or visual design.

Download the demo file from the video here.

Thank you to everyone who attended, and if you have ideas or requests for future Adobe Fireworks screencasts, please leave me a note in the comments below.

• Consistency
  • BIG KID
• Visibility
  • Anthony Neil Dart
  • Diesel Clothing
• Learnability
  • Cristof Echard
• Predictability
  • Acura TSX
  • IKEA Kitchen
• Feedback
  • Slow Food Membership

If you attended the presentation, thanks! If you missed it, you can download a PDF here.

Interaction Design for Graphic Designers

The recording of the session is now available online via Adobe TV or you can watch it below.

Luke W’s Social Engagement Checklist

The checklist is based on:

• Susan Weinschenk’s UX Lisbon presentation on Neuro Web Design.
• Stephen Anderson’s Serious Play presentation.
• IA Summit presentation on Online & Real Life Social Networks.
• Christian Crumlish’s presentation Designing the Social In.

Infographic Tutorials and Examples

What Makes Them Click is a blog by Susan Weinschenk, Ph.D. for people who want to learn how to apply psychology to understand how people think, work, and relate. The blog focuses on applying the latest research in psychology to information, interaction, and experience design.

In “The Psychologist’s View of UX Design” she writes about applying psychological theories and research to design.

As an applied psychologist myself, it is good to see research and theory being used to improve design for digital experiences. Oh, and I also got my start in psychology at Penn State!

The clever folks over at Teehan + Lax, a user experience consultancy based in Toronto, Canada, decided to gamble with $50,000 dollars of their own money to test a theory: companies that invest in customer experience design will have better revenue, greater customer satisfaction, and therefore perform better in the stock market. They selected 10 companies that are known for the use of experience design on their sites and held their stocks for 365 days, then they looked at the value of their UEX portfolio relative to the broader market indices. Their portfolio did very well:

“In the 365 days we owned our stocks the value of the portfolio increased 39.37%. This outperformed the major indexes (NASDAQ 18.09%, S+P 9.47%, NASDAQ 100 26.81%, NYSE 14.67%).”

Designing for the customer experience is not just for the good of the customer, it is also for the good of the company. Designing great customer experiences definitely has measurable value.

http://www.uxmag.com/strategy/327/investing-in-ux

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.