ITP 140 Mobile App Technologies

flosssnailsMobile - Wireless

Dec 10, 2013 (3 years and 10 months ago)

85 views

ITP 140
Mobile App Technologies
User Interface
for
Android
Android


Android Design


http://developer.android.com/design/
index.html



Android GUI PSD


http://www.teehanlax.com/downloads/android-
gui-psd-high-density/

2
3
Android Goals


Enchant me


Delight me in surprising ways


Real objects are more fun
than buttons and menus


Let me make it mine


Get to know me
4
Android Goals


Simply my life


Keep it brief


Pictures are faster than words


Decide for me but let me have the final say


Only show what I need when I need it
5
Android Goals


Simply my life cont.


I should always know
where I am


Never lose my stuff


If it looks the same, it
should act the same


Only interrupt me if
it's important
6
Android Goals


Make me amazing


Give me tricks that work
everywhere


It's not my fault


Sprinkle encouragement


Do the heavy lifting for me


Make important things fast
7


http://developer.android.com/about/dashboards/index.html



http://en.wikipedia.org/wiki/Android_version_history



http://www.knowahead.in/dyk/androids-versions-are-named-in-alphabetical-order/

8
Android 4.4
9
Android Versions
Version
Codename
API
Date
1.5
Cupcake
3
April 30 2009
1.6
Donut
4
Sep 15 2009
2.1
Eclair

7
Oct 26 2009
2.2
Froyo

8
May 20 2010
2.3 – 2.3.2
Gingerbread
9
Dec 6 2010
2.3.3 – 2.3.7
10
3.1
Honeycomb
12
Feb 22 2011
3.2
13
4.0.3 – 4.0.4
Ice Cream
Sandwich
15
Nov 14 2011
4.1
Jelly Bean
16
July 9 2012
4.2
17
Nov 13 2012
4.3
18
July 24 2013
10
Common App UI
1.

Main Action Bar


Command and control center for app
2.

View Control


Allows users to switch between different
views
3.

Content Area


Space where the content of your app is
displayed
4.

Split Action Bar


Provide a way to distribute actions
across additional bars located below
the main action bar or at the bottom of
the screen
11
!emes


Themes are Android's mechanism for applying a
consistent style to an app or activity.


The style specifies the visual properties of the
elements that make up your user interface, such
as color, height, padding and font size.


To promote greater cohesion between all apps on
the platform, Android provides three system
themes:


Holo
Light


Holo
Dark


Holo
Light with dark action bars
12
!emes
13
Color


Android's colors
14
#33B5E5
#AA66CC
#99CC00
#FFBB33
#FF4444
#0099CC
#9933CC
#669900
#FF8800
#CC0000
Iconography


An icon is a graphic that takes up a small portion of
screen real estate and provides a quick, intuitive
representation of an action, a status, or an app.


The
launcher icon
is the visual representation of your
app on the Home or All Apps screen.


Since the user can change the Home screen's wallpaper,
make sure that your launcher icon is clearly visible on any
type of background.


Sizes


48x48
dp
(display independent pixels – one
dp
is one pixel
on a 160 dpi screen)


Launcher icons on Google Play – 512x512
px

15
Typography


The Android design language relies on traditional
typographic tools such as scale, space, rhythm,
and alignment with an underlying grid.


To support such use of
typography, Ice Cream Sandwich
introduced a new type family
named
Roboto
, created
specifically for the requirements
of UI and high-resolution
screens.


The framework offers an italic
for each weight.
16
Writing Style
1.

Keep it brief.


Be concise, simple and precise. Start with a 30 character limit (including
spaces), and don't use more unless absolutely necessary.


Example from the setup wizard:
2.

Keep it simple.


Pretend you're speaking to someone who's smart and competent, but
doesn't know technical jargon and may not speak English very well. Use
short words, active verbs, and common nouns.


Example from the Location settings screen:
17
Writing Style
3.

Be friendly.


Use contractions. Talk directly to the reader using
second person ("you"). If your text doesn't read the
way you'd say it in casual conversation, it's probably
not the way you should write it. Don't be abrupt or
annoying and make the user feel safe, happy and
energized.


Example from dialog that appears when an app
crashes:
18
Writing Style
4.

Put the most important thing first.


The first two words (around 11 characters,
including spaces) should include at least a
taste of the most important information in the
string. If they don't, start over.
19
Writing Style
5.

Describe only what's necessary, and no more.


Don't try to explain subtle differences. They will be lost on
most users.


Example from a Setup Wizard screen:
6.

Avoid repetition.


If a significant term gets repeated within a screen or block
of text, find a way to use it just once.
20
Navigation with Back and Up


Consistent navigation is an essential component
of the overall user experience.


