F​ACULTY OF COMPUTER SCIENCES AND MATHEMATICS

ICT551

HUMAN COMPUTER INTERACTION

FINAL REPORT: PAPER PROTOTYPING

GROUP

CS2403C

GROUP MEMBERS

​NURUL AFIQAH BINTI MUHAMMAD FADLAN (2020861638)

NUR NAJIHAH BINTI SHUHAIMI (2020862068)

NUR SYUKRIAH BINTI ABU WAHID (2020859562)

NUR FATIN MASYITAH BINTI MESLE (2020614628)

NURUL SYAFIQAH BINTI ANUAR (2020465104)

MAIZATUL HUMAIRAH BINTI HAMIDON (2020452706)

LECTURER NAME

DR ZAN AZMA NASRUDDIN

 TABLE OF CONTENT

NO TITLE PAGES

1. INTRODUCTION ………………………………………………………. 3
2. OBJECTIVE ……………………………………………………………. 3
3. PROBLEM STATEMENT …………………………………………….. 4-5
4. PROJECT SIGNIFICANT/BENEFITS……………………………….. 6
5. METHOD SOLUTION……………………………………………….... 7-8
6. LOW & MIDDLE FIDELITY DESIGN………………………............. 9-24
7. ANALYSIS ON EVALUATION USING HE PRINCIPLE…………... 25-43
8. DEMONSTRATION(TASBIH COUNTER) 44-47
9. CONCLUSION……………………………………………………….... 48
10. REFERENCES………………………………………………………... 49

2
 1. Introduction

What is clear is that user interface (UI) is the feature of an application where
interactions between humans and machines happen. In this digital era, mobile applications
and websites are the most competitive things as majorities of people nowadays are using
mobile applications for their daily uses not only adult people but also young and older
people. therefore, a user-friendly interface is very important to help users communicate with
the computer or application system. The developer needs to provide an easy, enjoyable and
effective interaction to make it easier for the target audience to see what is the content in the
mobile application to draw the visitor’s or users attention and keep them on our mobile
application. Without a user-friendly interface, it will lead to more confusion in a user’s mind
and decrease the chances of a mobile application fulfilling its purpose.

In terms of that, we were designing a user interface for mobile application DailyZikr. It
is an interactive application to learn and guide the user on how to perform their daily zikr
which is for adult people. Zikr in Islam refers to remembering Allah and calling him and it is a
medication for our inner peace. However, people nowadays sometimes forget to zikr in their
day as they are too busy, don't have much time to zikr or they don’t know how to start their
zikr. Thus, by this application, they can get a notification to remind the user to recite the zikr
every day even for a moment. This application contains zikr of the day and other authentic
lists of zikr for a Muslim’s daily supplication or special occasions such as weather or iman,
this application also provides a zikr counter for the user to count their zikr. Subsequently, this
application also guides the user to hear and recite Zikr by a picture or video that will make
the user more at ease.

2. Objective

I. To investigate the user requirements on DailyZIkr to provide an understandable and

increase the efficiency of the users.
II. To design a middle fidelity prototype of DailyZikr to a minimalist and aesthetic design
for the user’s convenience.
III. To evaluate the prototype of DailyZikr mobile application using Heuristic Evaluation
to meet excellent user satisfaction.
IV. To create an interface for DailyZikr which users find it easy to use and pleasurable.

3
3. Problem Statement

Pie Chart Problem statement

● ​For some workaholic people, they

don't have much time and are
always too busy with their work.
They are facing some difficulties that
they don’t have time to find reading
material regarding the zikr or to find
the list of zikr in the book or any
kitab. By using our mobile
Figure 1.0
application the user can easily
search and learn about the daily zikr
anytime and anywhere.

● Users may need more time in terms

of remembering the Zikr by
themselves. Users may not have a
good and proper technique in
remembering the Zikr. Users need
to find and do some research on
how to get a proper technique in
Figure 1.1
remembering the Zikr and search
suitable nasyeed that include the
Zikr on YouTube.

