SlideShare ist ein Scribd-Unternehmen logo
1 von 42
ADF USER INTERFACE DESIGN
BEST PRACTICE




                       Andreas Koop
                        CEO & Consultant
                       Oracle Technologies




DOAG 2012
ENTERPRISE PRAGMATIC IT




   Consulting                  Training                Development
 Oracle Fusion         Oracle                 Oracle        Oracle
  Middleware          WebCenter                ADF         WebLogic

Enable productive IT by Oracle Technologies
WHAT IS MOST CHALLENGING IN
ADF PROJECTS?


                                                                                                  In courtesy of
                                                                                               Andrejus Baranovskis




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



Andreas Koop                                                           3
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                  4
AGENDA

Design before you Code

Seitenlayout

Formular Design

Barrierefreies Design (Accessible)

Tipps und Tricks
Andreas Koop                5
BEFORE YOU START
   ‣           Mockup / Wireframing
               Klick-Prototyping

   ‣           Fokussierung auf Inhalt
               und Funktionalität

   ‣           Günstige und Schnelle
               Iterationszyklen



Andreas Koop                           6
MOCKUP TOOLING
EMPFEHLUNG
   ‣           Balsamiq
               (Desktop,
               Web,
               GDrive Sync)

   ‣           Moqups Beta
               (Web / HTML5)
               https://moqups.com       jeweils inkl.
                                         Mobile UI
                                         Mockups


Andreas Koop                        7
IDENTIFY UI DESIGN PATTERNS




Andreas Koop   8
DESIGN PATTERNS
AND BEHAVIOR
   ‣           Anwendungswechsel / Home-Link

   ‣           Auto-Suggest / Typeahead

   ‣           Dynamic Tabs

   ‣           Kontext- / Speichermodell definieren

   ‣           Barrierefreiheit berücksichtigen

   ‣           Keep it simple, think mobile first

Andreas Koop                          9
CENTERED LAYOUT
DESIGN

                                 33%


                                 fixed


                                 stretch

          33%   33%        33%
Andreas Koop          10
CENTERED LAYOUT
HOWTO (11.1.1.X)

                    Just a Placeholder

                    Verhindert vertikale
                    Streckung der PanelBox



                    Just a Placeholder

Andreas Koop   11
CENTERED LAYOUT
HOWTO (11.1.2.2+)




               Einfacher, Exakter, Besser!

Andreas Koop                12
COLLAPSIBLE CONTEXT INFO
DESIGN

                      fixed


                      stretch




Andreas Koop   13
COLLAPSIBLE CONTEXT INFO
HOWTO




               }        Not Needed




Andreas Koop       14
CONTENT LAYOUT
DESIGN


                                  stretch


                                  fixed
     h1
               Instruction
       h2
        h3
Andreas Koop                 15
CONTENT LAYOUT
HOWTO




                    (default)




Andreas Koop   16
CONTENT LAYOUT
HOW NOT TO




               Panel boxes are intended only for ancillary information,
                 and should not be used for the primary page task!

Oracle RCUI Guide
Andreas Koop                          17
STRETCH VS FLOW


                              stretch



               stretch



Andreas Koop             18
STRETCH VS FLOW


                              stretch



               stretch



Andreas Koop             18
STRETCH VS FLOW

                 No Stretch




                      Bei gleichgebliebener
                       Tabelle (af:table) !
    No Stretch

Andreas Koop     19
FORMULAR DESIGN




Wo ist das Problem?



Andreas Koop          20
FORMULAR DESIGN




Wo ist das Problem?



Andreas Koop          20
FORMULAR DESIGN
   ‣           Fluchtlinien minimieren, Feldbreiten skalieren

   ‣           Feste Feldbreiten für fixen Content (Datum)

   ‣           Schlichtes Layout festlegen

        ‣        Mobile First

        ‣        Max. 2 Spalten



Andreas Koop                         21
FORMULAR DESIGN




Andreas Koop   22
FORMULAR DESIGN


               50%   50%




Andreas Koop               22
FORMULAR DESIGN


                50%   50%




               50% 50%
Andreas Koop                22
FORMULAR DESIGN


                50%   50%

