Thesis Proposal - UI/UX Website Evaluation and Redesign using Heuristic Evaluation and Lean UX

1. Ahmad Yazid Hilmi – 1815015031 Seminar Proposal
Evaluasi dan Redesain UI/UX
Website Menggunakan Metode
Heuristic Evaluation dan Lean UX
(Studi Kasus: SALUT BCI Balikpapan)

2. Daftar isi
BAB I – Pendahuluan
BAB II – Tinjauan Pustaka
BAB III – Metodologi Penelitian

3. BAB I
Pendahuluan
Latar Belakang Penelitian
Media masa menjadi digital
website

4. BAB I
Pendahuluan
Latar Belakang Penelitian
Website digunakan oleh pemerintahan dengan e-Government
Schopf(2017). “The Governance Effects of Korea’s Leading E-government Websites”. =
meningkatkan pelayanan dan mengurangi informasi tidak sinkron

5. BAB I
Pendahuluan
Latar Belakang Penelitian
Website digunakan dalam sector pendidikan dengan system informasi akademik
(Muhammad et al., 2021) “Evaluating Usability of Academic
Websites through a Fuzzy Analytical Hierarchical Process”. = layanan akademik digital untuk
menghemat waktu dan sumber daya.

6. BAB I
Pendahuluan
Latar Belakang Penelitian
Sektor Pendidikan yang menggunakan website adalah SALUT

7. BAB I
Pendahuluan
Latar Belakang Penelitian
SALUT
(SENTRA LAYANAN UNIVERSITAS TERBUKA) BCI (BINA CENDEKIA INDONESIA) Balikpapan
Cabang layanan Universitas Terbuka untuk mendapatkan akses ke bahan ajar, urusan akademik, dan
informasi tentang UT lainnya.

8. BAB I
Pendahuluan
Latar Belakang Penelitian
Landing Page
Informasi seputar SALUT BCI
Balikpapan dan UT
Mahasiswa
Informasi perkuliahan dan
tagihan administrasi
Administrasi
Manajemen informasi seperti
poster pengumuman digital,
manajemen mahasiswa dan
laporan pembayaran administrasi

9. BAB I
Pendahuluan
Latar Belakang Penelitian
Belum pernah dilakukan evaluasi UI/UX
Tetap dapat diakses, namun masih banyak kekurangan

10. BAB I
Pendahuluan
Latar Belakang Penelitian
Wawancara dengan administrator, mahasiswa, masyarakat
Mengetahui permasalahan terhadap website

11. BAB I
Pendahuluan
Latar Belakang Penelitian
Kesimpulan Hasil wawancara:
1. Bahasa yang digunakan campur aduk
2. Warna dan icon masih tidak tepat
3. Kurangnya tampilan visual pada informasi penting

12. BAB I
Pendahuluan
Latar Belakang Penelitian
Heuristic Evaluation
Lean UX

13. BAB I
Pendahuluan
Latar Belakang Penelitian ………..
Dipilih karena ke-efektifitasan nya
Metode paling efisien dibandingkan metode lainnya (Maguire &
Isherwood, 2018)
Menggunakan 3 prinsip :
Match between system and the real world,
Consistency and standards,
Aesthetic and minimalist design
Heuristic Evaluation

14. BAB I
Pendahuluan
Latar Belakang Penelitian
Dipilih karena menggunakan konsep agile (Alhammad & Moreno, 2022)
Menitik beratkan kepuasan ke pengguna (Anggara et al., 2021)
Menggunakan 4 tahap :
Declare assumption,
Create “Minimum Viable Product”,
Run an experiment,
Feedback and
research.
Lean UX

15. BAB I
Pendahuluan
Latar Belakang Penelitian

16. BAB I
Pendahuluan
Rumusan Masalah

17. Rumusan Masalah
BAB I
Pendahuluan
bagaimana mengevaluasi User Interface dan User Experience
suatu Website menggunakan metode Heuristic Evaluation dan
Lean UX dengan studi kasus website SALUT BCI Balikpapan.

18. Rumusan Masalah
BAB I
Pendahuluan

19. Batasan Masalah
BAB I
Pendahuluan

20. Batasan Masalah
BAB I
Pendahuluan
1. Pengumpulan data dengan observasi wawancara dan
pengisian kuisioner
2. Mengunakan 3 prinsip Heuristic Evaluation
3. Menggunakan Lean UX untuk merancang ulang tampilan
4. Nilai success rate >90% dalam setiap iterasi

21. Batasan Masalah
BAB I
Pendahuluan

22. Tujuan Penelitian
BAB I
Pendahuluan