4
 ● As we know, if we want to count
our zikr we need to have a tasbeeh
as a counter. Most of the people
don’t bring tasbeeh anywhere and
they can become forgetful if they
count using their finger which
Figure 1.2 becomes a problem for them to
count their zikr in a day. By using
DailyZikr they can count their zikr in
a day and they can add the total of
their zikr in a day.

● Most of the people do not know

about the type of zikr according to
the situation. There are multiple
types such as zikr according to
weather and zikr according to
emotion. In our DailyZikr we have
listed the type, so the user can

Figure 1.3 easily explore and learn on their

own.

● Majority of the users are clueless

about the meaning of each term of
the zikr which requires them to give
some effort to find the meaning of
the zikr. However, by using the
DailyZikr application the user can
directly learn the meaning of each
zikr they desire.
Figure 1.4

5
4. Project Significants/Benefits

The significance of the proposed prototyping is to identify and formulate the main direction of
the design but also significantly save time and to improve the interaction between users and
the mobile app by making the apps more user-friendly and approachable to the user's
needs. The prototype gives the user a complete idea of ​how the application will look like in
the final result. Moreover, prototyping allows us to assign the design development process,
focusing on important interface elements.

As we can see, it can build a bridge between software designers and software
engineers. Both software designers and software engineers cooperate by introducing the
prototype to convey their ideas to develop the application with the features necessary.

The importance of this prototyping for software engineers can make it more obvious
to understand the tasks for each team member. It allows accomplishing more realistic
planning of development deadlines and more accurately determines the cost of work. Also,
the presence of the prototype can significantly expedite the time of designing, reducing the
workload to make a multitude of edits. ​It also allows the software engineers some insight into
the accuracy of initial project estimates and whether the deadlines​ of the project.

Other than that, the presence of the prototype enabled the software designer to
present the idea to the customers more clearly. Also, the software designer can collect
opinions, testimonials, and recommendations from the potential customers. Hence, with the
prototyping, the software designer can determine early what the end-user wants with faster
and less expensive software.

If we take a look at the end-users (customers), this significance of prototyping for the
end-users can reduce time and costs. Most of the end-users will be happy if the cost of the
project is under budget. Prototyping improves the quality of requirements and specifications
provided to customers. This prototyping also can improve and increase user involvement. It
requires user involvement and enables them to see and interact with a working model of
their project. With prototypes, end-users can give their immediate feedback, request project
changes and adjust model specifications. Prototyping most importantly helps avoid
misunderstandings and miscommunications during the development process.

This project prototyping can assume that the prototype will be equally useful to both
parties. It allows making the process of creating a site understandable, controllable and
more comfortable for both parties.

6
5. Method solution

Method 1: Survey for user requirement

Surveys allow you to reach thousands of possible participants if necessary, which

ensures a more accurate sample in which to conclude. The anonymity of surveys
allows people to feel more candid with their responses. To get accurate data, you
need your participants to be as honest as possible with their answers. Surveys
provide more honest responses than other types of research methodology, especially
if it is clear that the answers will remain confidential.

Survey for user requirements helps to satisfy all the applications (Daily Zikr) need.
For example, how many users having trouble with their zikr or which range of users
age that most likely to use this application. A few simple questions can provide a
treasure trove of insight on your customer base. Collecting information such as age
and gender is important data for future app development and can even aid you in
choosing the correct ad agency or in getting the right partnership.

Surveys can also include questions about customer likes and dislikes, problems they
have, and address areas not directly related to your app. The more you can
understand about who your customers are, the easier it will be able to create
something that they love to use.

Method 2: Prototype Survey

Surveys have proven to be incredibly powerful tools for market analysis and driving
user insight. Restaurants and auto shops have surveys asking “How did we do
today?” and retail stores often have their cashiers ask “Did you find everything you
were looking for?” These may seem like simple questions to the consumer, but to a
business, these questions are crucial for understanding how to improve.

