Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation

likooli logo

PANTONE 1807 PANTONE Black

ess

Diagrams in Interaction Design

Ilya Shmorgun

My Background

PhD Student - Information Society Technologies Usability Specialist - Estonian Information Systems 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 needs of users and trying to design tools for users to achieve those goals. Taking into account a user's environment and technological limitations. Dening the structure and behavior of interactive systems.

Stages of Interaction Design

Research

Design

Development

Baking

Promotion

Deliverables

Research

Initial Concept

Design

Content Map

Sketch

Wireframe

Mockup

Development

Alpha

Beta

Product

Baking - Promotion

Product

Marketing Materials

Concept Mapping

Created in 1970s at Cornell University. Support for meaningful learning - a student is able 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 between concepts. Represents relationships between ideas.

Successfully applied in education, government and 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 difcult to read.

Supporting Interaction Design

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Baking Stage

Promotion Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Creating mockups Prototyping Testing Making changes

Writing code

Promoting Positioning Marketing Testing Making changes

Testing Making changes

Concept maps can be used to support the interaction design process through various stages.

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Concept Maps

Developers

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Baking Stage

Promotion Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Creating mockups Prototyping Testing Making changes

Writing code

Promoting Positioning Marketing Testing Making changes

Testing Making changes

A Practical Example

mTLU

A mobile application for integrating various information sources of Tallinn University and making them accessible through a mobile interface.

Application Concept

MOBILE TLU

Is a

Initially for the

NATIVE APPLICATION

Which allows to scan a

With a backend IPHONE

QR-CODE

And see the Which is located near a WEB-SERVICE Which integrates And a ASIO Of an WEB INTERFACE As well as IS For additional AUDITORIUM COURSE DESCRIPTIONS A LIST OF LECTURES For For the Such as SPECIFIC LECTURES WINDOWS PHONE NEXT AND PREVIOUS DAY For the specic ROOM NUMBER LECTURE SCHEDULE

PLATFORMS

ANDROID

SYMBIAN

Dening the Personas

UNIVERSITY

Consists of NON-ACADEMIC ADMINISTRATION

STUDENTS

HEAD OF LEARNING

Includes OTHER

ACADEMIC STAFF

TEACHING ASSISTANT IT-MANAGER SYSADMIN Includes

HEAD OF RESEARCH

RESEARCHER

HEAD OF THE INSTITUTE

TEACHING STAFF

Includes

LECTOR

HEAD OF CURRICULUM PROFESSOR

Expected Functionalities

DATE MOBILE TLU To be Has A EXPECTED FUNCTIONALITIES REGISTERED

CHOOSING Such as

PREPARATION

Of the SEMESTER CURRICULLUM

REGISTRATION COMPOSING VIEWING A LIST Of PERSONAL TIMETABLE Which can be Which SYNCHRONIZED CURRICULA For SHOWS With the Of COMPLETION CALENDAR The ROOM DESCRIPTION For VALUE Of MODULES Of SUBJECTS Which can be added to CARDS Which depend on EXAMS The POINTS Can be added to the Which are For the MISSING Which lets check the

For

TIME Where the

ATTENDING SEARCHING

Of the LECTURE Is The

OCCURING

User Expectations

MOBILE TLU Is Is

SIMPLE LOGICAL

Can provide

LIGHT

a WAY

ACCESS

To

IS

To

With On SYNCHRONIZE VIEW The SECURE AUTHENTICATION

EASILY SEARCH

CHECK

For necessary For

CURRICULA

The

DATA RESOURCES With the

INFORMATION REMINDERS

SUBJECTS

CALENDAR Of the

Of upcoming

EXAMS

DEVICE

Steps of Building Concept 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 these lines.

Tools Used

CmapTools OmniGrafe Visio Pen and paper

State Transition Diagrams

Give an abstract description of the behavior of a system. Behavior is analyzed and represented in a series of events that could occur in one or more possible states. Help dene the structure of a systems interface.

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

OmniGrafe Visio

Low Fidelity Prototypes

Sketches

Rough or unnished drawings. Are often created to assist in making a more nished picture.

Things to Remember

Sketches are disposable. Draw as many variations as possible. Dont go into too much detail.

Example

Dening the Interactions

Tap the Back button

Tap the Camera button Start

Tap the lecture name

Tap the Scan button

Tools Used

Pen and paper Balsamiq

Medium Fidelity Prototypes

Wireframes

Visual guides that represent the skeletal framework of a website or an application. Usually lack typographic style, color, or graphics. The main focus lies in functionality, behavior, and priority of content.

Example

4:20PM

4:20PM Done Back

mTLU

mTLU

Done

IFI7038 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

16:15 - 19:45

21. sajandi ksitlusi informatsioonist ja th... 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.

Nothing else today

Thu

Fri

Sat

Dening the Interactions

4:20PM

4:20PM

4:20PM Done Back

mTLU

mTLU

Done

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Tap the Back button

IFI7038
21. sajandi ksitlusi informatsioonist ja th... 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.

Nothing else today

Tap the lecture name

Start

Tap the Camera button

Thu

Fri

Sat

Tap the Done button

4:20PM 4:20PM Done

mTLU

mTLU

Done

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Tap the Fri button

No lectures today

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Nothing else today Thu Fri Sat Thu Fri Sat

Tap the Sat button

Tools Used

OmniGrafe Visio Balsamiq

High Fidelity Prototypes

Mockups

A pixel-perfect representation of a systems user interface. Colors, graphics, UI elements and their dimensions are set. The foundation for developing a code-based prototype.

Example

Dening the Interactions

Tap the Back button

Tap the lecture name Start Tap the Camera button

Tap the Previous tab Tap the Done button Tap the Fri button

Tap the Sat button

Tools Used

Photoshop OmniGrafe 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 nal product.

Example

Tools Used

Text editor Interactive development environment

Cost of Transitioning Between Interaction Design Stages

Initial Concept

List of views

Sketch

Wireframe

Mockup

Alpha

Beta

Product

Concept Map

State Transition Diagram

State Transition Diagram

State Transition Diagram

State Transition Diagram

Content Map

Low Fidelity Prototype

Medium Fidelity Prototype

High Fidelity Prototype

CodeBased Prototype

Production Code

Additional Uses of State Transition Diagrams

State transition diagrams can be used for usability evaluation. A web site or an application can be analyzed based on tasks a user can accomplish in the system 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

ilja.shmorgun@tlu.ee