User Interface Prototype Generation

from Agile Requirements

Specifications written in Concordia
THIAGO DELGADO PINTO WILLIAN INÁCIO GONÇALVES PABLO VEIGA COSTA
CEFET-RJ CEFET-RJ CEFET-RJ
Nova Friburgo, RJ, Brazil Nova Friburgo, RJ, Brazil Nova Friburgo, RJ, Brazil
thiago.pinto@cefet-rj.br w.goncalves91@gmail.com vcpablo@gmail.com

October 30th, 2019

introduction
introduction

● defects arising from incorrect or incomplete specifications are

admittedly expensive [1]

● early identified defects tend to cost less [2]

[1] Barry Boehm and Richard Turner. 2003. Balancing Agility and Discipline: a Guide for the Perplexed. Addison-Wesley.
[2] Miriam Sayao and Julio Cesar Sampaio do Prado Leite. 2007. Requirements Verification and Validation: Natural
Language Processing and Software Agents. Ph.D. Dissertation. Pontifical Catholic University of Rio de Janeiro, Informatics
Department.

3
User Stories (US)

● the majority of agile companies write requirements

specifications in natural language using User Stories [3]

● written using Domain Specific Languages (DSLs) [3] [4]

● standardize and ease writing [4]

[3] Karina Curcio, Tiago Navarro, Andreia Malucelli, and Sheila Reinehr. 2018. Requirements engineering: A systematic
mapping study in agile software development. Journal of Systems and Software 139 (2018), 32–50.
[4] Martin Fowler. 2008. Business Readable DSL. https://martinfowler.com/bliki/BusinessReadableDSL.html

4
UIP generation from User Stories

what if we could generate UI

prototypes from user stories
automatically to support
requirements validation?
5
related work
related work
Work Requirements Specification Known Notation Low Training Costs

Gomes [7] ✕ ✕ ✕

Juárez-Ramírez [8] ✓ ✓ ✕

Elkoutbi [9] ✕ ✓ ✕

Kamalrudin and Grundy [10] ✓ ✕ ✕

[7] Lirisnei Gomes de Sousa. 2007. Geração de Interfaces de Usuário de Sistemas Web para Múltiplos Dispositivos com
Uso de Componentes de IU. Ph.D. Dissertation. Post-graduation Program in Systems and Computation.
[8] Reyes Juárez-Ramírez, Carlos Huertas, and Sergio Inzunza. 2014. Automated Generation of User-Interface Prototypes
Based on Controlled Natural Language Description. 2014 IEEE 38th International Computer Software and Applications
Conference Workshops (2014).
[9] M. Elkoutbi, I. Khriss, and R.k. Keller. 1999. Generating user interface prototypes from scenarios. Proceedings IEEE
International Symposium on Requirements Engineering (Cat. No.PR00188) (1999).
[10] Massila Kamalrudin and John Grundy. 2011. Generating essential user interface prototypes to validate requirements.
2011 26th IEEE/ACM International Conference on Automated Software Engineering (ASE 2011) (2011).
what is needed?

● UI Elements identification

● interaction flow between user and system

● Natural Language Processing (NLP)

8
concordia
concordia
● agile requirements specification metalanguage [5]

● inspired by Gherkin [6]

● provides UI Elements and user interaction flows

[5] THE CUCUMBER TEAM. [n.d.]. Gherkin Reference. https://cucumber.io/docs/gherkin/reference

[6] Thiago Delgado Pinto and Arndt von STAA. 2018. Unifying agile requirements specification quality control and
implementation conformance assurance. Ph.D. Dissertation. Pontifical Catholic University of Rio de Janeiro, Informatics
Department.

10
concordia compiler
● generates test cases and test scripts from specifications
○ with test data and test oracles
○ it uses a large set of testing techniques (e.g., boundary-value analysis)
○ it can use a large set of combination techniques (e.g., n-wise)
○ it can cover all the declared business/system rules

● uses Natural Language Processing (NLP)

11
language declarations
● comment, special comment
● tag
● import
● feature
● state
● scenario
● variant
● test case
● test case events (before/after all, before/after feature, before after each scenario)
● ui element
● literal
● constants
● references (to ui elements, properties, constants, tables, databases)
● table
● database
12
example of a feature - user login
Feature: User Login UI Element: Username
As a user - type is textbox
I would like to authenticate myself - required
In order to access the application
UI Element: Password
Scenario: Successful login - type is textbox
Given that I can see the login screen - required
When I enter with valid credentials
Then I can access the application's main screen UI Element: Login
- type is button
Variant: Successful login with valid credentials
Given that I am in the url "/login"
When I fill {Username} with "john.doe"
And I fill {Password} with "123456"
And I click on {Login}
Then I see "Welcome"
13
UIP generation
currently used Concordia declarations
● Features → to name UI prototypes and their files

● Variants → to identify the position/order of UI Elements

● UI Elements → to identify widget properties

also planned (future use):

● States → to establish links between UI prototypes

15
intermediary UI representation
● generated by the tool

● technology-agnostic

● plug-ins can transform it to a specific technology

