SAP: MyView Environment F+B by David King

UX Environments for Complex Apps July 2012

Form & Behaviour

INTE

RNA

UI Environment – Design Principles

▪

Minimalist Design • Content Focus: reduce irrelevant distractions and focus users’ attention on content • Less is more: Reduce to the essence that will delight the user • Concise visual language: Structure information concisely to ease scanning

▪

Human Touch • Feel the data: Give the user a sense of control over their information consumption through simple gestures

▪

Smart Content • Social Enterprise: Intermingle social data with business insights • Design for Serendipity: In addition to business exceptions, offer Serendipitous insights that make the user smarter just by using the product

Internal

‹#›

UX Architecture: Two Models To support two very different usage scenarios: ▪

Insight to Action: Information workers are primarily involved in revenue generation for their company and need various insights into their work.  Examples of UI Elements:  Examples: CRM and other Suite applications

▪

Grab & Go: Task workers who need to follow fixed schedules. They need to complete quick tasks within the application.   Examples of UI Elements:  REX, Field Services, EAM, DSD

Internal

‹#›

INSIGHT to ACTION Model  users are primarily involved in revenue generation for their company and need various insights into their work

UI Elements: My Cockpit/Updates, Views and Tools & Data-book

UI Environment – MY COCKPIT/UPDATES

Definition: • The Cockpit is a High Value view or a landing page with information that allows users to monitor their activities, business and follow general communication (feed). • The updates have to have an element of recency, urgency and/or importance. It has the potential to make someone act or change their plan of action. It has a disruptive element to it. • Users subscribe to the information they want to get updated about…

Visualisation: • Tiles in a magazine style browsing experience

Internal

‹#›

Cockpit Tiles Concept: Updates

•

Tiles exist within the framework of a 4x3 grid.

•

Tiles can be of the following various sizes - Small: 1x1, Medium: 1x2, 2x1, Large: 1x3, 3x1, X-Large: 1x4, 4x1.

•

The Cockpit can contain at most 12 tiles. No vertical scrolling is allowed.

Updates

•

For more Tiles, the user shall swipe (Right to Left) to see a new set of tiles, replacing the previous view, and indicated by the pagination control at the bottom of the screen.

•

The same behavior is true for both landscape and portrait orientation.

Internal

‹#›

Navigation Structure – Within Updates

Reducing order of importance

Updates

Monitoring Updates: Tiles of Information

Concept: •

Guiding principle for layout: •

Right to Left in order of importance. There is no scrolling within the tile surface.

•

Tiles can be re-ordered based on user preference (within or between pages).

•

On initial load of application, Tiles can be subscribed to by the user. Some tiles may be provided by default by the customer.

Internal

‹#›

Navigation Structure – From Updates

Updates

Monitoring Updates: Tiles of Information

HVV or Supporting Workset Views…

Report

Object Inspector

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

Internal

‹#›

Home Page Tiles – Example…

CRM Sales MY APPOINTMENTS TODAY

HP, Dell results on tap after market close…

Wednesday, August 1 2012

7Activities

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…

3 Appointments, 2 Meetings, 1 Task, 1Follow-Up Activity

IMG

Sales Team Meeting - NEW...

7:00 AM

Conference Room IMG

IMG

John Kim and 7 others

8:00 AM

<location> IMG

IMG

9:00 AM

<location> IMG

IMG

Sales Team Meeting - NEW...

10:00 AM

Conference Room IMG

IMG

John Kim and 7 others

11:00 AM

<location> IMG

IMG

Internal

‹#›

Tile Types & Examples Tile Types:

Size: Medium

Size: Small

MY APPOINTMENTS TODAY

•

Individual Object Tiles (link to Inspector)

Wednesday, August 1 2012

•

Multiple Object Tiles [List Tiles – link to

7Activities

supporting view, high value view or

3 Appts., 2 Meetings, 1 Task, 1...

inspector (if tile is divided into different tap zones)] •

Sales Team Meeting - NEW...

7:00 AM

Info graphic tiles: Bubbled up information about a group of objects (like Pipeline or Stalled deals) can either be shown as

•

Pictorial tiles: Tiles with picture(s). E.g.:

Conference Room IMG

IMG

John Kim and 7 others

