Live Website · WIP

In den wöchentlichen Vorlesungen wurde vor allem der Prozess zu einer gelungenen Interaktion zwischen Mensch und Computer beleuchtet. Es gab einen besonderen Fokus auf die zahlreichen Methoden und Möglichkeiten, zur Ideengenerierung und dem Testen dieser.

Zu Beginn des Projektes stand also der Brocken User Research im Raum. Wie kann ich wertvolles, aufschlussreiches Wissen über meine User und deren Bedürfnisse im Hinblick der besonderen Beschaffenheit der Problematik erlangen?

Warum eigentlich ich?

Ich entschied mich erst einmal meine interne Motivation zu verstehen. Schließlich ging es hierbei um die Darstellung meiner Projekte, Arbeitsweisen und dadurch Persönlichkeit. Das ist in der Hinsicht heikel, da man manche Leute unweigerlich nicht erreichen wird. So wie etwa der eigene Kleidungsstil, jemand anderem nicht gefällt. 

Mit dem einzigen unterschied, dass ich immer das gleiche an haben werde und nur geringfügig ändern kann ohne erneut riesigen Aufwand zu betreiben. Ich hatte also von vorn herein einen Selbstdruck es richtig zu machen und auch so dass Leute nicht nur die Bedienung verstehen würden, sondern auch mich als Mensch und am aller wichtigsten meine Arbeit.

Der Grund für meine interne Motivation lag nach etwas Verständnissuche in einem gewissen Frust. Ausgelöst durch die ratlosen Gesichter anderer, wenn ich ihnen versuchte zu erklären, was ich mit meiner Zeit anstelle und warum das so toll sei. Das Thema schien etwas zu komplex, oder meine verbale Funktionsweise reichte bislang nicht aus um ohne visuelle Unterstützung klar zu kommunizieren um was sich meine Welt dreht. 

Wie Designer*innen darin scheitern ihre Arbeit nach außen zu kommunizieren und warum das eigentlich so tragisch paradox ist, wäre wohl eine ganze Bachelorarbeit wert, aber ich bleibe mal beim wesentlichen für den Moment.

Die da oben.

Ein weiterer Aspekt meiner Motivation sind die externen Gegebenheiten. Warum sollte es für Außenstehende so bedeutend sein, über meine Arbeit lernen zu können. Und/ Oder warum ist es so bedeutend für mich ob und wie Außenstehende über meine Arbeit lernen können? Und überhaupt, wer sind diese Außenstehenden eigentlich? Und wie lernen diese am besten in deren eigenen fremdbestimmten Realitäten?

Hast du schon einmal gehört, dass jemand nackt zum Bewerbungsgespräch gegangen ist?

Das war mein Gedanke zum Portfolio. Momentan bin ich in einer professionellen Weiterentwicklungsphase, welche es unumgänglich bedarf, an Bewerbungsprozessen teilzunehmen. Und um nicht nackt dazustehen muss man schließlich auch auf irgendeine Art zeigen, was man kann. Ein Portfolio tut laut Wiki Definition eben genau das:

Für Berufskreative ist das Portfolio eine Zusammenstellung der besten und wichtigsten Arbeiten und Projekte, an denen man beteiligt war. Es dient zu Bewerbungs- oder Selbstvermarktungszwecken.

Der Vorteil eines Online Portfolios ist zudem, dass es unabhängig und jederzeit abrufbar ist und nicht etwa meine physische Präsenz oder einem Postweg bedarf. In der Welt der digitalen Produktentwicklung ist eben alles digital und da gehört es doch zum guten Ton, in diesem digitalen Raum präsent zu sein und der (Design)-Gemeinschaft durch eigene Erkenntnisse, Ideen, Meinungen beizusteuern - etwas, was sicherlich auch in Auswahlverfahren zugute kommt.

Die Kommunikation meiner Arbeit und meines individuellen Ansatzes unter besonderem Blick auf Bewerbungsszenarien, ist also die Grundsituation, von der alle weiteren Gestaltungsfragen abhängen. Die meisten Leute, welche Einstellungsprozesse in Digitalschmieden durchführen sind in der Regel selbst vom Fach und wie üblich mit wenig Zeit und Aufmerksamkeit ausgestattet. 

