Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Softwareergonomische Gestaltung mobiler Geräte

Vorlesungseinheit im Masterstudiengang in der Vorlesung MSE an der Universität Koblenz-Landau, FB 4 - Informatik
by

Karin Harbusch

on 30 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Softwareergonomische Gestaltung mobiler Geräte

DIN EN ISO 9241 „Ergonomie der Mensch-System-Interaktion“, Teil 110 „Grundsätze der Dialoggestaltung"

Aufgabenangemessenheit – geeignete Funktionalität, Minimierung unnötiger Interaktionen
Selbstbeschreibungsfähigkeit – Verständlichkeit durch Hilfen / Rückmeldungen
Steuerbarkeit – Steuerung des Dialogs durch den Benutzer
Erwartungskonformität – Konsistenz, Anpassung an das Benutzermodell
Fehlertoleranz – unerkannte Fehler verhindern nicht das Benutzerziel, erkannte Fehler sind leicht zu korrigieren
Individualisierbarkeit – Anpassbarkeit an Benutzer und Arbeitskontext
Lernförderlichkeit – Minimierung der Erlernzeit, Metaphern, Anleitung des Benutzers
Gliederung des Vortrag
Softwareergonomische Gestaltung
mobiler Geräte

Karin Harbusch
FB 4 - Informatik
Institut für Computervisualistik
harbusch@uni-koblenz.de
www.uni-koblenz.de/~harbusch
Wir unternehmen eine Expedition zur Softwareergonomie-Insel, wo in den bisher unzugänglichen Berg-regionen die softwareergonomische Gestaltung der mobilen Geräte ver-mutet wird.
Zur Insel-Metapher (2):
Satellitenbilder über die Bergregionen,
i.e. vielfältige neuartige Interaktions-
möglichkeiten bei mobilen Geräten:

Software-
ergonomie-
insel
Zur Insel-Metapher (1):
Die Softwareergonomie-Insel ist bis auf
die Bergregionen bereits kartographiert
(traditionelle Softwareergonomie; cf. Norm
DIN EN ISO 9241, Richtlinien der Interaktion
zwischen Mensch und Computer und
DIN EN ISO 14915, Softwareergonomie für
Multimedia-Benutzungsschnittstellen,
etc.

Zur Insel-Metapher (3):
Sehr detailliert erfasstes Terrain auf dem
per Hubschrauber erreichbaren Gipfelplateau:
- Styleguides zur App-Gestaltung je Betriebssystem,
- Styleguides der Hersteller mobiler Geräte.

Frei verfügbare Zeit auf dem Gipfel, d.h.
betrachten wir im Vortrag nicht näher)

DIN EN ISO 14915 „Softwareergonomie für Multimedia-Benutzungsschnittstellen"

Eignung für das Kommunikationsziel – verwendete Informationen / Medien unterstützen die intendierten Kommunikationsziele.
Eignung für Wahrnehmung und Verständnis – Inhalte sind so aufbereitet, dass sie gut rezipiert werden können und leicht verständlich sind.
Eignung für die Exploration – Informationen sollen gut strukturiert sein, so dass die Erkundung der Informationen und das Stöbern in den Informationen leicht ist.
Eignung für die Benutzungsmotivation – Das Programm soll zur Benutzung motivieren und eine hohe Bindung des Nutzers erreichen.
Zur Insel-Metapher im 21. Jahrhundert (4):
Besteht die Bergregion aus einem Vulkan, der—wie der Krakatau im Jahr 1883—die Topologie der ganzen Region verändert bzw. setzt die Erderwärmung den
tiefer gelegenen Regionen (d.h. der traditionellen Softwareergonomie) durch Überschwemmung zu?

Umformuliert als Fragestellung des Vortrags:
Müssen die Softwareergonomie-Normen neu formuliert werden?