7
For our mobile application, this prototype survey is important to identify and figure out
not only what users want but also what is most important to them. Surveys tell your
users that you are dedicated to improving your app and provides them with specific
questions to answer which is often easier for most people than creating their
feedback.

Whether you use a service or create your own, surveys are a powerful tool to drive
your business and beat your competition. The app that is first to build what their
customers want, knows who their customers are, and understands what their
customers think is the app that will come out on top.

8
 6. Low & Middle Fidelity Design

Based on the pie chart above, users prefer DailyZikr development in terms of mobile
applications. This is because of the aesthetic vision that the users prefer in conduct and
manage the apps by themselves. Also, the content of DailyZikr applications itself match with
real-life information, for example, the Zikr phrase in the DailyZikr applications is the same as
the Zikr that is in any book in real life. It makes users prefer having DailyZikr as an
application rather than a website.

Existing Design Low Fidelity Mid Fidelity

Welcome Page
When a user opens up the apps Zikr Daily, the welcome page will be like this. Users have to
click start to the next page.

Raw Idea

9
 Existing Design Low Fidelity Mid Fidelity

Homepage

This page after the welcome page, allows users to choose what they want to open from the
Daily Zikr.

Raw Idea

Existing Design Low Fidelity Mid Fidelity

Zikr of the Day

The zikr of the day is full of zikr that are related in our daily routine such as Solat, Zikr after
solat, wirid and recommended zikr such as suggested in Quran and hadith. This feature also
comes with audio and translation for the convenience of our users.

10
 Raw Idea

Existing Design Low Fidelity Mid Fidelity

Navigation Bar

Users freely choose the menu when they click the navigation bar on the top left application. The
navigation bar includes the type of zikr, hadith of the day, the mood of the day, tasbih counter and
setting. The users can use a shortcut by clicking on the list-menu and it will take the users to the
right page.

Raw Idea

11
 In user interface design surveys, we can recognize what kind of features that user more
understands to use. Flexibility and efficiency in using the applications make it easier for the
user in handling the applications. Because the user has their own experience in using the
other applications which have the same features as DailyZikr apps.

Existing Design Low Fidelity Mid Fidelity

Main Page

The interface in application terms. We create a symbol button with an icon to give an appropriate
sign to the user in understanding the interface. So, the user taps the icon and it will go to the
other interface.

12
Based on the bar chart given, users prefer the Zikr with audio in the applications. By having
audio in the application, users can hear the audio of Zikr recitation and they will follow the
recitation. So, it is easy for the user in memorizing the recitation with have a specific melody
for every Zikr.

13
 Existing Design Low Fidelity Mid Fidelity

Daily Zikr

Daily Zikr interface is for the user to make a zikr as a daily habit, which is they can track their
progress here. As we can see, users can change manually for ‘week’ and ‘month’ at the list
drop-down provided. Besides, the user can mark as done after they finish their zikr. This interface
also provided audio for each day and tasbih counter to make it easy for users not to get confused.

Raw Idea

Based on the pie chart given, 100% respondent choose to have pictures of recitation or
phrases of Zikr in the applications. The consistency that DailyZikr brings in the applications,
which is with the main content, the Zikr itself. Hence, it gives the reason why the user wants
to use this application. Besides having many types of Zikr, the application offers quotes from
Hadith and tasbih counters.

14
 Existing Design Low Fidelity Mid Fidelity

Iman Zikr

Iman Zikr interface is the slot of zikr for the user who is looking for zikr upon encountering an
enemy or upon sinning. The interface also provides audio and the translation of the zikr for
guidance to the users for correct pronunciation. The user also can share the zikr to any platform
of social media with the intention of sharing.

Based on the pie chart above, most of the respondents prefer language for Hadith use in
English. But some of them prefer in Malay language, maybe they have language boundaries
or difficulties in understanding the English language.

15
 Existing Design Low Fidelity Mid Fidelity

Weather Zikr

