Job Sheet PWPB KD 3.18

Job Sheet

Pemrograman Web dan Perangkat Bergerak

Kelas XII RPL SMK N 2 Karanganyar

Tahun Pelajaran 2019/2020

Program Keahlian : Rekayasa Perangkat Lunak	Nama Anggota / Kelas: Bagas Arif W/XII RB Mukhlisul Ikwan S/XII RB Rokhim Akbar S/XII RB Satria Riski N A/XII RB Shoodik H.A.R/XII RB	Nilai :
Mapel : PWPB

1.      Kompetendi Dasar

3.18           Menerapkan user interface basis data pada halaman web

4.18           Membuat user interface basis data pada halaman  web

2.      Indikator

·         Menjelaskan konsep antar muka pengguna (user interface) dalam aplikasi web.

·         Menjelaskan fungsi UI untuk mengakses basis data dalam aplikasi web.

·         Menerapkan UI dalam aplikasi web.

·         Merancang program UI untuk akses basis data dalam aplikasi web.

·         Membuat kode program UI akses basis data dalam halaman web.

·         Menguji program UI dalam aplikasi web.

3.      Alat dan Bahan

1.      Laptop

2.      Chrome

3.      Word

4.      Dasar Teori

Pengertian User Interface
    User interface adalah bagian visual dari website, aplikasi software atau device hardware yang memastikan bagaimana seorang user berinteraksi dengan aplikasi atau website tersebut serta bagaimana informasi ditampilan di layarnya. User interface sendiri menggabungkan konsep desain visual, desain interasi, dan infrastruktur informasi. Tujuan dari user interface adalah untuk meningkatkan usability dan tentunya user experience.

Mengapa User Interface itu Penting ?

     User interface adalah salah satu faktor yang menentukan peningkatan traffic website Anda. UI bisa menjadi faktor apakah seseorang tertarik untuk mengunjungi dan meng-explore website Anda. Kalau mereka senang dengan tampilan interface Anda dan experience mereka menggunakan website Anda, maka kemungkinan besar mereka akan mengunjungi website Anda kembali. Jadi Anda harus selalu memperhatikan UI website Anda saat Anda mendesain website.

      Satu hal yang mungkin jarang diketahui orang banyak adalah seberapa pentingnya desain pada user interface. Bahkan kadang bentuk sebuah tombol saja bisa menentukan apakah seseorang mengerti bagaimana menavigasi website atau aplikasi tersebut? Desain user interface memang sangat penting karena itu akan menentukan bagaimana seseorang berinteraksi dengan website dan aplikasi tersebut. User interface juga menentukan apakah pengunjung website atau pengguna aplikasi dapat menavigasi website atau aplikasi dengan mudah.
     Saat seseorang mengunjungi website Anda, user experience harus menjadi prioritas Anda. Kalau orang memiliki user experience yang baik di website Anda, Anda akan mendapat conversion rate yang lebih tinggi. Selain itu, mereka juga akan mempromosikan website atau aplikasi Anda ke orang-orang lain. Kalau mereka mengalami pengalaman buruk dengan website atau aplikasi Anda, pasti mereka tidak mau menggunakannya lagi. Jika Anda adalah bisnis online, ini tentunya penting. Untuk memiliki user experience yang baik, Anda memerlukan user interface yang mudah dinavigasi dan digunakan.
     User interface menentukan customer base Anda. Selama user interface Anda mudah dimengerti, user experience pengunjung website atau pengguna aplikasi juga akan tetap baik. Dengan begitu, kemungkinan mereka untuk tetap datang ke website Anda dan menggunakan website atau aplikasi Anda juga lebih tinggi.

Karakteristik User Interface yang Baik
     Di luar sana ada berbagai informasi yang menyarankan teknik dan pola desain interface yang dianggap baik dan benar. Memang kalau Anda mengikuti saran-saran tersebut, kemungkinan besar Anda akan membuat website atau aplikasi dengan UI yang baik. Tetapi mungkin Anda juga perlu checklist karakteristik apa saja yang sebenarnya membuat sebuah UI dibilang bagus.

1. Jelas

Memiliki UI yang jelas adalah salah satu elemen penting dalam desain user interface. Tentunya tujuan dari desain UI adalah agar orang-orang bisa menggunakan dan berinteraksi dengan sistem Anda dengan mudah. Jika orang-orang tidak bisa mengerti bagaimana cara menggunakan dan menavigasi website Anda mereka pasti akan bingung.

2. Singkat

