Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
0
CMControl Touchscreen UICASE STUDY
Hi-Fidelity Prototyping mit Silverlight und SketchFlow
Centigrade GmbHwww.centigrade.de
OMICRON electronics GmbHwww.omicron.at
Veröffentlicht unterCreative Commons by-nd
http://www.centigrade.de/�http://www.omicron.at/�
ABSTRACT
Case Study – CMControl Touchscreen UI
Das CMControl ist eine Steuereinheit zu mobilen Prüfeinrichtungen, welches Elektrotechniker bei der Funktionsüberprüfung von Schutzeinrichtungen der Energieversorgung einsetzen. Diese stellen sicher, dass die Auswirkungen von Fehlern (z.B. Blitzeinschläge) auf Generatoren oder Übertragungsleitungen minimiert und so u.a. Stromausfälle vermieden werden.
Als erstes Gerät seiner Art kann das CMControl sowohl montiert an der Prüfeinrichtung, mit integriertem Ständer am Tisch, magnetisch am Schaltschrank befestigt, als auch in der Hand gehalten verwendet werden.
AutorenThomas [email protected]
mailto:[email protected]�
DIE AUFGABE
Case Study – CMControl Touchscreen UI
Ziel von OMICRON war es, die Bedienkonzepte des CMControl gegenüber denen, die bislang in der PC-Steuersoftware eingesetzt wurden, grundlegend neu zu entwickeln. Unter Verwendung neuester Touchscreen Technologien sollte die Bedienung so optimiert werden, dass die Arbeit einfacher, schneller und sicherer durchgeführt werden konnte.
Eine besondere Herausforderung war es, den potenziellen Nutzern – welche zumeist über wenig bis keine PC Erfahrung verfügen – eine intuitive und vertrauenserweckende Benutzeroberfläche zu bieten.
Vor diesem Hintergrund wurde Centigrade beauftragt, ein Interaktionsdesign und visuelles UI Design zu entwickeln, welches sich modernster Gestaltungselemente bedienen sollte (u.a. auch Animationen), um durch deren adäquaten Einsatz zu einer optimalen User Experience zu gelangen.
DIE LÖSUNG
Case Study – CMControl Touchscreen UI
Um die Effektivität moderner UI Konzepte mit Nutzern validieren zu können und damit das Risiko unbrauchbarer Designansätze bereits vor Beginn der komplexen Implementierung und Hardwareentwicklung zu minimieren, entwickelte Centigrade einen High-Fidelity-Prototypen.
Statt die tatsächliche Embedded Hardware zu verwenden, wurde ein externer 7“ Monitor zusammen mit einem Touchscreen Panel in eine Box eingebaut, die dem zukünftigen Gerät ähnlich sah. An einen herkömmlichen PC angeschlossen, auf dem ein Silverlight/SketchFlow Prototyp lief, konnten die Nutzer das geplante Design im Detail erleben und daraufhin essenzielles Feedback geben.
U.a. eingesetzte Ressourcen:
• Expression Blend 3 + SketchFlow, Visual Studio 2008• Silverlight• PowerPoint• Projektzeitraum: 3 Monate• Manntage: 120
DAS ERREICHTE
Case Study – CMControl Touchscreen UI
Entwicklungsaufwände konnten drastisch reduziert werden, da die Usability Tests frühzeitig Aufschluss über unbrauchbare UI Design Konzepte lieferten.
Aufgrund des Nutzerfeedbacks notwendig gewordene Änderungen am Prototypen konnten kostengünstig und zeitnah vorgenommen werden – ein fundiertes UI Design konnte damit vorgelegt werden, bevor die erste Zeile GUI-Produktionscode geschrieben war. Marketingmaßnahmen konnten beginnen, bevor das Produkt fertiggestellt war.
Der Prototyp wurde von den Embedded-Entwicklern des Kunden als „lebendige“ Spezifikation sowie als Grundlage für Aufwandsabschätzungen verwendet. Dadurch, dass die Anforderungen an die GUI bereits in Lösungsform vorlagen, bewegten sich die Entwicklungsarbeiten trotz der komplexen Domäne und eingeschränkten Zielplattform exakt im geplanten Zeit- und Kostenrahmen.
Aufgrund des durch den Silverlight Prototypen beschleunigten Entwicklungsprozesses konnte – nach Abzug der Aufwände für dieErstellung des Prototypen – eine Einsparung von 10% erzielt werden.
DER AUSBLICK
Case Study – CMControl Touchscreen UI
Da OMICRON eine große Palette verschiedener Softwaresysteme anbietet, fungiert das erfolgreiche CMControl Projekt als Impulsgeber für anknüpfende Verbesserungen bestehender Benutzeroberflächen, auch im Desktop Bereich.
Stile und Control-Templates, die im Rahmen der Prototypen Entwicklung in Blenderstellt wurden können für den Desktopbereich 1:1 wiederverwertet werden.
Unter anderem helfen solche Synergieeffekte dabei, die Anwendungspalette von OMICRON bezüglich GUI Design zu einem konsistenten Gesamtkonzept zusammenzuführen.
Expression Blend und Silverlight wird damit auch in Zukunft ein fester Bestandteil des agilen Entwicklungsprozesses des Kunden sein und für eine reibungslose Zusammenarbeit zwischen GUI Designern und GUI Entwicklern sorgen können.
APPENDIX
• OMICRON CMControl Marketing Video (zum Zeitpunkt der Erstellung existierte nur der SilverlightPrototyp, nicht das eigentliche Produkt)
• Centigrade Pressemitteilung
• OMICRON Testimonial für Centigrade
• Screenmovie des SketchFlow Prototypen
Case Study – CMControl Touchscreen UI
http://www.omicron.at/de/literature-videos/video/vcat/220/noc/1/�http://www.centigrade.de/en/news/article/centigrade-designed-gui-goes-live-at-middle-east-electricity-2010-in-dubai/�http://www.centigrade.de/en/references/clients�http://www.centigrade.de/download/Centigrade-CMControl-SketchFlow-Prototype.mp4�
APPENDIX
Case Study – CMControl Touchscreen UI
Das CMControlTouchscreen UI
APPENDIX
Case Study – CMControl Touchscreen UI
Prototyp in Expression Blend
APPENDIX
Case Study – CMControl Touchscreen UI
Startbildschirm
APPENDIX
Case Study – CMControl Touchscreen UI
Usability Test mit dem Silverlight Prototypen.
Um die optimale User Experience zu erhalten, wurde ein externer 7“ Touchscreen Monitor in ein Gehäuse eingebaut und mit einem Windows PC verbunden.
APPENDIX
Case Study – CMControl Touchscreen UI
System Einstellungen
APPENDIX
Case Study – CMControl Touchscreen UI
Eingabe von numerischen Werten
APPENDIX
Case Study – CMControl Touchscreen UI
Analyse von Testergebnissen
APPENDIX
Case Study – CMControl Touchscreen UI
Analyse von Testergebnissen
APPENDIX
Case Study – CMControl Touchscreen UI
Centigrade GmbH
Centigrade unterstützt Softwareunternehmen bei der Entwicklung gebrauchstauglicher Softwareprodukte, die sich durch hohe Benutzerfreundlichkeit sowie durch technische und visuelle Eleganz auszeichnen.
Dank eines kreativen und agilen Teams von Usability Experten, Designern und Software Architekten kann Centigrade eine Reihe maßgeschneiderter Dienstleistungsoptionen bieten. Das Spektrum reicht von der Anforderungsanalyse, über die Evaluation bestehender Systeme, bis hin zur Erstellung exklusiver Screen- und Icon-Designs sowie spezialisierter GUI Komponenten und Look and Feels für WPF, Silverlight und Java Swing basierte Anwendungen.
APPENDIX
Case Study – CMControl Touchscreen UI
OMICRON electronics GmbH
OMICRON ist ein global-orientiertes Unternehmen, das innovative Lösungen für Primär- und Sekundärprüfungen in der elektrischen Energietechnik anbietet. Durch die Kombination von Innovation, Kreativität und Einsatz neuester Technologien, nimmt OMICRON heute die Position des Weltmarktführers in diesem Markt ein.
Kunden in mehr als 130 Ländern profitieren von der Fähigkeit des Unternehmens, neueste Technologien in Produkte mit überragender Qualität umzusetzen. Niederlassungen in Europa, Nordamerika, Südostasien und im Nahen Osten sowie ein weltumspannendes Netz von Vertriebspartnern stellen sicher, dass das breite und tiefe Anwendungswissen und der weithin geschätzte Kundenservice allen Anwendern zur Verfügung steht.
APPENDIX
Case Study – CMControl Touchscreen UI
Zum Autor
Thomas Immich ist Mitbegründer und Geschäftsführer der Centigrade GmbH und leitet den Bereich visuelles User Interface Design. Sein Studium der Digitalen Medien schloss er an der FH Kaiserslautern mit einer preisgekrönten Diplomarbeit zum Thema User Interface Prototyping ab.
Seither beschäftigt er sich mit nutzer-zentrierten User Interface Design Methoden im Hinblick auf deren technische Umsetzbarkeit und Werkzeugunterstützung. Er betreute zahlreiche Kundenprojekte und beriet in dieser Funktion unter anderem agile Softwareentwicklungsteams bezüglich der ästhetischen und konzeptionellen Optimierung von User Interfaces.
CASE STUDYABSTRACTDie AufgabeDie LösungDas ErreichteDER AusblickAppendixAppendixAppendixAppendixAppendixAppendixAppendixAppendixAppendixAppendixAppendixAppendix