1
Tiles and Touch: IT-Architektur für moderne Business-UI Wolfgang Frech Software-Architekturen in der Praxis Workshop am 28.11.2012 in Unterhaching
E-Mail schreibt man auf dem Handy Erfahrung Erstes Look and Feel Primäres Look and Feel Mobile Nutzung einer GA Windows 8 Modern Style Erwartung Gewohnte Interaktionen auch in GA Ein Look and Feel für GA 3
Architektur gestalten mit Überblick Was erwarten die Benutzer? Wozu ist das gut? Was kann man angemessen übertragen? Welche Teile meiner Architektur betrifft das? Ist das aufwändig? Geht das in meiner Basisarchitektur? Brauche ich neue Komponenten? 4
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 5
Touch und Hover-Help (1/5) Hover zeigt Erklärung 6
Touch und Hover-Help (2/5) Tap auf Hilfe-Button 7
Touch und Hover-Help (3/5) Portal Präsentation Querschnitt Geschäftslogik Präsentation Integration Persistenz 8
Touch und Hover-Help (4/5) Portal nur in View ggf. Browser-Erkennung Querschnitt Geschäftslogik Präsentation Integration Persistenz 9
Auf meinem Handy geht das doch auch (5/5) A Neuartig Fällt positiv auf. B Bekannt Verhandelbar C Selbstverständlich Fehlen fällt stark negativ auf. 10
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 11
Responsive Design (1/3) Nutze den Platz! 12
Responsive Design (2/3) Einfach: Layout Schwierig: Screen spalten 13
Responsive Design (3/3) Portal CSS View-Fragmente adapt. Screen-Flow Querschnitt Geschäftslogik Präsentation Integration Persistenz 14
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 15
Favoriten und Sharing (1/3) Persönliches Gerät hat pers. Arbeitsumgebung Minimum: Bookmarkable Link Elemente auszeichnen und finden Plus: Favoriten und Nutzung in der Gruppe 16
Favoriten und Sharing (2/3) Minimum: Bookmarkable Link Elemente auszeichnen Ausgezeichnete Elemente finden Favoriten übrige Elemente 17
Favoriten und Sharing (3/3) Portal Rollen und Gruppen Auszeichnen, Finden Kacheln, Gruppen, DnD Geschäftslogik Präsentation Favoriten, Gruppen Integration 18
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 19
Suche (1/3) Suche über alle Elemente und Eigenschaften Rang und Reihenfolge ist Geschäftslogik! 20
Suche (2/3) Portal Eingabefeld heterogene Treffer Querschnitt Präsentation Kern-Logik Integration Favoriten, Gruppen 21
Suche (3/3) Portal Eingabefeld heterogene Treffer Querschnitt Geschäftslogik Präsentation Integration Favoriten, Gruppen 22
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 23
Benachrichtigung (1/3) Störe mich nicht! Fasse Ereignisse zusammen! Zusammenfassung ist Geschäftslogik 24
Benachrichtigung (2/3) Portal Menü Push Querschnitt Präsentation Kern-Logik Integration Ereignisse Änderungen 25
Benachrichtigung (3/3) Portal Menü Querschnitt Präsentation Kern-Logik Integration Ereignisse Änderungen 26
Programm These Ziel Touch und Hover-Help Responsive Design Favoriten Suche Benachrichtigung Mehr Interaktionen Zusammenfassung Diskussion 27
Mehr Interaktionen Smart Icon Multitouch Application Integration Noch mehr Interaktionen Context Action Bar Location Transitions- Animationen 28
Zusammenfassung Benutzer erwarten Interaktionsmuster, die sie von mobilen Geräten kennen. Viele Interaktionsmuster können auf Geschäftsanwendungen übertragen werden, auch in Web-Technik. Die Interaktionsmuster betreffen die Präsentation und meist noch weitere Schichten. Such-Reihenfolge und zusammengefasste Benachrichtigung brauchen ein Konzept für die Geschäftslogik. Die Interaktionsmuster sind nicht nur modern, sondern sie entlasten den Benutzer. 29
und wie dürfen wir Sie entlasten? 30
Ihre Fragen? Wolfgang Frech Wolfgang.Frech@iteratec.de +49 89 614551 640 iteratec GmbH Inselkammerstr. 4 82008 München-Unterhaching www.iteratec.de 31