Christian Mosermoc@zuehlke.comwww.wpftutorial.net

Begeisternde User Experiencemit Silverlight

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 unsim Markt?

Über die Funktionalität?

Über das Design?

Über die Usability?

Über den Preis?

Was die Kunden wirklich möchtenEin 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?

ZieleErfahrungenFähigkeiten

FunktionsumfangStrukturInteraktionVisuelles Design

Physik. UmfeldSoziales Umfeld

Erwartung an das Produkt

Benutzer

Kontext Produkt

Trends

Grad der Erfüllung

UserExperience

TestingUmsetzungKonzeptAnford-erungen

Nutzer-forschung

Wie schaffen wir es dieseErwartungen zu erfüllen?

Business-analyse

Wie funktioniert der Markt? - Unsere Marktposition - Konkurrenz - Stakeholder - Produktstrategie

Wer sind unsere Benutzer? - Beobachtung - Befragung - Personas - Szenarien

Was soll die Fotobuch Software können?

- User Cases - User Stories - Storyboards - Nicht-funkt. Anf.

Wie soll es gestaltet werden? - Prototypen - Varianten - Inform. Architektur - Interaction Design - Visual Design - Usability Tests

Umsetzung der Lösung - User Interface erstellen - Business-Logik impl. - Architektur Prototypen - Reviews mit Designteam

Wurde es richtigumgesetzt? - Verifikation - Validation - Usability Tests

Wir brauchen ein fähigesProjektteam

Interaction- undVisualdesignerin

Marketing undBusiness-Analyst

Produkt-Manager& Tester

Projektleitung

Bildmaterial ausgeliehen von Time&Space Team

Software-Architekt

Server-AnbindungClient Logik

User Interface

Design Integration

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

wie sie denkenwas ihnen wichtig istwas sie motiviertwo sie Probleme haben

Nur so können wir erfahren

Dann müssen wir rausgehen und die Benutzer in ihrem natürlich Umfeld beobachten und befragen.

Benutzer modellieren

71 Jahre altVerheiratet

Hat 2 Kinder (43 Jahre)

Arbeitete früher als

Sekretärin

Sieht nicht mehr so gut

Oma Gertrud

ZieleMöchte Fotos der Enkelkinder in einem Fotoalbum

zusammenstellen und es ihnen zu Weihnachten

schenken.

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

Helfen zu fokussieren

Personas sind fiktive Benutzer, die einer Zielgruppe ein Gesicht geben

Die Erkenntnisse müssen ausgewertet und einfach verständlich visualisiert werden.

Schaffen EmpathieErleichtern Designentscheidungen

Entwicklung eines User InterfaceDer Ingenieur-Ansatz

1. Anforderungen durchlesen

Die Gefahr eine suboptimale Lösung umzusetzen ist gross, deshalb wird oft nur noch nachgebessert

2. Lange nachdenken

3. Code schreiben

Möglichst wielesinnvolle Variantenerarbeiten

Anhand von Designprinzipien Lösungen auswählen und schrittweise verfeinern

Entwicklung eines User InterfaceDer Designer-Ansatz

Verwendung von Prototypen

Ausarbeitung

Inte

rakt

ivit

ät

Prototypen sind vereinfachte Modelle, bei denen nur die nötigen Aspekte ausgearbeitet wurden.

Wireframes

InteraktivePrototypen

Skizzen

Papier-Prototypen

Echte Benutzer miteinbeziehen

Früh und wiederholt das Design auf seineBenutzerfreundlichkeit testen

Ideen Workshop Hallway Testing Usability Walkthrough Formaler Usability Test

Die Idee von SketchFlow

Das schnelle, informale

von Skizzen (Sketch)...

...mit der Interaktivität von Wireframes

(Flow)...

...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 VorteilRichtig eingesetzt, ist SketchFlow ein sehr praktisches und effektives Hilfsmittel

Zusammenarbeit von Designer und Entwickler

Die Vision von Microsoft

XAML

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

Die Realität – Zwei Welten treffen aufeinander

Unterschiedliche Tools

Unterschiedliche Ziele

Unterschiedliches Wissen

Photoshop

IllustratorApple

AdobeKonsistenz

MetaphernBalsamiq

Usability Tests

iPad

Windows 7Microsoft

Visual Studio

Resharper

PerformanceUnit Tests

Klassen

SQL

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 erfolgreicheZusmmenarbeit

Integration per StyleguideGeometrien werden importiertControl Templates werden ab Styleguide nachgebautDesigner braucht wenig Silverlight Know-How

Integration durch den DesignerDer Designer erstellt die Styles direkt in Expression BlendDesigner 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 DesignMit erlebnisorientierter Software-entwicklung zu Produkten, die begeistern

Christian MoserISBN: 978-3-642-13362-6

ab August 2011 erhältlich

Q&A

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