Evaluasi User Experience

 

Evaluasi adalah interpretasi atau penafsiran yang bersumber dari data kuantitatif, dimana data tersebut merupakan hasil dari pengukuran yang dilakukan pada data yang digunakan (Sudijono, 1996). Evaluasi merupakan proses mengumpulkan dan menganalisa aktivitas, karakteristik, dan keluaran dari sebuah sistem lalu kemudian diperiksa sehingga menghasilkan kesimpulan dari sistem itu sendiri dimana akan meningkatkan keefektifan dan atau memberitahu stakeholder yang terlibat mengenai kesimpulan tersebut (M. Q. Patton 1987). Usabilty evaluation merupakan sebuah metode pengujian pada suatu sistem dengan menggunakan pengguna secara langsung untuk menilai kenyamanan, kemudahan dan kesalahan saat pengguna menggunakan sistem, sehingga dapat dianalisa dan dilakukan perbaikan.

            Pengukuran user experience dapat dilakukan dengan cara kualitatif dan kuantitatif. Salah satu metode pengukuran user experience adalah dengan menggunakan User Experience Questionnaire (UEQ). UEQ merupakan pengukuran yang dianggap memberikan keuntungan yang lebih karena dapat memberikan hasil pengukuran yang komprehensif terhadap pengalaman pengguna, evaluasi dilakukan dengan menggunakan User Experience Questionnaire (UEQ) yang disebarkan kepada mahasiswa Perguruan Tinggi tersebut, sehingga dapat diketahui pengalaman yang diperoleh pengguna ketika menggunakan sistem.

            Kuesioner UEQ atau User Experience Questionnaire, termasuk salah satu kuesioner yang hasilnya dapat digunakan dalam usability testing untuk mengukur tingkat user experience suatu produk dengan cepat. UEQ dapat diunduh di www.ueq-online.org. Terdapat 6 skala dengan total 26 elemen yang dikategorikan berdasarkan skala-skala pengukuran yang terdapat pada UEQ.

Skala User Experience dalam kuesioner, yaitu:

    a.       Attractiveness (Daya tarik): Kesan terhadap produk. Apakah pengguna menyukai atau tidak menyukai produk? Seberapa besar daya tarik dari sebuah produk. Misal: bagus atau jelek, atraktif atau tidak atraktif.

    b.      Efficiency (Efisiensi): Kemungkinan suatu produk dapat digunakan dengan cepat dan efisien. Seberapa besar pengguna dapat menyelesaikan tugasnya tanpa usaha yang besar atau efisien. Misal: cepat atau lambat, praktis atau tidak praktis.    

    c.       Perspicuity (Kejelasan): Apakah memungkinkan menggunakan produk ini? Apakah mudah bagi pengguna untuk membiasakan diri menggunakan produk ini? Seberapa besar kejelasan dari sebuah produk. Misal: mudah dipahami atau sulit dipahami.

    d.       Dependability (Ketepatan): Apakah pengguna merasa dalam kontrol interaksi? Apakah interaksi dengan produk aman dan dapat diprediksi? Seberapa besar ketepatan yang dirasakan oleh pengguna melalui kontrol yang ia miliki. Misal: dapat diprediksi atau tidak dapat diprediksi, mendukung atau menghalangi.

     e.       Stimulation (Stimulasi): Apakah menarik dan menyenangkan untuk pengguna dalam menggunakan produk tersebut? Apakah pengguna merasa termotivasi untuk terus menggunakan produk? Seberapa besar motivasi untuk menggunakan produk. Misal: bermanfaat atau kurang bermanfaat, menarik atau tidak menarik.

   f.       Novelty (Kebaruan): Apakah desain produk inovatif dan kreatif? Apakah produk mampu mendapatkan perhatian pengguna? Seberapa kreatif atau besar kebaruan dari produk.