Zum Glück jedoch genügend, um diese für das ein oder andere Interview mit Studierenden zu opfern.

What Users want

Ein Dilemma, welches sich schon vor der Auswahl von Interviews als erste Research-Methode bemerkbar machte, war die Wertigkeit der beziehbaren Informationen. 

Je nach Methode, aber auch Frage und nicht zuletzt Gefragte Person, ändert sich die Informationslage. Ein großer Trend der mir dabei auffiel war wohl Quantität entgegen Qualität. Im besten Falle ist man in der Lage eine hohe Menge an qualitativen Insights und Daten zu erhalten. Dieses Optimum deckt sich jedoch nicht immer mit den Ressourcen der Realität.

Als ersten Schritt kontaktierte ich verschiedene Menschen mit Personalmanagement Erfahrung im Gestaltungsbereich. Hierbei griff ich auf Personen des FHP Netzwerks zurück, wie etwa Design Lead Thomas Sonsalla und Creative Director Matthias Dittrich bei Argo Design (beide haben übrigens auch hier an der FHP Design studiert).

Der Kontakt wurde freundlicherweise durch Prof. Heidmann hergestellt, vielen Dank noch einmal an dieser Stelle dafür! Das Projekt wäre ohne diese Kontakte mit Sicherheit nicht so gut verlaufen wie es letztlich der Fall war.

Um mein studentisches Einer Team so effizient wie möglich zu nutzen, entschloss ich mich für eine Verteilung auf eine geringere Menge an ausgiebigen, geplanten P2P Interviews via Zoom und einer größeren Menge an E-Mails mit Fragebogen.

Interviews

Für die Interviews konnte ich Termine mit Thomas und Matthias von Argo finden, was besonders wichtige für mich gewesen ist. Aufgrund ihrer Positionen in einer globalen Design-Agentur versprach ich mir besonders quantitative Informationen, welche eher durch ein Interview zu erhalten sind als durch eine kurze Umfrage.

In den 45 minütigen Gesprächen die ich mit den beiden führte, lag ich großen Wert darauf nicht in ein Abfragen zu verfallen und zu sehr an einem Fragebogen zu kleben. Ich war überzeugt, dass ein Unterhaltungsklima, welches tieferes Eingehen auf Aussagen oder Abschweifen, erlaubt, ein höheres Verständnis über die Zusammenhänge und Aspekte die den Aussagen zu Grunde liegen, katalysiert.

Die Aussagen habe ich in eine Tabelle eingetragen. Auf der X-Achse für jede Frage eine Spalte, plus eine extra Spalte für Key Insights. Hier hielt ich die bedeutendste Erkenntnis des Gesprächs fest. Auf der Y-Achse pro Person eine Zeile.

E-Mails

Die E-Mails basieren direkt auf dem Fragebogen und dienen erwartungsgemäß keinem expliziten Anspruch auf qualitativer Einsicht. Um dennoch die Chancen zu erhöhen bemühte ich mich das Layout möglichst so zu gestalten, dass es relative einfach zu verstehen ist und ein minimales Engagement Informationen generiert, auf welchem dann durch weiteres freiwilliges Engagement weitere Fragen beantwortet werden können. 

Das Feedback aus dieser Methode diente viel mehr, bereits gewonnene Erkenntnisse der Interviews durch eine Menge an Informationen und nicht zuletzt subjektiven Meinungen, gegen zuhalten und wohlmögliche Abweichungen oder Trends zu erkennen. 

Dies schuf ein Verständnis für besonders umstrittene, sowie klare Gesamtstellungen. Wenn alle Personen sich zu einer Frage gleich äußern sollte man sich in der Gestaltung in diesem Punkt einigermaßen sicher fühlen dürfen - zumindest bis zum ersten Testing. 

In jedem Fall haben sich meine Erwartungen bestätigt und es gab weniger detailreiche Informationen. Vielmehr lässt sich ja auch nicht erwarten, wenn man den Leuten E-Mails an den Kopf wirft.

Auch die Ergebnisse aus dem Mail Fragebogen habe ich in die Tabelle eingetragen jedoch separat von denen der Interviews. Auch Key Insights habe ich ausgewertet.

Ergebnisse

