RESPONSIVE UI
Das Konzept besteht darin, die Größendarstellung von Inhaltselementen, wie Texte, Bilder und Spalten, die Grid-Struktur und die Navigationselemente entsprechend der Bildschirmgröße des Endgeräts dynamisch im Browser anzupassen. Der Nutzer möchte seine Ziele so schnell wie möglich erreichen, am Desktop, wie auch auf mobilen Endgeräten. Um diese Erwartung zu erfüllen, gestallten wir eine responsive Benutzeroberfläche, die sich der Bildschirmgröße anpasst und Benutzerfreundlichkeit bietet.
Layout
Um eine einheitliche Designlösung und konsistente Kommunikation zu gewährleisten, verfügen wir über einen Layout System, das die User unterstützt. Je nach Projekt wird entschieden, ob das Layout responsiv oder adaptiv gestaltet wird.
Gestaltungsraster
Grid Systeme schaffen eine Struktur für das Design, organisieren Informationen und helfen eine konsistente Benutzererfahrung zu gewährleisten. Unser Rastersystem soll sich an die Bildschirmgröße anpassen. Auf der Darstellung befindet sich ein Beispielraster, das wir für unsere Homepage benutzt haben.
Ergonomie
Für eine optimale Mensch-Maschine Schnittstelle folgen wir den Gesetzen, die die Software Ergonomie optimieren. Eine leichte Verständlichkeit und schnelle Benutzbarkeit sind das A und O.
Beispiel
Ein durchschnittlicher Finger hat einen Durchmesser von 11mm. Im Gegensatz zum Maus-Cursor, oder einem Stift, ist der Druck des Fingers weniger präzise.
Um die Interaktion ergonomisch zu gestalten, müssen die Buttons für mobile Anwendungen einen mindest Durchmesser von 44pt x 44pt (nach Apple) oder 9mm x 34pt (nach Windows). Die Abstände zwischen Buttons sollten mindestens 2mm x 8px (nach Windows), so dass man sich nicht vertippen kann.
Hierarchie
Visuelle Hierarchie ist die Reihenfolge, in der ein User Informationen nach Wichtigkeit verarbeitet. Bei korrekter Verwendung der Hierarchie kann der Verstand Elemente gruppieren und priorisieren, um ihnen eine bestimmte Reihenfolge zu geben. Dies erleichtert dem Benutzer das Verständnis dessen, was wir kommunizieren möchten, und liefert ein besseres Erfolgserlebnis.
Je größer das Element ist, desto mehr Aufmerksamkeit wird es erregen. Beim Interface-Design ist häufig die stärkste Farbe für die Interaktion vorgesehen, da der Benutzer Maßnahmen ergreifen oder Feedback vom System erhalten muss. Gedämpfte Töne fallen weniger auf. Nahe beieinander liegende Elemente ziehen mehr Aufmerksamkeit auf sich, als entfernte Elemente. Wiederholte Stile erwecken den Eindruck, dass die Elemente zusammenhängen.
Content und Flexibilität
Videos und Bilder werden für die Viewport Größe angepasst. Hier muss beachtet werden, dass die Größe problemlos verändert werden kann und genug Fläche zum Zuschneiden eingeplant wird.
Geräteunabhängigkeit
Neue Anwendungen gestalten wir so, dass die Nutzer es mit Maus, Tastatur oder Touch bedienen können. Alle UI Elemente müssen beispielsweise für eine Touchbedienung optimiert werden, egal, um welche Auflösung es sich handelt.
