Semua yang Perlu Anda Ketahui Tentang Sketsa UX

Jika Anda telah melakukan pekerjaan kreatif yang serius, Anda semua terlalu akrab dengan blok kreatif. Rasanya seperti menabrak dinding bata: Tidak ada ide yang dapat Anda visualisasikan cukup baik, atau tidak dapat bekerja dalam kehidupan nyata.

Bagi para desainer, perasaan itu terlalu familiar. Namun, seperti masalah rumit tanpa solusi yang jelas, proses yang cerdas dapat membuat semua perbedaan. Di sinilah sketsa UX masuk.

Sketsa UX adalah aspek penting, namun sering diabaikan, dari desain pengalaman pengguna. Membuat sketsa adalah cara yang sangat efisien untuk mengkomunikasikan desain sambil memungkinkan desainer untuk mencoba banyak ide dan mengulanginya sebelum menetapkan satu.

Dalam posting ini, saya bermaksud untuk membahas semua yang perlu Anda ketahui tentang sketsa UX, termasuk poin-poin berikut:

• Pengantar sketsa dan gambar rangka UX
• Dasar-dasar sketsa UX, alat, dan teknik
• Mengklarifikasi sketsa dengan catatan, anotasi, angka
• Kiat dan trik membuat sketsa UX
• Metode mini yang dirancang untuk meningkatkan kualitas dan produktivitas
• Semua yang perlu Anda ketahui tentang Wireflows
• Panduan cepat untuk membuat sketsa aliran UX

Sketsa UX Adalah Proses Dua Langkah

Banyak pilihan harus dipertimbangkan dalam desain, yang menghasilkan pilihan dan eksekusi yang terbaik. Desainer mempertimbangkan opsi mereka, dan kemudian melanjutkan untuk mengerjakan detailnya, sehingga membuat desain UX menjadi proses dua langkah:

• Ide generasi

Pada langkah awal, banyak ide dihasilkan, tetapi karena tidak dapat sepenuhnya dibentuk, tidak jarang beberapa elemen tidak lengkap atau hilang. Hal utama adalah mempertimbangkan pendekatan yang berbeda dan memutuskan mana yang paling efisien dalam konteks tugas Anda dan berbagai kendala proyek.

• Menambahkan Detail dan Penyempurnaan

Langkah demi langkah, Anda menetapkan beberapa varian yang menjanjikan dan melanjutkan untuk mengerjakan secara spesifik, sehingga membuat beberapa ide tidak sesuai.

Sketsa dan Wireframe UX: Pengenalan dan Klasifikasi

Gambar rangka Anda mungkin berbeda tergantung pada faktor-faktor seperti tingkat detail yang diinginkan, warna dan gaya, apakah Anda akan menunjukkannya kepada seseorang, dan seterusnya.

Saya memilih jenis sketsa berikut:

• Sketsa: Pembuatan Ide

Ini adalah sketsa awal. Detail tingkat yang lebih rendah hanya dicatat. Jumlah warna yang digunakan terbatas.

Saya menggambar banyak sketsa dasar untuk mempertimbangkan masalah dari sudut yang berbeda dan untuk mempertimbangkan solusi yang berbeda. Saat menggambar sketsa seperti itu, saya juga berusaha untuk menghasilkan varian solusi sebanyak mungkin.

Pada langkah khusus ini, ketidaklengkapan membebaskan pikiran saya, itulah sebabnya mengapa sangat penting untuk menghindari terjebak dalam hal-hal kecil pada tahap ini. Tujuan saya adalah menghasilkan ide sebanyak mungkin dan memilih yang paling menjanjikan.

• Gambar rangka: Spesifikasi, Fase Rinci

Saya biasanya memilih sketsa yang menjanjikan dan membahas detailnya, setelah itu saya memilih varian terbaik dan mengerjakannya dengan lebih detail.

Namun, ini tidak berarti setiap detail . Hal-hal yang jelas mungkin hanya dicatat. Selain itu, beberapa aspek akan sulit untuk dijelaskan di atas kertas.

