Webseiten sollen schnell, übersichtlich, klar strukturiert und verständlich aufgebaut sein. In ansprechender Form sollen Inhalte interessant vermittelt werden – und dies in den verschiedensten Nutzungssituationen (mobil, stationär) und über verschiedenste Gerätetypen (PC, Tablet, Smartphone) hinweg. Neben allgemeinen Empfehlungen zur bildschirmgerechten Gestaltung erhalten Sie in diesem Vortrag praktische Lösungsansätze für gelungenes Webdesign für Mobilgeräte.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Design – also auch Webdesign – unterliegt stark modischen Einflüssen. Es ist daher nicht zweckmäßig, einen endgültigen Vorschriftenkatalog erstellen zu wollen. best practice = Vorgehensweisen, die sich bewährt haben design patterns = Anwendungsmuster, die sie sich herausgebildet haben
Je nach Gestaltung werden interaktive Elemente schneller erkannt. Insbesondere eine grafisch simulierte Dreidimensionalität (konvexe Oberfläche) scheint dies zu begünstigen, da die Elemente aus der Fläche hervorzutreten scheinen. Dies ist jedoch auch stark abhängig vom grafischen Umfeld.
Presenter
Presentation Notes
Auf der Homepage des Papeterie-Herstellers „goldbuch“ werden scheinbar verschiedene Auswahlmöglichkeiten angeboten, die jedoch wieder Erwarten nicht anwählbar sind – weder das „goldbuch“-, noch das „Rebecca Bonbon“-Logo der die „goldbuch“-Animation unterhalb der Leiste sind klickbar. Zudem wird die horizontale Leiste wird erst bei genauerer Betrachtung als Navigationsleiste erkannt.
1. Grundsatz
Die Rezeption der Websites ist eher unstrukturiert.
Überfliegen („scanning“), statt Lesen der Seiten
„F-Muster“
beim Leseverhalten: z. B. Google
Fokussierung nur auf einen kleinen Bereich
Grundsätze aus: Krug, Steve: Don’t
make
me
think! Web Usability
–
das intuitive Web.
Bonn: mitp-Verlag, 2002. 21 –
29.Did-it, Enquiro, and Eyetools
Uncover Google’s Golden Triangle: http://www.prweb.com/releases/2005/03/prweb213516.htm
Trotz der Angebote zur schnelleren Erfassung (z. B. Spaltensatz, farbige Hinterlegung, …) der Seite erfolgt die Wahrnehmung nicht wie vermutet einer logischen Reihenfolge (z. B. Leserichtung von links nach rechts und von oben nach unten), sondern eher ungerichtet und sprunghaft. Dies widerlegt jedoch nicht den Einsatz solcher Ordnungsprinzipien.
Presenter
Presentation Notes
In einer Studie zur visuellen Wahrnehmung der Suchergebnisseite der Suchmaschine Google wurden als Überlagerung die Bereiche je nach Blickhäufigkeit farbig gekennzeichnet (rot: höchste bis grau: geringste Blickhäufigkeit). Im Bereich des „goldenen Dreiecks“ (auch als „F“-Form gedeutet) wurden die Elemente am häufigsten betrachtet. Die wichtigen Elemente sollte also möglichst im linken oberen Bereich des Formats platziert werden. Unterhalb des Bildschirmrandes („fold“ – hier als horizontale rote Linie eingezeichnet) fällt die Wahrnehmung sehr stark ab, da diese erst durch Scrollen sichtbar werden. http://www.prweb.com/releases/2005/03/prweb213516.htm
2. Grundsatz
Wir treffen keine optimale Wahl.
Entscheidungsfindung ist eine Mischung aus befriedigenden („satisfying“) und genügenden („sufficing“) Optionen
Wahl der „ersten annehmbaren Option“
3. Grundsatz
Die Funktionsweise ist uninteressant, das Durchkommen ist entscheidend.
Bedienungsanleitungen werden nicht gelesen.
Wenn wir etwas finden, das funktioniert, bleiben wir dabei.
Webdesign: Form
Verhältnismäßigkeiten abstimmen
Farbe, Größe und Abstände bestimmen die Bedeutung
„Intimsphäre“
beachten
Presenter
Presentation Notes
Gestalttheorie von Max Wertheimer: „Die Gestaltpsychologie beschäftigt sich vor allem mit der Entstehung von Ordnung im psychischen Geschehen – in der Wahrnehmung ebenso wie im Denken, Fühlen und Verhalten. Menschen werden dabei grundlegend als offene Systeme im aktiven Umgang mit ihrer Umwelt gesehen, die ihre Wahrnehmungen in bestimmten Mustern organisieren (siehe auch Deutungsmuster).“ (aus: Wikipedia) „Päkchenbildung“ „Intimsphäre“ = Schutzzone
Hüskes, Ralf/
Herczeg, Jürgen (1993): „Benutzer-Benchmarks. Über die Versuche, Mensch und Computer zusammen-
zubringen“. In: c’t
Heft 9, 1993, 62 –
66.
Presenter
Presentation Notes
Auszug der Gestalttheorie von Max Wertheimer.
Presenter
Presentation Notes
Die rot unterlegten Überschriften („Angebot der Woche“, …) erlauben eine recht gute Übersicht der Inhalte. Wider Erwarten sind diese selbst jedoch nicht klickbar. Erfreulicherweise sind aber nicht nur die Schalter „Alle Angebote“, sondern auch die zugehörigen Fotos verlinkt.
Presenter
Presentation Notes
Ein Beispiel für die Missachtung des Mindestabstands der Elemente: Der Text im Zentrum läuft rechts zu nah an den Text in der Marginalspalte heran. Aufgrund der mangelnden Trennung könnten sich die Texte bei flüchtigem Lesen vermischen. Im Detail findet sich ein mangelnder linker Abstand zum Rand des farbigen Grunds in der Bildüberschrift „Bedienkomfort“ in der Marginalspalte. Weiterhin reißt der Blocksatz des Textes aufgrund der fehlenden Silbentrennung große Lücken und beeinträchtig damit die Lesbarkeit beachtlich. Blocksatz sollte aus diesem Grund als Ausrichtungsart vermieden werden.
Presenter
Presentation Notes
Eine Überarbeitung des Layout gleicht alle Abstände an.
Webdesign: Farbe
Farbkodierung
Farbleitsystem
Farbpalette ermittelbar ausFarbtheorieRealien
„Hausfarbe“
–
Corporate Design
Presenter
Presentation Notes
Farbleitsystem: Strukturierung durch Farbkodierung der inhaltlichen Bereiche Farbpalette: „Farbwelt“, „Farbklima“ Realien: Objekte, Fotos, …
Presenter
Presentation Notes
„So steigert Blau unsere Kreativität und fördert neue Lösungsstrategien. Rot hingegen erhöht die Vorsicht und die Aufnahmefähigkeit für Details, haben kanadische Wissenschaftler in verschiedenen Hirnleistungstests festgestellt.“ http://www.spiegel.de/netzwelt/web/0,1518,684047,00.html
Presenter
Presentation Notes
Für Systemmeldungen haben sich die bekannten Farben aus dem Straßenverkehr etabliert, wie hier z. B. rote Hinweisfelder eines Eingabefehlers oder grüne für eine regelkonforme Eingabe. Oftmals folgen diese Farben nicht dem Farbschema der Website, sind gesättigter und zeigen somit Signalwirkung. Die Bedeutung dieser Farben ist jedoch kulturell unterschiedlich.
Presenter
Presentation Notes
Sehr viele Hauptkategorien (obere Menüzeile: News, …) sind mit Farben kodiert. Dabei ist die Unterscheidung der Farben oftmals schwierig. Insbesondere die Zuordnung grüner Farbtöne zu „Sport“ und „Environment“ erscheint nur teilweise plausibel.
Presenter
Presentation Notes
Hier wurde die Kategorie „TV“ in die Kategorie „Cuture“ einsortiert.
Presenter
Presentation Notes
Hier dominieren die Farben des triadischen Farbschemas (blau, rot und gelb) aufgrund ihrer Flächenanteile und ihrer Sättigung den Gesamteindruck.
Presenter
Presentation Notes
Im Verhältnis zur Gesamtfläche werden hier die leuchtenden Farben (hellblau, orange und rosa) sparsamer eingesetzt, da diese sich auf dem dunklen Hintergrund ohnehin stärker absetzen.
Presenter
Presentation Notes
Ein analoges Farbschema bestehend aus gedeckten Tönen.
Presenter
Presentation Notes
https://kuler.adobe.com/create/color-wheel/
Presenter
Presentation Notes
Hier hat ein Grafik-Designer die Farben der Kleidung von Personen abgenommen, die für ein Fashion-Blog fotografiert wurden.
Webdesign: Typografie 1/3
Lesbarkeit als oberste Prämisse
Geräteauflösung entscheidet
Serifenlose bisher
in kleinen Größen besser lesbar
Presenter
Presentation Notes
Definitionen der Begriffe sind unklar: Leserlichkeit (legibility): Unterscheidbarkeit der Buchstaben untereinander Lesbarkeit (readability): Lesefluss, z. B. bei längerer Lektüre einer Zeitung Readability kann auch das sprachliche Vermögen des Autors, also die Verständlichkeit eines Textes, beschreiben.
iPhone
4: 326 dpi
verbesserte Darstellungsqualität der Displays
iPhone
3GS: 163 dpi
Presenter
Presentation Notes
Die Weiterentwicklung der Displaytechniken erhöhen die Pixeldichte (hier: Retina-Display beim iPhone) und ermöglichen feinere Details – also zukünftig auch eine saubere Darstellung von Serifenschriften in kleinen Größen.
Webdesign: Typografie 2/3
individuelle Schriftarten per Webfont
Darstellungsqualität der Webfonts zweifelhaft
Lizenzgebühren
einkalkulieren
ansonsten Systemschriften wählen fürSerifen: Times New Roman, GeorgiaSerifenlose: Arial, Verdana, Tahoma, Trebuchet, Calibri
Presenter
Presentation Notes
Serifenlose = Grotesk Eine „Hausschrift“ ist ein Teil des Corporate Designs. Systemschriften auf dem Bildschirm testen: Typetester: http://www.typetester.org/ Google web fonts: http://www.google.com/webfonts/
Schriftarten: Adelle Thin und Bold (jeweils kursiv)
Presenter
Presentation Notes
Schriftart Headline: FF Tisa oder Hoefler Text Fließtext: P22 Underground oder Gill Sans
Presenter
Presentation Notes
Hier werden für die Menüs, die Überschriften und den Fließtext Webfonts eingesetzt.
Presenter
Presentation Notes
Wird die Darstellung der Webfonts z. B. durch Scriptblocker verhindert, dann werden diese durch Standardschriften ersetzt, die eine andere Schriftgröße und Laufweite aufweisen können.
Webdesign: Typografie 3/3
Kontrast zwischen Schrift und Grund: 5:1 –
10:1
SchriftgrößenFließtext: > 12 pt
≈
4,3 mm ≈
2,8 mm Versalhöhe
Verhältnis Überschrift zu Fließtext: 2:1
AbständeZeilenabstand: 150% der SchriftgrößeAbsatz zu Absatz: 75% des Zeilenabstands
weniger als 75 Zeichen pro Zeile
variable Schriftgröße mit relativer Einheit „em“
(CSS)
Presenter
Presentation Notes
1 pt = 1⁄72 Zoll = 0,3527… mm
Presenter
Presentation Notes
Carta ist ein Autorenblog für digitale Öffentlichkeit, Politik und Ökonomie. Breite der Textspalte: 610px Headline: Schriftart: Georgia italic Schriftgröße: 26px Zeilenabstand: 30px Fließtext: Schriftart: Georgia Schriftgröße: 15px Zeilenabstand: 26px Abstand nach: 14px 88 Anschläge mit Leerzeichen
Breite der Textspalte: 640px Headline: Schriftart: Lato Schriftgröße: 19px Zeilenabstand: 38px Fließtext: Schriftart: Lato Schriftgröße: 13px Zeilenabstand: 18px Abstand nach: 15px 114 Anschläge mit Leerzeichen
Presenter
Presentation Notes
knapper Schreibstil, die Hälfte der Wörter ist „überflüssig“ „gesundes“ Maß an Text (ca. fünf Absätze) Textaufbereitung: Hervorhebungen, Absätze, Aufzählungen, … Suchbegriffe sollten vorkommen, Text sollte trotzdem nicht überoptimiert wirken Bei längeren Artikeln ermöglicht eine kurze Zusammenfassung dem Benutzer eine bessere Beurteilung der Relevanz. Absätze und Hervorhebungen im Text unterstützen den Benutzer beim „Scanning“ des Textes. Eine große Überschrift macht das Thema des Artikels deutlich.
Presenter
Presentation Notes
https://blog.wikimedia.org/2014/03/27/typography-refresh/ https://www.mediawiki.org/wiki/Typography_refresh „Überschriften sollen sich besser von dem Body-Text abheben und werden daher zukünftig durch Schriftarten mit Serifen dargestellt. Sofern möglich soll es die Open-Source-Schrift Linux Libertine sein. Da diese kaum auf vielen Rechnern installiert sein dürfte, gibt sich Wikipedia notfalls aber auch mit Georgia oder Times zufrieden. Findet sich keine davon auf dem Rechner des Besuchers, muss es notgedrungen irgendeine Schriftart mit Serifen tun. Für den Body-Text bleibt die Wikipedia bei serifenlosen Schriften, wird zukünftig aber zunächst nach Arimo, Liberation Sans, Helvetica Neue, Helvetica oder Arial verlangen. Neben genaueren Vorgaben an den Browser, welche Schrift er einsetzen soll, wurden auch weitere Details der Textanzeige geändert. So wurde der Zeilendurchschuss, also der Zeilenzwischenraum, erhöht. Außerdem wird auch der Text selbst ein wenig größer dargestellt. Während der Text bisher schwarz war (#000000), wird er jetzt in einem sehr dunklen Grauton (#252525) dargestellt. Langfristig will sich das Projekt auch mit Webfonts auseinandersetzen. Derzeit wird deren Einsatz aber aufgrund der höheren Ladezeiten noch abgelehnt.“ 02.04.2014 http://t3n.de/news/wikipedia-redesign-relauncht-32-537631/
Aufteilung des Formatshorizontal (Spaltensatz)vertikal
Methode zur Strukturierunggrafischinhaltlich
erzeugt Orientierung und Benutzbarkeit
Presenter
Presentation Notes
Zitat von Günter Gerhard Lange aus seinem Vortrag von der TYPOBerlin 1996 zum Thema Raster: „… Nach Möglichkeit alles vorgegeben, das muss ein Grundriss sein auf der Fläche … Alles gleichsam für Geistesschwache vorbereitet. … Alles ist Rhythmus. Raster ist Wiederholung. Raster ist für mich militant. …“ http://typovideo.de/index.php?node_id=76&lang_id=1&filter_value=G%C3%BCnter%20Gerhard%20Lange
Presenter
Presentation Notes
Navigation: klare, einfache und konsistente Navigation aktuellen Standort angeben Entfernung angeben: Zeit- und/oder Schrittanzahl „such-domiante“ (Suche) und �„link-dominante“ Benutzer (Navigation)
Kopfzeile
Untermenü
Hauptmenü
Inhalt
Klickpfad
Marginalien
Suche
Servicemenü
Fußzeile
Presenter
Presentation Notes
Die klassischen Elemente einer Website und deren übliche Platzierung im Format. Diese Konvention haben die meisten Benutzer erlernt und so können sie die Website ohne Schwierigkeiten benutzen.
Spalte 1 2 3 4 5 6
Presenter
Presentation Notes
Eine sechsspaltige Teilung des Formats. Für die inneren Spalten 2 – 5 wurde eine sehr schmale (eher der Lesbarkeit abträgliche) Spaltenbreite gewählt.
Spalte 1 2 43 5
Presenter
Presentation Notes
Bei genauer Betrachtung fällt auf, dass auch ein fünfspaltiges Layout möglich wäre, der innere Bereich also sowohl mit drei als auch mit vier Spalten gefüllt werden könnte.
Presenter
Presentation Notes
Ein Beispiel für horizontales und vertikales Raster – mit quadratischer Grundlage.
Presenter
Presentation Notes
Horizontales Raster.
Presenter
Presentation Notes
Horizontales und vertikales Raster. Die Grundeinheit des Layouts ist quadratisch.
Presenter
Presentation Notes
Hier läuft der Text über die Breite von zwei Spalten, eine weitere wird als marginale Bildspalte benutzt.
Presenter
Presentation Notes
Hier läuft als Variante der Text über drei Spalten und die Sprungmarken („Direktion Wolf“, …) sind darüber in drei Spalten abgesetzt.
Presenter
Presentation Notes
Das Layout der FAZ nach dem Redesign (Oktober 2011).
Presenter
Presentation Notes
Blogs als Internet-spezfisches Format bieten eine andere Art der Navigation: Die Artikel werden in chronologischen Abschnitten dargestellt und können so über die Richtungs-Pfeile durchblättert werden.
Presenter
Presentation Notes
Neuere Internet-Angebote (Social Media) entsprechen oftmals nicht den gelernten Konventionen und stellen die Informationseinheiten als eine Art Endlosband (infinite scroll) im Browser dar.
Presenter
Presentation Notes
Die technische Entwicklung bringt neue Gerätetypen mit unterschiedlichen Eigenschaften auf den Markt: Smartphones, Notebooks, Netbooks, eBooks, Tabletcomputer, … Bandbreiten, Auflösungen, Darstellungsqualitäten und Interaktionsmöglichkeiten der Geräte sind sehr unterschiedlich. Post-PC-Ära mobile Anwendungsszenarien Vielfalt der Eigenschaften der Geräte und Nutzungsverhalten mobile Anwendungsszenarien ganzheitlich aus Sicht des Users betrachten Paradigmenwechsel: Finger löst Maus ab, Spracherkennung ist praktikabel Internet durch Smartphones und Tablets allgegenwärtig Ein- und Ausschalter quasi obsolet grafische Benutzeroberfläche (GUI) von Natural User Interface Design (NUI) abegelöst
Presenter
Presentation Notes
Touch ersetzt den Klick.
User Experience
(UX)
Design als ganzheitlicher Prozess
„User first“
Einheit ausNutzwert (Look)Nutzererlebnis (Joy
of Use, Feel)
Usability
(einfache, intuitive Bedienbarkeit)
Presenter
Presentation Notes
User Experience: Gesamtheit aller sinnlichen Eindrücke und deren mentale und physische Auswirkung auf den Benutzer Usability: Benutzerfreundlichkeit, Gebrauchstauglichkeit: „Die Eignung eines Produkts, die vorgegebenen Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ (Wikipedia) „Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufrieden stellend zu erreichen.“ (ISO 9241-11, Abs. 3.1 Gebrauchstauglichkeit) stets eine Motivation zur Benutzung von Websites, z. B. Information, Beratung, Einkauf, Unterhaltung, … Bewertung der Website erfolgt nach Verlauf und Qualität der Zielerfüllung Gestaltung des Verhaltens einer Anwendung (Feel) wird wichtiger als die des Aussehens (Look) „Joy of Use“: Spaß an der Nutzung, die emotionale Komponente, fördert die Zufriedenheit Mobile Anwendungsszenarien werden ganzheitlich aus Sicht des Benutzers betrachtet.
Presenter
Presentation Notes
Offensichtlich scheitert die Suchmaschine der Website schon an der Großschreibung, trotzdem ein Produkt mit diesem Namen tatsächlich existiert – wie die Suchmaschine schließlich selbst angibt (!). Zudem wurden die Dialoge der Suchmaschine nicht vollständig in die deutsche Sprache übersetzt.
Presenter
Presentation Notes
Im Zuge des Redesigns der Website wurde der Direktlink auf der Homepage zum Spendenformular noch besser sichtbar gemacht (Screenshot 14.3.2010).
Simplicity
Reduktion auf das absolut Nötigste.
„Gutes Design ist so wenig Design wie möglich.“
(Dieter Rams)
SHE: Shrink, Hide, Embody
(John Maeda)
Presenter
Presentation Notes
Dieter Rams: Zehn Thesen für gutes Design (70er Jahre) https://www.vitsoe.com/de/ueber-vitsoe/gutes-design Maeda, John: The Laws of Simplicity. Cambridge, Massachusetts: The MIT Press, 2006. 2–9.
Presenter
Presentation Notes
Die Website zur Erweiterung des Firefox-Browsers. Die Suche ermöglicht über das Drop-down „Alle Add-ons“ die Einschränkung der Sucherergebnisse. Diese entsprechen exakt den aufgeführten Kategorien im Menü auf der linken Seite.
Presenter
Presentation Notes
Weitere Filteroptionen der Suche können über das Etikett „Fortgeschritten“ sichtbar gemacht werden.
Presenter
Presentation Notes
Akkordeon
Presenter
Presentation Notes
Die Lasche „Schnell zum Ziel“ in der rechten oberen Ecke verbirgt eine Zusammenstellung von Navigationsabkürzungen für oft angeforderte Inhalte, die ansonsten nur über mehrere Klicks in einer klassischen Navigation erreichbar wären.
Presenter
Presentation Notes
Das geöffnete umfangreiche Sprungmenü.
„Mobile first“
Elektronische Medien sind „elastische“
Medien.
ein Informationsangebot –
verschiedene (mobile) Ausgabemedien
mögliche Lösungen:spezielle Mobile Website anbieten oderResponsive
Web Design: „media queries“
(CSS3) reagieren auf
Geräteeigenschaften
Layouts testen
(Opera Mini, Opera Mobile)
Presenter
Presentation Notes
Die Einheit Pixel ist nicht genormt und je nach Darstellungsmedium nicht gleich groß. Zur Umrechnung der Einheit Punkt in Pixel: http://reeddesign.co.uk/test/points-pixels.html Eine Online-Demonstration des Opera-Browsers für Mobilgeräte: http://www.opera.com/mobile/demo/ http://www.opera.com/de/developer/opera-mini-simulator Eine Prognose: Das mobile Web überholt 2014 das statische Web. ARD/ZDF-Onlinestudie 2011: „Statt 13 Prozent (2010) gehen aktuell 20 Prozent der Onliner unterwegs ins Netz. 17 Prozent der deutschen Onliner nutzen Apps auf Smartphones oder Tablet-PCs.“ „Responsive Web Design“ ist eine Art Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Aus fixierten Rastern werden flexible Raster und Layouts. Eine Übersicht: http://mediaqueri.es/ Beispiele für Responsible Web Design: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html http://m.guardian.co.uk/ Ubuntu One: https://one.ubuntu.com/ Andersson-Wise Architects: http://www.anderssonwise.com/ Menüdarstellung ändert sich je nach Auflösung (!): http://bostonglobe.com/
Bei sehr großen Bildschirmen (z. B. 23") verliert die Suchmaske auf der Adobe-Website ihren Kontext aufgrund ihrer rechtsbündigen Positionierung.
Presenter
Presentation Notes
Der Schalter zur Anmeldung verliert bei großen Auflösungen den Bezug zum Formular.
Presenter
Presentation Notes
Dieser Shop für eBooks zeigt leichte grafische Schwächen: Unklar ist die Bedeutung des blau gefärbten quadratischen Icons (rechts neben dem Buchtitel), zudem wirken die Schalter „eBook anfordern“ und „Geld-zurück-Garantie“ ungeschickt platziert. Der Text der Kurzinformation zum Buch ist ungünstig weit unten auf der Seite platziert, der zudem aufgrund des geringen Zeilenabstands und der unverhältnismäßig hohen Anzahl der Anschläge pro Zeile (131 inkl. Leerzeichen) nicht für eine bessere Lesbarkeit aufbereitet wurde.
Presenter
Presentation Notes
Aufgrund der schlechten Aufbereitung des Textes hinsichtlich der Lesbarkeit offenbart sich eine technische Schwäche: Vergrößert der Benutzer die Schriftgröße zur komfortableren Lektüre, so zerbricht das Layout der Seite, da sich die Elemente aufgrund ihres veränderten Platzbedarfs gegenseitig verdrängen. Der Bereich des Buchtitels landet schließlich unterhalb der linken Spalte, die hier weit nach rechts in die Seite rutscht.