8:00 AM

<location> IMG

IMG

plain summary text or in an info graphic. (Links to supporting or high value view),

Size: Large

9:00 AM

<location> IMG

IMG

News tile that shows a photograph from the article that is being shown

Internal

‹#›

Anatomy: Object tiles

Flag, Favorite

IMG Entity picture, or thing type icon

ACME Data Important KPIs/ information as appropriate

Name Entity Description

YTD Revenue

$40,000

Active Pipeline

$29,000

Internal

‹#›

Anatomy: Multi-object tiles

Topic What is this tile about? Size: Medium MY APPOINTMENTS TODAY

Wednesday, August 1 2012

Tap area 1: E.g.: Navigates to Schedule high value view

7Activities 3 Appts., 2 Meetings, 1 Task, 1... Sales Team Meeting - NEW...

7:00 AM

Conference Room IMG

IMG

John Kim and 7 others

Tap area 2: E.g.: Navigates to Appointment Object Inspector (if applicable).

8:00 AM

<location> IMG

IMG

9:00 AM

<location> IMG

IMG

Internal

‹#›

Anatomy: Info-graphic tiles Topic What is this tile about?

Data How much? And what representation (could be text or a micro chart) Context Why is this so important?

Internal

‹#›

Dashboard Example: CRM Sales

Internal

‹#›

UI Environment - VIEWS Definition: • High Value Views: Data is put into context of dimensions (time, location etc…) and/or measures (money…) in appropriate visualisations. • Supporting Views: From tiles of updates, there may be some supporting views that may be necessary to present the detailed data. Reports, Lists of information etc… • Inspector: Single object view. Possible Visualisations: • High Value Views: My Cockpit, Tree-maps (Opportunity Pipeline), Charts, Customer briefing, etc… • Supporting Views: Simple list (where appropriate), intermediate modal/non-modal surfaces etc… *Note: Application teams need to define high value views or tile content to launch their app content within the Core app.

Internal

‹#›

Navigation Structure - High Value Views

My Cockpit

CRM Springboard

Updates

My Cockpit

My Pipeline

HVV 3

HVV 4

HVV 5

HVV 6

HVV 7

Tap “springboard” icon to view all High Value views in the app in the Springboard UI. The expected animation is a zoom out. The high value view shrinks inward and is shown as a single “box” in the spring board. Some High Value Views may be deployed as “Targeted APPS” on the app stores/ app marketplaces by the customer… They may choose to continue to provide those related HVVs within the Core CRM app. Examples: Analytics & Customer briefing. All editing & creation of data occurs within the Core App, which is the representative vessel of all the back-end data.

Internal

‹#›

Navigation Structure - To a High Value View & back

My Pipeline

Updates

My Pipeline

HVV 3

HVV 4

Tap a High Value View snapshot to go into the full screen mode of the HVV. Tap “snapshot” icon again to go back to the snapshots page. The value of snapshots, is to maintain the last opened state of that high value view, if required by the application.

Internal

‹#›

Examples: High Value View

Internal

‹#›

Examples: High Value View

Internal

‹#›

Examples: High Value View

Internal

‹#›

Supporting Views: examples

Updates

Internal

‹#›

Supporting Views: examples - Quick-views

non-modal

modal modal

Some supporting views can be intermittent layers like pop-overs or modal views. Pop-overs can be modal if information is being edited within the pop-over surface.

Internal

‹#›

Examples: Supporting View

Internal

‹#›

Contextual actions and 360 view

Inspector (model 1) Close inspector and back button Horizontally scrollable facet label area independent of the content area. Tap to switch to another facet. Tap & hold to see a preview of that facet.

ABC CONSULTING

Title

Overview

Feed

Charts

Activities

Account Team

Addresses

Contacts

ABC Consulting

High Value View

Supporting View The inspector surface transitions from over the worksets. Intended transition mechanic is from bottom to top.

Internal

‹#›

Inspector (model 2)

ABC CONSULTING

Title

Horizontally scrollable facet label area independent of the content area. Tap to switch to another facet. Tap & hold to see a preview of that facet.

Overview

Feed

Charts

Activities

Account Team

Addresses

Contacts

ABC Consulting

High Value View

Supporting View Two finger swipe on content area to switch from one facet to next.

