4. 1894 - Gugliemo Marconi invents the radio. 1971 - James Fergursson discovers the âtwisted-nematicâ LCD. 1980 - Motorola presents the first portable radio - "DynaTACâ. 1876 - The birth of the telephone.
5. 1980 - Nintendo Game & Watch console. 2000 - Sharp releases the first camera phone - J-SH04. 2000 - Samsung develops the world's first TV phone - SCH-M220. 2001 - The debut of the ipod.
6. 2003 - The first mobile phone with a cursor - NEC FOMA N2051. 2007 - Apple introduceâs the iphone.
7. ⢠1996 - GSM (Global system for mobile communications) phones in 103 countries. ⢠2000 - 10 million i-mode users (Japan). ⢠2002 - 1 million mobile phone users worldwide. ⢠2008 - 3.0 billion mobile phone users worldwide (prediction for the end of this year). Staggering Numbers
8. ⢠More mobile phones than humans. ⢠Every second 4 babies are born on Earth and 32 mobile phones are sold.
10. â Designers face a proliferation of capabilities that make the early (mobile) web look like a playground.â Joe Shepter, âThe Pulse of Modern Designâ
11. ⢠About 2500 phone models. ⢠About 500 different operators. ⢠More than 25 browsers. ⢠About 14 different screen sizes.
12. ⢠Different markup languages. (WML, XHTML, ...) ⢠Different operative systems. (Symbian OS, Windows Mobile, Mac OS, ...) ⢠Plethora of user agents. (A user agent is a client application used with a particular network protocol, e.g browsers, email clients, mobile phone, ...) ⢠Varying code practices, urls, ...
13. Too much to handle by yourself! ⢠There is no write once, run everywhere. ⢠We need some help from handset detection. (With handset detection you can customise your website so it is optimised for a specific mobile phone)
15. ⢠Limited display. ⢠Users attention may be distracted. ⢠Increase need for clarity. (Screen is smaller, but things have to look bigger) ⢠Power management. (e.g. Too many animations might draw battery) ⢠Text input is a pain. (sms is the only mode widely accepted) ⢠Navigation model is different.
17. ⢠One item on the screen has focus. ⢠You use soft keys as an intermediate device to move the focus to the item you want and click it. Indirect Manipulation
18. ⢠You just tap/click anything directly. Direct Manipulation
20. ⢠Do Nothing. (SSR - Small screen rendering) ⢠Programmatically reformat. (strip images and styling) ⢠Handheld stylesheets. ⢠Mobile specific site/app.
21. Complex Simple Slower Faster Mobile Specific Site Stylesheets No Styling SSR Value Method Comparison Implementation Browser Experience
23. â ... treats the mobile environment and technology as a subset of the desktop environment.â Barbara Ballard ⢠Itâs a repurpose of existing content. Miniaturisation
24. â ... precisely targets mobile user needs, making (the) best possible use of technology.â Barbara Ballard ⢠Content and context specific. Mobilisation
26. ⢠What is contextually relevant. ⢠Mobilise content not only the layout.
27. â If the mobile site design only replicates an existing high web site the result will range from suboptimal to completely unusable.â Morten Hjerde
31. ⢠Different OS use different fonts. (e.g a 240x320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels, this equals a point size of 16, 21 and 25) ⢠In a phone web browser you can specify the font size. (bbc.co.uk uses arial point size 11, 12 and 13) http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html http://patterns.littlespringsdesign.com/index.php/Mobile_Typography Font Sizes
32. ⢠One handed interaction (most of the phones) ⢠Two handed interaction (e.g Sony psp) Physical Interaction
37. ⢠Test on as many devices as you can. ⢠Donât use emulators. Usability Testing
38. ⢠Context is important. (As realistic the experience as possible) ⢠Are standard usability techniques still valid for mobile? ⢠Paper prototyping. (really particullarly usefull for early evaluations) ⢠Make users test on their actual device. ⢠Capture screen, body, face. http://www.slideshare.net/barbaraballard/mobile-usability-testing/ http://www.littlespringsdesign.com/testing/
39. "Most usability testing regimes assume the context of a person facing a computer, the luxury of the person â s full attention, and a comfortable environment with minimal distractions. Information appliances, on the other hand, need to work in low-attention situations, or where the user â s attention needs to be fleetingly channeled through the appliance w hile walking, talking, or any of the multitude of other day-to-day activities that would be routinely classed as d istractions.â D avid Pereira
41. ⢠W3C proposed recommendations. (http://www.w3c.org/TR/mobile-bp/) ⢠W3C mobile web initiative. (http://www.w3c.org/Mobile/) ⢠Input by mobile developers, operators, manufacturers. ⢠Mobile design resources. (http://patterns.littlespringsdesign.com/index.php/Main_Page)
43. ⢠Touch is the new click. ⢠Gestural Interfaces. (http://www.unwiredview.com/2008/01/08/first-glimpse-inside-nokia-s60-touch-going-beyond-multi-touch/) ( http://www.designinggesturalinterfaces.com/) ⢠Sensors everywhere. (Adam Greenfield, âEveryware: The dawning age of ubiquitous computingâ ) ⢠Browsing is out, experiences are in. ⢠â Icons are deadâ, content is the interface.
44. "When it comes to design for mobile devices, it â tempting to take an ostrich-like approach: Hide your head in the sand and behave as though nothing is happening. Unfortunately, in the not-too-distant future, more people will be using mobile devices to access the Net; and no interactive designer will be able to ignore them." Joe Shepter, "The Pulse of Modern Design" (August 2005)
48. ⢠Matt Jones and Gary Marsden, "Mobile Interaction Designâ ⢠Cameron Moll, "Mobile Web Design" ⢠Barbara Ballard, "Designing the Mobile User Experience" ⢠Christian Lindholm and Turkka Keinonen, "Mobile Usability: How Nokia Changed the Face of the Mobile Phoneâ ⢠Studio 7.5, "Designing for Small Screens" Books