Pada langkah ini, saya menggambar semua detail penting , tetapi saya belum menggambar gambar rangka di Balsamiq. Setelah semuanya selesai di atas kertas, saya mulai menggambar di Sketch.

Alat digital memberikan lebih banyak kebebasan berkreasi daripada kertas dan Anda dapat dengan mudah mengalihkan perhatian ke hal-hal kecil. Misalnya, Anda dapat fokus pada "pemolesan piksel" daripada desain.

• Draf Desain Visual

Ini adalah pendekatan yang jarang digunakan, tetapi terkadang bisa membantu. Berbagai solusi visual dipertimbangkan pada tahap awal proyek, tetapi mungkin perlu waktu lama untuk membuat sketsa digital untuk semuanya. Itulah mengapa saya menggambar sketsa desain di atas kertas terlebih dahulu, untuk mempertimbangkan berbagai opsi dan memilih arah desain visual.

• Perincian Komponen/Elemen

Saya menemukan teknik ini berguna ketika saya sudah memiliki ide umum dan saya berpikir tentang fungsionalitas halaman tertentu atau bagian integral dari komponen antarmuka. Saya menggambar elemen halaman yang berbeda, masuk ke detail, dan kemudian menggambar kemungkinan posisi elemen halaman yang berbeda.

Elemen, bahkan yang paling sederhana, harus memiliki status; tombol dapat ditekan dan memiliki blok teks melayang yang mungkin atau mungkin tidak kosong. Semakin kompleks, semakin banyak negara bagian yang dimilikinya.

Memulai dengan Dasar-dasar

• Siapkan alat Anda. Temukan tempat yang paling nyaman, meja besar dengan banyak ruang. Ambil banyak kertas dan siapkan beberapa pena dan spidol.
• Pemanasan. Untuk bersiap-siap, saya sarankan menggambar beberapa garis, lingkaran, template dasar, dan ikon.
• Tentukan tujuan Anda. Putuskan apa yang ingin Anda gambar. Tetapkan tujuan Anda dan putuskan cerita apa yang harus Anda ceritakan. Tentukan tingkat perincian yang diinginkan. Putuskan apakah Anda siap menggambar banyak.
• Tentukan audiens target Anda. Jika Anda melakukannya sendiri, Anda tidak perlu khawatir tentang tampilan sketsa Anda. Namun, jika Anda bermaksud menunjukkan gambar Anda kepada klien, pastikan Anda memberikan waktu ekstra untuk menambahkan lebih banyak detail ke sketsa Anda.
• Tetapkan kerangka waktu. Setelah memutuskan jumlah waktu yang siap Anda alokasikan untuk membuat sketsa, katakanlah 30 menit, akan membantu Anda fokus pada pekerjaan Anda.

Sekarang, Anda sudah siap dan Anda dapat memulai:

• Gambarkan tepinya. Gambarlah bingkai, browser atau jendela ponsel, bagian dari antarmuka, dan sebagainya.

• Tambahkan elemen terbesar atau dasar: menu, footer, konten utama.

• Tambahkan detail. Tambahkan detail yang relevan, namun tetap sederhana pada tahap ini.

• Tambahkan anotasi dan catatan. Ini diperlukan hanya jika Anda berencana untuk membagikan sketsa. Namun, mereka dapat berguna bahkan jika Anda melakukannya hanya untuk mata Anda.

• Sketsa alternatif. Buat sketsa beberapa alternatif cepat untuk solusi Anda.

• Pilih solusi terbaik. Pilih opsi terbaik.

• Tambahkan bayangan dan bevel. Ini sangat penting untuk tujuan berbagi. Tambahkan bayangan untuk membuat sketsa Anda menarik secara visual, yang penting jika Anda berencana untuk membaginya dengan anggota tim dan/atau klien.

• Simpan sketsa. Ambil foto atau masukkan ke dalam folder. Saya memiliki beberapa baki kertas di meja saya untuk sketsa.