Tentunya memiliki UI yang jelas akan membuat UX Anda bagus, tetapi Anda juga harus hati-hati agar penjelasan Anda tidak terlalu panjang. Kalau Anda meletakkan definisi dan penjelasan pada setiap bagian website Anda, website Anda akan terlihat lebih berantakan. Kemungkinan besar dengan bertumbuhnya website Anda, interface Anda juga akan terus berkembang. Kalau Anda meletakkan terlalu banyak penjelasan, user Anda nantinya akan menghabiskan waktu membaca penjelasannya.
UI boleh jelas, tapi juga harus singkat. Kalau memang diperlukan penjelasan, usahakan agar Anda bisa menjelaskannya dalam satu kalimat. Jika Anda bisa memberi label hanya dengan satu kata itu tentunya akan lebih baik. Jangan buang waktu user Anda. Mungkin memastikan bahwa semuanya singkat tapi jelas bisa menjadi tantangan. Tetapi kalau Anda bisa melakukan itu, UI website Anda akan menjadi memuaskan.
3. Familiar
Mungkin salah satu kata yang sering Anda dengar saat membahas desain web adalah intuitif. Apa sebenarnya arti dari kata itu? Secara simple, intuitif artinya layout Anda bisa dimengerti dengan mudah secara natural dan hanya dengan menggunakan instinc. Tetapi bagaimana cara membuat layout website Anda intuitif? Anda perlu menggunakan desain web yang familiar.
Familiar yang dimaksud disini adalah sesuatu yang sudah pernah dilihat sebelumnya. Kalau Anda familiar dengan sesuatu, Anda pasti tahu kan apa yang harus dilakukan? Coba pikirkan hal-hal apa yang sudah pasti familiar bagi user website Anda dan masukkan hal-hal ini ke desain web Anda.

4. Responsif

Bagi Anda yang mempelajari web design dan SEO mungkin sudah familiar dengan istilah responsive. Untuk UI sendiri, responsive memiliki beberapa arti yang berbeda. Pertama, responsive berarti cepat. Interface website Anda harus bisa bekerja dengan cepat. Kalau Anda perlu menunggu sebuah website loading lama pasti Anda juga malas kan. Jika interface Anda bisa loading dengan cepat tentunya user experience Anda juga akan semakin baik.

Arti lain dari responsive pada UI juga harus bisa memberitahu user apa yang sedang terjadi di halaman itu. Misalnya, jika seorang user mengklik suatu tombol di website Anda, apakah mereka sudah berhasil menekan tombol tersebut? Mungkin text pada tombol Anda bisa menjadi kata “loading” jika mereka sudah berhasil menekan tombolnya. Bisa juga Anda menggunakan progress bar seperti loading Gmail sebagai indikator kalau website sedang loading.

5. Konsisten

Dalam mengembangkan user interface, konsistensi pada interface dapat membantu user untuk mengerti pola. Dari satu interface, mereka bisa mempelajari apa kegunaan tombol, tabs, icons, dan berbagai elemen yang ada pada interface tersebut. Jika mereka nantinya menemukan interface yang mirip, mereka bisa mengerti apa kegunaan elemen-elemen yang ada pada interface tersebut. Dengan begitu, mereka bisa mengerjakan sesuatu dengan lebih cepat dan mempelajari fitur-fitur baru dengan lebih cepat.

Salah satu perusahaan yang kerap melakukan ini adalah Microsoft dengan program Microsoft Officenya. Jika Anda perhatikan dari dulu, meskipun mereka selalu mengupdate program-program Microsoft Office nya seperti Word, Excel, dan Power Point, elemen-elemen yang ada pada ketiga program tersebut tetap konsisten. Meskipun interfacenya berubah, Anda tahu bahwa untuk menyimpan file, Anda bisa klik pada icon disket dan untuk menge-print Anda tinggal klik pada icon printer.

6. Menarik

Poin yang satu ini mungkin bisa dibilang subjektif tetapi interface akan lebih baik jika mereka memiliki tampilan menarik. Yang dimaksud dengan menarik disini adalah interface Anda menarik untuk digunakan. Memang kalau Anda bisa membuat UI Anda simple, mudah digunakan, efisien, dan responsive, Anda sudah memiliki UI yang baik. Tetapi kalau Anda juga bisa membuatnya menarik tentunya akan lebih asik untuk digunakan, bukan? Anda juga akan membuat customer Anda lebih senang menggunakan website Anda.

Tentunya apa yang dianggap menarik untuk website atau aplikasi Anda juga perlu disesuaikan dengan pasar dan audience Anda. Jadi tampilan Anda harus menarik sesuai dengan audience Anda. Tetapi Anda juga harus tetap memerhatikan fungsi website Anda agar mereka tetap berfungsi dengan baik.

7. Efisien

User interface yang baik harus memastikan bahwa website dan aplikasinya bisa digunakan dengan efisien. Agar Anda bisa membuat UI yang efisien Anda perlu tahu dulu apa yang ingin user capai dan biarkan mereka melakukan langkah-langkahnya tanpa banyak masalah. Anda perlu mengidentifikasi bagaimana website atau aplikasi Anda bekerja. Apa saja fungsinya dan apa kegunaannya. Buat interface yang memudahkan user untuk mencapai tujuan mereka.

8. Forgiving

Anda mungkin pernah melakukan kesalahan saat sedang mengakses website. Misalnya, Anda salah menghapus informasi, UI yang baik akan membantu Anda mengembalikannya dengan cepat. Selain itu, kalau misalnya user Anda masuk ke halaman website yang error, apakah Anda menyarankan mereka untuk mencoba mengarah ke halaman lain website? Tanpa Anda sadari, hal-hal ini bisa membantu meningkatkan user experience Anda.