Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Internetwache Polizei Berlin - Case Study & Redesign

Internetwache Polizei Berlin - Case Study & Redesign

Online Anzeige erstatten - diese Möglichkeit gibt es schon seit vielen Jahren. Leider ist das Design von internetwache-polizei-berlin.de auch entsprechend veraltet. Mit einem Fokus auf verbessertem visuellen Design und mehr Usernähe bin ich diese Case Study & Redesign angegangen.

Heuristische Analyse nach Jakob Nielsen

Vor dem Redesign habe ich mich ausgiebig mit dem bestehenden Produkt auseinandergesetzt, Fehler identifiziert und so die Prioritäten für eine verbesserte Lösung herausgearbeitet. Hilfreich dabei war Jakob Nielsen's zehn „Usability Heuristics for User Interface Design“.

Hier ein paar Beispiele, in denen die bestehende Webseite zu kurz kommt:

Visibility of system status.pngVisibility of system status.png

Match between System and the Real World.pngMatch between System and the Real World.png

User Control and Freedom + Flexibility and Efficiency of Use.pngUser Control and Freedom + Flexibility and Efficiency of Use.png

Consistency & Standards.pngConsistency & Standards.png

Error Prevention.pngError Prevention.png

Aesthetic and Minimalist Design.pngAesthetic and Minimalist Design.png

Recognize, Diagnose, and Recover from Errors + Help and documentation.pngRecognize, Diagnose, and Recover from Errors + Help and documentation.png

Fazit aus der Case Study & Opportunity Areas

Fokus des Redesigns.pngFokus des Redesigns.png

Neben seiner offensichtlich veralteten Ästethik hat das Original-Design auch Probleme in der Navigierbarkeit und visuellen Hierarchie. Diese fehlende Usernähe zeigt sich auch in einigen sprachlichen Formulierungen.

Folgend einige Bespiele, wie mein verbessertes Design diese Probleme angeht:

Die Hinweis-Spalte.pngDie Hinweis-Spalte.png

Usernähere Sprache & Logik.pngUsernähere Sprache & Logik.png

Hervorhebung von _Anzeige, Versammlung & Hinweis_ in Hauptmenü.pngHervorhebung von _Anzeige, Versammlung & Hinweis_ in Hauptmenü.png

Auffangen von User-Fehlern.pngAuffangen von User-Fehlern.png

Anonymität bei Hinweisgabe.pngAnonymität bei Hinweisgabe.png

Navbar.pngNavbar.png

Weniger Schritte für selbe Anzeige.pngWeniger Schritte für selbe Anzeige.png

Design-System Showcase.pngDesign-System Showcase.png

Ein konsistenteres Design-System

Grundlage für die verbesserte visuelle Hierarchie und Navigierbarkeit ist auch das Design-System. Größere Kontraste bei Schriftgrößen, klare Nutzung der Primärfarbe als Interaktionsfarbe und konsequent verwendete Buttons etc waren bereits früh im Designprozess festgeleft. So konnte ich mich auf die strukturellen Probleme konzentrieren und mich nicht in den Details verlieren.

Frame 35.pngFrame 35.png

Fazit

Dieser Kurs hat sich für mich durch seine Bodenständigkeit ausgezeichnet. Statt mit für Technologien zu designen oder neue Probleme zu lösen, wird hier ein existierendes und funktionierendes Produkt genau untersucht, kritisiert und verbessert. Besonders das Identifizieren von Schwachstellen anhand erprobter Prinzipien (z.B. heuristische Analyse) ist eine sinnvolle Fähigkeit. Vor allem im Gespräch mit Kunden und Stakeholdern.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Sebastian Kaim

Zugehöriger Workspace

System:Relevanz — Mit besseren Interfaces mehr erreichen

Entstehungszeitraum

Wintersemester 2021 / 2022