diagrams in interaction design

8/2/2019 Diagrams in Interaction Design

http://slidepdf.com/reader/full/diagrams-in-interaction-design 1/97

Compiled with the assistance of the Tiger University Program of the EstonianInformation Technology Foundation



Diagrams in Interaction

DesignIlya Shmorgun



My Background



PhD Student - Information Society

Technologies

Usability Specialist - Estonian Information

System’s Authority



How do you design?



Topics



Introduction to interaction design

Concept maps in interaction design

State transition diagrams in interaction

design



Interaction Design



The practice of designing interactive digital

products, environments, systems, and services.

Focuses on understanding the goals and needsof users and trying to design tools for users to

achieve those goals.

Taking into account a user's environment andtechnological limitations.

Defining the structure and behavior of interactive systems.



Stages of InteractionDesign



Research Design Development Baking Promotion



Deliverables



Initial Concept

Research

Sketch Wireframe MockupContent Map

Design

Alpha Beta Product

Development

Baking - Promotion

Product Marketing Materials



Concept Mapping



Created in 1970s at Cornell University.

Support for meaningful learning - a student isable to not only receive new information but

also effectively incorporate it into the

previously established cognitive structure.



What is a concept map?



A collection of boxes and arrows.

A diagram showing relationships betweenconcepts.

Represents relationships between ideas.



Successfully applied in education, governmentand business.

Easily understood by both school children

and researchers.

Presents information in a visual and

structured way.

Surfaces strengths and weaknesses of ideas.



Example



Drawbacks



Concept maps do not easily scale.

A lot of nodes make a concept map difficult

to read.



Supporting InteractionDesign



Developers

Illustrators

Stakeholders

Users

Interaction

Designers

Research

Iteration Stage

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Design

Iteration Stage

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Promotion

Stage

Promoting

Positioning

Marketing

Sketching

Creating mockups

Prototyping

Testing

Making changes

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Development

Iteration Stage

Writing code

Testing

Making changes

Data collection

Testing

Making changes

Building concepts

Actors

Stages

Activities

UMLFlowchartsState transition diagramsDecomposition diagrams

Graphical illustrations


Texts

ReportsStakeholders

Users

Developers

Illustrators

Interaction

Designers

Baking Stage

Testing

Making changes



Concept maps can be used to support the

interaction design process through various

stages.



C on c e p t M a p s

Developers

Illustrators

Stakeholders

Users

Interaction

Designers

Research

Iteration Stage

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Design

Iteration Stage

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Promotion

Stage

Promoting

Positioning

Marketing

Sketching

Creating mockups

Prototyping

Testing

Making changes

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Development

Iteration Stage

Writing code

Testing

Making changes

Data collection

Testing

Making changes

Building concepts

Actors

Stages

Activities


Graphical illustrations


Texts

ReportsStakeholders

Users

Developers

Illustrators

Interaction

Designers

Baking Stage

Testing

Making changes



A Practical Example



mTLU



A mobile application for integrating various

information sources of Tallinn University andmaking them accessible through a mobile

interface.



Application Concept



NATIVE APPLICATION

MOBILE TLU

IPHONE

WEB-SERVICE

QR-CODE

LECTURE SCHEDULE

ROOM NUMBER

AUDITORIUM

COURSE DESCRIPTIONS

NEXT AND PREVIOUS DAY

Is a

Initially for the

With a backend

WEB INTERFACE

And a

For additional

PLATFORMS

Such as

ANDROID

SYMBIAN

WINDOWS PHONE

Which allows to scan a

Which is located near a

And see the

For the specificOf an

As well as

SPECIFIC LECTURES

For

A LIST OF LECTURES

For the

ASIO

ÕIS

Which integrates



Defining the Personas



ACADEMIC STAFF

PROFESSOR

TEACHING ASSISTANT

HEAD OF LEARNING

HEAD OF CURRICULUM

LECTOR

RESEARCHER SYSADMIN

IT-MANAGER

HEAD OF THE INSTITUTE

