Mobile and Emerging Devices Differences, limitations and effects on design Pen Lister MSc PGCert TLHE, 2009 From work by Gary Budgen (MSc) & Dr Kay Dudman, 2008

Categories of device Communications Devices: Information Management Tools PDAs (from about 1992) Psion Organiser (80s onwards) Ipod Touch

Phones PDAs Functions began to merge…

Phones have gained information storage functions PDAs began to communicate Now we have full wifi on phones, Datawind Ubisurfers, mini netbooks free with mobile contracts… What is happening now?

Are mobile devices evolving towards a one device that does it all? OR Is there a conflict between the information and communication functions? OR What is happening …

To paraphrase Donald Norman… A Swiss Army Knife has lots of functions. It’s great if you’re in the wilderness but at home you use specific tools because they are much better at doing the job. The manufacturers assume that we will all want one device that does it all. But are single use devices all obsolete? http://www.millmerran.qld.gov.au/images/News_Events/Mobile%20Phones_CMYK.jpg One size fits all?

http://www.makeuseof.com/wp-content/uploads/2007/10/ipod.jpg http://www.flickr.com/photos/psd/40890499/ http://www.searchenginepeople.com/blog/seo-ebooks.html http://regmedia.co.uk/2006/06/16/mio_c210_sat_nav_lrg.jpg http://www.pen.ulugtekin.com/ Ulugtekin%20Luxury%20Sold.htm Not to mention phones that are just phones, cameras, personal organisers… Single use devices

It might even be argued that information delivery and communication/interaction are beginning to merge anyway Web 2.0 applications like Facebook or Twitter exist as much (if not more) through mobile use than online interaction and consumption Designing for mobile When we think about designing interfaces for mobile devices we have to assume that there will be a powerful drive towards the consumption of information Mobile devices now do more than in the past regardless of whether they are ‘Swiss Army Knives’ or primarily single use utensils

Implications for design We need to use techniques we have discussed… User-understanding, Requirements gathering Task analysis Dialogue Design Creative Design Prototyping Evaluation techniques To think about the best ways to develop & deliver INTERACTION on mobile devices

Key factors for mobile interaction design Simplicity Format Context Source Interaction Searching Don Norman: http://bit.ly/norman_on_mobiles Webcredible: http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml Writing for the small screen: http://blog.luziaresearch.com/mlearning/writing-for-the-small-screen

Key factors for mobile interaction design Simplicity Brevity of information for mobile devices Some information is by nature simple, for example simple headlines, But other types of information will involve condensing http://www.white-hat-web-design.co.uk/articles/newspaper.php There also needs to be the option to browse more extensively to move beyond the simple to the more complex

Key factors for mobile interaction design Format Is the content being accessed specifically designed for mobile devices? If not, how will it be adapted? http://info.mobile.msn.com

Format - examples TfL and BAA and BBC on mobile

Key factors for mobile interaction design Context What role does context play? Is the access to information tied to a particular location or activity? For example – Adverts sent to you because you have asked to be notified about an event Updates during a match event Applications like Socialight – GPS messaging Helpful Ref: http://www.cse.iitb.ac.in/~krithi/papers/ComputerJournal.pdf

Key factors for mobile interaction design Where is the source content stored? Stored on remote server Accessed peer to peer fashion, where Other mobiles act as servers of content Short range wireless connections providing localised information e.g. Street Servers Effective caching Source Helpful Ref: http://www.cse.iitb.ac.in/~krithi/papers/ComputerJournal.pdf

Key factors for mobile interaction design Interaction How does the user get the information? PUSHED at them so that they are automatically provided with it. So very little interaction. PULLED by the user via browsing a contents list. PUSH/PULL. The user sets up details of the sorts of information they want to find out about (PULL) then when the information becomes available the system delivers it. Prefetching Profiles are developed of a users requirements and prefetched and cached on the mobile device

Small screen impacts Reading and comprehension User interaction User experience Browsing Searching

Reading and comprehension Duchnicky and Kolers 1983 research. Difficulties arouse mainly when the width of a display was reduced. With the full width display being read 25% faster than the screen which was One third the width. The impact of varying the height was much less dramatic. A 4 line display Was only 9% slower than a 20 line display. It is much easier to read wide text than it is to read Horizontally compressed text. Do you agree with this? It is much easier to read wide text than it is to read Horizontally compressed text. Do you agree with this? Small screen impacts

