Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Basics of interaction design – training slides


Published on

The training slides from the Basics of Interaction Design session at ITC Summer Meeting 2012 Athens (BEST).

The training was tailored for junior IT developers and junior designers at BEST (Board of European Students of Technology -, hence the occasional secret language (such as ITC: IT Committee or Makumba (

A lot of credits go to those fellow ITC members, who worked on the design of the Blog, and to those interaction designers from who I got a lot of inspiration for the exercise.
Similar credits for Johan Redström and Sus Lundgren to use parts of their slides from Chalmers' Interaction Design (

  • Be the first to comment

Basics of interaction design – training slides

  1. 1. Basics of Interaction Design in ITC, BEST, and the universe
  2. 2. Who am I? Who are you?
  3. 3. I’m Peter Kun. Active in BEST 2006-2011, LBG Budapest Ex-TiGro coordinator, now doing trainings and ITC stuff Doing masters in Interaction Design / Human-Computer Interaction I play the drums, guitar, learning piano and electronics Living in Gothenburg, moving to the Netherlands
  4. 4. Who am I? Who are you? Introduce yourself briefly and write your name on a post-it
  5. 5. How much designing I plan to do? Design for life! Experienced I wanna code! How solid are my design skills? Not experienced yet
  6. 6. What is Interaction Design “The practice of designing interactive digital products, environments, systems, and services. … …Interaction design focuses on something that traditional design disciplines do not often explore: the design of behavior.” In: Cooper et al.: About Face 3
  7. 7. So, why design? Any ideas?
  8. 8. de sign|dəˈzīn | verb [with obj.] do or plan (something) with a specific purpose or intention in mind
  9. 9. “Begin with the end in mind.” Covey, 7 Habits of Highly Effective People -- Stephen
  10. 10. “Begin with the end in mind.” IT development is an expensive resource So, design should be done well to save on that That‟s why you are here :)
  11. 11. “Begin with the end in mind.”
  12. 12. Why the hassle?
  13. 13. Why the hassle? Notes: Old intranet. There were awfully much mess without a clean structure where to find what. New functions were added randomly, without following a bigger strategy.
  14. 14. Interaction Design process There are a couple of them So, it‟s not the most exact science Notes: There are two ways approaching a design problem; you either think there should be this and that function available on an interface (let's stick to websites from now on), and make a way to have that something done. since usually only programmers are do the coding, they are kind of expert users. taking it literally, that if it's there, then it's done. The other way to involve the actual users in the process; first you start with researching their needs, goals, and keep them in the loop for every development. Focus from start that the product will be usable and matching the needs, goals of the users. Iterate often with their involvement, to keep the loop tight. Not to develop “for the cupboard”, not to create products which won‟t be used because they are not usable.
  15. 15. Interaction Design process User-Centered Design (or Human-Centered Design) ISO standard (they always have some funny name) Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems Goal-Centered Design (About Face 3) They are similar in the core, anyway
  16. 16. User-Centered Design ISO 9241-210 (previously ISO 13407)
  17. 17. This is from me :) For my Interaction Design Methodology exam
  18. 18. Process in BEST 1, Planning 2, Idea 3, Users and their needs 4, Use cases 5, Mock-ups 6, Feedback Something important to understand: interaction design IS always BEFORE development. Therefore, there *are* always people taking over your work, so keep it tidy and understandable for everybody.
  19. 19. 1, Planning “Begin with an end in mind.” Define who, when, what Who will be involved in the process? Agreeing on working methods Setting up the rules Defining the goals and the scope No rocket science here
  20. 20. 1, Planning - example Project Blog for BEST Goal To create a platform where everyone with an account in BEST system can post their ideas Working methods • All discussion should happen in a mailing list • There should be regular online meetings every 2-3 weeks • Every OM should have representatives from both sides • There should be regular usability testing of the prototypes • Usability testing will happen during live meetings (IPF, SpM, RM) or in LBG office Action plan • First meeting will happen on 10th January • Updated requirements will be reviewed every meeting • Design should be ready by 10th May People involved • Juku and Jaan from ITC side • Mari and Kati from mT side
  21. 21. 2, Idea What are we talking about Write it down, people needs a common understanding (and it also helps you) What is the problem/task will the thing solve? What do we want to achieve? What will it do and why?
  22. 22. 2, Idea “I think it would be awesome to have a place on PA to share our study materials! Overall, we are all students, we should be able to help each other not just in LBG/CMT work!” Close your eyes, take 15 seconds to imagine it. What do you think / How do you feel?
  23. 23. Exercise 1/5 Your task is to design a box on the PA welcome page, where you can follow what are your committee fellows are doing. Now, take 3 minutes to discuss your idea What is the problem/task will the thing solve? What do we want to achieve? What will it do and why?
  24. 24. Paper prototyping Sketch your idea the earliest possible
  25. 25. Paper prototyping Sketch your idea the earliest possible
  26. 26. Exercise 2/5 Your task is to design a box on the PA welcome page, where you can follow what are your committee fellows are doing. Now, take 5 minutes to sketch your idea Pen and paper Flipchart and marker Keep it simple and efficient
  27. 27. 3, Users and needs Who are they? What do they want? Understand what do they want, and what do they really want Prioritize their needs It‟s rather straightforward for PA / Public Website
  28. 28. 3, Users and needs Sanders, 2002.
  29. 29. 3, Users and needs Called user research Similar to market research, ethnography (~sociology) It‟s important, but not really in our scope for now
  30. 30. 3, Users and needs The environment The application will be displayed on public web, administration happens in PA Users • • • • User Tasks Random web surfer • Reading posts and comments BEST account owner • Commenting posts Post author • Writing posts • Commenting posts Moderator • Removing unsuitable posts Random web surfer BEST account owner Post author Moderator
  31. 31. Exercise 3/5 Your task is to design a box on the PA welcome page, where you can follow what are your committee fellows are doing. Now, take 5 minutes to discover who are your users, and what are they needs
  32. 32. 3, Users and needs About Face 3 (p42)
  33. 33. sudo gem install --includedependencies rails
  34. 34. 3, Users and needs More wisdom About Face 3
  35. 35. 3, Users and needs More wisdom About Face 3
  36. 36. 3, Users and needs More wisdom About Face 3
  37. 37. 4, Use cases The system‟s responses to the user‟s actions Developers kinda need them, to have an overview of all sort of functionalities
  38. 38. 4, Use cases List all interactions between user and system Prioritize them Write down the needed requirements
  39. 39. Name: UC1 – Writing a post in the blog User: Post author Preconditions: user is logged in to Public Website Scenario: USER SYSTEM 1. User opens the post writing page 2. System opens the page 3. User writes the text, selects the tags and submits the post 4. System saves the post and displays it in the public posts list Alternatives : USER SYSTEM 3a. User click „cancel‟ instead 4a. System does not save the post and will direct user to public posts list Comments: Text should have WYSIWYG, tags are displayed in a multi-select dropdown
  40. 40. Exercise Your task is to design a box on the PA welcome page, where you can follow what are your committee fellows are doing. Now, take 10 minutes to write down the use cases of your box
  41. 41. 5, Mock ups Visualizing the whole thing It can be user tested (remember paper prototyping) Reveals problems Certainly “cheaper” than coding it to see how it should work
  42. 42. 5, Mock ups Pencil, paper is awesome (flipchart, marker okay too:) Powerpoint, Google Docs, Photoshop, Paint Anything is sufficient Balsamiq Mockups – specific software for this Upload everything to PA
  43. 43. 5, Mock ups Let‟s check Balsamiq a bit more
  44. 44. Exercise 5/5 Your task is to design a box on the PA welcome page, where you can follow what are your committee fellows are doing. Now take your sketches, and redo them a bit nicer, implement the new aspects, polish it, make it tidier Remember, the purpose of stuff here is to be shown to others. They need to understand what you want.
  45. 45. 6, Feedback – let’s get it tested! Go to users, and ask them how would they use the prototypes Make it clear: you are not measuring their competence or smartness, but you are curious if your prototype is sufficient. Probably you gotta repeat the whole process again and again The whole Interaction Design is about prototyping often, and iterate (a lot) Notes: Keep in mind: you can‟t get it perfect by default. Iterating faster will be faster. Remember keeping people in the loop not to develop and ending up without users.
  46. 46. 6, Feedback – for real Developers will tear it apart All requirements covered? Are the use cases covered? Is everything logical? They won‟t be bothered if the prototype doesn‟t look awesome. Focus on the rest. Working with developers can be a bit hard, but there are good reasons why are things happening like this.
  47. 47. Repeat and iterate You‟ll need to implement the feedback afterwards. The process can take a long time online. So use live events wisely :)
  48. 48. Recap – the process 1, Planning 2, Idea 3, Users and their needs 4, Use cases 5, Mock-ups 6, Feedback
  49. 49. Recap – the process ITC -> Knowledge Center: ITID -> Description of steps
  50. 50. What’s next? Where to dig deeper?
  51. 51. What’s next? – First dig Frontend development Mastering HTML, CSS and Javascript. To implement graphical designs Basic Makumba knowledge, just to know what is happening. Javascript is super important to build niche, real interaction (to do more than implementing layouts).
  52. 52. What’s next? – Second dig Graphic Design Mastering Photoshop, Typography and Graphic Design Basic frontend knowledge is needed (CSS), just to know what is possible. Learning usability, interface design principles and patterns. It‟s harder than you think to make really good interfaces.
  53. 53. What’s next? – Third dig Facilitating others’ designing ITC is demanded everywhere, consulting with other committees on new things Co-creation is very different from leading a project or a team. Skillset to be acquired and practiced. Interaction Designer in these cases is a “consultant”, a facilitator
  54. 54. Bye-bye! Questions, comments, whatsoever: