USABILITY

Paulina Seroczynska

B.A. hon. Web Development

Certified TYPO3 Integrator

www.webentwicklung-berlin.deinfo@sitegefuehl.deTwitter : SiteGefuehlXING: Paulina_Seroczynskawww.kochen-ohne.de

Useability

• engl. ‚Brauchbarkeit, [Be-]Nutzbarkeit, Bedienbarkeit

• Gebrauchstauglichkeit

• Benutzerfreundlichkeit

• Benutzbarkeit eines Objektes

Das Netz 2007 vs 2012

Anzahl Top-Level Domains

Websites damals

Websites heute

Websites damals

Websites heute

Design damals & heute

•Bunt

•Schrill

•Animiert

•Statisch

•Baukasten

•CI Farben

•Schlicht

• Interaktiv (User generated)

•Dynamisch (DB, CMS)

•Technisch Aufwendig

•Mehr Konkurrenz

http://fdp-detmold.de

Definition Gebrauchstauglichkeit eines Produktes

• Normenreihe DIN EN ISO 9241 Teil 11

• Leitkriterien für die Gebrauchstauglichkeit einer Software

• Effektivität

• Effizienz

• Zufriedenheit

Weitere Normen

• ISO 9126 (DIN 66272) beschreibt die Qualitätsmerkmale und den Leitfaden zur Verwendung von Softwareprodukten.

• ISO/IEC 12119 regelt die Qualitätsanforderungen und die Prüfbestimmungen für Software-Erzeugnisse

• Die ISO 13407 Norm ist für einen benutzerorientierten Softwarentwicklungsprozess zuständig und die ISO 14915 beschreibt die Software-Ergonomie für Multimedia-Benutzungsschnitttstellen.

• Keine Normen zu Design!

• "Neuland"

Gründe für Usability

• Hohe Konkurrenz

• Zufriedene Kunden

• Kunden, die wiederkommen

• Kunden, die weiterempfehlen

• Schwarze Zahlen

Ziele und Zielgruppen

• Was möchte man erreichen?

• Wen möchte man erreichen?

Statistik Tools (insb. Technik)

„Der Wurm muss dem Fisch schmecken, nicht dem Angler. “

Keep it simple, stupid!

KISS-Prinzip

UX - Joy of Use

• Zufriedenheit

• Frust

• Scheitern

• Unterbrechung der eigentlichen Tätigkeit

• Zweifel

Relaunch vs. Optimierung

Jakob Nielsen

• geb. 1957 in Dänemark

• Dr. im Design von Benutzerschnittstellen und Informatik.

• 79 US Patente

• nngroup.com - Nielsen Norman Group

• useit.com 79 Mio. Views pro Jahr

„Die Benutzer sind faul und dumm. “

Steve Krug

• „Don't make me think”

• „Rocket Surgery Made Easy”

• Berater u.a für Apple

„Wenn etwas einen hohen Zeitaufwand erfordert – oder danach aussieht -, wird es wahrscheinlich weniger genutzt.“

(Krug 2006)

Usability-Qualitätskontrolle

1. Expertengutachten (Expert Review)

2. Befragung der Nutzer

3. Beobachtung der Nutzer

4. Usability-Test

1. Expertengutachten

• Heuristische Evaluation: Hier überprüft der Experte das Angebot mit anerkannten Prinzipien der Software-Ergonomie (Heuristiken).

• Cognitive Walkthrough: Experten überprüfen das Interface und versetzen sich in die Lage eines Nutzers (z.B. mit Personas). Sie erarbeiten bestimmte Handlungsabläufe und analysieren welche Probleme bei der Bedienung auftauchen könnten.

2. Befragung der Nutzer

• Fokus-Gruppen: Strukturierte Gruppendiskussionen

• Interviews/Kontextanalyse: Offene oder geschlossene Interviews (auch online)

• Personas (lat. Maske): Nutzermodelle anhand von Nutzerdaten

3. Beobachtung der Nutzer

• Feldbeobachtung: Wird nur ausgeführt, wenn Einflussfaktoren der Umgebung bedeutend sind

• Nutzertagebuch: Tester erhalten Zugang zum Produkt

4. Usability-Test

• Aufgabenanalyse (Task Analysis): Use Case (eine Aufgabe) muss gelöst werden

• Card-Sorting für benutzerfreundliche Navigations- oder Menüstrukturen: Themengruppen diskutieren und benennen um

• Der Fünf-Sekunden Test

• Remote Usability-Test (synchron und asynchron)

• Labortest

• Rapid-Prototyping (iterativer Nutzertest): Funktionsfähige Prototypen werden in kurzen Abständen kontinuierlich getestet.

• Eye-Tracking

• Web-Controlling

Nutzererfahrung

Emotionen

ROI - Return on Investment

Möglichkeiten der Protokollierung

• Screen Recording: Bildschirmaufnahmen vom Test (lokal oder online)

• Screen-Sharing: Zugriff auf den Bildschirm Ihres Testers, um die Klicks und Bedienung zu verfolgen.

• Sprachaufzeichnung: Aufzeichnung per Mikrofon während des Tests.

• Webcam-Aufnahme: Aufnahme von Testpersonen

• Heatmap: Visualisierung der Klicks von verschiedenen Nutzern auf ihrer Website

• EyeTracking: Visualisierung des Blickverlaufs von der Testperson

• Analytics-Berichte: Analytischen Daten, die die Qualität der Website und der Benutzeroberfläche widerspiegeln

