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