Presentation for the CSE HCI course

1. Design Considerations for Mobile Systems Jerry Gannod, Ph.D. Associate Professor, CSE, and Director, Center for Mobile Learning Miami University 1 Miami M-Learning Center

2. Quick Poll http://bit.ly/gp6pbj Take out your phones! Miami M-Learning Center 2

3. M-Learning Center http://elgg.csi.muohio.edu/mlc Miami M-Learning Center 3

4. M-Learning Center Overview Miami has established an M-Learning Center devoted to supporting faculty, staff, and students in the use of mobile technology for education Multi-disciplinary effort involving SEAS, AIMS, and IT Services Miami M-Learning Center 4

5. Activities of the center Educational Support Disseminate knowledge about best practices in M-Learning Software Development Support Create software for mobile devices Service and Research Support research and outreach activities Miami M-Learning Center 5

6. Student Projects Miami iPhone App Miami’s identity on the iPhone Track’M Bus tracking system Finalist 2010-2011 MUITDC Competition Polaris Proctor and Gamble Decision Support for iPad Alcohol Intervention Increase awareness of the problems of binge drinking HEARTifacts Semi-Finalist Youtube Film Your Issue, 2010 Alumni Networking Supports making connections between alumni at networking events Integration with Linked-In Miami M-Learning Center 6

7. HEARTifacts App supports finding Automated External Defibrillators using Augmented Reality Created for an external customer Students part of capstone team consisting of: Computer Science/Software Engineering Graphic Design Marketing MIS http://bit.ly/9NULfs Miami M-Learning Center 7

8. Quick Poll http://bit.ly/ewULWm Take out your phones! Miami M-Learning Center 8

9. Capabilities Accelerometer GPS Camera Wireless Internet Phone Sound Vibration Web browsing with flash 9 Miami M-Learning Center

10. Possible Uses Augmented Reality Motion Detection and Measurement Location Awareness Haptic Response Real-time collaboration Image capture Motion detection 10 Miami M-Learning Center

12. Location Awareness

13. Ubiquity

14. Low latency

15. Simple navigation

16. Minimal typingPhysical Attributes Network limitations Processor limitations(?) Miami M-Learning Center 11

17. Important Considerations Engagement - will the app enable users to be more engaged in the activity? Location - will the app enable users to be engaged where ever they are? Device Capability - will the app or device give the users access to a feature that enhances the activity? 12 Miami M-Learning Center

18. Design in the mobile world Warning: these views may contradict what you’ve learned in this class Miami M-Learning Center 13

19. Design in the mobile world Hire a graphic designer User experience is a major factor in making the app successful Miami M-Learning Center 14 Computer Scientists and Software Engineers != UI designers

20. Design in the mobile world Consider your audience http://bit.ly/dFLar9 User and client feedback is paramount Users need to be able to make comments about what does and doesn’t work early in the design process Ubiquity of data and identity Data should be accessible from anywhere and any device Miami M-Learning Center 15

21. Design in the mobile world User interaction should minimize text input and maximize click input Rule of the “big button” Multi-touch Touch accuracy Touch Sequences Miami M-Learning Center 16

22. Mobile HIG: http://bit.ly/g03e8L One user experience Seamless interaction Splash screens are evil Speed is king Consider state maintenance Let the user know what is going on Use progressive enhancement Vary features slightly based on user but maintain a consistent baseline Use cooperative single-tasking Miami M-Learning Center 17

23. Anti-Patterns: http://bit.ly/g9QGK0 Billboards Sleight of hand Bullhorns App as OS Spin Zone The Bouncer Gesture Hijacking Memory Lapse The High Bar Sound Off Miami M-Learning Center 18

24. The Miami App Now available on the iTunes App Store http://bit.ly/ibugAy Wait for the first update if you have an iOS 3.x device Miami M-Learning Center 19

25. Miami iPhone App App supports a number of functions meant to inform users about various aspects of Miami Developed by student developers employed by the Miami M-Learning Center Software Engineering Computer Science Electrical Engineering Graphic Design We are hiring! Miami M-Learning Center 20

26. The Miami App Our UI Development process: Develop requirements with consultation with user community Architect designs basic wireframe of the app Graphic designer creates concept drawings of the use case scenarios Story board shared with the user community Software developers create software using concept drawings from the graphic designer Miami M-Learning Center 21

27. The Miami App 90% of the data resides off of the phone Web services RSS feeds Web pages App replaces need for multiple physical or virtual data sources Maps, Web Miami M-Learning Center 22

28. App Development Web App vs. Native App http://bit.ly/g4bpBc http://zd.net/gvA4s2 23 Miami M-Learning Center

29. Why Web Apps? Target Multiple Platforms Builds off of familiar languages and frameworks More gentle learning curve than native app development Avoid app store App review App update 24 Miami M-Learning Center

30. Basic App Development Web Applications System Requirements PC, Mac, or Linux Programming Pre-requisites Web development HTML Javascript CSS 25 Miami M-Learning Center

31. Toolkits Available Toolkits iUi: http://code.google.com/p/iui iWebkit: http://iwebkit.net Ciui: http://code.google.com/p/ciui-dev Sproutcore: http://www.sproutcore.com jQueryMobile: http://jquerymobile.com jQtouch: http://jqtouch.com Cappuccino: http://cappuccino.org Wink: http://www.winktoolkit.org Xui: http://github.com/brianleroux/xui 26 Miami M-Learning Center

32. Advanced App Development Native Apps System Requirements Intel-based Mac Snow Leopard OS Programming Pre-requisites Object-Oriented Programming Knowledge C++ Objective-C iPhone Developer License (for deployment onto devices) 27 Miami M-Learning Center

33. XCode Xcode IDE Development using Objective-C IB - Interface builder For designing user interfaces iPhone simulator Debugging Support 28 Miami M-Learning Center

34. Toolkits Appcelerator - http://www.appcelerator.com/ Phonegap - http://www.phonegap.com/ Rhomobile- http://rhomobile.com/ Game Salad - http://gamesalad.com/ Apsca- http://anscamobile.com/ 29 Miami M-Learning Center