Download - Diagrams in Interaction Design
![Page 1: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/1.jpg)
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
![Page 2: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/2.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 2/97
![Page 3: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/3.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 3/97
Diagrams in Interaction
DesignIlya Shmorgun
![Page 4: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/4.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 4/97
My Background
![Page 5: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/5.jpg)
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
![Page 6: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/6.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 6/97
![Page 7: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/7.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 7/97
How do you design?
![Page 8: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/8.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 8/97
Topics
![Page 9: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/9.jpg)
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
![Page 10: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/10.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 10/97
Interaction Design
![Page 11: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/11.jpg)
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.
![Page 12: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/12.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 12/97
Stages of InteractionDesign
![Page 13: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/13.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 13/97
Research Design Development Baking Promotion
![Page 14: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/14.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 14/97
Deliverables
![Page 15: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/15.jpg)
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
![Page 16: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/16.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 16/97
Concept Mapping
![Page 17: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/17.jpg)
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.
![Page 18: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/18.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 18/97
![Page 19: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/19.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 19/97
What is a concept map?
![Page 20: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/20.jpg)
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.
![Page 21: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/21.jpg)
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.
![Page 22: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/22.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 22/97
Example
![Page 23: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/23.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 23/97
![Page 24: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/24.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 24/97
Drawbacks
![Page 25: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/25.jpg)
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.
![Page 26: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/26.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 26/97
Supporting InteractionDesign
![Page 27: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/27.jpg)
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
![Page 28: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/28.jpg)
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.
![Page 29: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/29.jpg)
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
![Page 30: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/30.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 30/97
A Practical Example
![Page 31: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/31.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 31/97
mTLU
![Page 32: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/32.jpg)
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.
![Page 33: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/33.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 33/97
Application Concept
![Page 34: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/34.jpg)
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
![Page 35: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/35.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 35/97
Defining the Personas
![Page 36: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/36.jpg)
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
![Page 37: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/37.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 37/97
ExpectedFunctionalities
![Page 38: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/38.jpg)
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
![Page 39: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/39.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 39/97
User Expectations
![Page 40: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/40.jpg)
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
![Page 41: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/41.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 41/97
Steps of BuildingConcept Maps
![Page 42: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/42.jpg)
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.
![Page 43: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/43.jpg)
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.
![Page 44: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/44.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 44/97
Tools Used
![Page 45: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/45.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 45/97
CmapTools
OmniGraffle
Visio
Pen and paper
![Page 46: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/46.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 46/97
State TransitionDiagrams
![Page 47: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/47.jpg)
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.
![Page 48: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/48.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 48/97
![Page 49: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/49.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 49/97
Content Maps
![Page 50: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/50.jpg)
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.
![Page 51: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/51.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 51/97
Example
![Page 52: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/52.jpg)
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
![Page 53: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/53.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 53/97
Tools Used
![Page 54: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/54.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 54/97
OmniGraffle
Visio
![Page 55: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/55.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 55/97
Low Fidelity Prototypes
![Page 56: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/56.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 56/97
Sketches
![Page 57: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/57.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 57/97
![Page 58: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/58.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 58/97
Things to Remember
![Page 59: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/59.jpg)
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.
![Page 60: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/60.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 60/97
Example
![Page 61: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/61.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 61/97
![Page 62: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/62.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 62/97
Defining theInteractions
![Page 63: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/63.jpg)
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
![Page 64: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/64.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 64/97
Tools Used
![Page 65: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/65.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 65/97
Pen and paper
Balsamiq
![Page 66: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/66.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 66/97
Medium FidelityPrototypes
![Page 67: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/67.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 67/97
Wireframes
![Page 68: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/68.jpg)
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.
![Page 69: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/69.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 69/97
Example
![Page 70: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/70.jpg)
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.
![Page 71: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/71.jpg)
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
![Page 72: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/72.jpg)
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
![Page 73: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/73.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 73/97
Tools Used
![Page 74: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/74.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 74/97
OmniGraffle
Visio
Balsamiq
![Page 75: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/75.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 75/97
High FidelityPrototypes
![Page 76: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/76.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 76/97
Mockups
![Page 77: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/77.jpg)
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.
![Page 78: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/78.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 78/97
Example
![Page 79: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/79.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 79/97
![Page 80: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/80.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 80/97
Defining theInteractions
![Page 81: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/81.jpg)
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
![Page 82: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/82.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 82/97
Tools Used
![Page 83: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/83.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 83/97
Photoshop
OmniGraffle
Visio
![Page 84: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/84.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 84/97
Code-Based Prototypes
![Page 85: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/85.jpg)
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.
![Page 86: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/86.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 86/97
![Page 87: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/87.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 87/97
![Page 88: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/88.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 88/97
Tools Used
![Page 89: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/89.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 89/97
Text editor
Interactive development environment
![Page 90: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/90.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 90/97
Cost of Transitioning
Between InteractionDesign Stages
![Page 91: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/91.jpg)
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
€ €€ €€€€€€€
![Page 92: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/92.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 92/97
Additional Uses of
State TransitionDiagrams
![Page 93: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/93.jpg)
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.
![Page 94: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/94.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 94/97
Example
![Page 95: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/95.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 95/97
Topics Covered
![Page 96: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/96.jpg)
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
![Page 97: Diagrams in Interaction Design](https://reader031.vdocuments.site/reader031/viewer/2022021220/577d20b51a28ab4e1e9393aa/html5/thumbnails/97.jpg)
8/2/2019 Diagrams in Interaction Design
http://slidepdf.com/reader/full/diagrams-in-interaction-design 97/97