• Membagikan. Saya biasanya menggunakan salah satu metode berbagi berikut:
  • Pindai sketsa melalui Evernote dan berikan tautan permanen ke anggota tim atau pemangku kepentingan lainnya.
  • Ambil foto dan unggah ke InVision.
  • Unggah dan petakan gambar ke Realtimeboard.
  • Atau hanya mengirim email foto.
• Tinjau sketsa dan tambahkan catatan. Beristirahatlah dan kembali ke sketsa Anda beberapa saat kemudian. Lihatlah mereka lagi. Apakah sketsa itu masih masuk akal bagi Anda? Sketsa yang baik harus mudah diikuti.

Mengklarifikasi Sketsa dengan Elemen Tambahan

Temukan atau gambar sketsa yang tepat, lalu tambahkan detail berikut ke dalamnya:

1. Judul. Terkadang, menambahkan judul adalah pilihan yang baik. Tulis deskripsi dan tanggal, jika perlu, di bagian atas sketsa. Judul akan membantu Anda memahami apa yang Anda lihat dan apakah sketsa itu relevan atau tidak. Ini sangat berguna jika Anda memiliki banyak sketsa atau Anda akan menunjukkannya kepada orang lain.

2. Anotasi. Anotasi adalah nama dan catatan yang ditempatkan dekat dengan suatu elemen, untuk menjelaskan isinya atau atribut lainnya. Mereka menambahkan detail yang memperjelas elemen lain dan biasanya sulit untuk digambar. Misalnya, bisa berupa nama blok, beberapa detail interaksi, penjelasan gambar, beberapa ide untuk variasi desain di masa mendatang, dan sebagainya. Anda dapat melihat salah satu contoh saya untuk melihat seperti apa sketsa anotasi.

3. Angka. Beri nomor elemen sketsa Anda, atau sketsa itu sendiri. Anda dapat memutuskan cara memesannya (mis., menurut alur interaksi, urutan pembuatannya, dll.). Mungkin juga berguna selama diskusi (terutama diskusi jarak jauh), karena kolega dan klien Anda dapat menunjukkan nomor sketsa dalam umpan balik mereka dan Anda akan memahami yang mana yang dirujuk oleh komentar mereka.

4. Panah. Anda dapat menggunakan panah untuk menunjukkan transisi layar. Mereka juga dapat digunakan untuk menghubungkan bagian sketsa yang berbeda, untuk menunjukkan urutan tindakan, dan sebagainya. Karena arti panah bisa bermacam-macam, tepat di atas panah Anda bisa menambahkan deskripsi atau penjelasan tentang arti panah itu. Berikut adalah contoh sketsa dasar yang menunjukkan transisi dan beberapa status berbeda.

5. Catatan. Sama seperti anotasi, catatan digunakan untuk menjelaskan konsep. Namun, catatan berbeda dari anotasi dalam penempatannya. Mereka tidak melekat pada elemen atau terletak di dekat elemen yang dijelaskan, mirip dengan contoh ini. Catatan dapat ditempatkan di bagian atas atau bawah halaman. Mereka bahkan dapat menggambarkan elemen yang tidak termasuk dalam desain, pertanyaan yang mungkin Anda miliki, penjelasan umum, ide tanpa sketsa, dan sebagainya.

6. Gestur. Gestur relevan dalam hal desain perangkat sentuh. Menggambar gerakan tangan mungkin memerlukan latihan. Ada beberapa varian gerakan yang digunakan untuk menunjukkan jenis tindakan yang berbeda, jadi lebih baik untuk memutuskan terlebih dahulu bagaimana Anda menunjuk tindakan tertentu (jika tidak jelas, tentu saja) dan berlatih menggambarnya.

7. Masukan. Anda mungkin menerima saran untuk memperbaiki atau meningkatkan sketsa setelah menunjukkannya kepada orang lain, atau setelah Anda melihatnya sendiri. Seringkali berguna untuk menandai umpan balik seperti itu dengan warna yang berbeda untuk membantu membedakan umpan balik dari sketsa aslinya.

