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 Material 1 App bar 2 Navigation 3 Launch screens 4 Empty states 5 Growth 6

Material App bar Navigation Launch screens Empty states Growth Material style Material is the name for the style specification of Android apps (as of ≈ 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 or 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 of 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 of 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 or 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