Enam skala UEQ dapat dikelompokkan menjadi 3, yaitu aspek daya tarik (attractiveness), aspek pragmatic quality, dan aspek hedonic quality. Aspek pragmatic quality berkaitan dengan manfaat yang dirasakan, efisiensi dan kemudahan digunakan. Kejelasan (perspicuity), efisiensi (efficiency) dan ketepatan (dependability) termasuk kedalam pragmatic quality aspect. Aspek hedonic quality berkaitan dengan stimulasi (stimulation) dan kebaruan.

Evaluasi Usability pada Aplikasi dan Website

 

    ·         Pengertian

Evaluasi usability merupakan bagian yang harus dilakukan dalam mendesain perangkat lunak, khususnya interface dimana manusia berinteraksi dengan komputer. Evaluasi usability bertujuan untuk mengidentifikasi masalah-masalah usability dan memperbaiki permasalahan tersebut, sehingga dapat meningkatkan usability dari suatu desain. Desain interface dengan usability yang baik akan membantu user dalam mengerjakan kegiatannya.

Usability menunjukkan kemudahan pemakaian dan kemudahan dalam penerimaan suatu sistem atau produk untuk sekelompok user yang mengerjakan task-task khusus dalam lingkungan tertentu, dimana kemudahan pemakaian akan mempengaruhi hasil dan kepuasan yang diperoleh user, sedangkan kemudahan penerimaan akan mempengaruhi penggunaan produk yang dihasilkan, atau dengan kata lain, usability adalah karakteristik sebuah perangkat lunak yang dikaitan dengan kemudahan pemahaman, penggunaan dan efektifitas. Usability juga dihubungkan dengan bagaimana membuat sistem yang aman, mudah dipelajari dan mudah digunakan.

    ·         Aspek-aspek Usability

1.      User Testing

User testing merupakan metode evaluasi usability yang sangat bermanfaat, karena dapat mengidentifikasi permasalahan-permasalahan usability secara luas. Selain itu, user testing memerlukan profil atau riwayat user, dan task yang akan dikerjakan. Salah satu tujuan user testing adalah untuk memastikan bahwa perbedaanperbedaan antar user disesuaikan satu sama lain untuk meminimalkan variasi dari unjuk kerja user, sehingga user testing perlu dilakukan dengan sampel orang yang memiliki latar belakang pengetahuan yang hampir sama dengan user yang sesungguhnya.

2.      Usability Testing

Usability test merupakan task-oriented, maksudnya user menerima sekumpulan task yang sudah ditentukan sebelumnya untuk dikerjakan. Usability test biasanya menggunakan teknik atau metode think aloud, dimana user diminta untuk mengemukakan apa yang dipikirkan selama menggunakan sistem tersebut.

Biasanya proses usability testing berlangsung kurang lebih selama dua jam dan proses tersebut direkam. Kemudian hasil rekaman tersebut dipelajari dan dianalisa untuk mengetahui bagianbagian produk atau sistem yang membutuhkan perbaikan atau pengembangan. Para spesialis usability memperhatikan faktor waktu yang diperlukan untuk menyelesaikan suatu task, jumlah error atau kesalahan yang terjadi dan penyebabnya, dan tingkat kepuasan user terhadap produk tersebut.

    ·         Alasan-alasan Melakukan Evaluasi Usability

    Terdapat beberapa alasan untuk melakukan evaluasi usability. Alasan-alasan itu antara lain:

1. Biaya pengembangan sistem cukup mahal, dan perbaikan desain user interface jauh lebih mahal.

2. User akan menolak bekerja di sekitar sistem yang tidak sesuai dengan kebutuhan.

3. Para tim desain perlu untuk mengumpulkan semua permasalahan yang dimiliki user untuk melakukan perbaikan.

4. Meskipun dalam tim tersebut tidak terdapat desainer yang handal, tim tersebut perlu memahami pengalaman anggotanya dengan sistem yang lain.

5. Evaluasi usability merupakan suatu cara untuk meningkatkan atau mengembangkan sistem sebelum sistem tersebut diterapkan, untuk meningkatkan sistem yang sudah ada, dan untuk memilih sistem yang usable atau bermanfaat.

