ISSN 2355-0082

Analysis and Development of Interface Design

on DKI Jakarta & Tangerang‘S Qlue
Application based on Don Norman’s 6 Design
Principles
Sheila Rizky Novensa1, Wira Munggana2
Department of Information Systems, Faculty of Engineering and Informatics, Universitas Multimedia Nusantara,
Tangerang, Indonesia
1
[email protected]
2
[email protected]

Received on August 28th, 2017

Accepted on June 8th, 2018

Abstract—As government effort to embrace the social from the Central Bureau of Statistics, in 2015, their
media trend, one of it by launching a mobile application registration data revealed the number of crimes in
called ‘Qlue’. Initial study of user experince showed the Indonesia tends to fluctuate from year to year. In order
result of questionnaire that was consisted of 6 questions for such criminal acts to be readily addressed by the
from the six design principles from Don Norman local police force, the user may report criminal acts
regarding the UI of Qlue application, there are 2 things through this application.
in Qlue that don’t comply with six design principles
from Don Norman. The 2 things are constraints and Human Computer Interaction theory that match
consistency. That was the reason for this research, to this research is six design principles from Don
analyze and make a user interface for community Norman. These principles contain standards and
service application which makes the usability easier concepts that aim to allow users to understand the
based on the six design principles from Don Norman. workings and usability for both a website design or a
The comparison between Qlue’s user interface and the mobile application.
user interface was done by distributing the
questionnaire that was consisted of 6 questions to the The questionnaire that contains the questions of
same respondents. Methodology used in this thesis is Don Norman's design principles is distributed to 224
Task-Centered System Design (TCSD). Started with respondents (with Jakarta’s population size 10 million,
problem identification, analysis, UI redesign and confidence level 90%, margin of error 5%) to find
evaluation. The result of this thesis is an UI that have a things that are inconsistent with Don Norman's 6
constraint which is a warning page that appeared before
design principles in the Qlue application. Based on the
user finished writing a report and wanted to go back to
previous page. The second result is a consistency of all
results of the questionnaire, there are two design
report writing process and interface including buttons principles that are not met in the Qlue application;
and icons. The conclusion of this research is that the which are constraint and consistency. Constraint refers
revised proposed user interface has solved the problems to determining ways of restricting the kind of user
that appeared on the UI of Qlue application. interaction that can take place at a given moment.
While consistency is the principle that standardized
Index Terms— Donald Norman, Six Design the consistency of a UI visual design.
Principles, , Task-Centered System Design, TCSD, User
Interface Analysis, Qlue.
II. LITERATURE REVIEW
I. INTRODUCTION A. Six Design Principles
The large number of mobile phone users and active Through his book Design of Everyday Things,
internet users through mobile phones is one of the Donald Norman explains the guidelines for making
opportunities that companies can use to enhance good designs using the objects people use every day
competitive advantage by developing mobile [1]. Here are 6 key guidelines proposed by Donald
applications that provide services. Norman:
Application services that will be the primary object 1. Discoverability. Discoverability is whether
is an application called Qlue which provides reporting user may find how to use an object by
criminal acts that occurred in Indonesia to the local interacting with the object.
police station as its service. The application is
integrated with the local police. Based on a report
1 IJNMT, Vol. V, No. 1 | June 2018
 ISSN 2355-0082

2. Affordances. Affordance is the visual attribute 4. Walkthrough Evaluation; evaluate the view.
of an object or control that gives the user a
clue of how the object or control can be used. III. RESEARCH METHODOLOGY
3. Mapping. Pressing a button or activating a
A. Task Centered System Design (TCSD)
control will usually trigger the system to
perform some functions. There is a The study began by making the UI of the
relationship or mapping between control and application Qlue using Axure program, a leading UI
its effects. building tool and then proceed with the following
steps:
4. Constraints. Provide limits on what an object
might do. 1. Identification; distribution of questionnaires
containing questions based on six design
5. Feedback. Feedback is important to help users principles from Donald Norman on the UI of
understand how to interact with objects and existing Qlue application.
what effect our actions have on the system.
The purpose of the feedback is to provide 2. User-Centered Requirement Analysis; analysis
confirmation to the user whether an action has of the results of the questionnaire that has been
been successful or not successfully done. distributed and find part of Qlue application
that is incompatible with six design principles
6. Consistency. Consistency is the key to helping of Don Norman.
users recognize and apply a pattern. A similar
activity should do the same. 3. Design as Scenario; a revised UI will be
created based on the problems that have been
B. Task Centered System Design found.
The method used in this research is Task Centered 4. Walkthrough Evaluation; distributing
System Design (TCSD). Figure 1 shows the steps of questionnaires containing the same questions
this study. to the same respondents to get an evaluation of
the UI that has been made.

