UI in Android J.Serrat 102759 Software Design November 29, 2017 - - PowerPoint PPT Presentation

UI in Android

J.Serrat

102759 Software Design

November 29, 2017

Goal and Reference

Goals: quick introduction to the basics of UI Android app structure, patterns, components and style. setting up terminology relevant for the project Reference: http://developer.android.com/design which redirects to http://material.io/guidelines These slides are a selection of this website under patterns, layout, components.

Index

1

Material

2

App bar

3

Navigation

4

Launch screens

5

Empty states

6

Growth

Material App bar Navigation Launch screens Empty states Growth

Material style

Material is the name for the style specification of Android apps (as

• f ≈ 2015)

paper = planar surfaces that superimpose in 3D + ink = color, imagery, typography.

4 / 30

Material App bar Navigation Launch screens Empty states Growth

App bar

Formerly “action bar”, special kind of normally permanent toolbar used for branding, identity by title, color, typography indicate user’s location in the app access to main actions support for navigation through the app & view switching

5 / 30

Material App bar Navigation Launch screens Empty states Growth

App bar

The nav icon at the left can be: nothing, omitted control to open a navigation drawer up button for navigating upward through the app’s hierarchy

6 / 30

Material App bar Navigation Launch screens Empty states Growth

App bar

Title can be app name name of the current page page filter Icons are app-related actions (buttons) Plus overflow action which opens the overflow menu, with secondary actions and menu items like help, settings, and feedback.

7 / 30

Material App bar Navigation Launch screens Empty states Growth

Navigation

Navigation means decide the structure of the app as seen by the user and how the user moves through it Users should be able to figure out how to move through the app with ease. The structure guides users through the different parts. Examples: display important destinations/parts of the app in tabs, nav drawer, side navigation in hierarchies, denote parent-child, sibling relations inessential content shown apart, in different locations than important content

8 / 30

Material App bar Navigation Launch screens Empty states Growth

Up and back buttons

Up button navigates within an app based on the hierarchical relationships between screens goes to the previous screen the user has viewed but within the app if a screen is the app’s home, it should not present an Up button

9 / 30

Material App bar Navigation Launch screens Empty states Growth

Up and back buttons

Back button navigates in reverse chronological order through recently viewed screens. may take the user outside of the app also dismisses dialogs, pop-ups, clears selected items, hides keyboard . . .

10 / 30

Material App bar Navigation Launch screens Empty states Growth

Tabs

Use tabs for navigating between a few groups of content to quickly move between a small number of equally important

• r sibling views

when there are parents with embedded child views need to frequently switch between views in apps with few top-level views

11 / 30

Material App bar Navigation Launch screens Empty states Growth

Tabs

Don’t use tabs for carousels or pagination of content for content of different importance nested tabs for content accepting sweep

12 / 30

Material App bar Navigation Launch screens Empty states Growth

Tabs

Types of tab bars fixed scrollable with text and icons with just icons

13 / 30

Material App bar Navigation Launch screens Empty states Growth

Bottom bar

Similarly to tabs, allows users to quickly move between a small number of top-level views But located in a more ergonomic location, easily reachable by the thumb Also for destinations requiring direct access from anywhere in the app 3 to 6 destinations, if 2 use tabs if > 6 use nav drawer

14 / 30

Material App bar Navigation Launch screens Empty states Growth

Navigation drawer

When there many top-level views/destinations, instead

• f tabs side navigation is a

good alternative. A drawer remains hidden until invoked by the user. The most frequently accessed destinations at the top. Settings and support at the bottom

15 / 30

Material App bar Navigation Launch screens Empty states Growth

In-context navigation

Allows agile movement between related sets of data. Appropriate for hierarchies

• f parents with siblings

(trees) The up button is used to return to the previous level, better than back button.

16 / 30

Material App bar Navigation Launch screens Empty states Growth

Launch screens

Launching your app while displaying a blank canvas increases its perceived loading time The launch screen is a user’s first experience of your application. Should be used for cold launch from the home screen, not if it’s in background

17 / 30

Material App bar Navigation Launch screens Empty states Growth

Launch screens

Two types: A placeholder UI displays the app and bottom bars without content until the app has loaded. Branded launch screens display logo and other elements that improve brand recognition. More on this at UI patterns slides.

18 / 30

Material App bar Navigation Launch screens Empty states Growth

Empty states

Empty states occur when an item’s content can’t be shown : a list that doesn’t contain any items a search that doesn’t display any results Although these states aren’t typical, they should be designed to prevent user confusion. Alternatives to empty states Starter content Educational content Best match

19 / 30

Material App bar Navigation Launch screens Empty states Growth

Empty states

The most basic empty state displays a non-interactive image and a text tagline. Use an image that is subtle and neutral with respect to the background Include a tagline that has a positive tone, conveys the purpose of the app without appearing to be actionable Do why don’t ?

20 / 30

Material App bar Navigation Launch screens Empty states Growth

Empty states

Starter content The most compelling way for new users to learn the app is by using it Provide starter content that will allow users to explore the app right away Use content that has broad appeal and demonstrates primary features Give users the ability to delete and replace this content

21 / 30

Material App bar Navigation Launch screens Empty states Growth

Empty states

Educational content Help users understand what they’ll be able to do on this screen once it has content Make it possible to dismiss

• r skip this content

Keep it brief

22 / 30

Material App bar Navigation Launch screens Empty states Growth

Empty states

Best match If nothing exactly matches the user’s query, are there any results for a query spelled slightly differently? If so, then show the results way to handle a misspelled query without explicitly placing blame on the user make clear the results are not those for the actual query

23 / 30

Material App bar Navigation Launch screens Empty states Growth

Growth

How to help users quickly and intuitively understand what they can do with the app : Onboarding is the first experience new users have with the

• app. The goal is retaining new users by using, in the first

days,

Self-select Quick start Top user benefits

Feature discovery

24 / 30

Material App bar Navigation Launch screens Empty states Growth

Onboarding : Self-select

Ask users to make a short series of choices to customize their first-run experience Choices are meaningful and short This experience provides implicit education Gives the user a sense of control and makes him curious on the screens to come

25 / 30

Material App bar Navigation Launch screens Empty states Growth

Onboarding : Quick start

Users land directly in the UI without any onboarding model shown Gives users something to do, encourage action Enables users to quickly get started with the core functionality of the app

26 / 30

Material App bar Navigation Launch screens Empty states Growth

Onboarding : Quick start

Often prioritizes the first key action

27 / 30

Material App bar Navigation Launch screens Empty states Growth

Onboarding : Quick start

Don’t force education upfront

28 / 30

Material App bar Navigation Launch screens Empty states Growth

Onboarding : Top user benefits

Brief autoplay carousel/animation that highlights three primary benefits from using the app Relevant benefits, rather than give instructions or describe features Consider problems that the app solves, everyday features

29 / 30

Material App bar Navigation Launch screens Empty states Growth

Feature discovery

Provide value and improve engagement by introducing users to new features At contextually relevant moments, at the wrong time can be intrusive and annoying Users may dismiss the prompt by using a swipe gesture or tapping outside of the prompt’s background area

30 / 30