Aus meinen Nachforschung haben sich hinsichtlich der Bedürfnisse meiner Nutzer*innen folgende bedeutende Erkenntnisse erschlossen.

Das wichtigste für Personen vom Personal-Management in Bewerbungsprozessen ist die Eignung der bewerbenden Person für die offene Stelle. Dabei geht es sowohl um professionelle wie auch charakterliche Eigenschaften.

· Skillset

· Erfahrungen

· Arbeitspositionen

· Unternehmen

· Kurze Lesezeiten

· Klare Visualisierung

· Inspiration

What Users need

Trotz meiner aufschlussreichen Erkenntnisse hinsichtliche dem, was meine Nutzer*innen wollen, gibt das nicht direkt preis was sie auch brauchen. Das bedeutet die eben aufgelisteten Aspekte müssen als nächstes in klare gestalterische Konzepte übertragen werden.

Competitor Analysis

Damit das aber nicht willkürlich nach meinen Verständnissen der HCI durch den Kurs passiert (auch wenn diese selbstverständlich fundiert sind und in sich auch sehr wertvoll, sind sie doch nicht auf einen konkreten Fall bezogen sondern dienen allgemeiner Richtungsweisung), durchforstete ich 24 Portfolio Webseiten und schrieb dem jeweiligen Aspekt meiner vorherigen Ergebnisse Features der Portfolio Seiten zu, welche auf diese eingingen und dadurch für mich als mögliche gestalterische Lösung dienten könnten. 

Schnell machten sich verschiedene Trends in den jeweiligen Webseiten bemerkbar, was zu folgendem Ergebnis führte:

· Einfache Navigation

· Scanbares Layout

· Unbestreitbare Hierarchie

· Direkte Typo

· Projekte als Zentrum

· Spaß im Detail

How I try to achieve this

Eine der wichtigsten Komponenten die dieses Projekt bestimmen, ist die Selbstdarstellung. Schließlich entwickle ich kein Portfolio für eine Immobilienfirma sondern für mich als individueller Mensch. Meine professionellen Fähigkeiten, die bedeutsamsten Informationen auf der Webseite, sollen allerdings unter keinen Umständen meiner persönlichen gestalterischen Präferenz unterliegen, obgleich ich dieser ebenfalls Raum geben muss, da so ein Charakter vermittelt wird.

Die Zwangsläufigkeit meinen Charakter zu reflektieren, und sinnvoll in einen gestalterischen Ansatz zu übertragen, machte den Ausbau der Interaktionen besonders herausfordernd. Zugleich bedeutete es aber auch einen gewissen Freiraum der ganz unabhängig von üblichen Usability Anforderung existieren kann - und in einem Rahmen auch sollte. Letztlich ist das auch der größte Fokus in meine Projekt geworden. Sozusagen HCI für andere für einen selbst.

The Ugly Baby

Ich beschloss direkt mit Mid Fidelity Prototypen zu starten, da mir das Papierprototypen nicht so liegt. Außerdem bin ich ein großer Fan der Ugly Baby Methode, bei welcher einmal das ganze Projekt mit allen screens, views und viewmodes ausgelegt wird, jedoch alles sehr spatanisch. Basierend auf diesem Grundgerüst habe ich nun Stück für Stück aufgebaut. Der Vorteil ist hierbei das bei jedem neuen Element und Veränderung direkt die Auswirkungen auf das Gesamtkonzept erkennbar werden. So bleibt trotz vieler Elemente alles stimmig ohne an Flexibilität zu verlieren.

Schau dir den kompletten scroll der Landing Page an:

Einfache Navigation

Um die Navigation möglichst intuitiv zu gestalten, habe ich mir Gestaltungsgrundsätze des HCI herangezogen. Dabei gibt es verschiedenste Auslegungen und Formulierungen die aber üblicherweise meist auf die gleiche Idee hinaus laufen.

In diesem Fall geht es darum, sich jederzeit bewusst sein zu können, wo man sich befindet und welche Optionen verfügbar sind. Das wird durch folgende Gestaltungsentscheidungen erfüllt:

• „Hello I am Paul“ Intro Text - Hier stellt sich jemand vor, es geht um eine Person.

• Sektionsnummerierung - Die Nummerierung ändert sich, wie auch der Inhalt. Hier fängt ein neuer Sinnesabschnitt an.

