Basics of
Interaction Design
in ITC, BEST, and the universe
Who am I? Who are you?
I’m Peter Kun.
Active in BEST 2006-2011, LBG Budapest
Ex-TiGro coordinator, now doing trainings and ITC stuff
Doing master...
Who am I? Who are you?
Introduce yourself briefly and write your name on a
post-it
How much designing I plan to
do?
Design for life!

Experienced

I wanna code!

How solid are my design skills?

Not experi...
What is Interaction Design
“The practice of designing interactive digital products,
environments, systems, and services. …...
So, why design?
Any ideas?
de sign|dəˈzīn
|
verb [with obj.]
do or plan (something) with
a specific purpose or
intention in mind
“Begin with the end in
mind.” Covey, 7 Habits of Highly Effective People
-- Stephen
“Begin with the end in mind.”

IT development is an expensive resource
So, design should be done well to save on that
That...
“Begin with the end in mind.”
Why the hassle?
Why the hassle?

Notes:
Old intranet. There were awfully much mess without a clean structure where to find what. New
funct...
Interaction Design process
There are a couple of them
So, it‟s not the most exact science

Notes:
There are two ways appro...
Interaction Design process
User-Centered Design (or Human-Centered
Design)
ISO standard (they always have some funny name)...
User-Centered Design
ISO 9241-210 (previously ISO 13407)
This is from me :) For my Interaction Design Methodology exam
Process in BEST
1, Planning
2, Idea
3, Users and their needs
4, Use cases
5, Mock-ups
6, Feedback
Something important to u...
1, Planning
“Begin with an end in mind.”
Define who, when, what
Who will be involved in the process?
Agreeing on working m...
1, Planning - example
Project

Blog for BEST

Goal

To create a platform where everyone with an account in BEST
system can...
2, Idea
What are we talking about
Write it down, people needs a common
understanding (and it also helps you)
What is the p...
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 ...
Exercise

1/5

Your task is to design a box on the PA
welcome page, where you can follow what
are your committee fellows a...
Paper prototyping
Sketch your idea the earliest possible
Paper prototyping
Sketch your idea the earliest possible
Exercise

2/5

Your task is to design a box on the PA
welcome page, where you can follow what
are your committee fellows a...
3, Users and needs
Who are they?
What do they want?
Understand what do they want, and what
do they really want
Prioritize ...
3, Users and needs

Sanders, 2002.
3, Users and needs
Called user research

Similar to market research, ethnography
(~sociology)
It‟s important, but not real...
3, Users and needs
The environment

The application will be displayed on public
web, administration happens in PA

Users

...
Exercise

3/5

Your task is to design a box on the PA
welcome page, where you can follow what
are your committee fellows a...
3, Users and needs

About Face 3 (p42)
sudo gem install --includedependencies rails
3, Users and needs
More wisdom

About Face 3
3, Users and needs
More wisdom

About Face 3
3, Users and needs
More wisdom

About Face 3
4, Use cases
The system‟s responses to the user‟s
actions
Developers kinda need them, to have an
overview of all sort of f...
4, Use cases
List all interactions between user and
system
Prioritize them

Write down the needed requirements
Name: UC1 – Writing a post in the blog
User: Post author
Preconditions: user is logged in to Public Website
Scenario:
USER...
Exercise
Your task is to design a box on the PA
welcome page, where you can follow
what are your committee fellows are
doi...
5, Mock ups
Visualizing the whole thing
It can be user tested (remember paper
prototyping)
Reveals problems
Certainly “che...
5, Mock ups
Pencil, paper is awesome (flipchart, marker
okay too:)

Powerpoint, Google Docs, Photoshop, Paint
Anything is ...
5, Mock ups
Let‟s check Balsamiq a bit more
Exercise

5/5

Your task is to design a box on the PA
welcome page, where you can follow what
are your committee fellows a...
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 ...
6, Feedback – for real
Developers will tear it apart
All requirements covered?
Are the use cases covered?
Is everything lo...
Repeat and iterate
You‟ll need to implement the feedback
afterwards.
The process can take a long time online.

So use live...
Recap – the process
1, Planning
2, Idea
3, Users and their needs
4, Use cases
5, Mock-ups
6, Feedback
Recap – the process
http://private.best.eu.org/wiki/page/ITC.IDSteps

ITC -> Knowledge Center: ITID ->
Description of step...
What’s next?
Where to dig deeper?
What’s next? – First dig
Frontend development
Mastering HTML, CSS and Javascript.
To implement graphical designs

Basic Ma...
What’s next? – Second dig
Graphic Design
Mastering Photoshop, Typography and Graphic Design
Basic frontend knowledge is ne...
What’s next? – Third dig
Facilitating others’ designing
ITC is demanded everywhere, consulting with other
committees on ne...
Bye-bye!
Questions, comments, whatsoever:
peter@peterkun.com
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Basics of interaction design – training slides
Upcoming SlideShare
Loading in...5
×

Basics of interaction design – training slides

384

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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 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
    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 http://private.best.eu.org/wiki/page/ITC.IDSteps 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: peter@peterkun.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×