Content uploaded by Marcel Schmittchen
Author content
All content in this area was uploaded by Marcel Schmittchen on Jul 28, 2020
Content may be subject to copyright.
The final authenticated version is available online at https://link.springer.com/chap-
ter/10.1007/978-3-030-50513-4_12
Prototyping a touch-optimized modeling tool for co-
located and inverted classroom group modeling scenarios
Marcel Schmittchen1[0000-0002-5511-9020], Arlind Avdullahu1[0000-0001-7696-1594] and Robin
Beermann2
1 Department for Information and Technology Management,
Ruhr-University Bochum, Bochum, Germany
{marcel.schmittchen,arlind.avdullahu}@ruhr-uni-bochum.de
2 Ruhr-University Bochum, Bochum, Germany
robin.beermann@rub.de
Abstract. To support the mastery of necessary skills and knowledge for model-
ing, manifold approaches and concepts are present. Ranging from theoretical
backgrounds, over video tutorials to coached pieces of training and seminars. But
the learning from collaborative group work has proven benefits, especially in
modeling tasks. During our experiments with touch-based portable projectors in
our higher education software engineering courses, we explored and iteratively
improved concepts and exercises for collaborative group work. Encountering
many grievances with the used software modeling tools we identified the need
for a special concept and tool to not only support group modeling itself but also
our research and evaluation efforts. In this paper, we will describe the profits of
collaborative modeling and present our concept. Afterward, we will present the
first prototype we implemented that focuses on automatically placed elements
and a minimalistic interaction scheme tailored but not limited to the use with
touch projectors. Finally, we will describe our plans for further development and
related research.
Keywords: business process modeling, process modeling, UML, co-located
group work, digital education, inverted classroom, flipped classroom.
1 Introduction
The use of models and formal modeling notations as a means to design, communicate,
comprehend and coordinate complex systems and processes never lost its importance.
In times of more and more complex systems and agile development methods, the mas-
tery of creating and understanding models is vital as ever.
2
In the last years, we taught a multitude of modeling techniques and notations to stu-
dents of the applied computer sciences studies in Bochum in courses ranging from
bachelor courses of software engineering and project management to master courses of
groupware and knowledge management and sociotechnical design. The modeling no-
tations include but are not limited to business process modeling [1], UML based tech-
niques [2,3] like activity charts, critical path analysis, and sociotechnical process mod-
eling. The latter is presented by a modeling notation created by our chair of information
and technology management [4].
Within the digitization of education, we tried to incorporate digital means of teaching
and using modeling processes in our courses while also optimizing our methods of
practical exercises. The use of touch-based systems such as semi-public displays, tab-
lets, touch projectors, etc. all shared a common problem in educational settings: A lot
of time is used for mundane aesthetic tasks like positioning elements and connections
in evenly distributed positions. Since most educational settings have a lot of time and
attention constraints, this time is lost for more productive tasks and less focus is laid on
reflecting the created model and the modeling process itself.
In order to support this modeling process, based on our previous studies, we designed
a concept for a modeling tool that supports parallel modeling, merging tasks and eval-
uation of the above and started by developing a touch-based modeling software with a
simplified interaction scheme that places and resizes elements automatically allowing
the students to focus more on the models contents and implications.
2 Co-located Group Modeling
Knutas [5] showed that in higher education software engineering courses student
motivation, productivity, and critical thinking improved with the use of computer-sup-
ported collaborative learning. But group work needs special care considering the group
sizes and experience levels of its members [6,7]. Differences in experience are often
handled by having seasoned modelers in charge of the modeling process in the role of
chauffeur or moderator
1
. Renger [7] describes the struggle between the positive effects
of productivity by having a modeler or chauffeur present versus the challenges posed
by taking direct access and influence away from individual group members. This could
potentially lead to less direct interaction between the group members as well as the
feeling of less ownership or contribution to the final model. Another way to deal with
the problem of different expertise is the integration of parallel modeling.
A critical enabler of full group participation is the ability
to work in parallel. In all cases where the model was built
in parallel, the group divided into subgroups, and subgroups
were assigned parts of the model corresponding to the
1
e.g. social-technical-walkthrough/SeeMe Walkthrough [8,9]
3
subgroups’ expertise. [7]
Another benefit of parallel modeling is that it is much faster and efficient [7]. While
designing parallel modeling distinct and overlapping tasks and areas of responsibility
are important to keep interactions going in group work scenarios. Positive effects are
lost when group members don’t participate or work for themselves in silence [10]. Thus
more focus must be laid on finding consensus and a shared understanding of the final
model during the merging phases [7]. Also, instructions need to be as specified as pos-
sible. The learning success is much higher when the strategies for collaboration are
established beforehand. [10]
Nolte [11] suggests three distinct modes of parallel modeling processes for groups
(see fig. 1):
1. Every participant works on their own device and can change the whole model. Op-
tionally an overview of the complete model is also viewable for everyone involved
e.g. on a big screen.
2. Parts of the model are divided into submodels that are worked on by subgroups that
can share a single device. In this mode, the subgroups may develop different styles
of collaboration [12].
3. The group works collaboratively on one screen or device. Here different modes
could be used: Using a split surface that allows different participants to work on
different parts of the model or have a single overview of the whole model with which
everyone interacts.
Fig. 1. Concept of different usages of parallel modeling. Individual devices (left), split mode on
one device (middle), multiuser on one device (right)
To enable these scenarios different setups can be used. E.g. large, high-resolution
interactive screens [13], combined with smartphones [11] or touchscreen tables [12, 14,
15]. These multi-screen environments are getting more common and systems like
Touch Projector by Boring [16] work on seamless interactions with tabletop systems,
wall projections or laptops via mobile phone as input devices. We tried to incorporate
portable touch projectors
2
in our group modeling sessions.
2
Sony Xperia Touch (see [17])
4
We also structured our courses after the inverted classroom model to have more time
for practical exercises and group work tasks. Studies by Mason [18] suggest that in
Inverted Classroom scenarios students tend to report spending less time studying out-
side of class while doing actually more, because the learning via video, quizzes, etc. is
not perceived as regular “studying” while leading to better or equal results in terms of
educational goals.
It is known that especially in software engineering education the need for good sup-
porting software tools is high [5] but especially in collaborative and parallel model
building more research and literature is needed [7]. Thus an optimal tool should not
only focus on supporting the learning and modeling process but also allow for more in-
depth evaluation.
3 Concept
In the following, we will present the three main concept ideas that developed during
our previous studies and our experiences in teaching software engineering and i.e. mod-
eling notations in tutorial groups of up to 30 students.
3.1 Parallel Display Modes
In terms of display modes, we differentiate three cases. The first being a simple “one
user - one screen” setup. Secondly a continuous display of the model on one screen, but
it should be possible to edit it in parallel at several places at the same time. Thirdly, it
should be possible to divide the screen into several areas that scroll and edit parts of the
model independently from each other.
When used for parallel modeling, these modes can be mixed and expanded. For ex-
ample, a model can be divided into 3 submodels. Those submodels are now assigned to
different modelers. Each modeler can now only edit his own submodel until the greater
model is merged at a later point. It’s also possible to expand these concepts to more
than one screen (or type of screen). The submodels in the example mentioned above
could be sent to three individual devices (e.g. smartphones or touch projectors).
To summarize the basic design idea: We want to allow that certain submodels can
be broken out of the model for detail work in smaller groups, while still keeping the
main model, all connections and dependencies intact (see fig. 2).
5
Fig. 2. Sketch of the “on-the-fly” separation of submodels for group work tasks
3.2 Easy Point of Entry
To allow an easy point of entry we follow several design ideas. For co-located group
work in educational settings, we want to minimize time wasted on less productive parts
of the modeling process that tend to get annoying for students or tedious with certain
hardware. For example, in our experiments, a lot of time and motivation was lost while
placing relation arrows or elements at the exact right place or creating an aesthetic over-
all look. At other times modeling tools are filled with many options and functions that
can easily intimidate inexperienced users.
Based on the assumption that it will be easier for users to understand the principles
of modeling when they can focus more on the content we want to allow the software to
take care of the aesthetics and placement. Especially in simple process scenarios, such
as are used in early training exercises, will benefit.
As the user improves their skill and knowledge, we want the tool to gradually give
the user more and more control over parts of the modeling process and the interactions
possible with the model. This could even be used to level the playing field when con-
fronted with groups of different experiences and skills concerning modeling tasks and
allow for more complex and productive exercises.
Still, modeling languages and notations are learned primarily from text, videos or
pictures when not practiced in co-located exercises. Once the tool will be able to switch
between different levels of control for the users depending on their current skillset, it
6
will also become useful for inverted or flipped classroom and blended learning scenar-
ios with emphasis on self-learning and preparation. Combined with prompts and pre-
defined tasks the tool could be used to train basic modeling rules for a single user as
well.
3.3 Evaluation Support
The tool is designed with the teaching and evaluation of the modeling process in mind.
It, therefore, should be able to store and reconstruct the complete interactions including
all deletions and changes made during the modeling process. While often the quality of
the modeling process is measured in the time needed and the quality of the final model
a lot of interesting factors are harder to reconstruct and evaluate.
This is why we want the tool to gather more information during the modeling process
(e.g. how many mistakes were made, how many changes were made or undone later,
etc.). By saving the modeling process (i.e. every iteration of the model instead of the
final version) we want to integrate a “timeline” mode allowing us to reconstruct and
review the iterations of the modeling process (see fig. 3). This could also be used to
support the reflection process in group work sessions by replaying certain situations of
the modeling process for the users.
Fig. 3. Mockup of the timeline mode used to analyze model iterations.
4 Touch-Optimized Prototype and First Evaluation
Based on the concept presented in chapter 3 we started developing the first prototype.
This early prototype focused on the Easy Point of Entry (see chapter 3.2) design idea
while laying the groundwork for the future implementation of the Parallel Display
Modes (see chapter 3.1) and the Evaluation Support (see chapter 3.3).
7
4.1 Flow-Notation
When inexperienced persons are tasked to document processes over 90% start to struc-
ture them graphically and more than two thirds intuitively use flowcharts as a means of
modeling [19]. This could prove the ideal starting point for teaching more and more
complex modeling notations and tasks. Thus we started with a notation based on the
concept of flowcharts with a mandatory start and end element and the option to create
divergently and joining paths.
The start element is represented by an open circle while the end element is repre-
sented by a filled circle. Both elements are connected from the start. The process can
be modeled using rectangle shaped activity elements lined along paths between the start
and end that can be labeled. Binary branching is structured as two corresponding ele-
ments called IF (diverging) and FI (merging). These can also be labeled with a certain
question or test condition leading to different paths. For this early version, we set the
rule that the upper path represents the positive and the lower path the negative condi-
tion.
With this set of elements, simple first models can be created. In order to step by step,
increase the complexity of the tasks and models, a number of additional elements are
planned but not yet implemented. Among others are parallel branching elements al-
lowing for any number of paths running in parallel lanes. Also using corresponding
start and end elements for parallel processes similar to their counterparts in activity
diagrams. Subprocesses that themselves consist of their own start and end elements and
can be collapsed and expanded for better structuring and overview. Leading up to the
inclusion of events, jump labels, roles, and objects.
4.2 Automated Placement and Saving
The original inspiration for the automated placement of the process model is based on
Graphviz [20]. With this tool, models of graphs can be written in a source code style
that is then parsed into a graphical output.
All paths and elements are automatically created and placed in the most symmetric
and clear way possible. When elements are removed from the model, the remaining
elements and paths are also adjusted accordingly. The position of all elements are cal-
culated in a virtual coordinate grid. The reading direction of the model is from left to
right along the X-axis, so that successive elements are next to each other in the direction
of the right side. Consequently, the Y-axis becomes relevant as soon as more paths and
lanes are created. After calculating the virtual positions, the sizes of all elements are
determined and assigned to the respective cells. This allows for calculating the final
screen coordinates and expansions for all elements. Afterward, the appropriate graphics
and texts can be drawn. Finally, the connections are calculated and drawn on the basis
of the coordinates of the associated elements.
8
Internally, the model is stored as a set of components. Thereby each component ref-
erences its direct predecessors and successors. Arbitrary many predecessors or succes-
sors are possible. The corresponding references are stored in sorted lists so that there is
a clear order. Related elements have sorted lists corresponding to their paths so that the
first connection leading out of the splitting element also the first connection is the one
that leads into the merging elements (and so on). This allows the entire model can be
run through in linear form. The graphic representation is statically calculated by the
software by adding all elements that can be arranged in a grid. This ensures an efficient
runtime of the algorithm (O(n)) and no components can overlap. Even when models get
bigger, the performance and the clarity are not compromised (see fig. 4).
Fig. 4. Example of a bigger model created with the prototype
The way in which the model data is stored allows for the future implementation of
many of the concepts presented in chapter 3, e.g. separation and merging of submodels
or the recreation of the modeling process.
4.3 Interaction Scheme
Since the development was focused on touch-based systems (tablets, touch projectors)
the prototype was created for Android 8 and with a minimalistic approach concerning
inputs. Instead of menus, symbols or bars the user just tabs the diagram with one or two
fingers. To create a new element, the user taps the green area on the path, were they
want to place the element (see fig 5) with one finger. To create an IF symbol the user
taps the green area on the path with two fingers. Tapping on an already existing element
9
with one finger lets the user edit the element while tapping an element with two fingers
removes the element from the model.
Fig. 5. The prototype flow model with round interaction zones between elements
Since modern touch devices allow for ten or more touchpoints simultaneous the ad-
dition of further gestures for more types of elements with increasing complexity is pos-
sible. They can be introduced step by step as the user gets more experienced and famil-
iar with the tool and the modeling process.
4.4 Evaluation
To evaluate the prototype, we conducted a small number of tests consisting of a simple
modeling task that took the participants around 15 minutes to complete by using the
think-aloud method. The exercise was followed by a 15-minute semi-structured inter-
view. The interview focused on the experience with the software and the touch projec-
tor, problems encountered and wishes for more features.
The general impression was positive and all participants finished with a correct
model earlier than expected. The interaction scheme was described as “intuitive”,
“fast”, “user-friendly” and “easy to remember”. Several weaknesses of the prototype
were also revealed. E.g. the zoom and centering of the model did not work as expected
in all cases. The most frequently mentioned wishes were for an undo & redo function
and the ability to drag & drop created elements into different lanes or positions. Another
mentioned wish was that a newly created element should start in focus allowing the
user to name the new element without having to select it first.
A factor not previously considered was brought to our attention during the tests. Up
to this point, we used the standard Android onscreen keyboard and paid it not much
mind during our exercises and tests. But in the interactions, we noticed huge differences
in style the participants used to type on the touch projector. From one finger to ten-
finger typing, usage of one or two hands and even swipe typing was used leading to
many different results in the time used to finish the model with swipe typing being the
fastest.
10
5 Conclusion and Future Works
We identified three key concepts and requirements for supporting collaborative model-
ing processes and their evaluation from our former studies. Based on these concepts we
developed the first prototype that completely takes over the graphic design of the pro-
cess model so that the users can concentrate on the actual modeling. The graphical po-
sition of an element is calculated from its connections to the other elements. In addition,
the interaction is greatly simplified for the user. Instead of menu structures, the most
important functions can be used directly as touch gestures. The relational storage of the
model enables future developments to incorporate the separation of submodels and re-
construction of the modeling process for evaluation and reflection purposes.
Finally, the prototype was tested with a small number of users that helped us identify
minor bugs and showed potential points to improve the usability of the prototype and
opened up the additional factor of the typing tool and mode used.
We developed the first prototype with touch devices such as touch projectors or tab-
lets in mind. Since parallel work should utilize more than one medium [11] a future use
of and combination with VR, AR, keyboards and other forms of inputs and devices
should be considered. Also implementing server synchronization allowing for more
than one device to edit the same model is our next step.
The current prototype and concept will be improved and expanded through more
end-user tests and experiments in the coming semesters and with the help of experts
from pedagogical and psychological backgrounds.
References
1. Benedict, T.: BPM CBOK: Business process management common body of knowledge
(BPM CBOK R). ABPMP, Lexington, KY (2013).
2. Fowler, M.: UML distilled: A brief guide to the standard object modeling language. Addi-
son-Wesley, Boston, MA (2010)
3. Mandl, P.: Grundkurs Betriebssysteme: Architekturen, Betriebsmittelverwaltung, Synchro-
nisation, Prozesskommunikation, Virtualisierung. (2014). https://doi.org/10.1007/978-3-
658-06218-7
4. Herrmann, T.: “SeeMe in a Nutshell. The Semi-Structured Socio-Technical Modeling
Method”, https://www.imtm-iaw.ruhr-uni-bochum.de/imperia/md/con-
tent/seeme/seeme_in_a_nutshell.pdf (2006), last accessed 2020/02/17
5. Knutas, A., Ikonen, J., Porras, J.: Computer-supported collaborative learning in software
engineering education: a systematic mapping study. Journal on Information Technologies &
Security 7:4 (2015)
6. Becker, F. Teamarbeit, Teampsychologie, Teamentwicklung: So führen Sie Teams! (2016):
https://doi.org/10.1007/978-3-662-49427-1
7. Renger, M., Kolfschoten, G.L., Vreede, G.J.D.: Challenges in collaborative modelling: a
literature review and research agenda. International Journal of Simulation and Process Mod-
elling. 4, 248 (2008). https://doi.org/10.1504/IJSPM.2008.023686
11
8. Herrmann, T.: Systems design with the socio-technical walkthrough, In Handbook of Re-
search on Socio-Technical Design and Social Networking Systems, pp. 336-351 (2009)
9. SeeMe Walktrough, https://seeme.iaw.ruhr-uni-bochum.de/?locale=en, last accessed
2020/02/17
10. Schneider M., Mustafić M., Editor. Gute Hochschullehre: Eine evidenzbasierte Orientie-
rungshilfe, pp. 41-43. Berlin, Heidelberg: Springer Berlin Heidelberg (2015).
https://doi.org/10.1007/978-3-662-45062-8
11. Nolte, A., Brown, R., Anslow, C., Wiechers, M., Polyvyanyy, A., Herrmann, T.: Collabora-
tive Business Process Modeling in Multi-surface Environments. In C. Anslow, P. Campos
& J. Jorge (Editor), Collaboration Meets Interactive Spaces pp. 259–286. (2016)
https://doi.org/10.1007/978-3-319-45853-3
12. Isenberg, P., Fisher, D., Morris, M. R., Inkpen, K., Czerwinski, M.: An exploratory study of
co-located collaborative visual analytics around a tabletop display, pp. 179–186. (2010)
https://doi.org/10.1109/VAST.2010.5652880
13. Turnwald, M., Nolte, A., Ksoll, M.: Easy collaboration on interactive wall-size displays in
a user distinction environment. Workshop “Designing Collaborative Interactive Spaces for
e-Creativity, e-Science and e-Learning. Citeseer. (2012).
14. Hornecker, E., Marshall, P., Dalton, N.S., Rogers, Y.: Collaboration and Interference:
Awareness with Mice or Touch Input. University of Strathclyde, Glasgow (2008)
15. Marshall, P., Hornecker, E., Morris, R., Dalton, N.S., Rogers, Y.: When the Fingers do the
Talking: A Study of Group Participation with Varying Constraints to a Tabletop Interface.
University of Strathclyde, Glasgow (2008)
16. Boring, S., Baur, D., Butz, A., Gustafson, S., Baudisch, P.: Touch projector: mobile interac-
tion through video. In: Proceedings of the 28th international conference on Human factors
in computing systems - CHI ’10. p. 2287. ACM Press, Atlanta, Georgia, USA (2010).
https://doi.org/10.1145/1753326.1753671
17. Techradar Review of the Sony Xperia Touch, https://www.techradar.com/reviews/sony-
xperia-touch, last accessed 2020/02/18
18. Mason, G.S., Shuman, T.R., Cook, K.E.: Comparing the Effectiveness of an Inverted Class-
room to a Traditional Classroom in an Upper-Division Engineering Course. IEEE Transac-
tions on Education. 56, 430–435 (2013). https://doi.org/10.1109/TE.2013.2249066
19. Recker, J., Safrudin, N., Rosemann, M.: How novices design business processes. Infor-
mation Systems, 37 (6), pp. 557–573. https://doi.org/10.1016/j.is.2011.07.001
20. Graphviz, https://www.graphviz.org/; last accessed 2020/02/17