• Usability Berichterstattung: Nutzer erläutern den Umgang mit ihrer Website

Online-ServicesLow Budget Varianten

• http://www.usertesting.com/

• http://www.loop11.com/

• http://rapidusertests.com/

Usability-Test

5 Sekunden TestUse Case mit “Thinking Aloud” (keine Personas)ggf. Beobachtung der Nutzer bei weiteren Fragen

Use-Case

Finden Sie die Finca "Buma" und finden Sie heraus, ob sie vom 10. April bis zum 15. April 2014 buchbar ist und was die Nacht

bis zu 6 Personen kosten würde.

Andere Websites im Test

http://www.youtube.com/watch?v=_uPb-CVXZAU

http://www.youtube.com/watch?v=IToZLTxas4g

Usability Guidelines

Die 4 W's

• Wer ?

• Was ?

• Wo ?

• Warum ?

Innerhalb 3 Sekunden

Positive Beispiele

• http://www.wufoo.com/

• https://www.tumblr.com/

• http://www.webentwicklung-berlin.de/

Usability Guidelines

• Intuitiv

• Selbsterklärend

• Fragezeichen eliminieren

• Nutzeranweisungen vermeiden

• Konventionen

NAVIGATION

Breadcrumb, DropDown, zurück

3 KLICK REGEL

SEITENTITEL

SEO, SER, iOS 7

iOS 7

FEHLERMELDUNGEN

404, htaccess 301

FORMULARE

Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre

KONTRAST

Lesbarkeit, Animationen, Hintergründe, Barriere

LINKS

Kontrast, besuchte Seiten, Download, extern

NUTZUNGSHINWEISE

nur bei Ladezeiten

TEXT

Realschul-Niveau, Leichte-Sprache, Schriftart (font-face), Zeilenhöhe, Schriftgröße,

Scanbarkeit, Breite, Anzahl Absätze, Animationen,korrekte Auszeichnungen

http://www.webmasterpro.de/design/article/typografie-12-wichtige-grundlagen-fuer-den-richtigen-einsatz-von-schriften.html

DETAILS

Goldener Schnitt, Aussagen, Humor

Twitter

VERALTETE INHALTE

News, Umgang mit Löschen von Seiten

KONTAKT

Impressum, Mitarbeiter, Formular, Spam

SCROLLEN

Falz

EIGENE BEDIENELEMENTE

Scrollbalken, DropDown Menüs

BROWSER BEDIENUNG

Nicht manipulieren oder verändern (z.B. zurück, rechte Maustaste)

INKONSISTENZ

Design-Guide, Farben, Schriftarten,Spalten, Navigationen

W3C KONFORM

valides HTML, Doctype, CSS

BROWSERKOMPATIBILITÄT

auf Laptops, Tablets, PCs, Macs, Smartphones

PERFORMANCE

Speed Test, Komprimierung, Bilder, Server, Mobile

SEO

SERP, Title Tag, Social Media, verwaiste Seiten

SUCHE (INTERN)

Funktion, Suchergebnisse, Sortierbarkeit

MICROSITES

Als Teil der eigenen Website,Nicht zu viele verschiedene Subdomains,

Ausnahmen

MULTIMEDIA

Videos, Bilder, Flash, HTML5, CSS3

ERMUTIGUNG ZUR WIEDERKEHR

Newsletter, Gewinnspiele, Social Media

UNDER CONSTRUCTION

Nicht verwenden, nur bei Produktvorstellungen Email Benachrichtigung aktivieren

POP-UP

AdBlocker, Fancybox, Lightbox

DON’T LOOK LIKE AN AD

keine Werbesprüche, keine boxartige bunte Darstellung

FAQ

Hilfetexte, Abkürzungen erklären, Glossar

RELATIVE GRÖßEN NUTZEN

em statt Pixel

CONVERSION-OPTIMIERUNG

Conversion-Rate

Nach einer Usability-Optimierung wurde eine durchschnittliche Erhöhung der Conversion-Rate um

135% festgestellt.

Air Berlin

Usability Failures

Facebook Usability Gespräche

Usability Failures

Usability Failures

Usability Failureshttp://www.openoffice.org/

Positive Usability

Usability Failures

CSS3 Generator

http://css3generator.com/

Bootstrap

http://getbootstrap.com/2.3.2/

Responsives Webdesign

Ethan Marcotte

Mai 2010

Ethan Marcotte

,,Mobile browsing is expected to outpace desktop-based access within three to five years.”

Mobile First!

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1”>

Viewport

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

@media screen { * { font-family: sans-serif }}

Medienabhängige CSS

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Weitere http://www.w3.org/TR/css3-mediaqueries/

Media Querys

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Media Querys

Breakpoints

Navigationen

Positive Beispielehttp://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html

http://www.active-value.de/http://www.abookapart.com/

gruene-bundestag.de

Responsive Viewerhttp://www.active-value.de/responsive-design-viewer/

Adobe Edge Inspecthttp://html.adobe.com/edge/inspect/

Barrieretest

http://www.bitvtest.eu/http://testen.bitvtest.de/selbstbewertung/test.php

Barrierefreie-Informationstechnik-Verordnung

2002

Seit dem 31. Dezember 2005 mussten sämtliche öffentlich zugänglichen Webauftritte des Bundes

barrierefrei sein. Die Umsetzung der Anforderungen der BITV 2.0 hat für neu gestaltete Internetseiten bis

zum 22. März 2012 zu erfolgen.

Barrierearmut

BITV Test

http://www.bitvtest.eu/