york university · 2015-01-20 · 20/01/2015 12 background ‐text button text buttons •...
TRANSCRIPT
20/01/2015
1
UI Building Blocks
EECS 4443 – Mobile User Interfaces
Scott MacKenzie
York University
© Scott MacKenzie
http://developer.android.com/design/building-blocks/index.html© Scott MacKenzie
2
(click)
20/01/2015
2
© Scott MacKenzie3
Tabs
• Fixed tabs
– All items displayed concurrently
– Touch to navigate
– Tabs are equal width (based on widest label)
© Scott MacKenzie4
20/01/2015
3
Tabs
• Scrollable tabs
– Suitable when there are many items
– Swipe/tap to navigate
tabs_scrolly.mp4
© Scott MacKenzie5
© Scott MacKenzie6
20/01/2015
4
Lists (1D)
Section Divider• Organizes the content• Facilitates scanning
Line Items• Many data types• Many arrangements• Single‐line• Multi‐line• Custom (icons, checkboxes, action buttons)
© Scott MacKenzie7
ListViewDemo ListView
© Scott MacKenzie8
20/01/2015
5
© Scott MacKenzie9
Grid Lists (2D)
Vertical Scrolling• Fixed width
Horizontal Scrolling• Fixed Height
© Scott MacKenzie10
20/01/2015
6
GridViewDemo GridView
© Scott MacKenzie11
© Scott MacKenzie12
20/01/2015
7
Scrolling
scroll_indicator.mp4 scroll_index.mp4
Index Scrolling• For long alphabetical lists• Indicator is persistent• Dragging the indicator causes the current letter to pop up in a prominent way.
Indicator• Thin line on right• Visible only when scrolling
© Scott MacKenzie13
© Scott MacKenzie14
20/01/2015
8
Spinners
• A quick way to select a value from a set
• Spinner shows currently selected value
• Touching displays a dropdown menu with other values
© Scott MacKenzie15
Spinners
Demo Sensors
© Scott MacKenzie16
20/01/2015
9
© Scott MacKenzie17
Button Use
• Use sparingly
• They have a heavy appearance
• Best if only one or two buttons on the screen
• Most appropriate for:
– Call to action (something you really want users to pursue; e.g., "Sign up")
– Key decision point (e.g., "Accept" / "Decline")
– When the user is about to commit a significant action (e.g., "Erase everything", "Buy now")
© Scott MacKenzie18
20/01/2015
10
Button Content
• Include text and/or an image to clearly communicate what action will occur when the user touches it
Text Alone• Appropriate for actions that are difficult to represent visually, or are critical to convey in words to avoid ambiguity.
Image Alone• Works best when the action can be represented by a symbol that's well understood.
© Scott MacKenzie19
Reality Check!
Image Alone• Works best when the action can be represented by a symbol that's well understood.
By whom? The programmer!An expert!The rest of us – who will eventually figure it out!
What does this mean?
Search? Magnify?or…
© Scott MacKenzie20
20/01/2015
11
Button Content
Image + Text• Most appropriate when they complement each other• Each carries its own bit of information, but together they make a larger whole
• For example, in a birthday reminder card in Google Now, the button's text describes the action while its image indicates that the action will be done in Google+.
© Scott MacKenzie21
Background ‐ Image Button
Image Buttons• Background isn't necessary because users are accustomed to interacting with objects
© Scott MacKenzie22
20/01/2015
12
Background ‐ Text Button
Text Buttons• Background is also usually unnecessary• Instead, invite users to touch by using a phrase with a clear action (e.g., "Start", "Sign in")
• Use different color and formatting than the screen's usual body text.
© Scott MacKenzie23
Reality Check!
Text Buttons• Background is also usually unnecessary• Instead, invite users to touch by using a phrase with a clear action (e.g., "Start", "Sign in")
• Use different color and formatting than the screen's usual body text.
Includes 14 day free trial
SUBSCRIBE
BUY $4.99
Which design is better?
Votes: 20 0
Includes 14 day free trial
SUBSCRIBE
Buy $4.99
© Scott MacKenzie24
20/01/2015
13
Research Results
Includes 14 day free trial
SUBSCRIBE
BUY $4.99
Includes 14 day free trial
SUBSCRIBE
Buy $4.99
© Scott MacKenzie25
Buttons
Demo Buttons
Button
ImageButtonButton
© Scott MacKenzie26
20/01/2015
14
© Scott MacKenzie27
Text Fields
• Allow the user to enter text into an app
• Single line:
• Multiline:
• Text field “types”– Number, email, phone, etc.– Determines…
• What is allowed• Layout for soft keyboard
© Scott MacKenzie28
20/01/2015
15
Text Fields with Auto‐complete
© Scott MacKenzie29
Demo EditText
© Scott MacKenzie30
20/01/2015
16
Text Selection
Selection Handles• Can be dragged to select more or less text while remaining in selection mode.
Contextual Action Bar• Displays the actions available to perform on the selection
• Typically cut, copy, and paste• Apps can insert additional commands
© Scott MacKenzie31
Text Selection
Demo EditText
© Scott MacKenzie32
20/01/2015
17
Reality Check!
Demo EditText
Android Design
Image Alone• Works best when the action can be represented by a symbol that's well understood.
Image + Text• Most appropriate when they complement each other• Each carries its own bit of information, but together they make a larger whole
From “Buttons” slide…
From “Buttons” slide…
© Scott MacKenzie33
Reality Check!
Demo EditText
Android Design
Image Alone• Works best when the action can be represented by a symbol that's well understood
• … or when space is limited and users are experts or will figure it out eventually!
Image (icon) and Text• Most appropriate when they complement each other• Each carries its own bit of information, but together making a larger whole
From “Buttons” slide…
From “Buttons” slide…
© Scott MacKenzie34
20/01/2015
18
© Scott MacKenzie35
Seek Bars and Sliders
• Select a value from a continuous or discrete range by moving slider thumb
• Good for settings that reflect intensity levels, such as volume, brightness, or color saturation
© Scott MacKenzie36
20/01/2015
19
© Scott MacKenzie37
Progress Indicator
• For situations where the percentage completed is known (e.g., copying a file)
• Always fill from 0% to 100%
• Never move backwards
• Represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.
Android Themes• Holo dark• Holo light
© Scott MacKenzie38
20/01/2015
20
Activity Indicator
• For situations where the length of the operation is indeterminate (e.g., loading a web page)
Demo WebView
© Scott MacKenzie39
© Scott MacKenzie40
20/01/2015
21
Switches
• Checkboxes
• Radio buttons
• On/off switches
© Scott MacKenzie41
Checkboxes
• Select multiple options from a set (“click all that apply”)
• Do not use to turn an option off or on (instead use an on/off switch)
© Scott MacKenzie42
20/01/2015
22
Radio Buttons
• Select one option from a set
• Use if it is necessary to see all available options
• Otherwise, consider a spinner (less space)
© Scott MacKenzie43
On/off Switches
• Toggle the state of a single settings option
© Scott MacKenzie44
20/01/2015
23
Switches
Demo Buttons
CheckBox
RadioButton
ToggleButton
© Scott MacKenzie45
© Scott MacKenzie46
20/01/2015
24
Dialogs
• Information
• Alerts
• Popups
• Feedback
• Toast
© Scott MacKenzie47
Information Dialogs
• Prompt the user for decisions or additional information required by the app to continue a task
• Can be simple
– Cancel/OK
• …or complex
– Adjust setting
– Enter text
© Scott MacKenzie48
20/01/2015
25
Information Dialog
• In parts…
Title
Content
Action Buttons
© Scott MacKenzie49
Content Examples
Radio Buttons Picker Text Field
Action Buttons Design Note• Left dismissive action• Right affirmative action
© Scott MacKenzie50
20/01/2015
26
Alerts
• Inform the user about a situation that requires their confirmation or acknowledgement before proceeding
• Differ in appearance based upon severity or impact of action
© Scott MacKenzie51
Alerts (2)
© Scott MacKenzie52
Demo Settings
20/01/2015
27
Popups
• Require a single selection from the user
• No explicit buttons
• Instead, the selection advances the workflow
• Touching outside dismisses the popup
• E.g.,
© Scott MacKenzie53
Popups (2)
© Scott MacKenzie54
Demo VoiceEmail
20/01/2015
28
Feedback
• Simply to provideinformation
GraffitiExperiment
© Scott MacKenzie55
Toast
• Lightweight popup feedback about an operation
• E.g., navigating away from an email before sending triggers a "Draft saved" toast
• Automatically disappears (fades!) after a timeout
© Scott MacKenzie56
20/01/2015
29
Demo Ink
© Scott MacKenzie57
© Scott MacKenzie58
20/01/2015
30
Pickers
• Nuanced way to select a value from a set
• Set value by
– Touching up/down arrow buttons
– Keyboard
– Swipe gesture
© Scott MacKenzie59
Pickers
© Scott MacKenzie60
20/01/2015
31
Homework
• Study all demo programs in these slides
– Read APIs (and links within)
– Study code
– Download, import as project, run
© Scott MacKenzie61
Thank You
© Scott MacKenzie62