Embed Size (px)
Citation preview
• Smaller displays / Higher resolution
• Touch screen
• GPS / Location enabled
• Accelerometer
• ……..
“New” Features
2011 Thomas Mejtoft
• Surroundings are different and changing
• Reading on-the-go
• Less time for information
• Need the right information even faster
“New” User Behavior
2011 Thomas Mejtoft
• Lower precision than using a mouse
• Screen coverage
• Direct relationship between finger and cursor movement
• OnMouseOver and other JavaScript behavior for mouse won’t work
Touch Screens
2011 Thomas Mejtoft
• Do the user have an internet connection?
• Bandwidth?
Internet Connection
2011 Thomas Mejtoft
• Android has support for Flash applications
• Apple (IPhone, IPad) decided not to allow Flash content on their devices
Support for Adobe Flash
2011 Thomas Mejtoft
• iOS devices
– iPhone 3 (June, 2007)
• 3.5 inch
• 320 x 480 pixels (163 ppi)
– iPhone 4 (June, 2010)
• 3.5 inch
• 640 x 960 pixels (326 ppi)
– iPad/iPad 2 (April, 2010/March 2011)
• 9.7 inch
• 1024 x 768 pixels (132 ppi)
Resolution and Screen Size
2011 Thomas Mejtoft
• Android devices – HTC Hero (July, 2009)
• 3.2 inch • 320 x 480 pixels (180 ppi)
– HTC Desire Z (November, 2010) • 3.7 inch • 480 x 800 pixels (252 ppi)
– SonyEricsson Xperia Arc (April, 2011) • 4.2 inch • 480 x 854 pixles
– Samsung Galaxy Tab (September, 2010) • 7 inch • 1024 x 600 pixels (169 ppi)
– HTC Flyer (Q2, 2011) • 7 inch • 1024 x 600 pixels (169 ppi)
Resolution and Screen Size
2011 Thomas Mejtoft
• iOS
– Only used by Apple hardware (iPhone, iPod, Ipad …)
• Android
– Used by several manufacturers (Samsung, SonyEricsson, HTC …)
• Less different devices for iOS than Android
Resolution and Screen Size
2011 Thomas Mejtoft
• Click areas should be big enough for a finger
• Visual/audio response on click
• Simple navigation/Less choices
• Page width/Zoom level
• Full feature application or a “smaller” mobile version?
Usability for Mobile
2011 Thomas Mejtoft
• Controlling browser appearance and home screen icons of websites
Designing HTML for iPhone
2011 Thomas Mejtoft
<head>
...
<meta name="viewport" content="width=920" />
<link rel="apple-touch-icon" href="icons/iphone_icon.png"/>
<link rel="apple-touch-startup-image" href="images/ie_splash.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
...
</head>
• Controlling browser appearance and home screen icons of websites
Designing HTML for Android
2011 Thomas Mejtoft
<head>
...
<meta name="viewport" content="width=920" />
<link rel="apple-touch-icon-precomposed" href="icons/android_icon.png"/>
...
</head>
