Das Projekt

In Zusammenarbeit mit der Digitalen Agenda / Smart City der Stadt Ulm sollte im Kurs Interaction Design 1 ein richtungsweisendes, attraktives und informatives Design für einen zeitgemäßen digitalen Stadtführer bzw. ein Info-Terminal erarbeitet werden. Dabei teilt sich das Projekt in 4 Phasen:

  • Verstehen und Definieren
  • Konzipieren und Entwerfen
  • Testen und Bewerten
  • Anpassen und Ausarbeiten

Verstehen und Definieren

In der ersten Phase liegt der Fokus auf der fundierten Einarbeitung in das Thema, Projektmanagement, -koordination, Arbeitsaufteilung und Anwendung verschiedener Methoden.

Zielgruppendefinition

You can not understand good design if you do not understand people; design is made for people.
Dieter Rams

Bevor wir wissen können, wie das Design des Terminals aussehen soll, um den Erwartungen der Nutzenden zu entsprechen muss erst herausgefunden werden, wer die Zielgruppe ist. Hierbei müssen Aspekte wie Vorlieben, Abneigungen, Bedürfnisse und Anforderungen an das Produkt in einem direkten Interview erfragt werden. Um dies umzusetzen, wurden Interviews mit Passanten, die sich zum Zeitpunkt des Interviews in Ulm befanden, durchgeführt. Auf Basis dessen wurden sowohl für die Primär- als auch für die Sekundärzielgruppe fiktive Personas erstellt.

Persona 1:

Emelie Ritter, 23 Jahre, Studentin

Über Emelie:

  • kommt aus Berlin
  • studiert seit Oktober 2022 an der Hochschule Ulm
  • kennt die Stadt noch nicht
  • hat eine Vorliebe fürs Backen
  • Mag Unordnung nicht

Ihre Anforderungen an das Terminal:

  • ordentliches, aufgeräumtes Layout
  • leichte Navigation
  • schnelle Orientierung

Persona 2:

Peter Ehrlich, 45 Jahre, Geschäftsführer und Familienvater

Über Peter:

  • kommt aus Falkensee, Nähe Berlin
  • ist auf einer 24 stündigen Geschäftsreise in Ulm
  • war noch nie zuvor in Ulm
  • mag es, spazieren zu gehen
  • ist von mangelnder Planung abgeneigt

Seine Anforderungen an das Terminal:

  • Auf den zeitlich beschränkten Aufenthalt angepasste Vorschläge
  • Möglichkeit, die Vorschläge auf die jeweiligen Interessen anzupassen
  • Highlights der Stadt aufzeigen
  • Eine schöne Spazierroute durch Ulm

Mithilfe der aufgestellten Personas wurden darauffolgend verschiedene Modelle und Szenarien durchlaufen. Dazu gehören beispielsweise die Future State Szenarien, die beschreiben, wie die Personas das Terminal in Zukunft erleben sollen. In diesem Zusammenhang wurden zudem Journey Maps und User Scenarios angefertigt. Auch haben wir ein Rollenspiel durchgeführt, bei dem ein Teammitglied als Nutzer agierte, während ein anderes Teammitglied die Rolle des Terminals einnahm.

Diese angewendeten Methoden haben uns dabei geholfen, Systemanforderungen und Funktionen der Stele herauszukristallisieren, die uns davor nicht bewusst waren. Außerdem haben wir Verhaltensattribute für das Terminal festgelegt:

  • Hilfreich
  • Persönlich
  • Effizient

Konzipieren und entwerfen

Die zweite Phase befasst sich mit der Entwicklung eines inhaltlichen Konzepts. Zudem werden generelle Rahmenbedingungen und Anforderungen, die Informationsarchitektur und das Navigationskonzept entwickelt.

Bevor mit der Inhaltsrecherche und der Entwicklung des Designs begonnen werden kann, müssen die unterschiedlichen Anforderungen der Hauptzielgruppen an Inhalt und Design analysiert und bei Unstimmigkeiten Kompromisse gefunden werden. Beim Vergleich der allgemeinen Werte sind uns Unterschiede aufgefallen, die wir folgendermaßen lösen wollen:

Die Studentin denkt innovativer und visionärer, wohingegen der Familienvater traditioneller eingestellt ist. Um beiden Ansprüchen gerecht zu werden, sollen inhaltlich sowohl innovative (z.B. Schnitzeljagd/ Storytelling) als auch traditionelle Aspekte (Suchfunktion/ Tagesplan) einbezogen werden.

