Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile ui


Published on

Presentation for the CSE HCI course

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Mobile ui

  1. 1. Design Considerations for Mobile Systems<br />Jerry Gannod<br />Director, Center for Mobile Learning<br />Miami University<br />1<br />Miami M-Learning Center<br />
  2. 2. M-Learning Center<br /><br />Miami M-Learning Center<br />2<br />
  3. 3. M-Learning Center Overview<br />Miami has established an M-Learning Center devoted to supporting faculty, staff, and students in the use of mobile technology for education<br />Multi-disciplinary effort involving SEAS, AIMS, and IT Services<br />Miami M-Learning Center<br />3<br />
  4. 4. Mission<br />To capture and distribute best practices that utilize mobile technologies in support of learning<br />To provide coordination and leadership that establishes linkages between existing development expertise and educators interested in applying mobile technologies for learning<br />To provide faculty, staff, students and practitioners with support on the use and development of mobile applications through coordination of research and educational activities<br />
  5. 5. Activities of the center<br />Educational Support<br />Disseminate knowledge about best practices in M-Learning<br />Software Development Support<br />Create software for mobile devices<br />Service and Research<br />Support research and outreach activities<br />Miami M-Learning Center<br />5<br />
  6. 6. Student Projects<br />Miami iPhone App<br />Miami’s identity on the iPhone<br />Track’M<br />Bus tracking system<br />Finalist 2010-2011 MUITDC Competition<br />Polaris<br />Proctor and Gamble Decision Support for iPad<br />Alcohol Intervention<br />Increase awareness of the problems of binge drinking<br />HEARTifacts<br />Semi-Finalist Youtube Film Your Issue, 2010<br />Alumni Networking<br />Supports making connections between alumni at networking events<br />Integration with Linked-In <br />Miami M-Learning Center<br />6<br />
  7. 7. HEARTifacts<br />App supports finding Automated External Defibrillators using Augmented Reality<br />Created for an external customer<br />Students part of capstone team consisting of:<br />Computer Science/Software Engineering<br />Graphic Design<br />Marketing<br />MIS<br /><br />Miami M-Learning Center<br />7<br />
  8. 8. Quick Poll<br />Take out your phones!<br /><br />Miami M-Learning Center<br />8<br />
  9. 9. Capabilities<br />Accelerometer<br />GPS<br />Camera<br />Wireless Internet<br />Phone<br />Sound<br />Vibration<br />Web browsing with flash<br />9<br />Miami M-Learning Center<br />
  10. 10. Possible Uses<br />Augmented Reality <br />Motion Detection and Measurement<br />Location Awareness<br />Haptic Response<br />Real-time collaboration<br />Image capture<br />Motion detection<br />10<br />Miami M-Learning Center<br />
  11. 11. Important Considerations<br />Quality Attributes<br />Expectations<br />Performance<br />Security<br />Availability<br />Usability<br /><ul><li>Access to data anywhere
  12. 12. Location Awareness
  13. 13. Ubiquity
  14. 14. Low latency
  15. 15. Simple navigation
  16. 16. Minimal typing</li></ul>Physical Attributes<br />Network limitations<br />Processor limitations(?)<br />Miami M-Learning Center<br />11<br />
  17. 17. Tactic<br />Start with the activity<br />12<br />Miami M-Learning Center<br />
  18. 18. Example: Studying Plants<br />In class activities: study plant in text or via internet (or other media)<br />Field study<br />Find plant<br />Take picture<br />Mark location<br />Share data with others<br />Off the shelf apps<br />Camera<br />GPS Location<br />Cell network to share data<br />Doesn’t need a specialized app necessarily<br />13<br />Miami M-Learning Center<br />
  19. 19. Considerations<br />Engagement - will the app enable users to be more engaged in the activity?<br />Location - will the app enable users to be engaged where ever they are?<br />Device Capability - will the app or device give the users access to a feature that enhances the activity?<br />14<br />Miami M-Learning Center<br />
  20. 20. Design in the mobile world<br />Hire a graphic designer<br />User experience is a major factor in making the app successful<br />User and client feedback is paramount<br />Users need to be able to make comments about what does and doesn’t work early in the design process<br />Miami M-Learning Center<br />15<br />Computer Scientists and Software Engineers != UI designers<br />
  21. 21. Design in the mobile world<br />User interaction should minimize text input and maximize click input<br />Rule of the “big button”<br />Ubiquity of data and identity<br />Data should be accessible from anywhere and any device<br />Miami M-Learning Center<br />16<br />
  22. 22. The Miami App<br />Now available on the iTunes App Store<br />Wait for the first update if you have an iOS 3.x device<br />Miami M-Learning Center<br />17<br />
  23. 23. Miami iPhone App<br />App supports a number of functions meant to inform users about various aspects of Miami<br />Developed by student developers employed by the Miami M-Learning Center<br />Software Engineering<br />Computer Science<br />Electrical Engineering<br />Graphic Design<br />We are hiring!<br />Miami M-Learning Center<br />18<br />
  24. 24. The Miami App<br />Our UI Development process:<br />Develop requirements with consultation with user community<br />Architect designs basic wireframe of the app<br />Graphic designer creates concept drawings of the use case scenarios<br />Story board shared with the user community<br />Software developers create software using concept drawings from the graphic designer<br />Miami M-Learning Center<br />19<br />
  25. 25. The Miami App<br />90% of the data resides off of the phone<br />Web services<br />RSS feeds<br />Web pages<br />App replaces need for multiple physical or virtual data sources<br />Maps, Web<br />Miami M-Learning Center<br />20<br />
  26. 26. App Development<br />Web App vs. Native App<br />21<br />Miami M-Learning Center<br />
  27. 27. Why Web Apps?<br />Target Multiple Platforms<br />Builds off of familiar languages and frameworks<br />More gentle learning curve than native app development<br />Avoid app store<br />App review<br />App update<br />22<br />Miami M-Learning Center<br />
  28. 28. Basic App Development<br />Web Applications<br />System Requirements<br />PC, Mac, or Linux<br />Programming Pre-requisites<br />Web development <br />HTML<br />Javascript<br />CSS<br />23<br />Miami M-Learning Center<br />
  29. 29. Toolkits<br />Available Toolkits<br />iUi:<br />iWebkit:<br />Ciui:<br />Sproutcore:<br />jQueryMobile:<br />jQtouch:<br />Cappuccino:<br />Wink:<br />Xui:<br />24<br />Miami M-Learning Center<br />
  30. 30. Advanced App Development<br />Native Apps<br />System Requirements<br />Intel-based Mac<br />Snow Leopard OS<br />Programming Pre-requisites<br />Object-Oriented Programming Knowledge<br />C++<br />Objective-C<br />iPhone Developer License (for deployment onto devices)<br />25<br />Miami M-Learning Center<br />
  31. 31. XCode<br />Xcode IDE<br />Development using Objective-C<br />IB - Interface builder<br />For designing user interfaces<br />iPhone simulator<br />Debugging Support<br />26<br />Miami M-Learning Center<br />
  32. 32. Toolkits<br />Appcelerator -<br />Phonegap -<br />Rhomobile-<br />Game Salad -<br />Apsca-<br />27<br />Miami M-Learning Center<br />