Includes

OTHER

STUDENTS

NON-ACADEMIC

ADMINISTRATION

HEAD OF RESEARCH

Includes

TEACHING STAFF Includes

UNIVERSITY

Consists of



ExpectedFunctionalities



MOBILE TLU

EXPECTED

FUNCTIONALITIES

COMPOSING

PERSONAL

TIMETABLE

SYNCHRONIZED

CALENDAR

SHOWS

TIME

ROOM

LECTURE

OCCURING

Has

Such as

A

Which can be

Which

With the

The

Of the

Where the

Is

VIEWING

CURRICULA

COMPLETION

LIST

POINTS

CARDS

REGISTRATION

MODULES

SEARCHING

SUBJECTS

DESCRIPTION

REGISTERED

MISSING

SEMESTER

CURRICULLUM

VALUE

PREPARATION

DATE

CHOOSING

The

For

ATTENDING

Of

EXAMS

Of

Which depend on

Of

For

Of the

Can be added to the

Which lets check the

A

To be

For the

For

Which can be added to

Which are

The

Of



User Expectations



MOBILE TLU

SIMPLE

LOGICAL

a WAY

EASILY SEARCH

INFORMATION

CHECK

REMINDERS

EXAMS

CURRICULA

SUBJECTS

SYNCHRONIZE

DATA

CALENDAR

ACCESS ÕIS

SECURE AUTHENTICATION

LIGHT

RESOURCES

DEVICE

Is

Can provide

To

For necessaryFor

Of upcoming

VIEW

The

The

With the

Of the

To

With

Is

On



Steps of BuildingConcept Maps



Identify a focus question.

Identify 10 to 20 concepts that are related to

the focus question.

Begin to build your map by placing the most

inclusive, most general concept(s) at the top.



Select two, three, or four subconcepts to

place under each general concept.

Connect the concepts by lines.

Label the lines with linking words.

Look for crosslinks between concepts in

different sections of the map and label theselines.



Tools Used



CmapTools

OmniGraffle

Visio

Pen and paper



State TransitionDiagrams



Give an abstract description of the behaviorof a system.

Behavior is analyzed and represented in a

series of events that could occur in one ormore possible states.

Help define the structure of a system’sinterface.

http://en.wikipedia.org/wiki/System

http://en.wikipedia.org/wiki/System

http://en.wikipedia.org/wiki/Behavior

http://en.wikipedia.org/wiki/Behavior



Content Maps



A hierarchy of views in a web site or an

application.

Are used as a planning tool for interaction

design.



Example



CAMERA VIEW

CURRENT LECTURE

LIST LECTURE DETAILS

PREVIOUS

LECTURE LIST

NEXT DAY LECTURE

LIST



Tools Used



OmniGraffle

Visio



Low Fidelity Prototypes



Sketches



Things to Remember



Sketches are disposable.

Draw as many variations as possible.

Don’t go into too much detail.



Example



Defining theInteractions



Tap the Camera button

Tap the Scan button

Tap the lecture name

Tap the Back button

Start



Tools Used



Pen and paper

Balsamiq



Medium FidelityPrototypes



Wireframes



Visual guides that represent the skeletal

framework of a website or an application.

Usually lack typographic style, color, orgraphics.

The main focus lies in functionality, behavior,

and priority of content.

http://en.wikipedia.org/wiki/Website



http://en.wikipedia.org/wiki/Visual_guide

http://en.wikipedia.org/wiki/Visual_guide



Example




4:20PM

Fri SatThu

mTLU Done

IFI7038

21. sajandi käsitlusi inf...Teng Jaan

16:15 - 19:45

Nothing else today

4:20PM

mTLU DoneBack

IFI703821. sajandi käsitlusi informatsioonist ja täh...

Lorem ipsum

Nullam id dolor id nibh ultricies vehicula ut id elit. Duis

mollis, est non commodo luctus, nisi erat porttitor

ligula, eget lacinia odio sem nec elit. Maecenas

faucibus mollis interdum. Morbi leo risus, porta ac

