Sketching interfaces : generating high fidelity prototypes and mockups from sketches

Abstract

Zur Steuerung einer Software benötigt man ein Interface. Im Laufe der Zeit hat sich dieses von einer einfachen Kommandozeile mit Texteingabe zu einer grafischen Oberfläche verändert. Dadurch hat sich auch der Aufwand für die Erstellung einer guten Benutzeroberfläche erhöht. Eine übliche Vorgehensweise ist, die Oberfläche zuerst zu planen und zu analysieren und dann erst zu implementieren. In der Regel ist der Designprozess einer Benutzeroberfläche ein langer Prozess. Zu Beginn eines Projektes erarbeiten die Stakeholder die Requirements, dabei entstehen mit jeder Iteration detailliertere Artefakte mit steigendem Detailgrad. Das Skizzieren mit der Hand ist ein intuitiver und schneller Ansatz für das Erstellen von ersten Entwürfen und immer noch ein sehr beliebtes Mittel zur Ausarbeitung einer Benutzeroberfläche. Die Idee dieser Arbeit ist es, diese Schritte zu verkürzen, sodass die Software gleich eine Oberfläche und somit etwas Greifbares zum Testen und Analysieren bietet. Ziel dieser Arbeit ist es, ein Tool zu entwickeln, das die mit Hand skizzierten Benutzeroberflächen erkennen und diese auf Basis eines Design Guides in fertige Prototypen umwandeln soll. Dadurch kann die Oberfläche der Software sofort betrachtet und analysiert und der Designprozess verkürzt werden. Die Motivation für diese Arbeit ist es, eine schnellere Herangehensweise zu finden, um den Designprozess zu verbessern und somit eine gute Kommunikation zwischen Kunden und Softwareentwicklern zu schaffen.Das im Rahmen dieser Arbeit entwickelte Tool hilft somit, Ideen und Problemstellungen besser zu veranschaulichen, da man sofort ein erstes Bild einer Idee erhält. Das Tool wird jedoch nicht den eigentlichen Designprozess ersetzen, sondern unterstützen. Mit Hilfe von Testpersonen wird ermittelt, ob das Tool diese Umwandlung von Skizzen in Prototypen ideengerecht ausführen kann. Die Testpersonen müssen User Interfaces skizzieren, und das Tool wandelt diese in ein fertiges Design um. Zusätzlich zu qualitativen Beobachtungen der Testpersonen bei der Erledigung der Aufgaben werden Fragebögen zur Sammlung von Feedback eingesetzt. Die Antworten der Fragebögen zeigen, dass das Tool für das Umwandeln der Skizzen in ein fertiges Design geeignet ist. Das Tool kann die Handskizzen der ProbandInnen ideengerecht in fertige Prototypen umwandeln und somit helfen, den Designprozess zu verkürzen.

An interface is required to control software. Over time, the user interface has evolved from a simple command-line interface into graphical user interfaces. As a consequence, user interface design has become more time consuming and complex. A typical approach for creating and designing user interfaces is to start with planning, design, and analysis before implementing the user interface. Thus, the design of user interfaces is typically a time-consuming process spanning several iterations. Based on the requirements established at the beginning of a project with the involvement of relevant stakeholders, increasingly detailed and refined artifacts are created within each iteration. In early design phases, sketching by hand is an intuitive and fast approach to generate early drafts and it is still one of the most used techniques to elaborate a user interface.The idea of this thesis is to shorten the process of moving from rough, early sketches to detailed mockups which more closely resemble the final product, in order to create more detailed and specific representations of the final user interface for discussion, evaluation, and analysis. The goal of this thesis is to develop a software tool that translates hand-drawn user interface sketches into high fidelity mockups and prototypes based on a style guide. The motivation of this thesis is to speed up and support the design process and in doing so, to enhance communication and understanding between the various stakeholders involved.The tool created for this thesis enables improved representation and visualization of early ideas, concepts, and problem solutions. However, the tool is not intended to replace the design process, but to support it. To evaluate the correct functioning and utility of the tool in translating sketches to prototypes, test participants with different knowledge and experience of user interface design participated in a study. All participants had to draw sketches of user interfaces and the tool converted them into a finished design. In addition to the observations made during the study, participants had to complete a questionnaire to gather additional feedback. The results of the study and the responses to the questionnaire indicate that the tool is useful and functioning properly. The tool was able to successfully translate the hand-drawn sketches of participants into detailed high fidelity mockups and therefore it can help to speed up the design process.