UI Design Patterns

Designing great Android UIs Software Development for Portable Devices BITS Pilani Goa Campus Sem I 2011-12

Essence of Good UI Design Clear UI – Focus on Content - Consistency

Software Development for Portable Devices | BITS - Pilani, Goa Campus

2

UI Design Patterns 1. 2. 3. 4. 5. 6.

Dashboard Action Bar Search Bar Quick Actions Companion Widget Tabs

Software Development for Portable Devices | BITS - Pilani, Goa Campus

3

Dashboard Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

4

Dashboard

? Software Development for Portable Devices | BITS - Pilani, Goa Campus

5

Dashboard “What can I do with this app? What’s new?”  A quick intro to an app, revealing capabilities and proactively highlighting new content  Full-screen  Can be organized by: • Features • Categories • Accounts

Software Development for Portable Devices | BITS - Pilani, Goa Campus

6

Dashboard Recommendations  DO highlight what’s new  DO focus on 3-6 most important choices  DO be flavorful

Software Development for Portable Devices | BITS - Pilani, Goa Campus

7

Action Bar Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

8

Action Bar “How can I do quickly?”  Dedicated real estate at top of the screen to support navigation and frequently used operations  Replaces title bar  Best for actions common across your app : • Search • Refresh • Compose (new)  Can provide a quick link back to dashboard (or other app home)

Software Development for Portable Devices | BITS - Pilani, Goa Campus

9

Action Bar Recommendations    o

DO use to bring key actions onscreen DO help to convey a sense of place DO use consistently within your app DON’T use for contextual actions

Software Development for Portable Devices | BITS - Pilani, Goa Campus

10

Quick Actions Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

11

Quick Actions “What can I do with this thing?”    

Action popup triggered from distinct visual target Minimally disruptive to screen context Actions are straightforward Fast & fun

Software Development for Portable Devices | BITS - Pilani, Goa Campus

12

Quick Actions Recommendations    o

DO use when items have competing internal targets DO present only the for most important and obvious actions DO use when the item doesn’t have a meaningful detail view DON’T use in contexts which support multiple selection

Software Development for Portable Devices | BITS - Pilani, Goa Campus

13

Search Bar Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

14

Search Bar “How can I find something?”     

Consistent pop-in search form anchored to top of screen Replaces action bar (if present) Support suggestions Can use corpora selector to alter search mode Alternately, can offer suggestions for primary search mode, and additional items for triggering other modes

Software Development for Portable Devices | BITS - Pilani, Goa Campus

15

Search Bar Recommendations  DO use for simple searches  DO present rich suggestions  DO use the same behavior

Software Development for Portable Devices | BITS - Pilani, Goa Campus

16

Companion Widget Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

17

Companion Widget “Can I make this app a fun part of my Home screen?” 

Supports the app by displaying its content and capabilities on the Home screen.



Makes Home feel more custom, personalized.

Software Development for Portable Devices | BITS - Pilani, Goa Campus

18

Companion Widget Recommendations    o

DO provide value above a simple app icon (content) DO handoff to the full app for real tasks DO be space efficient DON’T just provide a larger app launcher

Software Development for Portable Devices | BITS - Pilani, Goa Campus

19

Tabs Examples

Software Development for Portable Devices | BITS - Pilani, Goa Campus

20

Tabs    

Divide the App into major Tasks Should save the view when switching Minimum number of Tabs Allow use of Back button

Software Development for Portable Devices | BITS - Pilani, Goa Campus

21

Variant: Horizontal Scrolling Tabs

Software Development for Portable Devices | BITS - Pilani, Goa Campus

22

Blueprint for a great Android app

Software Development for Portable Devices | BITS - Pilani, Goa Campus

23

All the Best !!

Software Development for Portable Devices | BITS - Pilani, Goa Campus

24