inputDate
 ist stabil




               50% 50%
Andreas Koop                22
FORMULAR DESIGN
HOWTO




Andreas Koop   23
FORMULAR DESIGN
AF:PANELGRIDLAYOUT (11.1.2.2+)

                           Ideal zur
                          Umsetzung
                          „klassischer
                            “ Forms
                           Masken;)




                          Wizard ab
                          11.1.2.3

Andreas Koop   24
FORMULAR DESIGN
AF:PANELGRIDLAYOUT (11.1.2.2+)



                    Maximale Flexibilität

                    Manuell aufwendig

                    Eher bei generativem
                    Ansatz empfehlenswert

Andreas Koop   25
FORMULAR TAB KREISLAUF




Andreas Koop   26
FORMULAR
TAB KREISLAUF



                                             Vieles
                                            Möglich!

                    Machen Sie es aber
                    nicht zu kompliziert!

Andreas Koop   27
FORMULAR TAB KREISLAUF
BEST PRACTICE




Andreas Koop    28
FORMULAR GRUPPEN




               <af:panelFormLayout>         <af:group>
                          ...                     ...
               </af:panelFormLayout>        </af:group>


Andreas Koop                           29
BARRIEREFREIHEIT
   ‣           ScreenReader (z.B. JAWS)

   ‣           Vergrößerung / Kontrast (s/w)

   ‣           ADF (trinidad-config.xml)

        ‣        accessibility-mode: default, screenReader

        ‣        accessibility-profile: normal, high-contrast,
                 large-fonts

Andreas Koop                         30
BARRIEREFREIHEIT




Andreas Koop   31
BARRIEREFREIHEIT
BEST 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
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 möglich ;)




Andreas Koop                          33
Do not use

EMPFEHLUNG                                            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
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)




Andreas Koop                         35
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
VIELEN DANK FÜR IHRE
   AUFMERKSAMKEIT



HABEN SIE NOCH FRAGEN?

Weitere ähnliche Inhalte

Andere mochten auch

Offenderworkforcedevelopment 110701164019 Phpapp02
Offenderworkforcedevelopment 110701164019 Phpapp02Offenderworkforcedevelopment 110701164019 Phpapp02
Offenderworkforcedevelopment 110701164019 Phpapp02Wlovelady
 
Resident assistant training online
Resident assistant training onlineResident assistant training online
Resident assistant training onlinegretchen213
 
arvato accompagne les entreprises dans leur expansion en Europe
arvato accompagne les entreprises dans leur expansion en Europearvato accompagne les entreprises dans leur expansion en Europe
arvato accompagne les entreprises dans leur expansion en Europearvato France
 
動畫表演
動畫表演動畫表演
動畫表演zi_yong
 
Biofuels: What Strategies For Developing The Sector in West Africa
Biofuels: What Strategies For Developing The Sector in West Africa  Biofuels: What Strategies For Developing The Sector in West Africa
Biofuels: What Strategies For Developing The Sector in West Africa ZX7
 
The design ofeveryday things
The design ofeveryday thingsThe design ofeveryday things
The design ofeveryday thingsneil.li
 
Bilan préopératoire de ICL
Bilan préopératoire de ICLBilan préopératoire de ICL
Bilan préopératoire de ICLNejib Chachia
 

Andere mochten auch (10)

Offenderworkforcedevelopment 110701164019 Phpapp02
Offenderworkforcedevelopment 110701164019 Phpapp02Offenderworkforcedevelopment 110701164019 Phpapp02
Offenderworkforcedevelopment 110701164019 Phpapp02
 
Resident assistant training online
Resident assistant training onlineResident assistant training online
Resident assistant training online
 
arvato accompagne les entreprises dans leur expansion en Europe
arvato accompagne les entreprises dans leur expansion en Europearvato accompagne les entreprises dans leur expansion en Europe
arvato accompagne les entreprises dans leur expansion en Europe
 
動畫表演
動畫表演動畫表演
動畫表演
 
cv forex new
cv forex new cv forex new
cv forex new
 
