Interaction IED Barcelona Digital Media 2012

1. inter_
action
DIGITAL MEDIA | 2012
Digital Media

2. interact_
Interaction design
Digital Media

3. • Design • Surveys
• Impact • Flow Diagrams
• Navigation • Testing
• Sketching • Sitemaps
• Prototyping • Scenarios
• Storyboards • Evaluation
• •
interact_
Usability Research
Interaction design
Digital Media

4. • Rollover • Animations
• Pop Ups • Wireframes
• Transitions • Icons
interact_
Interaction design
Digital Media

5. The challenge_
 How to interact with people
communicate
engage
treat
Digital Media

6. Interaction Design
 How to impact the people
Digital Media

7. Digital Media

8. Interaction Design
 Defines the structure and behavior of
interactive systems
Digital Media

9. Interaction Design
 It’s not about the behavior of interface…
is about the behavior of people
 Do, feel, know
Digital Media

10. Interaction Design = success
Digital Media

11. Digital Media

12. Digital Media

13. success = complete an action
Digital Media

14.  http://www.youtube.com/watch?feature=player_embedded&v=kn5GIlLGg2w
Digital Media

15. http://www.youtube.com/watch?v=4G3LzX5w_lo
Digital Media

16. Interaction designer
 What's the business model?
 What value does it provide?
 What are the users needs?
 How does it work?
 What's the design solution?
Digital Media

17. Interaction designer
 Business
 Technology
 Content
 People
 Purpose
 Context
Digital Media

18. Work
 Define
 Design waterfall
 Develop
 Deploy
sprint
 Design Prototype Measure Improve
hybrid
Digital Media

19. Work
define
observe
ideate
researc
h
prototype design
Digital Media

20. 5 interaction principles
Digital Media

21. Digital Media

22. 5 Interaction Principles
 Consistency
Strive for consistency in appearance and behavior,
because it facilitates usability, credibility, and trust.
Digital Media

23. http://www.theartisanofclerkenwell.com/
Digital Media

24. Principles
 Visibility (Perceivability)
Most interfaces are inherently visual, so make certain
that people know when and where they can interact
with it.
 Don’t hide, provide cues, offer hints
Digital Media

25. http://soulwire.co.uk/stream
Digital Media

26. Principles
 Learnability
Meaningful and unambiguous labels, content, and
interactions make it possible to quickly understand and
repeat an experience.
Digital Media

27. http://mothereffinganimatedgif.com/
Digital Media

28. Principles
 Predictability
Set expectations about what will happen during and
after an interaction to minimize confusion and
dissatisfaction.
Digital Media

29. http://www.soleilnoir.net/believein/
Digital Media

30. Principles
 Feedback
Acknowledge interactions and provide information
about status, location, progress, and completion.
 Don’t interrupt actions
Digital Media

31. http://www.graydenpoper.com/
Digital Media

32. Persuasion & Motivation
Digital Media

33. Understanding context
What, When, Where, Who?
 Situation  Simplicity
 People  Needs
 Duration  Expectations
 Attention  Urgency
Digital Media

34. Understanding motivation
Extrinsic
momentary, emotional
Intrinsic
focus, engagement
Digital Media

35. Trust and Credibility
Digital Media

36. Reduce Effort
…don’t be too smart
Digital Media

37. Competition
…enhancing motivation
Digital Media

38. Guide People
Form : complete objects
Digital Media

39. Reward Perfomance
Form : complete objects
Digital Media

40. Effective Interaction
Digital Media

41. Effective Navigation
 Sitemap
 Hierarchies
 Structure
always present and available
Digital Media

42. Effective Navigation
 Content
 Importance
time and position
Digital Media

43. Effective Navigation
 Click and Taps
 Counting steps
http://www.youtube.com/watch?v=LDARc7jhM8U
Progress tracking
Digital Media

44. Effective Navigation
 Filtering and Suggestions
Digital Media

45. Feedback
Digital Media

46. Feedback
Information about the result of our actions
Digital Media

47. STOP
Feedback
Maybe obvious or subtle
Digital Media

48. Feedback
Change behavior on time
Digital Media

49. Talk soon
Prompt, meaningful, perceivable
Digital Media

50. Mobile first
Digital Media

51. Gestalt
Digital Media

52. Interaction
Digital Media

53. Digital Media

54. http://vimeo.com/32856179
Digital Media

55. Project Overview
Digital Media

56. Education online
 Enlist the interactions involved in..
 Which can be managed online?
Digital Media

57. Homework
Digital Media

58. Seductive interaction
 The process of deliberately enticing a person to
engage in some sort of behavior.
http://www.slideshare.net/stephenpa/seductive-interactions-idea-09-version/
Digital Media