ADF USER INTERFACE

DESIGN
BEST PRACTICE

Andreas Koop
CEO & Consultant
Oracle Technologies

DOAG 2012

ENTERPRISE
PRAGMATIC IT

Consulting
Oracle Fusion
Middleware

Oracle
WebCenter

Training
Oracle
ADF

Enable productive IT by Oracle Technologies

Development
Oracle
WebLogic

WHAT IS MOST
CHALLENGING IN
ADF PROJECTS?

In courtesy of
Andrejus Baranovskis

Quelle: http://andrejusb.blogspot.de/2012/10/oow12-oracle-adf-implement
ations-around.html

Andreas Koop

WHY IS USER INTERFACE

DESIGN MOST
CHALLENGING?

Component Based

150+ Components

Lots of Properties

Lots of easily confusing

components - XYLayout, XYHeader,
XYBox

Design Preview != Runtime View

Andreas Koop

AGENDA
Design before you Code
Seitenlayout
Formular Design
Barrierefreies Design (Accessible)
Tipps und Tricks
Andreas Koop

BEFORE YOU START

Mockup / Wireframing
Klick-Prototyping

Fokussierung auf Inhalt

und Funktionalitt

Gnstige und Schnelle

Iterationszyklen

Andreas Koop

MOCKUP TOOLING
EMPFEHLUNG

Balsamiq
(Desktop,
Web,
GDrive Sync)

Moqups Beta
(Web / HTML5)
https://moqups.com

Andreas Koop

jeweils inkl.
Mobile UI
Mockups

IDENTIFY UI DESIGN
PATTERNS

Andreas Koop

DESIGN PATTERNS
AND BEHAVIOR

Anwendungswechsel / Home-Link

Auto-Suggest / Typeahead

Dynamic Tabs

Kontext- / Speichermodell definieren

Barrierefreiheit bercksichtigen

Keep it simple, think mobile first

Andreas Koop

CENTERED LAYOUT
DESIGN

33%
fixed
stretch
33%
Andreas Koop

33%

33%
1

CENTERED LAYOUT
HOWTO (11.1.1.X)

Just a Placeholder
Verhindert vertikale
Streckung der
PanelBox
Just a Placeholder
Andreas Koop

CENTERED LAYOUT
HOWTO (11.1.2.2+)

Einfacher, Exakter, Besser!

Andreas Koop

COLLAPSIBLE CONTEXT
INFO
DESIGN

fixed
stretch

Andreas Koop

COLLAPSIBLE CONTEXT
INFO
HOWTO

}
Andreas Koop

Not Needed

CONTENT LAYOUT
DESIGN

stretch
fixed
h1
h2
h3
Andreas Koop

Instruction
1

CONTENT LAYOUT
HOWTO

(default)

Andreas Koop

CONTENT LAYOUT
HOW NOT TO

Panel boxes are intended only for ancillary

information,
and should not be used for the primary page
Oracletask!
RCUI

Guide
Andreas Koop

STRETCH VS FLOW

stretch

stretch

Andreas Koop

STRETCH VS FLOW
No Stretch

Bei
gleichgebliebener
Tabelle (af:table) !

No Stretch
Andreas Koop

FORMULAR DESIGN

Wo ist das Problem?

Andreas Koop

FORMULAR DESIGN

Fluchtlinien minimieren, Feldbreiten

skalieren

Feste Feldbreiten fr fixen Content

(Datum)

Schlichtes Layout festlegen

Mobile First

Max. 2 Spalten

Andreas Koop

FORMULAR DESIGN

50%

50%

inputDate ist
stabil

50% 50%
Andreas Koop

FORMULAR DESIGN
HOWTO

Andreas Koop

FORMULAR DESIGN

AF:PANELGRIDLAYOUT
(11.1.2.2+)
Ideal zur
Umsetzung
klassische
r Forms
Masken;)

Wizard ab
11.1.2.3
Andreas Koop

FORMULAR DESIGN

AF:PANELGRIDLAYOUT
(11.1.2.2+)

Maximale Flexibilitt
Manuell aufwendig
Eher bei generativem
Ansatz empfehlenswert
Andreas Koop

FORMULAR TAB
KREISLAUF

Andreas Koop

FORMULAR
TAB KREISLAUF

Vieles
Mglich!

Machen Sie es aber

nicht zu kompliziert!
Andreas Koop

FORMULAR TAB
KREISLAUF
BEST PRACTICE

Andreas Koop

FORMULAR GRUPPEN

<af:panelFormLayout
>
...
</af:panelFormLayout
>
Andreas Koop

<af:group>
...
</af:group>
3

BARRIEREFREIHEIT

ScreenReader (z.B. JAWS)

Vergrerung / Kontrast (s/w)

ADF (trinidad-config.xml)

accessibility-mode: default,
screenReader

accessibility-profile: normal, highcontrast, large-fonts

Andreas Koop

BARRIEREFREIHEIT

Andreas Koop

BARRIEREFREIHEIT
BEST PRACTICE

Einstellungen im Cookie speichern

Korrekte Komponentenverwendung
achten
(H1-6 Level, af:showDetailHeader,
size=-1)

Orientierungspunkte verwenden
(Landmarks)

Tabelle (Summary), Label for

InputComponent3

Andreas Koop

BARRIEREFREIHEIT
HERAUSFORDERUNGEN
^3

Fokussteuerung!
=> W/A ab 11gR2 mittels JSF 2
FaceBehaviors

Navigation im af:tree / af:treeTable

unzumutbar
(Warum nicht wie im Windows
Explorer?)

Einfach Link-Listen <ul>... nicht

mglich ;)

Andreas Koop

EMPFEHLUNG

Do not use
every 150+ UI
Components

An ADF UI Standards halten, auch

wenn (noch) nicht alle modernen
Patterns mglich sind (z.B. HTML5
Placeholder)

Komponenten-Architektur von ADF/JSF

schenkt neue Features bei
Versionsupgrade!
(Beispiel: DVT Komponenten als
HTML5)

ADF Skin, Skin, Skin

3

Andreas Koop

ENHANCEMENT
REQUESTS
LAYOUT & INPUT

af:panelSplitter - minPos, maxPos,

resizable (bool)

af:input... - prompt (HTML5

placeholder Attribute)

Consistent Popup-Handling (inline / TF

as dialog)

Better af:tree / af:treeTable

implementation in screenReader
Mode. (i.e. Win file
explorer
tree)
3

Andreas Koop

WEITERE
INFORMATIONEN

Oracle Rich Client UI Design Guidelines

Oracle Design Patterns and Guidelines

Lot of UX Material

http://ui-patterns.com/

http://www.uxbooth.com/

http://einfach-fuer-alle.de
(Barrierefreiheit)

Andreas Koop

VIELEN DANK FR IHRE

AUFMERKSAMKEIT

HABEN SIE NOCH FRAGEN