Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | A Simplified Approach for Achieving a Simplified User Experience Using Oracle Cloud

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

A Simplified Approach for Achieving a Simplified User Experience Using Oracle Cloud Applications Release 10 Rapid Development Kit

Julian OrrOracle Applications User ExperienceOctober 2015

Design the Right Thing & Designing the Thing Right


Safe Harbor StatementThe following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.


A Simplified Process for a Simplified User ExperienceBuilding the right thing1. Jobs-to-be-Done: What job is your design being

hired to do?

Build the thing right2. A simplified design process and deliverables3. Principles of the Simplified UI4. Wireframing your simplified design

“If you dig a hole and it’s in the wrong place,

digging it deeper isn’t going to help”

- Seymour Chwast


How Do You Know if You Are Building the Right Thing?

• Deep listening: Focus on customer behaviors vs. what they say they want

• Consider using an Agile/Lean UX approach: Product as experiment – Build an M.V.P.

• Use evaluation frameworks . . .

“The minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning

with the least effort.” – Eric Reis,

Author of the Lean Startup


• Jobs-to-be-Done is an evaluation framework that ask the question “What job is the customer hiring this app to do?”

Understand What Job Your App Is Being Hired to Perform

If you focus purely on the job, and not the industry, you realize airlines selling business class seats are

competing with Skype for customers, as they address the same job: the need to have clear communication

with colleagues..” - intercomIO blog


A Simplified Design Process for a Simplified User ExperienceBuilding the right thing1. #JTBD: What job is your application being hired

to do?

Build the thing right2. A simplified design process and deliverables3. Principles of the simplified UI4. Wireframing your simplified design

“TO DRAW, YOU MUST CLOSE

YOUR EYES AND SING”

- Pablo Picasso


A Simplified UX Requires a Simplified Design Process & Deliverables• Principles of a simplified design process: – Based on clear design principles – Involves consultation with customers and

stakeholders – Uses simplified deliverables:• Job descriptions• Sketches • Wireframes


Simplified Deliverables - The Job Description • Job to be Done: Ability to capture and track the source of your contacts. Members of sales team are

incented based on how many contacts they bring in and nurture. As such, it is very important to the sales team to be able to capture and track the source of a contact so they know the effectiveness of various channels they engage in.

• User roles: Any Sales or Support user

• Job description:

• Ability capture the source of contact to that contact’s record

• Ability to passively monitor the number of contacts and top sources

• (Stretch) Ability to tie sales data with contact source info to identify the channel sources that are most likely to lead to sales

• Performance goals:

• To not take more that 20 seconds to review their current contact status

“A problem well put is

half solved”

- John Dewey


Simplified Deliverables - Sketches• Sketching: – Is the foundation of good wireframes and good

design– Can be done on a napkin, notepad, or a

whiteboard

• Consider:– da Vinci completed 30 paintings, but 13,000 pages

of sketches– Most Hollywood movies are completely sketched

out, scene by scene, before a single image is produced


Simplified Deliverables – Wireframes• What are wireframes?

– Low-overhead tools used to design, iterate, and describe key elements of a user experience from component detail to high-level page flows

– An essential practice of good software design

• Why use wireframes?– Achieve higher design quality by working out the details of the interaction,

prior to coding to avoid surprises and technical lock-in

– Faster development through more effective communication & collaboration

• Ingredients for good wireframes:–Well thought-out Job Descriptions

– Sketches

– An understanding of the design guidelines and the needs of intended user roles

10


Principles of the Simplified User Experience: Glance, Scan, Commit


The Oracle Cloud Applications user experience is designed to enable users to:• Glance at something and make a decision about what, if

anything, to do next

• Scan options that enable users to see more information about something that interests them

• Commit to performing tasks in the system.

Oracle Cloud Applications User Experience Design Philosophy

Glance, Scan, Commit is a core tenet of the simplified User Experience


To design and build simple, natural, intuitive user experiences that look and feel like Oracle Cloud Applications;

• Design for users– Learn how users work and about their key tasks and goals.– Think about where and how users perform their work and how they engage with

everything, from people to applications to devices.

