Bitte nutzen Sie die integrierte Audio-Funktion von WebEx ...otn/documents/web... · Grundkonzepte von Oracle ALTA UI & Umsetzungsbeispiele mit ADF Annegret Warnecke Systemberaterin,

+++ Bitte nutzen Sie die integrierte Audio-Funktion von WebEx (Menü Audio -> Integrated Voice Conference -> Start auswählen), um uns zu hören!!!. +++

Grundkonzepte von Oracle ALTA UI & Umsetzungsbeispiele mit ADF

Annegret Warnecke

Systemberaterin, Oracle

[email protected]

+++ Bitte nutzen Sie die integrierte Audio-Funktion von WebEx (Menü Audio -> Integrated Voice Conference -> Start auswählen), um uns zu hören!!!. +++

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

Safe Harbor Statement

The preceding 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.

Oracle Confidential – Internal/Restricted/Highly Restricted 4


Oracle Alta UI - Agenda -


was ist Alta UI (inkl. Zweck / Motivation)

Designkonzept im Alta UI

Alta UI mit ADF umsetzen

Resumé

P.S.: verfügbares Material


was ist Alta UI (inkl. Zweck / Motivation)


Oracle Alta UI - der neue Standard für Oracle


look & feel

optimierte Zugriffswege zu Informationen


Motivation (I)

Good design patterns are productivity multipliers.

Floyd Teter, in: Simplified User Experience Design Patterns for the Oracle Applications Cloud Service



Motivation (II)


Möglichkeiten und Grenzen mobiler Anwendungen geben den Anlass, UI-Gestaltung - auch für Geschäftsanwendungen - neu zu denken


Designkonzepte im Alta UI



Oracle Alta UI


think visually / mobile first

simple layout / clear information hierarchy


Alta UI - neues Look & Feel


optimierte Informationsaufbereitung (aus Sicht der potentiellen Nutzer)

elegante Informationsauswahl (keine überflüssigen Informationen) für jede Seitenansicht

kurze, intuitive Wege für das Auffinden der gewünschten Information

Bausteine (inkl. Text) und Zwischenräume sind größer

bewußt Übergänge nutzen

o 2 Stufen einer Informationshierarche auf einer Seite

o unerschiedliche Darstellungsarten für die gleiche Information

o Umklappen von "Kacheln" bringt zusätzliche Information

• intensive Nutzung graphischer Elemente, um die Informationssuche zu unterstützen


Alta UI - Seitenlayout


Vorlagen für die Raumaufteilung auf den Seiten

• maximale Seitenbreite (1024 px), die für die meisten Tablet PCs verwendbar ist

• horizontal mittige Anordnung der Seite

• Scrollen nach unten

automatisches Anpassen an genutzte Fenstergröße - responsive design

http://www.oracle.com/webfolder/ux/middleware/alta/index.html

Copyright © 2014 Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted 14

Alta UI: Touch basierte Navigation

• Berühren eines Dashboard Elementes

• Berühren von Inhalten innerhalb einer Ansicht

• Berühren eines Chart Elementes

• Berühren einer Zeile in einer Liste


Alta UI mit ADF umsetzen



Alta Skin - ein "luftigeres" Grundlayout


skyros skin alta skin


Alta Skin verwenden



Tablet First Template

• vordefinierte Seitenaufteilung

• kann für verschiedene Alta UI Vorlagen verwendet werden



Tablet First Template

- Beispiel -



graphische Darstellungsweisen bevorzugen

Kombination aus

• ADF Layoutkomponenten

• graphische Komponenten

• sowie Hervorheben ausgewählter Informationen


z.B.:

• List View in Verbindung mit Grid Layout

• timeline

• gauge ...


Resumé



Resumé

Alta UI

• ist ein Ansatz für die Gestaltung von Benutzeroberflächen, der durch den Mobile First Ansatz getrieben ist

• Informationsdesign erhöht die Effizienz für die Benutzer

• ansprechende Gestaltung erhöht die Attraktivität der Anwendung

• Alta Skin unterstützt die Umsetzung des Alta UI mit ADF Faces und MAF



Material



Material (I)

Work Better Application

http://download.oracle.com/otn_hosted_doc/jdeveloper/12cdemos/WorkBetterFaces.swf

Demo Beschreibung

http://www.oracle.com/technetwork/developer-tools/jdev/learnmore/index-098948.html

Download

http://jdevadf.oracle.com/workbetter/faces/index.jsf

Online Demo

Developing Your First Oracle Alta UI page with Oracle ADF Faces

https://blogs.oracle.com/shay/entry/a_guide_to_developing_your

Blog / Video

http://www.oracle.com/webfolder/ux/middleware/alta/index.html

Alta UI - Einstiegsseite Oracle


Material (II)


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

Simplified User Experience Design Patterns for the Oracle Applicatiobns Cloud Service

E-Book

A User Interface Philosophy - Oracle Alta UI

http://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0CC0QFjACahUKEwiLq9rD_4_GAhUlgtsKHVVXANE&url=http%3A%2F%2Fwww.ukoug.org%2Fwhat-we-offer%2Flibrary%2Foracle-scene-issue-56%2Fos56.pdf&ei=V-B9VcujPKWE7gbVroGIDQ&usg=AFQjCNGrXFB56FVC17s5AIpzvIIIEgLGcA&bvm=bv.95515949,d.ZGU

Artikel

@ADFCommunityDE

Oracle ADF Community

deutsche ADF Community

Nächste Session am 9.10.2015

ADF Spotlight

- Was gibt es Neues -

„MCS Platform API“

Frank Nimphius

+++ Weitere Informationen , Termine & Unterlagen zu dieser und vergangenen ADF Spotlight Sessions finden Sie auf den deutschen OTN ADF Community Seiten (http://bit.ly/ADFCommunityDE) +++

http://bit.ly/HUcYuI

http://bit.ly/ADFCommunityDEGoogle

Documents

Bitte nutzen Sie die integrierte Audio-Funktion von WebEx ...otn/documents/web... · Grundkonzepte von Oracle ALTA UI & Umsetzungsbeispiele mit ADF Annegret Warnecke Systemberaterin,