Moon Lord: Interaksi Manusia dan Komputer

User Experience Questionnaire (UEQ)

By Seika生花 - Mei 13, 2020

0 Comments

Evaluasi Usability

By Seika生花 - Mei 06, 2020

Apa itu Usability ?

Usability sebagai ukuran kualitas pengalaman pengguna ketika berinteraksi dengan produk atau sistem apakah situs web, aplikasi perangkat lunak, teknologi bergerak , maupun peralatan-peralatan lain yang dioperasikan oleh pengguna (Jacob Nielsen).

Usability sebagai tingkat dimana produk bisa digunakan oleh pengguna tertentu untuk mencapai tujuannya dengan lebih efektif, efisien, dan memuaskan dalam ruang lingkup penggunanya (ISO 9241 – 11 (1998)).

Menurut Jacob Nielsen dalam bukunya Usability Engineering [NIE-93], Ada 5 syarat yang harus dipenuhi agar suatu website mencapai tingkat usability yang ideal, yaitu:

1. Learnabiliy (Mudah dipelajari)

2. Efficiency (Efisien)

3. Memorability (Kemudahan dalam mengingat)

4. Errors(Pencagahan kesalahan)

5. Satisfaction (Kepuasan pengguna)

Sebuah sistem yang memiliki usability yang rendah dapat dapat mengakibatkan pemborosan waktu, penurunan produktifitas, meningkatkan frustasi dan kecenderungan tidak ingin kembali mengunjungi atau menggunakan sistem yang ada.

Untuk mengetahui tingkat usability sebuah sistem perlu dilakukan evaluasi terhadap sistem tersebut.
Evaluasi adalah suatu tes atas tingkat kegunaan dan fungsionalitas sistem yang dapat dilakukan di dalam laboratorium, di lapangan, atau dala kerjasama dengan user.

Berikut adalah cara yang dilakukan sebelum melakukan Usability Testing

Menentukan apa yang akan dites

aku ingin mencari tahu apakah user bisa dengan mudah menambah produk. Maka, aku akan menguji atau melakukan usability testing pada fitur pada aplikasinya.

Mempersiapkan prototipe

Prototipe adalah bentuk awal dari sebuah produk dengan fungsi yang belum lengkap. Prototipe ini digunakan untuk mencari tahu respons dari calon pengguna. Prototipe yang akan aku siapkan kali ini berasal dari kumpulan screen (layar) yang telah aku buat.

Mempersiapkan skenario

Proses usability testing bukan sebuah proses yang hanya menunjukkan desain lalu bertanya kepada user: “kira-kira untuk menambah produk, harus pencet mana ya?”

Karena jika kita bertanya seperti itu kepada user, maka user akan mencari elemen atau teks yang mengandung unsur tambah. Secara tidak langsung, pertanyaan tersebut memberi petunjuk kepada user dan membuat hasil usability testing menjadi tidak valid.

Itu sebabnya, kita perlu mempersiapkan skenario yang berperan agar user terkondisikan di situasi sehari-hari dan memahami masalah atau kondisi yang sedang dihadapi.

Mencari siapa yang akan dites

Aku menentukan siapa yang akan menggunakan aplikasi ini. Setelah berdiskusi dengan anggota tim, akhirnya mereka mendapat perkiraan kriteria pengguna aplikasi seperti di bawah ini:

Pria/ wanita

Berumur 18–40 tahun
Familier dengan smartphone

Kriteria tersebut memudahkan aku untuk mencari siapa yang akan dimintai tolong untuk mencoba prototipenya. Persiapan telah selesai. Kini tinggal melakukan usability testing.

Mempersilakan tester mencoba prototipe

Sebelum tester mencoba prototipe, Andi meminta tester untuk mengatakan apapun yang dirasakannya saat mencoba prototipe. Hal ini bertujuan agar Andi mengetahui perasaan tester, entah itu perasaan bingung, mengerti, dan sebagainya.

hasil dari usability testing tersebut kita data sehingga menjadi bentuk sebuah penilaian tetapi alangkah bagusnya kita menggunakan Kuisioner SUS (System Usability Scale) yang mana sudah saya jelaskan di postingan sebelumnya, atau klik disini.

