Client Technologien - Ein Überblick für Usability Professionals

Client TechnologienEin Überblick für Usability Engineering ProfessionalsSwissUPA/SwissCHI Event: Zürich, 28. April 2011 Folie 1 26. April 2011 Dr. Thomas Memmel et al. © Zühlke 2011

Softwarelösungen, Produktinnovationund Managementberatung • Mehr als 7000 Projekte in Europa realisiert • 70 Mio. CHF Umsatz (2010) • 400 Mitarbeitende (Ende 2010) • In Deutschland, Grossbritannien, Österreich und in der Schweiz • Gründung 1968, Wir beraten, im Besitz von Partnern entwickeln und • ISO 9001 und 13485 zertifiziert integrieren aufgabengerecht – mit überzeugender Qualität und Wirtschaftlichkeit.Eine Idee mehr. Und Zühlke. 4. März 2011 Folie 2 © Zühlke 2011

Unser Leistungsangebot Management Consulting Consulting • • Technologieberatung & Methodik • Team Training Softwarelösungen Development • • Produktentwicklung Enterprise Integration Integration • • Methodischer Baukasten mit Best PracticesEine Idee mehr. Und Zühlke. 4. März 2011 Folie 3 © Zühlke 2011

Zühlke und Client TechnologienZühlke Group• Beratung bei der Wahl der richtigen Client Technologie• Know-How in einer großen Bandbreite an Client und Server TechnologienZühlke Competence Center Client Technologien• Ständige Auseinandersetzung mit neuen Technologien• Technologie-Scouting• Ausbildungsplanung der MitarbeiterClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 4 © Zühlke 2011

Competence Center Client TechnologieUser Interface Development TodayClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 5 © Zühlke 2011

Die Wahl der richtigen Client TechnologieBeispiel aus dem ProjektalltagEin Anbieter von Druckdienstleistungen für Presseagenturenmöchte seinen Kunden einen Client anbieten, mit demKunden Pressefotos in ein Online Archiv hochladen können.Zwecks einfacher Verteilung und Aktualisierung der Softwareschwebt dem Anbieter ein Web-Client vor, der in allengängigen Browsern funktioniert.Aussehen und anfühlen soll sich die Applikation aber wie einemoderne Desktop-Anwendung. Die Usability der Applikationist für die Akzeptanz und den Erfolg massgeblich.Welche Client Technologien kommen in Frage?Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 6 © Zühlke 2011

Richtige Client Technologie…oder Pech gehabt?• «…ist mit dieser Technologie nicht möglich»• «…so ein Widget gibt es nicht»• «…eine Animation kann man hier nur mit sehr viel Aufwand umsetzen»• «…leider kann diese Art der Tabelle nur Text anzeigen»• «…wenn wir das gewusst hätten, hätten wir von Anfang an eine andere Technologie empfohlen»Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 7 © Zühlke 2011

Usability Beratung & Client TechnologienStetig wachsende Auswahl an Client TechnologienVerschiedene Technologie-Lieferanten, z.B.• Microsoft• Adobe• Java Sun / OracleDie Wahl der Client Technologie hat z.B. Auswirkung auf• Umsetzbarkeit von Funktionalität• Komplexität der Entwicklung, Flexibilität• Usability und User Experience (Ziele)Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 8 © Zühlke 2011

Die Wahl der richtigen Client Technologie Benutzerinteraktion vs. Ausführung Web Keine Installation Applikation aktuell Ständige Datenerfassung Ständige Interaktion An jedem PC verfügbarAusführung Daten lesen Lokale Dienste Standalone Hohe Rechenleistung Offline benutzbar Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 9 © Zühlke 2011

Die Wahl der richtigen Client Technologie Komplexität: Java Client Technologien und Produkte Struts Spring Web Flow JSF ICEfaces RichFacesWeb Grails Struts2 Spring MVC RoR qooxdoo Dojo RAP Ultra Thin, Thin Wicket DWR GWT RIA (Ajax) RIA (Plug-in)Ausführung ULC Thinlets Java FX Applet Flash CaptainCasa RIA (ohne Browser)Standalone Fat, Rich, Smart Eclipse RCP Swing Application Framework NetBeans RCP SWT JFace Swing Spring Desktop Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 10 © Zühlke 2011

