Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau

Tutorial “Interactive Technologies”

Marion Koelle
Passau, Germany

Tutorial
“Interactive Technologies”

Marion Koelle

in addition to
Prof. Dr. Matthias Kranz: Lecture “Interactive Technologies”
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Poster Presentation

Image source: http://www.navjotpawera.com/blog/wp-content/uploads/2011/06/paper-prototypes2.jpg

We are doing a “Design Fare”. Each group gets one section of the white board.

15 + 15 Minutes
Coordinate with your partner: one of you stays at the “booth” to receive feedback,
the other one makes a tour and visits the other posters. Change roles after 15
Min.
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Today’s Topic:

HEURISTICS & HEURISTIC

EVALUATION
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Heuristic Evaluation

“The goal of heuristic evaluation is to find the usability problems in a user

interface design so that they can be attended to as a part of an iterative
design process.”
(Nielsen, J.: Chapter 5 – Usability Heuristics. In: Usability Engineering, p. 155-163, Academic Press, San Diego, California, 1994.)

Image sources: http://1.bp.blogspot.com/-j-

Jacob Nielsen jRVml2wZk/TqUR6h1mLsI/AAAAAAAAAIE/8ME63EXxH20/s1600/jakob_nielsen.png
http://www.teleread.com/wp-content/uploads/2009/03/jakob-nielsen-thumbs-up.jpg

4
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Heuristic Evaluation | Video

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 1

Visibility of the system status

(Sichtbarkeit des Systemzustandes)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 1

2 Minutes
Discuss with your neighbour:

How can we
make the system
status visible?
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 1

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 1

http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 2

Match between system and the real world

(Übereinstimmung zwischen System und der Realwelt)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 2

Start! Stop!

Good or bad usability? – What do you think …

11
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 2

Start! Stop!

Bildquelle: http://www.sxc.hu

Good or bad usability? – What do you think …

12
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 2

Start! Stop!

Bildquelle: http://www.sxc.hu

Good or bad usability? – What do you think …

13
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 3

User control and freedom

(Nutzerkontrolle und –freiheit)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 3

The mailbox in Android 4 allows to

delete mail by flinging it away.

1 Minute
Discuss with your neighbour:

What is
important for
user control?
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 3

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 4

• [Examples]

Consistency and Standards

(Konsistenz und Standards)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 4

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 5

Error Prevention
(Fehlerprävention)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 5

2 Minutes
Discuss with your neighbour:

How can error

prevention be
realised?
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 5

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 6

Recognition rather than recall

(Erkennen statt Erinnern)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 6

Practical hint | Adding custom suggestions to a
search dialog.

Basic Idea:
• SQLiteDatabase & Content Provider
• System performs a query to the Content Provider
based on the text entered (so far) by the user
• Content Provider returns a Cursor that points to all
matching suggestions.
• Suggestions are displayed by the system.

http://developer.android.com/guide/topics/search/addi
ng-custom-suggestions.html#TheBasics
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 7

Flexibility and efficiency of use

(Flexibilität und Effizienz)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 7

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 8

Aesthetic and minimalist design

(Ästhetik und minimales Design)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 8

Think about Android’s Action Bar.

Apart from icon design - how can minimalist design be
implemented there?

1 Minute
Discuss with your neighbour.
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 8

Hide all
functionalities
that are
currently not
needed!
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 9

Help users recognize, diagnose, and recover from errors

(Hilfestellung bei Fehlern: Erkennen, Diagnostizieren und Rückgängig
machen von Fehlern)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 9

What happened?

What can I do now?

Where can I get more
Information?

Source: http://www.tingzabraham.com/Information-Architecture/usability/usability-heuristics-part-9-help-users-recognize-diagnose-
and-recover-from-errors/
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 9

Some further reading: https://developer.android.com/design/style/writing.html

Brief and easy to

understand.

Positive
Language!

What are the

consequences?
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 10

Help and documentation

(Hilfe und Dokumentation)
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 10

http://www.android-app-patterns.com/
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

10 Usability Heuristics | Heuristic 10

Help and Documentation

A good help is …

• Focused on tasks
• Easy to find
• Contextual!
• Brief
• Well structured, e.g. in categories
• Searchable

But, make sure to…

• Adapt to the user’s needs (expert

users vs. novices)
• Provide only help, where help is
needed or requested!
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Repetition | What makes a good App?

1. Functionality

2. Reliability (free of bugs)

3. Usability

4. Likeability
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Repetition | What makes a good App?

1. Functionality

2. Reliability (free of bugs) Relevant for

3. Usability Grading.
4. Likeability
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

General Schedule
Day Time Topics
Mon, 13.03.2014 Introduction, HCI Basics
Tue, 11.03.2014 Ideation, Sketching & Storyboards
Wed, 12.03.2014 Paper Prototyping

Concept Development

Mon, 24.03.2014 Design Guidelines and Principles

Tue, 25.03.2014 Testing with Users
Today How to present? & Time for questions!

Implementation

Wed, 23.04.2014 Project Presentation

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Deadlines
Day Time Topics
Today Time for questions!
31.03.-04.04.2014 Communication and Feedback via Blog & Email.
• Present your project’s current status: one entry per
07.04.-11.04.2014 group per week
• Give constructive Feedback: (at least) one comment
14.04.-18.04.2014 at another group’s work per week
• Specific questions: per email (marion.koelle@uni-
passau.de). I will try to answer as soon as possible.

