june 12, 2008 home on mototouch core information architecture and key interactions home screen idle...

June 12, 2008

Home on MotoTouchCore Information Architecture and Key Interactions

home screenidlemain menu notificationswidgets

(work-in-progress)

Home on MotoTouch. CXD Experience Planning April 2008.

Feedback From March 17 Review

• Align dashboard, home screen, idle,

notifications, widgets, main menu

• Increase architectural consistency across all franchises

• Simplify experiences and interactions


Contents

• Overview & elements• Franchise implementations• Summary/big questions• Next steps/transition plan


Assumptions

Designing towards future touch platform “MotoTouch”– Vision to define future designs– Building on SimpleTouch

• Full touch

• Hierarchical back with case by case state retention

• UI elements/interactions/gestures

– Web and Native widgets are a key element of the UI

Consistency means– Solid framework covering information architecture, UI elements,

interactions/gestures.– Flexibility: limited, occasional deviation from framework on a

franchise by franchise basis.

Framework and Elements


Gesture Legend


Anatomy of Home


Home

Purpose:• Home is the starting point

Benefits:• Home is the starting point, it is someplace

familiar to consumers. Offering a safe, orienting, mental landing place & starting / re-starting point in the user interface.

• In the past the content on home encompassed notifications, and shortcuts into apps, but little content. This design expands on that view by providing a framework for including content into the home screen. The home “screen” becomes the home “space” where you can navigate between content (panels) and dip in and out of content (chips).


Rules: • The Home hard key will take you to the

home screen. • Back is hierarchical – the back key will not

bring you home – only to the highest level of the app

Open Questions: • None

Home


Panels

Benefits:• Create a personalized view of their content on the home screen.

For instance, Panels can be defined around a topic, activity, group of people, etc.

• Allows a good way to do monitoring, of disparate information.

Purpose:• Panels are a way to expand the home space• Panels provide a means of organizing content into logical/useful

groupings


Panels