Internal

‹#›

ABC CONSULTING

Title

Overview

abc

CONSULTING

www.abconsultants.com

Feed

Charts

Activities (13)

No Activities today.

Contacts (6)

Leads (13)

Customer   Rating:

3 this week, 4 the next… Opportunities:

Quotes:

Orders:

$28M

$21M

$11.3M

Opportunities (8)

Quote

32.21   +0.19(0.59%) Type: Revenue: Credit Rating

Public $4.3B BB+

Feed

IMG from mentioned url in user text… 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…

Internal

‹#›

Marketing Channels Techno...

Title

Marketing Channels Technology Upgrade

Net Value:

$25,000.00

Open  0000001526

Prospect:

Sales Stage:

ABC Consulting

30%

Deal Health: No Alerts

Solution   Development

Valid from: August 1, 2012 September 30, 2012

Timeline June

July

Lead

September

August

Opportunity

Stage 1

Stage 2

Products See All Opflex HD 501 Printer

Opflex Desktop

Opflex Transaction Ser..

005433211

Quantity

Price

Discount

Quantity

Price

Discount

Quantity

Price

10 EA

$700

$500

10 EA

$700

$500

10 EA

$700

Availability: In Stock

Discount Opportunities:

$500 $28M

Availability: In Stock

Internal

‹#›

Inspector Title

360o view of Object… 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.

Internal

‹#›

Examples

Internal

‹#›

UI Environment - Definitions

▪

Tools:

Transactional: “edits” the core database (CRM). Quick Creates, Full Editing etc… • Soft-tools: tools that allow users to touch views (HVVs, Inspectors etc…) without manipulating the core data. Marking favourites, forwarding, add to StreamWork etc… • Data-book: provides browse and/or search experience for core CRM data. •

Internal

‹#›

Navigation Structure - Tools & Data-book 4

Updates Recents

3 Search…

Quick Create Favorites

Recents 3

Notifications Quick Create

Favorites Data-book

1. 2. 3. 4.

Tools & data-book area is accessible by tapping the data-book tab on the top right corner of the screen OR swiping right to left on the right bezel. Menu on right of Tools & Data-book surface provides easy affordance of access to the menu. Data-book items can be logically grouped. Tap Content area or swipe the Tools & Data-book surface out of view… When Notifications are delivered to the app, the data-book tab gets a badge/ turns red with notification count and bounces for (2-3 seconds) to indicate there’s a new notification. Opening the data-book when new notifications are available, defaults the selection in the data-book to Notifications. The tab remains red with the new notification count. Once the data-book has been opened, the notifications color of the data-book tab is returned to normal and the number is replaced with the default icon. Data-book consists of two columns that are independently scrollable. Column 1 (right column) consists of all the data-book and tools menu items and Column 2 (left column) consists of all the results/items belonging to the menu items on the right.

Accounts Contacts Leads Opportunities

5 5

Internal

‹#›

Example

Internal

‹#›

UI Architecture

INSPECTOR (Full view of ONE object – e.g.: Account Detail)

Tools & Databook

Supporting Views (Charts, Intermediate actionable/readonly Surfaces, Grid list of objects etc…)

High Value Views (My Cockpit/Updates, Pipeline, My Schedule, Customer Briefing etc…)

Internal

‹#›

Navigation Model Cockpit

My Pipeline OR Supporting View/High Value View

Cockpit

Object Inspector

Cockpit

Intermediate layer (if needed)

My Pipeline

LEGEND Control to see all High Value Views Control to view “Tools & data-book” Back control to get back to Cockpit from Supporting View/HVV

Internal

‹#›

GRAB & GO Modelâ&#x20AC;¨ users are task focused and need to follow fixed schedules. Their intention is to get in and get out and complete quick tasks within the application. â&#x20AC;¨ UI Elements: My Kit & Views

UI Environment - MY KIT • Definition: • “My Kit” is a globally accessible menu, which consists of contextual information in the present dimension (time/location – time seems to be the most globally applicable one). It is synonymous to a task focused worker’s bag/kit that s/he carries to their jobs. • It also provides access to other work areas in the application, that do not have the primary dimensional contextual reference. • The most applicable dimension we see for complex apps is time (My Schedule, which seems to be the driving force for the target users of these types of apps). • Search, Alerts, Quick Creates, Recent and other tools, as configured, are also accessible via this menu.

