Post on 17-Nov-2014
description
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
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
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
Positive Usability
Usability Failures
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