Die Informationen allein reichen nicht, sie müssen auch ansprechend verpackt werden

Design ist nicht nur eine Geschmackssache, zum größten Teil gibt es Regeln und Prinzipien, an denen sich der Designer halten muss, um ein ansprechendes Interface zu gestalten.


Um Informationen besser aufnehmen zu können, benötigen wir ein einheitliches und unterstützendes Design. Anhand des „Model Human Processor“ (Vereinfacht: Informationen empfangen, verarbeiten und auf Informationen zu reagieren) kann man erklären, wie Zusammenhänge von Informationen verarbeitet werden und wie sich das Fehlen dieser Zusammenhänge auswirkt. In der Gestaltpsychologie wirkt sich ein fehlen der Informationen sehr schnell aus, gute Beispiele sind dafür optische Täuschungen, der Gestalter sollte darauf achten, dass er auf optische Täuschen verzichtet, dass der Benutzer keine Fehlinformationen wahrnimmt.


Die Gestaltgesetzte wurden nie wirklich niedergeschrieben, jedoch anhand vielen Beispielen und Quellen festgehalten, sie funktionieren bei jedem Menschen gleich und sind daher ein absolutes must-have für den Gestalter. Die Prinzipien fördern die Einfachheit und Eindeutigkeit in der Benutzung und betreffen das Design und die usabilty.


Es gilt also Grundsätzlich:

  • - Werden diese Gesetze eingehalten, erhält man einen Mehrwert an Erkennbarkeit für die Vereinfachung eines Interfaces
  • - Eine Anwendung, Webseite, Applikation etc. wird somit als „ruhiger“ wahrgenommen
  • - Gestaltet man sein User Interface danach, minimiert es die Komplexität und erhöht die Einfachheit der Bedienung und damit die Zufriedenheit der Anwender

1. Es gibt sehr viele Gestaltungsgesetze, jedoch die wichtigsten mit Beispiele:

Gesetz der Nähe:

Links sieht der Benutzer nicht, wo er den Fehler gemacht hat. Rechts wird dem Anwender sofort aufgezeigt, wo der Fehler liegt, sodass er Diesen Fehler schnellmöglich beheben kann.

Gesetz der Ähnlichkeit:

Bei einem Terminkalender wird oftmals die gleichen Farben verwendet für gleiche Themen, so sieht der Benutzer genau, was zusammengehört und er hat ein fortlaufendes System. Farben werden unter Anderem viel schneller im Hinterkopf wahrgenommen.

Quelle: Apliki – psychologische IT -Beratung


Links sieht der Benutzer nicht eindeutig, dass er bereits in der Rubrik Versand ist, da sich die Optionen sehr ähneln. Rechts ist es eindeutig und der Anwender kann schnell mit seiner Tätigkeit fortführen.

Quelle: Apliki – psychologische IT -Beratung


Gesetz der Erfahrung:

Dieses Gesetz wird am häufigsten unbewusst verwendet, sobald man einen Button designt, vertraut man darauf, dass der Benutzer weiß, aus der echten physikalischen Welt, dass er diesen Button klicken / drücken muss. Der Anwender nimmt viel mehr Icons wahr, denn diese erleichtern ihm die Anwendung, daher sollten wir durch die Erfahrung mehr Icons verwenden. Beispiel: Gabel & Messer – Icon wird als Essen assoziiert.


Gesetz der Ordnung:

Die Spaltenaufteilung wirkt um einiges übersichtlicher und geordneter (rechts).

Quelle: Apliki – psychologische IT -Beratung


Prinzip der guten Gestalt:

Bildliche Darstellung werden schneller wahrgenommen, der Benutzer bekommt ein visuelles Feedback und weis schneller was zu tun ist.

Quelle: Apliki – psychologische IT -Beratung


All diese Gestaltungsprinzipien sind wichtig, dass der Benutzer eindeutig und schnell versteht was zu tun ist.

2. Die Grundregeln der UI Gestaltung darf man aber auch nicht außer Acht lassen, speziell im Interface Bereich:

Affordance:

  • - Es bedeutet, dass ein Objekt des Alltags uns bestimmte Aktionen mit ihm ermöglicht bzw. uns dazu einlädt.
  • - Beispiel: Ein runder Knopf hat die Affordance, gedreht oder gedrückt zu werden
  • - Die grafische Benutzerschnittstelle muss immer visuell klar erkennen lassen, welche Operationen möglich sind.

Constraints:

  • - Bei Constraint gibt es zwei verschiedene Arten:
    • o Physikalisches Constraint (z.B. ein Wasserhahn kann nicht nach unten gedrückt werden)
    • o Kulturelles Constraint (z.B. links steht für warmes Wasser und rechts für kaltes)
  • - Constraint kommt auch bei Farben vor: rot steht für stopp oder Warnung, grün steht für go oder in Ordnung

Mappings:

  • - Ist die Zuordnung von Bedienelementen zu Objekten der physikalischen Welt. Einfachste Form ist das direkte räumliche Mapping (Gesetz der Nähe)
  • - Es ist darauf zu achten, dass die Elemente in der richtigen Reihenfolge geordnet werden

