Client Technologien - Ein Überblick für Usability Professionals

Client Technologien

Ein Überblick für Usability Engineering Professionals
SwissUPA/SwissCHI Event: Zürich, 28. April 2011

Folie 1
26. April 2011

Dr. Thomas Memmel et al.

© Zühlke 2011

Softwarelösungen, Produktinnovation
und 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 Practices

Eine Idee mehr. Und Zühlke. 4. März 2011 Folie 3 © Zühlke 2011

Zühlke und Client Technologien

Zühlke Group
• Beratung bei der Wahl der richtigen Client
Technologie
• Know-How in einer großen Bandbreite an Client und
Server Technologien

Zühlke Competence Center Client Technologien
• Ständige Auseinandersetzung mit neuen
Technologien
• Technologie-Scouting
• Ausbildungsplanung der Mitarbeiter
Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 4 © Zühlke 2011

Competence Center Client Technologie
User Interface Development Today


Die Wahl der richtigen Client Technologie
Beispiel aus dem Projektalltag

Ein Anbieter von Druckdienstleistungen für Presseagenturen
möchte seinen Kunden einen Client anbieten, mit dem
Kunden Pressefotos in ein Online Archiv hochladen können.
Zwecks einfacher Verteilung und Aktualisierung der Software
schwebt dem Anbieter ein Web-Client vor, der in allen
gängigen Browsern funktioniert.
Aussehen und anfühlen soll sich die Applikation aber wie eine
moderne Desktop-Anwendung. Die Usability der Applikation
ist für die Akzeptanz und den Erfolg massgeblich.

Welche Client Technologien kommen in Frage?


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»


Usability Beratung & Client Technologien

Stetig wachsende Auswahl an Client Technologien
Verschiedene Technologie-Lieferanten, z.B.
• Microsoft
• Adobe
• Java Sun / Oracle

Die Wahl der Client Technologie hat z.B. Auswirkung auf
• Umsetzbarkeit von Funktionalität
• Komplexität der Entwicklung, Flexibilität
• Usability und User Experience (Ziele)

Benutzerinteraktion vs. Ausführung
Web

Keine Installation

Applikation aktuell

Ständige Datenerfassung
Ständige Interaktion
An jedem PC verfügbar
Ausfü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


Komplexität: Java Client Technologien und Produkte

Struts Spring Web Flow JSF ICEfaces RichFaces
Web

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


Rolle des Usability Professionals

Einbindung in Client Technologie Entscheid

Grundkenntnisse zu Client Technologien zur Impact-
Abschätzung

Durchgängigkeit UI Prototyping  Produkt
• Zukunftstrend: Durchgängigkeit, Werkzeugketten
• Werkzeuge für GUI-Prototyping in Zieltechnologien
• Evolutionäres Prototyping


Thin, Rich oder RIA?
Verschiedene Client Strategien


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ät


Thin Client Technologie (2/2)

Thin Client Technologien: ASP, ASP.NET,
PHP, Ruby, JSF.
Beispiele
Amazon.com

Ebay.com


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-Landschaft


Rich Client Technologie (2/2)

Rich Client Technologien
• Java Swing
• Eclipse RCP
• Windows Presentation Foundation
• Windows Forms


Rich Client Technologie
Fallbeispiel: ZEUS Airport Management

Video zu ZEUS: http://www.youtube.com/watch?v=o9nlMy5LCBo

Rich Client Technologie – WPF
Windows Presentation Framework

Rollenbasierte Werkzeugkette – Durchgängigkeit vom Design bis zum Code

Expression Design Expression Blend Visual Studio

Zielgruppe: Zielgruppe: Zielgruppe:
• Gestalter • Interaction Designer • Entwickler
• Gestalter


Rich Client Technologie – WPF
Diskussion

Umfassendes Hürden / Risiken
Präsentationssystem
• Plattformabhängigkeit
Gestalterische 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 der
Umfangreiche Schnittstellen
Standards ohne
für Multimedia
ausreichendes Testing
Viele Erweiterungen entwickelt
verfügbar (z.B. Ribbon)
Umwandlung nach RIA
(Silverlight) möglich

Rich Client Technologie – Swing
Synthetica BlackEye Look & Feel

Quelle: http://www.jyloo.com/synthetica/screenshots/blackeye/
Dr. Thorsten Büring 6. September 2010 Folie 21 © Zühlke 2011

Flamingo UI-Control Extension

Quelle: https://flamingo.dev.java.net/
Dr. Thorsten Büring 6. September 2010 Folie 22 © Zühlke 2011

GUI Prototyping

Napkin 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.net


Rich Client Technologie – Eclipse RCP
Zü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

Diskussion

Häufig verwendete Alternative zu Java Swing
Native 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 Vektorgrafiken


Visual GUI Editor

Quelle: http://www.eclipse.org


SWT 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

Diskussion

Geeignet für sehr aufwändige GUIs
Erstellen 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 werden

Vorsicht: UIs können sehr schnell aussehen wir eine Entwicklungsumgebung!
• Einsatz von RCP sollte seitens UX Experte hinterfragt werden


GUI Elemente: Nebula Project

Quelle: http://www.eclipse.org/nebula/


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 nicht


RIA Client Technologien

