<!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Archiving and Interchange DTD v1.0 20120330//EN" "JATS-archivearticle1.dtd">
<article xmlns:xlink="http://www.w3.org/1999/xlink">
  <front>
    <journal-meta />
    <article-meta>
      <title-group>
        <article-title>Integrating GUI Mockups and User Stories</article-title>
      </title-group>
      <contrib-group>
        <contrib contrib-type="author">
          <string-name>Mockup' Model'</string-name>
          <xref ref-type="aff" rid="aff0">0</xref>
        </contrib>
        <contrib contrib-type="author">
          <string-name>UserStory' Model'</string-name>
          <xref ref-type="aff" rid="aff0">0</xref>
        </contrib>
        <aff id="aff0">
          <label>0</label>
          <institution>Olga Liskin and Tobias Baum Leibniz University Hannover</institution>
          ,
          <country country="DE">Germany</country>
        </aff>
      </contrib-group>
      <fpage>2</fpage>
      <lpage>3</lpage>
      <abstract>
        <p>An important goal in requirements engineering is to enable good requirements communication among all project participants. Especially in projects with a variety of stakeholders, it is important to repeatedly collect and discuss their different views and requirements throughout the whole project. However, most of the stakeholders have other main tasks and only little time to spend on requirements analysis and documentation. Therefore, it is important to enable quick and efficient ways to gain viable requirements artifacts. Especially in iterative or agile approaches, stakeholders are in demand to actively contribute to requirements analysis and documentation. Two frequent types of artifacts used in such situations are user stories and GUI mockups. GUI mockups have proven to be particularly supportive for discussions about requirements details. Stakeholders with little experience in requirements engineering find GUI mockups tangible and with their help can express their requirements more easily [1]. In order to eventually convert the acquired information into story cards, additional effort and a switch of context are necessary. Often, one needs to switch back and forth between different views, which slows down the whole activity. Alternatively, verbal comments are written down as notes, which puts them at the risk of being implemented directly and never documented in a requirements artifact [1].</p>
      </abstract>
    </article-meta>
  </front>
  <body>
    <sec id="sec-1">
      <title>-</title>
      <p>We present a concept that integrates user stories into GUI mockups. Special
elements – which we call Story Labels – are inserted directly into a mockup view to
complement its elements with information about user requirements. From these
labels, user stories are generated and automatically inserted into the project backlog.
Likewise, information from the backlog can be visualized directly inside GUI
mockups. In this way, the constant switch of context can be avoided and allows the
project participants to discuss and plan directly with user-understandable mockups.</p>
      <p>The concept is realized by merging the models of mockups and user stories, and
integrating the respective views. Figure 1 depicts the integrated meta-model, based on a
GUI mockup meta-model by Rivero et al. [2] and a user story meta-model which can,
for example, be extracted from [3]. An extra element StoryLabel links both elements.
It is associated to one or more UIControls and then described in more details by one
or more UserStories. The StoryLabel itself is a SimpleControl containing a
description, which – like other GUI elements – has a position and is visible in the mockup.
Ac;vity'</p>
      <p>Role'
0..*'</p>
      <p>StoryLabel' 0..*'</p>
      <p>For example, when discussing an online bookstore system, a stakeholder can create
a StoryLabel for a GUI element with the author names, saying “make the author name
clickable and then display all books by that author”. The stakeholder can then
enhance the label. For the activity part, she leaves the default value, which is the label’s
description. She adds “customer” as a role and “so that I can find similar books by
that author more quickly” as a purpose and hereby has created a user story.</p>
      <p>Benefits: An integrated environment for engineering GUI mockups and user
stories could facilitate the following benefits:</p>
      <p>The user can enter his or her requirements with less effort. The user does not need
to switch between GUI mockups and a backlog to enter requirements. The system can
suggest suitable existing user stories as an alternative to creating a new story.</p>
      <p>The user can create requirements from remarks emerging in the discussion of
mockups. A story’s activity element is created from the label description. It can be
improved later. Labels and stories are automatically transferred into the backlog
environment. The GUI mockup and label are automatically attached to the linked story.</p>
      <p>The developers can check completeness of the requirements. The system displays
which elements are not associated with a story or do not have a defined purpose yet.</p>
      <p>Developers and users can use the supplementary information for planning and
prioritization based on GUI mockups. For the GUI elements, the system can display and
aggregate estimated effort and assigned iterations.</p>
      <p>Currently, we are developing a prototype that implements the concept. We plan to
use it to evaluate the concept’s feasibility and the relevance of the benefits.</p>
    </sec>
  </body>
  <back>
    <ref-list>
      <ref id="ref1">
        <mixed-citation>
          <string-name>
            <surname>Liskin</surname>
            ,
            <given-names>O.</given-names>
          </string-name>
          :
          <article-title>How artifacts support and impede requirements communication</article-title>
          .
          <source>Accepted for publication in REFSQ</source>
          <year>2015</year>
          , LNCS. Springer International Publishing,
          <year>2015</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref2">
        <mixed-citation>
          <string-name>
            <surname>Rivero</surname>
            ,
            <given-names>J.M.</given-names>
          </string-name>
          ,
          <string-name>
            <surname>Rossi</surname>
            ,
            <given-names>G.</given-names>
          </string-name>
          ,
          <string-name>
            <surname>Grigera</surname>
            ,
            <given-names>J.</given-names>
          </string-name>
          ,
          <string-name>
            <surname>Burella</surname>
            ,
            <given-names>J.</given-names>
          </string-name>
          ,
          <string-name>
            <surname>Luna</surname>
            ,
            <given-names>E. R.</given-names>
          </string-name>
          :
          <article-title>From mockups to user interface models: An extensible model driven approach</article-title>
          .
          <source>In Current Trends in Web Engineering. LNCS</source>
          , vol.
          <volume>6385</volume>
          , pp.
        </mixed-citation>
      </ref>
      <ref id="ref3">
        <mixed-citation>
          13-
          <fpage>24</fpage>
          , Springer Berlin Heidelberg,
          <year>2010</year>
          .
        </mixed-citation>
      </ref>
      <ref id="ref4">
        <mixed-citation>
          <string-name>
            <surname>Cohn</surname>
            ,
            <given-names>M.:</given-names>
          </string-name>
          <article-title>User Stories Applied</article-title>
          .
          <source>Addison Wesley</source>
          ,
          <year>2004</year>
          .
        </mixed-citation>
      </ref>
    </ref-list>
  </back>
</article>