Auf der gestalterischen Seite wird eine gute Mischung aus traditionellem Raster und Rasterbrüchen angedacht. Gestalterisch wird zudem eine organisierte Struktur präferiert, da es sonst zu Verwirrung und Verständnisschwierigkeiten kommen könnte.

Insgesamt lässt sich die angestrebte Gestaltung mit folgenden Adjektiven beschreiben:

  • prägnant
  • übersichtlich
  • animierend

Platzierung der Terminals

Die Terminals sollten an den Hauptversammlungsorten und -zugangswegen zur Stadt platziert werden. Die Hauptversammlungsorte stellen hierbei vor allem touristische Attraktionen dar, an denen den Touristen die weitere Erkundung der Stadt erleichtert werden kann. Es ergeben sich insgesamt zwölf sinnvolle Positionen für den Aufbau eines Terminals, welche orange in der Karte markiert sind.

Definition der Interface Elemente

Um die Erstellung der Entwürfe zu erleichtern, definierten und ordneten wir zunächst Interface Elemente, welche wir in der Gestaltung verwenden könnten. Wir einigten uns auf die Unterordnung der Interface Elemente in vier Kategorien:

  • Templates
  • Container
  • Module
  • Elemente

Stilstudien

Daraufhin wurden inviduelle Stilstudien erstellt. Diese wurden im Anschluss ausdiskutiert und zu einem Stilguide erweitert.

    Finales Styleguide

    Der Styleguide ist angelehnt an Stilstudie 4 entstanden. Hier wurde der Gestaltungsschwerpunkt von der Website der Ulm Touristik inspiriert. Hierfür wurden die Farben der Seite mit aufgenommen, damit die Terminals so eine Wiedererkennung erzeugen und eine Hierarchie schaffen.

    Für die Typografie wurde die Schriftart "Lato" ausgewählt. Für die Bilder möchten wir kräftige Bilder verwenden, die eine Art Eleganz und Seriosität mit sich bringen. Als Figur dienen Illustrationen von Einstein, welcher den Besucher bei der Schnitzeljagd durch die Stadt führen soll. Bei der Verwendung von Icons wird eine quadratische Form verwendet, um die Verbindung zu den Icons der Ulm Touristik herzustellen. Die Buttons wurden ebenfalls leicht abgerundet, um den statischen und eckigen Fluss der anderen Elemente zu brechen.

    Wireframes

    Im Anschluss ging es nun an das Aufbauen des Layouts. Dafür haben wir mir Wireframes gearbeitet, um schon einmal ein Gefühl für die Platzierung der einzelnen Elemente zu bekommen. Dabei haben wir sowohl Ansichten für das Terminal, als auch mobile Ansichten erstellt.

    Testen und bewerten

    In dieser Phase wurden die Entwürfe erstmals in Figma erstellt. Dabei dienten sie als Prototypen um zu testen, wie funktionsfähig und verständlich unsere bisherigen Ansätze in Wirklichkeit sind. Dabei wurden einzelne Elemente stetig verbessert, sodass sich insgesamt drei Entwurfsphasen herauskristallisierten.

    Erste Entwurfsphase

    Insgesamt wurde vor allem darauf geachtet ein gutes Text-Bild-Verhältnis zu gewährleisten und genügend Weißraum zu lassen, damit die Elemente sich nicht gegenseitig erdrücken.

    Fraglich ist, ob eine Information über das Viertel für den Nutzer wirklich so relevant ist, dass sie am Seitenanfang stehen sollte. Der lange Text könnte den Nutzer bereits von Weitem abschrecken.

    Die Einstein-Illustration ist noch sehr steif und statisch. Diese soll durch eine dynamischere Körperhaltung verbessert werden.

    Die Bilder am Seitenende sollten schwarz-weiß dargestellt werden mit diese nicht zu stark ablenken und die Icons in den Vordergrund gestellt werden.

    Zweite Entwurfsphase

    Die Entwürfe sind in der ersten Phase noch zu traditionell ausgefallen. Wir hatten uns sehr stark an das Raster gehalten. Um den animierenden Aspekt der geplanten Gestaltung mehr umsetzen zu können mussten wir die Startseite größer anlegen. Die Information, die wir bisher auf kleinstem Raum vermittelt hatten, sollte mehr Platz bekommen, um besser wirken zu können. Wir vergrößerten deshalb an einigen Stellen die Typografie und zogen den Unterpunkt "Aktuelle Events" größer auf. Die ursprüngliche Einstein-Illustration ersetzten wir durch einen dynamischeren Charakter, welcher dadurch auch viel sympatischer wirkt.

    Anpassen und Ausarbeiten

    Nach der Entwicklung der Entwürfe für das Terminal wurde das Projekt nun mit HTML, CSS und JavaScript ausgearbeitet und feinjustiert. Um den Aufbau während der Arbeit zu vereinfachen, wurde das Plug-in “fiveserver” verwendet, um eine direkte Live-Übertragung der Änderungen an HTML und CSS-Dateien ohne die Notwendigkeit ständiger Aktualisierungen zu ermöglichen.

    Der “Terminal First”-Ansatz wurde bei der Programmierung des Terminals verfolgt, da der Hauptfokus auf die Nutzung auf Terminals in der Stadt und nicht auf mobilen Geräten liegt.

    Um eine harmonische Gestaltung zu erreichen und die Hauptelemente in einheitlichen Größen zu halten, wurde zunächst eine “main.css” erstellt. Für jede .html Seite wurde anschließend eine entsprechende .CSS-Datei erstellt, um die Gestaltung im anzupassen.

    Finale Entwurfsphase

    Nach Verbesserung und Ausarbeitung der Entwürfe kommen wir zu den Finalen. Dafür wurde der Stil der Startseite komplett überarbeitet, um im Vergleich zum ersten Wireframe dynamischer und ansprechender zu wirken. Für die Navigationsleiste wurde das Hamburgermenü mit Links ersetzt, sodass Benutzer direkt navigieren können, um die gewünschten Informationen zu erhalten, ohne mehrmals klicken zu müssen.

    Viele Nutzer würden zum Beispiel lieber direkt die Kategorien oder die Informationen ganz unten entdecken. Anstatt zu scrollen, gelangt der Nutzer mit einem Klick auf Kategorie oder Information direkt an die gewünschte Stelle. Um die Aufteilung spannender zu gestalten, wird hier die Hintergrundfarbe geändert. Auf diese Weise lassen sich einige Elemente leicht von anderen trennen und schaffen eine harmonische Figur-Hintergrund-Trennung.

    Da die Schnitzeljagd auch auf dem Handy gespielt wird, wurden auch hier die Designs angepasst. Hier wird jeweils die Station an der sich der Nutzer befindet und der aktuelle Punktestand des Spielers angezeigt.

    Die Aufgaben können aus unterschiedlichen Aktionen bestehen. So kann es entweder einfach nur der Weg zur nächsten Station sein, eine Fotografie oder ein Quiz sein, um Punkte zu verdienen. Auch gibt es die Möglichkeit einer audiotiven Begleitung durch Albert Einstein.

    Sollte es sich bei der Schnitzeljagd um einer der vorgefertigten Varianten handeln, kann der Nutzer am Ende der Schnitzeljagd die besten Spieler mit den meisten Punkten sehen. Für das Quiz wird die Illustration von Einstein wiederverwendet. So fühlt es sich bei den Fragen so an, als ob Einstein fragen würde.

    Je nachdem, ob der Nutzer die Frage richtig oder falsch beantwortet, erhält dieser eine entsprechende Punktzahl. Hierfür wird dann auch bei falscher Antwort, eine Illustration des traurigen Einsteins verwendet.

    Mock-Ups

      Fazit

      Abschließend zum Semester können wir sagen, dass dieses Projekt uns einiges zum Gestaltungsablauf interaktiver Anwendungen und zur dazugehörigen Teamarbeit gelehrt hat. Zum einen haben wir gelernt, dass eine am Anfang sehr wichtig ist, damit die Inhalte nur aus vertrauenswürdigen Quellen stammen. Zum anderen haben wir mitgenommen, dass die Ausarbeitung eines Konzepts die Designentwicklung erleichtert. Zudem ist die Verwendung eines Styleguides insbesondere bei Teamarbeit sehr wichtig für ein harmonisches und einheitliches Design.

      Neben diesen Aspekten zählt auch die Teamfähigkeit zu den Kenntnissen, die wir durch diesen Kurs weiter ausbauen durften.

      Autoren

      Ayca Günes, Sabrina Schindler, Laura Schmidt, Marla Bethke, Katharina Engelhardt

      Betreuung

      Prof. Damian Gerbaulet