Presentation_mobile devicesx - Interaction Design - home

darkfryingpanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

81 εμφανίσεις

MOBILE DEVICES

Amir & Anne

Definition of Mobile Device



Handheld device, handheld computer or simply handheld




Small, hand
-
held computing device




Has a display screen with touch input and/or a miniature keyboard




Weighting less than 2 pounds




For example:



personal digital assistant (PDA)



Smart phones;
iPhone
,
iPad
,

Display Size

3” x 4”

4” to 6” x 6” to 8”

6” to 13” x 10” to 14”

SmartPhone

Penetration

2009 VS 2011

Latest Update
-

February, 2012


Mobile devices shipments 2011
: Nokia remains
number one.



Smartphone shipments
: Samsung is top dog.



Smartphone operating systems

Android is nearly half
smartphones

shipped.



Top mobile Web countries
: South Korea and Japan
lead in mobile broadband penetration.

Mobile User Demographic

SmartPhone

Adoption by Race & Ethnicity

SmartPhone

Platforms



Apple's
iOS

(
iPhone
, iPod Touch, and
iPad
)



Google's Android OS



Blackberry's RIM Operating System



Nokia and Sonny Ericson’s
Symbian

platform



HP's

webOS

(successor of Palm OS after Palm’s acquisition by HP)



Windows® Phone 7 mobile operating system

SmartPhone

Platform Trend in U.S. 2010

SmartPhone

Market Share 2010

SmartPhone

Market Share in 2010

Mobile User Activity

SmartPhone

Users are Social Network Drivers

MOBILE

DESKTOP

Brief focused interactions.



Respond to a tweet or SMS message.

Continuous interaction on a single task.



Compose a memo.


More intrusive interruptions on device.



Receive call while reviewing mail on
smartphone
.


Less intrusive interruptions.



Receive call on phone while reviewing mail on
laptop.

Frequently changing environmental context.



Use phone during air travel (upon landing,
walking to gate, and so on).

Infrequently changing context.



Using a spreadsheet application at desk.


Tendency toward transactional interactions.



Checking weather forecast.


Supports non
-
transactional interactions.



Composing a report.


Mobile and Desktop Experience Differences

MOBILE

DESKTOP

Viewing dominates interacting.



Flipping through photos.


Balanced viewing and interacting.



Editing vacation photo albums.

Page loads are more disruptive.



Mobile web browsing experience.


Page loads are less disruptive.



Desktop web browsing experience.


Simplicity of experience.



Reading an e
-
book.


More tolerant of complexity.



Using a word processing application.


More social.



Relative importance of phone, texting, geo
-
social, sharing applications.


Less social



Relative importance of office productivity
applications.


Mobile and Desktop Experience Differences

Top Considerations for
SmartPhone

Purchasers

Mobile Design Heuristics











Jakob

Nielsen's Heuristics 1994

Nokia Developer Heuristic Evaluation

Nick Watt & Christine
Velen’s

What makes a
great mobile app

Savio

&
Braiterman’s

Design Sketch: The
Context of Mobile Interaction


1: Visibility of application status


The status message and information regarding the
application should be displayed to the user.


Look at the possible ways to improve the notification
mechanism from usability perceptive.



Example:
Shazam

provides

Feedback as it analyzes audio


2: Match between application & the real world


The app should sense the user’s environment and
speak the user's language, with words, phrases and
concepts familiar to the user.



Example: Google map’s geo sensitive results.


3: User control and freedom


Allow users to stay in control by being able to leave
an unwanted state (Emergency exit)


Provide users the option to undo an redo

4: Error prevention


Eliminate error
-
prone conditions as
much as possible


Check for errors and present users
with a confirmation option before
they commit to the action.


5: Consistency & convention


The system has to comply with the conventions like
style guide, etc and has to be consistent


Users should not have to wonder whether different
words, situations, or actions mean the same thing.



Example:
iOS

Human Interface Guidelines

6: Recognition rather than recall


The user should not have to remember information
from one part of the dialogue to another.


Minimize the user's memory load by making objects,
actions, and options visible.

7: Flexibility & efficiency


Allow users to tailor frequent actions.


Anticipate user needs.



