## Jurnal Ilmiah Teknologi Informasi Asia
Vol.13, No. 2, Tahun 2019 ISSN: 2580-8397 (O); 0852-730X (P)

## Penerapan Mobile-First Design pada Antarmuka Website Profil Sekolah Menggunakan Metode Human-Centred Design (Studi Kasus: SMPN 21 Malang)
Adnan Zulkarnain STIKI Malang email: adnan.zulkarnain@stiki.ac.id
ABSTRAK .  Sekolah  dapat  memanfaatkan  kemajuan  teknologi  dengan  cara  membuat website profil  sekolah. Website profil  sekolah  bisa  digunakan  oleh  sekolah  sebagai  media  promosi  dan  penyebaran  informasi.  Selama  ini  tampilan website profil  sekolah  SMPN21  Malang  dibuat  seadanya,  tampilan  yang  tidak  menarik,  serta  kecepatan  aksesnya  yang begitu lambat. Tampilan website profil sekolah yang tidak menarik serta kecepatan akses yang lambat memberikan kesan bahwa  SMPN21  Malang  tidak  serius  dalam  pemanfaatan  kemajuan  teknologi.  Dari  permasalahan  yang  dimiliki  oleh SMPN21  Malang  maka  diperlukan  perubahan  pada  website  profil  sekolah  yang  dimiliki.  Pada  penelitian  ini  dilakukan penerapan  teknik mobile - first  design antarmuka website profil  sekolah  SMPN21  Malang  menggunakan    metode pengembangan  antarmuka  yaitu Human - Centred  Design .  Hasil  pengujian usability  testing menunjukkan  tingkat kebergunaan  desain prototype antarmuka  yang  sudah  dibuat  memiliki  rata-rata  86,66%.  Sedangkan  hasil  pengujian kecepatan aksesnya rata-ratanya adalah 2,66 detik.
Kata Kunci : website profil sekolah; human-centred design; usability testing;
ABSTRACT . Schools can use technological advances by creating a school profile website. The school profile  website can  be used  by  schools as  a  promotional  media and  provide  information.  All  this time,  the  website  profile of  SMPN21 Malang's school profile has been made improperly, its appearance is not attractive, and its access speed is so slow. The appearance of an unattractive school profile website and slow access speeds give the impression that SMPN21 Malang is not serious about using technology. From the problems that are owned by SMPN21 Malang, it is necessary to change the website profile of the school they have. In this research, the application of mobile-first interface design for the SMPN21 Malang  school  profile  website  was  implemented  using  the  interface  development  method,  Human-Centered  Design. Usability  testing  results  show  the  usability  of  the  prototype  interface  design  that  has  been  made  has  an  average  of 86.66%. While the results of testing the average access speed is 2.66 seconds.
Keywords: school profile website; human-centred design; usability testing;

## 1. PENDAHULUAN
Di  era digital ini  dapat  kita  lihat  dengan  jelas  perilaku  masyarakat  yang  sangat  bergantung  pada gadget . Dimanapun dan kapanpun setiap orang tidak bisa lepas dengan yang namanya smartphone . Ditambah lagi,  kehadiran  internet  memudahkan  kita  untuk  mengakses  informasi  dalam  hitungan  detik.  Hal  ini  mulai disadari oleh banyak pihak, tidak terkecuali sekolah.
Banyak  sekolah  yang  kini  mulai  memanfaatkan  kemajuan  teknologi  dan  informasi  sebagai  media promosi  dan  penyebaran  informasi  sekolah.  Salah  satunya  dengan  membuat website sekolah.  Tidak  seperti pelaku  bisnis,  sebagian  besar website sekolah  dibuat  seadanya,  tampilannya  biasa,  banyak  informasi  yang tidak  ditampilkan,  kecepatan  aksesnya  lambat.  Tampilan website yang  biasa  menyimpan  kesan  bahwa sekolah  tidak  serius.  Informasi  sekolah  yang  tidak  banyak  ditampilkan  menjadikan website tidak  berguna. Selain itu, akses website yang lambat dapat membuat pengguna lari ke sekolah lain. Salah satu sekolah yang mengalami masalah ini adalah SMPN 21 Malang.
Hal  tersebut  dapat  diatasi  dengan  menata  ulang website SMPN  21  Malang  dengan  menggunakan konsep responsive  web  design . Responsive  web  design memberikan  praktik  terbaik  bagi  pengguna  saat mengakses website melalui smartphone ,  tablet,  dan  laptop  disamping  desktop  (Baturay  &  Birtane,  2013). Responsive web design terdiri dari dua teknik yaitu mobile-first design dan desktop-first design . Mobile-first design merupakan  teknik  mendesain  antarmuka website pada  tampilan mobile, baru  setelahnya  ada penyesuaian tampilan pada desktop, sebaliknya, pada desktop-first design , antarmuka website didesain pada tampilan  desktop  terlebih  dulu  baru  dilakukan  penyesuaian  pada  tampilan mobile (Alnawaj’ha  & Abutaha, 2018) .
Hampir  sebagian  besar  orang  mengakses  informasi  melalui smartphone .  Ketika website didesain menggunakan konsep desktop-first design maka para pengguna smartphone akan menerima tampilan dengan ukuran data yang besar. Hal ini akan memperlambat pengguna untuk mencapai website yang dituju. Berbeda dengan desktop-first  design , website yang  dibuat  menggunakan  konsep mobile-first  design membuat pengguna lebih cepat dalam mengakses website yang dituju, karena ukuran datanya lebih kecil. Oleh  karena  itu,  melalui  penelitian  ini,  akan  dibangun  sebuah website sekolah  dengan  menggunakan konsep mobile-first  design dengan  studi  kasus  pada  SMPN  21  Malang.  Harapannya,  pengguna  mampu mengakses website SMPN 21 Malang dengan cepat dan mendapatkan informasi yang dibutuhkan. Selain itu, SMPN 21 Malang mampu melakukan promosi secara online dengan memanfaatkan website sekolah.