0 Comments

Interaksi Manusia dan Komputer

UI Implementation

By Seika生花 - April 29, 2020

User Interface adalah sebuah tampilan yang digunakan pengguna untuk berinteraksi dengan komputer, tablet, smartphone maupun perangkat elektronik lainnya melalui tampilan yang dapat dimengerti oleh pengguna.

User Interface, berfungsi untuk menginputkan pengetahuan baru ke dalam basis pengetahuan sistem pakar (ES), menampilkan penjelasan sistem dan memberikan panduan pemakaian sistem secara menyeluruh step by step sehingga user mengerti apa yang akan dilakukan terhadap suatu sistem. Yang terpenting dalam embangun user interface adalah kemudahan dalam memakai/ menjalankan sistem, interaktif, komunikatif, sedangkan kesulitan dalam mengembangkan/ membangun suatu program jangan terlalu diperlihatkan.

Sebelum produk Anda masuk ke dalam tahap pembuatan user interface, ada beberapa hal yang harus Anda persiapkan terlebih dahulu, yaitu:

- Menentukan masalah yang ingin Anda selesaikan

- Mengenali pengguna produk Anda

- Melihat apa yang telah dilakukan pesaing di bidang produk Anda

- Mengumpulkan persyaratan produk secara keseluruhan

Berikut hal yang perlu diperhatikan penyajian User Interface:

Fungsi persyaratan pengumpulan hingga perakitan daftar fungsi yang diperlukan oleh sistem untuk mencapai tujuan proyek dan potensi kebutuhan pengguna.

User analisis – menganalisis potensi pemakai sistem baik melalui diskusi dengan orang - orang yang bekerja dengan pengguna dan / atau potensi pemakai sendiri. pertanyaan Khas meliputi:

- Apa yang akan pengguna ingin sistem untuk melakukan?

- Bagaimana sistem fit dengan alur kerja normal pengguna atau kegiatan sehari-hari?

- Bagaimana cerdas secara teknis adalah pengguna dan apa sistem tidak seupa pengguna sudah gunakan?

- Seperti apa tampilan & merasa gaya banding kepada pengguna?

Arsitektur Informasi – pengembangan proses dan / atau arus informasi darisistem(misalnya untuk sistem pohon telepon, ini akan menjadi sebuah pohon pilihan flowchart dan untuk situs web ini akan menjadi aliran situs yang menunjukkan hirarki dari halaman).

Prototyping – pengembangan wireframes, baik dalam bentuk kertas atau prototip layar interaktif sederhana. Prototipe ini dilepaskan dari semua tampak & merasa elemen dan konten yang paling dalam rangka untuk berkonsentrasi pada antarmuka jaringan.

Kegunaan pengujian – pengujian prototipe pada teknik pengguna-sering menggunakan yang sebenarnya yang disebut berpikir keras protokol di mana Anda meminta pengguna untuk berbicara tentang pikiran mereka selama pengalaman.

Grafis Desain interface – tampilan yang sebenarnya & merasa User interface desain akhir grafis (GUI). Ini mungkin didasarkan pada temuan dikembangkan selama pengujian kegunaan jika kegunaan adalah terduga, atau berdasarkan tujuan komunikasi dan gaya yang menarik bagi pengguna. Dalam kasus yang jarang terjadi, mungkin grafis drive prototipe, tergantung pada pentingnya bentuk visual versus fungsi. Jika interface telah membutuhkan beberapa kulit, mungkin ada beberapa desain interface untuk satu panel kontrol, fitur fungsional atau widget. Fase ini sering merupakan upaya kolaborasi antara desainer grafis dan interface designer pengguna, atau ditangani oleh orang yang ahli dalam kedua disiplin.

Setelah Anda selesai melakukan persiapan, langkah berikutnya adalah membuat Wireframe, Mockup, dan Prototype.

Wireframe

