Introduction to Mobile Interactions

8/4/2019 Introduction to Mobile Interactions

1/63

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


2/63

Mobile InteractionsIljamorgun, Jaagup Kippar


3/63

Lets introduceourselves


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


5/63

Jaagup

B. - Environmental Studies M.Sc - Informatics Didactics Tallinn University - programming, web

applications, Java development


6/63

What is yourbackground?


7/63

What are we going tolearn?


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


9/63


10/63

i7110.wordpress.com


11/63

Some GeneralKnowledge


12/63

Interaction Design

Designing interactive products Dening the structure and behavior of interactive systems

Focusing on satisfying the needs of users


13/63

The Stages of Interaction Design


14/63


15/63

Developers

Illustrators

Stakeholders

Users

InteractionDesigners

Stakeholders

Users

Developers

Illustrators


Stakeholders

Users

Developers

Illustrators


Stakeholders

Users

Developers

Illustrators


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


Texts

Reports



16/63

Developers

Illustrators

Stakeholders

Users


Stakeholders

Users

Developers

Illustrators


Stakeholders

Users

Developers

Illustrators


Stakeholders

Users

Developers

Illustrators



ProductionStage


DevelopmentIteration Stage

Data collection SketchingCreating mockupsPrototyping

Writing code PromotingPositioningMarketing

Testing

Making changes

Testing

Making changes

Testing

Making changes

Building concepts

Actors

Stages

Activities


Graphical illustrations


Texts

Reports



17/63

Context


18/63

The best camera is the one you have with you when

something interesting happens.


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


20/63

Mobile devices havebecome pervasive


21/63

Most people carry one, have

them turned on almostcontinuously and use them indifferent contexts.


22/63

The Evolution of Smartphones


23/63


24/63


25/63

The Evolution of Tablets


26/63


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


28/63

Mobile Usage

Informational needs Geographical needs

Personal information management needs


29/63

Informational needs arefocused on the goal of obtaining

information about a topic.


30/63

Is the Arsenal game onTV tonight?


31/63

Geographical needs are focused on

the goal of nding an answer to aquestion. The expected answer isdependent on location in some form.


32/63

Nearest Pennies orDunnes Stores


33/63

Where do I getcoffee?


34/63

Direction from Belfastto Randaldstown


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.


36/63

What are my airlineloyalty pin codes?


37/63

The mobile phone and otherpersonal mobile deviceshave gained a new role


38/63

A gateway to data andapplications which arestored on the network


39/63

What to consider whendesigning mobile

applications?


40/63

Native, web applicationor both?


41/63

Native Applications

Provide a richer experience Integrate with various operating systemfeatures

Need to be approved in the App Store


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


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?


44/63

Following UI

Conventions

Human Interface Guidelines Don't break existing patterns

Design for touch interaction


45/63

The Project


46/63

Make a team and createa mobile application


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


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?


49/63

How to make conceptmaps to describe your

application?


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


51/63


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


53/63

iRadio


54/63

Application Concept


55/63

Find frequencies of favorite radio stations on

the go


56/63


57/63


58/63


59/63


60/63


61/63

Building a Concept Mapfor a Reminders App


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


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]

Date post:	07-Apr-2018
Category:	Documents
Upload:	ilya-shmorgun
View:	215 times
Download:	0 times

Introduction to Mobile Interactions

Documents