• Think 10/90/90– Design and build for the 10% of functions that 90% of users use 90% of time.– Focus on key information, core or frequent tasks.

Designing the User Experience

“A successful application is a

lean application: one that isolates a

single problem and solves it brilliantly.”

-Tyler Tate, “Minimizing Complexity in

User Interfaces”


• Use design patterns and coded templates– Use proven, reusable Oracle Cloud Applications design patterns and coded page

templates. These will help:• Save development time and increase developer productivity• Give users more consistent experiences across applications• Improve the learnability and usability of applications

• Streamline navigation– Ensure that navigation is consistent, logical, and easy to follow. Flatten navigation

where you can. Use broad categories rather than require users to drill down.– Prominently feature features and functions on the user interface, and ensure that

they work exceptionally well.– Keep users in context of their work at all times.– Design experiences that support users’ natural, intuitive behaviors—regardless

of device.


The Design Patterns eBook provides detailed descriptions of key navigation and interaction patterns to help guide your design decisions to ensure a simplified user experience.


• Resist complexity– Organize information to display only what is most essential. Omit any features,

functions, and elements that don’t help users accomplish their primary tasks, such as optional or unused or under-used features or those that users didn’t adopt.

• Expose different layers of information and actions as needed– Provide page components and affordances that enable users to surface

information and actions gradually so that they have exactly the right amount of information that they need in any given context. Examples might include:• Infolets, information tiles• Secondary pages, pop-up pages, and dialogs• Icons, menus, and buttons


The Panel Drawer can slide open to any required height and width on a landing page. It is an ideal component to provide layered access to contextual information without cluttering the screen.


• Consider visual design– Watch out for visual elements that create a kind of perceived complexity. Here

are some common culprits:• Random layouts of elements• Lack of alignment, such as the use of inconsistent grids• Visual embellishments that compete with the primary content and tasks: lines, boxes,

borders, shadows, and so on

– Minimize visual noise:• Use white space between elements to guide users, structure information, make

content more legible, lighten the overall feeling of a page, and create balance.• Use components when available, which have built-in white space. • Use icons and graphics sparingly.


This screenshot shows how the alignment and grouping of fields and labels on the Create Contact page contributes to its perceived simplicity.


• Consider first impressions– Think about how the interface will appear when a user first enters an application.

Never present the user with a blank page. Instead, take advantage of the empty state to direct users to the next step.• Design a way-finding experience that helps users take a first step• Highlight a few key actions users can take to get started• Build in sensible defaults• Leverage and visualize underlying data and insight to inform users and suggest action• Organize elements based on use so that users always know where they are in a task: beginning,

middle, and end.


If the number of contacts that a user will typically see is less than 9 then a card view may provide a better first impression vs. the list view, which is more suited showing higher number of contacts at once.


Wireframing the Simplified UI:

Getting started with the Release 10 Rapid Development Kit Wireframe Template and Examples


Getting Started with the Oracle Release 10 Wireframe Template

• Start with a solid job description and sketching.

• Find the simplified design and development resources on Oracle’s Usable Apps site:

• Download the wireframe template and open in Microsoft PowerPoint on a PC or Mac.– Review the included flows, pages, and components.

– Create new versions or copies of the pages you want to use for the new design.

– Cut, paste, edit, size, arrange, and annotate objects as needed.

• Review wireframes against your JTBD and functional goals.

Pro Tip - Search for “Usable Apps + Rapid Development Kit” to easily locate the Release 10 RDK Resources


Wireframe Design ExerciseDesign a Flow that supports the example Job Description - The company will

hire this design to ensure their sales and service users can simply;– Capture and track the source of their contacts– Identify the top sources of contacts for the quarter

Peruse the template and become familiar with the flows and components

1. Start by adding a Source field to the “Create Contacts” page.

2. Add a “Source” column to the “Contacts” list view page

3. Create 1 or 2 Infolets that shows the total number of contacts and top sources for the past 90 days

*Annotate designs using Call-outs, Actions, Descriptions

20


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

Documents

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | A Simplified Approach for Achieving a Simplified User Experience Using Oracle Cloud