Wireframe Template Oracle Cloud Applications User Experience Rapid Development Kit Release 10

Wireframe Template

Oracle Cloud Applications User Experience Rapid Development Kit Release 10

Copyright © 2015, Oracle and/or its affiliates. All rights reserved. 2

Welcome to the Simplified User Experience• This is an editable Microsoft PowerPoint-based

wireframe template. – It will enable you to design high-fidelity wireframes that look

and feel like r10 Oracle Cloud Applications directly in a familiar tool.

– Review and use this template in edit mode vs. Presentation mode. You can move, edit or rename almost all design elements that appear in this template.

• The interface backgrounds are embedded in the slide master to make selection and alignment easier

• Determine the outline of your flow, choose appropriate pages and UI components, and then start designing your application.


Prerequisites for Release10 Simplified UI Wireframing• Review our training on Building the Right Thing & Building the Thing Right that covers:

– Defining concise Job Descriptions– Core design principles for Oracle Cloud Applications simplified user interface (UI)– Why and how to use wireframes in your design process, including wireframe practice exercises

• Be familiar with key Microsoft PowerPoint actions, such as how to:– Select and duplicate objects– Edit shape properties, size, color, font, alignment, grouping/ungrouping and bring-to-front/send-to-back actions– Access and edit slide masters (backgrounds)

• Sketch your flows before you wireframe.

• Review the Simplified User Experience Design Patterns for Oracle Applications Cloud Service eBook, and use as reference.

• Developers should also review ADF page overlays to identify technical components.

https://apex.oracle.com/pls/apex/f?p=84150:1::::::

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.

SetupUsing Palettes and ComponentsExample High-Level Flow with Annotations

Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Copyright © 2015, Oracle and/or its affiliates. All rights reserved.

Component Palette PRO TIPS

Make this template your own:

• Select a stock flow to form the basis of your PaaS flow.

• Review the slide backgrounds in the Slide Master to choose the most appropriate Layout

• Edit/Add/Remove page components to align with your flow:– Use the palette or create your own slide with

commonly used shapes.

– You can also create custom palettes by duplicating this page and adding the shapes you most often work with

– Turn on Gridlines to help with alignment

• Replace the text with your own; page titles, actions, descriptions etc.,

• Use the callouts to document specific elements of the design

Page Header

Prefix Dr.

Find

Basic Infolet

Glance-able Information

Page Header text box

Click path indicator

Search box with label & button

Simple text box & label

Card List View toggles

Unselected favorite star

Selected favorite star

Generic Button

Disabled Button

Actions

Select Contacts to Export

Generic Button

Begin

Action button w/dropdown

Absence

Compensation

Employment

Timecard

Graphic Infolet

$4,650,000

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

Alfred Lee Senior Director Apps Cloud Corp +1 650-123-1234 [email protected]

4

Square & Round Contact Icon

Group/Team icon

Close icon

Expanding menu

Field Label Value Pairs

Infolets

Page Thumbnail for creating high level flows

Table row with data

Dr.Mr.Mrs.Ms.Undisclosed

Basic drop-down menu


Example: High-Level Flow with Annotation• Shows entire flow using thumbnail screenshots, click-path indicators, and call-outs

• A very useful approach for communicating flow after the page-level design has been worked out

Step 1 –User taps Sales icon on the Springboard to access Sales functional area

Step 2 –User taps Contacts icon in the Sales area

Step 3 –Contacts opens in card view, and user selects Actions > Select Contacts to Export option

Step 4 –User selects the checkbox on the bottom right of contact card, then selects the view toggle to switch to list view

Step 5 –User taps Create Contact button to add to the list

Step 6 –User adds new contact and taps Save & Close button to return user to the contacts list view

Q for customer: What are the most common icons your reps need to see?

25-Set-2015: Card view decision confirmed by developer referring to design pattern on data collections.

Q for developer: Does UI switch to List View automatically?

Q for developer: Does UI switch to List View automatically?


Top-Level PagesSpringboard: Quick Access to ApplicationsandInfolets: A Sales Manager’s Key Info at a Glance


Jamie Frost

The Rapid Development Kit

Use the RDK to design and build must-have simplified UIs for the cloud. Accelerate your delivery of great user experiences for SaaS integrations and custom PaaS apps that win customers and delight users.

The RDK is based on Oracle ADF and proven UX design patterns. It contains:

• Simplified UI ADF page templates, fragments, and declarative components for the most frequent uses

