• Save
ADF User Interface Design Best Practices
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
811
On Slideshare
811
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • - component based: d.h. man ist auf die von JSF zur Verfügung gestellten Properties angewiesen und kann den HTML-Code nicht direkt beeinflussen\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Oracle UI Shell ist nicht fix. Dient als Grundlage für Custom UI Shell!\n
  • \n
  • \n
  • \n
  • \n
  • Inhaltsbereich klar strukturieren\naf:panelHeader\naf:showDetailHeader\nkein af:panelbox! => Nur für Zusatzinformationen!\n
  • \n
  • \n
  • \n
  • \n
  • - Old style: af:panelForm, LabelAndMessage\nFeldHilfe\n- Auto scale. 50% scale usw...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • TODO: Beispiel zeigen\n\n
  • TODO: Beispiel zeigen\n\n
  • - Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
  • \n
  • - Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • + Unified, consistent Popup Handling (no IFrame)\n
  • \n
  • \n
  • \n

Transcript

  • 1. ADF USER INTERFACE DESIGNBEST PRACTICE Andreas Koop CEO & Consultant Oracle TechnologiesDOAG 2012
  • 2. ENTERPRISE PRAGMATIC IT Consulting Training Development Oracle Fusion Oracle Oracle Oracle Middleware WebCenter ADF WebLogicEnable productive IT by Oracle Technologies
  • 3. WHAT IS MOST CHALLENGING INADF PROJECTS? In courtesy of Andrejus Baranovskis Quelle: http://andrejusb.blogspot.de/2012/10/oow12-oracle-adf-implementations-around.htmlAndreas Koop 3
  • 4. WHY IS USER INTERFACE DESIGNMOST CHALLENGING?‣ Component Based‣ 150+ Components‣ Lots of Properties‣ Lots of easily confusing components - XYLayout, XYHeader, XYBox‣ Design Preview != Runtime ViewAndreas Koop 4
  • 5. AGENDADesign before you CodeSeitenlayoutFormular DesignBarrierefreies Design (Accessible)Tipps und TricksAndreas Koop 5
  • 6. BEFORE YOU START ‣ Mockup / Wireframing Klick-Prototyping ‣ Fokussierung auf Inhalt und Funktionalität ‣ Günstige und Schnelle IterationszyklenAndreas Koop 6
  • 7. MOCKUP TOOLINGEMPFEHLUNG ‣ Balsamiq (Desktop, Web, GDrive Sync) ‣ Moqups Beta (Web / HTML5) https://moqups.com jeweils inkl. Mobile UI MockupsAndreas Koop 7
  • 8. IDENTIFY UI DESIGN PATTERNSAndreas Koop 8
  • 9. DESIGN PATTERNSAND BEHAVIOR ‣ Anwendungswechsel / Home-Link ‣ Auto-Suggest / Typeahead ‣ Dynamic Tabs ‣ Kontext- / Speichermodell definieren ‣ Barrierefreiheit berücksichtigen ‣ Keep it simple, think mobile firstAndreas Koop 9
  • 10. CENTERED LAYOUTDESIGN 33% fixed stretch 33% 33% 33%Andreas Koop 10
  • 11. CENTERED LAYOUTHOWTO (11.1.1.X) Just a Placeholder Verhindert vertikale Streckung der PanelBox Just a PlaceholderAndreas Koop 11
  • 12. CENTERED LAYOUTHOWTO (11.1.2.2+) Einfacher, Exakter, Besser!Andreas Koop 12
  • 13. COLLAPSIBLE CONTEXT INFODESIGN fixed stretchAndreas Koop 13
  • 14. COLLAPSIBLE CONTEXT INFOHOWTO } Not NeededAndreas Koop 14
  • 15. CONTENT LAYOUTDESIGN stretch fixed h1 Instruction h2 h3Andreas Koop 15
  • 16. CONTENT LAYOUTHOWTO (default)Andreas Koop 16
  • 17. CONTENT LAYOUTHOW NOT TO Panel boxes are intended only for ancillary information, and should not be used for the primary page task!Oracle RCUI GuideAndreas Koop 17
  • 18. STRETCH VS FLOW stretch stretchAndreas Koop 18
  • 19. STRETCH VS FLOW stretch stretchAndreas Koop 18
  • 20. STRETCH VS FLOW No Stretch Bei gleichgebliebener Tabelle (af:table) ! No StretchAndreas Koop 19
  • 21. FORMULAR DESIGNWo ist das Problem?Andreas Koop 20
  • 22. FORMULAR DESIGNWo ist das Problem?Andreas Koop 20
  • 23. FORMULAR DESIGN ‣ Fluchtlinien minimieren, Feldbreiten skalieren ‣ Feste Feldbreiten für fixen Content (Datum) ‣ Schlichtes Layout festlegen ‣ Mobile First ‣ Max. 2 SpaltenAndreas Koop 21
  • 24. FORMULAR DESIGNAndreas Koop 22
  • 25. FORMULAR DESIGN 50% 50%Andreas Koop 22
  • 26. FORMULAR DESIGN 50% 50% 50% 50%Andreas Koop 22
  • 27. FORMULAR DESIGN 50% 50%inputDate ist stabil 50% 50%Andreas Koop 22
  • 28. FORMULAR DESIGNHOWTOAndreas Koop 23
  • 29. FORMULAR DESIGNAF:PANELGRIDLAYOUT (11.1.2.2+) Ideal zur Umsetzung „klassischer “ Forms Masken;) Wizard ab 11.1.2.3Andreas Koop 24
  • 30. FORMULAR DESIGNAF:PANELGRIDLAYOUT (11.1.2.2+) Maximale Flexibilität Manuell aufwendig Eher bei generativem Ansatz empfehlenswertAndreas Koop 25
  • 31. FORMULAR TAB KREISLAUFAndreas Koop 26
  • 32. FORMULARTAB KREISLAUF Vieles Möglich! Machen Sie es aber nicht zu kompliziert!Andreas Koop 27
  • 33. FORMULAR TAB KREISLAUFBEST PRACTICEAndreas Koop 28
  • 34. FORMULAR GRUPPEN <af:panelFormLayout> <af:group> ... ... </af:panelFormLayout> </af:group>Andreas Koop 29
  • 35. BARRIEREFREIHEIT ‣ ScreenReader (z.B. JAWS) ‣ Vergrößerung / Kontrast (s/w) ‣ ADF (trinidad-config.xml) ‣ accessibility-mode: default, screenReader ‣ accessibility-profile: normal, high-contrast, large-fontsAndreas Koop 30
  • 36. BARRIEREFREIHEITAndreas Koop 31
  • 37. BARRIEREFREIHEITBEST PRACTICE ‣ Einstellungen im Cookie speichern ‣ Korrekte Komponentenverwendung achten (H1-6 Level, af:showDetailHeader, size=“-1“) ‣ Orientierungspunkte verwenden (Landmarks) ‣ Tabelle (Summary), Label for InputComponent ‣ WAI-ARIA (role=presentation, => Layouttable kein Problem!)Andreas Koop 32
  • 38. BARRIEREFREIHEITHERAUSFORDERUNGEN^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 möglich ;)Andreas Koop 33
  • 39. Do not useEMPFEHLUNG every 150+ UI Components ‣ An ADF UI Standards halten, auch wenn (noch) nicht alle modernen Patterns möglich sind (z.B. HTML5 Placeholder) ‣ Komponenten-Architektur von ADF/JSF schenkt neue Features bei Versionsupgrade! (Beispiel: DVT Komponenten als HTML5) ‣ ADF Skin, Skin, Skin ‣ Nicht gegen, sondern mit ADF gehen!Andreas Koop 34
  • 40. ENHANCEMENT REQUESTSLAYOUT & 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)Andreas Koop 35
  • 41. 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 36
  • 42. VIELEN DANK FÜR IHRE AUFMERKSAMKEITHABEN SIE NOCH FRAGEN?