Agenda: 1. Begrifflichkeiten 2. Usability-Standards 3. User Interface Design Patterns 4. Datenvisualisierungen Vorlesung "Open Data: Datenmanagement und Visualisierung" an der Universität Bern im Frühlingssemester 2014: http://www.iwi.unibe.ch/content/studium/veranstaltungen/resource/open_data_datenmanagement_und_visualisierung/index_ger.html

1. Open Data:
Datenmanagement und Visualisierung
Visualisierungen von Daten
Termin 5, 20. März 2014
Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach
Universität Bern, Institut für Wirtschaftsinformatik
Abteilung Informationsmanagement
Forschungsstelle Digitale Nachhaltigkeit

2. FS 2014
Open Data > 05: Visualisierungen von Daten
2
Infos zur Vorlesung
Open Data Apps
> Bereits 22 Gruppen angemeldet
> Bitte Gruppenbildung in ILIAS so
rasch als möglich abschliessen
> Wenn jemand eine Gruppe sucht,
bitte im Forum melden
Prüfung Open Data Vorlesung
> Donnerstag, 5. Juni 2014
14:45-16:15h Hauptgebäude, 201

3. FS 2014
Open Data > 05: Visualisierungen von Daten
3
05: Visualisierungen von Daten
Donnerstag, 20. März 2014
> Informationsmehrwert von Visualisierungen, Human Interaction,
Usability, User Experience, GUI Design, Wahl von Formen,
Strukturen, Symbolen und Farben, Navigationsstrukturen,
Diagrammformen, Ordnen von Informationen, Beschriftungen
Gastreferat im zweiten Teil der Vorlesung:
> Prof. Dr. Edy Portmann, Assistenzprofessor
am Institut für Wirtschaftsinformatik
> Interaktive Datenvisualisierung:
— Kognitive Wahrnehmung und Landkarten
— Wissensstrukturen
— Big Data Visualisierungen mit Graphdatenbanken
— Schlussfolgerungen durch interaktive Modelle

4. FS 2014
Open Data > 05: Visualisierungen von Daten
4
Agenda
1. Begrifflichkeiten
2. Usability-Standards
3. User Interface Design Patterns
4. Datenvisualisierungen

5. FS 2014
Open Data > 05: Visualisierungen von Daten
5
Begrifflichkeiten
> Usability: Software-Ergonomie, Gebrauchstauglichkeit, Bedienbarkeit
> User Experience: Nutzererlebnis oder Nutzungserlebnis
> Interaction Design: Gestaltung der Funktion und des Verhalten
> Interfacedesign: Gestaltung von Benutzeroberflächen
> Screendesign: Präsentation von Inhalten auf Monitoren
> User Interface: Benutzerschnittstelle
> Graphical User Interface (GUI): Grafische Benutzeroberflächen
> Responsive Webdesign: Anpassung der Website auf Endgerät
> Accessibility: Barrierefreiheit

6. FS 2014
Open Data > 05: Visualisierungen von Daten
6
Agenda
1. Begrifflichkeiten
2. Usability-Standards
3. User Interface Design Patterns
4. Datenvisualisierungen

7. FS 2014
Open Data > 05: Visualisierungen von Daten
7
Relevante ISO-Standards
> Stufen der Nutzungsqualität von interaktiven Systemen:
Quelle: Leitfaden Usability, DAkkS Deutsche Akkreditierungsstelle, 2010
http://www.dakks.de/sites/default/files/71-SD-2-007_Leitfaden%20Usability%201.3.pdf

8. FS 2014
Open Data > 05: Visualisierungen von Daten
8
DIN EN ISO 9241 – 110:
Grundsätze der Dialoggestaltung
Die sieben Gestaltungsgrundsätze gemäss DIN EN ISO 9241 Teil 110:
1. Aufgabenangemessenheit
2. Selbstbeschreibungsfähigkeit
3. Lernförderlichkeit
4. Steuerbarkeit
5. Erwartungskonformität
6. Individualisierbarkeit
7. Fehlertoleranz
Quelle: DIN EN ISO 9241-110: Europäisches Komitee für Normung, Ergonomie der Mensch-System-Interaktion. Teil 110:
Grundsätze der Dialoggestaltung, 2006. Deutsches Institut für Normung, Berlin.

