Blog
Bloghead

In Revolver 9 kommen brandneue Piktogramme zum Einsatz. Als wichtiger Bestandteil der Revolver-UX profitieren Design und Usability von den neuen Icons. Mit folgendem Blog-Beitrag gewähren wir Ihnen einen Einblick in Konzeption, Gestaltung und Produktion der neuen Navigations-Elemente.

 

MOBIL, INFORMATIV UND SCHÖN

Mit diesen drei Schlagworten haben wir die neuen Icon-Aufgaben definiert. In Revolver 8 dienten sie hauptsächlich der Illustration einzelner Menüpunkte und Funktionen. Mit Revolver 9 wachsen nun die Herausforderungen.

Alte Icons vs. neue Icons

 

Durch den potenziellen Einsatz auf mobilen Endgeräten müssen die Bedienelemente mit deutlich weniger Platz auskommen. So entfällt z. B. bei einigen Icons platzbedingt die Beschriftung. Dennoch muss der Benutzer nach kurzer Einarbeitungszeit erkennen können, welche Funktion sich hinter dem Symbol verbirgt.

Funktions-Icons gehen aufgrund der digitalen Erfahrung der Benutzer mit anderen Apps und Programmen leichter von der Hand. So muss das Rad bei der Gestaltung von z. B. Menü-, Einstellungs- oder Neues Dokument-Icons nicht neu erfunden werden. Dagegen stellen die Listen-Icons der Navigations-Leiste einen informativen Drahtseilakt zwischen Abstraktion und Wiedererkennung dar. 

Listen- vs. Funktions-Icons

 

Als Herzensangelegenheit kann der letzte Punkt auf der Konzeptions-Liste bezeichnet werden. Da die Icons eine tragende Design-Säule der neuen Benutzer-Oberfläche darstellen, müssen sie natürlich revolvereigene Ansprüche erfüllen. Kurz: zeitlos und schön müssen sie sein.

 

ÄHNLICH UND DOCH ANDERS

Konsistenz – also die Einhaltung vordefinierter Gestaltungs-Formate – ist bei der Umsetzung der Icons ein wichtiges Werkzeug. Jede Symbol-Idee wird somit einheitlich in das selbe Farb-, Form- und Größenschema übertragen. Damit entsteht ein Design-Konzept, das einen großen Teil der Unternehmens-Identität ausmacht.

Konsistente Gestaltung in Illustrator

 

Dabei übernehmen Raster eine wichtige Rolle. Mit entsprechenden Gestaltungsvorgaben lassen sich einheitlich aussehende Grafiken erstellen, die beim Betrachter ein Gefühl von Geschlossenheit hinterlassen. Ein ausdrucksstarkes Corporate Design darf natürlich auch immer in das Gestaltungs-Raster für Icons einfließen.

Identische Formate an unterschiedlichen Icons

 

Doch ist nicht nur das Gestaltungs-Raster wichtig, um eine Verwandschaft zu symbolisieren. Auch ein geometrisches Raster vereinfacht die Arbeit bei der Icons-Erstellung. Hierüber lassen sich wunderbar Proportionen, Winkel und Radien übertragen. Die so gestalteten Icons sind nicht nur farblich sondern auch geometrisch konsistent.

Gestaltungsraster von Otl Aicher für die Olympiade 1972 in München

Die Abb. links zeigt ein prominentes Gestaltungs-Raster
von Otl Aicher für die Piktogramme der Olympiade
1972 in München.
(Quelle: http://www.baulinks.de/webplugin/2010/1171.php4
Zugriff vom 09.03.2014)

Bei aller gestalterischen Nähe ist es wichtig, dass sich die Icons eindeutig voneinander unterscheiden lassen. Fehlinterpretationen bei Programm-Icons innerhalb einer Anwendung führen schnell zur Frustration beim Nutzer. Icons sollten also immer auch eine eindeutige Sprache sprechen.

Gestalterische Nähe trotz eindeutiger semantischer Unterschiede

 

EINE KLEINE ICON-DOKU

Die Umsetzung der neuen Icons für Revolver erfolgt in Adobe Illustrator. Zunächst haben wir Zeichen-, Farb- und Vektoren-Formate definiert. Per Mausklick können wir so sehr einfach die entsprechenden Formate auf die einzelnen Icons übertragen.

Vordefinierte Gestaltungs-Formate in Illustrator

 

Im nächsten Schritt haben wir ein Grundlinien-Raster angelegt. Jedes Icon erhält in diesem Raster eine vordefinierte Fläche. Diese Fläche wird als Vielfaches der späteren Ausgabe-Größen angelegt. Damit können wir die Skalierbarkeit und die pixelgenaue Ausrichtung auf den Ausgabe-Geräten gewährleisten.

Anlegen eines Gestaltungs-Rasters in Adobe Illustrator

 

Anschließend definierten wir Winkel, Objekt- und Vektor-Radien. Durch das Duplizieren einzelner Pfad-Segmente können einfache geometrische Formen auf neue Icons übertragen werden. Mit den duplizierten geometrischen Formen können wir eine einheitliche Gestaltung gewährleisten.