23. Tujuan Penelitian
BAB I
Pendahuluan
tujuan yang ingin dicapai adalah memberikan rekomendasi berupa
prototipe desain yang bisa diaplikasikan pada pengembangan
website SALUT BCI selanjutnya.

24. Tujuan Penelitian
BAB I
Pendahuluan

25. Manfaat Penelitian
BAB I
Pendahuluan

26. Manfaat Penelitian
BAB I
Pendahuluan
Penulis
mengembangkan wawasan
Mahasiswa
pengetahuan kepada mahasiswa bagaimana metode Heuristic
Evaluation dan LEAN UX Mengevaluasi suatu website
Instansi
membantu Instansi terkait untuk meningkatkan User Interface dan
User Experience

27. Manfaat Penelitian
BAB I
Pendahuluan

28. Kontribusi Penelitian
BAB I
Pendahuluan

29. Kontribusi Penelitian
BAB I
Pendahuluan
hasil analisa Evaluasi diharapkan menjadi model penerapan
metode Heuristic Evaluation dan LEAN UX dalam merancang User
Interface dan User Experience pada
website akademik.

30. Kontribusi Penelitian
BAB I
Pendahuluan

31. Daftar isi
BAB I – Pendahuluan
BAB II – Tinjauan Pustaka
BAB III – Metodologi Penelitian

32. BAB II
Tinjauan Pustaka

33. BAB II
Tinjauan Pustaka

34. Penelitian Terkait
BAB II
Tinjauan Pustaka

35. Penelitian Terkait
BAB II
Tinjauan Pustaka
1. Exploring e-Commerce Usability by Heuristic Evaluation as a
Compelement of System Usability Scale
2. Penerapan Metode Lean UX Pada Perancangan UI/UX Aplikasi
Digilib Unsika Versi Windows
3. Penerapan Metode Lean UX dan Design Sprint Pada Pembuatan
dan Pengembangan Aplikasi Aryanna

36. Penelitian Terkait
BAB II
Tinjauan Pustaka

37. Perbedaan dengan penelitian
sebelumnya
BAB II
Tinjauan Pustaka

38. Perbedaan dengan penelitian sebelumnya
BAB II
Tinjauan Pustaka
1. Teknik pengumpulan data = wawancara dan observasi
2. Menggunaka 3 prisip HE
3. Menggunakan Lean UX untuk mendapatkan feedback dari user
4. Batasan success rate adalah minimal 90%
5. Menggunakan figma untuk pengembangannya

39. Perbedaan dengan penelitian
sebelumnya
BAB II
Tinjauan Pustaka

40. Evaluasi Usability
BAB II
Tinjauan Pustaka

41. Evaluasi Usability
BAB II
Tinjauan Pustaka
Evaluasi
proses atau langkah – langkah yang dilakukan untuk memperoleh informasi
atau data-data terkait suatu program yang dievaluasi dengan menentukan
nilai berdasarkan kriteria tertentu
Usability
“kesanggupan untuk di gunakan”, atau kompetensi dari suatu entitas pada
saat digunakan.

42. Evaluasi Usability
BAB II
Tinjauan Pustaka

43. Human Centred-Design
BAB II
Tinjauan Pustaka

44. Human Centred-Design
BAB II
Tinjauan Pustaka
suatu framework desain yang bertujuan untuk menghasilkan berbagai solusi untuk
masalah yang ada dengan melibatkan perspektif atau sudut pandang dari manusia
dalam seluruh rangkaian prosesnya
5 Fase HCD:
Early Concept
Early Planning
Design Refinement
Mid Design
Late Design/ Post Release

45. Human Centred-Design
BAB II
Tinjauan Pustaka

46. Human Computer Interaction
BAB II
Tinjauan Pustaka

47. Human Computer Interaction
BAB II
Tinjauan Pustaka
ilmu yang mempelajari hubungan antara manusia dengan komputer melalui desain
sistem, evaluasi sistem, dan hal lainnya
Prinsip IMK:
1. Accessibility
2. Operability
3. Simplicity
4. Aesthetics
5. Clarity
6. Availability
7. Consistency
8. Control
9. Safety
10. Flexibility
11. Predictability
12. Efficiency
13. Familiarity
14. Obviousness
15. Directness

48. Human Computer Interaction
BAB II
Tinjauan Pustaka

49. User Interface
BAB II
Tinjauan Pustaka

50. User Interface
BAB II
Tinjauan Pustaka
tampilan visual yang menjembatani antara user dengan sebuah
sistem, melalui sejumlah perintah atau teknik untuk mengoperasikan
sistem tersebut, memasukkan data, dan memanfaatkan isinya
User Interface mempunyai dua komponen : input dan output.

