diagrams in interaction design
Post on 06-Apr-2018
215 Views
Preview:
TRANSCRIPT
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 2/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 3/97
Diagrams in Interaction
DesignIlya Shmorgun
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 4/97
My Background
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 5/97
PhD Student - Information Society
Technologies
Usability Specialist - Estonian Information
System’s Authority
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 6/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 7/97
How do you design?
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 8/97
Topics
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 9/97
Introduction to interaction design
Concept maps in interaction design
State transition diagrams in interaction
design
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 10/97
Interaction Design
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 11/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 12/97
Stages of InteractionDesign
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 13/97
Research Design Development Baking Promotion
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 14/97
Deliverables
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 15/97
Initial Concept
Research
Sketch Wireframe MockupContent Map
Design
Alpha Beta Product
Development
Baking - Promotion
Product Marketing Materials
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 16/97
Concept Mapping
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 17/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 18/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 19/97
What is a concept map?
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 20/97
A collection of boxes and arrows.
A diagram showing relationships betweenconcepts.
Represents relationships between ideas.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 21/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 22/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 23/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 24/97
Drawbacks
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 25/97
Concept maps do not easily scale.
A lot of nodes make a concept map difficult
to read.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 26/97
Supporting InteractionDesign
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 27/97
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
UMLFlowchartsState transition diagramsDecomposition diagrams
Texts
ReportsStakeholders
Users
Developers
Illustrators
Interaction
Designers
Baking Stage
Testing
Making changes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 28/97
Concept maps can be used to support the
interaction design process through various
stages.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 29/97
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
UMLFlowchartsState transition diagramsDecomposition diagrams
Graphical illustrations
UMLFlowchartsState transition diagramsDecomposition diagrams
Texts
ReportsStakeholders
Users
Developers
Illustrators
Interaction
Designers
Baking Stage
Testing
Making changes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 30/97
A Practical Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 31/97
mTLU
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 32/97
A mobile application for integrating various
information sources of Tallinn University andmaking them accessible through a mobile
interface.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 33/97
Application Concept
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 34/97
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 35/97
Defining the Personas
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 36/97
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 37/97
ExpectedFunctionalities
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 38/97
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 39/97
User Expectations
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 40/97
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 41/97
Steps of BuildingConcept Maps
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 42/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 43/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 44/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 45/97
CmapTools
OmniGraffle
Visio
Pen and paper
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 46/97
State TransitionDiagrams
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 47/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 48/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 49/97
Content Maps
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 50/97
A hierarchy of views in a web site or an
application.
Are used as a planning tool for interaction
design.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 51/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 52/97
CAMERA VIEW
CURRENT LECTURE
LIST LECTURE DETAILS
PREVIOUS
LECTURE LIST
NEXT DAY LECTURE
LIST
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 53/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 54/97
OmniGraffle
Visio
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 55/97
Low Fidelity Prototypes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 56/97
Sketches
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 57/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 58/97
Things to Remember
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 59/97
Sketches are disposable.
Draw as many variations as possible.
Don’t go into too much detail.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 60/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 61/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 62/97
Defining theInteractions
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 63/97
Tap the Camera button
Tap the Scan button
Tap the lecture name
Tap the Back button
Start
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 64/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 65/97
Pen and paper
Balsamiq
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 66/97
Medium FidelityPrototypes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 67/97
Wireframes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 68/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 69/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 70/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 71/97
Defining theInteractions
4:20PM4:20PM 4:20PM
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 72/97
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
IFI703821. sajandi käsitlusi inf...Teng Jaan
16:15 - 19:45
IFI703821. sajandi käsitlusi inf...Teng Jaan
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 73/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 74/97
OmniGraffle
Visio
Balsamiq
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 75/97
High FidelityPrototypes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 76/97
Mockups
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 77/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 78/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 79/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 80/97
Defining theInteractions
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 81/97
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
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 82/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 83/97
Photoshop
OmniGraffle
Visio
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 84/97
Code-Based Prototypes
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 85/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 86/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 87/97
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 88/97
Tools Used
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 89/97
Text editor
Interactive development environment
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 90/97
Cost of Transitioning
Between InteractionDesign Stages
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 91/97
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
€ €€ €€€€€€€
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 92/97
Additional Uses of
State TransitionDiagrams
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 93/97
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.
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 94/97
Example
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 95/97
Topics Covered
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 96/97
Introduction to interaction design
Concept maps in interaction design
State transition diagrams in interaction
design
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 97/97
ilja.shmorgun@tlu.ee
top related