BUILD

a

User Experience

... on Android

ABOUT.ME

Slides http://bit.ly/and-nav

http://eyal.fr

Eyal LEZMY

... don't loose your user

DESIGN Effective

Once Upon a Time...

a webservice, far far away...

Planning the screens

It's all about movies...

Planning the relationships

Planning the relationships

Netflix Content General actions & information

Handle the bar

... all roads lead to Home

HOME

sweet

Home

Useful for

"tools apps"

Dashboard

Dashboard

Dropdown Tabs + Content

Dropdown Tabs + Content

Closed ecosystems,

multi-accountsDifferent nature

of content

Different level

of content

Feature and organize

the content

Tabs + Content

Tabs + Content

Navigation drawer + Content

4 top-level screens minimum

Most important

screens of

your app

Navigation drawer + Content

4 top-level screens minimum

Structure the

content

Navigation drawer + Content

Add general

actions (search,shorcuts, ...)

4 top-level screens minimum

Make your

action bar

more contextualOptional

Navigation drawer + Content

4 top-level screens minimum

Navigation drawer + Content

4 top-level screens minimum

Except Settings,

About & Helpby convention

Make your

action bar

more contextualOptional

Very powerful...

but complex !

You have to know why

you are using it!

Navigation drawer + Content

Choose your home

It's all about movies... as I said

Content + Tab

of course :-)

Our choice

All roads lead to Home

Latteral navigation

...from S to XXL

Size

Matters

Multi-pane Layout Pattern

Multiple screen sizes

Multiple screen sizes

PanelPanel Panel PanelPanel

Panel Panel Panel

Panel

Multi-pane Layout Pattern

Multi-panel design layout

Panel

Fragment!

DesignDev

Frag...

what?!

The fragment

Open

The fragment

Update

Use the system resources

res/layout/main.xml

res/layout-large/main_two_panes.xml

res/layout-sw600dp/main_two_panes.xml

Multi-screen UI

Default>= 7"

>= 600dp

Avoid file duplication with aliases

res/layout/main.xmlres/layout/main_two_panes.xml

res/values-large/layout.xmlres/values-sw600dp/layout.xml

Multi-screen UI

Define the 2 layouts

on the default folder

Define aliases using

the filters

Avoid file duplication with aliases

<resources> <item name="main" type="layout">

@layout/main_two_panes</item>

</resources>

Multi-screen UI

Override main by main_two_panes

for large and sw600dp screens

Fork the code

Multi-screen UI

res/values/bools.xmlres/values-large/bools.xmlres/values-sw600dp/bools.xml

<resources><bool name="isTwoPanes">

true|false</bool>

</resources>

true or false:

explicite definition

Boolean values dealing

with the filters

Fork the code

boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);

if (isTwoPanes) // launch a tablet activity

else // launch a phone activity

Multi-screen UI

We fork the code based on

the isTwoPanes value

... and now the result

We're

done!

Wireframe for phone

Wireframe for tablet

Design Effective Navigationhttp://developer.android.com/training/design-navigation/index.html

Navigation Drawerhttp://developer.android.com/design/patterns/navigation-drawer.html

Fragmentshttp://developer.android.com/guide/components/fragments.html

Implement Effective Navigationhttp://developer.android.com/training/implementing-navigation/index.html

REFERENCES

THANK YOU!

Slides http://bit.ly/and-nav

http://eyal.fr