Begeisternde User Experience mit Silverlight Christian Moser moc@zuehlke.com www.wpftutorial.net

Stellen Sie sich vor... Sie arbeiten in einer modernen Web-Agentur Sie erstellen Web-Lösungen für Grosskunden

Ihr Auftrag Entwickeln Sie für einen Kunden eine Software zur Erstellung von digitalen Fotoalben. ...mit der er sich im Markt deutlich differenziert ...die einfach installierbar und erlernbar ist ...die auf Windows und Mac OsX läuft

Wie differenzieren wir uns im Markt? Über die Funktionalität? Über das Design? Über die Usability? Über den Preis?

Was die Kunden wirklich möchten Ein Produkt, dass exakt auf ihre Bedürfnisse zugeschnitten ist Das sie mit kleinen Extras täglich neu begeistert Sie möchten ein tolles Erlebnis Eine begeisternde User Experience

Wie gestaltet man eine begeisternde User Experience? Benutzer Kontext Produkt Ziele Physik. Umfeld Funktionsumfang Erfahrungen Soziales Umfeld Struktur Fähigkeiten Trends Interaktion Visuelles Design User Experience Grad der Erfüllung Erwartung an das Produkt

Wie schaffen wir es diese Erwartungen zu erfüllen? Wie funktioniert der Markt? - Unsere Marktposition - Konkurrenz - Stakeholder - Produktstrategie Was soll die Fotobuch Software können? - User Cases - User Stories - Storyboards - Nicht-funkt. Anf. Umsetzung der Lösung - User Interface erstellen - Business-Logik impl. - Architektur Prototypen - Reviews mit Designteam Business- analyse Nutzer- forschung Anford- erungen Konzept Umsetzung Testing Wer sind unsere Benutzer? - Beobachtung - Befragung - Personas - Szenarien Wie soll es gestaltet werden? - Prototypen - Varianten - Inform. Architektur - Interaction Design - Visual Design - Usability Tests Wurde es richtig umgesetzt? - Verifikation - Validation - Usability Tests

Wir brauchen ein fähiges Projektteam Marketing und Business-Analyst Projektleitung Produkt-Manager & Tester Interaction- und Visualdesignerin Design Integration Software-Architekt User Interface Client Logik Server-Anbindung Bildmaterial ausgeliehen von Time&Space Team

Business Analyse Zuerst müssen wir den Markt verstehen, um uns darin strategisch geschickt positionieren zu können. Preis Usability Qualität Funktion Design Gut Schlecht Beispiel: Konkurrenzanalyse Mitbewerber A Mitbewerber B Mitbewerber C Mitbewerber D Potential

Nutzerforschung Dann müssen wir rausgehen und die Benutzer in ihrem natürlich Umfeld beobachten und befragen. Nur so können wir erfahren wie sie denken was ihnen wichtig ist was sie motiviert wo sie Probleme haben

Benutzer modellieren Die Erkenntnisse müssen ausgewertet und einfach verständlich visualisiert werden. Personas sind fiktive Benutzer, die einer Zielgruppe ein Gesicht geben Oma Gertrud 71 Jahre alt Verheiratet Hat 2 Kinder (43 Jahre) Arbeitete früher als Sekretärin Sieht nicht mehr so gut Helfen zu fokussieren Schaffen Empathie Ziele Möchte Fotos der Enkelkinder in einem Fotoalbum zusammenstellen und es ihnen zu Weihnachten schenken. Motivation Auch wenn sie manchmal etwas länger braucht, macht ihr die Arbeit am Computer spass. Da sie sich nicht alles merken kann, hat sie sich die wichtigsten Arbeitsschritte in einem Notizheft aufgeschrieben. Erleichtern Designentscheidungen

Entwicklung eines User Interface Der Ingenieur-Ansatz 1. Anforderungen durchlesen 2. Lange nachdenken 3. Code schreiben Die Gefahr eine suboptimale Lösung umzusetzen ist gross, deshalb wird oft nur noch nachgebessert

Entwicklung eines User Interface Der Designer-Ansatz Möglichst wiele sinnvolle Varianten erarbeiten Anhand von Designprinzipien Lösungen auswählen und schrittweise verfeinern

