Upload
markus-harrer
View
920
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
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
Outline
1. Introduction to usability and interaction design
2. Bachelor’s thesis approach and results
3. Use of the English language
4. Summary
6/6/2013 Markus Harrer Slide 2
Outline
1. Introduction to usability and interaction design
2. Bachelor’s thesis approach and results
3. Use of the English language
4. Summary
6/6/2013 Markus Harrer Slide 3
6/6/2013 Markus Harrer Slide 4
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
• Errors• Satisfaction
6/6/2013 Markus Harrer Slide 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
• Errors• Satisfaction
6/6/2013 Markus Harrer Slide 6
Bad readability
Unexpected error What is the right answer?
Bad user interface design
6/6/2013 Markus Harrer Slide 7
Difficult to learn
Hard to remember
Too many distractions
Good user interface design
6/6/2013 Markus Harrer Slide 8
Good user interface design
6/6/2013 Markus Harrer Slide 9
“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 10
“The practice of designing interactive digital products, environments, systems, and services.“
Alan Cooper, About Face 3
6/6/2013 Markus Harrer Slide 11
“Interaction design is heavily focused on satisfying the needsand 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
What is interaction design?
6/6/2013 Markus Harrer Slide 12
Bad interaction design
Visual and cognitive overload
No guidance
Good interaction design
Big Brain Academy
6/6/2013 Markus Harrer Slide 13
Angry Birds
Fruit Ninja
What do we need for game-like software?
6/6/2013 Markus Harrer Slide 14
General information
Motivation system
Overall result
Daily progress
Modular structure
Rewards Customizable
“Brain Training” on Nintendo DS
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
Outline
1. Introduction to usability and interaction design
2. Bachelor’s thesis approach and results
3. Use of the English language
4. Summary
6/6/2013 Markus Harrer Slide 16
My Thesis: The challenges
6/6/2013
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
“An interactive form-based mobile software system with a sample application in eldercare”
Markus Harrer Slide 17
Approach
1. Analyze requirements
2. Derive key features
3. Invent metaphor
4. Find development process
5. Find system architecture
6. Implement prototype
6/6/2013 Markus Harrer Slide 18
Various types of forms in eldercare
6/6/2013 Markus Harrer Slide 19
1. Analyze requirements
Existing software products in eldercare
6/6/2013 Markus Harrer Slide 20
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
1. Analyze requirements
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
2. Derive key features
Mock-up examples 1
Start screen Overview of residents
6/6/2013 Markus Harrer Slide 23
2. Derive key features
Mock-up examples 2
Documentation of wounds Task list
6/6/2013 Markus Harrer Slide 24
2. Derive key features
Metaphor: Interactive Forms
6/6/2013 Markus Harrer Slide 25
Paper-based forms Interactive Form System of Interactive Forms
3. Invent metaphor
Client• Elaborated and dynamic graphical
features• Animations / video support• Direct communication with hardware• Wizard-based interaction style
General• One Interactive Form per use case• Modular architecture• Synchronization mechanism for data
Connecting the stakeholders
6/6/2013 Markus Harrer Slide 26
Interaction DesignerEnd User
Software EngineerDomain Expert
Domain expert and software engineerRequirementsUse CasesBusiness logic and data structuresAcceptance testing
4. Find development process
End user and interaction designerUser interfaceInformation architectureDesign and behaviorUsability testing
Interaction Designer
Need for separated system components (technical)
Software Engineer
6/6/2013 Markus Harrer Slide 27
Need for an integrated development workflow (process)
Software EngineerInteraction Designer
Software EngineerInteraction Designer
?
The challenge: Connecting
4. Find development process
Analysis
Design
Implemen-tation
First result: A development process for interactive forms
Project start
End User Domain Expert
Interaction DesignerUser-centered Design
Software EngineerAgile Development Process
Proto-typing
Design
Implemen-tation
Evaluation / Result
6/6/2013 Markus Harrer Slide 28
4. Find development process
Interactive Form
User Interface
Persistence / external data
Business Logic
Interactive Form
User Interface
Persistence / external data
Business Logic
Interactive Form
User Interface
Persistence / external data
Business Logic
Architecture of a interactive form
=> Pluggable Component Architecture
Interactive Form
User Interface
Persistence / external data
Business Logic
6/6/2013 Markus Harrer Slide 29
Interaction Designer
End User
Software Engineer
Domain Expert
5. Find system architecture
Second result: A Gun Magazine Architecturefor interactive forms
• Horizontal and vertical separation of concerns
• Support for parallel development activities
• Customizable features and functionality
• Framework provides common services
Interactive Form
User Interface
Persistence / external data
Business Logic
6/6/2013 Markus Harrer Slide 30
5. Find system architecture
Proof of feasibility: A primitive prototype
6/6/2013 Markus Harrer Slide 31
Interaction Designer Domain ExpertSoftware EngineerEnd User
Microsoft Expression Studio
Microsoft Visual Studio
Microsoft XAML2
Microsoft C# / .NET / CAL3
Interactive Form
Tools / IDE1
Language /Framework
Artifact1IDE: Integrated Development Environment2XAML: Extensible Application Markup Language3CAL: Composite Application Library
6. Implement prototype
Third result: UI of a primitive prototype
6/6/2013 Markus Harrer Slide 32
Pre app era / hype (early 2009): No iPad or Google Nexus available yet!
6. Implement prototype
Outline
1. Introduction to usability and interaction design
2. Bachelor’s thesis approach and results
3. Use of the English language
4. Summary
6/6/2013 Markus Harrer Slide 33
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
Outline
1. Introduction to usability and interaction design
2. Bachelor’s thesis approach and results
3. Use of the English language
4. Summary
6/6/2013 Markus Harrer Slide 35
Summary
• Interaction design is most important for successful systems
• Increasing the collaboration between stakeholders can lead to a huge improvement towards usable and engagingsoftware 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
Thank you!
Questions?
6/6/2013 Markus Harrer Slide 37