Skizzieren vs. Farbige Zeichnung im UI-Design

Das Design von Benutzeroberflächen kann für Designer echt knifflig sein. Sie müssen effektive und benutzerfreundliche Designs kreieren, die herausstechen. Um dabei zu helfen, schauen sich Designer oft bestehende Designs als Inspiration an. Es gibt zwei beliebte Wege, wie sie Inspiration finden. Der eine Weg ist das Durchstöbern von Designplattformen wie Dribbble und Behance, wo sie viele verschiedene Designs sehen können. Der andere Weg beinhaltet die Nutzung von Tools, die Designbeispiele basierend auf Skizzen oder bestehenden Designs vorschlagen. Diese Tools benutzen Algorithmen, um ähnliche Bilder zu finden.

Obwohl diese Methoden helfen können, haben sie auch ihre Probleme. Das Durchsehen von Design-Portfolios kann überwältigend sein und die Designer von ihren ursprünglichen Ideen abbringen. Auf der anderen Seite kann es schwierig sein, originell zu sein, wenn man sich zu sehr an ähnlichen Designs orientiert.

Um einen besseren Weg zu finden, haben einige Forscher ein Modell namens StyleGAN entwickelt. Dieses Modell kann eine Vielzahl von Designmustern basierend auf einem anfänglichen Designinput erstellen. Allerdings gibt es den Designern nicht viel Kontrolle über das Layout oder spezifische Elemente des Designs. Designer können nur Stilmerkmale wie Farbe und Textur auswählen.

In diesem Bericht schauen wir uns zwei verschiedene Methoden an, um Designern bei der Erstellung von Mockups zu helfen. Eine Methode nutzt Skizzen, und die andere verwendet detaillierte Zeichnungen mit spezifischen Farben, um verschiedene Designelemente darzustellen. Die Skizzenmethode erlaubt es Designern, ihre Ideen schnell auszudrücken, während die Methode mit farbigen Zeichnungen hilft, das Design genauer darzustellen.

#Methodik

Für die Skizzenmethode nutzen wir ein Modell namens Pix2Pix, das gut darin ist, Skizzen in hochwertige Bilder zu verwandeln. Die farbige Zeichnungsmethode verwendet ein anderes Modell namens SPADE, das Bilder basierend auf semantischen farbigen Zeichnungen generiert. Dieser Ansatz ermöglicht eine bessere Kontrolle über spezifische Designelemente, was hilft, genaue Darstellungen des finalen Designs zu vermitteln.

Wir wollten sehen, wie sich diese beiden Methoden in Bezug auf Ausdruckskraft, Benutzerfreundlichkeit, Zeitaufwand und Intuitivität schlagen. Dazu haben wir Tests mit einer Gruppe von 13 Studenten durchgeführt, die Human-Computer Interaction studieren. Jeder Student musste ein Mockup für eine mobile Anwendung mit beiden Methoden erstellen und dann seine Erfahrungen während der Aufgabe teilen.

#Teilnehmer

Die Studie umfasste 13 Teilnehmer, die alle im ersten Jahr eines Masterprogramms im Bereich Computertechnik waren. Sie hatten einige Vorkenntnisse im Bereich des Benutzeroberflächendesigns. Unter diesen Teilnehmern waren 2 Frauen und 11 Männer, im Alter von 23 bis 25 Jahren. Die geringe Anzahl der Teilnehmer bedeutet, dass diese Ergebnisse vorläufig sind und weitere Studien nötig wären, um die Ergebnisse mit einer grösseren Gruppe zu bestätigen.

#Studiendesign

Die Teilnehmer erhielten eine zweigeteilte Aufgabe, bei der sie zuerst eine mobile Benutzeroberfläche Skizzieren und diese dann semantisch zeichnen mussten. Sie wurden über die Durchführung der Aufgabe durch einen bereitgestellten Leitfaden informiert. Sie konnten jedes digitale Zeichentool verwenden, mit dem sie sich wohl fühlten, obwohl zukünftige Studien davon profitieren könnten, die Werkzeuge auf eine Option zu beschränken, um konsistentere Ergebnisse zu erzielen.

Während des ersten Teils skizzierten sie ihre Ideen. Danach wechselten sie zur farbigen Zeichnungsmethode, um eine detailliertere Version ihres Designs zu erstellen. Diese Reihenfolge der Aufgaben wurde gewählt, um einen typischen Designprozess widerzuspiegeln, bei dem anfängliche grobe Ideen zu strukturierten Designs weiterentwickelt werden. Nach Abschluss ihrer Mockups bewerteten die Teilnehmer ihre Erfahrungen in verschiedenen Dimensionen wie Benutzerfreundlichkeit, Ausdruckskraft und Intuitivität. Sie gaben auch ihre Gedanken zur Qualität der durch beide Methoden generierten Mockups ab.

#Bewertung der Methoden

#Intuitivität

