Sketch

Die interaktive Lösung in Rohform

Ein „Sketch“ ist eine Visualisierung in Skizzen-Stil und vermittelt die Leit-Ideen des Bedienkonzepts.

Der Weg von den abstrakten Anforderungen zum konkreten Bedienkonzept führt über „User Stories“. Sie erzählen vom Benutzer, seinem Bedienkontext, seinen Aufgaben und Teilschritten, die für das erreichen seiner Ziele erfüllt werden sollen.

Aus diesen Stories lassen wir nun in einem spannenden Prozess am Whiteboard erste Skizzen und Abläufe entstehen. Sie zeigen die Ideen zu einem möglichen Anwendungsablauf, teilen die Screens in Bereiche und definieren erste grobe Darstellungs- und Interaktionsformen.

„Sketches“ präzisieren die Ideen in einer klickbaren Anwendung im Skizzen-Design. Als Werkzeug kommt hier „Expression Blend Sketch Flow“ von Microsoft zum Einsatz. Somit tauchen wir bereits in dieser frühen Konzeptphase in die Zieltechnologie ein und eliminieren den Mehraufwand, der bei anderer Vorgehensweise durch Medienbruch entsteht.

Das Ergebnis: Der interaktive Sketch als Herz des neuen Bedienkonzepts in Form einer klickbaren WPF- oder Silverlight-Anwendung im Skizzen-Design

Design

Vision, Inspiration und Kreation

Auf Basis des fertigen Bedienkonzepts entstehen grafische Screens, die das neue Erscheinungsbild der Anwendung zum ersten Mal realitätsgetreu zum Leben erwecken.

Unter Berücksichtigung aller Rahmenbedingungen (z.B. Corporate Design, Branchen-Charakteristika, Anlehnung an Bestandssoftware) werden alle Feinheiten des Designs ausgearbeitet. Von Grundelementen wie Bereichsaufteilungen und Hintergründen über die Ausgestaltung der Steuerelemente und Icons bis hin zur vollständigen Komposition des User Interface Designs.

Das Ergebnis: Das fertige neue Design der Anwendung in Form von vollständig ausgearbeiteten grafischen Screens.

Prototyp

Interaktiver Sketch + grafisches Design = erlebbarer Prototyp

Der Prototyp verschmilzt den Anwendungsablauf (z.B. in Form eines Sketches) mit dem grafischen Design. Es entsteht ein realitätsnaher Eindruck der zukünftigen Anwendung, der zu internen Abstimmungen, Meinungsumfragen mit Kunden und Benutzern und zu Usability-Tests genutzt werden kann.

Ein Großteil des Materials, das bei der Implementierung des Prototyps entsteht, ist bereits „echt“, d.h. es kann später eins zu eins in Ihre Anwendung übernommen werden. Dazu implementieren wir das UI-Design in ein isoliertes UI-Projekt und die für die vorgesehenen Abläufe benötigten Screens werden nach MVVM-Pattern (s. „Implementierung“) umgesetzt.

Zum Leben erweckt wird der Prototyp durch simulierte System-Reaktionen und Beispieldaten. Für letztere setzen wir ein eigens entwickeltes Beispieldaten-Framework ein, welches auf Basis von ViewModels Zufallsdaten generiert.

Bestandteile des Prototyps:

• Umsetzen des User Interface Designs als XAML und C#
• Aufsetzen eines UI-Projekts, welches autark bearbeitbar und testbar ist
• Programmierung von Custom Controls, Behavior und Converter
• Ausgestalten von Styles und Templates
• Bereitstellen einer vollständigen Design-Time-Unterstützung (z.B. durch Anpassung bestehender Controls und an Hand unseres eigenen ViewModel-Beispieldaten-Frameworks
• Einbringung zahlreicher Komponenten aus unserem Fundus (z.B. Custom Controls, Converter und Behaviors)
• Umsetzen der für die vorgesehenen Abläufe benötigten Screens mit MVVM
• Anreichern des UI-Projekts um Beispieldaten und simulierter Interaktion

Das Ergebnis: Ein Prototyp, der in neuem Glanz und abgebildeten Abläufen einen vollständigen Eindruck der Anwendung gibt. Große Teile dieses Prototyps sind bereits „Echtmaterial“, was später direkt Ihre Real-Solution übernommen werden kann.

Technik

Implementierung mit MVVM, Prism und Co.

Die Umsetzung einer Real-Anwendung bedarf vieles, vor allem aber Weitsicht. Denn Wartbarkeit, Erweiterbarkeit und Flexibilität sind für nachhaltige Software-Projekte heutzutage unverzichtbar. Daher legen wir bei der Implementierung von User Interfaces höchsten Wert auf strikte Trennung von Design (z.B. Farben und Größen), Layout (Aufbau der Views) und Logik (z.B. ViewModels, Datenbindung und Geschäftslogik). 

Wir entwickeln modulare UI-Architekturen, die maximale Flexibilität für die weiterführende Anwendungsentwicklung bieten.

• Bestandteile der technischen Implementierung:
• Umsetzen des User Interface Designs als XAML und C# (Falls noch nicht in der Realisierung eines Prototypen erfolgt)
• Aufsetzen eines UI-Projekts, welches autark bearbeitbar und testbar ist
• Programmierung von Custom-Controls, Behavior und Converter
• Ausgestalten Styles und Templates
• Bereitstellen einer vollständigen Design-Time-Unterstützung (z.B. durch Anpassung bestehender Controls und an Hand unseres eigenen ViewModel- Beispieldaten-Frameworks)
• Einbringung zahlreicher Komponenten aus unserem Fundus (z.B. Custom-Controls, Converter und Behaviors)
• Entwickeln einer modularen UI-Architektur (z.B. Prism, Caliburn oder SimpleMVVM)
• Anbindung von Backend-Systemen und Services durch Implementierung eines technischen Durchstichs vom Backend über Services (z.B. WCF, WCF RIA Services oder Data Services), DTOs ViewModels bis in das User Interface und zurück
• Gestalten der Views
• Entwicklung der ViewModels

Das Ergebnis:

• Das UI-Design ist vollständig als eigenständiges Projekt in Ihre Solution implementiert und kann von Ihren Entwicklern uneingeschränkt genutzt werden. Exemplarische Screens demonstrieren den Umgang mit den von uns gelieferten Komponenten und Resourcen
• Optional haben wir Sie bei der Entwicklung der UI-Architektur unterstützt und dazu beispielsweise Proof-Of-Concepts geliefert und Backend-Systeme angebunden