York University · 2015-01-20 · 20/01/2015 12 Background ‐Text Button Text Buttons •...

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



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



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


Spinners

Demo Sensors


20/01/2015

9


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")


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.


Reality Check!


By whom? The programmer!An expert!The rest of us – who will eventually figure it out!

What does this mean?

Search? Magnify?or…


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+.


Background ‐ Image Button

Image Buttons• Background isn't necessary because users are accustomed to interacting with objects


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.


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


SUBSCRIBE

Buy $4.99


20/01/2015

13

Research Results


SUBSCRIBE

BUY $4.99


SUBSCRIBE

Buy $4.99


Buttons

Demo Buttons

Button

ImageButtonButton


20/01/2015

14


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


20/01/2015

15

Text Fields with Auto‐complete


Demo EditText


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


Text Selection

Demo EditText


20/01/2015

17

Reality Check!

Demo EditText

Android Design


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…



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




20/01/2015

18


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


20/01/2015

19


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


20/01/2015

20

Activity Indicator

• For situations where the length of the operation is indeterminate (e.g., loading a web page)

Demo WebView



20/01/2015

21

Switches

• Checkboxes

• Radio buttons

• On/off switches


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)


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)


On/off Switches

• Toggle the state of a single settings option


20/01/2015

23

Switches

Demo Buttons

CheckBox

RadioButton

ToggleButton



20/01/2015

24

Dialogs

• Information

• Alerts

• Popups

• Feedback

• Toast


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


20/01/2015

25

Information Dialog

• In parts…

Title

Content

Action Buttons


Content Examples

Radio Buttons Picker Text Field

Action Buttons Design Note• Left dismissive action• Right affirmative action


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


Alerts (2)


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.,


Popups (2)


Demo VoiceEmail

20/01/2015

28

Feedback

• Simply to provideinformation

GraffitiExperiment


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


20/01/2015

29

Demo Ink



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


Pickers


20/01/2015

31

Homework

• Study all demo programs in these slides

– Read APIs (and links within)

– Study code

– Download, import as project, run


Thank You


York University · 2015-01-20 · 20/01/2015 12 Background ‐Text Button Text Buttons •...

Documents

Transcript of York University · 2015-01-20 · 20/01/2015 12 Background ‐Text Button Text Buttons •...