Presentation about my bachelor's thesis back in early 2009. The motivation for this paper was that mobile devices have been entering the workplace at businesses that were previously not supposed to be "digitalized" thus leading to overwhelmed staff and software systems suffering from major acceptance drawbacks. My primary research questions were to find a way to design and realize a software system that can support "interactive forms." Interactive forms are a structured game-like way of entering or gathering data in a computer. They have a well-designed and visually appealing user interface combined with a motivation system (e.g. achievements or high scores). Other goals of my thesis were to create a software development process and a software architecture that support a workflow for the interdisciplinary design of interactive forms. In my thesis I initially investigated and gathered domain-specific requirements for elderly care, which is a (nearly) non-digitized domain, to better understand the problems that a caretaker has to deal with every day. I then analyzed the specific needs of interaction designers and software developers and looked for domain expert centric, iterative development processes that are similar for interaction designers and software developers. This was followed by an examination of existing software architectures that can support most of the requirements previously determined. Finally, I implemented a prototype that demonstrated the feasibility of interactive forms and their underlying software architecture and development process.

1. Bachelor’s thesis
“An interactive form-based mobile software
system with a sample application in
eldercare”
Markus Harrer
2nd presentation in Advanced Speaking
6th June 2013

2. Outline
1.
2.
3.
4.
Introduction to usability and interaction design
Bachelor’s thesis approach and results
Use of the English language
Summary
6/6/2013
Markus Harrer
Slide 2

3. Outline
1.
2.
3.
4.
Introduction to usability and interaction design
Bachelor’s thesis approach and results
Use of the English language
Summary
6/6/2013
Markus Harrer
Slide 3

4. 6/6/2013
Markus Harrer
Slide 4

5. Why should we care about usability?
Definition (ISO 9241-11)
“The extent to which a product can be used by specified users
to achieve specified goals with effectiveness, efficiency and
satisfaction in a specified context of use.”
Five attributes of usability (Nielson)
• Learnability
• Efficiency
• Memorability
6/6/2013
• Errors
• Satisfaction
Markus Harrer
Slide 5

6. Why should we care about usability?
Bad readability
Definition (ISO 9241-11)
“The extent to which a product can be used by specified users
to achieve specified goals with effectiveness, efficiency and
satisfaction in a specified context of use.”
Five attributes of usability (Nielson)
Unexpected error
What is the right
• Learnability
• Errors
answer?
• Efficiency
• Satisfaction
• Memorability
6/6/2013
Markus Harrer
Slide 6

7. Bad user interface design
Too many
distractions
Hard to
remember
Difficult
to learn
6/6/2013
Markus Harrer
Slide 7

8. Good user interface design
6/6/2013
Markus Harrer
Slide 8

9. Good user interface design
“Perfection is achieved, not when
there is nothing more to add,
but when there is nothing left to
take away.”
Antoine de Saint-Exupéry
6/6/2013
Markus Harrer
Slide 9

10. 6/6/2013
Markus Harrer
Slide 10

11. What is interaction design?
“The practice of designing interactive digital products,
environments, systems, and services.“
Alan Cooper, About Face 3
“Interaction design is heavily focused on satisfying the needs
and desires of the people who will use the product.
…
Where other disciplines like software engineering have a
heavy focus on designing for technical stakeholders of a
project.”
Wikipedia
6/6/2013
Markus Harrer
Slide 11

12. Bad interaction design
Visual and
cognitive overload
No guidance
6/6/2013
Markus Harrer
Slide 12

13. Good interaction design
Fruit Ninja
Big Brain Academy
Angry Birds
6/6/2013
Markus Harrer
Slide 13

14. What do we need for game-like software?
General information
Overall result
Motivation system
Daily progress
Modular structure
Customizable
Rewards
“Brain Training” on Nintendo DS
6/6/2013
Markus Harrer
Slide 14

15. Roles of an interaction designer
• Visualizes concepts and interactions
• Designs rich graphical interfaces
• Creates dynamic prototypes for early testing
• Evaluates UI via end user tests
• Supports the development team
• Uses user-centric process model
6/6/2013
Markus Harrer
Slide 15

16. Outline
1.
2.
3.
4.
Introduction to usability and interaction design
Bachelor’s thesis approach and results
Use of the English language
Summary
6/6/2013
Markus Harrer
Slide 16

17. My Thesis: The challenges
“An interactive form-based mobile software system
with a sample application in eldercare”
Goals
1. Develop a process model for the collaborative work of
interaction designers and software engineers
2. Find a software architecture that supports that
development process
3. Demonstrate usefulness by a prototype implementation
6/6/2013
Markus Harrer
Slide 17

18. Approach
1.
2.
3.
4.
5.
6.
Analyze requirements
Derive key features
Invent metaphor
Find development process
Find system architecture
Implement prototype
6/6/2013
Markus Harrer
Slide 18

19. 1. Analyze requirements
Various types of forms in eldercare
6/6/2013
Markus Harrer
Slide 19

20. 1. Analyze requirements
Existing software products in eldercare
6/6/2013
Markus Harrer
Slide 20

