Mobile

Mobile App Spec

Written by Jono Bacon (jono At ubuntu DOT com).

This document outlines a core spec for how a cross-platform Mobile app can work for Ubuntu Accomplishments.

Core Input Approach

The mobile app has a few core input mechanisms:

  • Swipe Left/Right - switch categories in the My Trophies / Opportunities views. If viewing Opportunity Information, a swipe left/right will show information for the previous or next opportunity.

  • Scroll Up/Down - scroll the list of Trophies in My Trophies or scroll the list of opportunities in the current category/sub-category in the Opportunities view.

  • Menu - the Menu (either menu button in Android or Menu center option on iPhone) is pressed there are different options. See below.

  • -

My Trophies

The My Trophies view looks like this:

http://farm8.staticflickr.com/7238/7190174539_a733abe131_b.jpg

Here you can see all of the trophies at first, and then as you swipe left/right, it flicks between the different categories (note, there are no sub-category filters in this view). Tapping a trophy shows the accomplishment details (same as in the Web UI/Desktop, just re-formatted for mobile).

Each time the category is changed after a swipe, the upper category is selected. Swiping left/right also scrolls the category line to show the user that other categories can be swiped to.

Opportunities

The Opportunities view looks like this:

http://farm9.staticflickr.com/8027/7190174477_6ba43be970_b.jpg

In terms of swiping it works the same way as My Trophies, but at the bottom there is a sub-categories filter for the current category; this works in the same way as the desktop app (it is only shown if there are opportunities with sub-categories, and the arrows can move between sub-cats...tapping a sub-cat will select it).

Opportunity Information

When a user taps an opportunity, the details are presented:

http://farm8.staticflickr.com/7215/7375418224_63167cd41f_b.jpg

The user can get back to the big list of opportunities by tapping the top Opportunities button.

Implementation

All of the UI will be exposed via a special stylesheet in the Web Gallery. I recommend we have a core mobile stylesheet and then we can tune it to different devices. For example:

This means that some of the image assets can look more native to the device being used.

The mobile app would just need to include a webkit widget (or other web widget) that shows the site, and then map input events to URLs.

The Web Gallery team will need to figure out these URLs and how they map to input events. For example, in the Opportunities view, users can swipe left/right, these could be the URLs:

It would be helpful if the Web Gallery performed the smooth transitions.

I would recommend that on Android, when someone hits the menu button, it displays native buttons for the different options (e.g. Profile, Settings), but each option links to the different settings panels on the site.

This will mean having a settings page for each option and a mobile stylesheet. For example:

There may be an easier way of doing this.

Accomplishments/Specs/Mobile (last edited 2012-06-15 18:35:40 by 99-41-167-234)