Fostering Friendships - Enhancing Social Bonds in the Classroom
Mobile ui
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
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
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
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