6. Para bisnis user tidak memiliki banyak waktu untuk belajar bagaimana cara menggunakan suatu sistem.

7. Kebanyakan orang lebih suka sistem yang usable dengan karakteristik ayng lebih sedikit dibandingkan dengan sistem yang tidak beraturan dimana user harus bekerja keras dalam memecahkan masalah yang ditemukan.

8. Orang sering menggunakan sistem dengan cara yang tidak sesuai atau tidak dikehendaki oleh para desainer, dan jika hal ini diketahui, maka para desainer tersebut memperbarui sistem.

Berikut beberapa penjelasan mengenai evaluasi usability dari saya, semoga dari semua isi yang saya sampaikan dapat tersampaikan dan semoga bermanfaat bagi kita semua

Implementasi User Interface (UI) Mobile

 

User Interface ini merupakan tampilan grafis interaktif pada sebuah aplikasi atau website yang dapat membantu pengguna untuk berinteraksi dengan fitur-fitur, konten, dan juga fungsi-fungsi didalamnya.  Mobile User Interface seperti pada namanya adalah User Interface yang terdapat pada aplikasi-aplikasi mobile, biasanya pada smartphone atau tablet.

Persyaratan dalam desain Mobile UI sangatlah berbeda dengan persyaratan desain UI untuk komputer desktop. Karena ukuran layarnya yang lebih kecil dan layarnya yang touch screen membuat perlunya pertimbangan khusus untuk memastikan kegunaan, keterbacaan, dan konsistensi UI. Dalam mobile interface, simbol dalam mobile interface harus berukuran lebih kecil dan tidak selalu ada cukup ruang untuk teks sehingga terkadang dapat menimbulkan kebingungan. Karena minimnya ruang untuk teks, pengguna harus bisa mengerti arti dari masing-masing icon yang ada pada mobile interface.

    ·         Desain Mobile User Interface yang Baik

1.      Kontras Warna Baik

Untuk mendesain UI yang baik sekaligus indah, tentu diperlukan adanya pemilihan warna yang baik. Agar tampilan tidak mengganggu pandangan pengguna dan terlihat indah, Perlu diperhatikan kontras warna yang pas dengan memperhatikan kombinasi warnyanya yang baik. Misalnya apabila background aplikasi berwarna cerah, warna pada tulisan dan icon harus dibuat kontras dengan warna background yang cerah tersebut.

2.      Informasi Terpapar Jelas, Ringkas, dan Terstruktur

Tentunya dalam menggunakan aplikasi, kita tidak menginginkan tampilan yang berantakan dan membingungkan. Secara general, desain UI yang baik adalah saat tampilan terlihat minimalis dengan informasi yang tersampaikan dengan jelas. Penyusunan informasi juga harus disusun dengan terstruktur sehingga tidak menimbulkan kebingungan pengguna. 

3.      Konsisten

Dalam membuat UI yang baik dan tidak membingungkan pengguna, perlu adanya konsistensi, agar pada saat ada pembaruan tampilan UI, pengguna masih bisa mengerti tentang letak-letak fitur dan cara penggunaan aplikasi itu sendiri.

4.      Menarik

Pastinya setiap orang saat melihat sesuatu awalnya akan melihat dari tampilan luarnya. Dengan desain UI indah dan menarik, maka pengguna otomatis akan memiliki kesan awal yang baik juga pada aplikasi tersebut.

5.      Jumlah Control Harus Pas

Pada satu halaman pada aplikasi, jumlah control (button, text field, toggle button, dll) harus secukupnya saja. Apabila terlalu banyak, maka penggunaan aplikasi akan membingungkan karena tampilannya yang kurang ringkas dan berantakan. Karena ukuran layar smartphone relatif kecil, UI harus menyesuaikan ukurannya agar efisien sehingga terlihat lebih minimalis dan tidak membingungkan.

6.      Mudah diolah

Interface yang mudah diolah. Maknanya, ketika anda melakukan kesalahan atau ingin mengubah beberapa tampilan karena suatu alasan, maka UI yang baik dapat memberikan kemudahan dalam proses editing -nya. 