Wireframe merupakan sebuah sketsa kasar tampilan aplikasi atau website. Biasanya digunakan untuk menyusun tata letak awal dalam suatu desain. Wireframe ini bisa dicoret-coret tangan atau menggunakan tools atau aplikasi khusus bikin wireframe. Biasanya wireframe dibuat dengan warna hitam putih yang lebih menekankan isi dari kontennya.

Mockup

Mockup memberikan gambaran secara detail sebelum produk dibuat dengan menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup dapat mengorganisir detail dari proyek, menerjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders, menyampaikan ide kepada anggota tim, implementasi desain, dan melihat perspektif user. Mockup bersifat statis dan tidak bisa dioperasikan.

Prototype

Prototype adalah sebuah simulasi interaksi antara pengguna dan tampilan (interface) dimana user atau pengguna dapat melihat dan berinteraksi dengan user interface secara langsung. Mungkin tidak tampak persis seperti produk akhir, tetapi mendekati desain produk real-nya. Dengan ini harapannya kita mendapat masukan dari pengguna, bagian mana yang mudah dimengerti dan bagian mana yang susah mengerti atau bahkan bingung.

Wireframe, mockup, dan prototype memiliki ciri khasnya masing-masing. Penggunaannya dapat disesuaikan dengan kebutuhan. Satu hal yang penting untuk diingat yaitu: buatlah wireframe, mockup, atau prototype dengan memikirkan user experience.

0 Comments

Interaksi Manusia dan Komputer

Prototype

By Seika生花 - April 22, 2020

Apa itu Prototype ?

Definisi paling dasar dari prototipe adalah, “versi simulasi atau sampel dari produk akhir, yang digunakan untuk pengujian sebelum diluncurkan”. Tujuan dari prototipe adalah untuk menguji produk (dan ide-ide produk sebelum) memasukkan banyak waktu dan uang kedalam produk akhir.

Prototipe mempunyai 4 kualitas utama :

Representasi – Bentuk aktual dari prototipe, misal, kertas dan mobile, atau HTML dan desktop.

Presisi – Fidelity dari prototipe, yang berarti tingkat detail, polesan, dan realisme.

Interaktivitas – Fungsi terbuka untuk pengguna, misal, berfungsi penuh, sebagian berfungsi, atau view-only

Evolusi – Siklus hidup prototipe. Beberapa dibangun dengan cepat, diuji, dibuang, dan kemudian diganti dengan versi yang lebih baik (ini dikenal sebagai “rapid prototyping”). Yang lain dibangun dan diperbaiki, pada akhirnya berkembang menjadi produk akhir.

Salah satu kesalahpahaman paling umum tentang prototipe adalah bahwa itu hanya perlu dilakukan sekali atau dua kali pada akhir proses desain. Ini tidak benar. Anda harus membuat prototipe setiap kemungkinan iterasi produk anda – bahkan ide pertama dan paling dasar anda.

Prototipe bukan hanya pengujian beta yang memiliki tampilan versi final; mereka adalah versi apa pun dari produk anda yang dapat digunakan untuk pengujian. Selama itu memberi memberi anda wawasan baru tentang bagaimana orang akan menggunakan produk secara alami, tidak masalah apakah itu kertas, low-fidelity, high-fidelity, atau HTML.

Metodologi Prototyping Paling Berguna

Seperti yang telah dikatakan diatas, prototipe dapat berupa berbagai hal. Berikut 3 contoh kategori prototipe:

Prototipe Kertas

Paper Prototyping itu obsolete! - UNIKOM Codelabs - Medium

Sebuah praktik yang ada jauh sebelum internet, pembuatan prototipe kertas bekerja paling baik pada tahap awal desain, terutama untuk menguji ide-ide produk.

Ini semudah kedengarannya – layar sederhana digambar di atas kertas dan dikonfigurasikan untuk meniru interaksi digital. Praktik umum untuk menguji prototipe ini adalah membuat satu orang memainkan “produk” mengganti sketsa sesuai dengan bagaimana perilaku pengguna.

Prototipe Digital

How to prototype an app with PowerPoint | Keynotopia

Prototipe digital adalah bentuk prototipe yang paling umum, dan cukup realistis untuk secara akurat menguji Sebagian besar elemen antarmuka, mereka juga jauh lebih mudah untuk diproduksi daripada prototipe html.

