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

“Begin with the end in mind.”

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