Professional Documents
Culture Documents
Adf User Interface Design Best Practice: Andreas Koop
Adf User Interface Design Best Practice: Andreas Koop
DESIGN
BEST PRACTICE
Andreas Koop
CEO & Consultant
Oracle Technologies
DOAG 2012
ENTERPRISE
PRAGMATIC IT
Consulting
Oracle Fusion
Middleware
Oracle
WebCenter
Training
Oracle
ADF
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
Component Based
150+ Components
Lots of Properties
Andreas Koop
AGENDA
Design before you Code
Seitenlayout
Formular Design
Barrierefreies Design (Accessible)
Tipps und Tricks
Andreas Koop
Mockup / Wireframing
Klick-Prototyping
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
Barrierefreiheit bercksichtigen
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+)
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
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
Andreas Koop
FORMULAR DESIGN
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!
FORMULAR TAB
KREISLAUF
BEST PRACTICE
Andreas Koop
FORMULAR GRUPPEN
<af:panelFormLayout
>
...
</af:panelFormLayout
>
Andreas Koop
<af:group>
...
</af:group>
3
BARRIEREFREIHEIT
ADF (trinidad-config.xml)
accessibility-mode: default,
screenReader
Andreas Koop
BARRIEREFREIHEIT
Andreas Koop
BARRIEREFREIHEIT
BEST PRACTICE
Korrekte Komponentenverwendung
achten
(H1-6 Level, af:showDetailHeader,
size=-1)
Orientierungspunkte verwenden
(Landmarks)
Andreas Koop
BARRIEREFREIHEIT
HERAUSFORDERUNGEN
^3
Fokussteuerung!
=> W/A ab 11gR2 mittels JSF 2
FaceBehaviors
Andreas Koop
EMPFEHLUNG
Do not use
every 150+ UI
Components
Andreas Koop
ENHANCEMENT
REQUESTS
LAYOUT & INPUT
Andreas Koop
WEITERE
INFORMATIONEN
Lot of UX Material
http://ui-patterns.com/
http://www.uxbooth.com/
http://einfach-fuer-alle.de
(Barrierefreiheit)
Andreas Koop