An interactive form-based mobile software system with a sample application in eldercare (bachelor's thesis 2009)

Transcript

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. 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
3. 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
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 • Errors • Satisfaction 6/6/2013 Markus Harrer Slide 5
6. 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?
7. Bad user interface design 6/6/2013 Markus Harrer Slide 7 Difficult to learn Hard to remember Too many distractions
8. Good user interface design 6/6/2013 Markus Harrer Slide 8
9. 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
10. 6/6/2013 Markus Harrer Slide 10
11. “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 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 What is interaction design?
12. 6/6/2013 Markus Harrer Slide 12 Bad interaction design Visual and cognitive overload No guidance
13. Good interaction design Big Brain Academy 6/6/2013 Markus Harrer Slide 13 Angry Birds Fruit Ninja
14. 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
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. 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
17. 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
18. 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
19. Various types of forms in eldercare 6/6/2013 Markus Harrer Slide 19 1. Analyze requirements
20. Existing software products in eldercare 6/6/2013 Markus Harrer Slide 20 1. Analyze requirements
21. 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
22. 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
23. Mock-up examples 1 Start screen Overview of residents 6/6/2013 Markus Harrer Slide 23 2. Derive key features
24. Mock-up examples 2 Documentation of wounds Task list 6/6/2013 Markus Harrer Slide 24 2. Derive key features
25. 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
26. Connecting the stakeholders 6/6/2013 Markus Harrer Slide 26 Interaction Designer End User Software Engineer Domain Expert Domain expert and software engineer Requirements Use Cases Business logic and data structures Acceptance testing 4. Find development process End user and interaction designer User interface Information architecture Design and behavior Usability testing
27. 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 Engineer Interaction Designer Software Engineer Interaction Designer ? The challenge: Connecting 4. Find development process
28. Analysis Design Implemen- tation First result: A development process for interactive forms Project start End User Domain Expert Interaction Designer User-centered Design Software Engineer Agile Development Process Proto- typing Design Implemen- tation Evaluation / Result 6/6/2013 Markus Harrer Slide 28 4. Find development process
29. 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
30. 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 Interactive Form User Interface Persistence / external data Business Logic 6/6/2013 Markus Harrer Slide 30 5. Find system architecture
31. Proof of feasibility: A primitive prototype 6/6/2013 Markus Harrer Slide 31 Interaction Designer Domain Expert Software Engineer End User Microsoft Expression Studio Microsoft Visual Studio Microsoft XAML2 Microsoft C# / .NET / CAL3 Interactive Form Tools / IDE1 Language / Framework Artifact 1IDE: Integrated Development Environment 2XAML: Extensible Application Markup Language 3CAL: Composite Application Library 6. Implement prototype
32. 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
33. 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
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. 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
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