7.      Responsif dan menarik

Karakteristik kedua yaitu memiliki antarmuka pengguna yang responsif dan menarik. Responsif disini maksudnya adalah dapat dijalankan di berbagai perangkat dan tampilan tersebut mampu untuk menyesuaikan bentuk ukuran dari perangkat. 

Implementasi User Interaface (UI)

 

Pada kesempatan kali ini saya akan membahas tentang materi kuliah saya yaitu implementasi UI. Tapi terlebih dahulu kita harus paham pengertian implementasi dan UI. Arti implementasi menurut KBBI (Kamus Besar Bahasa Indonesia) yaitu pelaksanaan / penerapan. Sedangkan pengertian umum adalah suatu tindakan atau pelaksana rencana yang telah disusun secara cermat dan rinci (matang). UI adalah singkatan dari "User Interface", yaitu sebuah cara bagi pengguna untuk berinteraksi dengan sesuatu. Karena setiap situs web merupakan user interface "Desain UI" adalah yang menjadi inti dari desain web.

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.

·         Fungsi User Interface (UI)

User Interface merupakan pillar bagi sebagian besar perkembangan teknologi yang ada. Tanpanya, teknologi tersebut akan sulit digunakan atau tidak nyaman dipakai bagi mereka yang masih awam teknologi. User Interface berperan sebagai penghubung yang memudahkan penggunanya agar dapat menjalankan suatu program, aplikasi, maupun mengunjungi website. Peran terbesar User Interface didominasi oleh penerapan Graphic User Interface (GUI) di berbagai program maupun aplikasi smartphone. Seperti yang kamu tahu, program maupun aplikasi yang ada di playstore semuanya dibangun dengan User Interface yang didasari Konsep desain User Experience (UX) yang baik.

Pengguna mereka kini bisa dengan mudah menjalankan program atau aplikasi tanpa harus repot-repot belajar ilmu komputer atau aplikasi. Karena mayoritas program yang dihadirkan memiliki aksesibilitas, bahasa, dan fitur yang mudah dipelajari serta digunakan Pada aplikasi smartphone, pengguna banyak berinteraksi dengan program-program di dalamnya dengan memasukkan perintah dalam bentuk teks maupun grafis. User interface pada smartphone cenderung dituntut lebih sederhana dan mudah mengerti dibanding user interface pada perangkat yang lebih besar seperti komputer Tujuan akhir dari sebuah UI adalah untuk menjamin kemudahan penggunaan, aksesibilitas fitur, dan User Experience yang memuaskan. Dengan kata lain, UI yang efektif memudahkan pengguna menikmati semua fitur dan fungsi yang ditawarkan oleh sebuah produk digital.

·         Komponen Pembentuk User Interface (UI)

Semua elemen dalam cakupan UI bisa dikategorikan dalam 4 komponen dasar meliputi:

1.  Tata letak : penempatan atau pengaturan posisi semua elemen grafis. UI yang baik pada dasarnya bersifat sederhana, dalam arti elemen grafis – terutama untuk navigasi dan akses fitur – harus tertata dengan baik sehingga mudah dilihat dan digunakan. Pengguna bisa dengan cepat memahami pilihan fungsi yang ada.

2. Warna : pilihan warna memiliki pengaruh besar dalam desain antarmuka pengguna. Penggunaan warna yang berbeda untuk setiap tombol dan ikon memudahkan pengguna menemukan fitur yang dicari dan ingin digunakan. Secara umum, prinsip utama adalah menggunakan skema warna yang sesuai dengan jenis alat/aplikasi dan simbol atau logo perusahaan.

3.   Tipografi : penggunaan jenis huruf yang tepat juga sangat penting karena elemen ini berperan dalam menentukan tingkat keterbacaan. Huruf atau teks di situs online, aplikasi, game, atau alat digital tidak hanya harus mudah dibaca tapi juga enak dilihat dan unik.