9. FS 2014
Open Data > 05: Visualisierungen von Daten
9
DIN EN ISO 9241 – 110:
1. Aufgabenangemessenheit
"Ein Dialog ist aufgabenangemessen, wenn er den Benutzer unterstützt,
seine Arbeitsaufgabe effektiv und effizient zu erledigen."
> Erläuterungen:
— Effektivität: Vollständigkeit und Genauigkeit, mit der ein Benutzer ein
bestimmtes Ziel erreichen kann
— Effizienz: Aufwand des Benutzers im Verhältnis der Aufgabe
> Umsetzung:
— Nur notwendige Informationen anzeigen, keine Informationsüberflutung
— Standardwerte (z.B. aktuelles Datum) automatisch eintragen
— Texteingabe automatisch ins erste Eingabefeld positionieren
— Logische Anordnung der Eingabefelder (z.B. Adresse)
> Positive oder negative Beispiele?
> Wichtig: Entwickler muss Arbeitsabläufe der Benutzer kennen
Quelle: DIN EN ISO 9241-110: Grundsätze der Dialoggestaltung, 2006
Aufgabenangemessenheit http://www.fit-fuer-usability.de/archiv/aufgabenangemessenheit/

10. FS 2014
Open Data > 05: Visualisierungen von Daten
10
DIN EN ISO 9241 – 110:
2. Selbstbeschreibungsfähigkeit
"Ein Dialog ist in dem Maße selbstbeschreibungsfähig, in dem für den
Benutzer zu jeder Zeit offensichtlich ist, in welchem Dialog, an welcher
Stelle er sich befindet, welche Handlungen unternommen werden können
und wie diese ausgeführt werden können."
> Orientierung:
— Wo komme ich her?
— Wo bin ich?
— Wo kann ich hin?
> Beherrschbarkeit/Antizipierbarkeit: Links, Navigationspunkten und
Buttons richtig beschriften und Erwartung einhalten
> Rückmeldung: nach jeder Aktion Feedback geben, schafft Sicherheit
> Hilfestellung: Möglichkeit für weitere Informationen und Hilfe geben
Quelle: DIN EN ISO 9241-110: Grundsätze der Dialoggestaltung, 2006
http://wifimaku.com/online-marketing/relaunch-und-usability/usability-in-der-konzeptionsphase/

11. FS 2014
Open Data > 05: Visualisierungen von Daten
11
DIN EN ISO 9241 – 110:
3. Steuerbarkeit
"Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf zu
starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel
erreicht ist."
> Möglichkeiten dem Benutzer Steuerbarkeit zu vermitteln:
— Möglichkeiten, Medien zu nutzen oder auszuschalten
— Alternative Navigationsmöglichkeiten
— Sicherstellung der korrekten Funktionsweise der Zurück-Schaltfläche
— Jederzeit mögliche Erreichbarkeit der Startseite
— Abbruchmöglichkeiten
> Beispiele:
— Eine Tabelle hat Buttons, mit deren Hilfe die Informationen spaltenweise sortiert
werden können.
— Eine Suchmaschine bietet die Möglichkeit, die Zahl der auf einer Seite
angezeigten Treffer einzustellen.
— Ein Tool ermöglicht es den Benutzern, einen Dateidownload zu unterbrechen und
später fortzusetzen.
— Umfangreiche Grafiken werden als "Thumbnails" dargestellt, die bei Bedarf vom
Benutzer vergrößert werden können.
Quellen: http://www.handbuch-usability.de/steuerbarkeit.html
http://www.kommdesign.de/texte/din.htm#Steuerbarkeit

12. FS 2014
Open Data > 05: Visualisierungen von Daten
12
DIN EN ISO 9241 – 110:
4. Erwartungskonformität
"Ein Dialog ist erwartungskonform, wenn er konsistent ist und den
Merkmalen des Benutzers entspricht, z.B. den Kenntnissen aus dem
Arbeitsgebiet, der Ausbildung und der Erfahrung des Benutzers
sowie den allgemein anerkannten Konventionen."
Kognitive und verhaltens- sowie lernpsychologische Faktoren:
> Konsistenz: Erfassen von Zusammenhängen wenn Muster
erkannt wird (interne Konsistenz)
> Erfahrung: Anwendungswissen aus älteren Versionen oder
anderen Programmen hilft sich zurechtzufinden
Beispiele:
> Einheitliche Gestaltung der jeweiligen Software
> Ähnliche Icons in unterschiedlichen Programmen
Quelle: http://www.handbuch-usability.de/erwartungskonformitaet.html

