Interaction Design Tactics For Visual Designers

Advertisement

Anyone designing Web-based properties today requires a basic understanding of interaction design principles. Even if your training is not formally in human-computer interaction, user experience design or human factors, knowing the fundamentals of these disciplines greatly enhances the chances of your design’s success. This is especially true for visual designers. Many visual designers are formally trained in art school and informally trained at interactive agencies.

While these institutions focus on designing communications, neither typically provides a strong interaction design foundation. Having a broader skill set not only makes your designs more successful but makes you more valuable and employable (i.e. you become the unicorn1). While in no way exhaustive, to get you started, here are five key tactics to understand and implement in your next project.

A Graphic Designed Sculpture2
Image credit: Kristian Bjornard3

1. Talk To Your Customers

The most important thing to understand when designing an online experience is your audience. Understanding who they are, what they do for a living, how old they are, how they work, what they know about the Web, how they use it, on what devices, where and so on provides invaluable insight into their pain points that you are out to solve.

Setting clear constraints on your design also helps. For example, if your audience will predominantly be using mobile devices to access the Web in hospitals, then your design must be responsive to those devices and be compatible with the environments where the devices will be used. In addition, understanding your audience builds on a communication design foundation by revealing your users’ sensitivities (physical or cultural, for example) to things like color and typography.

Understanding your audience requires conversation with target users. These conversations can happen in a variety of forums. While impersonal approaches such as surveys work well enough, nothing beats face-to-face conversations with your customers. Depending on who you’re targeting with your work, finding your target audience may be as simple as going down to the local coffee shop, buying a handful of $5 gift cards and striking up conversations with the patrons there. Most people will gladly exchange 10 to 15 minutes of sharing their opinion for a coffee shop gift card. Other ways to find users are to post ads on websites like Craigslist, pull names off your customer lists, reach out to trade organizations (for specific user types, like nurses) and spend time in locations where your audience spends time (for example, music fans at a concert).

The initial conversations will be awkward, but as more and more take place, a rhythm develops to the questions. Also, patterns begin to emerge, allowing you to tailor the questions more appropriately with each interview. The lessons you take away from these activities can be used to create personas4 — i.e. aggregate representations of typical users of your design — that can help provide context to future design decisions.

5
A persona document. (Image: Todd Zaki Warfel6)

2. Orient The User

Now that you’ve got an understanding of who your user is, orienting them when they use your design is important. Orienting your users gives them a sense of place in a non-static experience. To effectively provide that sense, your design should tell users three things:

  1. Where they are
    Critical to any online experience is understanding where, in the broader context of the website, the user is currently transacting. If it’s clear to the user where they are, then there is a greater chance they’ll understand what you need them to do on that page. For example, if the user is aware they are on a “product page,” they should expect to see a purchase link and perhaps some other product options.
  2. How they got there
    If providing clarity on the user’s current location provides context for expected actions, then showing them the path they took to get there provides a safety net. That safety net is the comfort of knowing that if the user has wound up in the wrong place, they can back out and try again.
  3. Where they can go from here
    You’ve made it clear where they are and how they got there; if they are in the wrong spot they can backtrack and try another path. But if they’re ready to move forward or they believe the path back won’t provide the content they desire, then letting your users know what options are available from this point on is imperative. Never leave a user in a dead end. There should always be an option to proceed. A perfect example of this is a search results page that yields no results. While you should let the user know that nothing matches their search query, there should be options that lead them to the answers they seek (for example, related search terms). Ways forward can be manifested in your website’s navigation but can also be implemented as affordances. Affordances are elements in the interface that are obviously clickable, such as buttons and sliders.

Amazon no results page7
Amazon does a good job with its no-results page.

(For a great primer on affordances, pick up Don Norman’s The Design of Everyday Things. While a bit dated, it lays a solid foundation for how product designers should think about their products.)

Clear website orientation provides comfort to users. It also reduces the chances that users will make mistakes and increases the chances that, when they do, they’ll be able to recover quickly.

3. Simpler Is Better