Konsistenz:

  • - Vorhersagbarkeit ist ein psychologisches Grundbedürfnis des Menschen.
  • - Man unterscheidet zwischen drei verschiedenen Konsistenzen:
    • o Syntaktische Konsistenz: Ein Button mit gleicher Funktion soll immer an der gleichen Stelle sein z.B. der back Button
    • o Semantische Konsistenz: Ein bestimmtes Kontrollelement, in verschiedenen Kontexten, soll immer die gleiche Funktion, also Bedeutung oder Semantik besitzen z.B. der back Button, dass er immer einen Arbeitsschritt zurückgeht
    • o Terminologische Konsistenz: gleiche Funktionen werden immer mit dem gleichen Begriff benannt z.B. die Operation „Einfügen“ heißt überall gleich und nicht „Einsetzen“

Feedback:

  • - Eine Form von Rückmeldung, dass eine Aktion ausgeführt wurde.
  • - Feedback kann visuell, aber auch akustisch oder haptisch sein.
  • - Der User muss verstehen, was das System gerade tut bzw. in welchem Zustand es sich befindet.

Physikanalogie:

  • - Ist, wenn der Benutzer Teile seines mentalen Modells von der physikalischen Welt auf die digitale Welt übertragen kann.
  • - Somit wird das intuitive Verständnis unterstützt.

Metaphern:

  • - Die Verwendung einer Metapher bedeutet, dass wir Teile eines zugehörigen mentalen Modells von einem Bereich in den anderen übertragen können.
  • - Bsp.: Druckersymbol, Papierkorb für Löschfunktion, Werkzeuge wie Pinsel, Stifte, Radierer, ...

3. Farben:

Grundsätzlich gilt, der Designer hält sich an den Styleguide des jeweiligen Unternehmens, jedoch sollte man auch da auf viele Dinge achten.

Simultankontrast:

  • Eine Farbempfindung des Betrachters, welche nicht real vorhanden ist
  • - Beschreibt die Wechselwirkung von nebeneinanderliegenden Farbflächen
  • - Kann zu Verwirrungen führen
  • - Beim Simultankontrast handelt es sich um einen rein physiologischen Korrekturvorgang des Sehorgans, also um einen biologischen, physiologischen Aspekt
  • - Das dunklere Rot in den Quadraten wird als unterschiedliche Farbe wahrgenommen, obwohl die Farben genau identisch sind

Quelle: © Isabel Meirelles

Komplementärkontrast:

  • - Steigern sich gegenseitig zu höchster Leuchtkraft, Licht- und Farbwirkung
  • Rufen den Eindruck von Bewegung, Lebhaften, aber auch von Vollständigen und Abgeschlossenem vor
  • Man sollte jedoch wirklich sparsam damit umgehen, dem Benutzer kann z.B. die Webpage als unruhig erscheinen und unübersichtlich

Quantitätskontrast:

  • - Wird gerne und häufig auf Webpages verwendet
  • - Eignet sich sehr gut für Information und Funktionssoftware / generell im UX-Design
  • - Ungleichheit an Farbmengenverteilung
  • Auf diesem Beispiel zu sehen: Viel mehr Blau als Orange, Orange sticht eindeutig hervor

Quelle: http://www.nachdemfilm.de/revies/index.html





Bunt Unbunt Kontrast:

  • - Kontrast durch die Kombination von satten, bunten mit entfärbten, unbunten Farbtönen
  • - Der Bunt-Unbunt Kontrast ist sehr geeignet für die Gestaltung von Screen und Interfacedesign

Hell Dunkel Kontrast:

  • - Bewegungsabläufe, Richtungen werden betont durch Farbabstufungen ins Helle oder Dunkle
  • - Räumlichkeit, durch Licht und Schatten sowie der Aufhellung oder Abdunkelung im Hintergrund
  • - Wird gerne bei 3Dimensionalen Effekten verwendet, der Benutzer empfindet eine physikalische Ebene damit

Quelle: T-Mobile










Kalt Warm Kontrast:

  • - Wird subjektiv / emotional wahrgenommen
  • - In der Regel wird Blaugrün als die kälteste und Rotorange als die wärmste Farbe empfunden
  • - Mit diesen Farben lässt sich sehr gut spielen, der Benutzer nimmt es unterbewusst wahr

Quelle: www.metadesign.de/html/de/81.html





Qualitätskontrast:

  • - Unter Farbqualität versteht man den Reinheits- oder Sättigungsgrad von Farben
  • - Werden reine, gesättigte gegen getrübte Farben gestellt sieht man einen Qualitätskontrast
  • - Der Qualitätskontrast sollte sehr sparsam verwendet werden, er kann oftmals als übertrieben rüberkommen

Quelle: http://www.nanoreisen.de/english/



Kulturelle Unterschiede

  • Bedeutung in Deutschland: Sicherheit, Natur, Hoffnung, Lebenskraft, frisch, satt, herb, unreif, beruhigend
  • - Bedeutung in Japan: Modernität
  • - Bedeutung in Indien: Wohlstand
  • - Bedeutung in Pakistan: Glück

 

 

 

 