Überblick, zum Beispiel:
• GWT
• ASP.NET mit AJAX
• ASP.NET MVC
• JSF mit AJAX
• JavaFX
• Microsoft Silverlight
• Adobe Flash / Flex


RIA Technologie – Microsoft Silverlight
Zühlke Projekt: Inversion Viewer

Siehe: http://inversion.innetag.ch/


RIA Technologie – Microsoft Silverlight

Nutzt Teil des WPF und .Net Frameworks
• Gleiche Werkzeugkette
• Wiederverwendung von Know-how und Code
• Ähnliche Freiheitsgrade bei der Gestaltung
Silverlight Toolkit zur Erweiterung der GUI Library
Teilweise Hardwarebeschleunigung möglich
Out-of-the-Browser Features: Grenzen zwischen RIA & Rich Clients
verschwimmen
Cross-Plattform, auch Mobile (Windows Phone 7)
Direkter Konkurrent zu Adobe Flash


RIA Technologie – Adobe Flash / Flex

Flash 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 Plugin


RIA Technologie – Adobe Flex
Zühlke Kundenprojekt Internet Datensafe

Quelle:
www.datainherit.com



Quelle:
www.datainherit.com


RIA Technologie – Adobe Flash / Flex

Benötigt Browser-Plugin (aber weit verbreitet > 90%)
Funktionsumfang sehr ähnlich zu Silverlight
Adobe Air für Offline-Fähigkeit
Leider kein Flash Pendant zu SketchFlow
Ansonsten ausgereifte Werkzeug-Kette

Flash ist noch dominant für Internet Videos
• 75% aller Online-Videos werden im Flash Player
• HTML5 als künftig starke Konkurrenz


RIA Technologie – Adobe Air
Fallbeispiel: eBay Desktop

Quelle: http://desktop.ebay.com


RIA Technologie – Adobe Air
Fallbeispiel: Balsamiq Prototyping Tool

Siehe:
http://balsamiq.com/

Ausblick: Adobe Wallaby
Adobe Flex zu HTML5

Adobe Wallaby
• Experimentelles Tool
• Ermöglicht Nutzung der
etablierten Developer Tools
• Transformation nach HTML5

Die Zukunft ist HTML5?
• Verschiedene Werkzeuge
• Aber einheitlicher Standard

Siehe auch: Quelle: http://www.chip.de/news/Adobe-Wallaby-Flash-zu-HTML5-
http://labs.adobe.com/downloads/wallaby.html konvertieren_47684802.html

RIA Technologie – JavaFX

Alternative zu Flash und Silverlight
• Aber: deutlich geringere Verbreitung
JavaFX Anwendungen benötigen Java
Runtime (langsamer als Flash/Silverlight) Quelle: http://www.javafx.com

Ausführung: Desktop (Web Start), Applet
Controls und Performance seit Version 1.3
geeignet, um gute GUIs zu entwickeln
GUI Builder stehen zur Verfügung: z.B.
NetBeans
JavaFX: UI Technologie von „Swing 2.0“?


Durchgä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.com

Beispiel: Geo View

Quelle: http://www.vancouver2010.com/olympic-medals/geo-view/


RIA Technologie – Google Web Toolkit
Beispiel Google Mail App

Quelle: http://gwt.google.com/samples/Mail/Mail.html


GWT Compiler wandelt Java Code um
• Web-Anwendung: HTML, CSS und JavaScript/AJAX
• Benutzt Browser-Standards
• Vielzahl an GWT Bibliotheken
Google Gears
• Per Google Gears können GWT Anwendungen auf
lokale Ressourcen des Clients zugreifen
• Ähnlich der Sandbox von Java Applets
Kein Browser Plug-in notwendig
• Einfacheres Deployment


Sencha Ext GWT Framework: GUI Komponenten

Quelle: http://www.sencha.com/examples/explorer.html

GUI Design

Gestaltung 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
sicherstellen
Visuell ansprechende und stark interaktive
Benutzeroberfläche im Vergleich zu anderen RIA
Technologien schwierig
• GWT eher ähnlich zu reinen Desktop Anwendungen
GUI Prototyping sehr aufwendig (Coding)
• Wireframes oft die bessere Wahl

Sencha Ext GWT Framework, Beispiel Web Desktop

Quelle: http://www.sencha.com/examples/desktop.html

Mobile Client Technologien
iOS, Android & Co.


Neue 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

Native 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&Drop
Herausforderungen von mobilen Apps | ruh 20. April 2011 Folie 52 © Zühlke 2011

RIA Technologie
HTML5 – 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 + 10
Anpassung 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>

Schlusswort
Client Technologien: Technologie- & Aufwandsgrenzen
Web

Ultra Thin Thin RIA
(Ajax) HTML5 wird die Grenze
verschieben

RIA (Plug-in)

RIA (ohne Browser)
Standalone

Fat, Rich, Smart



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-zusetzen
Mehr zum Thema:
http://www.zuehlke.com/de/software-product-engineering/kompetenzen/know-how/client-technologien.html


Client Technologien - Ein Überblick für Usability Professionals

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Client Technologien - Ein Überblick für Usability Professionals

Mehr von Thomas Memmel

Client Technologien - Ein Überblick für Usability Professionals