B. Data Retrieval
The data used for this study was obtained by
distributing questionnaires containing questions about
the use of Qlue community service applications to 224
respondents. Table 1 shows the table of questions with
each of the principles represented.
Table 1. Question List
Question Principle
Can you easily find the menu you
would like to access? Discoverability

Do you know the function of a

menu or symbol without any Affordances
explanation stated?
Do you have difficulty in operating
Mapping
the buttons?
Does this application provide
Fig 1. Study Process certain restrictions so that users do Constraints
not make mistakes?
Task-Centered System Design (TCSD) is a process
Is the feedback provided by this
for identifying user needs [2]. Here are the steps for Feedback
application useful to you?
doing TCSD [3]: Is the appearance of this app
Consistency
1. Identification; articulation of concrete already consistent?
description of real man doing real task C. New UI Creation
2. User-Centered Requirement analysis; use After obtaining the data from the questionnaire, the
these descriptions to determine what kind of revised UI will be created based on the parts in the
users and what tasks the system should Qlue application that the respondent thinks are
perform lacking. The new revised UI adapted to Don Norman's
design principles. UI was created using Axure, it
3. Design as Scenario; create a prototype display
generates the HTML 5 that is deployes to a website, it
that meets those requirements
IJNMT, Vol. V, No. 1 | June 2018 2
ISSN 2355-0082

is used for user UI testing on the revised UI, testing contents of the report details, a warning will
are done through their mobile devices’ browser. appear that says that the contents of the report
should not be empty. However, the user is not
IV. ANALYSIS AND DISCUSSION given an error limitation when the user presses
the button to return to the previous page while
A. Identification still doing the reporting process, the user can
Based on the results of the questionnaire data that return without any warning that the report that
has been distributed, there are 2 questions that have a the user has just done will not be saved or
percentage value indicating that the principle sent.
represented by the question is not met in the Qlue 2. Consistency. Here are the things in the Qlue
application’s UI. Here are the results of data from both app that are not consistent:
questions.
a. The shape and color of the button in
the Qlue application is inconsistent
(Fig 4 and 5). Not all buttons and
functions are the same.

Fig 4. Inconsistent Button and Color

Fig 2. Data Result 1

Fig 5. Inconsistent Button and Color
Fig 2 shows that 27.3% of respondents responded
that Qlue had given certain restrictions that prevented b. The display for the three different
users from making mistakes and the rest of 72.7% types of reporting in the Qlue app are
responded that Qlue did not give the hints clear inconsistent even though the three
enough for user. pages have the same functionality as
posts (Fig 6, 7 and 8).
The answer to this question shows that most
respondents argue that the Qlue application does not
impose restrictions on the user so that the user does
not make mistakes.

Fig 3. Data Result 2

Fig 3, showed that 45.5% responded that the Qlue
application UI display was consistent. Meanwhile,
54.5% of the respondents answered the Qlue
application is inconsistent.
The answer to this question shows that more than
half of the respondents argue that the Qlue application
UI display is inconsistent.

B. User-Centered Requirement Analysis

1. Constraints. In the existing reporting feature Fig 6. Inconsistent Reporting Menu
of the Qlue application, the user is given an
error limitation when the user has pressed the
post key before filling the textbox for the

3 IJNMT, Vol. V, No. 1 | June 2018

 ISSN 2355-0082

with the display message box (Fig

10).

Fig 9. Inconsistent Post Success Feedback

Fig 10. Inconsistent Post Success Feedback

C. Design The Revised UI

The revised new UI is created using a program
Fig 7. Inconsistent Reporting Menu
called Axure. In order for all the respondents to access
this UI, the UI result created is uploaded on the
website to share the finished results UI created using
axshare.com. Here are a series of screen capture of the
UI results on a mobile browser:
1. Constraints. Figure 11 is the display for
reporting 'Report Local Issue' in the UI. If the
user presses the button to return to the
previous page before there is a statement that
the report has been posted, a warning will
appear asking whether the user will actually
leave this page, because if that is the case, the
report will not be saved.

Fig 8. Inconsistent Reporting Menu

c. The feedback display given in the
Qlue application is inconsistent. In
the reporting menu, feedback appears
on the user's mobile notification (Fig
9), when the user successfully edits
the profile, the feedback will appear
IJNMT, Vol. V, No. 1 | June 2018 4
ISSN 2355-0082

Fig 14. Feedback Consistency

Fig 11. Constraints

2. Consistency. In accordance with the Qlue
application, in the Report Local Issue report,
users must upload photos, it is served in the
new revised UI. The three warnings (Fig 12
and 13) that exist in this UI have a consistent
display of red rectangle with black writing.

Fig 15. Post Menu Consistency (Local Issue)

Fig 12. Report Consistentcy

Fig 13. Report Consistency

