Bitte nutzen Sie die integrierte Audio-Funktion von WebEx ...otn/documents/web... · Grundkonzepte...

+++ 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

annegret.warnecke@oracle.com

+++ 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

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

Oracle Alta UI - Agenda -

Oracle Confidential – Internal/Restricted/Highly Restricted 5

was ist Alta UI (inkl. Zweck / Motivation)

Designkonzept im Alta UI

Alta UI mit ADF umsetzen

Resumé

P.S.: verfügbares Material

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

was ist Alta UI (inkl. Zweck / Motivation)

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

Oracle Alta UI - der neue Standard für Oracle

Oracle Confidential – Internal/Restricted/Highly Restricted 7

look & feel

optimierte Zugriffswege zu Informationen

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

Motivation (I)

Good design patterns are productivity multipliers.

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

Oracle Confidential – Internal/Restricted/Highly Restricted 8

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

Motivation (II)

Oracle Confidential – Internal/Restricted/Highly Restricted 9

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

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

Designkonzepte im Alta UI

Oracle Confidential – Internal/Restricted/Highly Restricted 10

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

Oracle Alta UI

Oracle Confidential – Internal/Restricted/Highly Restricted 11

think visually / mobile first

simple layout / clear information hierarchy

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

Alta UI - neues Look & Feel

Oracle Confidential – Internal/Restricted/Highly Restricted 12

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

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

Alta UI - Seitenlayout

Oracle Confidential – Internal/Restricted/Highly Restricted 13

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

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

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

Alta UI mit ADF umsetzen

Oracle Confidential – Internal/Restricted/Highly Restricted 15

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

Alta Skin - ein "luftigeres" Grundlayout

Oracle Confidential – Internal/Restricted/Highly Restricted 16

skyros skin alta skin

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

Alta Skin verwenden

Oracle Confidential – Internal/Restricted/Highly Restricted 17

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

Tablet First Template

• vordefinierte Seitenaufteilung

• kann für verschiedene Alta UI Vorlagen verwendet werden

Oracle Confidential – Internal/Restricted/Highly Restricted 18

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

Tablet First Template

- Beispiel -

Oracle Confidential – Internal/Restricted/Highly Restricted 19

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

graphische Darstellungsweisen bevorzugen

Kombination aus

• ADF Layoutkomponenten

• graphische Komponenten

• sowie Hervorheben ausgewählter Informationen

Oracle Confidential – Internal/Restricted/Highly Restricted 20

z.B.:

• List View in Verbindung mit Grid Layout

• timeline

• gauge ...

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

Resumé

Oracle Confidential – Internal/Restricted/Highly Restricted 21

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

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

Oracle Confidential – Internal/Restricted/Highly Restricted 22

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

Material

Oracle Confidential – Internal/Restricted/Highly Restricted 23

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

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

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

Material (II)

Oracle Confidential – Internal/Restricted/Highly Restricted 25

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) +++