Biofuels: What Strategies For Developing The Sector in West Africa
Biofuels: What Strategies For Developing The Sector in West Africa  Biofuels: What Strategies For Developing The Sector in West Africa
Biofuels: What Strategies For Developing The Sector in West Africa
 
The design ofeveryday things
The design ofeveryday thingsThe design ofeveryday things
The design ofeveryday things
 
Vehicle Graphic Wraps
Vehicle Graphic WrapsVehicle Graphic Wraps
Vehicle Graphic Wraps
 
конкурс рмо
конкурс рмоконкурс рмо
конкурс рмо
 
Bilan préopératoire de ICL
Bilan préopératoire de ICLBilan préopératoire de ICL
Bilan préopératoire de ICL
 

Ähnlich wie ADF User Interface Design Best Practices

Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWebmontag MRN
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-ÄraAndreas Koop
 
MINIMUM VIABLE BURGER - Lean Thinking im klassischen Projektalltag
MINIMUM VIABLE BURGER - Lean Thinking im klassischen ProjektalltagMINIMUM VIABLE BURGER - Lean Thinking im klassischen Projektalltag
MINIMUM VIABLE BURGER - Lean Thinking im klassischen ProjektalltagNiels Anhalt
 
Cloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoCloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoAndreas Koop
 
Effective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADFEffective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADFenpit GmbH & Co. KG
 
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiertWünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiertWünsch AG
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker ContainerAndreas Koop
 
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPagesCollaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPagesBelsoft
 
Continuous Delivery in Oracle ADF Projekten
Continuous Delivery in Oracle ADF ProjektenContinuous Delivery in Oracle ADF Projekten
Continuous Delivery in Oracle ADF Projektenenpit GmbH & Co. KG
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionOliver Busse
 
Multichannel Application Development Best Practices
Multichannel Application Development Best PracticesMultichannel Application Development Best Practices
Multichannel Application Development Best PracticesAndreas Koop
 
ADF Software Factory - Software aus der Werkstatt
ADF Software Factory - Software aus der WerkstattADF Software Factory - Software aus der Werkstatt
ADF Software Factory - Software aus der Werkstattenpit GmbH & Co. KG
 
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.deChristoph Kleine
 
Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?enpit GmbH & Co. KG
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011Ulrich Krause
 

Ähnlich wie ADF User Interface Design Best Practices (20)

Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
MINIMUM VIABLE BURGER - Lean Thinking im klassischen Projektalltag
MINIMUM VIABLE BURGER - Lean Thinking im klassischen ProjektalltagMINIMUM VIABLE BURGER - Lean Thinking im klassischen Projektalltag
MINIMUM VIABLE BURGER - Lean Thinking im klassischen Projektalltag
 
Cloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoCloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, Demo
 
Effective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADFEffective Blueprints for Forms 2 Oracle ADF
Effective Blueprints for Forms 2 Oracle ADF
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
 
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiertWünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
Wünsch AG Vortrag mit der App ins Web oder wie man Notes modernisiert
 
Continuous Delivery in ADF Projekten
Continuous Delivery in ADF ProjektenContinuous Delivery in ADF Projekten
Continuous Delivery in ADF Projekten
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
 
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPagesCollaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
Collaboration day 2016 - Aus alt mach neu - Modernisierung mit xPages
 
Continuous Delivery in Oracle ADF Projekten
Continuous Delivery in Oracle ADF ProjektenContinuous Delivery in Oracle ADF Projekten
Continuous Delivery in Oracle ADF Projekten
 
CI und OTPC in ADF Projekten
CI und OTPC in ADF ProjektenCI und OTPC in ADF Projekten
CI und OTPC in ADF Projekten
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
 
Multichannel Application Development Best Practices
Multichannel Application Development Best PracticesMultichannel Application Development Best Practices
Multichannel Application Development Best Practices
 
ADF Software Factory
ADF Software FactoryADF Software Factory
ADF Software Factory
 
ADF Software Factory - Software aus der Werkstatt
ADF Software Factory - Software aus der WerkstattADF Software Factory - Software aus der Werkstatt
ADF Software Factory - Software aus der Werkstatt
 
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
 
Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?Parkraumbewirtschaftung mit Oracle ADF Mobile?
Parkraumbewirtschaftung mit Oracle ADF Mobile?
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 

