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

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

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

Introduction

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

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

User Interface Design Challenges

•  How to manage different formats of requirements ?

7

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

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

QualiHM Toolkit

Key-Concepts of QualiHM Toolkit

11

Architecture of QualiHM Toolkit

12

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

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

QualiHM: Description of requirements in different formats

15

•  QualiHM supports a low-fidelity prototyping •  Sketching low-fidelity prototypes within scenes •  Organising the scenes spatially

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

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

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

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

Related Work

Related Work

21

Conclusion & Future Work

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

Web Site Demo

https://www.youtube.com/channel/UCYS8ze7R9YdTeBxqCHx1yMw

https://www.cetic.be/QualIHM

Thank you for your attention

Questions?

Acknowledgments

This research is funded by la Wallonie Special thanks to Defimedia, the industrial sponsor of the project