-- The objective of the research was to discuss how software architecture shapes the usability of configurable software in data entry-form design. The research process was conducted in three stages. The first stage focused on usability studies for DHIS2 custom form editor from which empirical data was collected from 11 participants. The second phase centred on experimentation with Sketch2Code and Commcare. The final stage focused on solution prototyping and evaluation. The research found out that usability is enhanced in configurable platforms through the availability of interface elements for achieving desired goals with the platform without the need for writing code and meta-design. Constraining factors to usability include lack of functionality to advance the appearance of interfaces beyond the basic outlook and having predefined functions with limited room for innovation outside the predefined range. The research also found out that software architecture enables software usability by providing mechanisms for cross-platform compatibility with similar applications, provision of boundary resources for further customisation and through meta-design Software platforms provide for end-user software development, through customization of software interfaces and behaviour via interaction with graphical user interface (UI) elements and configuration files [2], [3]. Thus, with the advent of configurable software platforms, the implementation of software solutions is shifting from total reliance on software developers towards increased participation of end-users. In turn, providing for enduser development of software applications may lead to reduced software development time and costs [4], [5].
Architecture, Design,
Traditionally, software development has involved two sets
of distinct teams: software developers and end-users. Software
developers are people with a programming background,
involved in the design and implementation of software products.
In a traditional software development setup, end-users provide
software specifications and wait for software developers to
actualise the requirements into the desired software product.
Thus, end-users are consumers of the final product from the
software developers. This process of development has been
deemed costly in terms of human resources, time and money [
To address problems inherent to traditional software development, organizations are progressively adopting configurable software platforms. Configurable software
This paper discusses how software architecture shapes the
usability of configurable software in data entry-form design. To
achieve this, the paper focusses on the utilisation of configurable
software platforms in Malawi’s health sector. There is an
increased uptake of configurable platforms in the development
of patient care and National Health Management Information
System (HMIS) solutions in resource-constrained settings such
as Malawi, which face a dearth of highly skilled software
developers. Notable configurable platforms in use include
Commcare and the District Health Information System 2
(DHIS2). Commcare is a mobile data collection platform where
a user does not need to write a single line of code. It has features
for offline data collection, tracking data over time, incorporating
multimedia and multi-language support [
The paper uses DHIS2 a primary case, analyzing the
experiences of platform end-users in the configuration of data
collection forms. Based on noted challenges, the paper compares
the DHIS2 platform with other platforms (Commcare,
Sketc2Code) in regard to form design, in order to draw lessons
for design improvement. The choice of DHIS2 is motivated
based on the platform’s wide usage in Africa. At the same time,
literature shows that the platform can be complex to use. For
example, in Uganda, electronic forms for a health commodity
ordering system were reported to have use flexibility challenges
due to the poor design of the forms as the custom editor in
DHIS2 limited the extent to which designers could design forms
[
A Software platform is defined as a software-based product
or service that serves as a foundation on which outside parties
can build complementary products [
Configurable software platforms inherit the properties of
software platforms but use the concept of configuration. The
word configure means “to arrange how something, such as a
computer system or software, is organized, so that it can be used
for a particular task”[
Despite the increasing use of configurable software
platforms, there are several challenges. One such challenge is
platform architecture design [
Another challenge with configurable software is the process
of testing [
Another key challenge associated with configurable
software platforms is that they can be complex and users may
experience various usability challenges which may affect their
productivity [
ISO/IEC 9126-1 defines usability as the capability of a
software product to be understood, learned, used and be
attractive to the user, when used under specified conditions.
Usability is a core aspect of the system development process to
improve and enhance system facilities and to satisfy users' needs
and necessities. Usability confirms if a software product has
good utility, is efficient, effective, safe, easy to learn, easy to
remember, easy to use and to evaluate and provides job
satisfaction to the users. Adopting these aspects in the system
development process, including the sustainable design will
measure and accomplish users' goals and tasks by using a
specific technology [
Software architecture is defined as a conceptual blueprint
that describes how the ecosystem is partitioned into a relatively
stable platform and a complementary set of modules that are
encouraged to vary, and the design rules binding on both [
Since the architecture is the blueprint for the software which
is to be developed, a lack of usability considerations at design
time may require extensive and costly re-architecting of
software systems, should usability issues be discovered during
use[
II.
METHODOLOGY
The research was conceptualised into three stages. The first stage was usability studies for DHIS2 followed by experimentation with Sketch2Code and Commcare. The final stage was prototyping and evaluation.
The research process involved usability studies with 11 users from five organisations who actively use DHIS2. The study participants were required to design a custom data entry form for an HIV Testing and Counselling Combined Quarterly Report. This task was to be accomplished using the DHIS2 custom form editor as shown in Figure II-1.
Study participants were split into two groups (first-time users and experienced users) based on their proficiency in using the DHIS2 custom form editor. The group of first-time users comprised DHIS2 developers or implementers who had not used DHIS2 custom form editor before. Those who had used the editor before were grouped as “experienced users”. From the 11 respondents, 6 were experienced users while the remaining 5 were first-time users. Each group was assigned similar tasks to accomplish (see TABLE I).
rows for input fields and labels Add the corresponding data element in each cell Styling form
section to hold the data elements and input fields Add form labels for data elements 5 Attach the data elements to each form label 6 Format the cell field to have the same width and height
Data were collected using video recordings, observations and interviews. 11 videos were recorded from which data on usability metrics were extracted. The following data were collected: time taken to complete a specified task by a specific designer (in seconds), the number of errors committed during the process, the number of tasks completed by each designer, most used functionalities through the different icons which were used frequently. Structured interviews were also conducted based on Nielsen’s 10 heuristics. Notes were taken while observing how the study participants were designing the forms
This step was carried out to explore other form editing applications. Two applications were chosen: Microsoft Sketch2Code, and CommCare.
Microsoft Sketch2Code is a solution from Microsoft which
uses (AI) to transform hand-drawn user interfaces sketches to
valid HTML mark-up code. Sketch2Code brought a new
dimension into the research as it involved the use of artificial
intelligence which is one of the fields in Computer Science
whose applications cannot be overlooked as it has revolutionised
the way things are done [
Before testing with the users, the first author did a sample test of Sketch2Code with the form fields that are on the HIV Testing and Counselling Combined Quarterly Site Report. The first trial started with scanning the form in use to picture format. The scanned copy lost some quality as compared to the original copy. After searching on the internet for a tool that could convert a PDF to an image (.jpg), SmallPDF was found which is an online tool used to convert files into different formats without losing quality. When the generated form was run on the Sketch2Code, the result was weird as the model could not recognise most of the form features from the copy created due to a couple of factors including conformity with the structure of the copy with Sketch2Code.
To experiment with the users, the following procedure was followed. The first step was to enquire from users on how they design their data collection forms for different applications. The next step was to explain how they could use Sketch2Code to come up with digital prototypes from paper sketches. This involved outlining how they could design the paper sketches to conform to the structure of Sketch2Code.
CommCare consists of two components namely CommCare Mobile and CommCare HQ. CommCare Mobile is a mobilebased portion of CommCare used for data collection and service delivery. CommCare Mobile can be used on a phone or tablet and, in rare instances, through a computer. Through CommCare Mobile, a user can access a mobile application. While CommCare HQ is a website that is used for application management and reporting. Through the CommCare HQ website, users can design applications, access data, and manage mobile users. CommCare HQ receives the data submitted by frontline workers using CommCare Mobile.
The evaluation of CommCare was done by designing a similar form to which was designed in DHIS2.
For the third stage of the study, three designers were involved of which two were from one organisation. The three prototyped the following: Resizing table rows columns and input fields; and grouping icons on the menu. First, the study participants were asked to design their solutions using paper (Sketches). From their designs, questions were asked on the rationale for their proposed design. From the discussions that ensued, challenges were noted and similar implementations in other applications were researched to deepen our understanding of how we could address noted challenges. For example, on table designing an example of inserting tables in Google Docs was used.
For all the platforms, the study also reviewed documentation and feedback from user communities for the three platforms. The focus in the documentation was on how the software is designed, its architecture, software licence as well as user manuals.
III.
RESULTS
The research findings are presented in three sections based on the three research process phase which were followed: Part 1 - Usability evaluation, Part 2 - experimentation with Sketch2Code and Commcare and Part 3 – Prototyping and Evaluation
It was found that the editor did not completely support form styling, at times requiring designers to manually edit the actual source code of forms they had designed. This was done by clicking the ‘source’ option on the CKEditor menu. From the source code, designers could edit wherever they wanted to and the changes would then reflect on the forms designed. It should be noted that editing source code requires someone to have a computer programming background which is against the core principle of configurability, where the goal is that designers should create their solutions on using a configurable platform without the need for programming skills.
It was found out that tables had an auto fixed width by default, which could be changed by specifying the size in pixels after right-clicking a table. When one wanted to add a data element to a specific cell in a row, other cells in the row shrunk in size, which made it difficult for designers to select shrunk cells. Based on experience working with other editors, designers tried to increase the width and height by clicking and dragging the cell borders, but to their surprise, nothing happened.
To circumvent form editing limitations such as abovementioned, some designers reported that they use Microsoft Excel or LibreOffice Calc spreadsheet applications to design forms, after which they copy and paste the designs in DHIS2’s CKEditor. The rationale for choosing these applications was that they offer the flexibility to merge cells, hide columns, resize cell width and height.
This section presents findings on how the three selected configurable platforms compare in aiding form designing. These three tools include DHIS2, Sketch2Code and CommCare. A comparison was done in terms of design flexibility, software licensing, available functionality and complexity of technologies in use.
Most of the time when software developers want to design data entry forms, the first steps involve designing the form on paper as it helps them to discuss and gather requirements as well as agree on the design before they start the actual development. Then they write HTML (for structure) and CSS (styling)) code as a way of translating the agreed paper sketches into first digital prototypes of the form. When transforming paper sketches with the AI different results were produced. Going through each generated output, it had a well-defined HTML structure (elements, attributes) and bootstrap 4, a CSS framework was added as well to the file. Figure III-1 shows a paper sketch and an HTML form generated by Sketch2Code. During the designing and testing process three constraints were noted:
The image quality of sketches affected the result of sketches generated by Sketch2Code.
The environment in which pictures of sketches were taken affected the quality of sketches (lighting, shadows, etc.).
Sketch2Code has its defined structure of icons and options which it can recognise, implying when designing sketches, designers had to conform to that standard syntax. It was noted that if the sketches did not conform to the standards one would get undesired results
A notable positive aspect with Sketch2Code was that HTML source code generated by the platform could be imported into the DHIS2 CKEditor, created largely well-structured forms.
As has been outlined in the section above, to design the form for data collection one uses the CommCare HQ app. One needs to register first before they can create their application. To create a form, one has to specify an application name and whether they want to collect data as a survey (Collect data once) or as a Case list (Track items over time). After selecting one’s preference, one can add questions to their survey or case list.
When adding a question one needs to specify the datatype of the values that will be collected on a specific data element and those options are presented when ones click on the Add Question button. After selecting a preferred data type, one is required to fill in details for the Display Text/Label, Question ID and indicate whether the question is mandatory or not. To the right of the designing window, is a phone simulator where designers can log in and test the look and feel of the form being designed.
Much as both platforms are used for creating and designing data entry forms, there are differences in terms of how they handle some activities. The differences are on how one can design a form on both platforms, the target devices for the designed forms and preview function.
When creating a data entry form in DHIS2 one has to go
through the maintenance app, to create a data element and then
create a data set, after which they can proceed with designing a
form. Thus to get to the point of designing a form, one has to go
through three app interfaces. In Commcare, everything is done
within the same window. Literature shows that presenting data
and information on one page increases systems efficiency [
The target device for the final usage of the form for CommCare is a mobile phone which has limited screen size for while DHIS2 custom forms are rendered only on a computer and not on a mobile application which renders only default forms. As such the focus when designing in CommCare is the order in which the variables will appear and the logic behind. For DHIS2, the designer often designs custom forms with the thought that the forms will be used on a computer with a large screen and it has to be presented on a single window.
Further to the above, in CommCare one can easily preview the form being designed using the phone simulator and test the logic and the interaction before you publish it (see Figure III-2). DHIS2 has the preview option but it does not give the look and feel of the final product and you cannot add data to it. The only way to see what you have done if they work is to save it and go to the Data Entry app to see the changes.
After looking at the different tools for designing data entry forms, the first author came up with prototypes to discuss with designers as a way of designing with users. The focus was on the following tasks: resizing rows, columns and input fields, dragging and dropping data elements and grouping of icons on the menu were prototyped. Both paper and software prototypes were created on this stage.
Resizing rows, columns and input fields and grouping icons on the menu were paper prototyped.
Most of the challenges which are faced with the DHIS CKEditor editor are to do with form formatting. For example, to reduce or increase cell width, designers have to go to the source code and add styling to the code. When asked on how this can be implemented, two solutions were brought forward, the first one was to allow users to edit both the height and width of a cell. While the other was of the view to resize the width only as there are rare cases in which they edit the height of rows, columns or input fields.
b)
On this part, different options on how to present the grouping of our menu icons were presented as categories. Presentation of menu options as icons was preferred by everyone with a suggestion to display tooltips on the icons when one hovers over an icon.
After the above experiments, a software prototype was developed. On the menu, most of the icons were removed to only remain with those that are applicable to form designing to maintain a minimalist design and not to clutter the screen with unused components.
As a way of removing confusion in the handling of rows and columns, the insertion of tables was implemented similar to most word processors like Google Docs, Microsoft word where there is a visual representation when inserting a table. Instead of entering the number of rows and columns, the designer hovers over graphics which symbolise a table with rows and columns.
Another element that was developed was the drag and drop functionality. In this solution, the designer does not have to type the form field name as it was witnessed during the usability studies. This solution automatically picks the data element name which was defined in DHIS2 as the default name and provides the possibility of editing it. This reduces the time spent in entering the form labels when creating the custom forms.
Usability is defined as the degree of a product's (in this case
a software application) potential to accomplish the goals of the
user [
In the software platforms that were investigated, HTML + CSS code generated in Sketch2Code when used in DHIS2 editor was able to create a structured form similar to the one generated in Sketch2Code. Also, experienced designers reported using other software to design forms like Microsoft Excel, Google sheets to design form and only to paste the designed forms into DHIS2. These different workarounds attest to Li's (2018) findings that the existence of a workaround happens when the technical design fails to meet established work routine and contextual conditions as DHIS2 custom form editor has design flaws.
The usability of the DHIS2 custom form editor application
was negatively affected through limited functionality that
different the editor provided. In a configurable platform, the goal
is to equip the designer with all tools which will enable them to
create a solution without the need for a software developer [
Still on architecture, Sketch2Code and DHIS2 custom form
editor provide a set of predefined functions or constructs which
the designer chooses when designing. Thus, if the structure of
the form field does not conform to the predefined design the
designer will have to redesign the form which frustrates the user
and affects productivity [
Software Architecture specifies how a software system
should be organized and the overall structure of that system. It
identifies the main structural components in a system and the
relationships between them [
Cross-platform compatibility focuses on developing an application/system which can work seamlessly across other platforms. The capability of cross-platform compatibility is dictated in software architecture as it provides the constraints and enablers for compatibility. DHIS2 allowed elements defined in other platforms to run inside it due to the flexibility of the architecture in providing cross-platform compatibility. This enhances productivity among designers as they can still achieve their goal of designing a form in DHIS2 for data collection even though they have to use different platforms and integrate the results.
Meta-design is focused on objectives, techniques, and processes that allow users to act as designers. As such the software architecture should provide constructs on which designers can design their innovative solutions. CommCare provides a predefined list of elements as input fields. While in DHIS2, one does not specify the type of input field that one wants when creating a form, it is picked automatically based on how the data element was defined.
Boundary resources provide mechanisms on how software
application developers can extend functionality and
improvements on existing applications. DHIS2 has an API that
gives access to resources within the platform core. The
architecture provides flexibility for customisation which further
echoes what literature says on how the platform architecture
shapes usability through provision on room for customisation
[
Software architecture affects the usability of the software. Cross-platform compatibility provides users with the flexibility of achieving their goals regardless of the platform they are working on provided that what they will design will also run on other platforms. Also, the availability of boundary resources encourages development and innovation beyond a configurable platform’s core developers. As such different software developers can create workarounds on how they can improve usability through apps and functionalities which can be used by designers thereby enhancing the usability of the platform.