Prototipe digital dapat dibangun dengan menggunakan aplikasi dan perangkat lunak yang dibuat khusus untuk pembuatan prototipe. Anda bahkan dapat membuat prototipe digital sederhana menggunakan perangkat lunak presentasi seperti PowerPoint atau Keynote.

Prototipe HTML

12 Prototyping Tools to Boost Your Workflow — HTML Color Codes

Kategori terakhir yaitu prototipe HTML. Prototipe HTML hanya disarankan untuk desainer yang percaya diri dengan kemampuan coding mereka. Prototipe HTML memiliki banyak keuntungan, tetapi datang dengan banyak biaya teknis.

0 Comments

Interaksi Manusia dan Komputer

Desain Mockup

By Seika生花 - April 15, 2020

Apa itu Mockup ?

Mockup mencerminkan pilihan desain untuk skema warna, layout, tipografi, ikonografi, visual navigasi, dan keseluruhan suasana produk.

Selain menyisihkan waktu untuk menjawab pertanyaan visual yang penting, mockup memiliki beberapa manfaat lain, yaitu:

Intuitif Untuk Pemangku Kepentingan (stakeholder) – Berkat fidelity tinggi mereka, mockup membutuhkan lebih sedikit konteks daripada dokumen lo-fi seperti wireframe. Pemangku kepentingan dapat lebih mudah melihat produk akhir.

Perspektif Yang Realistis – lebih mudah untuk membuat revisi pada sebuah mockup daripada tahap koding selanjutnya (selama mockup itu sendiri tidak dikodekan).

Dalam proses desain, mockup muncul di akhir fase lo-fi dan awal fase hi-fi. Ini bisa berarti hal yang berbeda untuk metode yang berbeda – misalnya, mockup dapat dilakukan setelah wireframe, atau dapat ditunda sampai setelah beberapa pengujian prototipe lo-fi.

Hal yang perlu diperhatikan saat membuat mockup adalah :

Persempit Konsep – Alasan kenapa mockup datang setelah wireframe adalah bahawa anda harus terlebih dahulu menghilangkan opsi gambar besar lainnya. Jika anda tidak jelas tentang struktur navigasi, jangan membuat mockup untuk kedua versi – putuskan salah satu terlebih dahulu.

Memeriksa Produk Pesaing – Sebelum memutuskan visual anda sendiri, lihat apa yang dilakukan pesaing anda. Namun, jangan menyalinnya – cari area yang dapat anda tingkatkan, atau pola UI yang diinginkan pengguna di semua produk jenis ini. Tinjauan heuristic yang cepat dapat membantu mengukur pengamatan anda.

Anatomi Sebuah Mockup

Dalam pengertian yang paling sederhana, anatomi dari sebuah mockup UI harus identik dengan susunan halaman yang diwakilinya. Itu berarti selama fase mockup, anda harus mempertimbangkan :

Layout konten – Bagaimana konten ditampilkan. Seperti F-pattern atau Z-pattern, kartu atau teks. Anda juga harus mempertimbangkan ukuran setiap konten, dan berapa banyak yang ingin anda muat di layar pada satu waktu.

Kontras – Gunakan alat kontras warna untuk menguji keterbacaan teks Anda terhadap latar belakang anda. Anda juga dapat menggunakan kontras warna untuk meningkatkan visibilitas beberapa elemen seperti calls-to-action.

Penggunaan Warna – Warna membangkitkan emosi yang berbeda dan pengaruhnya berubah berdasarkan warna di sekitarnya.

Tipografi – Mockup memungkinkan anda menjelajahi ukuran, font, style, dan spacing untuk tipografi. Belum lagi penggunaan struktural untuk konsistensi, seperti men-stylize caption.

Spacing (spasi/ruang/jarak) – Ruang negatif bukanlah ruang kosong yang harus diisi – ini adalah elemen yang desain yang powerful. Jumlah kekosongan yang tepat meningkatkan pemahaman dan keterbacaan pengguna, dan bertindak sebagai alat yang kuat dalam hirarki visual. Semakin banyak ruang negatif di sekitar suatu elemen, semakin banyak juga mata yang tertarik kepadanya.