Anda dapat menggunakan warna yang berbeda untuk berbagai jenis elemen. Terkadang, saya menggunakan hitam untuk menggambar, biru untuk tautan, hijau tua untuk catatan, merah untuk judul dan umpan balik. Cobalah untuk menggunakan warna yang berbeda dalam sketsa Anda, tetapi pastikan pilihan warna Anda konsisten!

Tips dan Trik Lebih Spesifik

1. Jangan khawatir tentang kualitas. Jangan lihat sketsa di Dribbble; mereka tentang sesuatu yang sama sekali berbeda . Ingatlah bahwa tujuan utama sketsa adalah untuk membantu Anda berpikir lebih jernih, menemukan solusi yang lebih baik, dan menghemat waktu.

2. Praktek. Sebagai permulaan, Anda dapat mencoba menggambar beberapa aplikasi. Buka web atau aplikasi seluler dan coba salin layar, yang menjelaskan elemen dalam catatan. Kapan pun Anda memiliki waktu luang, berlatihlah menggambar blok bangunan dasar dari desain Anda. Secara umum, latihan menjadi sempurna. Dalam beberapa saat, itu akan menjadi bagian dari diri desainer Anda.

3. Beli folder. Saya sering tidak bekerja dari kantor saya, melainkan dari kafe atau rumah saya. Sketsa kertas sangat rentan terhadap kerusakan, jadi belilah folder sederhana agar tetap aman dan sehat.

4. Bawalah alat ke mana pun Anda pergi. Ini membantu memastikan bahwa Anda dapat menangkap ide Anda di atas kertas kapan saja, jika tidak, Anda mungkin kehilangan pikiran atau tidak dapat mengingatnya dengan cukup detail. Saya selalu membawa notepad, beberapa lembar A4, dan pena.

5. Berbagi dengan orang lain. Sangat penting untuk melibatkan orang lain dan berkomunikasi dengan tim Anda. Melibatkan orang lain dan mendapatkan umpan balik mereka, terutama sejak dini, membantu menghemat waktu dan sumber daya dalam jangka panjang. Anda juga dapat mendorong orang lain untuk menggambar dengan cara mereka membayangkan desainnya.

6. Baki kertas. Pikirkan menempatkan baki kertas di meja kerja Anda. Misalnya, saya punya tiga: untuk tugas yang masuk, untuk sketsa, dan lembaran kertas yang bersih.

7. Eksperimen dan sesuaikan. Rekomendasi saya didasarkan pada pengalaman saya. Pada waktunya, Anda akan menemukan apa yang paling cocok untuk Anda; metode mana, urutan langkah mana, apa yang sebenarnya memenuhi potensi kreatif Anda. Anda akan sampai di sana hanya jika Anda terus-menerus mencoba sesuatu yang baru, itulah mengapa penting untuk bereksperimen dengan berbagai format, gaya, dan mencoba template baru.

8. Gunakan template. Template akan menghemat waktu dan secara implisit mempertimbangkan batasan format akun, membebaskan lebih banyak waktu untuk fokus pada apa yang penting.

Metode Mini Tambahan untuk Meningkatkan Sketsa Anda

Ini belum tentu tip dan trik, tetapi ini adalah kumpulan metode, alat, dan saran yang akan meningkatkan produktivitas Anda atau meningkatkan kualitas sketsa Anda.

1. Buat papan sketsa. Salah satu manfaat terbesar menggunakan pena dan kertas daripada alat sketsa digital adalah Anda benar-benar dapat menempelkannya ke dinding. Semua orang di tim Anda dapat melihatnya dan berpartisipasi (walaupun saya menyarankan untuk menyiapkan sesi peninjauan).
   
   • Anda akan melihat sketsa Anda sendiri, dan ini akan merangsang pemikiran Anda dan membiarkan Anda melihat gambaran besar, bukan bagian yang terisolasi, tetapi keseluruhan sistem. Anda akan melihat interaksi antara bagian dan cara mereka cocok satu sama lain.
     
   • Buat papan sketsa - lampirkan sketsa papan tulis Anda. Jika tidak ada papan tulis di kantor Anda, Anda dapat menggunakan pita perekat berukuran ganda atau kertas tempel untuk menempelkan sketsa Anda ke dinding. Jika Anda tidak ingin menempel di dinding, Anda dapat menemukan selembar kertas karton besar sebagai gantinya. Saya sangat menyarankan menggunakan papan sketsa, karena mereka adalah salah satu alat desain terbaik.