This application also contains special occasions authentic list of weather zikr interfaces. We
provide daily zikr, iman zikr and this one is a list of weather zikr which have a zikr during a
windstorm, when the weather is hot or when the weather is rainy. They just simply need to click at
the title of the zikr and the zikr will show up . This interface will allow user to hear the sound of the
weather zikr.

16
Based on the pie chart above, most of the respondents choose to have popup notification in
the applications. By managing a notification in the application, users can know that there is
Zikr that they need to recite for that day. So, users can make time to have a Zikr.

Existing Design Low Fidelity Mid Fidelity

Push Notification

DailyZikr will always give the update about the zikr and sunnah of the day by giving the
notification.

Raw Idea

17
 Existing Design Low Fidelity Mid Fidelity

Hadith of the Day

We were also adding Hadith of the day, which is the hadith will change day by day so the user
can gain new knowledge. Users can view the hadith whenever they want whether they want to
view before they start zikr or after they have done zikr. The user also can copy the text hadith,
can share and download the picture. This application also allows users to favourite the hadith. So
that they can view the hadith that they love to read.

Raw Idea

18
 Existing Design Low Fidelity Mid Fidelity

Favourite
This application also allows users to favourite the hadith. So that they can view the hadith that
they love to read.

19
 Existing Design Low Fidelity Mid Fidelity

Mood of the Day

Set the mood of the day by choosing the mood and the user get the suitable zikr for the following
mood because, in Islam, we have a variety of zikr we can perform like for example when we are
mad, the application will suggest the best zikr to use like astaghfirullahalazim. This idea will give
the user comfort and also be very user-friendly as the application concerns the user’s personal
feelings.

Raw Idea

Raw Idea

20
 Existing Design Low Fidelity Mid Fidelity

Tasbih & Takbir Counter

Users can use the apps as tasbih counters instead of bringing the tasbih anywhere and anytime.
Tasbih counter interface provides the zikr with the ‘rumi’ for the users to recite while tapping on
the ‘TAP HERE’ button. If they tap one time that counts as one. They also can restart the counter
to zero by tapping on the ‘RESTART’ button.

21
From the pie chart above, the respondent prefers to have a colourful interface than formal
interface. As we can see, the color that we used in DailyZikr applications is green, yellow
mustard and grey. The harmonies of the color makes the applications more comfortable to
use and watch it whenever they use it.

Based on the pie chart given, respondents prefer to have dark themes for DailyZikr
applications rather than light themes. The aesthetic that DailyZikr provides in the application
is to make sure the user can manage the application process calmly and without any error.
By having a good design, users can use the application in a long term period and enjoy the
process.

22
 Existing Design Low Fidelity Mid Fidelity

Setting
The user of DailyZikr can also choose their own preferred theme. There are 3 choices of
appearance mode whether they can choose between default theme, light theme and dark theme.
The user also can put background wallpaper to make their application more attractive. The user
can choose between default wallpaper and choose from the existing design that is provided in the
application. Users can also customize their wallpaper by choosing the wallpaper from their own
gallery in their device.

23
 Existing Design Low Fidelity Mid Fidelity

Custom Zikr
Users can make their own zikr that they like. They also can customize the number of counts and
start the zikr with increasing from 0 or decreasing from the number of counts that they put.

24
7. Analysis on evaluation using Heuristic Evaluation

Heuristic evaluation is a thorough assessment of a product’s user interface and its purpose
is to detect usability issues that may occur when users interact with a product and identify
ways to resolve them. We have conducted a survey of evaluation of our prototype design for
DailyZikr. From the survey, we will evaluate the user preferences based on the heuristic
evaluation to fulfill the user’s requirement.

8.1 Visibility of system Status

The first heuristic evaluation based question is visibility of system status. The system
application should always keep user informed about what is going on, through appropriate
feedback within reasonable time

FIGURE 8.1.1

Based on the figure 8.1, 45.5% from 20 respondents strongly agree that the application
capable of updating only content that has actually changed. 31.8% of respondents agreed
with the question, 18.2% felt neutral about it and only 4.5% strongly disagreed.