Navigasi Visual – Saat ini arsitektur informasi harus sudah selesai, jadi anda hanya perlu mempertimbangkan bagaimana tampilannya. Misalnya, jika anda memiliki menu pull-down atau drawer, anda bisa mendalami detail seperti warna, spasi, tipografi dan ketertiban/urutan (order).

0 Comments

Interaksi Manusia dan Komputer

Desain Wireframe

By Seika生花 - April 08, 2020

Apa itu wireframe ?

Wireframe adalah sebuah cara untuk mendesain sebuah lyanan website pada level structural. Sebuah wireframe umumnya digunakan untuk meletakkan konten dan fungsionalitas pada sebuah halaman dengan mempertimbangkan kebutuhan dan pengalaman pengguna.

Wireframe merupakan hal penting dalam desain UI

Sebuah wireframe merupakan layout dari sebuah halaman web yang mendemonstrasikan elemen apa yang akan ada halaman kunci. Ini merupakan bagian yang krusial dari proses desain interaksi.

Tujuan wireframe yaitu untuk memberikan pemahaman visual terhadap sebuah halaman di awal proyek untuk mendapatkan persetujuan stakeholder dan tim proyek sebelum proses pembuatan produknya dijalankan. Wireframe juga bisa digunakan untuk membuat navigasi global dan tambahan/cadangan untuk memastikan terminologi dan struktur yang digunakan pada website memenuhi ekspektasi pengguna.

Sebuah wireframe lebih mudah untuk beradaptasi dibanding desain konsep

Lebih murah dan lebih cepat untuk mengulas dan memperbaiki struktur dari halaman kunci pada format wireframe. Memisahkan pengembangan wireframe ke versi final akan memberikan keyakinan pada klien dan tim desain bahwa halaman tersebut memenuhi kebutuhan pengguna sembari memenuhi tujuan bisnis dan proyek utama.

Wireframe terjadi di awal siklus hidup proyek

Sering digunakan untuk menyelesaikan proses User Centred Design, wireframe juga digunakan di awal fase desain. Sebuah prototipe tes usability seringkali berupa test untuk halaman-halaman wireframe untuk memberikan feedback pengguna sebelum proses kreatif dimulai.

Wireframe bisa Digambar dengan tangan, tetapi biasanya digabungkan menggunakan software seperti Microsoft Visio, untuk memberikan on-screen delivery. Bagaimanapun, jika wireframe akan digunakan untuk prototipe dari tes usability, cara terbaik yaitu membuatnya dengan HTML. Ada beberapa software bagus yang memungkinkan anda untuk melakukan ini dengan mudah termasuk Axure RP atau Omnigraffle (Mac only).

Keuntungan wireframe

Salah satu keuntungan menggunakan wireframe yaitu ini memberikan sebuah gambaran visual awal yang bisa digunakan untuk diulas dengan klien. Pengguna juga dapat mengulas sebagai mekanisme feedback awal untuk tes usability. Wireframe tidak hanya lebih mudah untuk diperbaiki dibanding desain konsep, setelah di approved oleh klien dan pengguna, itu memberikan kepercayaan diri bagi desainernya.

Dari perspektif praktikal, wireframe memastikan halaman konetn dan fungsionalitas berada pada posisi yang tepat berdasarkan pengguna dan kebutuhan bisnis. Dan seiring perkembangan proyek, ini bisa digunakan sebagai dialog antara anggota proyek untuk menyetujui visi dan misi proyek.

Kerugian wireframe

Karena wireframe tidak mencakup desain apapun, atau memperhatikan implikasi teknis, tidak selalu mudah bagi klien untuk memahami konsep tersebu. Perancangnya juga harus menerjemahkan wireframe tersebut menjadi sebuah desain, sehingga komunikasi untuk mendukung wireframe tersebut sering diperlukan untuk menjelaskan mengapa elemen halaman diposisikan sebagaimana adanya. Juga, saat konten ditambahkan, pada awalnya itu mungkin terlalu banyak untuk muat pada layout wireframe, jadi desainer dan copywriter akan butuh kerja sama untuk membuatnya menjadi cocok/muat.