Die Wahl der richtigen Client TechnologieRolle des Usability ProfessionalsEinbindung in Client Technologie EntscheidGrundkenntnisse zu Client Technologien zur Impact-AbschätzungDurchgängigkeit UI Prototyping  Produkt• Zukunftstrend: Durchgängigkeit, Werkzeugketten• Werkzeuge für GUI-Prototyping in Zieltechnologien• Evolutionäres PrototypingClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 11 © Zühlke 2011

Thin, Rich oder RIA?Verschiedene Client StrategienClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 12 © Zühlke 2011

Thin Client Technologie (1/2)• Applikationskomponenten sind auf Server gespeichert• GUI wird zur Laufzeit in einem Webbrowsers angezeigt und bedient• Verarbeitung findet auf Server statt• Geringe Anforderungen an Soft- und Hardware• Geeignet für einfache Applikationen mit hoher Verbreitung• Eingeschränkte Dynamik und FunktionalitätClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 13 © Zühlke 2011

Thin Client Technologie (2/2)Thin Client Technologien: ASP, ASP.NET,PHP, Ruby, JSF.Beispiele Amazon.com Ebay.comClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 14 © Zühlke 2011

Rich Client Technologie (1/2)• GUI und Logik sind lokal verfügbar• Zugriff auf andere lokale Inhalte und Applikationen• Geeignet für hochinteraktive und grafiklastige Anwendungen• Maximum an Dynamik• Potentielle Probleme – Installationszwang – Verteilung und Aktualisierung – Aufwand für Integration in IT-LandschaftClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 15 © Zühlke 2011

Rich Client Technologie (2/2)Rich Client Technologien• Java Swing• Eclipse RCP• Windows Presentation Foundation• Windows FormsClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 16 © Zühlke 2011

Rich Client TechnologieFallbeispiel: ZEUS Airport ManagementVideo zu ZEUS: http://www.youtube.com/watch?v=o9nlMy5LCBoClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 17 © Zühlke 2011

Rich Client TechnologieFallbeispiel: Phonak (Windows Presentation Framework)Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 18 © Zühlke 2011

Rich Client Technologie – WPFWindows Presentation FrameworkRollenbasierte Werkzeugkette – Durchgängigkeit vom Design bis zum Code Expression Design Expression Blend Visual Studio Zielgruppe: Zielgruppe: Zielgruppe: • Gestalter • Interaction Designer • Entwickler • GestalterClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 19 © Zühlke 2011

Rich Client Technologie – WPFDiskussionUmfassendes Hürden / RisikenPräsentationssystem • PlattformabhängigkeitGestalterische Freiheiten • Gestalter arbeiten weiterhin• Individuelle Komponenten mit Adobe (und nicht (neu oder kombiniert) Expression Design)• Gestaltung über Themes, • Gefahr durch zu hohe Styles und Templates Freiheitsgrade: GUIs werden abseits derUmfangreiche Schnittstellen Standards ohnefür Multimedia ausreichendes TestingViele Erweiterungen entwickeltverfügbar (z.B. Ribbon)Umwandlung nach RIA(Silverlight) möglichClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 20 © Zühlke 2011

Rich Client Technologie – SwingSynthetica BlackEye Look & Feel Quelle: http://www.jyloo.com/synthetica/screenshots/blackeye/Dr. Thorsten Büring 6. September 2010 Folie 21 © Zühlke 2011

Rich Client Technologie – SwingFlamingo UI-Control Extension Quelle: https://flamingo.dev.java.net/Dr. Thorsten Büring 6. September 2010 Folie 22 © Zühlke 2011

Rich Client Technologie – SwingGUI PrototypingNapkin für „sketchy“ Prototypen JFormsDesigner • Standalone oder als Plug-in • UI Entwurf unabhängig von der Programmierung Quelle: http://www.formdev.com/Quelle: http://napkinlaf.sourceforge.netClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 23 © Zühlke 2011

Rich Client Technologie – Eclipse RCPZühlke Kundenprojekt mit der SBB © SBB 2010 Siehe auch: Thomas Memmel, Markus Flückiger, Médard Fischer (2011): «User Experience & Agile Development». In: UX Best Practices How to Achieve More Impact with User Experience, Kapitel 7. Englisch McGraw-Hill Professional.User Interface Engineering in der Praxis | Dr. Thomas Memmel 1. Mai 2011 Folie 24 © Zühlke 2011