The question is about the content feedback from the application. The mobile user interface
content including information and user interface elements should support overall system
visibility through appropriate feedback and denotations.

25
 FIGURE 8.1.2

Based on the chart from the survey, most of the respondents either strongly agree and agree
that the selected icon in the application is clearly visible when surrounded by unselected
icons. 22.7% neutral about the question and 4.5% of respondents strongly disagree about
this matter.

The button icon feedback can be as simple as a change of color once the user has clicked
on a button, or a ​progress indicator when a process needs a little longer to finish. These
indicators communicate that the system is working, and reduce uncertainty to users from
tapping the same button multiple times because they weren’t sure if the first time worked.

26
8.2 Match Between System And The Real World

Next, the heuristic evaluation question is about match between system and the real world.
The system application should speak the user’s language, with words, phrases and concepts
familiar to the user, rather than system-oriented terms. Follow real-world conventions,
making information appear in a natural and logical order.

FIGURE 8.2.1

From the chart above, we can conclude that most respondents strongly agree with 54.5%
from 20 respondents that the language in the DailyZikr application is clear and concise.
36.4% agreed and 9.1% of respondents felt neutral about the question.

The simplicity of language is important in the application. The users should always be able to
understand meaning without having to go look up a word’s definition in a search engine. Use
a simple word that everyone can understand and avoid using hard words that make the user
confused.

27
 FIGURE 8.2.2

Based on the chart above, most respondents either strongly agree and only agree that the
icons in DailyZikr are concrete and familiar. Meanwhile only 9.1% of 20 respondents feel
neutral about this matter.

Users find comfort in familiarity. Whenever users see a familiar icon in the system, they can
easily understand the process of the system. For example, the icons design in DailyZikr is
based on familiar things in the real world. These good designs speak like the user’s own
language. These match user’s expectations and prior experiences with real-world systems,
information should be presented in a natural and logical way.

28
8.3 User Control And Freedom

The third evaluation is about user control and freedom. The principle states, users often
choose system functions by mistake and will need a clearly marked “emergency exit” to
leave the unwanted state without having to go through an extended dialogue. Support undo
and redo.

FIGURE 8.3.1

Based on the chart above, 50% from 20 respondents strongly agree that Dailyzikr provides
navigation on the homepage. 40.9% respondents agree and 9.1% felt neutral about this
question.
Whenever a user opens the homepage of DailyZikr, a few navigation buttons and icons are
provided in the application to help users using the system easily. There are back button,
menu button and setting button to navigate the user in the application.

29
 FIGURE 8.3.2

From the chart above, 36.4% of respondents strongly agree that DailyZikr provides undo
action when users accidentally delete a zikr that they created. 31.8% of respondents only
agree, 22.7% felt neutral and 9.1% disagree about this question.

DailyZikr provides an undo button for the user to retrieve back the mistake they make in the
application. The users must have the flexibility to edit or undo something that is not working
for them. It is essential to provide flexibility to the users so that they have enough freedom to
handle any mistakes.

30
8.4 Consistency and Standards

The fourth heuristic evaluation is consistency and standards. The principle states that users
should not have to wonder whether different words, situations or actions mean the same
thing. Follow platform conventions.

FIGURE 8.4.1

Based on the chart above, 45.5% of respondents strongly agree that the font size in
DailyZikr is appropriate. 36.4% only agree and 10.2 respondents felt neutral about this
question.

It is essential that the overall system should look unified, right from the fonts of the heading
and body text to the colors used on the interface. ​DailyZikr uses an appropriate font and size
that ​allow the user to learn the system quickly and have a smooth experience.

31
 FIGURE 8.4.2

From the chart above, 59.1% from 20 respondents strongly agree that the button size in
DailyZikr is appropriate. 22.7% only agree, 13.6% felt neutral and 4.5% of respondents
disagree with the question.