• Sektionstitel - Der Titel in der rechten unteren Ecke ändert sich, wie auch der Inhalt. Hier fängt ein neuer Sinnesabschnitt an.

• Abschnittsbeschreibungen - Auf den Projektseiten helfen kurze Beschreibungen direkt unter den ersten visuellen Eindrücken der Produkte, den Inhalt der einzelnen Abschnitte des Entstehungsprozesses zu identifizieren. Hierbei wird im ersten Abschnitt das Problem erklärt und warum es relevant ist, im zweiten der Lösungsprozess mit angewandten Methoden und im dritten die Lösung selbst und ihren tatsächlichen Einfluss auf die ursprüngliche Problematik.

• Navigationsmenü Hover - Das Navigationsmenü (Nav Dial) öffnet sich sobald der Cursor auch nur in die Ecke geschoben wird. So wird das Nav Dial entdeckt ohne dass es einer bewussten Interaktion bedarf. Die Verbindung mit dem Nav Dial und den Sektionen wird durch die Platzierung in der gleichen Ecke kommuniziert. Zusätzlich ist durch die Rotation des Elements eine Bewegung impliziert. Durch das Nav Dial lassen sich Sektionen direkt ansteuern um sich zu diesen zu bewegen.

• Content Cards - Jedes Element, welches weitere Informationen in sich trägt ist als eingefärbte „Karteikarte“ mit einer Zusammenfassung des Inhalts gestaltet. Der hohe Kontrast durch die Einfärbung lässt diese Beschaffenheit eines Elements leicht wiedererkennen, da sonst keine Farbe genutzt wird. Beispiele Sind die Projekt Karten im Fecher, die Approach Karte, sowie die Karte für den Erstkontakt per Mail.

• Sektionen und Seiten im Footer - Im Footerbereich sind die vorangegangenen Sektionen der Seite aufgeschlüsselt. Es bietet sich so unmittelbar am Ende der Seite an, auf eine vorangegangene Sektion oder vorherige Seite zurückzukommen.

Scanbares Layout

Um Informationen schnell zu finden, muss es besonders einfach sein diese durch Art und Zusammengehörigkeit voneinander unterscheiden zu können. Ein scanbares Layout hilft dabei diesen Zusammenhang herzustellen, indem visuell Bündel an Informationen geschürt werden. Diese Bündel entstehen durch folgende Gestaltungsentscheidungen:

• Viel Whitespace - Durch üppige Abstände zwischen einzelnen Elementen wird das Auseinanderhalten der einzelnen Informationen, welche diese beherbergen, grundsätzlich vereinfacht. Text Informationen werden durch vergleichsweise enge Abstände zueinander In Zusammenhang gestellt, wenn dieser besteht. Ansonsten besteht zwischen separaten Text Informationen wieder der üppige Whitespace.

• Hervorgehobener Text - Durch Kontraststarke Wörter und Begriffe in Fließtexten werden potentiell relevante Stichwörter leichter erfassbar. So lässt sich eine gezielte Information schneller innerhalb eines Meers aus Buchstaben finden, ohne auf ausführlichere Erläuterungen verzichten zu müssen.

• Dividers - An relevanten stellen dienen Haarlinien einer klaren Trennung von Elementen, Sektionen und Informationen. So können diese nah aneinander liegen, ohne eine Misinterpretation der Zugehörigkeit zu riskieren.

Unbestreitbare Hierarchie

Eigentlich als Teil eines scanbaren Layouts zu verstehen, ist es mir doch wichtig diese separat mit Beispielen aufzuführen, da sie eine besonders fundamentale Bedeutung für die hürdenfrei Informationsaufnahme bildet. Der Einfluss auf folgende Gestaltungsentscheidungen ist entsprechend dieser Bedeutung ebenfalls besonders hoch:

• Schriftgrößen - Da die meisten Informationen in Textform vorhanden sind, muss zwischen diesen in jedem Fall die Bedeutung verständlich sein. Desto bedeutender eine Text Information für die verbunden Inhalte ist, desto größer sollte diese sein. Es wird quasi durch die Größe ein Schirm gespannt, der entsprechend viel unter sich beherbergt.