2. Gunakan papan tulis. Papan tulis adalah alat menggambar yang hebat. Ini memiliki sejumlah keunggulan:
   • Ini kolaboratif, dan mudah untuk melibatkan anggota tim lain dalam diskusi dan menggambar juga. Bahkan jika ide mereka tidak cocok, Anda akan memahami cara berpikir mereka, dan itu akan membantu Anda untuk berada di halaman yang sama.
     
   • Spidol tidak membiarkan Anda fokus pada detail, Anda harus memikirkan hal-hal umum. Sketsa terbuka untuk interpretasi.
     
   • Papan tulis mudah dibersihkan dan dikoreksi.
     
   • Ada banyak ruang dan Anda dapat dengan mudah memikirkan seluruh aliran sistem.
     
   • Anda dapat melampirkan sketsa, cetakan, dan bahan referensi menggunakan magnet.

3. Prototipe. Buat prototipe yang dapat diklik untuk mengevaluasi desain Anda. Cobalah untuk mendapatkan umpan balik tentang beberapa elemen. Ini bekerja sangat baik ketika Anda menggunakan templat - sketsa Anda memiliki ukuran yang sama. Jelas, akan lebih mudah untuk menggambar sketsa dengan ukuran yang sama jika Anda menggunakan template. Saya akan mencoba membuatnya lebih mudah dengan menyediakan beberapa templat yang dapat Anda unduh dan gunakan: Seluler, Peramban multi-jendela, Gulir peramban, Persona.

   

4. Gunakan printer dan pemindai Anda. Gambar kerangka dengan tangan (Anda dapat menggunakan penggaris untuk menggambar lebih akurat), lalu pindai saja menggunakan pemindai atau aplikasi seluler, dan cetak. Anda dapat mengedit template Anda di editor gambar sebelum mencetak. Anda dapat menghapus detail yang tidak perlu atau menduplikasi beberapa elemen. Anda juga dapat mencetak halaman situs siap pakai, foto, dan elemen deskriptif lainnya. Anda dapat menempelkan potongan di sketsa Anda.

5. Gunakan Evernote untuk memindai. Evernote adalah alat desain yang hebat. Anda dapat menyimpan dan membagikan sketsa Anda di dalamnya, Anda dapat membuat tema, dan menggunakan tag untuk mengatur sketsa Anda. Kemampuan mode "Scanner" sangat mengesankan. Anda meletakkan sketsa Anda di depannya dan itu "memindai", sehingga Anda mendapatkan salinan sketsa. Kemudian Anda dapat mengundang kolega Anda ke Evernote dan memberi mereka tautan catatan Anda. Karena ada aplikasi seluler untuk tablet dan ponsel, sketsa Anda selalu tersedia.

6. Sketsa hibrida. Untuk memberikan kehidupan dan realisme ke dalam sketsa Anda, Anda dapat menggabungkannya dengan foto. Itu berarti Anda harus mengambil foto dan kemudian menggambar beberapa cerita dengan elemen antarmuka di atasnya. Ini juga dapat membantu Anda memperhatikan beberapa masalah dan detail interaksi.

7. Menelusuri dunia nyata. Jika Anda perlu membuat storyboard, mengilustrasikan pengalaman dalam konteks tertentu (misalnya, seseorang yang menggunakan smartphone di stasiun bus), Anda perlu menyertakan penggambaran orang, tempat, dan berbagai objek kehidupan nyata. Ini mungkin sulit untuk digambar, terutama jika Anda belum menguasai keterampilan menggambar, tetapi berikut tip sederhananya: Ambil foto objek atau situasinya, lalu dapatkan kontur objek utama menggunakan editor gambar. Anda dapat menggunakan kontur yang dihasilkan dalam sketsa Anda sesudahnya. Tentu saja, jika Anda memiliki tablet dan stylus , itu akan lebih mudah.