There are many buttons and icons used in DailyZikr to navigate the user while using the
application. There are certain buttons or icons that have certain meaning. The three lines
button stands for menu navigation, the question mark symbol for help navigation and arrow
button for back to homepage. These buttons are used in appropriate size that fits perfectly in
the application.

32
8.5 Error Prevention

The fifth heuristic evaluation is error prevention. The principle states that even better than
good error messages is a careful design which prevents a problem from occurring in the first
place. Either eliminate error-prone conditions or check for them and present users with a
confirmation option before they commit to the action.

FIGURE 8.5.1

Based on the chart above, 36.4% of respondents strongly agree that the system of DailyZikr
prevents users from making errors whenever possible. 31.8% respondents agree and 27.3%
felt neutral about this question. Meanwhile, only 4.5% of respondents, which is one person
strongly disagree.

The system of DailyZikr provides error messages when the user makes an action. The
pop-up message will be displayed to confirm the action that users make. The instructions in
the application are also clear that will make the user more understand about the application.

33
 FIGURE 8.5.2

From the chart above, 45.5% of respondents strongly agree that accidental activation
avoided or foreseen feature is offered in the DailyZikr system. 22.7% only agreed and 31.8%
of respondents felt neutral about this matter.

DailyZikr application offered various features to avoid users from making errors. Back button
is offered on each page to navigate the user back to the previous page. This action will
easily prevent the user from making mistakes and recover from it.

34
8.6 Recognition Rather Than Recall

The sixth heuristic evaluation is recognition rather than recall. The principle states that
Minimize the user’s memory load by making objects, actions, and options visible. The user
should not have to remember information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily retrievable whenever
appropriate.

FIGURE 8.6.1

Based on a chart that we got from the survey, 40.9% from 20 respondents strongly agree
that DailyZikr reduces the information that users have to remember. 31.8% of respondents
only agree, 18.2% felt neutral and 9.1% disagree about his statement.

DailyZikr provides less information and rather provides the user with ​visual cues, options,
actions, instructions available which helps to avoid the memory load or cognition load and
make the decisions error-prone.

35
 FIGURE 8.6.2

From the chart above, 31.8% of respondents strongly agree that DailyZikr suggests zikr
based on what user is trying to search. 40.9 respondents agree and 22.7% either agree or
disagree about this statement. Meanwhile other 4.5% of respondents disagree that this
application suggests zikr based on user’s search.

When the user searches something on the search box, the application will personalise the
list of recently viewed items, suggestions by user’s browsing history and recommendations.
So that the user can easily recognize & recall what they want to work on.

36
8.7 Flexibility And Efficiency Of Use

Flexibility and efficiency of use is one of the heuristic principles. This principle states that
accelerators-unseen by the novice user-may often speed up the interaction for the expert
user such that the system can cater to both inexperienced and experienced users. Allow
users to tailor frequent action.

FIGURE 8.7.1

Based on the chart above, 63.6% from 20 respondents strongly agree that links in DailyZikr
navigate them with good information scent. 22.7% of respondents only agree and 9.1% felt
neutral about this matter meanwhile only 4.5% of respondents which one person disagree.

In DailyZikr, every icon and button are linked with each page in the application which we
called as shortcuts. If users want to go to homepage, they just need to click the home icon
that will navigate them to homepage. ​For the inexperienced user, it might be a problem to
learn or to remember these icons and buttons, but for the experienced user, these shortcuts
can save a lot of time & effort.

37
 FIGURE 8.7.2

From the above, 40.9% of respondents strongly agree that DailyZikr provides accelerators
like keyboard shortcuts and touch gestures in the application. 36.4% agree and 10.2%
neither agree or disagree. Meanwhile only 4.5% of respondents strongly disagree about this
matter.

DailyZikr has a feature where users can perform a swipe gesture over the letters to input
text, rather than tapping each individual letter. This gesture is an enhancement: it doesn’t get
in the way of a new user who very likely is not aware of it, but can save a lot of time to a
seasoned user.

38
8.8 Aesthetic And Minimalist Of Design