51. User Interface
BAB II
Tinjauan Pustaka

52. User Experience
BAB II
Tinjauan Pustaka

53. User Experience
BAB II
Tinjauan Pustaka
sudut pandang dan reaksi dari pengguna yang berasal dari
penggunaan dan/atau antisipasi penggunaan dari sebuah sistem,
produk atau layanan
5 elemen User Experience
The Surface Plane
The Skeleton Plane
The Structure Plane
The Scope Plane
The Strategy Plane

54. User Experience
BAB II
Tinjauan Pustaka

55. Heuristic Evaluation
BAB II
Tinjauan Pustaka

56. Heuristic Evaluation
BAB II
Tinjauan Pustaka
Heuristic Evaluation (HE) adalah sebuah metode informal dari
analisis Usability di mana beberapa evaluator atau penguji diberikan
sebuah desain tampilan antarmuka dan diminta komentarnya

57. Heuristic Evaluation
BAB II
Tinjauan Pustaka
Visibility of system status, Match between system and the real world,
User control and freedom, Error prevention, Recognition rather than
recall, Flexibility and efficiency of use, Aesthetic and minimalist
design, Help users recognize, diagnose, and recover from errors,
Help and documentation

58. Heuristic Evaluation
BAB II
Tinjauan Pustaka

59. Lean UX
BAB II
Tinjauan Pustaka

60. Lean UX
BAB II
Tinjauan Pustaka
Lean UX merupakan sebuah metode pengembangan perangkat
lunak yang sangat mirip dengan Agile dengan penekanan pada
bagian pengembangan yang berkelanjutan dan eksperimen

61. Lean UX
BAB II
Tinjauan Pustaka
4 Tahap Lean UX
Declare Assumption,
Create an MVP
Run an Experiment
Feedback and research

62. Lean UX
BAB II
Tinjauan Pustaka

63. Prototipe
BAB II
Tinjauan Pustaka

64. Prototipe
BAB II
Tinjauan Pustaka
sebuah perkiraan atau gambaran dari suatu pengalaman yang
menyimulasikan bagaimana rasanya menggunakan suatu produk
tertentu

65. Prototipe
BAB II
Tinjauan Pustaka
Tipe- tipe prototipe:
Sketch
Storyboard
Wireframe
Mock-up
Paper Prototype
Digital Prototype

66. Prototipe
BAB II
Tinjauan Pustaka

67. Figma
BAB II
Tinjauan Pustaka

68. Figma
BAB II
Tinjauan Pustaka
Figma merupakan sebuah aplikasi berbasis website yang dapat
memungkinkan pengguna untuk melakukan semua pekerjaan desain
grafis seperti membuat Wireframe website, mendesain tampilan
aplikasi mobile, dan hal lainnya yang terkait

69. Figma
BAB II
Tinjauan Pustaka

70. Severity Ratings
BAB II
Tinjauan Pustaka

71. Severity Ratings
BAB II
Tinjauan Pustaka
sebuah tolak ukur yang digunakan pada kecacatan
Usability sistem untuk mengindikasikan seberapa kritis kecatatan
tersebut pada keseluruhan desain antarmuka suatu sistem

72. Severity Ratings
BAB II
Tinjauan Pustaka
• 4 = kekacauan Usability – sangat penting untuk diperbaiki sebelum produk dirilis ke
pulik
• 3 = permasalahan Usability besar – penting untuk diperbaiki, jadi harus diprioritaskan
untuk perbaikan
• 2 = permasalahan Usability ringan – memperbaikinya tidak perlu di prioritaskan
• 1 = hanya permasalahan keindahan tampilan saja – tidak perlu diperbaiki kecuali
terdapat waktu lebih
• 0 = bukan suatu permasalahan Usability.

73. Severity Ratings
BAB II
Tinjauan Pustaka

74. A/B Testing
BAB II
Tinjauan Pustaka

75. A/B Testing
BAB II
Tinjauan Pustaka
penelitian oleh (Brata & Brata, 2020) yang menyatakan bahwa A/B
testing merekomendasikan untuk membagi kumpulan pengguna
menjadi dua atau lebih kelompok yang di mana nantinya kelompok
tersebut akan mencoba dua versi dari sebuah aplikasi dan
membandingkan jalannya kedua versi tersebut

76. A/B Testing
BAB II
Tinjauan Pustaka

77. Rumus Slovin
BAB II
Tinjauan Pustaka