## 2. METODOLOGI PENELITIAN
Pada  penelitian  ini  metodologi  penelitian  yang  digunakan  adalah Human - CentredDesign (HCD) berpedoman pada literatur ISO 9241-210 (International Organization for Standardization, 2019).
Gambar 1. Tahapan Human-Centred Design (ISO 9241-210:2019)

## Tahap Plan
Tahapan  awal  yang  dilakukan  adalah  tahap  plan  atau  perencanaan.  Tahapan  ini  dilakukan  sebagai  awalan serta persiapan sebelum melangkah ke tahapan selanjutnya pada metode Human - CentredDesign . Pada tahap plan dilakukan  proses  wawancara  dan  observasi.  Wawancara  dilakukan  untuk  memahami  kebutuhan  data terkait  pembuatan  antarmuka  yang  akan  dilakukan  serta  mengetahui  gambaran  kondisi  saat  ini.  Proses wawancara dilakukan kepada kepala sekolah, admin website sekolah dan guru.
Tabel 1. Hasil Wawancara & Observasi
Pertanyaan Kondisi saat ini Harapan Bagaimana tampilan website profil sekolah saat ini? Website terlihat kuno, tidak menarik Website terlihat lebih modern dan menarik serta mencerminkan visi dari sekolah.
Apakah website terlihat bagus ketika dibuka menggunakan
smartphone ?
Website terlihat berantakan ketika dibuka di smartphone dan font terlalu kecil, sehingga sulit dibaca Website terlihat rapi dan porposional  ketika  dibuka  di smartphone serta font mudah dibaca
Berapa jumlah views pengunjung website perbulannya? Dibawah 1000 views Bisa lebih dari 2000 views Berapa kecepatan akses nya? Kurang lebih diatas 6 detik Biasa diakses dibawah 3 detik

## Tahap Understanding & Specifyng the content use
Tahap  ini  bertujuan  untuk  memahami  siapa  saja  yang  akan  menggunakan website dan  mengerti  bagaimana karakternya. Tahap ini terdiri dari dua proses yaitu Proses Identifikasi User & Karakter user .

## Idenfikasi user
Hasil identifikasi user yang dilakukan adalah sebagai berikut:
a. Orang tua wali atau calon orang tua wali, yaitu orang tua murid  yang nantinya akan mengakses informasi atau pengumuman dari sekolah.
b. Siswa, yaitu pelajar yang akan menggunakan website sebagai sarana informasi terkait sekolah. c. Guru, yaitu pendidik yang akan memberi informasi atau pengumuman melalui website sekolah.

## Karakter user
Setelah  memahami  siapa  saja  yang  menggunakan  website  sekolah,  tahap  selanjutnya  adalah  memahami karakter user . Karakter user pada website sekolah ini adalah :
Tabel 2. Karakter user Jenis Keterangan Usia Orang tua wali : 35-40 tahun Siswa : 13-15 tahun Guru : 30-55 tahun Pengalaman menggunakan komputer, smartphone dan internet .
Sebagian besar user terbiasa dan bisa mengoperasikan komputer, smartphone dan menggunakan internet .