Visual designers are driven to add elements to a layout that may be aesthetically pleasing but don’t necessarily serve an interaction purpose. While certainly much is to be said for aesthetics adding to the polish and feel of an experience, when designing an interactive experience, consider opting for simpler design. Simplification means reducing the elements on the screen down to the most basic ones, the ones that will facilitate the task that the user has to complete. Start with that as a baseline, and then add ornamentation sparingly. Consider the brand of the website. The brand is a reflection not only of the aesthetic but of the experience. If a website is gorgeous, but its beauty makes completing a transaction impossible, then the website (and brand) will ultimately fail.

Aesthetics will always have a place and powerful purpose in any experience8, yet ensuring that the experience is usable first is critical.

4. Design For A Dialog

Where visual design training focuses primarily on communication, interaction design puts a heavy focus on feedback loops — in essence, a conversation between the user and the website. As you work out an experience, provide ways for the system to communicate back to the user when they’ve done something right or wrong. Ensure that your experience makes clear when the user has succeeded and when an action is required to complete a transaction. Use your visual design and communication skills to build a visual language for this feedback dialogue. Ensure that no matter where the user is in the experience, any information that is coming from the website is consistent in design and presentation method. Different types of information will require different treatments. The user will learn the system quickly, and a dialogue with the website will begin to occur. In essence, you’re humanizing the experience (and the company behind it) by proactively predicting your users’ needs and presenting information and actions that mitigate user frustration.

Think Vitamin9
Think Vitamin keeps the conversation going with its readers.

5. Workflow: Understanding The Before And After

Visual design is beautiful. It’s also static. Interaction design builds a workflow from page to page and from state to state. As you design each page, consider what the user can do on this page and how the next step in the process fits into the workflow. If you’ve just added a sign-up form to the page, think about what will happen when the user presses the “Submit” button. Will the page refresh? Will there be a confirmation page? What if there are errors in the form? What if the user hits the “Back” button? These are all components of the workflow of the experience. Each page or state is just one small component in the user’s click stream. The challenge is that each user might have a relatively unique click stream, depending on how they got to your website and why they came. You’ve used your knowledge of the user to orient them, and you’ve provided a simple interface that creates a successful dialogue with them: now ensure that each interaction has a logical next step. That next step should fit into the experience and visual language that you’ve created, so that the experience feels whole and consistent. These elements are what add credibility to the brand and increase users’ trust in your design.

Bonus Tip: Understand Your “Materials”

Jonathan Ive10, designer of the iPod (among other things), promotes the idea that designers of all types must understand the material11 they’re working with. This hold true for interaction design as well. Understanding the “materials” that make up the Web is critical. A cursory education in HTML, CSS, JavaScript and related technologies will only enhance your understanding of the medium and provide a realistic perspective on your designs. A great resource for this is the group of developers who will be implementing your work. Strike up regular conversations with them about your design, and get a taste of whether your proposals are feasible given the technologies they employ. Even better, start learning the basics yourself. You don’t have to become a star coder, but knowing enough about how the medium in which you work behaves can greatly shape the interactions you design.

Summary

Interaction design is a multi-faceted discipline that links static communications together to form an experience. Understanding the basic principles of this discipline is core to designing websites that are not only aesthetically pleasing but that actually solve business problems and bring delight to their users. This article just scratches the surface of interaction design. For Web designers of any kind, considering these fundamentals when designing any transaction or interaction is imperative.

(al)

Footnotes

  1. 1 http://www.jeffgothelf.com/blog/unicorn-a-visual-designer-with-ux-chops/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/09/visual.jpg
  3. 3 http://www.flickr.com/photos/bjornmeansbear/
  4. 4 http://www.cooper.com/journal/personas/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/08/persona.jpg
  6. 6 http://twitter.com/zakiwarfel
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/08/amazon.jpg
  8. 8 http://www.alistapart.com/articles/art-direction-and-design/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/08/vitamin.jpg
  10. 10 http://en.wikipedia.org/wiki/Jonathan_Ive
  11. 11 http://www.core77.com/blog/object_culture/core77_speaks_with_jonathan_ive_on_the_design_of_the_iphone_4_material_matters_16817.asp