0 Comments

Interaksi Manusia dan Komputer

User Experience (UX)

By Seika生花 - Maret 25, 2020

0 Comments

Interaksi Manusia dan Komputer

Usability

By Seika生花 - Maret 18, 2020

Apa itu Usability ?

Ada beberapa pengertian usability menurut para ahli, diantaranya :

Menurut Jacob Nielsen, didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction.

Menurut Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna.

Menurut Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas.

ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction.

Kenapa usability penting

1. memudahkan pengguna

Dengan usability yang baik, pengguna akan dengan mudah untuk menggunakan aplikasi.

2. Aplikasi Mudah dipelajari

Dengan usability yang baik, aplikasi dapat dengan mudah dipelajari bahkan untuk orang yang pertama kali menggunakan aplikasi tersebut.

3. berjalan sesuai fungsinya

Usability memastikan aplikasi berjalan sesuai dengan tujuannya.

4. menarik minat pengguna

Usability yang baik, akan menarik minat pengguna untuk menggunakan aplikasi, bahkan secara terus-menerus.

Uji Usability

Usability testing cara untuk mengevaluasi sebuah produk atau jasa dengan cara mengujinya kepada calon pengguna. Umumnya, selama pengujian, pengguna akan mencoba untuk menyelesaikan tugas yang diberikan, sementara pemilik produk akan mengamati, mendengar, dan mencatat temuan.

Ada beberapa macam alat uji usability, diantaranya :

SUS (System Usability Scale)

SUS dikembangkan oleh John Brooke, merupakan skala kegunaan yang handal, populer, efektif dan murah yang dapat digunakan untuk penilaian global terhadap kegunaan system.

SUS sendiri memiliki 10 komponen pertanyaan dan 5 pilihan jawaban mulai dari sangat tidak setuju sampai sangat setuju serta memiliki skor minimal 0 dan maksimal 100.

Contoh item SUS :

- Saya berpikir akan menggunakan sistem ini lagi.
- Saya merasa sistem ini rumit untuk digunakan.
- Saya merasa sistem ini mudah digunakan.
- Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini.
- Saya merasa fitur-fitur sistem ini berjalan dengan semestinya.
- Dan lain-lain.

Skor jawaban SUS

Jawaban	Skor
Sangat setuju	5
Setuju	4
Ragu-ragu	3
Tidak setuju	2
Sangat tidak setuju	1

Aturan Perhitungan Skor SUS :

1. Setiap pertanyaan bernomor ganjil, skor setiap pertanyaan yang didapat dari skor pengguna akan dikurangi 1.

2. Setiap pertanyaan bernomor genap, skor akhir didapat dari nilai 5 dikurangi skor pertanyaan yang didapat dari pengguna.

3. Skor SUS didapat dari hasil penjumlahan skor setiap pertanyaan yang kemudian dikali 2,5.

QUIS (Questionnaire for User Interface Satisfaction)

Angket Untuk Kepuasan Interaksi Pengguna adalah alat yang dikembangkan untuk menilai kepuasan subyektif pengguna dengan aspek-aspek spesifik dari antarmuka manusia-komputer. Ini dikembangkan pada tahun 1987 oleh tim peneliti multi-disiplin di University of Maryland Human - Computer Interaction Lab.

CSUQ (Computer System Usability Questionnaire)

Words (adapted from Microsoft’s Product Reaction Cards)

Dll

0 Comments

Interaksi Manusia dan Komputer

User Interface (UI)

By Seika生花 - Maret 14, 2020

0 Comments

Text Widget

Popular Posts

Pages

Unordered List

Recent Posts

User Experience Questionnaire (UEQ)

Evaluasi Usability

UI Implementation

Prototype

Desain Mockup

Desain Wireframe

User Experience (UX)

Usability

User Interface (UI)

About me

Follow Us

Sponsor

Labels

recent posts

Blog Archive

Categories