consectetur ac, vestibulum at eros. Integer posuere

erat a ante venenatis dapibus posuere velit aliquet.Donec id elit non mi porta gravida at eget metus.

Lorem ipsum

Nullam id dolor id nibh ultricies vehicula ut id elit. Duis

mollis, est non commodo luctus, nisi erat porttitor

ligula, eget lacinia odio sem nec elit. Maecenas

faucibus mollis interdum. Morbi leo risus, porta ac

consectetur ac, vestibulum at eros. Integer posuere

erat a ante venenatis dapibus posuere velit aliquet.

Donec id elit non mi porta gravida at eget metus.





































4:20PM4:20PM 4:20PM







4:20PM

mTLU DoneBack

IFI703821. sajandi käsitlusi informatsioonist ja täh...

Lorem ipsum

Nullam id dolor id nibh ultricies vehicula ut id elit. Duismollis, est non commodo luctus, nisi erat porttitorligula, eget lacinia odio sem nec elit. Maecenasfaucibus mollis interdum. Morbi leo risus, porta acconsectetur ac, vestibulum at eros. Integer posuereerat a ante venenatis dapibus posuere velit aliquet.

Donec id elit non mi porta gravida at eget metus.

Lorem ipsum

Nullam id dolor id nibh ultricies vehicula ut id elit. Duismollis, est non commodo luctus, nisi erat porttitorligula, eget lacinia odio sem nec elit. Maecenasfaucibus mollis interdum. Morbi leo risus, porta acconsectetur ac, vestibulum at eros. Integer posuereerat a ante venenatis dapibus posuere velit aliquet.Donec id elit non mi porta gravida at eget metus.

4:20PM 4:20PM

Fri SatThu

mTLU Done

IFI703821. sajandi käsitlusi inf...Teng Jaan

16:15 - 19:45

Nothing else today

4:20PM

Fri SatThu

mTLU Done

IFI7038

21. sajandi käsitlusi inf...Teng Jaan

16:15 - 19:45


16:15 - 19:45


16:15 - 19:45

Nothing else today

4:20PM

SatFriThu

mTLU Done

No lectures today

StartTap the Camerabutton

Tap the lecturename

Tap the Backbutton

Tap the Done

button

Tap the Sat button

Tap the Fributton









































































Tools Used




OmniGraffle

Visio

Balsamiq






High FidelityPrototypes





Mockups




A pixel-perfect representation of a system’s

user interface.

Colors, graphics, UI elements and theirdimensions are set.

The foundation for developing a code-based

prototype.









Example




Start Tap the Camera

button

Tap the Previous tab

Tap the lecture

name

Tap the Back

button

Tap the Done

button

Tap the Sat button

Tap the Fri

button
















Tools Used




Photoshop

OmniGraffle

Visio






Code-Based Prototypes




Initial versions of the product built in code

using appropriate development tools and

technologies.

Do not need to be fully functional or have

the quality of a final product.








Tools Used




Text editor

Interactive development environment





Cost of Transitioning

Between InteractionDesign Stages






LowFidelity

Prototype

MediumFidelity

Prototype

HighFidelity

Prototype

Code-Based

Prototype

ProductionCode

Sketch Wireframe Mockup

€€€ €€€€

Alpha Beta

€€€€€ €€€€€€

Product

State

TransitionDiagram

State

TransitionDiagram

State

TransitionDiagram

State

TransitionDiagram

ContentMap

List of viewsInitial Concept

Concept

Map

€ €€ €€€€€€€









































Additional Uses of

State TransitionDiagrams






State transition diagrams can be used forusability evaluation.

A web site or an application can be analyzed

based on tasks a user can accomplish in thesystem or based on templates.

Comments about usability issues can be

overlaid on top of the diagram.










Example




Topics Covered




Introduction to interaction design

Concept maps in interaction design

State transition diagrams in interaction

design







[email protected]


mailto:[email protected]

mailto:[email protected]

diagrams in interaction design

Documents