Rich Client Technologie – Eclipse RCPDiskussionHäufig verwendete Alternative zu Java SwingNative Darstellung der GUI Elemente (Look & Feel des OS)GUI Editor• Aber: Code muss in der Regel noch überarbeitet werden• Möglichkeit zum GUI Prototyping• Programmierkenntnisse sind notwendig für die Umsetzung von interaktivem• Keine medienbruchfreie Einbinden von Design Artefakten, wie z.B. Bitmap- oder VektorgrafikenClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 25 © Zühlke 2011

Rich Client Technologie – Eclipse RCPVisual GUI Editor Quelle: http://www.eclipse.orgClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 26 © Zühlke 2011

Rich Client Technologie – Eclipse RCPSWT Prototyping mit Balsamiq Mockup Extension Quelle: http://blogs.balsamiq.com/product/2009/05/13/swt-bmml-an-interesting- new-mockups-extension/UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 27 © Zühlke 2011

Rich Client Technologie – Eclipse RCPDiskussionGeeignet für sehr aufwändige GUIsErstellen von Custom Widgets (Eclipse SWT)Vielzahl von Bibliotheken/Erweiterungen• Beispiel: Nebula Framework• Erhöht die Auswahl an GUI Elementen• Aber: nicht alle bereit gestellten GUI Elemente können einfach angepasst und kontrolliert werdenVorsicht: UIs können sehr schnell aussehen wir eine Entwicklungsumgebung!• Einsatz von RCP sollte seitens UX Experte hinterfragt werdenClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 28 © Zühlke 2011

Rich Client Technologie – Eclipse RCPGUI Elemente: Nebula Project Quelle: http://www.eclipse.org/nebula/Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 29 © Zühlke 2011

RIA Client Technologien• Über Webbrowser angezeigt und bedient• Aber: Teile der Präsentations- und Businesslogik werden zur Laufzeit auf den Client Computer geladen• Höhe Dynamik des GUIs – nicht jeder Input hat eine Serverabfrage zur Folge• Potentielle Probleme – Teilweise wird Plugin benötigt – Kollaboration mit OS nur eingeschränkt – Browser-Funktionen wie Vor und Zurück funktionieren eventuell nichtClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 30 © Zühlke 2011

RIA Client TechnologienÜberblick, zum Beispiel:• GWT• ASP.NET mit AJAX• ASP.NET MVC• JSF mit AJAX• JavaFX• Microsoft Silverlight• Adobe Flash / FlexClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 31 © Zühlke 2011

RIA Technologie – Microsoft SilverlightZühlke Projekt: Inversion ViewerSiehe: http://inversion.innetag.ch/Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 32 © Zühlke 2011

RIA Technologie – Microsoft SilverlightNutzt Teil des WPF und .Net Frameworks• Gleiche Werkzeugkette• Wiederverwendung von Know-how und Code• Ähnliche Freiheitsgrade bei der GestaltungSilverlight Toolkit zur Erweiterung der GUI LibraryTeilweise Hardwarebeschleunigung möglichOut-of-the-Browser Features: Grenzen zwischen RIA & Rich ClientsverschwimmenCross-Plattform, auch Mobile (Windows Phone 7)Direkter Konkurrent zu Adobe FlashClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 33 © Zühlke 2011

