An effective User Interface (UI) is a key factor of the success of an interactive system. Hence, particular attention should be paid to the UI design during the Requirement Engi- neering process (RE). Several RE tools have been proposed in order to support the UI design. However, these tools have limita- tions in terms of the requirements completeness, the requirements quality analysis and the UI generation from requirements. In this presentation, we present a new RE toolkit, called QualIHM, that deals with the limitations of thes existing RE. The toolkit supports the description of the requirements in different formats. In addition, QualiHM facilitates the UI design by transforming the requirement formats to each others, generating the UI code and providing the feedback aesthetic quality of the UI.

1. 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

2. 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

3. 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

4. Introduction

5. 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

6. 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

7. User Interface Design Challenges
• How to manage different formats of requirements ?
7

8. 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

9. 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

10. QualiHM Toolkit

11. Key-Concepts of QualiHM Toolkit
11

12. Architecture of QualiHM Toolkit
12

13. 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

14. 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

15. QualiHM: Description of requirements in
different formats
15
• QualiHM supports a low-fidelity prototyping
• Sketching low-fidelity prototypes within scenes
• Organising the scenes spatially

16. 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

17. 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

18. 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

19. 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

20. Related Work

21. Related Work
21

22. Conclusion & Future Work

23. 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

24. Web Site
Demo
https://www.youtube.com/channel/
UCYS8ze7R9YdTeBxqCHx1yMw
https://www.cetic.be/QualIHM

25. Thank you for your attention
Questions?
Acknowledgments
This research is funded by la Wallonie
Special thanks to Defimedia, the industrial sponsor of the project