SAP: Insight-To-Action (Enterprise Mobile UX Pattern)

UX Pattern / Structure David King

Š 2011 SAP AG. All rights reserved.

June 2013

Model Information workers are primarily involved in revenue generation for their company and need various insights into their work.


Primary UI Elements: Springboard, High Value Views, Inspector & Data-book

Š 2011 SAP AG. All rights reserved.

UI Environment: Primary Elements Definitions: • “Springboard” – launch pad to various views in the application.

• “High Value Views” – Appropriate visualisation of CRM objects shown in context of dimensions and/or measures. E.g.: Cockpit, Revenue treemap, Location Map, Feed, Schedule etc…

• “Inspector” – Social + Transactional object detail view.

• “Databook” – Traditional lists view of objects and access to actions.

© 2011 SAP AG. All rights reserved.

UI: Architecture

DATAB OOK

INSPECTOR

SUPPORTING VIEWS (if any)

HIGH VALUE VIEWS

SPRINGBOARD

© 2011 SAP AG. All rights reserved.

iA: Springboard

Sales Cockpit

My Pipeline

CRM Springboard

Cockpit

My Pipeline

HVV 3

HVV 4

HVV 5

HVV 6

The Springboard is a launch pad for High Value Views in the application.

Tap “springboard” icon to view all High Value views in the app in the Springboard UI. Allows for quick navigation between high value views with elegant animations.

© 2011 SAP AG. All rights reserved.

Š 2011 SAP AG. All rights reserved.

iA: High Value Views

Definition: • High Value Views: Data is displayed with the context of dimensions (time, location etc…) and/or measures (revenue…) in appropriate visualisations.

Possible Visualisations: • Cockpit: tiled layout of context sensitive data • Revenue Map: Treemap of revenue related pipeline objects • Feed: Time sensitive information related to people and/or customers • Schedule: Day view to combine time and location variables.

© 2011 SAP AG. All rights reserved.

iA: “Cockpit” Reducing order of importance

The Cockpit is a consolidated view of most important &

Cockpit

relevant information packets

Monitoring Updates: Tiles of Information

Guiding principle for layout: • Right

to Left in order of

importance.

HVV or Supporting Workset Views…

Reports

Object Inspector

Intermediate Surface (e.g.: Quick View, Actionable modal surfaces)

• Tiles

can be re-ordered

• Tiles

can be subscribed to

by the user.

• Some

tiles may be default

as decided by customers.

© 2011 SAP AG. All rights reserved.

Š 2011 SAP AG. All rights reserved.

HIGH VALUE VIEW: REVENUE MAP – REVENUE RELATES DATA ARE SHOWN TOGETHER IN CONTEXT OF DEAL SIZE AND CLOSING DATE, WITH EMPHASIS ON RISKS

© 2011 SAP AG. All rights reserved.

HIGH VALUE VIEW: FEED – FILTERED AROUND RECENTS OR NEARBY FOR MORE CONTEXT

© 2011 SAP AG. All rights reserved.

HIGH VALUE VIEW: NEARBY OBJECTS – CAN SHOW ACCOUNTS, CONTACTS, LEADS etc…

© 2011 SAP AG. All rights reserved.

IA: Inspector / Single Object View

Horizontally scrollable facet label area independent of the content area.

High Value View

Supporting View

Š 2011 SAP AG. All rights reserved.

ABC CONSULTING

Title

Overview

Feed

Charts

Activities

ABC Consulting

Account Team

Addresses

Contacts

Social Object Inspector: Accounts / Contacts / Employees

ABC CONSULTING

Title

Overview

abc

CONSULTING

www.abconsultants.com!

People

Activities

No Activities today.

3 this week, 4 the next…!

Opportunities:!

!"#$%

1Quotes:! !"&$%

Leads

+*K/IJ$,&& '01)2%& Orders:!

!&&'($%

Opportunities

Quotes

:=9=>&&

<?9>@A?9B@CD&& !"#$%& '$($)*$%& +,$-./&'01)2&

3*45.6& 789:;& ;;<&

Feed

2 EFG&H,IJ&J$)1I)$-&*,5&.)&*K$,&/$L/M& 3 minutes ago& SAP News Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim, quis nostrud exercitation…

SEE#MORE#link#will#always#be#displayed#below#the#feed#in#the#main#canvas#area.#

© 2011 SAP AG. All rights reserved.

1. Facet Banner (appears only in the Overview) 7-8 fields of aggregated summary data. The data displayed should show backend content such as the net value of all Opportunities associated with the Account, and external sources (ex. LinkedIn) that provide added context and value. A Read-Only view of data.

2. Feed News feed related to the Account from various social media sources in a news-magazine style format.

Swipe up to see more feed. If more needs to be retrieved from the server, swiping up stops the page, shows a loading icon and more feed can be made visible.

Transaction Object Inspector: Leads / Opportunities / Etc.

Marketing Channels Techno...

Title

Marketing Channels Technology Upgrade

Net Value:

Open 0000001526

Prospect:

Minimal or No Facets.

Simple scroll navigation

ABC Consulting

30%

$25,000.00

Sales Stage:

Deal Health:

Valid from:

Solution Development

No Alerts

August 1, 2012 September 30, 2012

Timeline June

Lead

September

August

July

Opportunity

Opportunity

Stage 1

Stage 2

Products See All Opflex HD 501 Printer

Opflex Desktop

Opflex Transaction Ser..

005433211

005433211

005433211

Quantity

Price

10 EA

$700

Availability: In Stock

© 2011 SAP AG. All rights reserved.

Discount

Quantity

Price

$500

10 EA

$700

Availability: In Stock

Discount

Quantity

Price

$500

10 EA

$700

Availability: In Stock

Discount Opportunities:

$500 $28M

Social Object Inspector

Š 2011 SAP AG. All rights reserved.

Transactional Object Inspector

Š 2011 SAP AG. All rights reserved.

Inspector

Title

360o view of Objects…

Zoomed out view..

ABC CONSULTING

Activities 10 Appointments this week.

Facet Highlights .................. .................. ..................

Each facet is a vertical swim-lane that shows a zoomed out view of the content and some textual highlights about that facet: e.g.: Activities facet: 5 appointments this week.

Zoomed out view: Allows user to get a 1000 Ft. view of an object. Quickly swipe through to see all facets.

Tap a facet to see some highlight about it.

© 2011 SAP AG. All rights reserved.

Inspector

Š 2011 SAP AG. All rights reserved.

IA: Databook Databook provides access to 4

traditional backend data in

Updates Recents Quick Create

3

Search…

Favorites

familiar list-like experiences.

Recents Notifications Quick Create Favorites

•

Globally accessible

•

Provides access to global tools

2

Data-book

and filters like favorites, recents

Accounts

etc…

Contacts Leads

•

Simple affordances and elegant animations to invoke

Opportunities

and dismiss

5 5

•

Animated Notifications indicator

© 2011 SAP AG. All rights reserved.

Databook: Global Access to CRM Objects

Š 2011 SAP AG. All rights reserved.

David King UX Mobile OnDevice SAP Labs © 2013 © 2011 SAP AG. All rights reserved.

Thank You