13. FS 2014
Open Data > 05: Visualisierungen von Daten
13
DIN EN ISO 9241 – 110:
5. Fehlertoleranz
"Ein Dialog ist fehlertolerant, wenn das beabsichtigte
Arbeitsergebnis trotz erkennbar fehlerhafter Eingaben entweder mit
keinem oder mit minimalem Korrekturaufwand seitens des
Benutzers erreicht werden kann."
Potentielle Fehler sind:
> Vermeidbare Fehler: Programmierfehler, Navigationsfehler,
fehlerhafte Eingabemöglichkeiten auf Formularen etc.
> Bekannte, nicht vermeidbare Fehler: Tippfehler, versehentlich
Abschicken des Formulars -> Validieren der Eingaben
> Nicht antizipierbare Fehler: schwer identifizierbare
Programmierfehler aufgrund unerwarteten Besucherverhaltens
-> Debugging-Meldung
Quelle: http://www.handbuch-usability.de/fehlertoleranz.html

14. FS 2014
Open Data > 05: Visualisierungen von Daten
14
DIN EN ISO 9241 – 110:
6. Individualisierbarkeit
"Ein Dialog ist individualisierbar, wenn das Dialogsystem
Anpassungen an die Erfordernisse der Arbeitsaufgabe, individuelle
Vorlieben des Benutzers und Benutzerfähigkeiten zulässt."
Möglichkeiten für die Individualisierung von Anwendungen sind:
> Anpassung der Darstellung: Schriftgrösse, Farben, Formen
> Anpassung von Funktionen: Anwendungsumgebung flexibel
gestalten, zu-/abschalten von Funktionen bspw. in Menu-Bars
> Anpassung von Werten: Zeitzone, Sprache, Ort, Währung,
Masseinheiten, Formate, Bandbreite etc.
> Anpassung von Standard-Eingaben: Default-Werte eingeben
> Anpassung von Abläufen (Workflows): Organisations-
spezifische Geschäftsprozesse abbilden
Quelle: http://www.fit-fuer-usability.de/archiv/individualisierbarkeit/

15. FS 2014
Open Data > 05: Visualisierungen von Daten
15
DIN EN ISO 9241 – 110:
7. Lernförderlichkeit
"Ein Dialog ist lernförderlich, wenn er den Benutzer beim Erlernen
des Dialogsystems unterstützt und anleitet."
> Mentalen Modelle der Benutzer aktivieren
> Im Grundsatz gilt: "Je seltener ein Besucher eine Website
besucht, desto weniger ist es ihm zuzumuten, dass er ihre
Bedienung erst erlernen muss."
Lernförderliche Anwendungen beinhalten:
> Frequently Asked Questions
> Dialogsequenzen durch Dialogboxen
> Tutorials, Hilfeinformationen, Assistenten, Guided Tour
Quellen: http://www.fit-fuer-usability.de/archiv/lernfoerderlichkeit/
http://www.handbuch-usability.de/lernfoerderlichkeit.html

16. FS 2014
Open Data > 05: Visualisierungen von Daten
16
Agenda
1. Begrifflichkeiten
2. Usability-Standards
3. User Interface Design Patterns
4. Datenvisualisierungen

17. FS 2014
Open Data > 05: Visualisierungen von Daten
17
Design Patterns
Quelle: http://ui-patterns.com/patterns Quelle: http://developer.yahoo.com/ypatterns/

18. FS 2014
Open Data > 05: Visualisierungen von Daten
18
Breadcrumbs
Problem summary: The user needs to know his location in the website's
hierarchical structure in order to possibly browse back to a higher level in the
hierarchy.
Usage
> Use when the structure of the website follows a strict hierarchical structure
of similar formatted content.
> Use when the structure of the site is parted in to sections which can be
divided into more subsections and so on
> Use together with some sort of main navigation.
Quelle: http://ui-patterns.com/patterns/Breadcrumbs

19. FS 2014
Open Data > 05: Visualisierungen von Daten
19
Steps Left
Problem summary: The user is about to go
through the process of filling in data over several
steps and is in need of guidance.
Usage
> Use when the user is about to go through a
longer process of giving data to the system that
is longer than two screens (steps).
> Use when the steps of a process is so long that
the user might get the impression that it will go
on forever without the guidance of steps.
> Do not use when there is only 1 or 2 steps in
submitting data to the website.
> Do not use when the process of filling out data
is easy foreseeable.
Quelle: http://ui-patterns.com/patterns/StepsLeft