• Oracle Alta UI icons and CSS• Sample ERP, HCM and Sales SaaS flows and

typical web services• Sketching tools and example• Design patterns and development-to-

deployment eBooks• Guidance for choosing a customer use case

and then building it

The RDK lets you innovate quickly and take your business to new levels. We made it simple to use applications for work, and now we make it simple to build them, too.

More:• RDK Partner Success Stories

• Usable Apps Blog

• Latest RDK news on Twitter @usableapps


Springboard: Quick Access to Applications and Functional Areas

Sales My Team General Accounting

Map My Contacts

Directory PaaS Cloud

Action

• Lisa sees the springboard when she first logs in for the day. She clicks the second pagination control to see her infolets.

Description

• The user/role shown in this template is based on Lisa Jones, a Sales Manager.

• The springboard provides Lisa access to HCM Cloud, Sales Cloud, ERP Cloud apps and custom flows.

• This is the top-level start page for all the flows in the this template.

https://storify.com/usableapps/the-oracle-applications-cloud-paas4saas-story-simp

https://blogs.oracle.com/usableapps/

https://twitter.com/usableapps


Jamie Frost


Infolets – Key Information at a GlanceAction

• When she is finished reviewing her summary info lisa clicks the view switcher to return to the springboard.

Description

• This Infolet page contains blend of HCM Cloud, Sales Cloud, ERP Cloud data and a custom flow.

• This set of infolets represents Lisa Jones’ key information in a glance-able format.

Leads

New

Open

Converted

Rejected

114K

135K

50K

50K

Wellness

Opportunities

YTD Earnings Maintenance SRs Period Close

1 70% 45%55%

Conversion Rate by Quarter

Q1: $1,300,678 Q2 : $1,789,432 Q2 : $967,362

My Team’s Goals

$631.00KStarting Balance

$808.00KEnding Balance

This Month252

CLOSED

75OPEN

25CRITICAL Review: Nov-13

69%

My Wellness Goals My Activities My Competitions Calories Burned

44.0 - Active Active 2110

Daily Average

Jen Jacobs

7Defined

0Aligned

Jason Blake

7Defined

2Aligned

Terry Luca

7Defined

3Aligned

Peter Cadand

8Defined

2Aligned

Ravi Chouhan

8Defined

3Aligned

Pat Miller

8Defined

0Aligned

Stella Smith

7Defined

2Aligned

Susan Wong

8Defined

3Aligned

Requisitions

New Candidates

New Candidates in Evaluation7Overdue Approvals

3

2


Sales CloudSales > Manage Contacts


Jamie Frost














Oracle Sales Cloud > Contacts Actions

• Lisa clicks the Sales icon button to open the Sales grouping, and then clicks the Contacts icon.

Description

• Lisa’s springboard provides easy access to her Sales Cloud, HCM Cloud, ERP Cloud , plus custom flows.


Dashboard Leads ContactsAccounts

Forecasts Accounts ActivitiesContacts

Map My Contacts






Oracle Sales Cloud > Contacts: Card View Actions

• (Optional) Lisa uses the Find field and/or the List filter to narrow the list of contacts.

• Lisa clicks the Actions button and selects the “Select Contacts to Export” option, which sets the page to select mode.

Description

• The contacts page opens with the filmstrip showing by default.

• The filmstrip is a horizontal arrangement of icon buttons that appear in the Sales grouping.

• The filmstrip can be minimized by clicking the gripper bar at the top of the workarea.

Contacts

Name ContainsFind List

All A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Avril Jones

Sales RepresentativeUsable Apps+91 [email protected]

Alfred Lee

Systems ConsultantUsable Apps+1 [email protected]

Bill Kermit


Cole Mitchell


Bob Smith


Catherine Wisdom


Dominic Bennet


Dave Dealey


Jamie Dawson


All Contacts Actions Create Contact

Select Contacts to Export


Oracle Sales Cloud > Contacts: Select ModeAction

• In select mode, Lisa clicks the contacts she wants to export.

• Lisa clicks Cancel to exit selection mode.

• Lisa can switch the view from card view to list view by clicking the toggle buttons.

Description

• When a contact is selected, the export action is enabled.

Selection modes:

– Light gray = Selectable state

– Medium blue = Hover

– Dark blue = Selected

– Yellow start = Marked as favorite

The export dialog is not shown in the template.

Contacts

