CGS 1060 Mobile UIs 1 Copyright 2012 by

Objectives ▀ Explain u Mobile computing concepts u Phone h/w u Mobile computing UI

Mobile is Different n n n Limited memory and screen size Interactions are short and interruptions are common Touch based u No external devices like a mouse F Some do have a keyboard F Often though, only a virtual keyboard u Typing minimized 3 Copyright 2012 by Janson Industries

Mobile is Different n Information often gathered not input by users u Sensors – light, accelerometer, temperature, pressure n Often used for monitoring (i. e. GPS) u Timely access to the latest data 4 Copyright 2012 by Janson Industries

Why Bother n Real time data exchange from mobile devices u Track location of delivery truck and reroute based on traffic info n n Enable customer access to your business anytime anywhere Increase field employees productivity 5 Copyright 2012 by Janson Industries

Mobile is Different n n n Social interactions are important Web pages need to be designed for smaller screens Lots of different devices u Tablet u Blackberry u Smart. Phone F i. Phone F Windows Copyright 2012 by Janson Industries F Android Phone 6

Phone GUI ▀ Doesn’t have Application windows u No ▀ ▀ dragging, closing, or resizing Gives the impression that user is actually touching and manipulating objects Kinda has a desk top: the Home screen 7 Copyright 2012 by Janson Industries

Android Phone GUI Home shows some short cut icons Can be accessed at any

Phone H/W Interface ▀ ▀ Android phones have buttons to tell the system what to do Clockwise they are u Camera, dec/inc volume, power, end call, search, back, menu, home, start call ▀ In the middle: u Up/down/left/right/Enter 9 Copyright 2012 by Janson Industries

Phone H/W ▀ On newer phones, the face of the phone is mostly just a touch screen u If there are buttons, they are ► At the bottom of the face of the device beneath the screen • Usually this is where the home, menu, back and search buttons are ► On the top edge of the device • Usually this is where the power button is ► Side edges of the phone • Volume controls, camera 10 Copyright 2012 by Janson Industries

Camera lens and flash on back 11 Copyright 2012 by Janson Industries

Phone H/W Side buttons 12 Copyright 2012 by Janson Industries

Phone GUI ▀ Different than h/w interface ▀ Communicate with gestures u Touches, u Lots of different types of touches ► Long ▀ touch, Tap, Double tap What is done depends on what the gesture done against u Empty Copyright 2012 by Janson Industries swipes, pinches space, icon, menu 13

GUI vs. H/W Interface For example, press and hold (long touch) on a blank

GUI vs. H/W Interface However, if you click the Menu button you get a

Phone GUI ▀ Many similar GUI components as Windows u Buttons u Text entry

Android Phone GUI For example, selecting a wallpaper menu item results in choices and

Android Phone GUI Swiping is an example of a gesture Select the new wallpaper

Android Phone GUI New wallpaper applied to the home screen 19 Copyright 2012 by

Phone GUI ▀ Gestures are context specific ▀ For example, tapping u An app shortcut will start the app u. A folder icon will show you what is in that folder u An a Edit. Text field will display a “soft” keyboard 20 Copyright 2012 by Janson Industries

Phone GUI ▀ Display all the apps and widgets by tapping the center short cut button at the bottom of the screen u Widgets are apps that work dynamically on the screen ► The digital clock and Google search box are examples ▀ Can quickly add a short cut to your home screen by long touching an icon and holding Copyright 2012 by Janson Industries 21

Android Phone GUI We’ll add a Calendar short cut with a long touch 22

Android Phone GUI To delete a short cut, long touch the icon The icon will appear to lift up and a trash icon will be displayed at the top of the screen Simply drag and drop the shortcut icon on to the trash icon 23 Copyright 2012 by Janson Industries

Phone GUI n You can move the icons the same way u Long touch, then drag and drop to new location n Can create a folder (to group short cuts) by dragging one icon onto another u System creates a folder and places both in the folder 24 Copyright 2012 by Janson Industries

Android Phone GUI Added some more shortcuts Will drag Email onto Calendar 25 Copyright

Android Phone GUI Calendar icon obscures Email icon and Android created in unnamed folder

Android Phone GUI Third icon added behind the other two Tap any of the

Android Phone GUI Tap the folder name (Unnamed Folder) and type in new name

Android Phone GUI To save the name, just tap on an empty part of

Android Phone GUI The three overlapping icons redisplayed with the folder name below To delete the folder, display the contents and drag the icons out When only one icon is left, the folder is deleted Can delete folder and its contents by dragging folder to trash icon 30 Copyright 2012 by Janson Industries

Phone GUI n System and apps communicate to users with u Notifications u Toasts

Notifications n n Notification indicated in upper left of screen A least an icon will be displayed u If multiple, a number will appear to the right of the icon n To display, touch and drag down Copyright 2012 by Janson Industries 32

Toast s and Alerts 33 Copyright 2012 by Janson Industries

Managing Apps n Android doesn’t want the user managing apps u User should start and use them, then forget about them n Is very good at managing apps and allocating the systems resources u Memory u CPU Copyright 2012 by Janson Industries 34

Moving Between Apps n n Unlike Windows you can’t just click on a app window to make it active Also, apps may be running in the background u No visual evidence that app is functioning 35 Copyright 2012 by Janson Industries

Moving Between Apps n Long touch physical home button to display recently used apps u Like the app tray in Windows n n Scroll up and down through the list Tap to make one active 36 Copyright 2012 by Janson Industries

Ending Apps n n Many apps have an option to do this Android will end apps when resources are needed u I. e. User selects new apps to run so system kills earlier selected apps so new ones can function F User doesn’t get any notice or a choice of which app is ended 37 Copyright 2012 by Janson Industries

Ending Apps n Android does provide the user the ability to stop or disable an app u This is not ending u Stopping is just one state an application can be in F Paused n is another state example Apps can change states u For example, a stopped or paused app can be restarted 38 Copyright 2012 by Janson Industries

Disabling an App n Makes the app unavailable to be used u App won’t even show up in app launcher screen n n Copyright 2012 by Janson Industries To use app again, it must be enabled To stop, enable, or disable an app, choose Settings from the app launcher screen 39