20. FS 2014
Open Data > 05: Visualisierungen von Daten
20
Tool Tip Invitation
Problem summary: Designer needs to cue the user about what will happen if they
click the mouse on the hovered object.
Usage
> You want to invite the user to click or interact with the object being hovered over.
> You want to make it clear that something will happen when the user clicks on the
object being hovered over.
> The user is interacting directly with the object (e.g., inline editing).
> You need a textual description to make it explicit what will happen when the user
interacts with the object.
> You want to entice the user to interact with the feature.
Quelle: http://developer.yahoo.com/ypatterns/richinteraction/invitation/tooltip.html

21. FS 2014
Open Data > 05: Visualisierungen von Daten
21
Inplace Editor
Problem summary: The user needs to easily and
quickly edit a value on a page.
Usage
> Use when the user only needs to edit one value
(or very few) and not many
> Use when the value the user needs to edit is of
a simple format, i.e. a text string, in a dropdown
box.
> Use when you have already authenticated the
user (he is logged in) or if you do not care about
his or her authenticity.
> Use if you want the user to be able to edit a
value without actually going to an administration
page, but by staying on the same page.
Quelle: http://ui-patterns.com/patterns/InplaceEditor

22. FS 2014
Open Data > 05: Visualisierungen von Daten
22
Autocomplete
Problem summary: The user needs to enter
information into a text box which is prone to be mis-
typed, hard to remember, or ambiguous.
Usage
> Use to help ambiguity-issues, when an item can
be entered in multiple ways
> Use when the type of information entered can
readily be matched with a specific piece of
information in the system.
> Use when autocomplete suggestions can be
pulled from a set of data that is manageable in
size.
> Use when input speed is an important goal
> Use when input accuracy is an important goal
Quelle: http://ui-patterns.com/patterns/Autocomplete

23. FS 2014
Open Data > 05: Visualisierungen von Daten
23
Agenda
1. Begrifflichkeiten
2. Usability-Standards
3. User Interface Design Patterns
4. Datenvisualisierungen

24. FS 2014
Open Data > 05: Visualisierungen von Daten
24
IBM Many Eyes
Quelle: Many Eyes - An experiment brought to you by IBM Research and the IBM Cognos software group
http://www.many-eyes.com

25. FS 2014
Open Data > 05: Visualisierungen von Daten
25
IBM Many Eyes
Quelle: Many Eyes - An experiment brought to you by IBM Research and the IBM Cognos software group
http://www.many-eyes.com

26. FS 2014
Open Data > 05: Visualisierungen von Daten
26
Open Source Statistics Software R
Quelle: The R Project for Statistical Computing
http://www.r-project.org

27. FS 2014
Open Data > 05: Visualisierungen von Daten
27
Open Source JavaScript Lib Polymaps
Quelle: Polymaps
http://www.polymaps.org

28. FS 2014
Open Data > 05: Visualisierungen von Daten
28
Open Source JavaScript Library D3.js
Quelle: D3.js
http://www.d3js.org

29. FS 2014
Open Data > 05: Visualisierungen von Daten
29
D3: Reingold–Tilford Tree
Quelle: http://bl.ocks.org/mbostock/4339184

30. FS 2014
Open Data > 05: Visualisierungen von Daten
30
D3: Radial Reingold–Tilford Tree
Quelle: http://bl.ocks.org/mbostock/4063550

31. FS 2014
Open Data > 05: Visualisierungen von Daten
31
D3: Hierarchical Edge Bundling
Quelle: http://bl.ocks.org/mbostock/7607999

32. FS 2014
Open Data > 05: Visualisierungen von Daten
32
D3: Visualisierte Interessenbindungen
im Schweizer Parlament
Quelle: NZZ, 4. März 2014
http://www.nzz.ch/aktuell/schweiz/die-daten-hinter-der-visualisierung-1.18255344

33. FS 2014
Open Data > 05: Visualisierungen von Daten
33
D3: Cushion Treemaps
Quelle: Jarke J. van Wijk and Huub van de Wetering, Cushion Treemaps: Visualization of Hierarchical Information, 1999
http://www.win.tue.nl/~vanwijk/ctm.pdf

34. FS 2014
Open Data > 05: Visualisierungen von Daten
34
D3: Zoomable Treemaps
Quelle: http://mbostock.github.io/d3/talk/20111018/treemap.html