Verwendung von Prototypen Prototypen sind vereinfachte Modelle, bei denen nur die nötigen Aspekte ausgearbeitet wurden. Interaktive Prototypen Wireframes Papier- Prototypen Skizzen Interaktivität Ausarbeitung

Echte Benutzer miteinbeziehen Früh und wiederholt das Design auf seine Benutzerfreundlichkeit testen Ideen Workshop Usability Walkthrough Hallway Testing Formaler Usability Test

Die Idee von SketchFlow ...mit der Interaktivität von Wireframes (Flow)... Das schnelle, informale von Skizzen (Sketch)... ...in einem Werkzeug zu vereinen (SketchFlow)

Prototyping mit SketchFlow Demo

Meine Tipps zum erfolgreichen Einsatz von SketchFlow Nicht zu früh einsetzen, da sonst technische Hürden die Kreativität unnötig einschränken Den Prototyp funktional nicht überladen! Architektur und Wartbarkeit spielen keine Rolle! Sketchflow-Prototypen sind Wegwerfcode - es sind nur interaktive Skizzen! Silverlight Know-how ist von grossem Vorteil Richtig eingesetzt, ist SketchFlow ein sehr praktisches und effektives Hilfsmittel

Zusammenarbeit von Designer und Entwickler

Die Vision von Microsoft Der Entwickler entwirft Views mit Visual Studio, stellt Daten und Commands per ViewModel zur Verfügung Der Designer erstellt oder integriert das Interaction- und Visual-Design mit Expression Blend XAML

Die Realität – Zwei Welten treffen aufeinander Photoshop Illustrator Apple Adobe Konsistenz Metaphern Balsamiq Usability Tests iPad Windows 7 Microsoft Visual Studio Resharper Performance Unit Tests Klassen SQL Unterschiedliches Wissen Unterschiedliche Tools Unterschiedliche Ziele

Der Entwickler stellt seine Arbeit vor Ich verwende das MVVM-Pattern mit DataBinding und Commands, um das UI besser von der Logik zu trennen. Ich setze das Prism-Framework ein, um die Views dynamisch zusammen zu bauen und um Services per Dependency Injection zu resolven. Für die Anbindung ans Backend setze ich die neuen, coolen RIA-Services ein.

Der Designer stellt seine Arbeit vor Ich habe anhand des CI, Moodboards und der Hilfe von Kuler einen Visual-Styleguide erstellt Dann habe ich mit Illustrator einen Visual-Design Prototypen erstellt, damit alle Shapes als Vektoren vorliegen.

Visual Design Integration Demo

Erkenntnisse Control Templates aus Photoshop oder Illustrator zu importieren ist der falsche Ansatz Importierte Daten sind nur «tote» Geometrien Viel Arbeit für die Aufbereitung notwendig Der Import von Vektor-Geometrien hingegen ist sinnvoll und klappt einwandfrei Designer brauchen vertieftes Silverlight Know-how, um das Design richtig zu integrieren

Ein Integrator vermittelt Ein Integrator kann die Brücke zwischen Designer und Entwickler schlagen Entwickler mit Design-Grundausbildung Importiert Elemente aus Photoshop und Illustrator Arbeitet mit Expression Blend und Visual Studio Integrator

Modelle für eine erfolgreiche Zusmmenarbeit Integration per Styleguide Geometrien werden importiert Control Templates werden ab Styleguide nachgebaut Designer braucht wenig Silverlight Know-How Integration durch den Designer Der Designer erstellt die Styles direkt in Expression Blend Designer braucht viel Silverlight Know-How

Control-Styling per Styleguide Demo

Fazit Eine begeisternde User Experience ist das beste Erfolgsrezept für ein Produkt Um eine begeisternde User Experience zu erreichen, muss auf jedes Detail geachtet werden Prototyping hilft effizient eine innovative und gute Lösung zu finden Die Lücken zwischen der Welt von Designer und Entwickler kann eine Integrator-Rolle schliessen Die Expression Werkzeuge sind für die Integration des Designs sehr wertvoll, wenn sie richtig eingesetzt werden

Das Buch zum Thema User Experience Design Mit erlebnisorientierter Software- entwicklung zu Produkten, die begeistern Christian Moser ISBN: 978-3-642-13362-6 ab August 2011 erhältlich

Q&A

3/28/2017 5:57 PM © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.