Wireflow: Menguraikan Aliran Sistem dan Percabangan

Wireflow pada dasarnya adalah urutan aliran sistem, layar demi layar, dengan cabang dan titik keputusan. Kita harus mempertimbangkan bagaimana pengguna menangani tugas mereka, cara mereka berpindah dari layar ke layar, dan keseluruhan pengalaman produk mereka dari waktu ke waktu.

Wireflow, atau apa yang Anda gambar dan cara menghubungkannya, dapat diatur menurut pendekatan berikut:

• Urutan. Urutan adalah perjalanan lurus, layar demi layar. Itu juga bisa menjadi cerita dengan poin keputusan; Anda tidak hanya menunjukkan perjalanan tetapi juga titik keputusan dan jalur berbeda yang dapat dipilih pengguna. Anda dapat menunjukkan struktur interaksi layar.
• Perubahan negara. Gambarkan status layar yang berbeda dari beberapa elemen dan kondisi atau tindakan yang menyebabkan transisi antara status ini.
• Layar vs. elemen layar. Anda dapat menggambar seluruh layar atau mempertimbangkan interaksi dan interaksi mikro.
• Platform. Anda dapat mempertimbangkan satu pengalaman platform atau beberapa platform.
• Cakupan. Apakah Anda akan menggambarkan sebagian dari perjalanan pengguna atau keseluruhan perjalanan? Satu interaksi pengguna dengan sistem, atau interaksi beberapa pengguna?

Saya biasanya mencoba mendefinisikan jenis wireflow berikut, tergantung pada organisasi dan penggunaan praktis:

1. Memetakan aliran keseluruhan dan aliran tingkat tinggi. Segera buat sketsa pergeseran layar dan gambarkan perjalanan umum penggunaan produk Anda. Di sini Anda dapat menyertakan beberapa konteks dan Anda dapat menampilkan beberapa interaksi pengguna secara opsional. Misalnya, layanan belanja eCommerce adalah perjalanan yang cukup panjang yang mungkin mencakup banyak langkah: bagaimana pengguna menemukan toko, langkah-langkah yang mereka lalui untuk memesan produk, bagaimana mereka membayar, dan sebagainya.

2. Aliran layar. Ini berfokus pada aliran fungsional tertentu melalui sistem. Ini bisa berupa urutan layar kecil yang lurus atau perjalanan dengan percabangan. Misalnya, pengguna mengunggah beberapa foto atau video.

3. Skema navigasi. Gambar layar Anda dan opsi yang ada di dalamnya. Ini tidak seharusnya memetakan perjalanan. Langkah ini mencakup informasi yang menunjukkan opsi yang dapat dipilih pengguna, petunjuk arah yang dimiliki pengguna, dan berbagai bagian aplikasi. Saya biasanya membuat skema navigasi di awal proyek. Ini berfungsi untuk memahami bagaimana navigasi harus terstruktur (titik apa yang harus dimasukkan, berapa banyak level yang diperlukan).

4. Status layar. Gambar status layar atau elemen (contohnya mungkin dialog unggah file). Dalam hal ini, misalnya, layar akan memiliki status berikut:

   • Kosong
   • Seorang pengguna menarik file di area aktif
   • File sedang diunggah
   • File sudah di upload
   • Terjadi kesalahan

Membuat Sketsa Aliran UX: Panduan Cara Cepat

Proses desain wireflow mirip dengan wireframe. Banyak langkah yang serupa atau identik, tetapi ada beberapa perbedaan penting:

Tentukan apa yang Anda butuhkan untuk menggambar. Putuskan dengan tepat apa yang ingin Anda gambar (misalnya, sejarah umum atau bagian dari desain Anda). Apakah Anda ingin menghasilkan opsi yang berbeda atau memikirkan detail dari satu perjalanan? Putuskan apakah Anda akan menunjukkan sketsa Anda kepada orang lain atau tidak.

