Begeisternde User Experience mit Silverlight

Präsentation zum Thema: "Begeisternde User Experience mit Silverlight"—  Präsentation transkript:

1 Begeisternde User Experience mit Silverlight
Christian Moser

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

3 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

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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

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

14 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

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

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

17 Prototyping mit SketchFlow
Demo

18 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

19 Zusammenarbeit von Designer und Entwickler

20 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

21 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

22 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.

23 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.

24 Visual Design Integration
Demo

25 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

26 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

27 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

28 Control-Styling per Styleguide
Demo

29 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

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

31 Q&A

32 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.