Mon, 21.04.2014 12:00 Code submission (GIT + .zip file) per

email to mmi@eislab.net
Tue, 22.04.2014 12:00 Slides submission per email to
mmi@eislab.net
Wed, 23.04.2014 Project Presentation
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

App Implementation | Formal Criteria

 Using Android 4.0 platform

 App following the Android style guide

(see UI design slides and developer.android.com) and noticeable use of
knowledge presented in the tutorial

 You are allowed to use any public available Java libraries in your project.

 You are allowed to reuse code, e.g. from the Internet, but you have to
document it in the code and in your documentation.

 Code documentation (complete JavaDoc and additional inline comments

where necessary)

39
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

App Implementation | Functional Requirements

 Basic functionality: navigation between detail + content

 Content integration (based on lecture slides)

 Help screen/splash screen

 Any settings/preferences that are required to be set shown on first run

 Localization (English/German) & themed

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Evaluation

• Early feedback during development phase

– With at least 8 students (2+2+2+2)
– Based on the paper prototype
– Incorporate feedback in further design process

• App evaluation
– With at least 4 + 4 students
– Motivate design decisions. (Early + intermediate Feedback)
– Severe problems identified in the evaluation must be fixed
– Suggestions and other feedback (e.g. ideas for future versions) should be
included in the report

41
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Written Report
• 10 pages (A4, Times 10 points, single-space, 2.5cm border all sides)
• Rough structure (plus/minus a few lines will be ok)
– 1 page: topic description
– 2 pages: app structure/architecture
– 4 pages: iterative design process
– 2,5 pages: evaluation/feedback
– 0,5 page: conclusion

• Highlight references to theoretical background (lecture)

• Use Word’s built-in reference manager (APA style – no other format)
• Submit as Word file incl. graphics (no other format)

• Overview of task responsibility in your group as separate attachment

– Who was responsible for which sub-task?
– Which parts were completed together?

42
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Presentation
• 10 minute PowerPoint presentation describing your project
 The presentation will be cut off after 10 minutes!

• Short live demo using Ziggy

• Submit slides in PowerPoint format (PPT/PPTX – no other format)

 no other format will be accepted

43
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Requirements & Grading | General

• Vollständigkeit des geforderten Funktionsumfangs (max. 30 Punkte)
– Funktionalität (laut Aufgabenbeschreibung) implementiert und funktionstüchtig : 10
– Benutzerfreundlichkeit (durchdachte Oberfläche, intuitiv bedienbar): 10
– Lokalisierung in mind. 2 Sprachen vorhanden: 2
– Hilfefunktion: 3
– Preferences: 3
– Splash Screen: 2
• Qualität der Implementierung (max. 30 Punkte)
– Stabilität (App stürzt nicht ab): 10
– Überprüfung Eingaben (Typcheck, leere Felder, ...): 5
– Konsistenz (Farben/Schriften/Icons/Formulierungen...) :2
– Sprachl. Qualität der Oberfläche (Typos/Verständlichkeit): 3
– Keine funktionslosen Buttons oder Menüs: 2
– Kompatibilität Landscape/Portrait :1
– Kompatibilität Displaygrößen u. –auflösungen: 1
– Handling fehlender/deaktivierter Features (Loc.Provider, Sensoren, ...): 3
– APK Installation getestet (korrekte API Keys verwendet, Libs eingebunden,...): 3
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Requirements & Grading | General

• Qualität der Dokumentation und Evaluation (max. 30 Punkte)

– Ausarbeitung 10 Seiten (ohne künstl. Verlängerung): 3
– Struktur der Ausarbeitung: 5
– Ausarbeitung: Iterativer Designprozess: 3
– Ausarbeitung: Implementierung (App Flow/Activities/Besonderheiten): 3
– Ausarbeitung: Evaluation (Methodik, TN, Ergebnisse): 3
– Arbeitsaufteilung im Team ersichtlich: 5
– Quellen von Fremdanteilen ausgewiesen (Grafiken, ext. Libraries, ...): 3
– Dokumentation Code (Javadoc, Inline-Kommentare):
• 5 Formale Kriterien (max. 10 Punkte)
– Sourcecode (rechtzeitig) abgegeben: 2
– Report (rechtzeitig) abgegeben: 2
– Alle Zusatzmaterialien einzeln vorhanden (Bilder, Evaluationstabellen...): 2
– APK vorhanden 2
– Fristgerechte Abgabe 2

Summe 100
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Requirements & Grading | Focus of this class

1. Functionality
Compuslory basis. “Pflicht”
2. Reliability (free of bugs)

Focus of this class > Important for

3. Usability
grading.

4. Likeability “Enchant me” “Kür”

Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Requirements & Grading | The fun part

The IT2014 “Oscars”:

• IT2014 Award: Best Overall App (Criteria:

Functionality, Reliability, Usability, Likeability)

1. Creativity Award: Best Idea

2. Knowledge Award : Best Content
3. Android Design Guidelines Award: Best
Android Look-and-Feel

IT2014
Lehrstuhl für Informatik mit Schwerpunkt Eingebettete Systeme, Universität Passau
Tutorial “Interactive Technologies”
Marion Koelle
Passau, Germany

Tomorrow’s Topic

TESTING WITH USERS