Übertragen von Radien und Strich-Stärken

 

Wir haben uns für SVG als Export-Format entschieden, da das skalierbare Vektorformat vielfältig weiterverwendet werden kann. Wieso die Entscheidung auf dieses Export-Format gefallen ist, lesen Sie in unserem nächsten Blog-Beitrag.

 

LINKS ZUM THEMA ICON-GESTALTUNG

→ creativebloq.com zum Thema Icons
→ typografie.de Buchtipp vom Verlag Hermann Schmidt Mainz
 

Viele Grüße aus Aachen

Ihr Revolver-Team

Erstellt 11, Mär 2014 in Revolver 9 von bjoern.weiler

Mit den nächsten Beiträgen möchten wir konzeptionelle Gedanken mit Ihnen teilen und technische sowie gestalterische Entscheidungen begründen. Als Teil der Revolver-UX (→ User Experience) werden wir in den kommenden Wochen über verschiedene Themen rund um die neue Revolver-Version berichten.

 

Versionen im Vergleich: Revolver 8 vs. Revolver 9

Schon der Login-Screen verrät einige Ansätze des neuen Design-Konzepts von Revolver 9. Der HTML-Client wird nach der Eingabe der Server-URL im Browserfenster aufgerufen. Hier gibt der Nutzer seine Login-Daten ein.

Login-Screens Revolver 8 vs. Revolver 9

Während bei Revolver 8 Rahmen, Schatten und Verläufe eine „haptische“ Wirkung beim Nutzer hervorrufen, kommt bei Revolver 9 eine flache, reduziertere Gestaltung zum Einsatz. Damit steht der Dialog im Vordergrund und das Design tritt dezent in den Hintergrund. Im Detail bedeutet das zum Beispiel, dass Icons einen höheren Stellenwert erhalten und auf den Einsatz von 3D-Effekten verzichtet wird.

Login-Dialoge im Vergleich: Revolver 8 vs. Revolver 9

 

50 % mehr Platz für Ihre Inhalte

Mit Revolver 9 stehen Ihre Daten mehr denn je im Vordergrund. Die Oberfläche wirkt im Ergebnis wesentlich schlanker und übersichtlicher.

Revolver 8 im direkten Vergleich mit Revolver 9

Die neue Benutzeroberfläche nutzt durch eine neue Aufteilung von Inhalten und Navigations-Elementen den Platz im Fenster ideal. Während der Inhaltsbereich bei Revolver 8 bei einer Standard-Auflösung (1024 x 768) ungefähr 728 x 560 Pixel groß ist, bietet Revolver 9 ungefähr 900 x 676 Pixel zur Darstellung Ihrer Daten. Das ist ein Zuwachs von 50%.

50% effektiv mehr Platz für Ihre Inhalte in Revolver 9

 

Der Aufbau der Oberfläche

Die Navigations-Elemente und Funktions-Leisten sind bei Revolver 8 um das ganze Fenster verteilt. Dem neuen Konzept folgend, konzentrieren sich die Funktions-Leisten von Revolver 9 auf der linken und der oberen Fenster-Seite. So folgt die Navigation von links nach rechts in Richtung der Bildschirm-Mitte. Das kommt unserem natürlichen Lesefluss entgegen und wirkt im Vergleich zu Revolver 8 auch gestalterisch wesentlich ruhiger.

Navigations-Elemente werden verschoben

  1. Die Listenfunktionen und Einstellungen werden in den Inhalts-Bereich verlegt. Dadurch ergeben sich wesentlich kürzere Mauswege.
  2. Globale Programmfunktionen werden an den rechten Bildschirm-Rand verschoben. Dies Betrifft die Volltext-Suche, den Verlauf, die Stoppuhr und das Benutzer-Konto.

Daraus ergibt sich die neue Oberfläche von Revolver 9. Im direkten Vergleich mit Revolver 8 erkennt man, welche Funktionen nun einen neuen Platz bekommen haben.

Revolver 8 Aufbau der Benutzeroberfläche

 

Revolver 9 Aufbau der Benutzeroberfläche

 

 

70% kürzere Mauswege

Das weiterentwickelte Navigations-Konzept verkürzt die Mauswege drastisch. Folgt der Cursor bei der Arbeit mit Revolver 8 einmal über das gesamte Fenster, bleiben die Wege bei Revolver 9 kürzer.  

Kürzere Mauswege verbessern die Effizienz

Die neue Gestaltung, der neue Aufbau und das weiterentwickelte Benutzer-Konzept führen mit mehr Usability zu einer verbesserten User-Exprience im täglichen Umgang mit Revolver. Mehr zur Benutzer-Freundlichkeit, dem veränderten Design-Konzept und technischen Details lesen Sie hier in den kommenden Tagen.

 

Weiterführende Links zum Thema User Experience

→ uxdesign.smashingmagazine.com
→ uxmag.com
→ uxbooth.com

Erstellt 20, Feb 2014 in Revolver 9 von bjoern.weiler
...