8/4/2019 Introduction to Mobile Interactions
1/63
Compiled with the assistance of the Tiger University Program of the EstonianInformation Technology Foundation
8/4/2019 Introduction to Mobile Interactions
2/63
Mobile InteractionsIljamorgun, Jaagup Kippar
8/4/2019 Introduction to Mobile Interactions
3/63
Lets introduceourselves
8/4/2019 Introduction to Mobile Interactions
4/63
Ilja
B.Sc - Computer Science
M.Sc - Interactive Media and KnowledgeEnvironments
PhD - Information Society Technologies
Estonian Information Systems Authority(Riigi Infossteemi Amet) - UsabilitySpecialist
8/4/2019 Introduction to Mobile Interactions
5/63
Jaagup
B. - Environmental Studies M.Sc - Informatics Didactics Tallinn University - programming, web
applications, Java development
8/4/2019 Introduction to Mobile Interactions
6/63
What is yourbackground?
8/4/2019 Introduction to Mobile Interactions
7/63
What are we going tolearn?
8/4/2019 Introduction to Mobile Interactions
8/63
Course Topics
An overview of the eld of mobiletechnologies
How to establish an application concept How to draw sketches
How to create mockups How to make interactive prototypes
8/4/2019 Introduction to Mobile Interactions
9/63
8/4/2019 Introduction to Mobile Interactions
10/63
i7110.wordpress.com
8/4/2019 Introduction to Mobile Interactions
11/63
Some GeneralKnowledge
8/4/2019 Introduction to Mobile Interactions
12/63
Interaction Design
Designing interactive products Dening the structure and behavior of interactive systems
Focusing on satisfying the needs of users
8/4/2019 Introduction to Mobile Interactions
13/63
The Stages of Interaction Design
8/4/2019 Introduction to Mobile Interactions
14/63
8/4/2019 Introduction to Mobile Interactions
15/63
Developers
Illustrators
Stakeholders
Users
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
ResearchIteration Stage
ProductionStage
DesignIteration Stage
DevelopmentIteration Stage
Data collection SketchingCreating mockupsPrototyping
Writing code PromotingPositioningMarketing
Testing
Making changes
Testing
Making changes
Testing
Making changes
Building concepts
Actors
Stages
Activities
UMLFlowchartsState transition diagramsDecomposition diagrams
Graphical illustrations
UMLFlowchartsState transition diagramsDecomposition diagrams
Texts
Reports
ResearchIteration Stage
8/4/2019 Introduction to Mobile Interactions
16/63
Developers
Illustrators
Stakeholders
Users
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
Stakeholders
Users
Developers
Illustrators
InteractionDesigners
ResearchIteration Stage
ProductionStage
DesignIteration Stage
DevelopmentIteration Stage
Data collection SketchingCreating mockupsPrototyping
Writing code PromotingPositioningMarketing
Testing
Making changes
Testing
Making changes
Testing
Making changes
Building concepts
Actors
Stages
Activities
UMLFlowchartsState transition diagramsDecomposition diagrams
Graphical illustrations
UMLFlowchartsState transition diagramsDecomposition diagrams
Texts
Reports
DesignIteration Stage
8/4/2019 Introduction to Mobile Interactions
17/63
Context
8/4/2019 Introduction to Mobile Interactions
18/63
The best camera is the one you have with you when
something interesting happens.
8/4/2019 Introduction to Mobile Interactions
19/63
The best computer is the one you
have with you when you want something done. This will often be your phone or tablet.
-Jakob Nielsen
8/4/2019 Introduction to Mobile Interactions
20/63
Mobile devices havebecome pervasive
8/4/2019 Introduction to Mobile Interactions
21/63
Most people carry one, have
them turned on almostcontinuously and use them indifferent contexts.
8/4/2019 Introduction to Mobile Interactions
22/63
The Evolution of Smartphones
8/4/2019 Introduction to Mobile Interactions
23/63
8/4/2019 Introduction to Mobile Interactions
24/63
8/4/2019 Introduction to Mobile Interactions
25/63
The Evolution of Tablets
8/4/2019 Introduction to Mobile Interactions
26/63
8/4/2019 Introduction to Mobile Interactions
27/63
The Evolution of
Mobile Devices
The design is dominated by the screen
Multi-touch based interactions The device becomes the content Always on, always connected
8/4/2019 Introduction to Mobile Interactions
28/63
Mobile Usage
Informational needs Geographical needs
Personal information management needs
8/4/2019 Introduction to Mobile Interactions
29/63
Informational needs arefocused on the goal of obtaining
information about a topic.
8/4/2019 Introduction to Mobile Interactions
30/63
Is the Arsenal game onTV tonight?
8/4/2019 Introduction to Mobile Interactions
31/63
Geographical needs are focused on
the goal of nding an answer to aquestion. The expected answer isdependent on location in some form.
8/4/2019 Introduction to Mobile Interactions
32/63
Nearest Pennies orDunnes Stores
8/4/2019 Introduction to Mobile Interactions
33/63
Where do I getcoffee?
8/4/2019 Introduction to Mobile Interactions
34/63
Direction from Belfastto Randaldstown
8/4/2019 Introduction to Mobile Interactions
35/63
Personal information management (PIM)needs are focused on nding out somethingprivate relating to the individual. PIM needsencompass personal items, friend requests,
scheduling tasks and to-do list items.
8/4/2019 Introduction to Mobile Interactions
36/63
What are my airlineloyalty pin codes?
8/4/2019 Introduction to Mobile Interactions
37/63
The mobile phone and otherpersonal mobile deviceshave gained a new role
8/4/2019 Introduction to Mobile Interactions
38/63
A gateway to data andapplications which arestored on the network
8/4/2019 Introduction to Mobile Interactions
39/63
What to consider whendesigning mobile
applications?
8/4/2019 Introduction to Mobile Interactions
40/63
Native, web applicationor both?
8/4/2019 Introduction to Mobile Interactions
41/63
Native Applications
Provide a richer experience Integrate with various operating systemfeatures
Need to be approved in the App Store
8/4/2019 Introduction to Mobile Interactions
42/63
Web Applications
Can be used on a multitude of platforms Dont need to be approved in the App
Store
Functionality is limited, because they onlywork in the browser
8/4/2019 Introduction to Mobile Interactions
43/63
Questions What features of the mobile device does
your application need to use?
Does it need to work ofine? How are people going to use your app?
How much will it cost?
Do you need to support various screensizes?
8/4/2019 Introduction to Mobile Interactions
44/63
Following UI
Conventions
Human Interface Guidelines Don't break existing patterns
Design for touch interaction
8/4/2019 Introduction to Mobile Interactions
45/63
The Project
8/4/2019 Introduction to Mobile Interactions
46/63
Make a team and createa mobile application
8/4/2019 Introduction to Mobile Interactions
47/63
Team Project1. Choose a platform
2. Choose a technology
3. Come up with an application concept
4. Create sketches
5. Create mockups6. Create an interactive prototype
8/4/2019 Introduction to Mobile Interactions
48/63
The Application
Conce t
What does your application do?
Who is your target audience? How will people use your application? How much will the application cost?
8/4/2019 Introduction to Mobile Interactions
49/63
How to make conceptmaps to describe your
application?
8/4/2019 Introduction to Mobile Interactions
50/63
What is a Concept
Ma ? Boxes and arrows A diagram showing relationships between
concepts
Represents relationships between ideas
Makes it easier to communicate ideas inteams
Surfaces strengths and weaknesses of ideas
8/4/2019 Introduction to Mobile Interactions
51/63
8/4/2019 Introduction to Mobile Interactions
52/63
How to Build Concept
Ma s?1. Identify a focus question2. Identify 10 to 20 concepts that are related to the focus question
3. Begin to build your map by placing the most inclusive, mostgeneral concept(s) at the top
4. Select two, three, or four subconcepts to place under eachgeneral concept
5. Connect the concepts by lines
6. Label the lines with or a few linking words
7. Look for crosslinks between concepts in different sections of the map and label these lines
8/4/2019 Introduction to Mobile Interactions
53/63
iRadio
8/4/2019 Introduction to Mobile Interactions
54/63
Application Concept
8/4/2019 Introduction to Mobile Interactions
55/63
Find frequencies of favorite radio stations on
the go
8/4/2019 Introduction to Mobile Interactions
56/63
8/4/2019 Introduction to Mobile Interactions
57/63
8/4/2019 Introduction to Mobile Interactions
58/63
8/4/2019 Introduction to Mobile Interactions
59/63
8/4/2019 Introduction to Mobile Interactions
60/63
8/4/2019 Introduction to Mobile Interactions
61/63
Building a Concept Mapfor a Reminders App
8/4/2019 Introduction to Mobile Interactions
62/63
The Reminders App1. Choose a tool
2. Come up with relevant concepts
3. Create a hierarchy
4. Link concepts together
5. Look for cross-links6. Look for missing concepts
8/4/2019 Introduction to Mobile Interactions
63/63
For next time1. Make a team of 3 people
2. Make a blog for your team project
3. Send the link to the blog's RSS feed [email protected]
4. Make concept maps to des cribe yourapplication
5. Present your concept maps to the class
mailto:[email protected]:[email protected]:[email protected]