• Kontrast & Farbe - Durch verschieden starke Kontraste wird zusätzlich dafür gesorgt die zuvor beschriebene Bedeutung für die verbundenen Inhalte verständlich wird. Desto Kontrastreicher ein Element ist, desto Bedeutender ist es. Es wird der Fokus zuerst auf die bedeutendsten Elemente gelenkt. Eine besondere Rolle spielt die Einfärbung von Elementen, da durch die seltene Nutzung von großflächiger Farbe ebenfalls ein besonderer Fokus entsteht (siehe: Einfache Navigation, Abschn.: Content Cards).

• Sektionsanordnung - Der visuelle Aufbau der Website folgt dem Inhaltlichen. So sind die Informationen, welche zunächst am relevantesten sind, zuerst dargestellt.

Direkte Typo

Meine Copyright Fähigkeiten sind in viele Weise sicherlich noch ausbaufähig. Nichtsdestotrotz habe ich mich bemüht möglichst konkrete Textinhalte zu verfassen, ohne aber alles vorweg zu nehmen. Je weniger Wörter die selbe Sache beschreiben, desto schneller kann die Information aufgenommen werden.

Projekte als Zentrum

Da die kurierten Projekte das aussagekräftigste über meine Arbeitsweise sind, war es mir besonders wichtig diese als Zentrum zu verankern. Im Prototypen sind momentan nur drei Projekte im Fecher. Fünf bis sechs Projekte haben sich im Research als am sinnvollsten herausgestellt, weshalb noch weitere ergänzt werden. 

Da alle Animationen, wie auch das „Durchstöbern“ des Fechers, auf die Scroll Distanz abgestimmt sind entfaltet sich dieser in zwei drittel der Geschwindigkeit. Das bedeutet man brauch länger zum durchscrollen der Projekte Sektion als beim Rest der Website. Die entstandene Reibung führt zu einem größeren Fokus auf die Projekte, als auf den Rest der Website.

Am Ende jeder Seite gibt es zudem einen CTA Button um zurück zu den Projekten zu gelangen.

Spaß im Detail

Es ist mir neben einer einfachen Informationsaufnahme wichtig gewesen, einen gewissen Charakter zu schaffen, der meine Portfolio Webiste nicht wie ein Notion Dokument wirken lässt, sondern zum erkunden und entdecken einlädt.

• Nav Dial - Auch wenn ich der Überzeugung bin, dass das Nav Dial definitiv keinen Usability Albtraum darstellt, wäre ein Klassisches Overlay Menu mit Burger Icon oder Ähnlichem wahrscheinlich leichter zu bedienen. Ich habe mich dennoch für die Idee mit der Drehscheibe entschieden, da es eine gewisse Experimentierfreude zeigt. Ich denke Interface Design darf sich auch etwas trauen, selbst wenn das bedeutet, dass man für Ästhetik und gegen Usability entscheidet (das sollte natürlich keine Norm sein und ist hier auch im Kontext eines Interfaces zur Selbstdarstellung zu verstehen).

• Zerklüfteter Text - Typografisches Layout is zugegeben nicht meine Stärke und vielleicht ist es mitunter auch deshalb zu dieser Gestaltungsentscheidung gekommen. Allerdings bietet die Zerklüftung auch einen visuellen Bruch, der genutzt werden kann um wiederum den Fokus zu lenken. Längerer Fließtext mit vielen Informationen zugleich ist jedoch ganz generisch linksbündig, um eine einwandfreie Lesbarkeit sicherzustellen.

• Animationen - Neben dem statischen Aufbau der Website habe ich mich ausgiebig mit der Bewegung einzelner Elemente beschäftigt. Hier sehe ich auch ein besonderes Potenzial um dem ganzen auftreten etwas mehr Leben zu geben. So sind die Animationen des Nav Dials und Projekte Fechers möglichst nah an echten physischen Objekten um ein positives Nutzungsgefühl zu schaffen - als wären diese echt. Und das Profilbild vergrößert sich in der relevanten Sektion, man lernt mich etwas näher kennen. Die Animation der Approach Sektion soll zudem eine kleine Geschichte erzählen. Vom linearem Gedanken eines Prozesses und der Aspekte, welche diesen bilden, hin zu einem holistischen mehrdimensionalem Zusammenhang, der je nach Kontext unterschiedlich ausgelegt werden muss (hierin sehe ich einer der bedeutendsten Aufgaben von Designer*innen - den Prozess auf die Erwartungen und Bedürfnisse aller Stakeholder unter den gegebenen Ressourcen auszubalancieren).

