christian moser developer und ux-designer zühlke engineering ag

29
Expression Blend for developers Christian Moser Developer und UX-Designer Zühlke Engineering AG

Upload: izaak-stob

Post on 06-Apr-2015

112 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Expression Blendfor developers

Christian MoserDeveloper und UX-Designer Zühlke Engineering AG

Page 2: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Benutzerzentriertes Design

Howard Schultz, CEO

«Products are easily copied –

experience is unique. »

Page 3: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Benutzerzentriertes Design

Page 4: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Benutzerzentriertes Design

NWZ-S616F/S

LaufzeitSpeicherAuflösung

Preis

RationaleEbene

EmotionaleEbene

33h Musik4 Gbyte320x240Pixel

CHF 167.-

24h Musik4 Gbyte320x240Pixel

CHF 197.-

iPod nano

Page 5: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Das Produkt wird zum Erlebnis

Produkte und Dienstleistungen müssen neben den rationalen Vorteilen, emotionale Erlebnisse schaffen, die den Kunden begeistern.

Egal welches Produkt - alle Kunden sind Menschen und habeneine User Experience.

Page 6: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Welche Skills werden benötigt, um dieses Erlebnis zu schaffen?

Rolle des EntwicklersAbbildung der SoftwarearchitekturImplementierung der BusinesslogikErstellen eines funktionalen UI

Rolle des Interaction-DesignersGrafisches Design des UISicherstellen einer guten UsabilityEinbinden von Multimediainhalten

Page 7: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Die Toollandschaft heute

EntwicklerDesigner

• Visio Prototypen• Photoshop Dateien• Vektorgrafiken und Bitmaps

• C# Dateien• EXE‘s und DLL‘s• .resx Dateien

Page 8: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Konventioneller Designer-Entwickler Workflow

• Visio Prototypen• Photoshop Dateien• Einzele Bitmaps

EntwicklerDesigner

Page 9: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Unschönheiten im konventionellen Workflow

Einweg vom Designer zum Entwickler (kein Roundtrip)Medienbruch durch unterschiedliche DateiformateWinForms Controls lassen sich nicht beliebig stylenEntwickler versucht Design nachzubauen

Page 10: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Webseitenentwickeln und gestalten

Neue Werkzeuge für den Designer

Videos schneiden und codieren

Vektor- und Bitmapgrafikenerstellen und konvertieren

User Interfacesdesignen und integrieren

Page 11: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Neue Werkzeuge für den Designer

Blend = Zusammenmixen

Page 12: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Verbesserter Workflow mit WPF

<XAML>

<XAML>

EntwicklerDesigner

Page 13: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Designer Entwickler

Schrittweise Migration des Workflows

Integrator Modell

Integrator

Harvester Modell

Designer Entwickler

Collaboration Modell

Designer Entwickler

Page 14: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Von der Theorie zur Praxis

Wir spielen den Roundtrip am Projekt „TechDays Messenger“ durch

Page 15: Christian Moser Developer und UX-Designer Zühlke Engineering AG

1. Requirements Engineering

Page 16: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Features und Storyboard

BenutzernameVorname Nachname

Kontakte Suchen:

Kontakt 1Vorname NachnameKontakt 2Vorname Nachname

Kontakt 3Vorname Nachname

Freunde

Arbeit

KategorieName

TechDays

HEROES

Suche nach Kontakten

Gruppierte Kontaktliste

Cooles TechDays Skin

GruppierungskriteriumUmschaltbar

Infos zum Benutzer

Page 17: Christian Moser Developer und UX-Designer Zühlke Engineering AG

2. Vorbereiten der UI-Architektur

Page 18: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Konventioneller Ansatz: UI-Logik im Eventhandler

Nachteile dieser VarianteView-Logik und View sind stark gekoppeltDie View-Logik kann nicht ohne View getestet werdenUnit Testing nicht möglich (Aufwändige UI-Tests nötig)Starre-Anbindung, Designer hat wenig Spielraum

Page 19: Christian Moser Developer und UX-Designer Zühlke Engineering AG

View

Model

Bessere Variante - Das ViewModel Pattern

View-Model

View Lose Koppelung!ViewModel kann ohne View instanziert werden.

Komplette UI-Logik im ViewModelUnit-Testing möglich!

Page 20: Christian Moser Developer und UX-Designer Zühlke Engineering AG

2. Daten und Commands anbinden

Unter Einhaltung des ViewModel-Patterns

Page 21: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Best Practices zum losen Anbinden von Aktionen

DataBindingAnbindung beliebiger .NET ObjekteUni- oder BidirektionalNotifikation über INotifyPropertyChanged oder INotifyCollectionChanged

Value ConverterWandeln Format von Daten Flexibel zuschaltbar

Page 22: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Best Practices zum losen Anbinden von Aktionen

EventHandlerMelden UI-Aktionen an das ViewModelUpdate des ViewModels während Texteingabe

CommandsViele Standard-Commands vorhandenEigene Commands erstellen mit ICommand

Page 23: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Kontakt 1Vorname NachnameKontakt 2Vorname Nachname

Arbeit

Anwenden der „Best Practices“ auf unser Projekt

MainWindow_ViewModel

Contact CurrentUser

txtFilter_TextChanged()

IList<Contact> ContactList

ICommand SortByCategoryICommand SortByName

Contact

FirstnameLastnameDisplaynameAgePictureCategory

DataBinding

DataBinding

Event Handler

Command Binding

Image to BitmapImage ValueConverter

View ViewModel

Page 24: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Demo

Page 25: Christian Moser Developer und UX-Designer Zühlke Engineering AG

4. Styling durch den Designer

Page 26: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Versionskonflikte vermeidenExpression-Tools haben keine integrierte Source-Verwaltung

Ressourcenbewusst designenAufwändige Effekte vermeiden

Grafiken, Styles und Templates auslagern

Ressource-Dateien verwendenLokalisierung

Darauf sollte der Designer achten

Page 27: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Demo

Page 28: Christian Moser Developer und UX-Designer Zühlke Engineering AG

Zusammenfassung

Die Expression-Tools verbessern den Workflow zwischen Designer und Entwickler deutlich

Die Migration des Workflows erfolgt schrittweise

Mit dem ViewModel-Pattern wird die View-Logik entkopppelt und per UnitTests testbar.

Blend und VS-Designer sind gut, aber XAML-Kenntnisse sind notwenig

Buchtipps:

Page 29: Christian Moser Developer und UX-Designer Zühlke Engineering AG

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