qualihm: a requirement engineering toolkit for efficient user interface design
TRANSCRIPT
![Page 1: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/1.jpg)
The University Of Namur
QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design
CETIC Research Center, Belgium Université Catholique de Louvain, Belgium
Ugo Sangiorgi, Mathieu Zen and Jean Vanderdonckt
Mohamed Boukhebouze, Ravi Ramdoyal and Dimitri Diakodimitris
![Page 2: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/2.jpg)
Few word about me and CETIC • I am R&D project manager at CETIC
• CETIC is an applied research and technology transfer center
• Total staff: 46 • Budget: 4 M€
• CETIC Mission • Connection between Business/Industry & Research/Academia • Contribution to innovation and Regional Economic Development • International focus – European Research Area
• CETIC Expertise • Software and System Engineering (User Interface Design, Requirement Engineering, …) • Software and Services Technologies (Big Bata, Cloud Computing, …) • Embedded and Communication Systems (IoT, wireless technologies…)
2
![Page 3: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/3.jpg)
Agenda
• Introduction
• QualiHM toolkit • Description of requirements in different formats • Mapping between the requirements formats • UIDL support • UI aesthetic evaluation
• Related work
• Conclusion & future work
![Page 4: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/4.jpg)
Introduction
![Page 5: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/5.jpg)
User Interface Design
• User Interface (UI) design is the process of creating usable human-machine interfaces
• This implies taking into account - The users of the interface - The tasks that the users perform using the interface - The user interact with the interface - The interface components be presented to each user - The commands and actions should the user be able to
perform on the interface
5
![Page 6: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/6.jpg)
User Interface Design
• Many requirement engineering techniques can be used to design a UI
• Traditional techniques, such as questionnaires and interviews
• Group elicitation techniques, such as brainstorming
• Early development techniques, such as prototyping
• Observation techniques such as cognitive techniques
6
![Page 7: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/7.jpg)
User Interface Design Challenges
• How to manage different formats of requirements ?
7
![Page 8: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/8.jpg)
User Interface Design Challenges
• How to reap the benefits of User Interface Description Languages (UIDLs) to improve UI design?
• UIDLs use model based approach to • Describe UI at different levels of abstractions (e.g. task and domain
model, abstract UI model and final UI) • Transform a UI model to another model
• UIDLs allow to • Define a single UI for multiple devices and platforms • Reuse of a UI by supporting its evolution, extensibility and
adaptability
8
![Page 9: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/9.jpg)
User Interface Design Challenges
• How to assist UI designers to develop quality UIs?
• Observations
- The end-users are strongly influenced by the aesthetics of UI
- The response time for performing tasks is strongly affected by the aesthetic and usability level of UI
• Opportunities - Evaluating the aesthetic during the UI design
- Providing assistance to help the UI designer to perform such evaluation and to give aesthetics recommendations
9
![Page 10: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/10.jpg)
QualiHM Toolkit
![Page 11: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/11.jpg)
Key-Concepts of QualiHM Toolkit
11
![Page 12: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/12.jpg)
Architecture of QualiHM Toolkit
12
![Page 13: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/13.jpg)
Key-Features of QualiHM Toolkit
• QualiHM supports an efficient UI design by providing four major key features:
1. Description of requirements in different formats
2. Mapping between the requirements formats
3. UIDL support
4. UI aesthetic evaluation
13
![Page 14: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/14.jpg)
QualiHM: Description of requirements in different formats
• QualiHM supports a textual requirement edition • Capturing the UI requirements in terms of user stories • Specifying the properties of a user story
14
![Page 15: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/15.jpg)
QualiHM: Description of requirements in different formats
15
• QualiHM supports a low-fidelity prototyping • Sketching low-fidelity prototypes within scenes • Organising the scenes spatially
![Page 16: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/16.jpg)
QualiHM: Mapping between the requirements formats
• QualiHM maps the textual description to the model based description • Highlighting and derive, from the stories, the UsiXML models • The derived models can be refined using UsiXML editors
![Page 17: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/17.jpg)
QualiHM: Mapping between the requirements formats
17
• QualiHM supports mapping between scenes • Describing a scenario of the navigation between the scenes • Allowing to discuss and validate the requirements
![Page 18: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/18.jpg)
QualiHM: UIDLs Support
18
• QualiHM is compliant with UsiXML to benefit from the model based approach • UsiXML model editors for refining the task, domain and user models • UsiXML transformation tools for obtaining AUIs, CUIs and final UI code
![Page 19: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/19.jpg)
QualiHM: UI Aesthetic Evaluation
19
• QualiHM provides designers with an objective feedback about their designed user interface • Computing metrics that address visual aspects such as Balance, and
Concentricity
![Page 20: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/20.jpg)
Related Work
![Page 21: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/21.jpg)
Related Work
21
![Page 22: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/22.jpg)
Conclusion & Future Work
![Page 23: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/23.jpg)
Conclusion & Future Work
23
Conclusion • Proposition of a toolkit for an efficient UI design
• Ensuring the completeness of UI requirements • Enabling to support multiple devices and platforms, as well as the
generation of context-aware UIs • Providing the feedback about UIs aesthetics
Future Work • Improving the traceability between the requirements • Dealing with the consistency • Validating our approach • Improving the user interface quality evaluation
![Page 24: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/24.jpg)
Web Site Demo
https://www.youtube.com/channel/UCYS8ze7R9YdTeBxqCHx1yMw
https://www.cetic.be/QualIHM
![Page 25: QualiHM: A Requirement Engineering Toolkit for Efficient User Interface Design](https://reader033.vdocuments.net/reader033/viewer/2022052413/55a628f01a28abd0138b464a/html5/thumbnails/25.jpg)
Thank you for your attention
Questions?
Acknowledgments
This research is funded by la Wallonie Special thanks to Defimedia, the industrial sponsor of the project