4.  Grafik : elemen visual terutama gambar dan ikon bisa menjadi poin utama. Sebuah logo perusahaan harus memberi fungsi representatif pada model bisnis atau industri yang digeluti perusahaan tersebut.

 

Apa itu Desain Mockup, Fungsi, Keuntungan, dan Kekurangannya?

    ·         Pengertian Mockup

Mockup merupakan desain website yang diperlukan guna meyakinkan Anda ketika akan membuat website dengan desain custom. Mock up selain disebut sebagai visualisasi sebuah konsep desain, bisa juga disebut sebagai gambaran nyata rancangan produk, atau preview sebuah ide yang terlihat seperti wujud aslinya. Mock up ini sendiri bisa dibuat dengan cara manual dengan mengandalkan kertas, cat warna, dan pena. Akan tetapi, juga bisa dibuat secara lebih modern dengan mengandalkan aplikasi seperti CorelDraw, Adobe Photoshop, Marcomedia Freehand, Adobe Illustrator, dan sebagainya. Bahkan, bisa juga memakai aplikasi khusus untuk mock up desain website.

Dalam bisnis mockup juga memberikan peran penting apalagi untuk sebuah brand dalam hal ini kita ambil contoh sebuah brand distro yang memiliki kreasi desain kaos yang banyak namun masih terkendala dalam modal. Dengan memakai mockup seorang produsen mampun membuat contoh produknya sebanyak mungkin tanpa memproduksinya terlebih dahulu.

    ·         Fungsi Mockup

1.      Media presentasi proyek desain web.

2.      Menampilkan konsep desain yang akan ditawarkan, seakan-akan nyata.

3.      Pedoman teknis untuk merancang halaman web.

4.      Kontrol agar display desain yang dibuat tak melenceng dari rencana awal.

5.      Memudahkan Anda mendapat gambaran konsep web.

Beberapa fungsi mock up pada desain web seperti di atas akan sangat membantu kamu untuk mendapat hasil yang maksimal. Kamu bisa memesan mock up ini ke jasa web design yang bisa dipercaya dan sudah terbukti kinerjanya, untuk mendapat hasil yang maksimal.

    ·         Kegunaan dan Keuntungan Mockup

Berikut ini merupakan kegunaan dan keuntungan menggunakan Mockup:

1.      Kreasi Tanpa Ada Batasnya

Dengan mockup maka seorang desainer dapat mengaplikasikan dan mengkreasikan desainnya ke dalam mockup sebanyak mungkin.

2.      Murah

Saat Mockup digunakan maka dibutuhkan sebuah perangkat komputer dan ditambah dengan software editing gambar, seperti Photoshop. Dengan itulah desainer bisa membuat desain terlihat nyata dengan biaya gratis.

3.      Menghemat Waktu

Desainer hanya membutuhkan beberapa menit untuk mengaplikasikan sebuah desain ke dalam sebuah mockup

4.      Seragam

Saat menggunakan mockup dengan bantuan Photoshop atau Coreldraw atau lainnya akan menghasilkan satu desain preview produk yang seragam. Kamu dapat cek langsung ke toko online di bagian katalog produk.

    ·         Kekurangan Mockup

1.      Mockup Gratis Masih Langka

Mokcup dengan kualitas detail gambar yang baik sekaligus gratis sangat sulit untuk ditemukan. Mockup gratis jika bisa ditemukan, hanya berupa mockup portofolio dari desainer pembuat mockup yang memang digratiskan untuk tujuan promosi menarik konsumen membeli produk mockup yang dijualnya.

2.      Terbatas

File .PSD merupakan file dengan jenis bitmap dan ini merupakan file nya Mockup yang ditujukan untuk presentasi desain. Sehingga hanya bisa diedit dengan aplikasi berbasis bitmap, seperti Photoshop. File tidak bisa diedit melalui aplikasi berbasi pixel, seperti CorelDRAW atau Illustrator. Jika bisa diedit maka file mockup dengan eksitensi selain .PSD, seperti .CDR.

 

