Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Christian Moser

Ähnliche Präsentationen


Präsentation zum Thema: "Christian Moser"—  Präsentation transkript:

1 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? Ziele Erfahrungen Fähigkeiten Funktionsumfang Struktur Interaktion Visuelles Design Physik. Umfeld Soziales Umfeld Erwartung an das Produkt BenutzerKontextProdukt Trends Grad der Erfüllung User Experience

7 TestingUmsetzungKonzept Anford- erungen Nutzer- forschung Wie schaffen wir es diese Erwartungen 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 richtig umgesetzt? - Verifikation - Validation - Usability Tests

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

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 wie sie denken was ihnen wichtig ist was sie motiviert wo 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.

11 Benutzer modellieren 71 Jahre alt Verheiratet Hat 2 Kinder (43 Jahre) Arbeitete früher als Sekretärin Sieht nicht mehr so gut Oma Gertrud 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. 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 Empathie Erleichtern Designentscheidungen

12 Entwicklung eines User Interface Der 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

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

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

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

16 Die Idee von SketchFlow Das schnelle, informale von Skizzen (Sketch)......mit der Interaktivität von Wireframes (Flow)......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

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

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

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


Herunterladen ppt "Christian Moser"

Ähnliche Präsentationen


Google-Anzeigen