Bei der Betrachtung der Verständlichkeit und der Nutzung jeder Methode schnitt die Skizzentechnik im Allgemeinen besser ab als die farbige Zeichnungsmethode. Die meisten Teilnehmer fanden, dass das Skizzieren ihnen erlaubte, ihre Ideen klar auszudrücken und ihre Layouts besser zu visualisieren. Einige merkten an, dass es sich natürlicher anfühlte, ihre Gedanken in Skizzen zu übertragen.

Allerdings fanden einige Teilnehmer die Methode mit farbigen Zeichnungen weniger intuitiv, da sie Schwierigkeiten hatten, sich an die Farbzuteilungen für verschiedene Elemente zu erinnern. Einige Teilnehmer erwähnten, dass die Methode verwirrend erschien und es schwer machte zu erkennen, wie nützlich sie war.

#Benutzerfreundlichkeit

In Bezug auf die Benutzerfreundlichkeit äusserten die Teilnehmer gemischte Gefühle zu beiden Methoden. Während einige der Meinung waren, dass das Skizzieren spezielle Zeichenskills erforderte, glaubten andere, dass die farbige Zeichnungsmethode einfach war, weil sie sich mehr auf einfache Formen wie Quadrate und Rechtecke konzentrierte. Die Teilnehmer hatten unterschiedliche Meinungen zu den Herausforderungen, die sie faced, wie das Zeichnen mit einer Maus oder das Anpassen an verschiedene Geräte für die Aufgabe.

#Zeitaufwand

Die Teilnehmer hatten unterschiedliche Ansichten darüber, wie lange jede Methode benötigte. Einige fanden den Skizzierprozess schneller, da er es ihnen ermöglichte, das Layout freier zu skizzieren, während andere sich beim Versuch, eine anständige Skizze zu erstellen, festgefahren fühlten. Ähnlich variierten die Meinungen zur farbigen Zeichnungsmethode, wobei einige schnell fertig wurden, während andere zu viel Zeit damit verbrachten, die richtige Software zu finden oder ihre Ideen mit dem, was herauskam, in Einklang zu bringen.

#Ausdruckskraft

In Bezug auf die Ausdruckskraft bevorzugten die Teilnehmer im Allgemeinen die Skizzentechnik. Sie fanden, dass sie damit detailliertere Ideen übermitteln konnten, während viele die farbige Zeichnungsmethode als begrenzt empfanden, was die Ausdrucksweise ihrer ursprünglichen Konzepte anging. Einige Teilnehmer mochten, dass das Skizzieren fast alles illustrieren konnte, was sie sich vorstellten, während andere anmerkten, dass die farbige Methode zu einschränkend erschien.

#Qualität und Treue der Ergebnisse

Beim Vergleich der finalen Mockups, die durch jede Methode produziert wurden, ergab die Skizzentechnik Bilder von höherer Qualität als die farbige Zeichnungsmethode. Viele Teilnehmer waren auch der Meinung, dass die Skizzentechnik ihren ursprünglichen Ideen näher blieb. Allerdings war der Unterschied in Qualität und Adhärenz an das ursprüngliche Design nicht so gross wie in der Wahrnehmung von Ausdruckskraft.

#Zusätzliche Einblicke

Ein Blick auf die zusätzlichen Kommentare der Teilnehmer zeigte, dass die Vorlieben unterschiedlich waren. Einige Teilnehmer bestanden darauf, dass die Skizzentechnik besser sei, schlugen jedoch vor, einen Farbcode hinzuzufügen, um die Herausforderungen bei der Definition der Funktion jedes Elements anzugehen. Andere sahen die Vorteile in der Kombination aus Skizzieren und farbigen Zeichnungen, um eine funktionalere Erfahrung zu schaffen.

Einige Teilnehmer argumentierten, dass die beste Methode von dem Kontext der Designaufgabe abhängen könnte. Sie stellten fest, dass keine Methode überlegen ist; sie ergänzen sich gut und können nützlich sein, wenn sie zusammen eingesetzt werden.

#Fazit

Diese Studie bewertete und verglich zwei Methoden zur Erstellung von Mockups für Benutzeroberflächen: Skizzieren und semantisches Zeichnen. Die Teilnehmer bevorzugten im Allgemeinen das Skizzieren wegen seiner höheren Intuitivität und Ausdruckskraft. Allerdings haben beide Methoden ihre Vor- und Nachteile, was darauf hindeutet, dass eine Kombination aus beiden der vorteilhafteste Ansatz sein könnte.

Eine gemischte Methode, die sowohl Skizzen für die schnelle Ideengenerierung als auch farbige Zeichnungen für die detaillierte Darstellung umfasst, könnte Designern ein leistungsstarkes Werkzeug zur Erstellung von Mockups bieten. So könnten sie ihre Ideen klar ausdrücken und gleichzeitig ein hohes Mass an Genauigkeit beibehalten, was zu besseren Endprodukten führt.

Zukünftige Forschungen sollten untersuchen, wie diese beiden Methoden effektiv integriert werden können, um letztendlich den Designprozess für Benutzeroberflächen zu verbessern.