1 cgs1060 mobile uis copyright 2012 by janson industries
Post on 24-Dec-2015
214 Views
Preview:
TRANSCRIPT
Copyright 2012 by Janson Industries2
Objectives▀ Explain
Mobile computing concepts
Phone h/w
Mobile computing UI ►How is it different/same as other UIs
Copyright 2012 by Janson Industries3
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
Copyright 2012 by Janson Industries4
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
Copyright 2012 by Janson Industries5
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
Copyright 2012 by Janson Industries6
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
Copyright 2012 by Janson Industries7
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
Copyright 2012 by Janson Industries8
Android Phone GUI
Can be accessed at any time by pressing Home button
Home shows some short cut icons
Copyright 2012 by Janson Industries9
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
Copyright 2012 by Janson Industries10
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
Copyright 2012 by Janson Industries13
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
Copyright 2012 by Janson Industries14
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 Industries15
GUI vs. H/W Interface
However, if you touch the Menu button you get a different menu
Copyright 2012 by Janson Industries16
Phone GUI▀ Many similar GUI components
just like Windows
Buttons
Text entry fields
Labels
Menus
Copyright 2012 by Janson Industries17
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 Industries18
Android Phone GUISwiping 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 Industries20
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
Copyright 2012 by Janson Industries21
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
Copyright 2012 by Janson Industries22
Android Phone GUIWe’ll add a Calendar short cut with a long touch
Copyright 2012 by Janson Industries23
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
Copyright 2012 by Janson Industries24
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
Copyright 2012 by Janson Industries25
Android Phone GUIAdded some more shortcuts
Will drag Email onto Calendar
Copyright 2012 by Janson Industries26
Android Phone GUICalendar icon obscures Email icon and Android created an
unnamed folder
Will drag PhoneSale onto them
Copyright 2012 by Janson Industries27
Android Phone GUIThird icon added behind the other two
Tap any of the three icons and the folder contents will be displayed
Copyright 2012 by Janson Industries28
Android Phone GUI
Tap the folder name (Unnamed Folder) and type in new name
Copyright 2012 by Janson Industries29
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 Industries30
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
Copyright 2012 by Janson Industries31
Phone GUI System and apps communicate to
users with
Notifications
Toasts
Alerts
Copyright 2012 by Janson Industries32
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
Copyright 2012 by Janson Industries34
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
Copyright 2012 by Janson Industries35
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
Copyright 2012 by Janson Industries36
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
Copyright 2012 by Janson Industries37
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
Copyright 2012 by Janson Industries38
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
Copyright 2012 by Janson Industries39
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
Copyright 2012 by Janson Industries43
Clicking on Running displays the currently active app (Settings) and any background apps
If Settings is clicked…
Copyright 2012 by Janson Industries44
… 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 Industries45
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 Industries47
Clicking Disable means the app isn’t even displayed on apps launcher screen
Copyright 2012 by Janson Industries49
Must redisplay all apps and scroll to end of list to see disabled apps
Copyright 2012 by Janson Industries50
Tap the app to select it and then tap Enable
App will appear on app launcher screen and in folder
top related