Name ContainsFind List


Avril Jones

Sales RepresentativeUsable Apps+91 [email protected]

Alfred Lee


Bill Kermit


Cole Mitchell


Bob Smith


Catherine Wisdom


Dominic Bennet


Dave Dealey


Jamie Dawson


All Contacts Export ( 1 ) Selected Cancel


Oracle Sales Cloud > Contacts – List ViewActions

• Lisa clicks the Create Contact button to open the Create Contact page.

Description

• Contact selections are maintained during the view switch. – Selected rows will have a background

highlight

Contacts

Name ContainsFind List All Contacts


Alfred Lee Senior Director Apps Cloud Corp +1 650-123-1234 [email protected]

Bill Kermit Systems Consultant Apps Cloud Corp +91 11-1234-1234` [email protected]

Avril Jones Sales Representative Apps Cloud Corp +44 118-123-1234`` [email protected]

Bob Smith Strategy Director Apps Cloud Corp +86 1-123-1234` [email protected]

Cole Mitchell Senior Director Apps Cloud Corp +52 33-123-1234 [email protected]

Catherinee Wisdom Systems Consultant Apps Cloud Corp +1 650-234-1234 [email protected]

David Dealey Sales Representative Apps Cloud Corp +91 11-234-1234 [email protected]

Derek Peterson Strategy Director Apps Cloud Corp +1 650-123-1234 [email protected]

Dona Whiley Senior Director Apps Cloud Corp +91 11-1234-1234` [email protected]

Dominic Bennet Senior Director Apps Cloud Corp +44 118-123-1234`` [email protected]

Jamie Dawson Systems Consultant Apps Cloud Corp +1 650-123-1234 [email protected]

Jane Jefferson Sales Representative Apps Cloud Corp +91 11-1234-1234` [email protected]

John Smith Strategy Director Apps Cloud Corp +44 118-123-1234`` [email protected]

