Usability im Web
mehr als Konzept & Design
Präsentiert von
Katrin Schneider
&
Johannes Brosi |
Mayflower GmbH
Foto by Lisa Omarali (Flickr)
Katrin Schneider
katrin.schneider@mayflower.de
Frontend-/UX-Expertin
Johannes Brosi
me@brosi.me
Frontend-/Mobile-Experte
Mayflower GmbH Seit 10 Jahren erfolgreicher IT-Dienstleister und zuverlässiger Partner für mittelständische und Großprojekte im Webumfeld.
Usability im Web
Typischer Ablauf:
> Suchen
>
Auswählen
> Besuchen
> Bleiben?
> Nutzen
"Eine umfassende Usability in allen Aspekten schafft, dass Besucher zu Fans werden."
Webseiten-aspekte
#1: USER Interface (UI)
UI: Das, was der Nutzer auf den ersten Blick sieht (Benutzeroberfläche).
"Wie sieht das Produkt aus und wie fühlt es sich an?"
Webseiten-aspekte
#1: USER Interface (UI)
#2: SEarch engine Optimization (SEO)
Webseiten-aspekte
#2: SEarch engine Optimization (SEO)
> Beeinflusst Suchmaschinenranking
> Beeinflusst Darstellung der Suchergebnisse (SERP)
"Wie finden Leute meine Seite?"
"Warum klickt jemand mein Ergebnis an?"
Fokus hier: von Bots analysierte Teile
Webseiten-aspekte
#1: USER Interface (UI)
#2: Search engine optimization (SEO)
#3: Barrierefreiheit (BF)
Webseiten-aspekte
#3: Barrierefreiheit
“Barrierefreiheit bezeichnet im deutschen Sprachgebrauch eine Gestaltung der baulichen Umwelt in der Weise, dass sie von Menschen mit Behinderung und von älteren Menschen in derselben Weise genutzt werden kann wie von Menschen ohne Behinderung. [...]”
Webseiten-aspekte
#3: Barrierefreiheit
> Auch im Web relevant!
> Typische Hilfsmittel: ScreenReader, Braillezeile, Zoom, ...
> Betrifft mehr Menschen als man denkt
"9% aller Männer in Deutschland haben eine Rot-Grün-Schwäche."
Webseiten-aspekte
#1: USER Interface (UI)
#2: SEarch engine Optimization (SEO)
#3: Barrierefreiheit (BF)
#4: Markup/Code (MC)
Webseiten-aspekte
#4: Markup/Code (MC)
> Browser zeigen interpretiertes Markup/Code an
Webseiten-aspekte
#1: USER Interface (UI)
#2: SEarch engine Optimization (SEO)
#3: Barrierefreiheit (BF)
#4: Markup/Code (MC)
#5: Konzept, Inhalt, Design (KID)
Webseiten-aspekte
#5: Konzept, Inhalt, Design (KID)
> Bestimmen gemeinsam die vordergründige
Wahrnehmung
> Konzept: Vision, Aufbau & Features
> Inhalt: Texte & Bilder
> Design: Layout
"KID?! SRSLY?"
Webseiten-aspekte
#5: Konzept, Inhalt, Design (KID)
Grafik by Knight-Industries-Two-Thousand (Tumblr)
Webseiten-aspekte
> Fehlerhafter Code
=> schlechtes SEO
> Undurchdachtes Design
=> nicht barrierefrei
> Schlechtes Konzept
=> unbrauchbares UI
Es lohnt sich also, auch mal die perspektive zu wechseln
Bild by Unbekannt (icanhascheesburger.com)
Beispiel 1: Title & Headline
Beispiel 1: Title & Headline (UI)
Beispiel 1: Title & Headline (SEO)
Beispiel 1: Title & Headline (BF)
Beispiel 1: Title & Headline (MC)
Beispiel 1: Title & Headline (KID)
Beispiel 1: Title & Headline
> Konzept => UI, SEO, BF, MC
> Tags (MC) => SEO & BF
> Inhalt => UI, SEO & BF
> Entsprechendes Design
=> UI, BF
=> UI, BF
Beispiel 2: Formulare
Beispiel 2: Formulare (UI)
Beispiel 2: Formulare (BF)
Beispiel 2: Formulare (MC)
Beispiel 2: Formulare (KID)
Beispiel 2: Formulare
> Klar, reduziert & verständlich
> Sinnvolle Labels, Hints &
> Sinnvolle Labels, Hints &
Fehlermeldungen
> Großzügiges Design => UI, BF
> Optimaler Code => UI, BF
"Was sind die minimal benötigten Daten für den momentanen Zweck?"
Beispiel 3: "Responsive"
“Beim Responsive Webdesign [...] handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese Websites auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. [...]”
Beispiel 3: "Responsive" (UI)
> Vielfalt an Geräten und Auflösungen
> Nicht nur gut aussehen,
auch funktionieren!
Beispiel 3: "REsponsive" (SEO)
> Vermeidung von "Duplicate Content"
> Einheitliche URL für alle Devices
Beispiel 3: "Responsive" (BF)
> Braillezeile & Co. "nur" ein weiteres Device
> Reduzierte Smartphoneansicht
=> gute Grundlage für Barrierefreiheit
Beispiel 3: "Responsive" (MC)
> Basis: sauberer Code & Know-How
> Inhalt & Struktur strikt von Darstellung trennen
> besser wartbar
Beispiel 3: "Responsive" (KID)
> Voraussetzung: Zusammenarbeit KID <-> MC
> Arbeiten mit Prototypen
!
Beispiel 3: "Responsive"
Aufwendig in KID & MC, aber:
> Google Approved
> Optimiertes UI & BF auf allen
> Google Approved
> Optimiertes UI & BF auf allen
Geräten
> Erhöhte Wartbarkeit
> Erhöhte Wartbarkeit
"Es lohnt sich!"
Usability im Web
> User sucht Seite (Ranking)
> User besucht Seite
> UI/KID/BF: User bleibt (oder nicht)
> User mag Seite & nutzt sie auch über andere Devices
> User wird Fan
Also...
> Synergie durch Betrachten mehrerer Aspekte gleichzeitig
> Vernachlässigte Aspekte führen zu negativen Effekten
> Oft auch mit wenig Zusatzaufwand großer Nutzen
> Kosten-/Nutzen nicht aus den Augen verlieren
> MC & KID Grundsteine für UI, SEO, BF
Thanks for the fish
Katrin Schneider
katrin.schneider@mayflower.de
katrin.schneider@mayflower.de
Johannes Brosi
me@brosi.me
me@brosi.me
Mayflower GmbH
kontakt@mayflower.de
Foto by Serena (Wikimedia)