↑ Back to topShare on Twitter

Jeff Gothelf is a user experience designer based in metro NYC. He has spent his career designing engaging experiences for clients big and small. He is currently the Director of User Experience at TheLadders.com where he helps executive jobseekers and recruiters make meaningful connections with each other. Previously Jeff helped shape the designs of AOL, Webtrends and Fidelity. Jeff publishes his thoughts on his blog and on Twitter. Jeff is presenting Lean UX: Getting Out of The Deliverables Business at this year's SXSW 2011 conference and the IA Summit.

Advertising
  1. 1

    you got to be shitting me :/

    0
  2. 2

    I think it is time for all of us to write articles for smashing magazine

    0
  3. 3

    There shouldn’t be any divide between a visual designer and an interaction designer. If your designing for the web it should be one and the same thing. Besides interaction design is really just common sense.

    0
  4. 5

    I stopped reading after “Amazon does a good job with its no-results page.” Trying to hide the fact that there were no results by throwing more product at the customer is not my idea of great visual design or interactive design.

    …and I like the link to his highly interactive blog… *cough* twentyten

    0
    • 6

      I love it when “Hard Core Designers / Developers ” use a standard WP theme…….. Instead of spending your time writing up an article rather use it to learn to develop a child theme.

      0
  5. 7

    Screw the article. Nice photo Kristian Bjornard! I would definitely like to learn more about that. What is it? Who made it?

    0
  6. 10

    I usually don’t read the full article but after seeing the comments on here, I do have to agree with all of them. Especially the nice photo!

    0
  7. 11

    I usually have high regard for SmashingMagazine (and Nettuts) for having much higher quality content than other design websites. This article lets the side down…

    Sorry guys but this article is poor. The text is obvious/generic, the few examples (images) to back-up points are actually of poor ux design rather than good, there is nothing new/interesting here.

    Good work to the author if he can still dish out content that could have been written 6/7 years ago and still get it published!

    Sorry, a bit harsh…

    0
    • 12

      Well, in reality , there are NO systematization. Individual response to life events * personality / social level + education level = very unpredictable opinion. So no matter how many “senior” years any given individual spent creating some interfaces, we cannot categorize. 5-7 years usually applies some shifting in human psycho, situation evaluation and adequacy of reaction. So, in plain language , majority of responses and evaluations are dynamic. DAO, chaos.
      So all those respectable authors are just describing yesterday’s experience. I think we’re as human race are enthusiastically trying to capitalize on unpredictability of life (by sucking out of very “respectable” fellows fingers), somewhat planar, templateable, mass-productive. This dramatic “scientific poking” is outgrowing into volumes of books and lectures, that will be soon forgotten, bc of new and fundamental approach sure as shit will pop out of another “evangelist” next Monday.
      Like one fellow already stated above – the UI/UX stady is just average COMMON SENSE.

      (sorry for my English)

      0
    • 13

      yep – but it fills the space nicely, like 90% of the “content” on the internet.

      0
  8. 14

    I definitely wanted to write down a small note so as to express gratitude to you for these awesome instructions you are giving out here. My time-consuming internet search has now been paid with good insight to exchange with my guests. I ‘d assume that most of us site visitors actually are unquestionably fortunate to be in a magnificent site with very many brilliant professionals with very helpful secrets. I feel somewhat lucky to have discovered the web pages and look forward to some more excellent minutes reading here. Thank you again for all the details.

    0
  9. 15

    Well, I agree that a lot of information in the article have been written before and could be seen as outdated or just common sense. But the interesting thing is that allthougt Interaction Design could seem as common sense to a lot of people there is stil a lack of this approach in a lot of webbased projects today.

    I work as a professional Interaction Designer and the thing i that a lot of people say that Interaction Design is just common sense proves that we still have a way to go.

    0
  10. 16

    I can appreciate the good intention of the author.. and share some of his views of the importance of Usability and Interactivity (in the author’s word: “feedback loops”) when designing websites.

    But nowadays most visual designers (or web designers) create effective websites that are aesthetically pleasing and yet still conform to the web usability standards. Most designers do not have formal background in human computer interaction (HCI) or user experience design, but neither do web developers and programmers..
    How many of us have ever implemented or even heard ISO 9241 – a so called standard for Web Usability ?

    The negative comments on this article reminds me of the web usability guru Jacob Nielsen who received a number of criticisms due his “function over form” view. Mr Nielsen’s website still consistently shows this :)

    Interactive/UX designers do not need to distance themselves from the visual/web designers who are formally trained in art school, both are required to produce websites that are usable, effective, and engaging (read: pleasant to see) which relates to ‘emotion’ as an important part of user experience..

    So which one is better?
    Emotion or logic?
    Right brain or left brain?
    Form over function or function over form?
    Tomato or potato? :)

    0
    • 17

      Good points, all listed at the end, my thoughts exactly. I’m a graphic designer with plenty of experience. I worked in publishing and editorial along with a myriad of other stuff, I’m starting design a digital book for the iPad, does this mean being a certified UX designer I will be taken seriously? Designers are communicators. Full Stop. They can learn anything, its the medium were talking, not that hard?

      0
    • 18

      Well, “tomato vs potato” is not really on the spot, in my humble opinion. Right and left brains are strategically different to hedge on each other during event evaluation. I think it would be better to pick something like, soft and warm.
      U’re right on spot with emo vs logic. Plus, there clear non-cluttered/pure emotions and there are engineered behaviors. Why would someone spend millions in producing another pepsi commercial in hope that we’ll buy it bc he/she pays to celebrity or sport star to drink it? Jesus with rusty Shmeisser!! Where is the function and where is beauty? I’d like to see these “evaluations” in scientific books and journals. Its all nonsense, dynamically developing around us, and funny part is: we’re the major hardware appliances to “intrigue” (read: lure) the general public to buy stuff. Right, trying to make a living …

      0
  11. 19

    Francisco Inchauste

    September 10, 2011 6:33 pm

    Hi everyone, I’m the UX Design editor here at Smashing Magazine, and I wanted to address some of the comments. We always appreciate feedback here at Smashing — good or bad. I especially appreciate the critical comments that give some detailed feedback, rather than those that are simply negative without giving us (and the author) something to learn from.

    I wanted to first point out that the article is introduced as presenting the fundamentals and something that is “in no way exhaustive.” Our intended audience is not an expert, or someone with a good amount of experience doing this kind of work. So, I would hope that many readers with that experience would find this information to be basic.

    We always have to balance the articles we deliver with a variety of levels. Every article is not necessarily right for you. To help clarify, we have been throwing around the idea of having a “Design 101″ or “Fundamentals” category. So, if someone is completely new to this practice, they can quickly find information to get started. Others that feel they are beyond that, can obviously skip over that article. I’d love to hear thoughts on this.

    The argument on whether or not a visual designer should understand interaction design depends on your definition of a visual designer. It also gets into other things, like the “web designers should know markup” argument. For me, a Web designer should absolutely understand the fundamentals of IxD and the markup! As the author, Jeff, points out, the markup is “the materials” for the Web.

    So, if I turn to a visual/graphic designer, I wouldn’t expect them to have much background in any of this (yet). To put it another way, a Web designer with no knowledge of markup or IxD should be called a visual designer. The difference is designing for communication and aesthetic, rather than designing to communicate behaviors and utility.

    Thanks again for the feedback!

    0
    • 20
    • 21

      A designer designs, a stylist makes it merely appealing. Designing is all too often mistaken for styling and merely ‘making it look nice’. One does not spend 4-5 years in art college to learn how to “make it look nice”.

      Good design offers a well thought out structure and thus provides access to content. Designing concerns translating “raw matter” into a useful and understandable entity. Design challenges to think, act or in some cases explore, simply disclosures information in others. A visual designer should therefore understand interaction, whether designing for print, for screens or anything else. A design should be aimed to get the targeted public to act, understand or get involved, so interaction is never to be disregarded or underestimated.

      Someone who can transform a design into a working website is not designing it and therefore not a designer, however high her (or his) skills. Even if this is the designer in question: the work of designing should at that point already be done.

      Working with or for someone who thinks a designer is a stylist making stuff beautiful leads to great disappointment for both. It may cause severe heart condition and in some cases a rash.

      0
    • 22

      Hi, thanks for your post as it explains your intentions well. ON my Job Search >http://www.ic-creative.co.uk/visual-jobs.
      I realised how much my life is focused around digital devices and my design thinking and attention goes into this.
      I began searching some great jobs in publishing to find Visual Designer only to find I need yet more training/certification for an employer to take me seriously. BUT wait I have my own project I’m working on, digital book for iPad Over the days of working on it I realised it’s actually an experience, a fun way to deal with the theme I’m writing about. Do I need some more understanding and training to do a brilliant job and sell it to a publisher??
      I searched Visual and Interactive Design and up came Smashing Mag, brilliant, good discussion apart from pratts who just are sneeringly negative, well get off. But the other posts made with different perspectives, Thank you!
      I think I’ve come across the Mag before on Twitter or Linked in somewhere..

      0
    • 23

      Francisco, thank you. The more I read about this subject the more I’m comprehending what I need to do and where my career should move to.

      You’re right, whatever designer you are, you are going to PRODUCE an outcome for the design idea/theme/concept/ so you need to understand the ‘spec’ for that product or manufacture.

      I want to transform my book idea into a marketable experience that is fun. The iPad delivery is the format, so as a graphic designer 2D+3D, I need to understand the medium I want to broadcast in, it’s departed from paper and bounced to the ‘illuminated screen’.

      Thanks for your work on this site. ;-)

      0
  12. 24

    good suggestions for those who are formally trained in art school but begin to do some interaction designs. learn more methodologies about HTML and CSS would be helpful for the design work, just talk to your front-end engineers about this:)

    0
  13. 25

    Very good article. Good job!

    0
  14. 26

    Hi, first of all i got that this article was a ’101′ and i think its great. In my company we have an employee moving into this area and articles like this really help.

    I think your idea of having a Design 101 or Fundamentals section is great. Some people out there need to remember that not everyone is a seaoned pro and sectioning this sort of material will help both the newbie find it and the pro to realise its not for them.

    0
  15. 27

    As the author of this (and many other) articles I’m always grateful for the folks who take the time to comment – both positively and negatively – on my work. I believe it to be a learning experience and one that helps me refine topics and write better articles in the future.

    What I don’t believe adds any value to the conversation is a comment with no explanation of the author’s sentiment. I would guess the rest of the community who read Smashing agrees.

    All of that being said, this article was, in essence, a *very brief* introduction to Interaction Design. After reading the comments and reflecting a bit, it became clear to me that targeting it strictly at visual designers was a bit short-sighted. If you work on any kind of interactive media and are new to the practice, this article is for you — regardless of title, company or responsibility.

    For those of you who found it useful, I’m happy it helped. For those of you for whom the material was too entry-level, there are no shortage of excellent, advanced articles to read on SM. If you disagreed with any of the material or examples, I’d love to hear your thoughts. Feel free to comment here or ping me directly (jeff@jeffgothelf.com).

    Thanks.

    [Jeff]
    @jboogie

    0
    • 28

      Hi Jeff

      I’ve not looked up more on your background. One of my uni design projects can be seen on http://issuu.com/isobelle/docs/namef6cc84/1 this evidences my attempts at moving my graphic design expertise into a more fluid experience, interactive.
      I’m an ideas creative and work across mediums, digital devises is another medium to communicate in and I wonder what next. It’s the ideas that are the nub, the devices/platform/tools is the delivery scenario.
      Anyway I shall keep on seeking how to make my idea an ‘experience’ delivered/transmitted/broadcast in an iPad device. I’m onto your trail now hopefully I’ll work it out.

      0
  16. 30

    There does seem to be a lot of article bashing on Smashing at the moment.

    Thanks Jeff.

    0
  17. 31

    Saying interaction design is only a common sense shows the lack of understanding of this discipline and ratifies the fact that these kinds of articles are necessary.

    For those who disagree, I suggest reading “Designing for interaction” by Dan Saffer or “About Face 3″ by Alan Cooper. That might help you understand there so much more to it than just common sense.

    0
    • 32

      Interesting. Like what?
      U saying that someone might teach u how to predict my personal reaction on event? And how many factors it’ll take?
      I am stated that is common sense bc to lead a stranger from A to B is like teaching ur dog/cat/ to piss in certain places. How much of an academical tuitions this should be enough to cover? So the same way we “designing” predictable reactions of a potential victim (sorry, user).

      I think that more people start categorizing and fundamentalizing stuff, the more confusing the subject became.
      Common sense is pure and simple approach. Google, ebay, wiki.
      U type what u’re looking for – u got it. Why would anyone think any other way to present information in any other way but to answer the question? How many years in school someone needs to study to grasp on this?
      When u’ve come to store to buy food, do u really (honestly, ever) read anything that hangs on their walls, or just following to the section where the item is? So whether its Interactive Designer or Graphic Designer, someone just need to write on a label that is a carrot, for sellers “liability” and “public health protection” sakes. How much of heuristic evaluations and evaluators required to get this straight? Do not mix common sense approach when food advertisement gets into its nastiest. Then, there is an art and there is a science to LURE people from one brand to another. Why LURE? Bc of purity of function in the presentation design is deleted, erased, discarded. What is really turned u off and makes u stop drinking pepsi product? Video of someone’s disintegrated liver (due to excessive consumption of such beverage), or a few plain words from very plain article from some “we-know-the-truth.org” website? U see? For someone it has to be a “picture that says a 1000 words” for someone – just his personal life experience. Yes, we are the ones, who makes “so much more to it than just common sense”. I am not sure yet why, but I think we’re intoxicated by our own ridiculous enthusiasm of complicate things around.
      I would agree that some fundamentals required to learn physics and optics, geometry, chemistry and some hand coordination in young years. But thats not what makes some college graduate (or dropout) Leonardo. And after following his inventions and articles, blueprints and all in between, did we found unbeatable pattern to reproduce more “leonardos”? No, we found a pattern to reproduce template users.

      0
  18. 33

    I really like that you included actually having conversations with target users in the first step. When brands focus too much on the demographics, rather than the psychographics of the users, it’s there that they begin to lose them. Just because I’m married doesn’t mean I’m going to respond the same way a married woman that doesn’t own a dog and has no siblings, etc. would. I believe the psychographic is the most important aspect when designing for the user and that can only be achieved through having conversations and listening. A deeper psychological response to a product or a brand has more influence on the reaction of the user – you can’t get that with age, gender, race, etc.

    Oh yeah – awesome first picture.

    0
  19. 34

    This was a very interesting read, thanks!

    0
  20. 35

    Although it’s clear the UXD design is very new concept to the planet of web development and web design, I most of what was mentioned here is the the fundamentals of core design conceptualization. UXD goes much deeper and further than this.

    I can’t help but wonder about the examples that were used firstly, (like, seriously???) and then the writers blog.. hmmm… any designer worth his salt wouldn’t personalise his own with something as horribly boring and straight “Twentyten” as that?

    Why don’t you show us some examples of where you have put your good knowledge to use, and put some credibility to your statements.

    0
  21. 36

    Some people fail to realize that not every Smashing Mag reader is an advanced web designer/developer. Thumbs up for this article.

    0
  22. 37

    Great write up Jeoff. One thing to note is that we’ve done an updated/improved version of our personas model. We haven’t posted a version to our portfolio yet, but you can view a version on our work in progress site redesign over at:

    http://beta.messagefirst.com/img/_work/nyu_persona.png

    0
  23. 38

    Hello there, just became alert to your blog thru Google, and found that it’s truly informative. I’m gonna be careful for brussels. I’ll appreciate in the event you proceed this in future. Many folks shall be benefited from your writing. Cheers!

    0

↑ Back to top