Android 2.3 and earlier relied upon the system
Back
button for supporting navigation within an
app.


With the introduction of action bars in Android 3.0,
a second navigation mechanism appeared: the
Up

button, consisting of the app icon and a left-point
caret.
21
Up vs. Back


The
Up
button is used to navigate within an app based
on the hierarchical relationships between screens.


If a screen is the topmost one in an app (that is, the app's
home), it should not present an Up button.


The system
Back
button is used to navigate, in
reverse chronological order, through the history of
screens the user has recently worked with.


When the previously viewed screen is also the
hierarchical parent of the current screen, pressing the
Back button has the same result as pressing an Up
button – this is a common occurrence.


However, unlike the Up button, which ensures the user
remains within your app, the Back button can return the user
to the Home screen, or even to a different app.
22
Action Bar


The action bar is a dedicated piece of real estate
at the top of each screen that is generally
persistent throughout the app.


It provides several key functions:


Makes important actions prominent and accessible in
a predictable way (such as New or Search).


Supports consistent navigation and view switching
within apps.


Reduces clutter by providing an action overflow for
rarely used actions.


Provides a dedicated space for giving your app an
identity.
23
Action Bar
24
1.

App icon


The app icon establishes your app's identity. It can be
replaced with a different logo or branding if you wish.
2.

View control


If your app displays data in different views, this segment of
the action bar allows users to switch views.
3.

Action buttons


Show the most important actions of your app in the
actions section.
4.

Action overflow


Move less often used actions to the action overflow.
Action Bars


When splitting up content
across multiple action bars,
you generally have three
possible locations for action
bar content:
1.

Main action bar
2.

Top bar
3.

Bottom bar



App icon with & without "up"
25
Building Blocks


Inventory of ready-to-use elements for
creating outstanding apps
26
Tabs


Tabs in the action bar make it easy to
explore and switch between different
views or functional aspects of your app, or
to browse categorized data sets.
27
Scrollable Tabs


Scrolling tab controls can contain a larger
number of items than a standard tab
control.


To navigate to the next/previous view,
swipe left or right.
28
Fixed Tabs


Fixed tabs display all items concurrently. To navigate
to a different view, touch the tab, or swipe left or right.


Fixed tabs are displayed with equal width, based on
the width of the widest tab label.


If there is insufficient room to display all tabs, the tab labels
themselves will be scrollable.


For this reason, fixed tabs are best suited for displaying 3 or
fewer tabs.
29
Stacked Tabs


If view navigation is essential to your app, you can
break out tabs into a separate action bar.


This permits fast view switching even on narrower
screens.
30
Lists


Lists present
multiple line items
in a vertical
arrangement.


They can be used
for data selection
as well as
drilldown
navigation.
1.

Section Divider
2.

Line Items
31
Grid Lists


Grid lists are an alternative to standard list
views.


They are best suited for showing data sets
that represent themselves through images.


In contrast to simple lists, grid lists may scroll
either vertically or horizontally.


Generic Grids


Vertical scrolling


Horizontal scrolling


Avoid creating grid lists that scroll in two
dimensions.
32
Generic Grids
33


Vertical
scrolling


Horizontal scrolling
Grid List with Labels


Use labels to display additional contextual
information for your grid list items.


Use semi-transparent panels on top of the grid list
items to display your labels. This allows you to
control the contrast and ensures legibility of the
labels while letting the content "shine through".
34
Scrolling


Scrolling allows the user to navigate to content in
the overflow using a swipe gesture. The scrolling
speed is proportional to the speed of the gesture.
35


Scroll Indicator


Appears during scrolling to
indicate what portion of the
content is currently in view.


Index Scrolling


A long alphabetical list can
also offer index scrolling: a
way to quickly navigate to the
items that begin with a
particular letter.
Spinners


Spinners provide a quick way to select one value
from a set.


In the default state, a spinner shows its currently
selected value.


Touching the spinner displays a dropdown menu with
all other available values, from which the user can
select a new one.
36
Buttons


A button consists of text and/or an image that
clearly communicates what action will occur
when the user touches it.


Android supports two different types of buttons:
basic buttons and borderless buttons.


Both can contain text labels and/or images.
37
Text Fields


Text fields allow the user to type text into your
app.


They can be either single line or multi-line.


Touching a text field places the cursor and
automatically displays the keyboard.


In addition to typing, text fields allow for a variety
of other activities, such as text selection (cut,
copy, paste) and data lookup via auto-completion.
38
Seek Bars and Sliders


Interactive sliders make it possible to select a
value from a continuous or discrete range of
values by moving the slider thumb.


The smallest value
is to the left, the
largest to the right.


