User experience and interactions design

1. User Experience and Interactions
Design
Rakesh Kumar Jha
M. Tech, MBA
Delivery Manager

2. Best Practices for Interaction and
Engagement
• These classes teach you how to engage and
retain your users by implementing the best
interaction patterns for Android.

3. Best Practices for Interaction and
Engagement
1. Designing Effective Navigation
2. Implementing Effective Navigation
3. Notifying the User
4. Adding Search Functionality
5. Making Your App Content Searchable by
Google

4. Designing Effective Navigation
1. Planning Screens and Their Relationships
2. Planning for Multiple Touchscreen Sizes
3. Providing Descendant and Lateral Navigation
4. Providing Ancestral and Temporal Navigation
5. Putting it All Together: Wireframing the
Example App

5. Implementing Effective Navigation
1. Creating Swipe Views with Tabs
2. Creating a Navigation Drawer
3. Providing Up Navigation
4. Providing Proper Back Navigation
5. Implementing Descendant Navigation

6. Notifying the User
1. Building a Notification
2. Preserving Navigation when Starting an
Activity
3. Updating Notifications
4. Using Big View Styles
5. Displaying Progress in a Notification

7. Adding Search Functionality
1. Setting up the Search Interface
2. Storing and Searching for Data
3. Remaining Backward Compatible

8. Making Your App Content Searchable
by Google
1. Enabling Deep Links for App Content
2. Specifying App Content for Indexing

9. Designing Effective Navigation

10. Planning Screens and Their
Relationships
• Buttons leading to different sections (e.g.,
stories, photos, saved items)
• Vertical lists representing collections (e.g.,
story lists, photo lists, etc.)
• Detail information (e.g., story view, full-screen
photo view, etc.)

11. Planning for Multiple Touchscreen
Sizes
• Designing applications for television sets also
requires attention to other factors, including
interaction methods (i.e., the lack of a touch
screen), legibility of text at large reading
distances, and more.
• Although this discussion is outside the scope
of this class,

12. Planning for Multiple Touchscreen
Sizes
• Group Screens with Multi-pane Layouts
• Design for Multiple Tablet Orientations
• Group Screens in the Screen Map
• Android Design: Multi-pane Layouts
• Designing for Multiple Screens

13. Providing Descendant and Lateral
Navigation
• Buttons and Simple Targets
• Lists, Grids, Carousels, and Stacks
• Tabs
• Horizontal Paging (Swipe Views)
• Android Design: Buttons
• Android Design: Lists
• Android Design: Grid Lists
• Android Design: Tabs
• Android Design: Swipe Views

14. Putting it All Together: Wireframing
the Example App
• Choose Patterns
• Sketch and Wireframe
• Create Digital Wireframes

15. Putting it All Together: Wireframing
the Example App
• Wireframing is the step in the design process
where you begin to lay out your screens. Get
creative and begin imagining how to arrange
UI elements to allow users to navigate your
app. Keep in mind that at this point, pixel-perfect
precision (creating high-fidelity
mockups) is not important

16. Putting it All Together: Wireframing
the Example App
• Wireframing is the step in the design process
where you begin to lay out your screens. Get
creative and begin imagining how to arrange
UI elements to allow users to navigate your
app. Keep in mind that at this point, pixel-perfect
precision (creating high-fidelity
mockups) is not important

17. Implementing Effective Navigation

18. Designing Effective Navigation
• how to implement the key navigation design
patterns detailed in the Designing Effective
Navigation

19. Designing Effective Navigation
• how to implement the key navigation design
patterns detailed in the Designing Effective
Navigation
• how to implement navigation patterns with
tabs, swipe views, and a navigation drawer
• Several elements require the Support
Library APIs.

20. Creating Swipe Views with Tabs
• Learn how to implement tabs in the action bar
and provide horizontal paging (swipe views) to
navigate between tabs or left navigationbar.
• wipe views provide lateral navigation between
sibling screens such as tabs with a horizontal
finger gesture (a pattern sometimes known as
horizontal paging)

21. Creating Swipe Views with Tabs
• <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
• To insert child views that represent each page, you need to hook this
layout to a PagerAdapter. There are two kinds of adapter you can use:

22. Creating Swipe Views with Tabs
• FragmentPagerAdapter –
This is best when navigating between sibling
screens representing a fixed, small number of
pages.
• FragmentStatePagerAdapter –
This is best for paging across a collection of objects
for which the number of pages is undetermined. It
destroys fragments as the user navigates to other
pages, minimizing memory usage.

23. Creating Swipe Views with Tabs
public class CollectionDemoActivity extends FragmentActivity {
// When requested, this adapter returns a DemoObjectFragment,
// representing an object in the collection.
DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
ViewPager mViewPager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collection_demo);
// ViewPager and its adapters use support library
// fragments, so use getSupportFragmentManager.
mDemoCollectionPagerAdapter =
new DemoCollectionPagerAdapter(
getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mDemoCollectionPagerAdapter);
}
}

24. Creating Swipe Views with Tabs
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
public DemoCollectionPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
Fragment fragment = new DemoObjectFragment();
Bundle args = new Bundle();
// Our object is just an integer :-P
args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
fragment.setArguments(args);
return fragment;
}
@Override
public int getCount() {
return 100;
}
@Override
public CharSequence getPageTitle(int position) {
return "OBJECT " + (position + 1);
}
}

25. Creating Swipe Views with Tabs
/ Instances of this class are fragments representing a single
// object in our collection.
public static class DemoObjectFragment extends Fragment {
public static final String ARG_OBJECT = "object";
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
// The last two arguments ensure LayoutParams are inflated
// properly.
View rootView = inflater.inflate(
R.layout.fragment_collection_object, container, false);
Bundle args = getArguments();
((TextView) rootView.findViewById(android.R.id.text1)).setText(
Integer.toString(args.getInt(ARG_OBJECT)));
return rootView;
}
}

26. Add Tabs to the Action Bar
• Action bar tabs offer users a familiar interface
for navigating between and identifying sibling
screens in your app.

27. @Override
public void onCreate(Bundle savedInstanceState) {
final ActionBar actionBar = getActionBar();
...
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create a tab listener that is called when the user changes tabs.
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
// show the given tab
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
// hide the given tab
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// probably ignore this event
}
};
// Add 3 tabs, specifying the tab's text and TabListener
for (int i = 0; i < 3; i++) {
actionBar.addTab(
actionBar.newTab()
.setText("Tab " + (i + 1))
.setTabListener(tabListener));
}
}

28. Change Tabs with Swipe Views
@Override
public void onCreate(Bundle savedInstanceState) {
...
// Create a tab listener that is called when the user changes tabs.
ActionBar.TabListener tabListener = new ActionBar.TabListener() {
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction
ft) {
// When the tab is selected, switch to the
// corresponding page in the ViewPager.
mViewPager.setCurrentItem(tab.getPosition());
}
...
};
}