Webdesign und Usability
By Sarah Hueber
()
About this ebook
Was ist bei der Gestaltung zu beachten? Was ist Besuchern wichtig? Wie lesen sie? Was mögen sie? Worauf ist bei der Erstellung einer Navigation zu achten? Und wie lesen Computerprogramme – und nichts anderes sind Suchmaschinen – dann diese bunten Seiten? Welche einfachen Regeln gibt es, um von Suchmaschinen besser wahrgenommen zu werden?
Die erweiterte Neuauflage von 2015 enthält zusätzliche Kapitel (Responsive Design, Gestaltung für Tablets & Co.), neue Screenshots und ergänzende Informationen zu einigen Themen.
Inhaltsverzeichnis
1 Wie Menschen Websites lesen
1.1 Unser Gehirn
1.2 Wie visuelle Wahrnehmung funktioniert
1.3 Leseverhalten auf Papier und Bildschirm
1.4 Was Website-Besucher erwarten
2 Wie Maschinen Websites lesen
2.1 Trennung von Struktur, Inhalt und Design
Codestruktur möglichst einfach
Content Management System (CMS) versus statisches HTML
2.2 Reihenfolge und Gewichtung der Information
2.3 Besonders wichtig: die Startseite
Die Startseite MUSS gefunden werden!
3 Die Navigation – essentiell für Mensch und Maschine
3.1 Anforderungen an Navigation und Links
Hauptanforderungen an die Navigation
Die Navigation ist auch für Suchmaschinen wichtig
Benennung von Links
3.2 Position der Navigation
Links oder oben sind die besten Positionen
Kulturelle Unterschiede
Navigation links
Navigation oben
Und was ist mit rechts?
Navigation unten
Breadcrumbs
Versteckte Navigation
4 Web ist nicht Print
4.1 Funktionale Unterschiede
Umblättern
Platzangebot
Responsives Webdesign
Gestaltung für Tablets & Co.
4.2 Verständlich schreiben für das Web
4.3 Gestaltung für das Web
Mit Gestaltungsrastern arbeiten
Ein Bild sagt mehr als...
Wenn Bilder groß rauskommen
Ladezeiten
Bilder für Suchmaschinen zugänglich machen
Sorgen Sie für Lesbarkeit!
Typografie fürs Web
4.4 Farben und ihre Wirkung
Besonderheiten bei Bildschirmfarben
Emotionale Wirkung von Farben
Farben und Lesbarkeit
Lesetipps und nützliche Online-Tools
Auswahl an Quellen/Studien
Etwa 71.000 Zeichen, 40 Abbildungen.
Related to Webdesign und Usability
Related ebooks
Prinzipien des Softwaredesigns: Entwurfsstrategien für komplexe Systeme Rating: 0 out of 5 stars0 ratingsPHP 7 und MySQL: Ihr praktischer Einstieg in die Programmierung dynamischer Websites Rating: 0 out of 5 stars0 ratingsModerne Webentwicklung: Geräteunabhängige Entwicklung -- Techniken und Trends in HTML5, CSS3 und JavaScript Rating: 0 out of 5 stars0 ratingsMobile Web-Apps mit JavaScript: Leitfaden für die professionelle Entwicklung Rating: 0 out of 5 stars0 ratingsAgile Softwareentwicklung: Werte, Konzepte und Methoden Rating: 0 out of 5 stars0 ratingsUX Design - Definition und Grundlagen: Definition und Grundlagen Rating: 4 out of 5 stars4/5SEO mit Google Search Console: Webseiten mit kostenlosen Tools optimieren Rating: 0 out of 5 stars0 ratingsMaschinelles Lernen In Aktion: Einsteigerbuch Für Laien, Schritt-Für-Schritt Anleitung Für Anfänger Rating: 0 out of 5 stars0 ratingsWeniger schlecht Projekte managen: Ohne Krise zum Projekterfolg Rating: 0 out of 5 stars0 ratingsReact lernen und verstehen Rating: 0 out of 5 stars0 ratingsPraxiseinstieg Deep Learning: Mit Python, Caffe, TensorFlow und Spark eigene Deep-Learning-Anwendungen erstellen Rating: 0 out of 5 stars0 ratingsKommunikation im Projekt: Schnell, effektiv und ergebnisorientiert informieren Rating: 0 out of 5 stars0 ratingsProjektmanagement von Online-Projekten Rating: 0 out of 5 stars0 ratingsSingle-Page-Web-Apps: JavaScript im Einsatz: Webseiten erstellen mit AngularJS, Meteor und jQuery Mobile Rating: 0 out of 5 stars0 ratingsMachine Learning – kurz & gut: Eine Einführung mit Python, Pandas und Scikit-Learn Rating: 5 out of 5 stars5/5HTML5 & CSS3 (Prags) Rating: 0 out of 5 stars0 ratingsHTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript Rating: 0 out of 5 stars0 ratingsDer Anfänger Führer zum Grafikdesign: Alles was Sie wissen müssen, um mit dem Grafikdesign zu beginnen! Rating: 0 out of 5 stars0 ratingsProjektmanagement kurz & gut Rating: 0 out of 5 stars0 ratingsDie Praxis der Kreativität: Eine Ethnografie kreativer Arbeit Rating: 0 out of 5 stars0 ratingsLinux Befehlsreferenz: Schnelleinstieg in die Arbeit mit der Konsole, regulären Ausdrücken und Shellscripting Rating: 0 out of 5 stars0 ratingsProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Rating: 0 out of 5 stars0 ratingsBootstrap kurz & gut Rating: 0 out of 5 stars0 ratingsNeue Geschichten vom Scrum: Von Führung, Lernen und Selbstorganisation in fortschrittlichen Unternehmen Rating: 0 out of 5 stars0 ratingsWordPress - Elementor Rating: 0 out of 5 stars0 ratings
E-Commerce For You
Verdiene passives Einkommen mit Quora und hänge deinen Job an den Nagel Rating: 0 out of 5 stars0 ratingseCommerce Grundlagen: Der Leitfaden für den erfolgreichen Einstieg in den Online-Handel Rating: 0 out of 5 stars0 ratingsCopywriting: Überzeugende Worte, die verkaufen Rating: 0 out of 5 stars0 ratingsLinkedIn Marketing und Social Selling: B2B-Kunden- und Mitarbeiter gewinnen Rating: 0 out of 5 stars0 ratingsGoogle Platz 1: Lernen Sie von einem der führenden Suchmaschinenoptimierer Deutschlands Rating: 0 out of 5 stars0 ratingsManipulative Werbetexte: Ein praktischer Ratgeber zur Erkennung und Benennung von beeinflussenden Methoden Rating: 0 out of 5 stars0 ratingsBlockchain: Praktische Anwendungen, Praktisches Verständnis Rating: 0 out of 5 stars0 ratingsDas E-Commerce Buch: Marktanalysen - Geschäftsmodelle - Strategien Rating: 5 out of 5 stars5/5Digital Marketing Leitfaden: Strategien für Wachstum Rating: 5 out of 5 stars5/5Brand management in 4 schritten: Wie Sie das Marketing Ihrer Marke am besten steuern, ihr Potenzial und ihre Wirksamkeit verbessern Rating: 0 out of 5 stars0 ratingsEbay Powerseller: Der definitive Leitfaden zum Ebay Powerseller Rating: 0 out of 5 stars0 ratingsLena Nitros Affiliate Guide: Erfolgreich mit Lena Nitro Rating: 0 out of 5 stars0 ratingsPassives Einkommen Online Rating: 0 out of 5 stars0 ratingsGastronomie Marketing: 135 Marketing-Tipps die den Erfolg garantieren! Rating: 0 out of 5 stars0 ratingsDropshipping: Online-Business leicht gemacht Rating: 0 out of 5 stars0 ratingsDas kleine Hypnose Einmaleins - Alles was Sie schon immer über die Hypnose wissen wollten von Ewald Pipper vom Hypnoseinstitut Rating: 0 out of 5 stars0 ratingsDein Grundstein zum Affiliate Marketing Rating: 0 out of 5 stars0 ratingsGrundlagen des Online Marketing: Digital Marketing, SEO, Storytelling, Inbound-Marketing, Funnel Rating: 0 out of 5 stars0 ratings30 Minuten Online-Marketing Rating: 0 out of 5 stars0 ratingsRaus aus dem Stundenlohn: Nie wieder für andere arbeiten und Lebenszeit verkaufen Rating: 0 out of 5 stars0 ratingsAmazon FBA Meisterung: Online Trading Rating: 0 out of 5 stars0 ratingsPsychologie im Online-Marketing: Sozialwissenschaftliche Erkenntnisse und ihre Bedeutung für Marketing und Werbung im Web Rating: 0 out of 5 stars0 ratingsIdeen Für Passive Einkommen: Financial Investments Rating: 0 out of 5 stars0 ratingsBusiness-Englisch beherrschen.: Business-Englisch beherrschen, #1 Rating: 0 out of 5 stars0 ratingsPraxisführer E-Commerce: Schritt für Schritt zum erfolgreichen Einstieg in die Online-Welt Rating: 0 out of 5 stars0 ratings
Reviews for Webdesign und Usability
0 ratings0 reviews
Book preview
Webdesign und Usability - Sarah Hueber
auseinandersetzen.
1 Wie Menschen Websites lesen
1.1 Unser Gehirn
Auch wenn man es bei manchen unserer Mitmenschen nicht glauben mag – wir haben meines Wissens alle ein Gehirn und dieses funktioniert physiologisch gesehen grundsätzlich bei allen Menschen in gleicher oder zumindest sehr ähnlicher Weise.
Das menschliche Gehirn besteht aus zwei Hälften. Diese sind für unterschiedliche Aufgaben zuständig. Die linke Hälfte ist hauptsächlich für alles verantwortlich, was mit Sprache zu tun hat wie Lesen und Sprechen. Dieser Teil des Gehirns ist eher logik- und denkgesteuert. Die rechte Hälfte verarbeitet ihrerseits überwiegend Bilder und sorgt für räumliches Vorstellungsvermögen. Die Aktivität der rechten Hälfte ist weniger durch unsere Gedanken kontrolliert und daher schneller als die der linken Hälfte.
Interessanterweise nimmt jede Gehirnhälfte jeweils die Information aus dem gegenüberliegenden Sehfeld auf: Was das rechte Auge sieht, wird in der linken Gehirnhälfte verarbeitet und umgekehrt.
Information, die eine Seite nicht selbst verarbeiten kann, muss erst an die andere Hälfte weitergeleitet werden. Das verursacht eine kurze Verzögerung. Sehr einfach kann man dies an sich selbst feststellen, indem man ein Stück Text liest und sich dabei jeweils ein Auge zuhält. Liest das rechte Auge allein, kommt es einem flüssiger vor, als wenn das linke Auge allein liest. Es mag sich zwar um minimale Unterschiede handeln, bemerkbar ist es jedoch durchaus.
Daraus lassen sich erste Schlussfolgerungen für das Design von Websites ziehen: Räumliche Information für die Orientierung (wie z. B. die Navigation) ist auf der linken Seite sinnvoll untergebracht, weil sie so schneller verarbeitet wird. Bilder sollten eher links, Text eher rechts stehend platziert werden – das unterstützt die natürlichen Vorgänge beim Sehprozess. Beides ist natürlich nicht in Stein gemeißelt, dient jedoch als guter Anhaltspunkt.
1.2 Wie visuelle Wahrnehmung funktioniert
Kennen Sie diese Bilder, bei denen exakt parallele Linien beim Betrachten schief aussehen und man schwören könnte, dass diese Linien nicht zueinander parallel sind? Hier spielt uns unsere Wahrnehmung einen Streich, wir unterliegen einer optischen Täuschung. Dass so etwas bei der Gestaltung einer Website zu vermeiden ist, liegt auf der Hand.
Die visuelle Wahrnehmung unterliegt Gesetzen, die von der Gestaltpsychologie schon vor 100 Jahren (etwa um 1912) erforscht und bewiesen wurden. Aus dieser Wissenschaft sind die so genannten „Gestaltgesetze" hervorgegangen. Welche dieser Gesetze für die Gestaltung von Websites von Bedeutung sind, zeige ich im Folgenden anhand von Beispielen auf.
Wahrnehmung von Figur und Grund
Formen, Flächen und Strukturen werden je nach Anordnung als dominante Figuren wahrgenommen. Dadurch heben sie sich vom Untergrund ab und können als Figur erkannt werden. Besonders gut zeigen lässt sich dies anhand einer so genannten „Kippfigur":
Hier ist nicht deutlich erkennbar, welche der beiden Flächen die Figur darstellt. Deswegen sieht der eine auf diesem Bild eine Vase, der andere zwei einander zugewandte Gesichter.
Aus diesem Beispiel leitet sich die Forderung ab, dass Dinge, die eindeutig wahrgenommen werden sollen, eindeutig gestaltet sein müssen. Nur so werden Missverständnisse beim Betrachter vermieden. Im obigen Bild wirken beide Flächen gleichwertig und das Gehirn kann sich nicht recht entscheiden, welche Fläche die eigentliche Figur darstellt.
Sobald man einer der Figuren weitere Merkmale hinzufügt, tritt diese mehr in den Vordergrund und es ist klar, welche Figur die wichtigere ist:
Gesetz der Nähe
Nebeneinander liegende Elemente werden als Gruppe wahrgenommen. Je kleiner der Abstand, desto zusammengehöriger werden sie empfunden: