Wikipedia ist eine der meist genutzten Websites weltweit. Mit einem Redesign wurden Probleme in Bereichen wie Konsistenz, Mapping und Navigation analysiert und gelöst. Mit dem Einsatz von Methoden der Interaktionsgestaltung wurde ein konzeptionell und gestalterisch qualitativer Prototyp entwickelt.
In dem Redesign geht es darum, den Nutzer zu definieren und auf die Nutzerbedürfnisse einzugehen. Der Kontext und der Wettbewerb werden analysiert und die Informationsstruktur neu organisiert. Damit wird ein stimmiges und funktionsorientiertes Interaction- und Visual- Design entwickelt.
Der Fokus liegt auf der Vermittlung von grundlegenden, nutzerzentrierten Methoden der Analyse, der iterativen Produktentwicklung, der Prototypisierung und der Gestaltung im mobilen Nutzungskontext. Hierbei werden Prinzipien aus dem User Research, der Entwurfsmethodik, sowie der Prototypisierung in einem konkreten Beispiel angewendet.
Das Ziel, dass wir hier vor Augen hatten, war es, dem User ein informatives, strukturiertes Weberlebnis zu bieten und ihn dazu anzuregen, ein aktiver Nutzer mit einem eigenen Nutzerkonto zu werden.
Design
Iconography
Usability
Redesign
Design System
Website Design
UX / UI
Interaction Design
Usability
Redesign
Design System
Website Design
UX / UI
Interaction Design
Tools
Figma
Adobe Illustrator
Team
Jannis Braun
Daniel Fleer
Anna-Lena Böttcher
Anna-Lena Böttcher
PROBLEM
Auf der bisherigen Website von Wikipedia finden sich zahlreiche Inkonsistenzen und Anwendungsbereiche, die für den inaktiven Nutzer irrelevant und verwirrend sind. Es gibt mehrere unterschiedliche Suchleisten, sowie zwei verschiedene Startseiten und unzählige Hyperlinks, die den Betrachter überfordern. Zudem ist die Navigation unübersichtlich und der Text in den Artikeln läuft zu breit, als dass es für das Auge angenehm wäre. Aufgrund dieser Makel einer so oft besuchten Seite, sahen wir hier das perfekte Projekt für ein Redesign. In der Startseite, der Anmeldeseite und der Artikelseite sahen wir das größte Potential zu einer positiven Veränderung, daher gestalteten wir diese Bereiche neu.
SKIZZEN
Sowohl unsere Handskizzen, als auch die digitalen Entwürfe zeigten, dass es viele verschiedene Möglichkeiten der Umsetzung gibt. Wir entschieden uns schließlich für ein Design mit zwölfspaltigem Raster und einem Bild zum Thema, als Einführung in den Artikel. Auch ein Inhaltsverzeichnis, das stets zugänglich ist, sollte unsere Artikelseite prägen, da uns dies bei der aktuellen Website fehlte.
LOGO
Für das Logo wurden zwei verschiedene Grafiken gewählt: Zum einen, die ursprüngliche Bildmarke, die auf der Start- und der Anmeldeseite zu sehen ist, zum anderen ein neues Logo, in Form der Initiale von Wikipedia. Die Entscheidung für zwei verschiedene Logos trafen wir, da die Bildmarke für die Startseite und die Artikelseiten mit ihrem illustrativen und detailreichen Stil sehr passend ist, sie im Artikel selbst jedoch störte und zu sehr ablenkte. So knüpften wir eine Verbindung zwischen der aktuellen Seite, die der User dank des Logos auf der Startseite gleich als solche erkennt, und dem Redesign.
DETAILS
Die Suchleisten bestehen aus einem blauen, prägnanten Strich-Element, das sich durch unser Redesign zieht und einer Grundlinie mit Text, der den User dazu auffordert, das Feld auszufüllen. Bei der Artikelsuche auf der Start- und der Artikelseite, befindet sich rechts auf der Grundlinie noch ein Ikon in Form einer Lupe, welches die Suchfelder als solche kennzeichnet.
Bei der Auswahl findet sich ebenfalls das blaue Strich-Element wieder. Bei den zwei Auswahloptionen "neues Konto" und "Passwort vergessen?", die auf der Anmeldeseite erscheinen, haben wir bewusst auf das Unterstreichen verzichtet, damit diese Elemente nicht in Konkurrenz zur Suchleiste stehen.
Das Design ist sehr clean gehalten, da es sich bei Wikipedia um eine Enzyklopädie handelt, in der die Wissensvermittlung im Vordergrund stehen sollte.
Die Navbar bleibt beim Scrollen am oberen Bildschirmrand stets für den Nutzer zugänglich.
Die Navbar bleibt beim Scrollen am oberen Bildschirmrand stets für den Nutzer zugänglich.
Der Text bleibt einspaltig, allerdings läuft er wesentlich schmaler und die Kapitel sind durch dünne Outlines optisch voneinander getrennt. Am Anfang eines Artikels befindet sich ein kurzer Steckbrief zur groben Übersicht. Die Literatur, Weblinks und Einzelnachweise sind je nach Bedarf des Users ein- und ausklappbar. Am Ende jedes Artikels werden verwandte Artikel vorgeschlagen und mit einem Thumbnail, sowie einer kurzen Definition angekündigt. Dies soll den User möglichst lange auf der Website halten.
WEBSITE