The heuristic principle states aesthetic and minimalist design that dialogues should not
contain information which is irrelevant or rarely needed. Every extra unit of information in a
dialogue competes with the relevant units of information and diminishes their relative
visibility.

FIGURE 8.8.1

From the chart above, 40.9% from 20 respondents strongly agree that they like DailyZikr
design. 36.4% of respondent only agree and 22.7% felt neutral about this question.

FIGURE 8.8.2

39
Based on the bar chart above, most of the respondents think that the design in the
application needs to change, 27.3% of respondents felt neutral and 9.1% of respondents
strongly disagree about the question.

The application only needs to provide the required and relevant information to the user, any
irrelevant information diminishes the worth of the relevant information. Information can be
text, images, design elements, animations. In DailyZikr, the design of the application is
based on a nature theme with midnight green wallpaper with flower pattern. It will give the
user comfort as they use the application.

8.9 Help Users Recognize, Diagnose And Recover From Errors

The ninth heuristic evaluation is to help users recognize, diagnose and recover from errors.
The principle states that error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.

FIGURE 8.9.1

40
Based on the chart above, 36.4% of respondents strongly agree that there is some form of
feedback for system failure, 27.3% only agree, 27.3% felt neutral. The other 9% of
respondents disagreed about the statement.

It is not possible to prevent errors because the users will never stop making mistakes. So to
prevent this, the application will give feedback such as error messages to users when they
make mistakes.

FIGURE 8.9.2

From the chart above, 40.9% of respondents strongly agree that DailyZikr gives pop-up
messages when users forgot to input the zikr name when they want to customize their own
zikr. 36.4% from 20 respondents only agree and 13.6% felt neutral about the question.
Meanwhile 4.5% of respondents disagree and the other 4.5$ strongly disagree.

The pop-up message is very important in the application as it can give reminders to users
when making mistakes. The design of pop-up messages need to be in readable language
with polite, easy to understand, precise, constructive advice, clearly visible, less time to fix
the problem and educate the users.

41
8.10 Help And Documentation

The last heuristic evaluation is help and documentation. The principle states that even
though it is better if the system can be used without documentation, it may be necessary to
provide help and documentation. Any such information should be easy to search, focused on
the user’s task, list concrete steps to be carried out and not be too large.

FIGURE 8.10.1

Based on the chart above, 40.9% from 20 respondents strongly agree that DailyZikr ensures
that the frequently asked question (FAQS) is easy to search. 45.5% respondents agreed and
9.1% felt unsure about this question. Meanwhile, only 4.5% of respondents strongly disagree
about this matter.

DailyZikr provides FAQS to users where located at the menu bar under settings. The FAQS
contains a lot of questions that users might be curious about. It will also give a solution to the
frequent problem.

42
 FIGURE 8.10.2

From the chart above, 45.5% of respondents strongly agree that DailyZikr presents the
documentation in context right at the moment that the user requires it. 40.9% from 20
respondents only agreed, 9.1% felt unsure, meanwhile only 4.9% of respondents strongly
disagree about this matter.

The documentation in DailyZikr is clearly provided in the homepage where it can be easily
spotted by the user. Providing users with help can enhance usability of the application. All
documentation should be as straightforward and concise as possible. A help system should
be easy to search and provide actionable steps and well designed.

43
8. Demonstration (Tasbih Counter)

Step 1​: User open the DailyZikr Application and click button “Start”.

Figure 9.1; Welcome page

Step 2​: Go to the navigation menu and Tab to “Tasbih Counter” features.

Figure 9.2; Navigation Bar(Tasbih Counter)

44
Step 3​: After tab the “Tasbih Counter” features, users can go through the Tasbih Counter
interface. On the Tasbih Counter interface, users can choose any Zikr in the apps and can
begin the tasbih counter based on count that they enter in the “Setting”.

Figure 9.3; Tasbih Counter

