1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries

2 Objectives ▀ Explain u Mobile computing concepts u Phone h/w u Mobile computing UI ► How is it different/same as other UIs

Copyright 2012 by Janson Industries 3 Mobile is Different n Limited memory and screen size n Interactions are short and interruptions are common n 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

Copyright 2012 by Janson Industries 4 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

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

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

Copyright 2012 by Janson Industries 7 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

Copyright 2012 by Janson Industries 8 Android Phone GUI Can be accessed at any time by pressing Home button Home shows some short cut icons

Copyright 2012 by Janson Industries 9 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

Copyright 2012 by Janson Industries 10 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

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

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

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

Copyright 2012 by Janson Industries 14 GUI vs. H/W Interface For example, press and hold (long touch) on a blank area of the home screen and the wallpaper menu is displayed

Copyright 2012 by Janson Industries 15 GUI vs. H/W Interface However, if you touch the Menu button you get a different menu

Copyright 2012 by Janson Industries 16 Phone GUI ▀ Many similar GUI components just like Windows u Buttons u Text entry fields u Labels u Menus

Copyright 2012 by Janson Industries 17 Android Phone GUI For example, selecting a wallpaper menu item results in choices and a “soft” button Scroll through the choices by swiping left on an choice

Copyright 2012 by Janson Industries 18 Android Phone GUI Swiping is an example of a gesture Select the new wallpaper by tapping the thumbnail image then tap the Set wallpaper button

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

Copyright 2012 by Janson Industries 20 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 EditText field will display a “soft” keyboard

Copyright 2012 by Janson Industries 21 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 22 Android Phone GUI We’ll add a Calendar short cut with a long touch

Copyright 2012 by Janson Industries 23 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

Copyright 2012 by Janson Industries 24 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

Copyright 2012 by Janson Industries 25 Android Phone GUI Added some more shortcuts Will drag onto Calendar

Copyright 2012 by Janson Industries 26 Android Phone GUI Calendar icon obscures icon and Android created an unnamed folder Will drag PhoneSale onto them

Copyright 2012 by Janson Industries 27 Android Phone GUI Third icon added behind the other two Tap any of the three icons and the folder contents will be displayed

Copyright 2012 by Janson Industries 28 Android Phone GUI Tap the folder name (Unnamed Folder) and type in new name

Copyright 2012 by Janson Industries 29 Android Phone GUI Then to close the folder, tap on an empty part of the screen again To save the name, just tap on an empty part of the home screen

Copyright 2012 by Janson Industries 30 Android Phone GUI 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 The three overlapping icons redisplayed with the folder name below

Copyright 2012 by Janson Industries 31 Phone GUI n System and apps communicate to users with u Notifications u Toasts u Alerts

Copyright 2012 by Janson Industries 32 Notifications n Notification indicated in upper left of screen n At 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 33 Toasts and Alerts

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

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

Copyright 2012 by Janson Industries 37 Ending Apps n Many apps have an option to do this n 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

Copyright 2012 by Janson Industries 38 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 is another state example n Apps can change states u For example, a stopped or paused app can be restarted

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

Copyright 2012 by Janson Industries 40

Copyright 2012 by Janson Industries 41 From Settings choose Apps

Copyright 2012 by Janson Industries 42 Initially shows all apps that were downloaded onto the device

Copyright 2012 by Janson Industries 43 Clicking on Running displays the currently active app (Settings) and any background apps If Settings is clicked…

Copyright 2012 by Janson Industries 44 … gives you the option to Stop it. Clicking Stop would send you back to the app launcher screen (the previous “app” you were using).

Copyright 2012 by Janson Industries 45 Scroll to the right and select All to display all the apps on the device Click on the one you want to work with (Calendar)

Copyright 2012 by Janson Industries 46 Can Stop or Disable the Calendar app from this screen

Copyright 2012 by Janson Industries 47 Clicking Disable means the app isn’t even displayed on apps launcher screen

Copyright 2012 by Janson Industries 48 Doesn’t even appear in the folder created earlier

Copyright 2012 by Janson Industries 49 Must redisplay all apps and scroll to end of list to see disabled apps

Copyright 2012 by Janson Industries 50 Tap the app to select it and then tap Enable App will appear on app launcher screen and in folder

Copyright 2012 by Janson Industries 51 iPad GUI n Similar but different u Desktop like home page u Icons u Touch interface n iPad UI iPad UI