ADF User Interface Design Best Practices

1,118 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,118
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

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
  • ADF User Interface Design Best Practices

    1. 1. ADF USER INTERFACE DESIGNBEST PRACTICE Andreas Koop CEO & Consultant Oracle TechnologiesDOAG 2012
    2. 2. ENTERPRISE PRAGMATIC IT Consulting Training Development Oracle Fusion Oracle Oracle Oracle Middleware WebCenter ADF WebLogicEnable productive IT by Oracle Technologies
    3. 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. 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. 5. AGENDADesign before you CodeSeitenlayoutFormular DesignBarrierefreies Design (Accessible)Tipps und TricksAndreas Koop 5
    6. 6. BEFORE YOU START ‣ Mockup / Wireframing Klick-Prototyping ‣ Fokussierung auf Inhalt und Funktionalität ‣ Günstige und Schnelle IterationszyklenAndreas Koop 6
    7. 7. MOCKUP TOOLINGEMPFEHLUNG ‣ Balsamiq (Desktop, Web, GDrive Sync) ‣ Moqups Beta (Web / HTML5) https://moqups.com jeweils inkl. Mobile UI MockupsAndreas Koop 7
    8. 8. IDENTIFY UI DESIGN PATTERNSAndreas Koop 8
    9. 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. 10. CENTERED LAYOUTDESIGN 33% fixed stretch 33% 33% 33%Andreas Koop 10
    11. 11. CENTERED LAYOUTHOWTO (11.1.1.X) Just a Placeholder Verhindert vertikale Streckung der PanelBox Just a PlaceholderAndreas Koop 11
    12. 12. CENTERED LAYOUTHOWTO (11.1.2.2+) Einfacher, Exakter, Besser!Andreas Koop 12
    13. 13. COLLAPSIBLE CONTEXT INFODESIGN fixed stretchAndreas Koop 13
    14. 14. COLLAPSIBLE CONTEXT INFOHOWTO } Not NeededAndreas Koop 14
    15. 15. CONTENT LAYOUTDESIGN stretch fixed h1 Instruction h2 h3Andreas Koop 15
    16. 16. CONTENT LAYOUTHOWTO (default)Andreas Koop 16
    17. 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. 18. STRETCH VS FLOW stretch stretchAndreas Koop 18
    19. 19. STRETCH VS FLOW stretch stretchAndreas Koop 18
    20. 20. STRETCH VS FLOW No Stretch Bei gleichgebliebener Tabelle (af:table) ! No StretchAndreas Koop 19
    21. 21. FORMULAR DESIGNWo ist das Problem?Andreas Koop 20
    22. 22. FORMULAR DESIGNWo ist das Problem?Andreas Koop 20
    23. 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. 24. FORMULAR DESIGNAndreas Koop 22
    25. 25. FORMULAR DESIGN 50% 50%Andreas Koop 22
    26. 26. FORMULAR DESIGN 50% 50% 50% 50%Andreas Koop 22
    27. 27. FORMULAR DESIGN 50% 50%inputDate ist stabil 50% 50%Andreas Koop 22
    28. 28. FORMULAR DESIGNHOWTOAndreas Koop 23
    29. 29. FORMULAR DESIGNAF:PANELGRIDLAYOUT (11.1.2.2+) Ideal zur Umsetzung „klassischer “ Forms Masken;) Wizard ab 11.1.2.3Andreas Koop 24
    30. 30. FORMULAR DESIGNAF:PANELGRIDLAYOUT (11.1.2.2+) Maximale Flexibilität Manuell aufwendig Eher bei generativem Ansatz empfehlenswertAndreas Koop 25
    31. 31. FORMULAR TAB KREISLAUFAndreas Koop 26
    32. 32. FORMULARTAB KREISLAUF Vieles Möglich! Machen Sie es aber nicht zu kompliziert!Andreas Koop 27
    33. 33. FORMULAR TAB KREISLAUFBEST PRACTICEAndreas Koop 28
    34. 34. FORMULAR GRUPPEN <af:panelFormLayout> <af:group> ... ... </af:panelFormLayout> </af:group>Andreas Koop 29
    35. 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. 36. BARRIEREFREIHEITAndreas Koop 31
    37. 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. 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. 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. 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. 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. 42. VIELEN DANK FÜR IHRE AUFMERKSAMKEITHABEN SIE NOCH FRAGEN?

    ×