If the user wants to change the number of Tasbih Counter, they need to tab the “Setting”
button and the user can reset the number tasbih counter. Also, users can manage the
sequence of Zikr by choosing it between an ascending sequence or descending sequence.
For descending sequences, it means that the user can start the Zikr from top list to the
bottom list. And, for the ascending sequence the user can start the Zikr from bottom list to
the top list. And make sure to click the button “Create” . So based on the Figure below, the
user needs to change the number of counts from 12 to 10. So, user need to fill it with count
that they want for the Zikr.

45
 Figure 9.4; Setting Tasbih Counter

Step 4​: After the user tab to the button “Create”, the interface will popup the dialogue box
about telling the user Setting for Tasbih Counter was successful. Then, users need to tab the
button “Done” to confirm the Zikr settings.

Figure 9.5; Setting Tasbih Counter success.

46
Step 5:​Users can continue the Tasbih counter after success doing the Settings.

Figure 9.6; Tasbih Counter after success setting on number of counters.

47
 9. Conclusion

In conclusion, a good user interface provides a user friendly experience to the user and
allows them to interact with the application in convenient ways. We’ll be able to design an
effective and convenient user interface that is created under the Usability Heuristic principle.
We can see that the Usability Heuristic principle is very important to create a design and give
benefitted of the implementation process to all the stockholders. In terms of that, we have
succeeded to create a mobile application interface, DailyZikr that will give the user ease that
provides enough help & documentation and a lot of functionality such as have a mood of the
days, hadith of the days and zikr counter. However, we realise that in reality there is a never
ending list of the rules and principles that can generate an even better user interface. On the
other hand, we as a designer notice that we can never satisfy and fulfil all the user’s desires
for some reason like the user does not know what they want and need and have many
design constraints. In spite of that, we will consider the feedback from the user as an
improvement to the application for the future updates and make an effort to upgrade our
design according to the trend technology altogether to give an excellent experience to the
user’s DailyZikr.

48
 10. References

1. TopOfStack Software Limited. Tasbeeh ‫(​ ﺗﺴﺒﯿﻪ‬version 4.4.3), [Mobile Application

Software]. Link:

https://apps.apple.com/my/app/tasbih-%D8%AA%D8%B3%D8%A8%D9%8A%D8%
AD/id883608001

2. Dhikr Zikirmatik Zikir Zikr Misbaha Tasbih World LLC. Live zikir(version
2020.12.15), [Mobile Application Software]. Link:

​https://apps.apple.com/my/app/tasbeeh-allah-prayers-dhikr/id1330134278

3. Greentech Apps Foundation. Dua & zikr Hisnul Muslim (version 1.9.5),

[Mobile Application Software]. Link:

​https://play.google.com/store/apps/details?id=com.greentech.hisnulmuslim

4. Khalil Omar, Barbara Rapp and Jorge Marx Gomez. Heuristic Evaluation Checklist

For mobile ERP- version 1.0. Retrieved January 5, 2021, Link:

​https://uol.de/f/2/dept/informatik/ag/vlba/download/Omar/checklist-v1-0.pdf

5. Armida Guerra Lopes (December 2016) Journal of Information Systems And

Technology Management. Retrieved January 5,2021, Link:

​http://www.scielo.br/scielo.php?script=sci_arttext&pid=S1807-17752016000300363

6. Reuben Hall, How To Prototype A Mobile Application And Leave A Lasting

Impression on Investors. Retrieved January 6, 2021, Link:

​https://mindsea.com/how-to-prototype-a-mobile-app/

7. Arin Bhowmick (January 2018), The Design Fidelity Conundrum. Retrieved

January 8,2021, Link:

​https://medium.com/design-ibm/the-design-fidelity-conundrum-63769bbc3e40

8. Harnil Oza (October 2018), Importance Of UI/UX Design In The Development Of

Mobile Application. Retrieved January 10, 2021, Link:

https://www.hyperlinkinfosystem.com/blog/importance-of-uiux-design-in-the-development-of-
mobile-apps#:~:text=A%20very%20good%20and%20efficient,generate%20more%20traffic
%20and%20revenue​.

49