principles of the oracle alta ui - amazon s3 · principles of the oracle alta ui desktop and mobile...

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

Principles of the Oracle Alta UI Desktop and Mobile Browsers

Richard Wright Director, Cloud Platform User Experience March 29, 2016


Safe Harbor Statement The 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.

3


• Software is a commodity • Design drives desire • Desire drives demand • Consider design before code

4

Design is Key


Three Basic Principles

5

1. Design for mobile first 2. Engage with visual content

3. Maintain content supremacy

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

Mobile First Design Content Immediacy Narrowest width first

Key most important content

Highest priority info first Focus on frequent action





Add content to wider display





Add content to wider display Broader info at desktop width


Avoid Content Disparity • In a mobile first responsive design

– As display width narrows • Rarely, if ever, remove content • Keep spatial relationships




• Content disparity – Annoys users – Makes UI unpredictable – Removes user’s sense of control


• Tables, lists, label-value pairs – Can hide relationships

12

Engage Visually


• Tables, lists, label-value pairs – Can hide relationships

• Charts, graphs, diagrams – Convey relationships

13

Engage Visually


• Engage with visual content – Show relationships vs listing them

• Tables list attributes • Graphs show relationships

14

Visual vs Textual


• Engage with visual content – Show relationships vs listing them

• Tables list attributes • Graphs show relationships

– Support graphs with tables • Allow direct manipulation

15

Visual vs Textual


Modern Search Paradigm • Avoid opening with a question

16


Modern Search Paradigm • Avoid opening with a question • Begin with content • Narrow to an answer

17


Modern Search Paradigm • Avoid opening with a question • Begin with content • Narrow to an answer • Dashboards also provide content

– Allows narrowing to an answer

18


• Click on user data to navigate • Limit menus, buttons, tabs as

navigation sources

19

Content Navigation


• Support narrow display widths • Present content visually • Use content to trigger navigation

20

Principles Work Together


• Use browser scroll bar – Avoid internal scroll bars

• Allow content flow below view port • Fix content to page display width

– Avoid horizontal scrolling

21

Alta UI Page Characteristics


• Starts from Alta Skin

Oracle Work Better

22


• Starts from Alta Skin

• Work Better skin – Extends Alta – Contains additional styling

Oracle Work Better

23


• Catalogue of Alta UI patterns • Web & native mobile UI • Focused on designers & developers • Get Started

24

Oracle Alta UI Website

http://www.oracle.com/webfolder/ux/middleware/alta/start-develop.html


Summary

Oracle Confidential – Internal/Restricted/Highly Restricted 25

• The Oracle Alta UI assumes content is king • The Oracle Alta UI 3 basic design principles:

1. Design for mobile first 2. Engage with visual content 3. Maintain content supremacy


Questions & Answers

26

principles of the oracle alta ui - amazon s3 · principles of the oracle alta ui desktop and mobile...

Documents