35. FS 2014
Open Data > 05: Visualisierungen von Daten
35
D3: Obama’s 2012 budget proposal
Quelle: http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/

36. FS 2014
Open Data > 05: Visualisierungen von Daten
36
D3: Clustered Force Layout I
Quelle: http://bl.ocks.org/mbostock/1747543

37. FS 2014
Open Data > 05: Visualisierungen von Daten
37
D3: Tax Rates of U.S. Companies
Quelle: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=0

38. FS 2014
Open Data > 05: Visualisierungen von Daten
38
D3: Circle Packing
Quelle: http://bl.ocks.org/mbostock/4063530/

39. FS 2014
Open Data > 05: Visualisierungen von Daten
39
D3: Zoomable Circle Packing
Quelle: http://bl.ocks.org/mbostock/7607535/

40. FS 2014
Open Data > 05: Visualisierungen von Daten
40
D3: 2014 Budget der Stadt Bern
Quelle: http://bern.budget.opendata.ch/

41. FS 2014
Open Data > 05: Visualisierungen von Daten
41
Sankey Diagram
Quelle: https://en.wikipedia.org/wiki/Sankey_diagram/

42. FS 2014
Open Data > 05: Visualisierungen von Daten
42
D3: Sankey Diagrams
Quelle: http://bost.ocks.org/mike/sankey/

43. FS 2014
Open Data > 05: Visualisierungen von Daten
43
D3: Finanzausgleich im Kanton Bern
Quelle: http://be-fa.budget.opendata.ch/

44. FS 2014
Open Data > 05: Visualisierungen von Daten
44
D3: Bilevel Partition
Quelle: http://bl.ocks.org/mbostock/5944371

45. FS 2014
Open Data > 05: Visualisierungen von Daten
45
D3: Deutscher Bundeshaushalt 2013
Quelle: http://www.bundeshaushalt-info.de/startseite/#/2013/soll/ausgaben/einzelplan.html

46. FS 2014
Open Data > 05: Visualisierungen von Daten
46
Polymaps: Choropleth Map
Quelle: http://polymaps.org/ex/statehood.html

47. FS 2014
Open Data > 05: Visualisierungen von Daten
47
Polymaps: Krankenkassenprämien
Quelle: http://healthinsurance.opendata.ch

48. FS 2014
Open Data > 05: Visualisierungen von Daten
48
Parallel Coordinates
Quelle: Alfred Inselberg, Multidimensional Detectives, 1997
http://www.cs.ucdavis.edu/~ma/ECS289H/papers/Inselberg1997.pdf

49. FS 2014
Open Data > 05: Visualisierungen von Daten
49
D3: Parallel Coordinates
Quelle: http://syntagmatic.github.io/parallel-coordinates/

50. FS 2014
Open Data > 05: Visualisierungen von Daten
50
D3: Nutrient Contents
Quelle: http://exposedata.com/parallel/

51. FS 2014
Open Data > 05: Visualisierungen von Daten
51
Weitere Code-Beispiele von D3.js
http://bl.ocks.org/mbostockhttps://github.com/mbostock/d3/wiki/Gallery

52. FS 2014
Open Data > 05: Visualisierungen von Daten
52
Prof. Dr. Hans Rosling
Quelle: The River of Myths by Hans Rosling
http://www.youtube.com/watch?v=OwII-dwh-bk

53. FS 2014
Open Data > 05: Visualisierungen von Daten
53
Prof. Dr. Hans Rosling
Quelle: Videos on Gapminder
http://www.gapminder.org/videos/

54. FS 2014
Open Data > 05: Visualisierungen von Daten
54
Gapminder
Quelle: Gapminder
http://www.gapminder.org

55. FS 2014
Open Data > 05: Visualisierungen von Daten
55
Smartvote
> Smartmap der
Grossratskandidierenden
2014
> 1905 Kandidierende im
Kanton Bern
Quelle: Smartmap
http://www.smartvote.ch/14_be_leg/smartmap/candidates

56. FS 2014
Open Data > 05: Visualisierungen von Daten
56
Conclusions
> "Statistics is about storytelling with data."
> "Always let the data do the talking."
> "Lookout for patterns and relationships
(comparisons and correlations)."
Quelle: Visualize This: The FlowingData Guide to Design, Visualization, and Statistics
http://flowingdata.com/visualize-this/