1. Design for Interaction Rui Filipe Antunes www.pikiproductions.com/rui

2. Design for interaction Interaction design is about working with all different types of interfaces not only websites; Interaction design is not about the behavior of the interface but the behavior of people; Is about Efficiency when people are consuming content; Is about easying users interaction. Don't make them search for what they want. We want to create smooth experiences so that users will return.

3. Design for Interaction Some examples of bad design Example 1 Example 2 Example 3 Example 4 Examples of (in)consistency in Google Chromebook Chromium ThinkWithGoogle 20ThingsIlearned Webstore

4. Five Design Principles Five main principles of design: a) Consistency b) Visibility c) Learnability d) Predictability e) Feedback

5. Consistency Consistency goes unnoticed; Human eyes are sensitive to changes; People should pay attention only to the content not to where things are located; Strive for consistency in both appearance and behavior :  Same functionality = same appearance;  Elements with different functionalities should have different appearances;

6. Consistency Changes in appearance and behavior can attract attention in a negative way. Rules of consistency should apply to all elements of design  colors, pattern, textures  size, proportion and rotation  shapes and alignments  typography  visibility  transitions and motion graphics  rool-overs/mouseovers  tooltips  layers ....

7. Visibility Let users know that an opportunity to interact exists e.g. A good example is provided by cars where all the interactive elements you need to drive are highly visible for the user People are “click-happy”, reinforce the possibility of interaction with visual indicators that invite people to touch or click. Unless it is a game, discoverability does not belong to this context. This is not a game of chance or luck, it is about easying users interaction. Don't make them search for what they want.

8. Visibility Standard clickable elements understood to be interactive :  Hyperlinks,  Buttons  Scrollbars  Forms Other invitations for interactivity are provided by :  Buttons- depths, shadings, shadows  small images  Textures simulating things that people might want to touch  Text styles – different colors and fonts

9. Learnability Interaction must be:  easy to learn  easy to remember If you do something and get what you want this increases the possibility of returning to do it in a the future occasion. Operant conditioning:  Rewarding increases the probability of learning, positive feedback reinforces the probability of people engaging in that behavior again  Negative feedback or making an error increases the probability of that person will not engage in that behavior again

10. Learnability Observational learning Observing an expert doing some action and then repeating it (e.g video tutorials) The more you use an interface the easier it becomes  Practice --> habits  extensive practice → automaticity Tranfer of perceived affordances: People learn behaviors from all different sorts of experiences, not only on the web, as well as in other media and in real life Affordance: When an object “tells you” how does it function e.g buttons, sliders, tabs

11. Predictability It is all about expectations. Before the interaction has occurred, the design should set the accurate expectations. Labels, instructions, icons and images can all be used for this purpose. We should be able to communicate:  What to do.  How the interface will respond.  What will happen.  Where the visitors will go. e.g What happens when this icon is pressed?

12. Predictability When users don't know what they can do, they will interact with everything that is clickable (or touchable)is clickable (or touchable) When they can predict what will happen they will only interact with the necessary elements.will only interact with the necessary elements Behaviors differ when:  playing  exploring  focusing in a specific task

13. Feedback Provide information about:  Location – where are you  Status of progress – what is happening  Future events or possibilities – what will happen in the future  Completion or closure – whether or not something has finished

14. Feedback Feedback should complement the experience not complicate.  do not interrupt the visitor's actions. Allow undo to revert to prior states.  mistakes and errors always happen (mistakes not always end up in errors.) Every interaction should produce a noticeable and understandable reaction.  Failing to acknowledge an interactions can lead to unnecessary actions or errors and mistakes. (People will often redo their action)  e.g What is the consequent action when nothing is displayed after the following button is pressed?

15. Feedback Progress indicators  Definite (we know the size/end limit for the operation)  Indefinite (we don't know how long the operation will take)

16. Summary Consistency: Make sure you have similar design, similar behaviors throughout the site. Strive for consistency in appearance and behavior, because it facilitates usability, credibility and trust; Visibility: Provide cues to know when and where can users interact; Learnability: Meaningful and unambiguous labels, content, and interactions make it possible to quickly understand and repeat the experience; Predictability: We want to be able to set expectations so that people know where they are, where can they go, what can happen, and what the outcome of their actions will be; Feedback: Acknowledge interactions, make sure users know that the interface realises that they have interacted with it, as well as provide information such as error messages, dialogs and comptetion messages (status, location, progress, and completion)