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/