Example: Maps app anticipates
users will need to define travelling
by foot, car or train and displays
options on map screen instantly

8: Aesthetic & minimalist design


The interface should be minimal and not verbose


Screens should not contain information which is
irrelevant or rarely needed



Example:
Instagram


filters are hidden when not

in use

9: Help users recognize & recover from errors


Error messages should be
expressed in plain language to
help users understand the
problem



Constructively suggest users with
a solution to solve the errors on
their own or by taking the help
of the documentation provided
with the software.

10: Help & documentation


Help should be focused on the
user’s task, list concrete steps to
be carried out, and not be too
long.


Use images and animations to
facilitate learning



Snapseed

help overlays are
always accessible from a
question mark icon.

Mobile Devices Strengths


Touch interfaces



Acceleration sensing



Orientation awareness



Simulations of physical behavior



Short periods of use



Focused activity



Spontaneous




To Create Applications, Development Teams Need:




Skills in diverse development technologies



Knowledge of capabilities of a vast, continually changing array of
devices



Knowledge of differing UI style conventions and standards



Multiple programming and cross porting efforts



Expensive
multidevice

and multiplatform test efforts



Responsive layouts



Automatically adjusts the layout to fit the size and
orientation of the device




Reformat multicolumn layouts to a single column
layout when the device screen size and resolution
become too small to support multiple columns

Two
-
Panel Selector

One
-
Window Drilldown

Redundancy of Controls


Redundant software buttons should be hidden when
a web application is viewed on Android and
Blackberry devices with physical buttons

Touch sensitive control size


Minimum recommendations for touch target size
vary between 7 mm and 10 mm square


36


52 pixels square for the
iPad

2


90


128 pixels square for the
iPhone

Retina display


The minimum space between targets should be
around 1
-
2 mm.


Navigation elements


Navigation should be kept to two or three levels.


When navigation exceeds two levels, make sure
there's a convenient way to return to "Home”


On
iOS

devices, use virtual home and back buttons


On Android devices, physical back and home buttons are
provided so avoid these soft keys


Gestural interaction to address size


Support smaller screens : Swipe with a finer instead
of dragging a scroll bar control


Multiple gestures can be available in the same view,
for different operations, without any visible control
features occupying space


Example: pinch open/close for zooming, swipe
right/left for panning, swipe up/down for scrolling,
and tap to close.

Gestural interactions cost


Users need to know what actions are available


Use
affordances and metaphors
that suggest how to
interact




Visual affordances consume

some real estate, but much less

than controls that serve as touch

targets


Mobile Accessibility






Vision



Hearing



Physical & Motor Skills


Users with Visual impairment


VoiceOver


The rotor


Siri



White on Black


Speak Selection


Audible, Visible, and Vibrating Alerts




Users with Hearing Disabilities


FaceTime
: Use sign language and lip reading


Mono Audio: Hear both channels in each one ear.


Visual Voicemail


TTY Support



Physical & Motor Skills


AssistiveTouch
: Enter Multi
-
Touch gestures


Intelligent Keyboard with Predictive Text Entry


Siri

References

Barkhuus
, L. &
Polichar
, E. V. (2011). Empowerment through
seamfulness
: smart phones in everyday life ,
Pers

Ubiquit

Comput
, 15, 629
-
639.

Butler, B. (2010). The Strategies for Multiband, Multimode Mobile Devices. Evaluation Engineering, 20
-
23.

Choney
, S. 72 Percent of Adults are Text
-
Messaging Now, Study Says.
Technolog

on
MSNBC.com
. Retrieved February 15, 2012, from
http://technolog.msnbc.msn.com/_news/2010/09/01/5023529
-
72
-
percent
-
of
-
adults
-
are
-
text
-
messaging
-
now
-
study
-
says

Dawson, A. Designing for Different Age Groups. Six Revisions. Retrieved February 15, 2012, from
http://sixrevisions.com/web_design/designing
-
for
-
different
-
age
-
groups/

Faiola
, A. &
Matei
, A. S. (2010). Enhancing Human

Computer Interaction Design Education: Teaching Affordance Design for Emerging Mobile Devices. I
nternational Journal of
Technology and Design Education, 20, 29

254.

