Design Considerations for Mobile Systems<br />Jerry Gannod<br />Director, Center for Mobile Learning<br />Miami University...
M-Learning Center<br />http://elgg.csi.muohio.edu/mlc<br />Miami M-Learning Center<br />2<br />
M-Learning Center Overview<br />Miami has established an M-Learning Center devoted to supporting faculty, staff, and stude...
Mission<br />To capture and distribute best practices that utilize mobile technologies in support of learning<br />To prov...
Activities of the center<br />Educational Support<br />Disseminate knowledge about best practices in M-Learning<br />Softw...
Student Projects<br />Miami iPhone App<br />Miami’s identity on the iPhone<br />Track’M<br />Bus tracking system<br />Fina...
HEARTifacts<br />App supports finding Automated External Defibrillators using Augmented Reality<br />Created for an extern...
Quick Poll<br />Take out your phones!<br />http://bit.ly/ewULWm<br />Miami M-Learning Center<br />8<br />
Capabilities<br />Accelerometer<br />GPS<br />Camera<br />Wireless Internet<br />Phone<br />Sound<br />Vibration<br />Web ...
Possible Uses<br />Augmented Reality <br />Motion Detection and Measurement<br />Location Awareness<br />Haptic Response<b...
Important Considerations<br />Quality Attributes<br />Expectations<br />Performance<br />Security<br />Availability<br />U...
Location Awareness
Ubiquity
Low latency
Simple navigation
Minimal typing</li></ul>Physical Attributes<br />Network limitations<br />Processor limitations(?)<br />Miami M-Learning C...
Tactic<br />Start with the activity<br />12<br />Miami M-Learning Center<br />
Example: Studying Plants<br />In class activities: study plant in text or via internet (or other media)<br />Field study<b...
Considerations<br />Engagement - will the app enable users to be more engaged in the activity?<br />Location - will the ap...
Design in the mobile world<br />Hire a graphic designer<br />User experience is a major factor in making the app successfu...
Design in the mobile world<br />User interaction should minimize text input and maximize click input<br />Rule of the “big...
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 iPhone App<br />App supports a number of functions meant to inform users about various aspects of Miami<br />Develop...
The Miami App<br />Our UI Development process:<br />Develop requirements with consultation with user community<br />Archit...
The Miami App<br />90% of the data resides off of the phone<br />Web services<br />RSS feeds<br />Web pages<br />App repla...
App Development<br />Web App vs. Native App<br />21<br />Miami M-Learning Center<br />
Why Web Apps?<br />Target Multiple Platforms<br />Builds off of familiar languages and frameworks<br />More gentle learnin...
Basic App Development<br />Web Applications<br />System Requirements<br />PC, Mac, or Linux<br />Programming Pre-requisite...
Toolkits<br />Available Toolkits<br />iUi: http://code.google.com/p/iui<br />iWebkit: http://iwebkit.net<br />Ciui: http:/...
Upcoming SlideShare
Loading in...5
×

Mobile ui

455

Published on

Presentation for the CSE HCI course

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />http://elgg.csi.muohio.edu/mlc<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 />http://seasnews.eas.muohio.edu/2010/08/automated-external-defibrillator-aed-app/<br />Miami M-Learning Center<br />7<br />
  8. 8. Quick Poll<br />Take out your phones!<br />http://bit.ly/ewULWm<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: http://code.google.com/p/iui<br />iWebkit: http://iwebkit.net<br />Ciui: http://code.google.com/p/ciui-dev<br />Sproutcore: http://www.sproutcore.com<br />jQueryMobile: http://jquerymobile.com<br />jQtouch: http://jqtouch.com<br />Cappuccino: http://cappuccino.org<br />Wink: http://www.winktoolkit.org<br />Xui: http://github.com/brianleroux/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 - http://www.appcelerator.com/<br />Phonegap - http://www.phonegap.com/<br />Rhomobile- http://rhomobile.com/<br />Game Salad - http://gamesalad.com/<br />Apsca- http://anscamobile.com/<br />27<br />Miami M-Learning Center<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×