Regeln und Empfehlung zum Gebrauch von Farbe für Screen- und Interface:

  • - Farben sparsam einsetzen. Buntheit könnte die Farbwahl beliebig erscheinen lassen. Mit 2 Grundfarben lässt sich ein Interface ausreichend darstellen.
  • - Harmonie zwischen Farben – Maximal 4 Grundfarben
  • - Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben
  • - Kontrastreiche Farben > konturenscharfe Darstellung > gute Lesbarkeit Aber: Je farbiger ein Text umso unleserlicher
  • - Rot und Grün sollte nicht parallel verwendet werden wegen Rot-Grün Schwäche
  • - RGB- Farben nicht gemeinsam verwenden, da farbliches „Flimmern“ entsteht (Wellenlängen liegen zu nah beieinander)
  • - Farbe hat eine Aussage (Emotion)  unterstützt die Funktion eines Produkts
  • - Zur Orientierung kann einer Farbe eine bestimmte Funktion zugewiesen werden (rotes X)
  • - Durch Farbe kann fokussierend, differenzierend und verbindend visualisiert werden

4. Die Typografie

Es gibt 11 goldene Regeln für eine gute Typografie:

1. Weniger ist mehr

  • Gute Typografie zeichnet sich durch Sparsamkeit im Umgang mit Fonts aus. Verzichten sollte man auf zu viele unterschiedliche Fonts, die Faustregel heißt: Maximal 2-3 Fonts.

2. Laut ist out

  • Hervorhebungen im Text sollten deutlich, aber trotzdem dezent sein. Statt alles in VERSALIEN zu setzen oder zu unterstreichen, sollte man wichtige Passagen lieber kursiv oder fett hervorheben oder auch farbig hervor gehebt werden.

3. Linientreue ist in

  • Besonders, wenn man mit mehreren Spalten arbeiten möchte, sollte man darauf achten, dass der Text in allen Spalten registerhaltig läuft. „Am Grundlinienraster ausrichten“, erhöht die Lesbarkeit enorm und sorgt zudem für ein angenehmes Schriftbild.

4. Abstand halten

  • Für ein ausgeglichenes Schriftbild ist ein Ausgleich zwischen bestimmten Zeichenpaaren, das sogenannte Kerning, erforderlich. Ohne Kerning kommt es zu deutlicher Lückenbildung.




5. Durchschuss

  • In der Regel sollte bei Grundschriftgrößen ein bis drei Punkt Durchschuss gegeben werden. Faustregel: JE schmaler die Spalte, desto geringer der Durchschuss. (Druchschuss – Zeilenabstand)

6. Laufweite

  • Sehr kleine Schriftgrößen benötigen der besseren Lesbarkeit halber eine leichte Öffnung. Das Gleiche gilt für Negativsatz. Display-Schriftgrößen hingegen erscheinen leicht eingezogen oft besser. Bei großen Headlines ist über das normale Kerning hinaus oft ein manueller Ausgleich einzelner Zeichenpaare erforderlich. Das optische Kerning bietet sich hier an (Regel 4).

7. Sparsam Trennen

  • Drei bis vier Trennungen in Folge gelten, abhängig von der Spaltenbreite, als tolerabel. Zu vermeiden sind unpassende Trennungen (z.B. Urin-stinkt) oder falsche. Vermeiden sollte man Trennungen auch bei der vorletzten Zeile eines Absatzes.

8. -Strich oder – Strich

  • Der kurze Divis-Strich kommt hauptsächlich bei Trennungen zum Zug. Der länger Halbgeviert-Strich sollte für Satzeinschübe – so wie in diesem Beispiel – oder für die Kennzeichnung glatter Geldbeträge verwendet werden (7,–€).

9. Zahlenspiele

  • Telefonnummern werden, von rechts beginnend, in Zweiergruppen gegliedert, Kontonummern in Dreiergruppen. Bankleitzahlen werden ebenfalls in Dreiergruppen gegliedert – allerdings von links beginnend. Postleitzahlen werden nicht unterteilt.

10. Randausgleich

  • Bei Absätzen im Blocksatz enden Satzzeichen oft an der Rahmenkante. Die Trennzeichen, Bindestriche und Anführungszeichen sowie optisch ungünstige Buchstaben werden dadurch streng an der Rahmenkante ausgerichtet – was oftmals unschön wirkt. (Allgemein sollte man bei linksbündig bleiben.)

11. Zu guter Letzt

  • Man sollte immer im guten Deutsch schreiben und dadurch Anglizismen, Modewörter und verklausulierte Slogans vermeiden. Gute Typografie ist sinnlos ohne gute Rechtschreibung.

Das waren die wichtigsten Grundregeln bei der Gestaltung einer Webanwendung. Viel Erfolg dabei!  

Über aktuelle Trends und wichtige Themen finden Sie unter uxd.thi.de/blog viele Informationen.

Diese Ausarbeitung wurde erstellt von Shalin Wild (Praktikantin bei Toowoxx) falls Sie Anregungen oder Fragen haben können Sie mich gerne unter Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! kontaktieren.

 

Category
Beliebtesten Einträge:

Jetzt unverbindlich anfragen!