Android Applications Design Topics - etcs.ipfw.edulin/CPET565/2016S/1-Lecture/... · Android...

1

1

CPET 565/499

Mobile Computing Systems

Lecture on

Android Applications Development, Design, and

Design Patterns

Spring 2016

A Specialty Course for Purdue University’s M.S. in Technology

Graduate Program

Paul I-Hai Lin, Professor

Dept. of Computer, Electrical and Information Technology

Purdue University Fort Wayne Campus

Prof. Paul Lin

Android Applications Design Topics

Google - Android Developers: Patterns,https://www.google.com/design/spec/patterns/data-formats.html

Data formats

Empty states

Errors

Gestures

Fingerprint

Launch screens

Loading images

Navigation

Navigation drawerProf. Paul Lin 2

Navigation transitions

Notifications

Permissions

Scrolling techniques

Search

Selection

Settings

Swipe to refresh

2

Patterns – Data formats

Data formats, https://www.google.com/design/spec/patterns/data-formats.html#• Date & time (format, ranges, time zones, etc)

• Data redaction and truncation

Prof. Paul Lin 3

Patterns – Empty states

Empty states, https://www.google.com/design/spec/patterns/empty-states.html• Empty states occur when the regular content of a view can’t be

shown. It might a list which has no items, or a search which returned no results.

• Displaying empty states

• Avoiding completely empty states

Prof. Paul Lin 4

3

Patterns - Errors

Errors, https://www.google.com/design/spec/patterns/empty-errors.html

• Error occur when an app fails to complete an expected action.

• Usage

• User input errors

• App errors

• Incompatible state errors

Prof. Paul Lin 5

Patterns - Gestures

Gestures, https://www.google.com/design/spec/patterns/gestures.html

• Touch Mechanics: what your finger do on the screen, Touch, Double Touch

Drag, Swipe, Flying

Swipe may have multiple results such as enable/disable

• Touch Activities: results of specific gestures Zoom in may be achieved through multiple touch

mechanics

Drag, Swipe and Flying details

Prof. Paul Lin 6

4

Patterns - Gestures

Drag, Swipe and Flying details, https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-activities

• Drag: fine gesture, slower, more controlled, typically has an on-screen target

• Swipe: gross gesture, faster, typically no on-screen target

• Fling: gross gesture, with no on-screen target

Scroll – a vertical or horizontal in a single direction within the content body

Prof. Paul Lin 7

Patterns – Fingerprint (Android only)

Fingerprint (Android only), https://www.google.com/design/spec/patterns/fingerprint.html

• Fingerprint detection can be used to unlock a device, sign in to apps, and authenticate purchases with Google Paly and some third-party apps.

• Fingerprint is not as secure as a strong PIN or password.

• Enrollment

• Authentication

• Behavior

• Fingerprint icon

• Reauthentication

Prof. Paul Lin 8

5

Patterns – Launch screens

Launch screens, https://www.google.com/design/spec/patterns/launch-screens.html

• Types of launch screens

• Placeholder UI

• Branded launch

Prof. Paul Lin 9

Patterns – Loading images

Loading images, https://www.google.com/design/spec/patterns/loading-images.html

• Illustration and photographs may load and transition in three phases at staggered, duration, rather than relying on opacity shifts.

• Combine opacity, exposure, and saturation changes to suit your needs

Prof. Paul Lin 10

6

Patterns – Navigation

Navigation, https://www.google.com/design/spec/patterns/navigation.html

• Navigation guides users between different parts of your app.

• Usage – Navigation through your app should be intuitive and predictable

• Defining your navigation

• Hierarchy

• Patterns

• Combined patterns

Prof. Paul Lin 11

Patterns – Navigation drawer

Navigation drawer, https://www.google.com/design/spec/patterns/navigation-drawer.html

• The navigation drawer slides inform the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.

• Specs

• Content

• Behavior

Prof. Paul Lin 12

7

Patterns – Navigational transitions

Navigational transitions, https://www.google.com/design/spec/patterns/navigational-transitions.html

• Navigational transitions are movements between states in an app, such as from a high-level view to detailed view. Most, but not all, transitions are hierarchical in nature.

• Parent to child

• Sibling to sibling

Prof. Paul Lin 13

Patterns – Notifications

Prof. Paul Lin 14

Notifications, https://www.google.com/design/spec/patterns/notifications.html

• Notifications inform your app’s users about relevant and timely events in your app.

• Usage

• Guidelines

• Content

• Behavior

• Peeking notifications

8

Patterns – Permissions

Prof. Paul Lin 15

Permissions, https://www.google.com/design/spec/patterns/permissions.html

• Permission requests should be simple, transparent, and understandable. When requesting access, apps should ensure that either the feature itself or an explanation provided makes it clear why a permission is needed.

• Usage Permission groups: Calendar, Camera, Contacts, Location,

Microphone, Phone, Body sensors, SMS, Storage

• Runtime permissions

• Request patterns

• Denied permissions

Patterns – Scrolling techniques

Prof. Paul Lin 16

Scrolling techniques, https://www.google.com/design/spec/patterns/scrolling-techniques.html

• Scrolling

• Scrolling regions: When designing scrolling behavior, app bars contains four main regions (referred to as blocks) that comprise the scrolling structure:

Status bar

Tool bar

Tab bar/search bar

Flexible space: space to accommodate a desired aspect ratio for images or extened app bars

9

Patterns – Search

Prof. Paul Lin 17

Search, https://www.google.com/design/spec/patterns/search.html

• In-app search – When an app supports large amounts of information, users should be able to quickly locate content by searching.

• Basic search involves:

1. Opening a search text field

2. Entering and submitting a query

3. Displaying a set of search results

Patterns – Search

Prof. Paul Lin 18

Search, https://www.google.com/design/spec/patterns/search.html

• Additional better search experience Voice search

Historical search suggestions based on recent user queries, before a query is completed

Auto-complete search suggestions matching actual results in your application data

• Two major patterns for in-app search: Persistent search

Expandable search

10

Patterns – Selection

Prof. Paul Lin 19

Selection, https://www.google.com/design/spec/patterns/selection.html

Usage• The Selection Gesture: a long-press, touch, two-finger touch

• Checkboxes:

On mobile

On desktop

Item Selection

Text Selection

Patterns – Settings

Prof. Paul Lin 20

Settings, https://www.google.com/design/spec/patterns/settings.html• Application settings let users indicate their preferences for

how an app or service should behave

Placement

Usage

Grouping settings

Labels and secondary text

Writing guideline

11

Patterns – Swipe to refresh

Prof. Paul Lin 21

Swipe to refresh, https://www.google.com/design/spec/patterns/swipe-to-refresh.html

• Updating content

• Swipe to refresh

• Refresh indicator positioning and behavior

• Refresh indicator transitions

• Implementation details

Summary

Prof. Paul Lin 22