Post on 13-May-2015
description
Basics of Interaction Designin ITC, BEST, and the universe hello
Who am I? Who are you?
I’m Peter Kun.Active in BEST 2006-2011, LBG BudapestEx-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
Who am I? Who are you?Introduce yourself briefly and write your name on a post-it
How much designing I plan to do?H
ow
solid
are
my d
esig
n s
kills
?
Not experienced yet
Experienced
Design for life!
I wanna code!
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
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.”-- Stephen Covey, 7 Habits of Highly Effective People
“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 :)
Why the hassle?
Why the hassle?
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.
Notes:
Interaction Design process
There are a couple of themSo, it’s not the most exact science
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.
Notes:
Interaction Design processUser-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
User-Centered DesignISO 9241-210 (previously ISO 13407)
This is from me :) For my Interaction Design Methodology exam
Process in BEST
1, Planning2, Idea3, Users and their needs4, Use cases5, Mock-ups6, 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.
1, Planning
“Begin with an end in mind.”
Define who, when, whatWho will be involved in the process?Agreeing on working methodsSetting up the rules Defining the goals and the scope
No rocket science here
1, Planning - exampleProject 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
2, Idea
What are we talking aboutWrite 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?
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?
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 3 minutes to discuss your ideaWhat is the problem/task will the thing solve?What do we want to achieve? What will it do and why?
1/5
Paper prototypingSketch your idea the earliest possible
Paper prototypingSketch your idea the earliest possible
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 5 minutes to sketch your ideaPen and paperFlipchart and markerKeep it simple and efficient
2/5
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
3, Users and needs
Sanders, 2002.
3, Users and needs
Called user research
Similar to market research, ethnography (~sociology)
It’s important, but not really in our scope for now
3, Users and needs
The environment The application will be displayed on public web, administration happens in PA
Users • Random web surfer• BEST account owner• Post author• Moderator
User Tasks
Random web surfer • Reading posts and comments
BEST account owner • Commenting posts
Post author • Writing posts• Commenting posts
Moderator • Removing unsuitable posts
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 5 minutes to discover who are your users, and what are they needs
3/5
3, Users and needs
About Face 3 (p42)
sudo gem install --include- dependencies rails
3, Users and needsMore wisdom
About Face 3
3, Users and needsMore wisdom
About Face 3
3, Users and needsMore 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 functionalities
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 authorPreconditions: user is logged in to Public WebsiteScenario:
Alternatives:
Comments: Text should have WYSIWYG, tags are displayed in a multi-select dropdown
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
USER SYSTEM
3a. User click ‘cancel’ instead
4a. System does not save the post and will direct user to public posts list
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
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
5, Mock ups
Pencil, paper is awesome (flipchart, marker okay too:)
Powerpoint, Google Docs, Photoshop, PaintAnything is sufficient
Balsamiq Mockups – specific software for this
Upload everything to PA
5, Mock ups
Let’s check Balsamiq a bit more
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 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.
5/5
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)
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.
Notes:
6, Feedback – for realDevelopers 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.
Repeat and iterate
You’ll need to implement the feedback afterwards.
The process can take a long time online.
So use live events wisely :)
Recap – the process
1, Planning2, Idea3, Users and their needs4, Use cases5, Mock-ups6, Feedback
Recap – the process
http://private.best.eu.org/wiki/page/ITC.IDSteps
ITC -> Knowledge Center: ITID -> Description of steps
What’s next?Where to dig deeper?
What’s next? – First digFrontend 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).
What’s next? – Second digGraphic 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.
What’s next? – Third digFacilitating 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
Bye-bye!
Questions, comments, whatsoever:
peter@peterkun.com