Mobile Interactions
-
Upload
david-lamas -
Category
Education
-
view
748 -
download
0
description
Transcript of Mobile Interactions
![Page 1: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/1.jpg)
Multimedia Information Systems
Mobile interactions
![Page 2: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/2.jpg)
David Lamas, ULP, 2010
Part 1Context
Click icon to add picture
![Page 3: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/3.jpg)
David Lamas, ULP, 2010
Common sense
The best camera is the one you have with you when something interesting happens
![Page 4: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/4.jpg)
David Lamas, ULP, 2010
Jakob Nielsen
The best computer is the one you have with you when you want something done. This will often be your phone or tablet
![Page 5: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/5.jpg)
David Lamas, ULP, 2010
Mobile devices
Mobile devices have become pervasive
Most people carry one, have them turned on almost continuously and use them in different contexts
![Page 6: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/6.jpg)
David Lamas, ULP, 2010
Mobile devices
![Page 7: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/7.jpg)
David Lamas, ULP, 2010
Mobile devices
![Page 8: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/8.jpg)
David Lamas, ULP, 2010
Mobile devices
![Page 9: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/9.jpg)
David Lamas, ULP, 2010
Mobile devices
The design is dominated by the screen
Multi-touch based interactions
The device becomes the content
Always on, always connected
![Page 10: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/10.jpg)
David Lamas, ULP, 2010
Mobile devices
Attend to…Informational needs
Geographical needs
Personal information management needs
![Page 11: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/11.jpg)
David Lamas, ULP, 2010
Mobile devices
Informational needs are focused on the goal of obtaining information about a topic“Is the Arsenal game on TV tonight?”
![Page 12: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/12.jpg)
David Lamas, ULP, 2010
Mobile devices
Geographical needs are focused on the goal of finding an answer to a question
The expected answer is dependent on location in some form“Nearest Pennies or Dunnes Stores”
“Where do I get coffee?”
“Direction from Belfast to Randaldstown”
![Page 13: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/13.jpg)
David Lamas, ULP, 2010
Mobile devices
Personal information management needs are focused on finding out something private relating to the individual
Personal information management needs encompass personal items, friend requests, scheduling tasks and to-do list items“What are my airline loyalty pin codes?”
![Page 14: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/14.jpg)
David Lamas, ULP, 2010
Mobile devices
The mobile phone and other personal mobile devices have gained a new role
A gateway to data and applications which are stored on the network
![Page 15: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/15.jpg)
David Lamas, ULP, 2010
Part 2Interaction design
![Page 16: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/16.jpg)
David Lamas, ULP, 2010
Interaction design
![Page 17: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/17.jpg)
David Lamas, ULP, 2010
Interaction design
![Page 18: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/18.jpg)
David Lamas, ULP, 2010
Interaction design
![Page 19: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/19.jpg)
David Lamas, ULP, 2010
Interaction design
So, what to consider when designing mobile applications?
![Page 20: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/20.jpg)
David Lamas, ULP, 2010
Interaction design
Native, web application or both?Native applications
Provide a richer experience
Integrate with various operating system features
Need to be approved in the App Store
Web applicationsCan be used on a multitude of platforms
Don’t need to be approved in the App Store
Functionality is limited, because they only work in the browser
![Page 21: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/21.jpg)
David Lamas, ULP, 2010
Interaction design
What features of the mobile device does your application need to use?
Does it need to work offline?
How are people going to use your app?
How much will it cost?
Do you need to support various screen sizes?
![Page 22: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/22.jpg)
David Lamas, ULP, 2010
Interaction design
In any case…Following UI conventions
Human interface guidelines
Don't break existing patterns
Design for touch interaction
![Page 23: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/23.jpg)
David Lamas, ULP, 2010
Part 3Developing a concept
Click icon to add picture
![Page 24: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/24.jpg)
David Lamas, ULP, 2010
Developing a concept
The application conceptWhat does your application do?
Who is your target audience?
How will people use your application?
How much will the application cost?
![Page 25: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/25.jpg)
David Lamas, ULP, 2010
Developing a concept
And how do we describe a concept?Using a concept map!
But, what is a concept map?A diagram showing relationships between concepts
Represents relationships between ideas
Makes it easier to communicate ideas in teams
Surfaces strengths and weaknesses of ideas
Basically, just boxes and arrows
![Page 26: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/26.jpg)
David Lamas, ULP, 2010
Developing a concept
![Page 27: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/27.jpg)
David Lamas, ULP, 2010
Developing a concept
And how do we build a concept map?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 sub-concepts to place under each general concept
Connect the concepts by arrows
Label the lines with or a few linking words
Look for crosslinks between concepts in different sections of the map and label these connections
![Page 28: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/28.jpg)
David Lamas, ULP, 2010
Part 4iRadio,
Click icon to add picture
![Page 29: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/29.jpg)
David Lamas, ULP, 2010
iRadio
An application to find frequencies of favorite radio stations on the go
![Page 30: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/30.jpg)
David Lamas, ULP, 2010
![Page 31: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/31.jpg)
David Lamas, ULP, 2010
![Page 32: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/32.jpg)
David Lamas, ULP, 2010
![Page 33: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/33.jpg)
David Lamas, ULP, 2010
![Page 34: Mobile Interactions](https://reader033.fdocuments.net/reader033/viewer/2022061117/5457c000af7959795d8b5100/html5/thumbnails/34.jpg)
David Lamas, ULP, 2010