The document discusses heuristic evaluation methods for usability, emphasizing the importance of user interface design principles, such as visibility of system status and match between system and the real world. It outlines ten usability heuristics, including user control, error prevention, recognition rather than recall, and the necessity for help documentation. The final analysis includes expert recommendations based on the severity of identified usability issues in the PLN mobile application interface.

1. Heuristic Evaluation
Dr. Tenia Wahyuningrum, S. Kom., M. T

3. Usability evaluation method
“When the cook tastes other cooks’ soups, that’s exploratory.
When the cook assesses a certain recipe, that’s predictive.
When the cook tastes the soup while making it, that’s
formative. When the guests (or food critics) taste the soup,
that’s summative.”
Stake, 1976; Lockee, Moore and Burton, 2002

4. Usability
evaluatio
n
method

5. Usability Heuristics
for User Interface Design10
https://www.nngroup.com/articles/ten-usability-heuristics/

6. #1: Visibility of system status
The system should always keep users informed about what is going on, through
appropriate feedback within reasonable time.
Password strength
(dynamic validation)

7. #1: Visibility of system status
The system should always keep users informed about what is going on, through
appropriate feedback within reasonable time.
Password strength
(dynamic validation)

8. #1: Visibility of system status
The system should always keep users informed about what is going on, through
appropriate feedback within reasonable time.
Loading animations

9. #1: Visibility of system status
Dynamic
breadcrumbs
Step wizard
Breadcrumb adalah
salah satu elemen yang
penting dalam website
yang berfungsi untuk
menunjukkan letak
spesifik sebuah halaman
pada website.

10. #2: Match between system and the real world
The system should speak the users'
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.
Folder in real world Folder in system
Floppy disk in real world
Floppy disk in
system

11. #2: Match between system and the real world
Tabs in real world Tabs in system
icon, folder, tabs > macth in real world, WYSIWYG

12. #2: Match between system and the real world
Recycle bin in real world
Recycle bin in system
cropping tool behaviour > trash

13. #2: Match between system and the real world
speak the users' language

14. #3: User control and freedom
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.
UNDO
CRUD
Quit, Cancel, remove, go back
Skip intro, read later, update later

15. #3: User control and freedom
How to Create cancel button
A Neutral Color for a Neutral Button
The Cancel button should have a neutral color to signify the neutral, non-committal
button. When users see that the Cancel button has no color, they’ll recognize it as the
fallback to safety easier. It’s critical for users who need to escape a confirmation screen
to notice this.
https://uxmovement.com/bu
ttons/why-cancel-buttons-
should-never-have-a-color/

16. #3: User control and freedom
“Cancel” Has Many Names
Not all Cancel buttons have a “Cancel” label, but they function the same as one. For
example, a Cancel button could have the label, “Not Now,” “No Thanks,” “Maybe Later,”
or “Skip” depending on the context. If the button has a dismissive behavior, treat it as a
Cancel button because it serves the same function.
How to Create cancel button

17. #3: User control and freedom
How to Create cancel button
A Dark Enough Gray
When using gray on a button, it’s essential to make the gray dark enough.
Otherwise, the button isn’t legible and may look like it’s in a disabled state.
To ensure your button is legible, check the color contrast with a WCAG 2.0
contrast ratio tool such as Color Review. This tool tells you if your gray passes the
accessibility standards for text color.

18. #3: User control and freedom
Edit plugin>theme

19. #4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean
the same thing. Follow platform conventions.
Navigation standards

20. #5: Error prevention
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.

21. #5: Error prevention
auto fill,
auto
complete

22. #5: Error prevention
reduce bad input

23. #6: Recognition rather than recall
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.
drop list preview

24. #6: Recognition rather than recall
show and tell
Daripada memaksa user untuk
mengingat, lebih baik buat user
bisa mengenali sistem tersebut.
User dalam menjelajahi sistem
atau aplikasi tentu akan
melewati beberapa halaman.

25. #7: Flexibility and efficiency of use
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
actions.
Keyboard to navigate
Shortcut keys
Wordpress 5 minutes install

26. #8: Aesthetic and minimalist design
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.

27. #9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.
Bad
Good

28. #9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.

29. #9: Help users recognize, diagnose, and recover from errors

30. #10: Help and documentation
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.
help

31. #10: Help and documentation
Harapan user menggunakan sistem atau aplikasi tentunya dapat menyelesaikan
masalah dan pekerjaannya. Untuk membantu mereka dalam menyelesaikan masalah
atau pekerjaannya perlu diberikan fitur bantuan dan dokumentasi dari kemungkinan
kesalahan dalam penggunaan.
FAQ, Customer care

32. Summary
 Setelah mengidentifikasi permasalahan usability pada tiap-
tiap item, Expert membuat suatu analisis, dan memberikan
rekomendasi.
 Rekomendasi didasarkan pada tingkat keparahan (severity
ratings) pada system yang dinilai.
Evaluasi Usability Pada Antarmuka Pengguna
Aplikasi PLN Mobile Menggunakan Metode
Evaluasi Heuristik
Putri Ayu Lestari, IsmiartaAknuranda, Admaja
Dwi Herlambang
Jurnal Pengembangan Teknologi Informasi dan Ilmu
Komputer e-ISSN: 2548-964X
Vol. 3, No. 3, Maret 2019, hlm. 2269-2275

33. Tenia Wahyuningrum
Tenia_W
Tenia Wahyuningrum
081391249489