Tentukan keyframe dan transisi apa yang harus Anda sertakan dalam gambar Anda. Jika Anda menambahkan semua layar dan menggeser wireflow Anda akan sangat panjang dan rumit. Pertimbangkan layar kunci mana yang harus Anda perlihatkan untuk menyampaikan esensi interaksi yang membantu menyelesaikan tugas Anda. Hal yang sama berlaku untuk pergeseran layar. Anda perlu memilih shift mana yang akan lebih berguna dalam mengekspresikan ide Anda. Lihat contoh ini untuk referensi.

Tentukan titik awal. Apa yang akan menjadi titik awal perjalanan Anda? Anda dapat memulai dengan titik masuk, yaitu awal perjalanan, misalnya, apa yang dilihat pengguna saat mereka masuk ke aplikasi Anda. Atau, Anda dapat memulai dari titik tengah atau dengan layar atau langkah proses yang paling menarik/sulit/penting. Atau Anda dapat memulai dari akhir, dengan hasil akhir yang dicapai oleh pengguna, dan menjelaskan langkah-langkah yang diambil pengguna untuk sampai pada titik ini.

Putuskan apa yang akan terjadi selanjutnya. Setelah menggambar langkah awal, putuskan langkah selanjutnya dengan menjawab pertanyaan berikut:

• Ke arah mana langkah ini mengarahkan pengguna?
• Ke arah mana Anda ingin mereka pergi?
• Apa yang harus mereka lakukan untuk sampai ke sana?

Buat sketsa rute alternatif, entri. Pikirkan tentang cara alternatif yang dapat dilakukan pengguna untuk setiap langkah:

• Apa yang akan terjadi jika koneksi Internet pengguna gagal?
• Apa pilihan lain yang mereka miliki?
• Apa yang bisa salah jika terjadi kesalahan pengguna atau aplikasi, apa yang akan terjadi?
• Apa yang akan terjadi jika pengguna menutup aplikasi pada langkah ini?
• Di mana pengguna akan memulai saat berikutnya dia meluncurkan aplikasi?

Pikirkan tentang aliran alternatif. Analisis sejarah, rancang aliran alternatif, dan buat sketsa.

Tambahkan anotasi, catatan, detail. Tambahkan elemen penjelas yang akan memperjelas detail yang tidak jelas.

Menyimpan. Buat salinan digital dari sketsa.

Membagikan. Bagikan sketsa (misalnya, melalui Evernote atau InVision).

Tip dan Trik Sketsa Aliran UX Penting

Buat konsep wireflow terlebih dahulu. Jika Anda akan memikirkan perjalanan yang cukup panjang, Anda sebaiknya membuat sketsa cepat untuk memahami berapa banyak ruang yang Anda butuhkan dan agar tidak melewatkan beberapa langkah atau detail penting. Akan sulit untuk menambahkannya ke sketsa kertas sesudahnya.

Jangan membuat peta besar dengan terlalu banyak detail. Sketsa kertas tidak memiliki tombol undo , sehingga akan sulit untuk melakukan perubahan. Anda mungkin menggambar detailnya terlalu akurat dan ini akan mengalihkan imajinasi Anda dari generasi varian tingkat tinggi yang berbeda. Alih-alih membuat skema besar yang akan mengilustrasikan keseluruhan sistem, cobalah untuk fokus pada skrip utama dan coba persembahkan satu halaman untuk setiap skrip.

Potong detail yang tidak perlu dan gabungkan berbagai level detalisasi. Tidak perlu menggambar semua deskripsi interaksi, jadi coba gunakan hanya elemen kunci dari perjalanan Anda. Saat menggambar peta interaksi besar, Anda tidak perlu mengerjakan setiap layar secara detail. Beberapa layar bisa saja diwakili oleh beberapa kotak, dan layar kunci lainnya, bisa dikerjakan secara detail.