## Tahap Specifyng the user requirements
Pada  tahap  ini  bertujuan  untuk  memahami  kebutuhan user .  Cara  yang  dilakukan  adalah  mewawancarai beberapa user sehingga didapatkan kesimpulan kebutuhan user .
Tabel 3.User Requirements User Kebutuhan Orang Tua 1. Dapat mengetahui profil sekolah 2. Dapat mengetahui informasi terkait kurikulum
3. Dapat mengetahui informasi sarana prasarana
4. Dapat menghubungi pihak sekolah
5. Dapat mengetahui informasi kegiatan sekolah
6. Dapat mengetahui jadwal kegiatan sekolah
7. Dapat mengetahui statistik jumlah guru, jumlah siswa, jumlah alumni
8. Dapat mengetahui peta atau lokasi SMPN 21 Malang
Siswa 1. Dapat melakukan pendaftaran ke website 2. Dapat masuk ke website
3. Dapat membaca profil sekolah
4. Dapat mengetahui informasi kurikulum
5. Dapat memahami apa saja sarana prasarana sekolah
6. Dapat mengathui jadwal kegiatan sekolah
7. Dapat mengetahui statistik jumlah guru, jumlah siswa, jumlah alumni
8. Dapat mengetahui peta atau lokasi sekolah
9. Dapat menghubungi pihak sekolah 10. Dapat mengetahui informasi kegiatan sekolah
11. Dapat memberikan komentar
Guru 1. Dapat memasukkan data profil sekolah 2. Dapat memasukkan data informasi terkait kurikulum 3. Dapat memasukkan data informasi sarana prasarana 4. Dapat memasukkan data informasi kegiatan sekolah
6. Dapat memasukkan data jadwal kegiatan sekolah
7. Dapat memasukkan data statistik jumlah guru, jumlah siswa, jumlah alumni
8. Dapat menjawab pertanyaan dari pengunjung website

## Tahap Producing design solutions
Tahap  ini  bertujuan  untuk  merancang  serta  melakukan  implementasi  desain  yang  sudah  dibuat.  Pada penelitian ini menerapkan konsep mobile-first design untuk membuat desain antarmuka, sehingga pembuatan desain akan dimulai dari rancangan bentuk mobile .

## Membuat wireframe
Pembuatan wireframe merupakan  tahapan  paling  dasar  dalam  membuat  desain. Wireframe dibuat  secara manual  menggunakan  pulpen  dan kertas.  Tipe wireframe yang  dibuat  adalah low - fidelitywireframe ,  dimana hasil  desain wireframe akan  memiliki  tingkat  kemiripan  yang  rendah  dengan prototype yang  akan  dibuat ditahap  selanjutnya.  Keuntungan  menggunakan  tipe  low-fidelity  wireframe  adalah  proses  pembuatannya lebih  cepat  dibandingkan  dengan  high-fidelity  wireframe  (Hartson  &  Pyla,  2019).  Hasil  dari  pembuatan wireframe adalah sebagai berikut:
Gambar 2. Wireframe Beranda
Gambar 3. Wireframe List Page
Gambar 4. Wireframe Single Page
Gambar 5. List Page Kegiatan
Gambar 6. Wireframe Single Page Kegiatan
Gambar 7. Wireframe Kontak

## Membuat  prototype
Pada  penelitian  ini  desain prototype merupakan  versi digital dari  hasil  pembuatan wireframe pada  tahap sebelumnya.  Dalam  pembuatan prototype pada  penelitian  ini  menggunakan software yang  bernama  Adobe XD. Hasil dari pembuatan prototype adalah sebagai berikut :
Gambar 8.Prototype Beranda
Gambar 9.Prototype List Page
Gambar 10. Prototype Single Page
Gambar 11. Prototype List Page Kegiatan
Gambar 12. Prototype Single Page Kegiatan
Gambar 13. Prototype Kontak

