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).
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
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.
16.
17.
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
20. This is from me :) For my Interaction Design Methodology exam
21.
22.
23.
24.
25.
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?
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
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
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
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
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
Do a short flashlight. Post-it’s will be put with the next slide.
Defining design with design doesn’t lead us far.
http://www.youtube.com/watch?v=lKBK7Ulz5JY
Great planning
Great planning
Old Private Area. There were awfully much mess without a clean structure where to find what. New functions were added randomly, without following a greater plan.
- 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.
An example from a book
Quite some results on a Google search
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.
Understanding the users and their needs. Other disciplines has developed methods for these, such as marketing (who’s gonna buy product, and base decision on what), or ethnography research and sociology; what do people do, think, and how they are going to behave.BEST has several given things regarding these.
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.
Dig into frontend development: Mastering HTML and CSS Basic Makumba, just to know how it works and when modifying changes, not to screw up. Also JSTL. Beyond architecture for design, there is a lot of "niche" interaction, which is done by Javascript. Inevitable to learn JS to have Facebook-level interaction done.
Mastering photoshop and designer eyes. Basic frontend knowledge is needed, to know the limits of the tools. It's a lot of problem solving; there are constraints to please, and with multiple solutions. You need to learn the visual language and a lot a lot of interface principles.
Dig into facilitating design process, consulting with committees.ITCers are always invited for different CMT meetings to deal with design or development. These cases, an interaction designer is basically a facilitator, who leads the group's process to have them realize what they want, and go through the design process, and produce outcomes to pick up by developers later.