1. Anlanden, aklimatisieren und
Proviant packen:
Bewerten einer Internetseite
mit DIN ISO EN 9241-110.
2. Aufwärmen für den Aufstieg:
Anwenden der traditionellen
Konzepte auf eine App
3. Gefundene Artefakte bewerten:
Charakteristik mobiler Geräte
4. Besuch eines Eingeborenendorfes:
Typisches Nutzungsverhalten,
Best Practices im M-Commerce.
5. Route kartographieren und
die Umwelteinflüsse bewerten:
Jetzt können wir die zentrale
Frage nach neuen Normen
beantworten
Zur softwareergonomischen Bewertung NutzerInnen
fragen:
2 Sterne bei 68.418 Kundenrezensionen, d.h. dass 40.000 BenutzerInnen der Anwendung nur einen Stern gegeben haben. Mit der 90:9:1-Regel für soziale Netzwerke, nach der sich nur wenige Benutzer die Mühe machen, Produkte zu rezensieren, repräsentieren 40.000 schlechte Bewertungen mindestens eine halbe Million unzufriedene Kunden.

Grund für die schlechte Kritik:
Die drei am höchsten bewerteten Rezensionen haben alle nur einen Stern gegeben, und ihre Überschriften lauten:
»Slap« [»Ohrfeige«], (der erste Satz dazu: »Diese Typen entblöden sich nicht, bei ihren aktuellen Online-Abonnenten zusätzliche Gebühren abzuzocken.«)
»Nutzlose App, ich muss für die gleichen Inhalte zweimal bezahlen«
»Gebühren für Inhalte – gleich zweimal!?!«

Die App hat also nur ein Darstellungsproblem:
Der Zugang der mobilen App ist für Online-Abonnenten kostenlos: Sie müssen sich einfach nur mit ihrer vorhandenen Benutzernummer und ihrem Passwort einloggen.

Wenn es um das Lesen von E-Mails geht, verbringen die Anwender rund 15 Prozent mehr Zeit mit den Smartphones als mit dem Desktop-PC. Nahezu 50 Prozent der Nutzer können binnen zwei Sekunden bereits beurteilen, ob die empfangene Post unerwünscht ist, oder nicht.

Litmus hat zur Auswertung dieser Ergebnisse das Verhalten von über vier Millionen Menschen genauer untersucht. (Marco Schürmann | Quelle: winfuture.de, Juni 2010)
Durch das Smartphone wird multimediale Interaktion zur Zigarettenpause des 21. Jahrhunderts.

Rauchen? Nikotin auf 140 Zeichen?

Unterhaltung als Aufgabe

Randbedingungen mobiler Anwendungen:
Mobile Geräte werden in ständig wechselnden Kontexten gebraucht und die NutzerInnen können so zum Einen keine permanente Aufmerksamkeit für Inhalte, die über Mobil Devices übertragen werden, aufbringen und zum Anderen werden andere Anforderungen an solche Medien gestellt, wie es bei anderen Medien ggf. der Fall ist.

