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 - http://www.best.eu.org), hence the occasional secret language (such as ITC: IT Committee or Makumba (http://www.makumba.org). 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 (http://www.ixdcth.se).

1. Basics of
Interaction Design
in ITC, BEST, and the universe

2. Who am I? Who are you?

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. Who am I? Who are you?
Introduce yourself briefly and write your name on a
post-it

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. 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. So, why design?
Any ideas?

8. de sign|dəˈzīn
|
verb [with obj.]
do or plan (something) with
a specific purpose or
intention in mind

9. “Begin with the end in
mind.” Covey, 7 Habits of Highly Effective People
-- Stephen

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. “Begin with the end in mind.”

13. Why the hassle?

14. 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.

15. 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.

18. 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

19. User-Centered Design
ISO 9241-210 (previously ISO 13407)

20. This is from me :) For my Interaction Design Methodology exam

26. 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.

27. 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

28. 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
blog@best.eu.org
• 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

29. 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?

30. 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?

31. 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?

32. Paper prototyping
Sketch your idea the earliest possible

33. Paper prototyping
Sketch your idea the earliest possible

34. 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

35. 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

36. 3, Users and needs
Sanders, 2002.

37. 3, Users and needs
Called user research
Similar to market research, ethnography
(~sociology)
It‟s important, but not really in our scope
for now

38. 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

39. 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

40. 3, Users and needs
About Face 3 (p42)

42. sudo gem install --includedependencies rails

43. 3, Users and needs
More wisdom
About Face 3

44. 3, Users and needs
More wisdom
About Face 3

45. 3, Users and needs
More wisdom
About Face 3

46. 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

47. 4, Use cases
List all interactions between user and
system
Prioritize them
Write down the needed requirements

48. 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

49. 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

50. 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

51. 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

52. 5, Mock ups
Let‟s check Balsamiq a bit more

53. 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.

54. 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.

55. 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.

56. Repeat and iterate
You‟ll need to implement the feedback
afterwards.
The process can take a long time online.
So use live events wisely :)

57. Recap – the process
1, Planning
2, Idea
3, Users and their needs
4, Use cases
5, Mock-ups
6, Feedback

58. Recap – the process
http://private.best.eu.org/wiki/page/ITC.IDSteps
ITC -> Knowledge Center: ITID ->
Description of steps

60. What’s next?
Where to dig deeper?

61. 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).

62. 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.

63. 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

64. Bye-bye!
Questions, comments, whatsoever:
peter@peterkun.com