## Membuat HTML
Setelah  tahap  pembuatan prototype selesai  dilakukan,  tahap  selanjutnya  adalah  merubah  desain prototype menjadi  versi  HTML  dan  CSS.  Penerapan mobile - firstdesign dalam  CSS  menggunakan  fitur  CSS  yang bernama mediaqueries . Untuk bisa menerapkan mobile - firstdesign maka pada file HTML harus ditambahkan baris tag html seperti berikut:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Kemudian pada, untuk menerapkan mobile - first pada file CSS maka perlu ditambahkan mediaqueries dengan code seperti berikut:
@media (min-width: 320px) { // letak kode css mobile-first }
Kode css mobile - first yang diterapkan ditulis diantara deklarasi mediaqueries .

## Evaluating the design
Tahap ini merupakan tahap pengujian dari desain yang sudah dibuat pada tahap sebelumnya. Pada tahap ini terdapat 2 macam pengujian yang dilakukan yaitu UsabilityTesting dan Uji Kecepatan Akses.

## Usability Testing
UsabilityTesting merupakan sebuah metode untuk mengukur tingkat kegunaan sebuah website (Beny, Yani, & Ningrum,  2019;  Pendell  &  Bowman,  2012).  Terdapat  banyak  metode usabilitytesting yang  bisa  digunakan untuk  melakukan  pengujian usability .  Salah  satunya  adalah HallwayTesting .  Pada  penelitian  ini  memilih menggunakan HallwayTesting karena  bisa  memilih  responden  pengujian  secara  acak  sehingga  prosesnya cepat dan berbiaya murah (Ritawati & Fajar, 2019). Langkah pertama yang dilakukan pada Hallwaytesting adalah menyiapkan skenario untuk diberikan ke user agar menggunakan aplikasi. Berikut adalah skenario pengujian yang dibuat.
Tabel 4. Skenario pengujian No  Nama Prototype Skenario 1 Beranda Dimanakah Anda bisa menemukan informasi tentang pendaftaran murid baru. 2 List Page Bagaimana caranya melihat daftar berita atau informasi yang ada di SMPN21 Malang. 3 Single Page Bagaimana membaca secara detail informasi tentang kegiatan sekolah.
4 List Page Kegiatan
Bagaimana caranya melihat daftar kegiatan yang ada di SMPN21 Malang.
5 Single Page Kegiatan Bagaimana membaca secara detail informasi tentang kegiatan sekolah. 6 Kontak Bagaimana cara mengirimkan pesan ke sekolah atau hanya sekedar mengirimkan kritik.
Tahapan kedua yang setelah menyiapkan skenario adalah membuat lembar User Result Metrics . User result metrics digunakan untuk mencatat hasil pengujian skenario.
Tabel 5.User Result Metrics
“Nama Prototype ” No Tester Step 1 Step 2 Step n 1 User 1 2 User 2 3 User 3 4 User 4 5 User 5

## Pengujian Kecepatan Akses
Dalam  tahapan  pengujian  kecepatan  akses,  langkah  pertama  yang  perlu  dilakukan  adalah  menyiapkan perangkat serta tool untuk pengujian.
Pada  penelitian  ini  perangkat  pengujian  yang  digunakan  adalah  sebuah  laptop  Apple  Macbook  Air  dengan spesifikasi sebagai berikut :
a. Prosesor : 1,8 GHz Intel Core i5
b. Memori
: 8 GB 1600 MHz DDR3
c. Hardisk : SSD 120 GB d. Sistem Operasi : MacOS Mojave 10.14.6
Sedangkan, tool yang  digunakan  adalah  untuk  melakukan  pengujian  kecepatan  akses  adalah webbrowser Google  Chrome. Webbrowser Google  Chrome  memiliki  fitur developermode yang  bisa  digunakan  untuk melakukan pengujian kecepatan akses sebuah website .

## 3. HASIL DAN PEMBAHASAN A. Hasil UsabilityTesting
Hasil usabilitytesting menggunakan metode hallwaytesting adalah sebagai berikut:
Tabel 6. Hasil uji prototype “Beranda” Beranda No Tester Step 1 1 User 1 Lancar 2 User 2 Lancar 3 User 3 Lancar 4 User 4 Lancar 5 User 5 Lancar Tabel 7. Hasil uji prototype “List Page” ListPage No Tester Step 1 Step 2 1 User 1 Lancar Lancar 2 User 2 Lancar Lancar 3 User 3 Lancar Lancar 4 User 4 Lancar Lancar 5 User 5 Lancar Lancar Tabel 8. Hasil uji prototype “Single Page” SinglePage No Tester Step 1 Step 2 Step 3 1 User 1 Lancar Kurang Lancar Lancar 2 User 2 Lancar Lancar Kurang Lancar 3 User 3 Lancar Lancar Lancar 4 User 4 Lancar Lancar Lancar 5 User 5 Lancar Lancar Lancar
Tabel 9. Hasil uji prototype “List Page Kegiatan ” List Page Kegiatan No Tester Step 1 Step 2 1 User 1 Lancar  Kurang Lancar 2 User 2 Lancar  Lancar 3 User 3 Lancar  Lancar 4 User 4 Lancar  Lancar 5 User 5 Lancar  Lancar
Tabel 10. Hasil uji prototype“Single Page Kegiatan ”
SinglePage Kegiatan No Tester Step 1 Step 2 Step 3 1 User 1 Lancar Kurang Lancar Lancar 2 User 2 Lancar Lancar Lancar 3 User 3 Lancar Lancar Lancar 4 User 4 Lancar Lancar Lancar 5 User 5 Lancar Lancar Lancar
Tabel 11. Hasil uji prototype “Kontak” Kontak No Tester Step 1 Step 2 1 User 1 Lancar Lancar 2 User 2 Lancar Lancar 3 User 3 Lancar Lancar 4 User 4 Lancar Lancar 5 User 5 Lancar Lancar
Berikut adalah hasil Tabulasi Usability Testing :
Tabel 12. Tabulasi Usability Testing No  Nama Prototype Tingkat Kebergunaan 1 Beranda 100% 2 List Page 100% 3 Single Page 60% 4 List Page Kegiatan 80% 5 Single Page Kegiatan 80% 6 Kontak 100% Rata-rata  86,66%

## B. Hasil Pengujian Kecepatan Akses.
Hasil  pengujian  kecepatan  akses  menggunakan tooldevelopermode di  Google  Chrome  hasilnya  adalah sebagai berikut :
Tabel 13. Hasil Pengujian Kecepatan Akses No  Nama Prototype (HTML) Kecepatan dalam detik 1 Beranda 3.11 2 List Page 3.05 3 Single Page 2.26 4 List Page Kegiatan 3.14 5 Single Page Kegiatan 2.10 6 Kontak 2.00 Rata-rata  2.66 Detik

## 4. KESIMPULAN DAN SARAN
Berdasarkan  hasil  penelitian  yang  sudah  dilakukan  tentang  penerapan mobile-first  design pada antarmuka website profil  sekolah  menggunakan  metode human - centreddesign (studi  kasus:  SMPN21 Malang)  dapat  disimpulkan  bahwa  tingkat  kebergunaan  desain prototype antarmuka  yang  sudah  dibuat memiliki  nilai  rata-rata  86,66%.  Kemudian  menurut  hasil  pengujian  kecepatan  akses,  rata-rata  kecepatan akses  per  halamannya  adalah  2,66  detik  meningkat  sekitar  56%  dibandingkan  sebelum  diterapkan mobile - firstdesign .  Serta  metode  pengembangan  antarmuka human-centred  design terbukti  dapat  membantu merancang antarmuka sesuai dengan keinginan pengguna.
Saran  untuk  pengembangan  penelitian  selanjutnya  adalah  pada  tahapan usabilitytesting dapat menggunakan  metode  lain  sehingga  dapat  menggali  kemungkinan  meningkatnya  nilai  kebergunaan  sebuah antarmuka.

## DAFTAR RUJUKAN
Alnawaj’ha, F. Y., & Abutaha, M. S. (2018). Responsive web design commitment by the web developers in Palestine. In 2018 4th International Conference on Computer and Technology Applications, ICCTA 2018 (pp. 69–73). Institute of Electrical and Electronics Engineers Inc. https://doi.org/10.1109/CATA.2018.8398658
Baturay, M. H., & Birtane, M. (2013). Responsive Web Design: A New Type of Design for Web- based Instructional Content. Procedia - Social and Behavioral Sciences , 106 , 2275–2279. https://doi.org/10.1016/j.sbspro.2013.12.259 Beny, B., Yani, H., & Ningrum, G. M. (2019). Evaluasi Usability Situs Web Kemenkumham
Kantor Wilayah Jambi Dengan Metode Usability Test Dan System Usability Scale.
RESEARCH : Computer, Information System & Technology Management , 2 (1), 30–34. https://doi.org/10.25273/research.v2i1.4282 Hartson, R., & Pyla, P. (2019). Prototyping. In The UX Book (pp. 405–432). Elsevier. https://doi.org/10.1016/B978-0-12-805342-3.00020-5 International Organization for Standardization. (2019). ISO 9241-210: Ergonomics of human- system interaction — Part 210: Human-centred design for interactive systems . International Organization for Standardization . Retrieved from https://www.iso.org/standard/77520.html Pendell, K. D., & Bowman, M. S. (2012). Usability Study of a Library’s Mobile Website: An
Example from Portland State University. Information Technology and Libraries , 31 (2), 45. https://doi.org/10.6017/ital.v31i2.1913
Ritawati, & Fajar, A. N. (2019). Analysis usability and content in known system implementation.
Journal of Theoretical and Applied Information Technology , 97 (6), 1788–1796.