Feedback appearance on the new revised UI
has a consistent look that is grey-shaped box
with black writing. A feedback will appear if
the user has completed an activity such as a
post report (Fig 14) or has changed the profile
details.

5 IJNMT, Vol. V, No. 1 | June 2018

 ISSN 2355-0082

Fig 16. Post Menu Consistency (Place Review) restrictions that prevent users from making mistakes
and only the remaining 18.2% replied that the UI does
not provide restrictions so that users do not make
mistakes.
The answer to this question shows that most
respondents argue that the new revised UI has given
restrictions to the user so that users do not make
mistakes.
There is a difference of 54% with the previous
initial questionnaire on the percentage of the statement
that the UI created has given the error limits.

Fig 19. Data Result (Consistency)

As can be seen in Fig 19, 81.8% user responded
that the new revised UI appearance was consistent.
Meanwhile, 18.2% respondents answered the UI is not
consistent.
Fig 17. Post Menu Consistency (Neighborhood
Report) There is a 36% difference with the previous
questionnaire on the percentage of statements about
Three menus of these reports (Fig 15, 16 and the consistency of the UI display.
17) have the same function which is to post a
Based on the results of the questionnaire data, it
report, although the report consists of 3 types.
concludes that the 2 problems found in the initial
All three types of reports have the same identification stage of constraints and consistency have
consistency that all the menus for reporting are been resolved with the new revised UI design.
on a single page, and both include menus for
uploading photos. The page to do the reporting The initial results on the questions representing the
also has the same post button display, which is consistency principle, resulted in a 45.5% agrees that
a white rectangle. the Qlue application UI is consistent, compare to the
results of similar questions against the new revised UI,
D. Evaluation achieve a higher percentage value of 81.8%.
To compare the UI of Qlue application with the
new web-based revised UI, the questionnaire from the V. CONCLUSIONS AND RECOMMENDATIONS
initial survey with the link to the web page was
distributed to the the same respondents again. Here is A. Conclusion
the result of data from the questionnaire. The Qlue application is a part of Jakarta’s Smart
City program, it has a very important part of
connecting the smart city systems with the
community, so the user experience is very important.
This study has found that the UI Design of Qlue will
be much improved by creating a more consistent of
three things; the reporting menu, the restrictions
feature and the feedback format. As part of the
research, this paper has gone even further by creating
the new revised UI for a more consistent Qlue
Application, and it has been proved as a preferred
Fig 18. Data Result (Restrictions) design by the respondents.
Fig 18 shows that 81.8% of the respondents
answered that the new revised UI has given certain

IJNMT, Vol. V, No. 1 | June 2018 6

ISSN 2355-0082

B. Recommendations
The developer of Qlue application must justify the
limit of errors or constraints and the consistency of ACKNOWLEDGMENT
existing views. The limitation of this research is that it I would like to thank my supervisor Wira
focused only on the interface design part of an Munggana, S.Si., M.Sc. for assistance with this paper
application, not the whole experience (like the and Yustinus Eko S.Kom., M.M who provided insight
database configuration or the server infrastructure for and expertise that greatly assisted this paper.
a speedy application). However, for other researchers
who also want to analyze the UI of an application, it is
REFERENCES
recommended to also analyze the user experience of
the application. Once again, this study did not examine [1] Norman, Don. (2013). The Design of Everyday Things :
Revised and Expanded Edition. New York: Basic Books.
the back-end part of the related application, so the
[2] Lewis, C., & Rieman, J. (1993). Task-Centered User Interface
problem discovery process took longer and the Design. A Practical Introduction
problems found were also likely to be inaccurate [3] Greenberg, Saul. (2002). Working Through Task-Centered
because they only rely on the results of the System Design
questionnaire data. For a comparison between the [4] Diaper, Dan., & Stanton, Neville A. (2004). THE
selected application UI and the UI already created, it is HANDBOOK OF TASK ANALYSIS FOR HUMAN-
COMPUTER INTERACTION. New Jersey: Lawrence
recommended to do so with A/B Testing. With the Erlbaum Associates.
testing method, the time spent on the problem [5] Difatama,Rizka., Sopiah, Nyimas & Muzakir, Ari (2016).
discovery process will be less and the problems Sistem Informasi Rekam Medis Terpadu Pada Rumah Sakit
contained in a website or application will be found Pelabuhan Palembang Berbasis Web Menggunakan Metode
clearly and accurately. TCSD (Task Centered System Design), 2-4
[6] Rahman, Arif., Junaedi, Danang, S.T., M.T, & Sumawi,
Dawam Dwi Jatmiko, S.T., M.T. (2016).Perancangan User
Interface Aplikasi Mobile Fokus Jabar Menggunakan Metode
Task Centered System Design, 2-3

7 IJNMT, Vol. V, No. 1 | June 2018