1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries.

1

CGS1060Mobile UIs

Copyright 2012 by Janson Industries

Copyright 2012 by Janson Industries2

Objectives▀ Explain

Mobile computing concepts

Phone h/w

Mobile computing UI ►How is it different/same as other UIs


Mobile is Different Limited memory and screen size

Interactions are short and interruptions are common

Touch based

No external devices like a mouse Some do have a keyboard Often though, only a virtual keyboard

Typing minimized


Mobile is Different Information often gathered not

input by users

Sensors – light, accelerometer, temperature, pressure

Often used for monitoring (i.e. GPS)

Timely access to the latest data


Why Bother Real time data exchange from

mobile devices

Increase field employees productivity

Track location of delivery truck and reroute based on traffic info

Enable customer access to your business anytime anywhere


Mobile is Different Social interactions are important Web pages need to be designed for

smaller screens Lots of different devices

Tablet

Blackberry

SmartPhone iPhone Windows Phone Android


Phone GUI▀ Doesn’t have Application windows

No dragging, closing, or resizing

▀ Gives the impression that user is actually touching and manipulating objects

▀ Kinda has a desk top: the Home screen


Android Phone GUI

Can be accessed at any time by pressing Home button

Home shows some short cut icons


Phone H/W Interface▀ Android phones have buttons to tell the system what to do

▀ Clockwise they are

Camera, dec/inc volume, power, end call, search, back, menu, home, start call

▀ In the middle:

Up/down/left/right/Enter


Phone H/W▀ On newer phones, the face of the

phone is mostly just a touch screen

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


Camera lens and flash on back


Side buttons

Phone H/W


Phone GUI▀ Different h/w interface

▀ Communicate with gestures

Touches, swipes, pinches

Lots of different types of touches►Long touch, Tap, Double tap

▀ What is done depends on what the gesture done against

Empty space, icon, menu


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


GUI vs. H/W Interface

However, if you touch the Menu button you get a different menu


Phone GUI▀ Many similar GUI components

just like Windows

Buttons

Text entry fields

Labels

Menus


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


Android Phone GUISwiping is an example of a gesture

Select the new wallpaper by tapping the thumbnail image then tap the Set wallpaper button


Android Phone GUI

New wallpaper applied to the home screen


Phone GUI▀ Gestures are context specific

▀ For example, tapping

An app shortcut will start the app

A folder icon will show you what is in that folder

An a EditText field will display a “soft” keyboard


Phone GUI▀ Display all the apps and widgets by

tapping the center short cut button at the bottom of the screen

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


Android Phone GUIWe’ll add a Calendar short cut with a long touch


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 screenSimply drag and drop the shortcut icon on to the trash icon


Phone GUI You can move the icons the same

way

Long touch, then drag and drop to new location

Can create a folder (to group short cuts) by dragging one icon onto another

System creates a folder and places both in the folder


Android Phone GUIAdded some more shortcuts

Will drag Email onto Calendar


Android Phone GUICalendar icon obscures Email icon and Android created an

unnamed folder

Will drag PhoneSale onto them


Android Phone GUIThird icon added behind the other two

Tap any of the three icons and the folder contents will be displayed


Android Phone GUI

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


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


Android Phone GUI

To delete the folder, display the contents and drag the icons out

When only one icon is left, the folder is deletedCan delete folder and its contents by dragging folder to trash

icon

The three overlapping icons redisplayed with the folder name below


Phone GUI System and apps communicate to

users with

Notifications

Toasts

Alerts


Notifications Notification indicated in upper left of

screen

At least an icon will be displayed If multiple, a number will appear to the right

of the icon

To display, touch and drag down


Toasts

and

Alerts


Managing Apps Android doesn’t want the user

managing apps

User should start and use them, then forget about them

Is very good at managing apps and allocating the systems resources

Memory

CPU


Moving Between Apps Unlike Windows you can’t just

click on a app window to make it active

Also, apps may be running in the background

No visual evidence that app is functioning


Moving Between Apps Long touch physical home

button to display recently used apps

Like the app tray in Windows

Scroll up and down through the list

Tap to make one active


Ending Apps Many apps have an option to do

this

Android will end apps when resources are needed

I.e. User selects new apps to run so system kills earlier selected apps so new ones can function User doesn’t get any notice or a choice

of which app is ended


Ending Apps Android does provide the user the

ability to stop or disable an app

This is not ending

Stopping is just one state an application can be in Paused is another state example

Apps can change states

For example, a stopped or paused app can be restarted


Disabling an App Makes the app unavailable to be

used

App won’t even show up in app launcher screen

To use app again, it must be enabled

To stop, enable, or disable an app, choose Settings from the app launcher screen



From Settings choose Apps


Initially shows all apps that were downloaded onto the device


Clicking on Running displays the currently active app (Settings) and any background apps

If Settings is clicked…


… gives you the option to Stop it. Clicking Stop would send you back to the app launcher screen (the previous “app” you

were using).


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)


Can Stop or Disable the Calendar app from this screen


Clicking Disable means the app isn’t even displayed on apps launcher screen


Doesn’t even appear in the folder created earlier


Must redisplay all apps and scroll to end of list to see disabled apps


Tap the app to select it and then tap Enable

App will appear on app launcher screen and in folder


iPad GUI Similar but different

Desktop like home page

Icons

Touch interface

iPad UI

1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries.

Documents

janson industries

u updownleftrightenter

u camera

touch screen u

buttons phone hw slide

different menu slide

camera slide

home screen slide