Rules: • The default panel out of box = franchise dashboard• Panels are always full screen • Only one panel can be seen at a time ( exception – edge of adjacent

panel(s) can be visible if an affordance is needed to help with navigation...• Number of panels: at least one, but not to exceed 9. Due to 7 +/- 2• Panels contain one or more chips which allow “dipping” into various

supporting applications• Full applications do not live on a panel• There is nothing under or behind the panels• The panel swiping interaction must not interfere with main menu or status

curtain interactions • Panels can be configured via the panel management application

Open Questions: • Should the out of box panel experience be defined as default panel +

wizard for creating new custom panels?• To what degree can users configure or tweak preferences for their

franchise panel (dashboard)?• Can users turn off the franchise panel (e.g. what happens if people buy a

ROKR phone because it looks cool, but don’t really want music info on the home screen)?

• How will franchise panels/chips work without a data plan?• Should panels be sticky/persist? On returning to home, should the panel

in view be the franchise dashboard? What happens in Multitask which has a dashboard that extends over 3 panels?


Dashboard Panel

Purpose:• The dashboard is a collection of chips on the primary panel that

introduces/orients people with content related to the core franchise experiences

• The dashboard gives a snapshot of “what is going on right now” and is:• at a glance• up to date (timely, fresh, relevant)• informative• actionable

Benefits:• Provides clear quick informative views of recent, and relevant

information / content communication • Makes the device feel alive and full of activity • Encourages and triggers continued communication• Focuses the user around core franchise experiences and provides the

most straight forward path to interacting with that experience


Dashboard Panel

Rules: • A dashboard lives on home as a single full screen panel• A franchise may have additional pre-configured, custom panels (e.g.

Multitask People Panel)• User configurable to a degree, will at least have settings/preferences

for dashboard content• The dashboard panel cannot be deleted (however, the dashboard

panel does not necessarily need to remain the default, nor be sticky)

Open Questions: • none


Chips

Purpose: • A container of content that allows people to put one more “things”

on a panel.

Benefits: • Chips allow content information to be previewed and likely next

actions to be taken without leaving the panel/dashboard.


Chips

Open Questions: • Can typing within a chip be allowed• Where are individual chip settings/preferences accessed• Timeout value for shrinking an expanding view needs to be determined• Need to determine whether to go with bulldozing or overlay approach

Rules: • A chip can fill an entire panel but is never smaller than a touch target (9x9

mm).• Chips come in many shapes and sizes: full panel, stripes, livecons.• A panel can contain chips of different shapes and sizes.• Content can be an app shortcut, web widget, native widget, contact

shortcut, RSS feed, playlist, network content, piece of media that’s playable, preview of a song, presence update, messages, video, picture song, thumbnails, content, content shortcut, content preview, controller.

• Chips are added/arranged/removed via the panel management app.


Chips


Main Menu

Purpose: • A container of content that allows people to put one more “things”

on a panel.

Benefits: • The main menu allows consumers to access all the device

applications.


Main Menu

Open Questions: • How much customization: reordering, grouping, folders, nesting…• How are groups expanded: bulldozing, overlay etc• If the default is “launcher” view should the expanded view show the entire top

row again or should they be bleeding off the top of the main menu to show access and affordance of scrolling within main menu?

• Does the main menu contain more than apps: bookmarks, playlists etc• Can users filter / sort?• Do we have multiple visual representations: grid, list etc

Rules: • Main menu is only available from home (Exception: Multitask has a persistent

main menu)• The default position must not interfere with panel or status curtain interactions• The menu has two states: open and closed.

• The open state expands to the full screen.• The closed state is either the top row of icons showing as a launcher or minimized (no launcher).

• The main menu curtain affordance (handle) is always visible• The main menu can be accessed from any panel on home• The main menu can be scrollable• User can re-order menu icons• The launcher may be represented differently in different devices and different

franchises based on experience alignment.• Live cons can be used• There is no "stickiness" when user returns home the main menu is in the

default state: closed (minimized or launcher)• There can there be redundancy between panel and main menu items (through

the content) i.e. if there is a calendar event in the panel, there would also be a calendar in the main menu


Main Menu (groupings)


Notifications (on home)

Benefits:• Alerts/reminds users of things going on• Provides additional information via previews• Keeps users form being annoyed by “all the things going on”• Doesn’t obstruct users from completing tasks

Purpose:• Not let you miss anything• Alerts users according to the priority of the notification:

• Time Critical (Synchronous) Alerts user to things which are only relevant at/for a specific time. Such as Calendar, Alarm, Incoming Call, etc.• Time Sensitive (Asynchronous) Alerts user to things like SMS, IM, upcoming concert, email, etc.• Other (Asynchronous) Social networking updates, media updates, etc


Notifications (on home)

Rules: • There are three types of notifications – low, medium and high priority. • High priority notifications interrupt the user + require a response, but will

time out. • Medium priority notifications fill partial screen on home and only one line

(interactive bubble) in task• Low priority notifications do not interrupt notify or remind• Low priority notifications can be upgraded to Medium priority if the

franchise would like to notify/remind user of this content type. This may also be user customizable – e.g. user can choose to be notified of emails.

• Notifications time out after an interval and are then displayed in the notification curtain (UNS)

• Notifications are grouped by Contact rather than by type in the UNS

Open Questions: • What are rules for whether or not curtain is open when you come to home

screen? Current thinking is only open if you come to home and there is a reminder you haven’t yet seen on home.

• Visual treatment of status bar when there are missed notifications – are there icons for different notification types?

• Time out durations need to be determined


Notifications (in task)

Rules: • In-task interruptions follow the same paradigm as existing STUI

(Halo) • High priority notifications are full screen and modal• Medium priority notifications are less intrusive than on home

Open Questions:• What is the visual treatment of status bar when there are missed

notifications • Could in-task notifications have chip-like behavior?• What is state retention behavior for apps – how does this impact

interruption and back path (hierarchical vs. historical back)• How is a user notified during video recording?


Managing Chips


Persistent Franchise Elements

Rules: • Persistent players elements generally be “always accessible”

however in some areas of the UI such as camera view finder, deep settings, full screen web browser.

Persistent Player Persistent Main menu

MultiTask


MultiTask: Dashboard Panels

“People” Panel “Me” Panel “News” Panel


MultiTask: “Me” Chips

“Me” Chips- Information I need during

the day- Primarily pushed from

native apps– Latest email updates– Upcoming calendar events– My bookmarks– To-do list (editable in

expanded)– World clock– My Twitter presence (and

ability to update in expanded)


MultiTask: “Me” Chips

Email chip Bookmarks chip To-Do List chip


MultiTask: “People” Chips

“People” Chips include– Presence for the top people

in my life (up to 6 people)– Updates from social

networking sites such as facebook, lastFM, and twitter


MultiTask: “News” Chips

“News” Chips include– Third party widgets – CNN, BBC, weather, TMZ,

and YouTube– User can also create

“stalker” chips by initiating a continuous search


MultiTask: “News” Chips Expanded

CNN news feed chip Weather chip YouTube chip


MultiTask: Chips in Landscape


MultiTask: Top Main Menu Items

june 12, 2008 home on mototouch core information architecture and key interactions home screen idle...

Documents

home purpose

home space panels

anatomy of home slide

home hard key

home encompassed notifications

content panels

cxd experience planning

panels benefits