Mehr von enpit GmbH & Co. KG

Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem VormarschVon Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarschenpit GmbH & Co. KG
 
Mit Legosteinen Maschinelles Lernen lernen
Mit Legosteinen Maschinelles Lernen lernenMit Legosteinen Maschinelles Lernen lernen
Mit Legosteinen Maschinelles Lernen lernenenpit GmbH & Co. KG
 
Client side webdevelopment with jet
Client side webdevelopment with jetClient side webdevelopment with jet
Client side webdevelopment with jetenpit GmbH & Co. KG
 
Best Practices für Last- und Performancetests von Enterprise Applikationen au...
Best Practices für Last- und Performancetests von Enterprise Applikationen au...Best Practices für Last- und Performancetests von Enterprise Applikationen au...
Best Practices für Last- und Performancetests von Enterprise Applikationen au...enpit GmbH & Co. KG
 
Agilität und Microservices als Chance für Modernisierung?
Agilität und Microservices als Chance für Modernisierung?Agilität und Microservices als Chance für Modernisierung?
Agilität und Microservices als Chance für Modernisierung?enpit GmbH & Co. KG
 
REST in Peace - Mit ORDS, Node.JS, ADF, Java oder OSB?
REST in Peace  - Mit ORDS, Node.JS, ADF, Java oder OSB?REST in Peace  - Mit ORDS, Node.JS, ADF, Java oder OSB?
REST in Peace - Mit ORDS, Node.JS, ADF, Java oder OSB?enpit GmbH & Co. KG
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenenpit GmbH & Co. KG
 
Die 5 Mythen der Forms-Modernisierung
Die 5 Mythen der Forms-ModernisierungDie 5 Mythen der Forms-Modernisierung
Die 5 Mythen der Forms-Modernisierungenpit GmbH & Co. KG
 
Choice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeuge
Choice-o-mat - Entscheidungshilfe für Oracles EntwicklungswerkzeugeChoice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeuge
Choice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeugeenpit GmbH & Co. KG
 
Visualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADFVisualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADFenpit GmbH & Co. KG
 
WebCenter Portal - Integrate Custom taskflows
WebCenter Portal - Integrate Custom taskflowsWebCenter Portal - Integrate Custom taskflows
WebCenter Portal - Integrate Custom taskflowsenpit GmbH & Co. KG
 
Java WebApps und Services on Oracle Java Cloud Service
Java WebApps und Services on Oracle Java Cloud ServiceJava WebApps und Services on Oracle Java Cloud Service
Java WebApps und Services on Oracle Java Cloud Serviceenpit GmbH & Co. KG
 
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?enpit GmbH & Co. KG
 
Best Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application DevelopmentBest Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application Developmentenpit GmbH & Co. KG
 
Oracle Cloud verleiht ADF-Anwendungen Flügel
Oracle Cloud verleiht ADF-Anwendungen FlügelOracle Cloud verleiht ADF-Anwendungen Flügel
Oracle Cloud verleiht ADF-Anwendungen Flügelenpit GmbH & Co. KG
 
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)enpit GmbH & Co. KG
 
WepApps mit Play! - Nichts leichter als das
WepApps mit Play! - Nichts leichter als dasWepApps mit Play! - Nichts leichter als das
WepApps mit Play! - Nichts leichter als dasenpit GmbH & Co. KG
 

Mehr von enpit GmbH & Co. KG (20)

Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem VormarschVon Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
 
Mit Legosteinen Maschinelles Lernen lernen
Mit Legosteinen Maschinelles Lernen lernenMit Legosteinen Maschinelles Lernen lernen
Mit Legosteinen Maschinelles Lernen lernen
 
Client side webdevelopment with jet
Client side webdevelopment with jetClient side webdevelopment with jet
Client side webdevelopment with jet
 
Best Practices für Last- und Performancetests von Enterprise Applikationen au...
Best Practices für Last- und Performancetests von Enterprise Applikationen au...Best Practices für Last- und Performancetests von Enterprise Applikationen au...
Best Practices für Last- und Performancetests von Enterprise Applikationen au...
 