Julian Henderson Senior Director Apps Cloud Corp +86 1-123-1234` [email protected]

Jennifer Tan Systems Consultant Apps Cloud Corp +52 33-123-1234 [email protected]

Load More Items 1-15 of 21 Items

Actions Create Contact


Sales Cloud Sales > Update Opportunities


Oracle Sales Cloud > OpportunitiesActions

• From the Springboard page, Lisa clicks the Sales icon button, then clicks the Opportunities icon button in the grouping to open the Opportunities page.

• Lisa reviews her list of opportunities and sees that she needs to update the win probability percentage for the Database Enterprise Edition opportunity from 55% to 90%.

Description

• The color show in the Win % column indicates the win probability:– 0%–20% = Red

– 25%–60% = Yellow

– 60%–100% = Green

65%

88%

55%

65%

35%

33%

65%

33%

35%

40%

20%

33%

Win % Name Customer Sales StageRevenue

Database Enterprise Edition Pinnacle Technologies Qualification$125,000

Apex Systems DF 750-20 G Green Rack Server… Apex Systems Building Vision$150000

JK Steel Ultra Pro R9000 Server Pinnacle Technologies Agreement$540,000

Premier Energy Z4600 Alpha Server Premier Energy Discovery$1,500,000

Elite Protec Server Apex Systems Discovery $180,000

JK Steel Ultra R700 Server Pinnacle Technologies Qualification$115,000

V R Worlds Server Qualification$225,000

Seffner Tech Server $75,000

Cool Cucumber Server $55,000

OWL System Integrated Project $125,000

Elite Pro Upgrade $1,125,000

System Solutions Hardware XX4 $100,000

Alpha Server $85,000

Find List All Opportunities All Opportunities

Opportunities

Create Opportunity

Pinnacle Technologies

Apex Systems


Premier Energy

Apex Systems


Apex Systems

Building Vision

Agreement

Discovery

Discovery

Qualification

Qualification

55%


Oracle Sales Cloud > Edit OpportunityAction

• Lisa updates the win probability from 55% to 90%, and then clicks Save and Close to finalize her changes and return to the originating page.

Description

• After Lisa returns to the previous page, she sees that the Win % indicator number and color would update to reflect changes.

Edit Opportunity: Database Enterprise Edition: Summary View Save and Close Cancel

* Name

Win Probability %

* Close Date

Type

Add Revenue Item

Database Enterprise Edition

Open

08/10/15

* Customer

55


Currency USD

* Revenue 125,000

* Sales Stage Qualifications

Sales Method Standard Sales Process

Revenue Items

Product UOM Quantity Price Revenue

Qualifications 0 0 0


HCMMy Team > Team InfoCard View and List View


Jamie Frost














Oracle HCM Cloud > My Team


Actions

• Lisa wants to review information for members of her sales team, so she clicks on the My Team icon button in the My Team grouping.

Description

• In this case, Lisa is viewing only a relevant subset of all the available HCM Cloud functionality that are relevant to her sales manager role. This set is contained in the My Team grouping.

Performance Team Compensation

Career Development

Team Talent

Goals Reputation My Team

Map My Contacts






Oracle HCM Cloud > My Team > Card View with an Open Panel DrawerAction

• After Lisa reviews the card info, she wants to review a company policy document. She clicks the Actions panel drawer tab to see a set of contextual links.

• Lisa clicks the flip arrow at the bottom right of the team cards to view additional team info.

Description

• To close the panel drawer, click the Actions panel tab again.

• The panel drawer can be enabled in any work area, but is only shown in this flow in the template.

Contact

Location and Time

[email protected]+1 123-456-1324

San Francisco, CA13:42 GMT -8

5 Directs

Ravi ChouhanSales Representative

My Team

Contact

Location and Time



5 Directs

Jen JacobsSales Representative

Contact

Location and Time



5 Directs

Jason BlakemanSales Manager

Contact

Location and Time



5 Directs

Pat MillerSales Associate

Contact

Location and Time



5 Directs

Stella SmithSales Manager

Contact

Location and Time


Redding, UK21:42 GMT

5 Directs

Terry LuccaSales Representative

Sort By Person NameFilter: Entire Team

Related Links

Company Policy Documents

Compare

Employee Resources

Manager Resources

Performance Appraisal Training

Workforce Reports and Analytics


Oracle HCM Cloud > My Team: Back of CardsAction

• In order to facilitate her work of comparing information across team members, Lisa clicks the List View toggle button to view Team information in a list.

Description

• <Add your own descriptive text here.

5 Directs, 2 Total

Ravi ChouhanSales Manager

My Team


Jason BlakeSales Associate

Contact

Location and TimeSan Francisco, CA13:42 GMT -8


Contact

Location and TimeSan Francisco, CA13:42 GMT -8

Stella SmithSales Manager

Redding, UK21:42 GMT

Terry LuccaSales Representative

Sort By Person NameFilter: Entire Team

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

5 Directs, 2 Total

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years

Assignment

Worker Type

Department

Grade

Service

Full Time

Employee

Sales and Marketing

IC1

2 Years


Oracle HCM Cloud > My Team > List ViewAction

• Lisa clicks the Actions menu to see a list of options.

• After Lisa reviews the info, she clicks the Home icon button in the global header to return to the Springboard page.

Description


My Team

Filter: Entire Team


Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas

Ravi ChouhanSales Manager

Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas

Jason BlakeSales Associate

Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas


Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas

Terry LuccaSales Manager

Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas

Stella SmithSales Representative

Assignment

Worker Type

Service

Full Time

Employee

5 Years

Department

Grade

Location

Sales and Marketing

IC3

Austin, Texas

Absence

Compensation

Employment

Timecard

Sort By Person Name


HCMMy Team > Review Performance


Oracle HCM Cloud > Performance: Expanded ViewAction

• From the Springboard page, Lisa clicks the My Team icon button, then clicks the Performance icon button in grouping to open the My Team’s Performance Evaluation page.

• Lisa reviews the summary info, then clicks the expand arrow next to Jen Jacobs to view detailed information about Jen’s performance.

• Lisa clicks FY2015 – Annual Review to view the details for Jen Jacobs performance.

Description


My Team's Performance Evaluation

of 7 Evaluations Complete in Total

of 4 Annual ReviewsComplete

of 1 Mid-Year ReviewsComplete

of 1 Project ReviewsComplete 3 1 1 1


Ravi ChouhandSales Manager

FY2015 – Annual Review Open

Manager Evaluation of Worker

Not Yet Rated

Status

Next Task

Final Rating

Tasks Left 4

Remaining Days 4

Open

Share Documented Performance

Not Yet Rated

Status

Next Task

Final Rating

Tasks Left 3

Remaining Days 7

Worker Self-Evaluation

Completion Date 30/Sep/2015

Manager Evaluation of Worker

Remaining Days 4

Share Performance Document

Remaining Days 20

Manager Discussion with Worker

Remaining Days 30

Set Next review Period Goals

Remaining Days 40

FY2015 – Annual Review

Continue

View

Begin

Begin

Begin


HCM Cloud > Performance: Update RatingsAction

• From the Competencies information tile, Lisa reviews Jen’s ratings and updates the Manager rating for Customer Focus.

• Lisa clicks Save and Close to return to the originating page.

Description


Jen Jacobs: FY2015 – Annual Review

Task Manager Evaluation of Worker

Cancel

Attachments None Remaining Days 4

Save and CloseSave

Goals

Competencies

4 / 4 Ratings Entered

4 / 4 Comments Entered

Competencies

3 / 4 Ratings Entered

3 / 4 Comments Entered

Competencies

Overall Summary

Manager Complete

Participants Complete

Employee Complete

Manager Complete

Participants Complete

Employee Complete

Section Rating and CommentsEmployee

Manager

Participant

Total Weight 100%

AddShow All Comments

(3)

Sort By Name

Adapting to ChangeTarget

Employee

Manager

Participant

Customer Focus

Target

Employee

Manager

Participant

Influencing and Negotiating Target

Employee

Manager

Participant

(3)

(3)

Building Relationships Target

Employee

Manager

Participant

(3)

Weight %

Weight %

Weight %

Weight %

25

25

25

25


ERPGeneral Accounting > Review Finance Reports


Jamie Frost














Oracle ERP Cloud > General Accounting


Placeholder

Directory Getting Started

Action

• Lisa wants to review the Global Sales Revenue Report. She clicks Financial Reports in the General Accounting grouping.

Description


PaaS for SaaS

Dashboard Leads Financial Reports




Karen Scipi

The name of this icon button needs to be updated to read "PaaS Cloud".


Jamie Frost














Oracle ERP Cloud > Financial Reports: List ViewAction

• Lisa marks the Global Sales Revenue report as a favorite by clicking the star icon.

• Lisa then clicks on the report name to open the visualization.

Description


Financial Reports

Name containsFind List All Reports

Global Sales Revenue ReportInteractive Sunburst to explore sales revenue by region and quarters

Category: Sales Status: Successful previous run

Status: Successful previous run


Category: General Ledger

Category: Receivables

Trial Balance ReportLists period debits, period credits, start balances and end balances organized by accounting segments

Lists invoices to review and audit organized by customer and invoice creation date

Invoice Audit Report





Jamie Frost














Oracle ERP Cloud > Financial Reports: Sunburst VisualizationAction

• Lisa clicks sections of the visualization to drill into specific data and uses the filter option checkboxes to filter the data.

• Lisa clicks on the Close button (x) to return to the list of reports.

Description

• The sunburst visualization opens in a dialog.

• Create this visualization by using the Doughnut chart component in Microsoft PowerPoint. Click the object, and then select the Edit Data option.

Financial Reports

Name containsFind List All Reports

Global Sales Revenue ReportInteractive Sunburst to explore sales revenue by region and quarters

Category: Sales Status: Successful previous run



Category: General Ledger

Category: Receivables

Trial Balance ReportLists period debits, period credits, start balances and end balances organized by accounting segments

Lists invoices to review and audit organized by customer and invoice creation date

Invoice Audit Report

Global Sales Revenue Report

World Regions

Asia Pacific

Europe

Middle East

North America

China

India

Japan

Jordan

Morocco

U.A.E.

United Kingdom

GermanyFrance

Spain

Italy

United States

Canada

Mexico

Brazil

Cuba

Asia Pacific

Middle East

Europe

North America

Latin America

Global

Latin America





Custom REST FlowMap My Contacts


Oracle PaaS Cloud > Customer Flow: Map My Contacts Action

• Lisa wants to view her contact’s location on a map, so she clicks on the “Map My Customers” icon button on the springboard to open her custom PaaS application.

• Lisa clicks a contact name to center the map on that customer’s location.

Description


Alfred LeeSenior Director

Redwood City, California+1 650-123-1234

Name or Location containsFind





















Load More Items 1- 11 of 21 items

Map My Contacts


Connect with Us

Oracle.com/usableapps

Blogs.Oracle.com/vox

Blogs.Oracle.com/usableapps

YouTube: oracleusableapps

UsableApps on Facebook

Twitter: @UsableApps

Usable Apps on LinkedIn

Usable Apps on Storify