siehe Jakob Nielsens Alertbox (http://www.usability.ch/Alt_nav/Alertbox/NJ_20110705.htm)
Eingabe erfolgt mühsam mittels virtueller Tastatur reduziert auf Bildschirmgröße ohne haptisches
Feedback

Gegen Verdeckung (Fat Finger Problem)
Handgerechte Bildschirmgröße
Haptisches Feedback
... oder

Sprachein- und -ausgabe (cf. Siri, SpeakToIt, ...) ist schnell und einfach
(Hände und Augen frei für andere Tätigkeiten), wenn der Kontext es erlaubt.
Eingeborene = Smart-Natives

Verhalten von Smart-Natives (Smartphone-Intensiv-NutzerInnen) im Vergleich zur üblichen Smartphone-Nutzerung gibt Aufschluss über das
Verhalten aller Smartphone-NutzerInnen in der Zukunft.

Weltweit gibt es über vier Milliarden Mobiltelefone (Bitkom, 2010).
2012 werden 22% aller Deutschen ein Smartphone besitzen (2010 waren es 11%, GoSmart, 2011).
75 Prozent der Handybesitzer gehen nicht ohne das Gerät aus dem Haus.
42 Prozent haben es immer in Reichweite, sogar nachts (Synovite, 2009).
die Zeit, die wir mit Medien verbringen, wird innerhalb der nächsten zwei bis drei Jahre um ungefähr eine Stunde täglich ansteigen, dabei nimmt der Anteil der Intensivnutzer zu (GoSmart, 2011).
Der Anteil der Deutschen, die das stationäre Internet intensiv nutzen, wächst um 39 Prozent. Die Gruppe der Intensivnutzung von mobilem Internet über das Smartphone wird mit 83 Prozent den größten Zuwachs erfahren (GoSmart, 2011).
Jeder zehnte Deutsche wird dann täglich das mobile Internet nutzen (GoSmart, 2011).
Softwareergonomische Anforderung: Unterhaltung als Aufgabe angemessen erfüllen
Aufräumen mit Klischees über die Eingeborenen:

Die mobile Internetnutzung ist noch eher gering im Vergleich zum akuellen Hype des Themas.

WenignutzerInnen gehen heute durchschnittlich einmal die Woche über ihr Smartphone ins Internet.
Smart-Natives gehen im Durchschnitt drei mal die Woche mobil ins Internet (ausgenommen iPhone- NutzerInnen; alle Befragten überschätzen die Nutzung und geben an, das mobile Internet bis zu fünfmal die Woche zu nutzen, obwohl sie es laut Messung nur dreimal die Woche tun).

http://www.slideshare.net/ottogroup/go-smart-final080610
Softwareergonomische Faustregel:
Internetseiten müssen für das Smartphone/Tablet/etc. angepasst werden.
Typisches Verhalten in Bezug auf Domain:
Kurz-Info-Session:
Dauer: 3 min, Anzahl Klicks: 18
Startseite: bild.de
Info-Session:
Dauer: 10 min, Anzahl Klicks: 23
Startseite: google.de
Social-Media-Session:
Dauer: 9 min, Anzahl Klicks: 51
Startseite: facebook.net

Welche Auswirkungen hat das Smartphone auf die vier Phasen des Kaufprozesses:
1. Inspiration,
2. Evaluation,
3. Kauf und
4. After-Sales?

43% der Smart-Natives nehmen ihr Smartphone ganz bewusst beim Einkaufen mit, um sich unterwegs über Produkte oder Preise zu informieren.
37% der Smart-Natives nutzen Konsumentenpro- duktvergleichsseiten wie Ciao oder Dooyoo eher übers Smartphone oder zu gleichen Teilen übers Smartphone und über den stationaren Rechner.
20% der Smartphoner nutzen Mobile Payment, z. B. für Tickets oder Fahrkarten, heute schon mindestens genauso häufig über ihr Smartphone wie über den stationären Rechner.
11% haben hierfür eine Mobile-Payment-App installiert.
Inpirationsphase (Meinungsbildungsprozess):
Inspiration bedeutet, die AnwenderInnen in den Situationen abzuholen, in denen sie offen und interessiert für die jeweiligen Angebote sind.
Mobile Angebote können die Ortsgebundenheit für sich nutzen und das Inspirationserlebnis situationsspezifisch anreichern, beispielsweise mit Geo-locating, Augmented-Reality-Funktionen und Realtime-Anwendungen, bei denen in Echtzeit mit den NutzerInnen interagiert wird.

Best Practice: „ASK A STyliST”
Diese App der Modezeitschrift Glamour liefert jederzeit und überall kostenlose Modeberatung für ihre Nutzerinnen. Profi-StylistInnen bewerten nach Upload eines Fotos, ob das gewählte Outfit für den Anlass passend ist und wie es kombiniert werden könnte.
Evaluationsphase (Meinungsbildungsprozess):
Fast jeder zweite Smart-Native ruft während des Einkaufens im Laden über das Gerät Zusatzinformation zu Produkten oder Preisen ab. Hierzu dienen beispielsweise QR- und Barcode-Scanner, die die Hälfte der Smart-Natives und mehr als ein Drittel aller Smartphone-User bereits genutzt haben.
Die Verfügbarkeit von mobilem Internet über das Smartphone reichert den Meinungsbildungsprozess an und ermöglicht den Kaufinteressierten, online Konsu- mentenmeinungen (z. B. auf Konsumentenplattformen wie Ciao oder Dooyoo) mit einzubeziehen.
82 Prozent der Smart-Natives nutzen Meinungsplattformen zu Produkten und Angeboten. Ein Viertel der Smart­Natives hat sogar eine spezielle App dafür installiert.

Best Practice: "StickyBits”
Stickybits macht Barcodes zu Trägern von Kundengesprächen über Marken und Produkte. Per Barcode-Scan kann man ganz einfach vorhandene Meinungen und verknüpfte digitale Inhalte einsehen, eigene Statements hinzufügen und eigene Barcodes platzieren.
Kaufphase (einfache und transparente Bezahlsysteme):
Die Zahl der Nutzer von Mobile Payment wird weltweit von 74,4 Millionen im Jahr 2009 auf uber 190 Millionen bis 2012 ansteigen (Gartner, 2009).
Von den Smart-Natives haben schon knapp ein Viertel (23 Prozent) eine Bezahl-App für Tickets oder Fahrkarten.
Über die Bezahlfunktion hinaus müssen für ein umfassend positives M-commerce-Erlebnis alle Teilaspekte des Kaufprozesses wie Bestell- und Korrespondenzfunktionen und schneller check-out auf Smartphone auf spezifische Weise, einfach und convenient, befriedigt werden.

Best Practice: Starbucks Card
Die Starbucks Card macht das Smartphone zur Kundenkarte mit Bezahlfunktion. Sie ergänzt die „myStarbucks-App”, mit der man per Geo-Locating Starbucks-Filialen­finden, Getränke­Personalisieren, Informationen­zu Speisen und Getränken abrufen und Bonuspunkte sammeln kann.
After Sales Phase (mit den KundInnen in Kontakt bleiben):
Nach dem Kauf ist vor dem Kauf. SMS, MMS, E-Mail oder spezielle Tracking-Apps sind interessante Möglichkeiten, Informations-transparenz zu bieten und den KundInnen offenzulegen, wo die bestellte Ware ist und wann sie eintreffen wird (informative Unterstützung des Versandprozesses)
Die Web-2.0-Anwendungen des Internets, bei denen prinzipiell jeder seine Meinungen und Erfahrungen zu Produkten und Angeboten ungefiltert äußern und online stellen kann, sind hier zu modellieren. Sie ergänzen die Unternehmenskommunikation auf einer persönlicheren Ebene und müssen vom Handel als relevante Größe wahrgenommen werden. Hier besteht die Chance, die Strahlkraft zufriedener Kundenmeinungen zum positiven Image der Marke beitragen zu lassen und langfristige Kundenbeziehungen aufzubauen. Digital verbreitete Meinungen nach dem Kauf beeinflussen gleichzeitig andere KundInnen vor dem Kauf. Das verdeutlicht, dass die einzelnen Kaufprozess-phasen immer als Ganzes verstanden und in ihrer Gesamtheit an die Smartphonenutzung angepasst werden müssen.

Best Practice: "Lufthansa"
Lufthansa bindet den Flugprozess in den gesamten Reisekontext ein, indem die App Information rund um den Flug, Flugbuchung, digitales Einchecken und papierlosen Boardingpass, sowie Sitzplatzwahl bietet. Weitere App-Services unterstützen bei der Vorbereitung und Durchführung der Reise.
Maximalforderung:
eigene App statt Internetseiten-angebot für mobile Geräte,
je enger ein Design beschränkt ist, um so mehr muss man die Nutzungsoberfläche "aufpolieren".
http://www.usability.ch/Alt_nav/Alertbox/NJ_20110328.htm
AllKpop (vorher) macht eine Menge Dinge richtig:

Was am wichtigsten ist, die Website unterstützt eine Thematik, die perfekt zur mobilen Nutzung passt: Klatsch über Promis. Zeit vertreiben ist eine Killer-App für Handys. Viele andere Aufgaben ergeben im mobilen Umfeld wenig Sinn; egal wie großartig das Design sein mag, die mobilen Versionen werden kaum genutzt und es ist Zeitverschwendung, sie zu gestalten.
Fast genauso wichtig: Sie hat eine eigene mobile Version. Arbeitsplatzrechner und mobile Geräte sind so verschieden, dass es nur einen Weg gibt, ein großartiges Benutzungs-erlebnis anzubieten: den Bau von zwei völlig getrennten Designs – normalerweise mit weniger Funktionen in der mobilen Version.
Weil der Server selber merkt, ob die Benutzerin ein mobiles Gerät oder einen Arbeitsplatzrechner verwenden, müssen die BenutzerInnen ihre Version nicht manuell auswählen. Wie man aus Tests weiss, sinkt die Usability dramatisch, wenn mobile und vollständige Website unterschiedliche Web-Adressen haben, weil die BenutzerInnen dann oft bei der falschen Benutzeroberfläche landen.
Die Berührungs-Zielflächen für die Headlines sind relativ gross.
Am Anfang der Headlines stehen gewöhnlich Schlüsselwörter mit inhaltlicher Bedeutung. Bei dieser Website enthalten die Namen der Popstars die wichtigste Information für die Benutzer, und diese stehen normalerweise vorn.
Auszug aus den 10 Verbesserungen von Jakob Nielsen:
Verfasserzeilen gehören nicht zur Primärinformation,
Datum nur einmal anzeigen schafft Platz für Photos,
Bezeichnung des Drop-down-Menüs statt der blossen Anzeige durch ein Dreieck. (Es befindet sich im Originaldesign knapp über der Suche – eine unauffällige Präsentation, die die meisten Benutzer wohl übersehen.) Je nachdem, welche Befehle sich bereits im Menü befinden, dürfte ein anderer Name besser sein.
Komplette Headlines anstelle der abgeschnittenen. Dies ist wahrscheinlich die grösste Verbesserung im Redesign, weil die vollständige Headline eine wesentlich grösseres Informationsvolumen enthält als die wenigen Wörter, die auf der realen Website sichtbar sind.
Bessere Überfliegbarkeit durch Hervorheben der Namen der Popstars in den Headlines.
Ein noch grösseres Informationsvolumen wird durch das Anzeigen einer kurzen Zusammenfassung der Story (eines »Dek«) unter jeder Überschrift erreicht.
Fazit von Jakob Nielsen

Das mobile Nutzungserlebnis verschärft die Usability-Richtlinien (http://www.usability.ch/Alt_nav/Alertbox/NJ_20111107.htm)

Viele Richtlinien für mobiles Design ähneln denen für PC-gestütztes Design, aber die Interpretation für mobiles Design ist viel gnadenloser.

Unterschied zwischen dem Schreiben für Desktop-Websites und mobilen Websites:
Texte für Desktop-Websites müssen knapp gehalten werden.
Texte für mobile Websites muss noch knapper gehalten werden.

Die übergeordnete Richtlinie ist die gleiche:
Reduzieren Sie sekundäre Informationen. Der Unterschied liegt im Detail—manche Informationen, die für eine Desktop-Website akzeptabel wären, sollten bei einer mobilen Website oder App entfernt werden.
Insel-Metapher (5):
Medizinische Betreuung, d.h. wissenschaftliche Sicht:
... oder
Einleitung für Frauen
Einleitung für Männer
http://www.slideshare.net/ottogroup/go-smart-final080610
Siehe Jakob Nielsens Alertbox (http://www.usability.ch/Alt_nav/Alertbox/NJ_20110705.htm)
Charakteristika




Smartphone: Tablet:
4" Touchscreen, - 10" Touchscreen,
vielfältige Sensoren, - vielfältige Sensoren.
fakultativ Stylo, Mini-Tastatur.
Via Scan und Barcode wird der Preis ermittelt und automatisch vom Guthaben abgezogen. (Bild: Starbucks)
Aber im Detail gilt es neue Regeln:
Satellitenphoto zu der Steilheit der Hänge, d.h. welche Softwarebereiche interessieren hier:
Neue Proviantration:
Gestaltgesetze
Die Eingeborenen führen einen Tanz vor

Ausgangslage:
Websiten werden auf eine Auflösung von 1024 x 768 px konzipiert zur Vermeidung störender Scrollbalken im horizontalen Bereich. Die Auflösung von 1024 x 768 px eignet sich für Darstelung von Websiten auf Endgeräten wie PCs.

Ausweg für mobile Geräte mit viel kleinenen Bildschirmen:
Responsive Webdesign (Responsive = reaktionsfähig) passt automatisch das Design einer Website an die Umgebung, wie Bildschirmauflösung und die Plattform sowie an das Verhalten des Users an. Die Umsetzung behilft sich an einem Mix aus Gestaltungsraster, Layouts, Images und den inteligenten Einsatz von CSS. Technisch ist aber alles ein und dieselbe Website, die aber unter der Erkennung der Auflösung und der Plattform in ein anders Gestaltungsraster/Design übergeht.

Vorteil:
es wird nur eine Website entwickelt und gepflegt.

Aufwand bzw. Trade-Off:
Zu berücksichtigen ist hierbei die Usability und die User Experience der BesucherInnen. So gibt es auf Smartphone keinen Einsatz einer Mouse—diese Geräte werden meist mit dem Finger bedient.
Ausserdem gibt es keine Mouse-Over für Links, die das Erkennen eines Links vereinfacht und signalisieren.
Auch ist es möglich gezielt Inhalte aus- oder einzublenden (z. B. bei einer Pizzaservice-Website auf einem Computer bieten Sie über die Website Ihre Produkte über großzügige Bilder an, auf einem Smartphone jedoch begrenzen Sie Ihr Produkt auf ein Bild, aber stellen sofort ihre Telefonnummer und die Speisekarte zur Verfügung, denn das vereinfacht es Ihren BesucherInnen sofort bei Ihnen anzurufen und zu bestellen).

http://fluidmedia.de/blog/responsive-design/ist-responsive-webdesign/
Umsetzung: Responsive Webdesign
Skalierbare Benutzeroberfläche (oder kurz ZUI für "Zoomable User Interface")
kommt aus dem IT-Bereich und beschreibt eine Grafische Benutzeroberfläche (GUI) mit der zusätzlichen Möglichkeit, einzelne Elemente oder die gesamte Oberfläche zu zoomen. Ein ZUI kann unterschiedliche Skalierungsgrade annehmen, die vom Benutzer gesteuert werden. Ein ZUI erfordert eine zusätzliche Eingabe vom Benutzer, um Zoom und Pan zu kontrollieren.
Das ZUI wird als intuitivere und flexiblere Alternative zum klassischen GUI gesehen. Der Aufwand für die Entwicklung von ZUIs ist höher, weshalb momentan mehr Arbeit in die Weiterentwicklung von herkömmlichen GUIs gesteckt wird.
Die Anforderungen einer Benutzerschnittstelle sind nach der internationalen Richtlinie ISO 9241-10ff geregelt.
http://de.wikipedia.org/wiki/Skalierbare_Benutzeroberfläche
Computerlingustischer Ausblick:
Stochastische Modelle erlauben
vages Zeigen mittels Gesten
Grosses Thema: Gesten statt Mausen

Unser Fokus:
Mouse-over durch neue Geste ersetzen
- Wie?
Wie sehen die Bedienoberflächen der Zukunft aus?
Menue-Leisten sind zu mühsam gestisch zu bedienen
(cf. Prezi vs. Powerpoint/Keynote)
(Etwas Off-Topic ;-)
Full transcript