Agilität und Microservices als Chance für Modernisierung?
Agilität und Microservices als Chance für Modernisierung?Agilität und Microservices als Chance für Modernisierung?
Agilität und Microservices als Chance für Modernisierung?
 
REST in Peace - Mit ORDS, Node.JS, ADF, Java oder OSB?
REST in Peace  - Mit ORDS, Node.JS, ADF, Java oder OSB?REST in Peace  - Mit ORDS, Node.JS, ADF, Java oder OSB?
REST in Peace - Mit ORDS, Node.JS, ADF, Java oder OSB?
 
Modernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesenModernisierung in Zeiten wie diesen
Modernisierung in Zeiten wie diesen
 
Die 5 Mythen der Forms-Modernisierung
Die 5 Mythen der Forms-ModernisierungDie 5 Mythen der Forms-Modernisierung
Die 5 Mythen der Forms-Modernisierung
 
Was ist Docker?
Was ist Docker?Was ist Docker?
Was ist Docker?
 
Choice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeuge
Choice-o-mat - Entscheidungshilfe für Oracles EntwicklungswerkzeugeChoice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeuge
Choice-o-mat - Entscheidungshilfe für Oracles Entwicklungswerkzeuge
 
Visualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADFVisualisierung von fachlichen Informationen mit Oracle ADF
Visualisierung von fachlichen Informationen mit Oracle ADF
 
WebCenter Portal - Integrate Custom taskflows
WebCenter Portal - Integrate Custom taskflowsWebCenter Portal - Integrate Custom taskflows
WebCenter Portal - Integrate Custom taskflows
 
Java WebApps und Services on Oracle Java Cloud Service
Java WebApps und Services on Oracle Java Cloud ServiceJava WebApps und Services on Oracle Java Cloud Service
Java WebApps und Services on Oracle Java Cloud Service
 
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?
Rapid Application Development (RAD) im Enterprise - Quo vadis Portal?
 
Best Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application DevelopmentBest Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application Development
 
Gestern OWB, heute ODI
Gestern OWB, heute ODIGestern OWB, heute ODI
Gestern OWB, heute ODI
 
Oracle WebLogic for DevOps
Oracle WebLogic for DevOpsOracle WebLogic for DevOps
Oracle WebLogic for DevOps
 
Oracle Cloud verleiht ADF-Anwendungen Flügel
Oracle Cloud verleiht ADF-Anwendungen FlügelOracle Cloud verleiht ADF-Anwendungen Flügel
Oracle Cloud verleiht ADF-Anwendungen Flügel
 
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)
Deployment Best Practices on WebLogic Server (DOAG IMC Summit 2013)
 
WepApps mit Play! - Nichts leichter als das
WepApps mit Play! - Nichts leichter als dasWepApps mit Play! - Nichts leichter als das
WepApps mit Play! - Nichts leichter als das
 

