Ursula Meseberg microTOOL GmbH Berlin - sigs.de .MS Windows Presentation Foundation (WPF) Usability

download Ursula Meseberg microTOOL GmbH Berlin - sigs.de .MS Windows Presentation Foundation (WPF) Usability

If you can't read please download the document

  • date post

    05-Jun-2018
  • Category

    Documents

  • view

    214
  • download

    0

Embed Size (px)

Transcript of Ursula Meseberg microTOOL GmbH Berlin - sigs.de .MS Windows Presentation Foundation (WPF) Usability

  • So kommen Farbe und Form ins Spiel:

    Usability Engineering in Projekten nach ScrumEin Erfahrungsbericht

    Ursula MesebergmicroTOOL GmbH Berlin

    2010 microTOOL GmbH, Berlin. Alle Rechte vorbehalten.

  • UsabilityUm was geht es?

    2

  • Darum?3

  • Darum!

    4

  • Nutzungskontext

    Benutzer

    Produkt

    Ziele

    Mae derGebrauchstauglichkeit

    Effektivitt

    5

    Genauigkeit und Vollstndigkeit der ZielerreichungAufwand im Verhltnis zu Genauigkeit und Vollstndigkeit

    Usability

    Nach DIN EN ISO 9241

    Zufriedenstellung

    Effizienz

  • Unsere Ziele

    Bessere Usability durch einen besseren Entwicklungsprozess

    Integration von Usability Engineering in die Softwareentwicklung nachScrum

    6

  • 7

  • Agenda

    Das Projekt

    Scrum aus Entwicklersicht

    Der Usability Engineering Prozess

    Integrationsansatz: Parallel Tracking

    Integration: Unser Weg

    Scrum aus Sicht des Usability Engineer

    Ein Beispiel aus dem Projekt

    Lessons Learned

    8

  • Das Projekt SPSF

    Entwicklung einer Software-Produktlinie fr modellgetriebene Software-Fabriken

    Variabilitts-management

    IndividuelleKomponenten

    Komponenten, die in allen Varianten vorkommen

    AlternativeKomponenten

    Gefrdert vom BMBF im Rahmen von KMU-innovativ: IKT

    Technologie: Microsoft .NET, WPF, C#

    9

  • EntwickleTests

    Imple-mentiereFunktion

    Denke

    Stand-up Meeting

    NUnit-Testsin

    Build-Datei

    ProductBacklog

    Sprint

    Ein-gecheckte, lauffhige Funktionen

    Referenz-implemen-tierungen

    Der EntwicklungsprozessScrum aus Entwicklersicht wie wir es nutzen

    2 Wochen

    Tasks

    Sprint-Review

    10

    Sprint Backlog

    Sprint-Planung

    1

    Sprint-Planung

    2

  • Anforderungen definieren

    Ein Usability Engineering Prozess11

    Nach EN ISO 13407:

    Benutzerorientierte Gestaltung interaktiver Systeme(User-centered Design UCD)

    Lsung entwickeln

    Lo-Fi Prototypen

    Hi-Fi Prototypen

    Lauffhige Produktversionen

    Lsung gegen Anforderungen

    evaluieren

    Benutzer und Nutzungskontext analysieren

  • Passen Scrum und der

    Usability Engineering Prozesszusammen?

    12

  • Beide sind

    anforderungsgetrieben

    iterativ

    feedback-orientiert

    13

  • Up-front Analyse von Nutzerwnschen und Nutzerverhalten

    Up-front Design von visuellen Schemata und Interaktionsarchitektur fr eine einheitliche und konsistente Benutzeroberflche

    Up-front-Analyse & Design

    Usability Engineering setzt auf A

    ber

    14

  • Up-front-Aktivitten sind ein No-go der agilen Entwicklung:

    Wie kommt man ohne sie zu

    homogenem Interface Design undkonsistenter Benutzerinteraktion ?

    Das Up-front-Problem15

  • sehr kurze Zyklen: Anforderungen definieren Lo-Fi Prototyp erstellen Usability am Prototyp evaluieren

    auch sehr lange Zyklen z.B. durch Usability-Tests mit Endnutzern

    Usability Engineering hat A

    ber

    16

  • Wietaktetman dieseZyklenin gleich lange Sprints ein?

    Das Synchronisations-problem

    17

  • In Scrum werden die Anforderungen desKunden (Auftraggebers) umgesetzt

    Der Kunde ist nicht der Endnutzer

    Usability Engineering erfordert EndnutzerbeteiligungA

    ber

    18

  • Wie erreicht man, dass nicht nur

    anforderungsgerechte,

    sondern auch endnutzergerechteSysteme entstehen?

    Das Problem derNutzerbeteiligung

    19

  • Entwicklungs-Track

    Usability EngineeringTrack

    Synchronisation durch Parallel Tracking

    Technologie-Exploration

    Analyse der Benutzer

    Grundlagen des Interaktions-designs

    Basis-funktionenentwickeln

    Sprint 0 Sprint 1 Sprint 2 Sprint 3

    Usability der Lsung aus Sprint 1 testen

    Oberflche fr Sprint 3 entwerfen

    Benutzungs-kontext frSprint 4 analysieren

    Oberflche fr Sprint 2 entwerfen

    Benutzungs-kontext fr Sprint 3analysieren

    20

    Entwurfimplementieren

    Usability der Lsung aus Sprint 2 testen

    Oberflche fr Sprint 4 entwerfen

    Benutzungs-kontext fr Sprint 5 analysieren

    Entwurfimplementieren

  • Parallel Tracking

    Agilitt eingeschrnktPlanung ber drei Sprints

    Synchronitt nicht stabil

    Zusammenarbeit unproduktivKlassischer Workflow Usability EngineerEntwickler

    21

  • Entwurf/Prototyping mitAdobePhotoshop

    Usability Engineer Entwickler

    Visual StudioProjekt

    Implementierung von Layout, Interaktion und Funktionalitt mit Microsoft Visual Studio

    JPG

    BMP

    GIF

    22

    nicht direkt verwertbarer RastergrafikKlassischer Workflow mit

  • MS Windows Presentation Foundation (WPF)

    Usability Engineer

    Neuer Workflow auf Basis von

    Visual StudioProjekt

    WPF-Anwendung

    in C#

    XAML

    Implementierung der Anwendungs-logik mit MS Visual Studio

    Implemen-tierungLayout/ Interaktionmit MS Visual Studio

    Entwurf/PrototypingmitAdobeIllustrator

    AI

    Vektorgrafik

    Entwicklung Layout/ Interaktion mit MS Expression Blend

    Data Binding

    XAML

    Usability Engineer Entwickler

    23

  • Erster Versuch

    Der neue Workflow als Grundlage

    Aufteilung des Usability Engineering auf zwei Rollen

    Integration beider in das Scrum-Team

    User Interface DesignerLayout, XAML

    User Interaction DesignerInteraktion, XAML & C#

    24

  • Guter Start mit Sprint 0

    Benutzer- und Nutzungskontextanalyse mit Discount-Methode

    Anlegen eines Style Guides im Firmen-Wiki

    Konzentration auf Interface Design Interaction Design nachgelagert

    25

  • Aber dann ...

    Aufteilung des Usability Engineering auf zwei Rollen unproduktiv

    Layout vor Interaktion: Falsche Reihenfolge

    User Interface Designer technisch berfordert

    Nur Bilder statt Lsungen

    26

  • 27

  • Aber wir brauchen doch jemanden frs User Interface!

    28

    Das Team:

  • 29

  • Unser Weg

    Festhalten am neuen Workflow

    Usability Engineer besetzt mit hoher fachlicher und technischer Kompetenz

    Usability Engineer bleibt Vollmitglied des Scrum-Teams

    Erst Interaction Design dann Interface Design

    Im zweiten Anlauf

    30

  • Aus Sicht eines Usability Engineer

    Implementiere Benutzer-

    interaktionmit gestalteter

    Oberflche (Layout) Sprint-

    Review

    Denke

    Mache Refactoring

    Hi-Fi Prototyp der Benutzer-interaktion

    (XAML)

    Der Scrum-Ablauf

    Sprint-Planung

    Eingecheckte,lauffhige Funktionen

    fr Benutzer-interaktion

    mit gestalteter Oberflche

    Denke Anleihe vom Parallel TrackingMache Refactoring Vereinheitlichung von Layout/Interaktion

    Lo-Fi Prototypen (Papier oder

    Adobe Illustrator)

    ReviewProductOwner

    31

  • Die Zusammenarbeit zwischen Entwickler und Usability Engineer

    Ein Beispiel aus dem SPSF-Projekt

    32

  • RIA Rich Internet Applicationfr .NET

    Views(Layout)

    Data Binding

    Commands& Handlers

    (Interaktion)

    ViewModel

    ViewModel

    Services

    EntityModel

    Client-Komponenten Server-Komponenten

    33

  • Typische Stories und Tasks

    Entwickle View (Layout)

    mitInteraktion

    Erstelle das View Model

    (die technischeImplemen-

    tierung)des Views

    fr Usability Engineer und Entwickler

    Prototyp der Benutzer-

    interaktionaus vorherigem

    Sprint

    34

    Definiere Inhalt des Views

    Transformiere View in View Model und

    View Model Services

    Gestalte View (grafisch/XAML)

    Lege Data Binding der View Model Properties fest (XAML)

    Definiere Commands/Handlers fr die Interaktion

    ImplementiereCommands/Handlers in C#

    Prfe View Model

    Prfe View

  • Geht das alles wirklich in einem Sprint?

    Und passen denn die Geschwindigkeiten?

    35

  • JaSchlssel ist der

    Automatisierungsgradder modellgetriebenen Entwicklung

    36

  • DiagrammvorschauBeispiel

    Entwickle View(Layout) mit

    Interaktion fr eine Diagrammvorschau

    Erstelle das View Model

    (die technischeImplementierung)

    des Views derDiagrammvorschau

    37

  • 2009 microTOOL GmbH, Berlin.

    Definiere Inhalt des Views

    Arbeitstage des Sprints

    38

  • Transformiere View in View Model& View Model Services

    Arbeitstage des Sprints

    View Model mit Code

    View Model Services mit Code

    39

  • Arbeitstage des Sprints

    Klassen des durch Transformation erzeugten View Model

    Gestalte View (grafisch/XAML)

    Controls auswhlen (hier Canvas und Grid)

    In XAML implementieren (keine Generierung aus einem grafischem Entwurf mglich, da Layout flexibel ist)

    40

  • Arbeitstage des Sprints

    Lege Data Binding der View Model Properties fest (XAML)

    Per Transformation erzeugterC# Code des View Model

    Hier: Relative Position des Grids an Wert der X- undY-Properties des View Model binden

    41

  • Arbeitstage des Sprints

    Event Handlers definieren

    Zuordnung in XAMLimplementieren

    Hier: Bei Doppelklick ffne Diagramm

    Definiere Commands/Handlers fr die Interaktion

    42

  • Arbeitstage des Sprints

    ImplementiereCommands/Handlers in C#

    43

  • Das fertige Featur