• Visualisation: • Slide in menu from the bottom of the screen.

Internal

‹#›

Navigation Structure - MY KIT Concept:

Screen Title

•

Globally accessible

•

Slide up from bottom bezel or tap bottom “Sliver”.

•

Swipe down on menu or Tap Content area beneath menu surface to slide it out of view.

•

My Kit, slides up to show context and out of context relevant information in easy to assimilate views called channels.

Screen Title

Each channel will have contextual information related to the primary object selected. The default Primary Object is the most context relevant one (e.g.: Appointment at current device time). •

Number of channels can theoretically be unlimited, but advisable number would be around 7.

•

Out of Context channels are stacked together so they are not mixed with in context channels.

Horizontally swipe-able region to access all menu content

•

First two channels are Alerts and Recents/Favourites. However, they are scrolled out of view and the first channel in view is always the Primary object channel.

•

When menu is opened for the first ever time, show Alerts and Recent/Favourites channels and slide them off the screen to anchor the Primary object channel

Internal

‹#›

My Kit - Anatomy Tap any header to navigate to specific work area (e.g.: My Schedule, Customers etc…)

Alerts

Recents/Favorites

Primary Object

Related Object 1

Related Object 2

Unrelated Object 1

Unrelated Object 2

Unrelated Object 3 Search…

If an alert is received and the “Kit” is minimised, the Kit sliver bounces (time TBD), to visually

Alerts

Other Tools

alert the user that an alert is available to view. If indicator user opens Kit when Kit sliver is bouncing, the menu defaults to the Alerts channel in view as first column. If user opens Kit when sliver has

May launch secondary

Tap List item to

stopped bouncing, first column is the Primary

navigate to specific Tap disclosure area to see context

object. Tapping alerts indicator or swiping right

object inspector

takes them to Alerts channel.

Tap Search bar to navigate to relevant data in related object channels Search page. It is a dedicated (e.g.: related customer info, last orders/Search page to show relevant returns etc…)

results.

surfaces (if required), where the actions need to be taken

Internal

‹#›

Search - Anatomy When user taps within Search field, the bar containing the search field (shown on earlier Done

Search…

slide), transitions upward to take up the screen real estate (layer on top of the earlier UI). Features to be provided: -

Advanced search: Tap search icon in search bar to expose advanced search fields (layout TBD)

Filters: After search term(s) are entered and results appear, a filter area is provided to allow filtering the search results. (layout TBD)

When search characters are entered (3 or more, results should start appearing, with applicable filters, if any)

Internal

‹#›

Views: Work Areas

Full screen views of multiple objects, which allow users to decide which individual objects they need to work on to complete their tasks. Examples (REX): -

My Schedule

Customers

Orders & Returns

Binder etc…

Internal

‹#›

Inspector (model 1)

ABC CONSULTING

Title

Horizontally scrollable facet label area independent of the content area. Tap to switch to another facet. Tap & hold to see a preview of that facet.

Overview

Feed

Charts

Activities

Account Team

Addresses

Contacts

ABC Consulting

My Kit (menu)

Views (Work Areas)

Internal

‹#›

Inspector (model 2)

ABC CONSULTING

Title

Horizontally scrollable facet label area independent of the content area. Tap to switch to another facet. Tap & hold to see a preview of that facet.

Overview

Feed

Charts

Activities

Account Team

Addresses

Contacts

ABC Consulting

My Kit (menu)

Views (Work Areas) Two finger swipe on content area to switch from one facet to next.

Internal

‹#›

Navigation Model Work Area

Work Area

Inspector

Work Area

Tapping a work area header in the “Kit” menu navigates the user to the Work area. The menu slides back down and the Work area transitions in from Top to Bottom (as shown above). The navigation stack is reset when user navigates to a new work area. The previously accessed Object Inspectors are available in the Recents menu.

Tapping an object in the “Kit” menu navigates

Inspector

Work Area

Inspector

the user to the Object Inspector. The menu slides back down and the Inspector transitions in from Right to Left (as shown to the right). A back button is provided with the previous screen title.

Internal

‹#›

Thank You