What I think of that

Rückblickend auf den Verlauf meines Projektes, ist mir allem voran der Zusammenhang zwischen dem was Stakeholder wollen und was sie brauchen bewusster geworden. Das Problem hierbei ist, dass nicht alles was ein Stakeholder will, zwangsläufig auch das ist was dieser braucht. So muss man als Designer mit einer Menge Empathie die Verantwortung übernehmen, diese Verbindung verständlich zu gestalten.

Warum brauche ich den Willen, was ich meine zu wollen zu brauchen.

Im Grunde dienen dabei die nötigen Aspekte, die Stakeholder brauchen, als zentrale Struktur um mit dem was diese wollen dienen zu können. Alles was nicht gebraucht wird um einen Willen zu erfüllen sollte wegfallen. Und alles was gewollt ist, aber nicht gebraucht sollte ebenfalls wegfallen.

Stakeholder wissen oftmals nicht, was sie brauchen, weshalb es schwieriger ist das zu vermitteln. Als Designer sehe ich mich nach diesem Projekt umso mehr wie eine Art Moderator, der Informationen welche von Stakeholdern kommuniziert werden in klare Gestaltungsentscheidungen übersetzt.

Im Falle meiner Portfolio Website sehe ich mich selber als einer der bedeutendsten Stakeholder, was dieses Projekt für mich auch so schwierig messbar gemacht hat und zugleich sehr langwierig. Ich denke der Grund dafür, dass viele Designer*innen das Thema Portfolio Website lange aufschieben oder gar nie angehen, liegt genau in diesem Punkt. 

Die nötige Selbstreflexion um sich klar nach außen zu präsentieren überwiegt bei weitem die eigentliche gestalterische Arbeit. Sich selber den eigenen Werten, Ansichten und Ansätzen bewusst zu werden und zu hinterfragen ist nicht einfach. Warum bin ich Designer?? Warum gestalte ich in der Art und weise wie ich es tue??

Da Selbstreflexion ein Prozess ohne Ende ist, müsste man theoretisch auch immer wieder die eigene Website anpassen, umdenken einreißen und neu bauen. Sich mit sich selber zufrieden zu geben ist für mich nicht einfach, da ich stetig nach Verbesserung strebe und möglichst perfekt arbeiten will. Doch brauche ich das wirklich?? Dieser Perfektionsgedanke kann auch zu einer Art Selbstzweifel führen, welchen ich jedoch vorerst überwinden konnte und zu dem Stand geführt hat, wie er nun in dieser Dokumentation festgehalten ist.

Spätestens wenn ich anfange die Designs in eine funktionable Website zu übertragen wird der Prozess des Überdenkens mit Sicherheit wieder losgetreten. Ich denke es wird noch einiges an Zeit kosten, bis mein Portfolio so steht wie ich es mir wirklich vorstelle - und ich mir selbst so bewusst bin, dass ich mich wirklich vorstellen kann. Wobei ich mich darauf freue weiter zu erforschen, welche meiner Überzeugungen mir selbst klar sind und welche noch zu hinterfragen sind. 

Aussicht

In Zukunft werde ich das Projekt soweit vorantreiben, dass es meinem ursprünglichen Bedürfnis sich nach außen besser kommunizieren zu können gerecht wird. Das bedeutet wie schon erwähnt die weitere Umsetzung der Designs in eine fertig geschriebene Website. Hierfür freunde ich mich grade wieder mit Webflow an, einem non-Code Web Development tool, welches vollen Einfluss auf den code bietet und wie Figma mit einem visuellen Canvas aufgebaut ist.

Der weitere Prozess meiner Portfolio Website wird separat weiter in diesem Incom Projekt dokumentiert.

What You think of that

Ich würde mich riesig über Feedback zum Kursprojekt Portfolio Website freuen. Was sollte verbessert werden und warum?? 

Ich bin gespannt auf dein Kommentar!