mobile ui
DESCRIPTION
Presentation for the CSE HCI courseTRANSCRIPT
Design Considerations for Mobile Systems
Jerry Gannod, Ph.D.Associate Professor, CSE, and
Director, Center for Mobile LearningMiami University
Miami M-Learning Center 2
Quick Poll
http://bit.ly/gp6pbjTake out your phones!
Miami M-Learning Center 3
M-Learning Center
http://elgg.csi.muohio.edu/mlc
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 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 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 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– MIShttp://bit.ly/9NULfs
Miami M-Learning Center 8
Quick Poll
http://bit.ly/ewULWmTake out your phones!
Miami M-Learning Center 9
Capabilities
• Accelerometer• GPS• Camera• Wireless Internet• Phone• Sound• Vibration• Web browsing with flash
Miami M-Learning Center 10
Possible Uses
• Augmented Reality • Motion Detection and Measurement• Location Awareness• Haptic Response• Real-time collaboration• Image capture• Motion detection
Miami M-Learning Center 11
Important Considerations
Quality Attributes• Performance• Security• Availability• Usability
Physical Attributes• Network limitations• Processor limitations(?)
Expectations• Access to data anywhere• Location Awareness• Ubiquity• Low latency• Simple navigation• Minimal typing
Miami M-Learning Center 12
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?
Miami M-Learning Center 13
Design in the mobile world
Warning: these views may contradict what you’ve learned in this class
Miami M-Learning Center 14
Design in the mobile world
• Hire a graphic designer– User experience is a major factor in making the app successful
Computer Scientists and Software Engineers != UI designers
Miami M-Learning Center 15
Design in the mobile world
• Consider your audiencehttp://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 16
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 17
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 18
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 19
The Miami App
• Now available on the iTunes App Storehttp://bit.ly/ibugAy
• Wait for the first update if you have an iOS 3.x device
Miami M-Learning Center 20
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 21
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 22
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 23
App Development
Web App vs. Native Apphttp://bit.ly/g4bpBchttp://zd.net/gvA4s2
Miami M-Learning Center 24
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
Miami M-Learning Center 25
Basic App Development
• Web Applications– System Requirements• PC, Mac, or Linux
– Programming Pre-requisites• Web development
– HTML– Javascript– CSS
Miami M-Learning Center 26
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
Miami M-Learning Center 27
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)
Miami M-Learning Center 28
XCode
• Xcode IDE– Development using Objective-C
• IB - Interface builder– For designing user interfaces
• iPhone simulator• Debugging Support
Miami M-Learning Center 29
Toolkits
• Appcelerator - http://www.appcelerator.com/• Phonegap - http://www.phonegap.com/• Rhomobile - http://rhomobile.com/• Game Salad - http://gamesalad.com/• Apsca - http://anscamobile.com/