Coba ukuran kertas yang berbeda. Coba format kertas yang berbeda, A3 atau A5. Ukuran lembar kertas akan membatasi Anda dan akan mempengaruhi proses Anda dengan cara yang berbeda. Selembar kertas kecil tidak akan memungkinkan Anda menambahkan banyak layar atau detail, tetapi dapat membantu Anda berkonsentrasi pada gagasan utama. Menggunakan selembar kertas besar, Anda dapat menggambar satu perjalanan besar, banyak detail, dan catatan tambahan. Atau, Anda dapat menempatkan sejumlah perjalanan kecil di atasnya.

Catatan tempel juga dapat membantu. Anda juga dapat mencoba menggunakan catatan tempel. Anda dapat menggambar layar terpisah atau beberapa catatan kaki di atasnya, atau Anda dapat menggambar status tambahan dari elemen sketsa Anda. Keuntungannya adalah mereka dapat dengan mudah diganti, Anda juga dapat dengan mudah memindahkan catatan ke tempat lain. Misalnya, jika alurnya berubah, Anda bisa mengubah urutan catatan tempel Anda.

Gunakan template. Coba gunakan template. Mereka akan menghemat waktu dan memungkinkan Anda membuat prototipe yang lebih dapat diklik dan berkualitas tinggi.

Coba gunakan papan tulis. Papan tulis memiliki sejumlah keunggulan. Ini menjadi semakin populer karena memungkinkan Anda menggambar perjalanan besar dengan banyak cabang. Anda dapat menggambar banyak komponen aplikasi di atas kertas dan kemudian menempelkannya ke papan tulis menggunakan magnet, menambahkannya ke perjalanan.

Membuat sketsa bayangan. Bayangan dapat membantu Anda menandai elemen penting dan menambahkan daya tarik visual pada sketsa Anda. Saya menggunakan tiga jenis bayangan yang berbeda:

• Garis mengikuti arah cahaya - ini tidak selalu terlihat indah, tetapi Anda dapat menggunakan gradasi dan mengambil objek hingga "ketinggian" yang berbeda.
• Menguraikan beberapa bagian dengan warna yang lebih gelap (hanya bagian bawah atau sisi bawah dan kanan)
• Menggunakan Pro-marker (atau yang setara dengan aplikasi yang Anda gunakan untuk menggambar)

Menggambar komponen. Keberatan seperti “Saya tidak bisa menggambar dengan baik” dapat menghambat inisiatif Anda. Ini sebenarnya lebih mudah daripada kedengarannya. Bahkan sketsa yang paling rumit pun umumnya terdiri dari sejumlah blok dasar, seperti dalam contoh ini. Jika Anda dapat menggambar sebuah titik, garis, segitiga, persegi, dan lingkaran, maka Anda memiliki blok bangunan penting yang Anda perlukan untuk menggambar apa pun untuk sketsa Anda.

Menyatukan semuanya. Elemen dasar, tombol, tombol radio, dan dropdown terdiri dari elemen dasar. Setelah belajar menggambar elemen-elemen ini, Anda dapat menggabungkannya dan menggambar blok dan komponen yang kompleks.

Bungkus

Tujuan dari posting ini bukan untuk membuat panduan satu ukuran untuk semua sketsa UX, atau sketsa secara umum, karena desainer memiliki kebutuhan dan preferensi pribadi yang berbeda.

Seperti yang Anda lihat, ini banyak yang harus ditutupi. Desainer menggunakan banyak sekali alat, teknik, dan pendekatan untuk menghasilkan sketsa UX, dan ini agak subjektif. Teknik tertentu mungkin atau mungkin tidak bekerja untuk orang yang berbeda bekerja pada proyek yang berbeda. Jika Anda baru memulai, Anda pasti harus bereksperimen. Latihan dan eksperimen terus-menerus akan membantu Anda menemukan apa yang cocok untuk Anda.

Terserah Anda untuk memilih tip dan teknik yang paling cocok untuk proyek Anda dan pendekatan Anda terhadap desain. Apakah Anda memiliki tip sketsa tambahan untuk sesama UXers? Jangan ragu untuk membagikannya di bagian komentar.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib