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)



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

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 &         
     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!
Bild   by    Rafizeldi

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 !

                 

Bild   by     Rafizeldi

Beispiel 3: "Responsive"



Aufwendig in KID & MC, aber:

>  Google Approved
>  Optimiertes UI & BF auf allen 
      Geräten
>  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

Johannes Brosi
me@brosi.me





Mayflower GmbH 
kontakt@mayflower.de
Foto   by    Serena   (Wikimedia)

Usability im Web

By Johannes Brosi

Usability im Web

Erstellt und gehalten von Katrin Schneider und Johannes Brosi - Premiere am World Usability Day 14.11.2013 in Würzburg auf der Festung Marienberg.

  • 2,426