Apa itu Wireframe dan Bagaimana Cara Membuatnya

 

    ·         Pengertian Wirefrime

Wireframe sendiri dapat diartikan dengan sederhana sebagai kerangka gambar. Merancang sebuah wireframe berarti merencanakan kerangka garis besar sebuah aplikasi atau website. Wireframe ini merupakan tahap penting sebelum stakeholder menyetujui letak-letak informasi untuk website dan aplikasi sebelum developer mulai membuat antarmukanya menggunakan kode.

Proses pembuatan wireframe website disebut wireframing di mana Kita akan mengatur semua komponen di atas sesuai dengan tata letak yang diinginkan. Wireframing biasanya dilakukan oleh UI Designer. Dialah orang yang bertanggung jawab membuat website menarik. Seorang UI designer biasanya akan mendiskusikan wireframe website kepada tim web development atau klien untuk mendapat masukkan demi perbaikan desain. Setelah disepakati, kerangka dasar tersebut akan diwujudkan menjadi desain visual yang lebih rapi. 

    ·         Cara Membuat Wirefrime

1.      Melakukan Riset

Langkah pertama dalam membuat wireframe adalah melakukan riset untuk merancang website agar sesuai dengan trend. Hal ini penting mengingat perkembangan kebutuhan dari tiap jenis website berbeda. Selain itu, riset juga dilakukan agar Kita mendapatkan inspirasi desain yang menarik.

2.      Menyiapkan Tools

langkah selanjutnya adalah menyiapkan tools untuk membangun desain wireframe. Untuk membuat gambar desain yang sederhana, Anda bisa menggunakan kertas dan pensi saja. Sedangkan, untuk membuat gambaran yang lebih detail, berbagai tools wireframe bisa Anda manfaatkan.

Berikut adalah macam-macam dari tools :

1. Mockflow

Mockflow adalah software desain yang dapat Kita gunakan untuk membuat rancangan website atau aplikasi. Tool ini memiliki fitur khusus bernama WireframePro yang dapat digunakan membuat wireframe dengan visualisasi langsung.

                        2. Mockingbird

Mongkingbird adalah software pembuat wireframe yang mudah digunakan berkat fitur drag and drop. Tampilannya yang user friendly akan memudahkan Kita membuat kerangka desain yang menarik.

                        3. Cacoo

Cacoo merupakan salah satu software wireframe yang cukup simpel, baik dari sisi tampilan maupun pilihan menunya. Tool ini cocok digunakan bahkan untuk pemula sekalipun.

                        4. Figma

Kita dapat mendesain website dengan mudah menggunakan berbagai fitur yang dimiliki Figma. Salah satunya, fitur real-time collaboration yang membuat koordinasi pembuatan mockup bisa dilakukan dengan cepat.

                        5. Balsamiq

Balsamiq ini merupakan software untuk membuat wireframe yang populer. Kita dapat memanfaatkan versi desktop atau web-basednya. Dengan penyimpanan secara online, hasil wireframe Kita bisa diakses dari mana saja.

3.      Melakukan Setting Grid

Setelah menentukan tools yang digunakan, saatnya melakukan setting grid. Tujuan dari melakukan setting grid adalah membuat penataan lebih mudah dengan hasil yang rapi. Jadi, tampilan website akan terlihat lebih seimbang dengan beberapa komponen di dalamnya.

4.      Menentukan Tata Letak

Selesai dengan langkah setting grid, waktunya Kita untuk menentukan tata letak elemen website. Dengan bantuan grid tadi, Kita bisa menggunakan bentuk kotak untuk setiap komponen yang akan digunakan.

5.      Tuliskan Informasi Konten Anda

Saatnya menuliskan informasi konten Kita. Untuk memastikan strukturnya sesuai keinginan, Kita bisa melakukannya bertahap. Pastikan juga informasi konten jelas dan mudah dibaca. Cobalah gunakan ukuran dan jenis font yang berbeda untuk masing-masing komponen. Jadi, bisa sekaligus membedakan berbagai informasi dalam desain tersebut.