ADF User Interface Design Best Practices

  • 1. ADF USER INTERFACE DESIGN BEST PRACTICE Andreas Koop CEO & Consultant Oracle Technologies DOAG 2012
  • 2. ENTERPRISE PRAGMATIC IT Consulting Training Development Oracle Fusion Oracle Oracle Oracle Middleware WebCenter ADF WebLogic Enable productive IT by Oracle Technologies
  • 3. WHAT IS MOST CHALLENGING IN ADF PROJECTS? In courtesy of Andrejus Baranovskis Quelle: http://andrejusb.blogspot.de/2012/10/oow12-oracle-adf-implementations-around.html Andreas Koop 3
  • 4. 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 4
  • 5. AGENDA Design before you Code Seitenlayout Formular Design Barrierefreies Design (Accessible) Tipps und Tricks Andreas Koop 5
  • 6. BEFORE YOU START ‣ Mockup / Wireframing Klick-Prototyping ‣ Fokussierung auf Inhalt und Funktionalität ‣ Günstige und Schnelle Iterationszyklen Andreas Koop 6
  • 7. MOCKUP TOOLING EMPFEHLUNG ‣ Balsamiq (Desktop, Web, GDrive Sync) ‣ Moqups Beta (Web / HTML5) https://moqups.com jeweils inkl. Mobile UI Mockups Andreas Koop 7
  • 8. IDENTIFY UI DESIGN PATTERNS Andreas Koop 8
  • 9. DESIGN PATTERNS AND BEHAVIOR ‣ Anwendungswechsel / Home-Link ‣ Auto-Suggest / Typeahead ‣ Dynamic Tabs ‣ Kontext- / Speichermodell definieren ‣ Barrierefreiheit berücksichtigen ‣ Keep it simple, think mobile first Andreas Koop 9
  • 10. CENTERED LAYOUT DESIGN 33% fixed stretch 33% 33% 33% Andreas Koop 10
  • 11. CENTERED LAYOUT HOWTO (11.1.1.X) Just a Placeholder Verhindert vertikale Streckung der PanelBox Just a Placeholder Andreas Koop 11
  • 12. CENTERED LAYOUT HOWTO (11.1.2.2+) Einfacher, Exakter, Besser! Andreas Koop 12
  • 13. COLLAPSIBLE CONTEXT INFO DESIGN fixed stretch Andreas Koop 13
  • 14. COLLAPSIBLE CONTEXT INFO HOWTO } Not Needed Andreas Koop 14
  • 15. CONTENT LAYOUT DESIGN stretch fixed h1 Instruction h2 h3 Andreas Koop 15
  • 16. CONTENT LAYOUT HOWTO (default) Andreas Koop 16
  • 17. CONTENT LAYOUT HOW NOT TO Panel boxes are intended only for ancillary information, and should not be used for the primary page task! Oracle RCUI Guide Andreas Koop 17
  • 18. STRETCH VS FLOW stretch stretch Andreas Koop 18
  • 19. STRETCH VS FLOW stretch stretch Andreas Koop 18
  • 20. STRETCH VS FLOW No Stretch Bei gleichgebliebener Tabelle (af:table) ! No Stretch Andreas Koop 19
  • 21. FORMULAR DESIGN Wo ist das Problem? Andreas Koop 20
  • 22. FORMULAR DESIGN Wo 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 Spalten Andreas Koop 21
  • 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
  • 29. FORMULAR DESIGN AF:PANELGRIDLAYOUT (11.1.2.2+) Ideal zur Umsetzung „klassischer “ Forms Masken;) Wizard ab 11.1.2.3 Andreas Koop 24
  • 30. FORMULAR DESIGN AF:PANELGRIDLAYOUT (11.1.2.2+) Maximale Flexibilität Manuell aufwendig Eher bei generativem Ansatz empfehlenswert Andreas Koop 25
  • 32. FORMULAR TAB KREISLAUF Vieles Möglich! Machen Sie es aber nicht zu kompliziert! Andreas Koop 27
  • 33. FORMULAR TAB KREISLAUF BEST PRACTICE Andreas 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-fonts Andreas Koop 30
  • 37. BARRIEREFREIHEIT BEST 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. 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 möglich ;) Andreas Koop 33
  • 39. Do not use EMPFEHLUNG 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 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) 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 AUFMERKSAMKEIT HABEN SIE NOCH FRAGEN?

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. - component based: d.h. man ist auf die von JSF zur Verf&amp;#xFC;gung gestellten Properties angewiesen und kann den HTML-Code nicht direkt beeinflussen\n\n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. Oracle UI Shell ist nicht fix. Dient als Grundlage f&amp;#xFC;r Custom UI Shell!\n
  12. \n
  13. \n
  14. \n
  15. \n
  16. Inhaltsbereich klar strukturieren\naf:panelHeader\naf:showDetailHeader\nkein af:panelbox! =&gt; Nur f&amp;#xFC;r Zusatzinformationen!\n
  17. \n
  18. \n
  19. \n
  20. \n
  21. - Old style: af:panelForm, LabelAndMessage\nFeldHilfe\n- Auto scale. 50% scale usw...\n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. TODO: Beispiel zeigen\n\n
  28. TODO: Beispiel zeigen\n\n
  29. - Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
  30. \n
  31. - Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. + Unified, consistent Popup Handling (no IFrame)\n
  39. \n
  40. \n
  41. \n