78. Rumus Slovin
BAB II
Tinjauan Pustaka
rumus yang digunakan untuk menghitung besarnya minimal
sampel ketika rentang pasti dari sebuah populasi masih belum diketahui
𝑛 =
𝑁
1 + 𝑁 (𝑒)2
Di mana:
n = Ukuran Sampel
N = Ukuran Populasi
e = persen Tingkat kesalahan / eror yang di toleransi

79. Rumus Slovin
BAB II
Tinjauan Pustaka

80. Success Rate
BAB II
Tinjauan Pustaka

81. Success Rate
BAB II
Tinjauan Pustaka
Success rate adalah sebuah nilai persentase dari jumlah tugas yang
berhasil di selesaikan oleh pengguna
𝑠𝑢𝑐𝑐𝑒𝑠𝑠 𝑟𝑎𝑡𝑒 =
Success Task + (Partial Success x Persentase)
Total task x total user
x 100%

82. Success Rate
BAB II
Tinjauan Pustaka

83. BAB II
Tinjauan Pustaka

84. BAB II - Tinjauan Pustaka

85. Daftar isi
BAB I – Pendahuluan
BAB II - Tinjauan Pustaka
BAB III – Metodologi Penelitian

86. Tahapan Penelitian
BAB III
Metodologi Penelitian

87. Tahapan Penelitian
BAB III
Metodologi Penelitian
Identifikasi
Masalah
Studi
literatur
Perancangan
awal (Desain
Awal)
Evaluasi
Desain
Redesain
Website
Rekomendasi
Desain

88. Tahapan Penelitian
BAB III
Metodologi Penelitian

89. Pengumpulan Data
BAB III
Metodologi Penelitian

90. Observasi
pengamatan secara langsung
Wawancara
peneliti mewawancarai beberapa orang
Studi Pustaka
studi pustaka dari jurnal – jurnal nasional maupun internasional
Pengumpulan Data
BAB III
Metodologi Penelitian

91. Pengumpulan Data
BAB III
Metodologi Penelitian

92. Perancangan Data
BAB III
Metodologi Penelitian

93. Perancangan Data
BAB III
Metodologi Penelitian
Jumlah responden pengujian
𝑛 =
𝑁
1 + 𝑁 (𝑒)2
𝑛 =
689
1 + 689 (0.1)2
𝑛 = 87,3257288

94. Perancangan Data
BAB III
Metodologi Penelitian

95. Perancangan Proses
BAB III
Metodologi Penelitian

96. Perancangan Proses
BAB III
Metodologi Penelitian

97. Perancangan Proses
BAB III
Metodologi Penelitian

98. Perancangan Tampilan
BAB III
Metodologi Penelitian

99. Perancangan Tampilan
BAB III
Metodologi Penelitian

100. Perancangan Tampilan
BAB III
Metodologi Penelitian

101. Perancangan Tampilan
BAB III
Metodologi Penelitian

102. Perancangan Tampilan
BAB III
Metodologi Penelitian

103. Perancangan Tampilan
BAB III
Metodologi Penelitian

104. Perancangan Tampilan
BAB III
Metodologi Penelitian

105. Perancangan Tampilan
BAB III
Metodologi Penelitian

106. Perancangan Tampilan
BAB III
Metodologi Penelitian

107. Perancangan Tampilan
BAB III
Metodologi Penelitian

108. Perancangan Tampilan
BAB III
Metodologi Penelitian

109. Perancangan Tampilan
BAB III
Metodologi Penelitian

110. Perancangan Tampilan
BAB III
Metodologi Penelitian

111. Perancangan Tampilan
BAB III
Metodologi Penelitian

112. Perancangan Pengujian
BAB III
Metodologi Penelitian

113. Perancangan Pengujian
BAB III
Metodologi Penelitian
tampilan website SALUT BCI Balikpapan akan di evaluasi menggunakan 3
prinsip HE. Kemudian pada tahap selanjutnya dilakukan pengembangan
website dengan menggunakan metode Lean UX

114. Perancangan Pengujian
BAB III
Metodologi Penelitian

115. Waktu dan Tempat
penelitian
BAB III
Metodologi Penelitian

116. Waktu dan Tempat penelitian
BAB III
Metodologi Penelitian

117. Waktu dan Tempat
penelitian
BAB III
Metodologi Penelitian

118. Daftar isi
BAB I – Pendahuluan
BAB II - Tinjauan Pustaka
BAB III – Metodologi Penelitian

119. Ahmad Yazid Hilmi – 1815015031 Seminar Proposal
Evaluasi dan Redesain UI/UX
Website Menggunakan Metode
Heuristic Evaluation dan Lean UX
(Studi Kasus: SALUT BCI Balikpapan)