Small screen impacts “Make sure that you use as much of the horizontal plane as possible for the information itself. Menu bars or navigation controls placed in columns, for example, will reduce overall usability of the system.” Jones and Marsden p252 Reading and comprehension

Small screen impacts If the content cannot be displayed on one non-scrolled screen then the users will have to navigate be either SCROLLING or PAGING So keeping content simple on mobiles is a must or the user will have to do lots of navigating. User interaction

When web-sites first started only 10% of users were prepared to scroll down and look at info below the page. (source: Jones and Marsden) Now everyone does it. DO THEY?? Reducing navigation might mean reducing options on menus Reducing the number of sub-menus Quicker and easier to get to the information or activity we want User interaction This shows us that we need to guide our users in how to navigate, keep them orientated if they need to go back etc. The BBC's breadcrumb trail saved space and was an effective substitute for repeating the navigation. Small screen impacts

Small screen impacts Even when there is little performance difference between large and small screens users still enjoy using larger screens - discuss Donald Norman in Emotional Design argues, based on research, that people forgive some usability issues if they like a product. Mood Boards Part of the way we can design enjoyable interfaces and craft the user experience User Experience http://jnd.org/dn.mss/emotional_design_people_and_things.html

Small screen impacts Browsing Jones and Marsden’s own research compared people browsing web-pages using full size screens and PDAs They found that using a PDA when the content was not designed for mobiles created huge usability problems In the end it meant people browsed less because it was difficult, they needed to scroll horizontally and do more navigation, so often just didn’t bother

Small screen impacts Successful searches were when the summary of the website in the search results was enough to suggest the page was worth exploring Searching Mobile devices give smaller lists of results, therefore less choice Most users don’t go beyond the second page, so overall there is less choice Difficulty in browsing impacted on searching Going to a page it wasn’t always obvious if it was useful, so users just returned to original search engine page

Guidelines for browsing on a mobile device Allow users to overview the material at every opportunity Promote focused direct access Reduce Scrolling

Guidelines for browsing on a mobile device Allow users to overview the material at every opportunity Writing Style – conciseness Give the users exactly what they need Neither more nor less Summaries - Structured overviews like outlines, tables of contents etc. Plus summarised content Skim Reading - most web users skim read This can be eased by using sections and sub-sections as well as highlights using fonts and other graphical effects Writing for the small screen: http://blog.luziaresearch.com/mlearning/writing-for-the-small-screen

Promote focused direct access Use strategies which lead directly to a piece of content A good model is one which allows drill down moving from overviews to more detail Give small sets of paths rather than overwhelming users with detail Guidelines for browsing on a mobile device

Place navigational features (menu bars etc.) near the top of the page in a fixed place Place most important information at the top of the page Reduce the amount of material on a page Make the content task focused (Taskonomy) Reduce vertical scrolling Horizontal scrolling should be eliminated totally To reduce vertical scrolling: Guidelines for browsing on a mobile device

And what next? Gestural interfaces http://www.smallsurfaces.com/2009/01/saffer-talks-about-gestural-interfaces/ Iphone, Wii, public toilets… Universal remote ‘wand’ What else? How will we design good interfaces in the future?

References 7 usability guidelines for websites on mobile devices, 2007, http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml (last viewed 29/11/09) Bailey, B, 2006, Reading Onscreen: The Effects of Line Length on Performance, Usability.gov http://www.usability.gov/articles/newsletter/pubs/082006news.html Last viewed 29/11/09) Jones M & Marsden G, 2006, Mobile Interaction Design, Wiley Norman, D, various, http://www.jnd.org/dn.pubs.html (last viewed 29/11/09)

Useful Links LUCID http://www.lucidproject.org/Videos.aspx Small Surfaces http://www.smallsurfaces.com/2009/01/saffer-talks-about-gestural-interfaces/ Design for Mobile http://patterns.littlespringsdesign.com/index.php/Main_Page Nokia Wiki guidelines for mobile interface design http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design Taskonomies http://libraryclips.blogsome.com/2008/10/16/taskonomy-assembling-for-use/

End