RIA Technologie – Adobe Flash / FlexFlash Flex• Von Animationen zu Applikationen • Entwickler ansprechen• Traditionelles Stammklientel: Designer • Trennung Präsentation und Logik: MXML versus Action Script• Zeitleistenbasierte Grafik-Editor mit Skriptsprache • Flex Builder: Klassische IDE (Eclipse PluginClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 34 © Zühlke 2011

RIA Technologie – Adobe FlexZühlke Kundenprojekt Internet Datensafe Quelle: www.datainherit.comClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 35 © Zühlke 2011

RIA Technologie – Adobe Flash / FlexBenötigt Browser-Plugin (aber weit verbreitet > 90%)Funktionsumfang sehr ähnlich zu SilverlightAdobe Air für Offline-FähigkeitLeider kein Flash Pendant zu SketchFlowAnsonsten ausgereifte Werkzeug-KetteFlash ist noch dominant für Internet Videos• 75% aller Online-Videos werden im Flash Player• HTML5 als künftig starke KonkurrenzClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 38 © Zühlke 2011

RIA Technologie – Adobe AirFallbeispiel: eBay Desktop Quelle: http://desktop.ebay.comClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 39 © Zühlke 2011

RIA Technologie – Adobe AirFallbeispiel: Balsamiq Prototyping Tool Siehe: http://balsamiq.com/Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 40 © Zühlke 2011

Ausblick: Adobe WallabyAdobe Flex zu HTML5Adobe Wallaby• Experimentelles Tool• Ermöglicht Nutzung der etablierten Developer Tools• Transformation nach HTML5Die Zukunft ist HTML5?• Verschiedene Werkzeuge• Aber einheitlicher StandardSiehe auch: Quelle: http://www.chip.de/news/Adobe-Wallaby-Flash-zu-HTML5-http://labs.adobe.com/downloads/wallaby.html konvertieren_47684802.htmlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 41 © Zühlke 2011

RIA Technologie – JavaFXAlternative zu Flash und Silverlight• Aber: deutlich geringere VerbreitungJavaFX Anwendungen benötigen JavaRuntime (langsamer als Flash/Silverlight) Quelle: http://www.javafx.comAusführung: Desktop (Web Start), AppletControls und Performance seit Version 1.3geeignet, um gute GUIs zu entwickelnGUI Builder stehen zur Verfügung: z.B.NetBeansJavaFX: UI Technologie von „Swing 2.0“?Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 42 © Zühlke 2011

RIA Technologie – JavaFXDurchgängige Werkzeugkette• Durchgängigkeit• Integration von Design-Artefakten mit JavaFX 1.3 Production Suite• Aus Adobe Illustrator und Adobe Photoshop heraus Quelle: http://www.javafx.comClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 43 © Zühlke 2011

RIA Technologie – JavaFXBeispiel: Geo View Quelle: http://www.vancouver2010.com/olympic-medals/geo-view/Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 44 © Zühlke 2011

RIA Technologie – Google Web ToolkitBeispiel Google Mail App Quelle: http://gwt.google.com/samples/Mail/Mail.htmlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 45 © Zühlke 2011

RIA Technologie – Google Web ToolkitGWT Compiler wandelt Java Code um• Web-Anwendung: HTML, CSS und JavaScript/AJAX• Benutzt Browser-Standards• Vielzahl an GWT BibliothekenGoogle Gears• Per Google Gears können GWT Anwendungen auf lokale Ressourcen des Clients zugreifen• Ähnlich der Sandbox von Java AppletsKein Browser Plug-in notwendig• Einfacheres DeploymentClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 46 © Zühlke 2011

RIA Technologie – Google Web ToolkitSencha Ext GWT Framework: GUI Komponenten Quelle: http://www.sencha.com/examples/explorer.htmlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 47 © Zühlke 2011

RIA Technologie – Google Web ToolkitGUI DesignGestaltung eigener GUI Elemente• HTML und CSS setzen die Grenzen• Bei GWT findet das GUI Rendering stets in HTML statt• Der GUI Designer muss die Browser-Kompatibiliät sicherstellenVisuell ansprechende und stark interaktiveBenutzeroberfläche im Vergleich zu anderen RIATechnologien schwierig• GWT eher ähnlich zu reinen Desktop AnwendungenGUI Prototyping sehr aufwendig (Coding)• Wireframes oft die bessere WahlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 48 © Zühlke 2011

RIA Technologie – Google Web ToolkitSencha Ext GWT Framework, Beispiel Web Desktop Quelle: http://www.sencha.com/examples/desktop.htmlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 49 © Zühlke 2011

Mobile Client TechnologieniOS, Android & Co.Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 50 © Zühlke 2011

Mobile Client TechnologienNeue Möglichkeiten mit HTML5 HTML5, CSS3 PhoneGap Moderne Sencha HTML- PhoneGap Sencha Touch Touch basierte Mobile App HTML5/ CSS3 …Herausforderungen von mobilen Apps | ruh 20. April 2011 Folie 51 © Zühlke 2011

Mobile Client TechnologienNative vs. Web-Applikation Native App Klassische Web Moderne HTML-basierte Mobile App App Plattform Look & Feel Ok Nein Styling der UI Widgets (CSS3) Zugriff auf Device-Sensoren Ok Nein GPS (HTML5, PhoneGap) (GPS, Accelerometer, Kamera, Accelerometer, Kamera, Kompass, …) Kompass (PhoneGap) Zugriff auf Device-Daten Ok Nein Kontakte (PhoneGap) (Kontakte) Verkauf über Store möglich Ok Nein Ok (PhoneGap) Implementierungsaufwand je Plattform einmalig Einmaliger Aufwand Offlinefähigkeit Ok Nein Ok (HTML5 Offline Applications und Local Storage) Cooles interaktives UI Ok Nein CSS3 (Transforms and Transitions, Media Queries), Sencha Touch, HTML5 Drag&DropHerausforderungen von mobilen Apps | ruh 20. April 2011 Folie 52 © Zühlke 2011

RIA TechnologieHTML5 – Kurzüberblick <canvas width="400" height="300"Offline Storage style="margin-left:-30px"></canvas> <script> var context = document.getElementsByTagName(canvas)Canvas (2D/3D) und Video – Zeichnen mit JavaScript [0].getContext(2d); var lastX = context.canvas.width * Math.random(); var lastY = context.canvas.height * Math.random(); var hue = 0; function line() {SVG Grafiken context.save(); context.translate(context.canvas.width/2, context.canvas.height/2); context.scale(0.9,Local Database 0.9); context.translate(- context.canvas.width/2, - context.canvas.height/2);Bidirektionale Kommunikation (Client/Server) context.beginPath(); context.lineWidth = 5 + Math.random() * 10; context.moveTo(lastX, lastY); lastX = context.canvas.width *Drag & Drop Mechanismen Math.random(); lastY = context.canvas.height * Math.random(); context.bezierCurveTo(context.canvas.width * Math.random(), context.canvas.height *File Access (Drag/Drop File from/to Desktop, siehe Google Mail!) Math.random(), context.canvas.width * Math.random(), context.canvas.height * Math.random(), lastX, lastY); hue = hue + 10Anpassung an Plattformen und Geräte mit CSS3 * Math.random(); context.strokeStyle = hsl( + hue + , 50%, 50%); context.shadowColor = white; context.shadowBlur = 10;uvm. context.stroke(); context.restore(); } setInterval(line, 50); function blank() { context.fillStyle = rgba(0,0,0,0.1); context.fillRect(0, 0, context.canvas.width, context.canvas.height); } setInterval(blank, Mehr Infos zu HTML5 z.B. unter http://slides.html5rocks.com 40); </script>Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 53 © Zühlke 2011

Schlusswort Client Technologien: Technologie- & AufwandsgrenzenWeb Ultra Thin Thin RIA (Ajax) HTML5 wird die Grenze verschieben RIA (Plug-in) RIA (ohne Browser)Standalone Fat, Rich, Smart Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 54 © Zühlke 2011

Zusammenfassung• Die Vielzahl an Client Technologien bietet zahlreiche Varianten in der UI Entwicklung• Die Umsetzbarkeit vieler GUI Konzepte und Designelemente hängt auch vom Einsatz bestimmter Client Technologien ab• Neue Technologien wie HTML5 werden die Technologie-Landschaft nochmals verändern• Technisches Verständnis oder ein Überblick über Vor- und Nachteile erlaubt Einflussnahme des UX Experten• Für Usability Experten ist es von Vorteil, sich mit verschiedenen Client Technologien auseinander-zusetzenMehr zum Thema:http://www.zuehlke.com/de/software-product-engineering/kompetenzen/know-how/client-technologien.htmlClient Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 55 © Zühlke 2011

http://blog.bedienhilfe.ch	17
http://www.usability-architect.com	11
http://feeds2.feedburner.com	7
http://user-experience-specialist.blogspot.com	5
http://localhost	1
http://www.slideshare.net	1
http://user-experience-specialist.blogspot.de	1

Client Technologien - Ein Überblick für Usability Professionals

by Thomas Memmel on May 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 43

Statistics

Client Technologien - Ein Überblick für Usability Professionals — Presentation Transcript