21. 1. Analyze requirements
System’s requirements
Observations
• Many various forms in one nursing home
• Different forms per nursing home
• Many non-technical people
• Work mobile
• Use medical equipment
Conclusions
1. Need for modular, customizable software system
2. Mobile device, touch screen input, game-oriented
interface / animations and direct hardware access
6/6/2013
Markus Harrer
Slide 21

22. 2. Derive key features
Mock-up: A mobile assistant for elderly care
Main goals
• Provide reminder / scheduling functionality
• Reduce the writing effort
• Improve the flow and quality of information
System goals
• Focus on high usability
• Integrated motivational system
• Process-oriented workflow
• Minimize learning and training efforts
6/6/2013
Markus Harrer
Slide 22

23. 2. Derive key features
Mock-up examples 1
Start screen
6/6/2013
Overview of residents
Markus Harrer
Slide 23

24. 2. Derive key features
Mock-up examples 2
Task list
Documentation of wounds
6/6/2013
Markus Harrer
Slide 24

25. 3. Invent metaphor
Metaphor: Interactive Forms
Paper-based forms
Interactive Form
Client
• Elaborated and dynamic graphical
features
• Animations / video support
• Direct communication with hardware
• Wizard-based interaction style
6/6/2013
System of Interactive Forms
General
• One Interactive Form per use case
• Modular architecture
• Synchronization mechanism for data
Markus Harrer
Slide 25

26. 4. Find development process
Connecting the stakeholders
End user and interaction designer
User interface
Information architecture
Design and behavior
Usability testing
End User
Interaction Designer
Domain expert and software engineer
Requirements
Use Cases
Business logic and data structures
Acceptance testing
Domain Expert
6/6/2013
Markus Harrer
Software Engineer
Slide 26

27. 4. Find development process
The challenge: Connecting
?
Interaction Designer
Software Engineer
Need for an integrated development workflow (process)
Interaction Designer
Software Engineer
Need for separated system components (technical)
Interaction Designer
6/6/2013
Software Engineer
Markus Harrer
Slide 27

28. 4. Find development process
First result: A development process for
interactive forms
Project
start
Interaction Designer
User-centered Design
Prototyping
Analysis
Evaluation /
Result
Design
Design
Domain
Expert
End User
Implementation
Implementation
6/6/2013
Software Engineer
Agile Development Process
Markus Harrer
Slide 28

29. 5. Find system architecture
Architecture of a interactive form
User
User
Interface
User
Interface
User
Interface
Interface
End User
Interaction Designer
Business
Business
Logic
Business
Logic
Business
Logic
Logic
Domain Expert
Software Engineer
=>
Persistence /
Persistence /
external data
Persistence /
external data
Persistence /
external data
external data
Interactive Form
Interactive Form
Interactive Form
Interactive Form
Pluggable Component Architecture
6/6/2013
Markus Harrer
Slide 29

30. 5. Find system architecture
Second result: A Gun Magazine Architecture
for interactive forms
• Horizontal and vertical
separation of concerns
• Support for parallel
development activities
• Customizable features
and functionality
• Framework provides
common services
User Interface
Business Logic
Persistence /
external data
6/6/2013
Markus Harrer
Interactive Form
Slide 30

31. 6. Implement prototype
Proof of feasibility: A primitive prototype
End User
Interaction Designer
Software Engineer
Domain Expert
Microsoft
Expression Studio
Tools / IDE1
Microsoft
XAML2
1IDE:
Microsoft Visual
Studio
Microsoft C# /
.NET / CAL3
Language /
Framework
Integrated Development Environment
Extensible Application Markup Language
3CAL: Composite Application Library
Interactive
Form
Artifact
2XAML:
6/6/2013
Markus Harrer
Slide 31

32. 6. Implement prototype
Third result: UI of a primitive prototype
Pre app era / hype (early 2009): No iPad or Google Nexus available yet!
6/6/2013
Markus Harrer
Slide 32

33. Outline
1.
2.
3.
4.
Introduction to usability and interaction design
Bachelor’s thesis approach and results
Use of the English language
Summary
6/6/2013
Markus Harrer
Slide 33

34. Use of the English language
• Literature
• User-centered design
• Usability Engineering
• Interaction Design
• Research Papers
• Human-Interaction patterns
• Composite frameworks
• Software
• Documentation of frameworks
• Source code and in-program documentation
6/6/2013
Markus Harrer
Slide 34

35. Outline
1.
2.
3.
4.
Introduction to usability and interaction design
Bachelor’s thesis approach and results
Use of the English language
Summary
6/6/2013
Markus Harrer
Slide 35

36. Summary
• Interaction design is most important for successful systems
• Increasing the collaboration between stakeholders can lead
to a huge improvement towards usable and engaging
software systems
• A user-centered, iterative design process can be easily
achieved
• A software system designed with a “Gunshot Model
Architecture” can support a collaborative software
development process
6/6/2013
Markus Harrer
Slide 36

37. Thank you!
Questions?
6/6/2013
Markus Harrer
Slide 37