○ e.g., HTML + CSS + <insert your preferred framework here>
○ e.g., Java Swing
○ e.g., Qt / QML
○ e.g., Delphi Forms
○ e.g., Android native forms

16
process flow

17
the tool
input - user login feature
Feature: User Login UI Element: Username
As a user - type is textbox
I would like to authenticate myself - required
In order to access the application - maximum length is 100

Scenario: Successful login UI Element: Password

Given that I can see the login screen - type is textbox
When I enter with valid credentials - required
Then I can access the application's main screen
UI Element: Login
Variant: Successful login with valid credentials - type is button
Given that I am in the url "/login"
When I fill {Username} with "john.doe"
And I fill {Password} with "123456"
And I click on {Login}
Then I see "Welcome"
19
generated prototype

20
generated prototype’s source code
<div class="container">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" id="username"
required="true" maxlength="100" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="text" id="password"
required="true" />
</div>
<button class="btn btn-primary" type="button">
Login
</button>
</div>
* partial source code
21
evaluation
experiment objectives
● evaluate the visual quality of the generated UI prototypes

● evaluate the quality of the generated prototypes’ source code

● assess the time saved

compared to manual UI prototype generation

23
experiment set up
● 3 questionnaires with both scaled and open-ended questions
○ build prototypes manually for some requirements specifications
○ evaluate the relevance and fidelity of the automatically generated UIPs
in relation to those drawn before
○ measure time saving comparing automatic to manual prototype
generation

● 30 students attending the last year of a high-school level

technical course in Informatics at CEFET Nova Friburgo, RJ,
Brazil;
○ took part voluntarily

24
experiment results
● generated prototypes were considered very similar
compared to the manually generated ones
○ 93% of the respondents classified them as "similar" or "very similar"

● generated source code considered good enough to be reused

○ 93% of the respondents classified them as "good" or "very good"

● 25 minutes (in average) saved when generating the

prototypes with the tool instead of manually

25
 conclusion
and
future work
conclusion
● solution to generate user interface prototypes from
requirements specifications written in Concordia language

● aims at supporting the requirements validation process

○ facilitating the communication with stakeholders;
○ helping to find inadequacies in the requirements specifications;
○ reusing the produced UIP’s source code (by developers).
● preliminary evaluation indicated that the approach is valid
and it can be effective

27
future work
● new experiments to evaluate the approach efficacy and its
use with real software teams
● allow to generate navigable UIPs
● generate more complex UIP with menus, sidebars, tables
● generate UIP with sample data
● create plug-ins for other technologies

28
 https://github.com/concordialang/ui-cli/
https://github.com/thiagodp/concordialang

Thank you!
THIAGO DELGADO PINTO WILLIAN INÁCIO GONÇALVES PABLO VEIGA COSTA
thiago.pinto@cefet-rj.br w.goncalves91@gmail.com vcpablo@gmail.com
references
1. Barry Boehm and Richard Turner. 2003. Balancing Agility and Discipline: a Guide
for the Perplexed. Addison-Wesley.
2. Miriam Sayao and Julio Cesar Sampaio do Prado Leite. 2007. Requirements
Verification and Validation: Natural Language Processing and Software Agents.
Ph.D. Dissertation. Pontifical Catholic University of Rio de Janeiro, Informatics
Department.
3. Karina Curcio, Tiago Navarro, Andreia Malucelli, and Sheila Reinehr. 2018.
Requirements engineering: A systematic mapping study in agile software
development. Journal of Systems and Software 139 (2018), 32–50.
https://doi.org/10.1016/j.jss.2018.01.036

30
references
4. Martin Fowler. 2008. Business Readable DSL.
https://martinfowler.com/bliki/BusinessReadableDSL.html
5. THE CUCUMBER TEAM. [n.d.]. Gherkin Reference.
https://cucumber.io/docs/gherkin/reference
6. Thiago Delgado Pinto and Arndt von STAA. 2018. Unifying agile requirements
specification quality control and implementation conformance assurance. Ph.D.
Dissertation. Pontifical Catholic University of Rio de Janeiro, Informatics
Department.
7. Lirisnei Gomes de Sousa. 2007. Geração de Interfaces de Usuário de Sistemas
Web para Múltiplos Dispositivos com Uso de Componentes de IU. Ph.D.
Dissertation. Post-graduation Program in Systems and Computation.

31
references
8. Reyes Juárez-Ramírez, Carlos Huertas, and Sergio Inzunza. 2014. Automated
Generation of User-Interface Prototypes Based on Controlled Natural Language
Description. 2014 IEEE 38th International Computer Software and Applications
Conference Workshops (2014). https://doi.org/10.1109/compsacw.2014.44
9. M. Elkoutbi, I. Khriss, and R.k. Keller. 1999. Generating user interface prototypes
from scenarios. Proceedings IEEE International Symposium on Requirements
Engineering (Cat. No.PR00188) (1999). https://doi.org/10.1109/isre.1999.777995
10. Massila Kamalrudin and John Grundy. 2011. Generating essential user interface
prototypes to validate requirements. 2011 26th IEEE/ACM International Conference
on Automated Software Engineering (ASE 2011) (2011).
https://doi.org/10.1109/ase.2011.6100126

32