The interactive
nature of the slider
makes it a great
choice for settings
that reflect intensity
levels, such as
volume brightness, or color saturation.
39
Progress & Activity


Progress bars and activity indicators signal
to users that something is happening that
will take a moment.
40
Progress Bars


Progress bars are for situations where the
percentage completed can be determined.


They give users a quick sense of how much longer an
operation will take.


A progress bar should always fill from 0% to 100%
and never move backwards to a lower value.


If multiple operations are happening in sequence, use
the progress bar to represent the delay as a whole, so
that when the bar reaches 100%, it doesn't return
back to 0%.
41
Activity Indicators


Activity indicators are for operations of an
indeterminate length.


They ask users to wait a moment while something
finishes up, without getting into specifics about
what's happening behind the scenes.


Two styles are available: a bar and a circle.


Each is offered in a variety of sizes, in both
Holo

Light and
Holo
Dark themes.


Choose the appropriate style and size for the
surrounding context.
42
Activity Indicators
1.

Activity Bar
2.

Activity Circle
43
Custom Indicators


Some situations may call for something more
custom, especially if you have multiple states.


Example:


Not downloaded


Temporarily downloaded (automatically cached by
the app)


Permanently downloaded on the device at the
user's request
44
Switches


Switches allow the user to select options.


There are three kinds of switches:
1.

checkboxes


Use for 0, 1, or more options selected
2.

radio buttons


Use for 1 and only 1 option selected
3.

on/off switches
45
Checkboxes


Checkboxes allow the user to select
multiple options from a set.


Avoid using a single checkbox to turn an
option off or on. Instead, use an on/off switch.
46
Radio Buttons


Radio buttons allow the user to select one option
from a set.


Use radio buttons for exclusive selection if you think
that the user needs to see all available options side-
by-side.


Otherwise, consider a spinner, which uses less space.
47
On/off Switches


On/off switches toggle the state of a single
settings option.
48
Dialogs


Dialogs prompt the user for decisions
or additional information required by
the app to continue a task.


Such requests can range from simple
Cancel/OK decisions to more complex
layouts asking the user to adjust
settings or enter text.
49
Dialogs
1.

Optional title region
2.

Content area


Dialog content varies widely.


A dialog may contain UI elements such as sliders, text fields,
checkboxes, or radio buttons.


In other cases, such as alerts, the content may consist solely of
text that provides further context for a user decision.
3.

Action buttons
50
Action Buttons on Dialogs


Action buttons are typically Cancel and/or OK, with OK
indicating the preferred or most likely action.


However, if the options consist of specific actions such
as Close or Wait rather than a confirmation or
cancellation of the action described in the content,
then all the buttons should be active verbs


Order actions following these rules:


The dismissive action of a dialog is always on the left.
Dismissive actions return to the user to the previous state.


The affirmative actions are on the right. Affirmative actions
continue progress toward the user goal that triggered the
dialog.
51
Alerts


Alerts inform the user about a situation that
requires their confirmation or
acknowledgement before proceeding.


They differ slightly in appearance based upon the
severity and impact of the message conveyed.


When crafting a confirmation dialog, make
the title meaningful by echoing the requested
action.
52
Alerts


Alerts without title bars


Most alerts don't need
titles.


Alerts with title bars


Use alerts with title bars
sparingly.


They are appropriate
only when a high-risk
operation.
53
Popups


Popups are lightweight version of dialogs that
require a single selection from the user.


Popups don't have have explicit buttons that accept or
cancel the operation.


Instead, making a selection advances the workflow,
and simply touching outside the popup dismisses it.
54
Toasts


Toasts provide lightweight feedback about
an operation in a small popup.


For example, navigating away
from an email before you send
it triggers a "Draft saved" toast
to let you know that you can
continue editing later.


Toasts automatically
disappear after a timeout.
55
Pickers


Pickers provide a simple way to select a
single value from a set.


In addition to touching the up/down arrow
buttons, it's possible to set the desired value
from the keyboard or via a swipe gesture.


Space considerations


Pickers can be used inline
on a form, but their relatively
large footprint is best suited
for display in a dialog.
56
Date and Time Pickers


Android provides these as ready-to-use dialogs.


Each picker is a dialog with a set of controls for entering the
parts of the date (month, day, year) or time (hour, minute, AM/
PM).


Using these in your app helps ensure that a user's
specification of a data or time input is valid and formatted
correctly.
57
Resources


Downloads


http://developer.android.com/design/downloads/
index.html



Videos


The Android Design Team was pleased to present
five fantastic design-oriented sessions at Google
I/O 2012. Visit these pages to view the videos
and presentations from the conference.


http://developer.android.com/design/videos/
index.html

58