Franko
, I. O. (2011). Smartphone Apps for
Orthopaedic

Surgeons. Clinical
Orthopaedics

and Related Research, 1
-
7.

Gahran
, Amy. Hispanics lead U.S. embrace of mobile technology. CNN. Retrieved February 15, 2012, from http://www.cnn.com/2011/TECH/
mob
ile/05/20/hispan

ic.mobile.engagement.gahran/index.html

Gahran
, Amy. How Americans Really Use Cell Phones. CNN. Retrieved February 15, 2012 from
http://www.cnn.com/2011/TECH/mobile/08/16/pew.cell.phone.report.gahran/index.html

Gong, J. &
Tarasewich
, P. (2004). Guidelines for handheld mobile device interface design. Proceedings of DSI 2004 Annual Meeting, 3751
-
3756.

Haefele
, C. (2011). One Block at a Time: Building a Mobile Site Step by Step. The Reference Librarian, 52, 117
-
127.

Hanson, C.W. (2011). Why Worry about Mobile?.

Library Technology Reports, 47(2),
5
-
10.

Kane, K. S.,
Jayant
, C.,
Wobbrock
, O. J. &
Ladner
, E. R. (2009). Freedom to Roam: A Study of Mobile Device Adoption and Accessibility for People with Visual and Motor
Disabilities.
Proceedings of the 11th international ACM SIGACCESS conference on Computers and accessibility, 115
-
122.


Lentz, J.(2011). User Interface Design for the Mobile Web.
IBM
. Retrieved February 15, 2012, from

http://www.ibm.com/developerworks/web/library/wa
-
interface/

Mobile Most Read.
Smart Phone Users are Social Network Drivers.
Online Marketing Trends. Retrieved February 15, 2012, from
http://www.onlinemarketing
-
trends.com/2011/03/smartphone
-
users
-
are
-
social
-
network.html


Mobile Most Read.
US Smartphone Adoption by Race and Ethnicity.
Online Marketing Trends. Retrieved February 15, 2012, from
http://www.onlinemarketing
-
trends.com/2011/03/us
-
smartphone
-
adoption
-
by
-
race
-
and.html



References

Mobile Most Read.
US Smartphone Users Prefer Android to Apple OS.
Online Marketing Trends. Retrieved February 15, 2012, from
http://www.onlinemarketing
-
trends.com/2011/01/us
-
smartphone
-
users
-
prefer
-
android
-
to.html


Nielsen,
Jakob

(1994). Usability Engineering. San Diego: Academic Press. pp. 115

148. ISBN 0
-
12
-
518406
-
9.

Nokia. (2009). Heuristic evaluation Retrieved Feb 20, 2012, from
http://www.developer.nokia.com/Community/Wiki/Heuristic_evaluation

Oulasvirta

A.,
Wahlstrom
, M. & Ericsson, A. K. (2011). What does it mean to be good at using a mobile device? An investigation of three levels of exp
eri
ence and skill.
International Journal of Human Computer Studies, 69(3)
,155
-
169.

Sanchez, A. C. &
Branaghan
, J. R. (2011). Turning to Learn: Screen Orientation and Reasoning with Small Devices.
Computer in Human Behavior, 27,
793
-
797.

Sarker
, S. & Wells, J.D. (2003). Understanding Mobile Handheld Device Use and Adoption.
Communications of the ACM, 46(12),
35
-
40.

Savio
, N., &
Braiterman
, J. (2007). Design Sketch: The Context of Mobile Interaction.
Mobile HCI 2007.

Smith, A. Smartphone Adoption and Usage.
Pew Internet.
Retrieved February 15, 2012, from
http://pewinternet.org/Reports/2011/Smartphones/Su
mmary.aspx

Soep
, E. (2011). Youth Media Goes Mobile.
National Civic Review, 100(3)
, 8
-
11.

Tarasewich
, P. (2003). Wireless devices for mobile commerce: user interface design and usability.

Mobile commerce: technology, theory, and applications,
26
-
50.


Watt, N., &
Velen
, C. (2010). What Makes A Great Mobile App Retrieved Feb 20, 2012, from
http://www.slideshare.net/nick_watt/what
-
makes
-
a
-
great
-
mobile
-
app