Panduan Komprehensif Untuk Desain Pengalaman Pengguna

( Ini adalah artikel bersponsor .) Setelah melakukan riset pengguna awal dan menganalisis temuan riset Anda, fase berikutnya dari proses desain adalah menerapkan apa yang telah Anda pelajari dengan mengembangkan serangkaian desain untuk menguji asumsi Anda. Dalam artikel keempat dalam seri saya untuk Adobe XD, saya akan berfokus pada fase awal proses desain.

Dalam keseluruhan rangkaian sepuluh artikel ini, ini adalah yang pertama dari tiga artikel yang menyatukan proses desain. Artikel ini membahas desain UX pada tingkat yang lebih tinggi, dari sudut pandang mata burung. Artikel saya berikutnya akan mengeksplorasi desain UI, menjelajahi inventaris antarmuka, membangun perpustakaan pola, dan mendesain interaksi dan animasi. Artikel ketiga dalam seri ini dalam seri akan mengeksplorasi wireframing dan prototyping.

Seperti yang saya jelajahi dalam artikel saya sebelumnya tentang penelitian UX, penting untuk ditekankan bahwa kami sedang membangun penelitian pengguna yang dilakukan. Setelah menganalisis temuan penelitian kami, tujuan kami pada fase proses desain ini adalah untuk:

• menetapkan beberapa jalur pengguna yang jelas yang memenuhi kebutuhan pengguna yang berbeda dengan merangkul cerita pengguna, skenario dan storyboard;

• menerapkan beberapa pelajaran dari dunia Human Computer Interaction (HCI) sehingga kami merancang dengan prinsip pertama dalam pikiran; dan

• membangun 'tampilan dan nuansa' untuk desain kami dengan cara yang tidak menggunakan perangkat yang dapat diterapkan baik dalam konteks desktop maupun seluler.

Singkatnya, artikel ini dimaksudkan sebagai jembatan antara fase penelitian dan fase desain . Seperti yang saya tekankan di artikel terakhir saya, proses desain — penelitian, desain, prototipe, pembuatan, pengujian — adalah proses yang berulang; pada fase proses ini, kami berfokus pada pengembangan serangkaian desain yang dapat kami buat prototipe, bangun, dan uji.

Desain UX adalah topik yang luas jadi pertimbangkan artikel ini sebagai primer singkat, tetapi — seperti dalam artikel saya sebelumnya — saya akan memberikan beberapa bacaan yang disarankan untuk memastikan Anda tercakup dengan baik.

Mendapatkan Kerangka Di Tempat

Sebelum kita membahas detail desain antarmuka pengguna (UI) dan membangun prototipe interaktif, penting untuk mendapatkan aliran desain tingkat tinggi, membangun kerangka di mana kita dapat membangun desain kita.

Pada titik proses ini, penting untuk menggunakan temuan penelitian kami untuk menginformasikan perkembangan cerita pengguna, mengidentifikasi tujuan pengguna yang berbeda. Kita dapat menggunakan cerita pengguna ini untuk membuat skenario yang berbeda. Ini membantu kami mengidentifikasi tujuan yang jelas — dan maksud yang mendasarinya — yang memandu proses desain. Ini juga memungkinkan kita untuk mengembangkan aliran melalui apa yang kita bangun.

Saat mengembangkan alur awal — menggunakan prototipe kertas dan papan cerita — kami berfokus untuk merasakan desain secara keseluruhan, sebelum menelusuri detailnya. Sangat penting untuk mendapatkan kerangka di tempatnya dan tidak tersesat dalam detailnya, yang akan mengikuti.

Dalam artikel saya sebelumnya, saya berfokus pada pentingnya melakukan riset pengguna sebelum Anda memulai fase desain suatu proyek. Seperti yang saya katakan:

Luangkan waktu dengan pengguna Anda, untuk mengetahui kebutuhan mereka, dan apa yang ingin mereka capai, ini adalah 'pekerjaan yang harus dilakukan.'

Dengan menggoda 'pekerjaan yang harus dilakukan' pengguna kami, kami dapat memastikan bahwa apa yang kami desain benar-benar berpusat pada pengguna. Setelah melakukan beberapa penelitian pengguna yang terfokus, penting untuk mengambil temuan Anda dan menggunakannya untuk menginformasikan proses desain Anda. Riset Anda seharusnya membantu Anda membangun beberapa pola, kebutuhan yang dimiliki oleh pengguna yang Anda rancang untuk memiliki kesamaan.

Namun, satu ukuran jarang cocok untuk semua, dan kemungkinan apa pun yang Anda rancang akan memiliki banyak tipe pengguna dengan kebutuhan berbeda. Mengembangkan 'cerita pengguna' — yang mewakili kebutuhan pengguna yang berbeda — dapat membantu Anda menyaring tujuan yang ingin Anda pecahkan, membantu membentuk proses selanjutnya. Tapi apa sebenarnya cerita pengguna itu?

Cerita Pengguna

Cerita pengguna adalah cara yang berguna untuk membangun pandangan tingkat tinggi tentang 'pekerjaan yang harus dilakukan' pengguna yang berbeda. Ditulis dari sudut pandang pengguna biasa, mereka membantu Anda menetapkan tujuan berbeda yang dimiliki pengguna berbeda sehingga Anda dapat mendesain untuk kebutuhan mereka yang berbeda sesuai dengan itu .

Istilah 'User Story' dicetuskan oleh Alistair Cockburn, salah satu penggagas gerakan tangkas dalam pengembangan perangkat lunak, yang menciptakan ungkapan, "cerita pengguna adalah janji untuk percakapan," selama proyek untuk Chrysler pada tahun 1998.

Cerita pengguna menggeser penekanan dari menulis tentang persyaratan menjadi membicarakannya. Meskipun halus, perubahan ini — dari menulis menjadi berbicara — dapat berdampak signifikan pada proses desain.

Terlalu sering persyaratan disampaikan secara abstrak, karena daftar yang harus diperiksa — jika Anda tidak berhati-hati — memiliki sedikit kemiripan dengan apa yang dibutuhkan pengguna dan lebih mirip dengan apa yang dibutuhkan 'desain oleh komite'. Kisah pengguna membantu memposisikan pengguna di pusat percakapan.

Ide alat untuk mendorong dan memfasilitasi percakapan ini menangkap kekuatan cerita pengguna. Mereka adalah alat yang ideal untuk mulai memetakan skenario , memastikan pengguna selalu berada di jantung proses desain dan pengembangan.

Deskripsi singkat tentang tujuan dan fitur yang diceritakan dari perspektif pengguna yang berbeda, cerita pengguna membantu Anda memahami tujuan mendasar yang dimiliki pengguna sehingga Anda dapat melihat masalah dari perspektif mereka. Ini mengikuti pola sebagai berikut:

• Sebagai (orang dalam peran tertentu),
• Saya ingin (melakukan suatu tindakan atau menemukan sesuatu),
• Sehingga (saya dapat mencapai tujuan saya).

Dengan menggunakan template di atas, kita dapat menempatkan diri kita pada posisi pengguna yang berbeda dan mengembangkan cerita yang berbeda untuk membentuk desain kita. Bayangkan, misalnya, kita sedang membangun sumber belajar berbasis web di mana dosen dan mahasiswa dapat berbagi materi pembelajaran. Kami cenderung memiliki sejumlah pengguna yang berbeda dengan kebutuhan yang berbeda. Kisah pengguna dosen mungkin:

Sebagai dosen, saya ingin membagikan slide kuliah saya sehingga saya dapat memberi siswa saya akses ke sumber daya di luar kelas.

Dengan mengembangkan cerita pendek seputar kebutuhan spesifik pengguna ini, kita dapat mulai membayangkan pola desain yang memuaskan jenis pengguna ini. Dilihat dari sudut pandang seorang siswa — pengguna yang berbeda dengan kebutuhan yang berbeda — kami dapat mengembangkan kisah pengguna berikut:

Sebagai mahasiswa, saya ingin mengakses slide kuliah sehingga saya bisa merujuknya ketika saya sedang merevisi.

Kisah-kisah ini — disampaikan dari perspektif yang berbeda — memberi kami provokasi yang berguna yang dapat kami gunakan di awal proses desain untuk mulai memetakan desain kami di tingkat tinggi. Yang penting, cerita difokuskan untuk memuaskan kebutuhan pengguna kami. Singkatnya, cerita pengguna membantu kami memahami tujuan pengguna di tingkat tinggi. Kami kemudian dapat menggunakan cerita ini untuk mengembangkan skenario berbeda yang dapat kami mulai desain.

Menggunakan Skenario Untuk Menginformasikan Desain Anda

Pada awal proyek, mudah terbawa suasana menambahkan banyak fitur dan tersesat dalam 'featuritis.' Bahaya dari pendekatan ini adalah mudah untuk mulai menambahkan fitur dan fungsionalitas yang mengurangi tujuan inti pengguna Anda.

Dengan menggunakan cerita pengguna untuk mengembangkan skenario umum, Anda tetap fokus pada tujuan inti pengguna Anda. Pendekatan ini juga memungkinkan Anda untuk menetapkan harapan dan mengembangkan tolok ukur untuk kebutuhan pengguna biasa, yang dapat digunakan untuk menetapkan hasil dan cakupan yang jelas di awal proyek .

Kembali ke contoh sebelumnya, kita dapat menetapkan beberapa tujuan tingkat tinggi dari perspektif pengguna yang berbeda: untuk dosen, kita perlu merancang fitur unggah; untuk siswa, kita perlu merancang fitur akses. Ini adalah tujuan tingkat tinggi, tetapi kami dapat — saat kami mengembangkan skenario kami — mulai menambahkan beberapa perincian dan kompleksitas ke cerita pengguna kami yang menginformasikan desain lebih lanjut.

Misalnya, kembali ke contoh sebelumnya, dari sudut pandang siswa kita dapat mempertimbangkan skenario berikut:

• Pada tingkat dasar, siswa ingin mengakses slide.

• Pada tingkat yang sedikit lebih ditingkatkan, siswa mungkin ingin dapat membuat anotasi pada slide, menangkap catatan mereka.

• Akhirnya, jika sumber daya memungkinkan, siswa mungkin ingin berbagi catatan mereka dengan rekan-rekan mereka, memungkinkan pembelajaran kolaboratif.

Skenario, seperti contoh yang dieksplorasi di atas, memungkinkan kita untuk mendapatkan gambaran yang jelas tentang berbagai tingkat kerumitan dan desain yang sesuai . Mereka juga memungkinkan kami untuk merasakan aliran pengguna melalui desain kami, memungkinkan kami untuk memetakan mereka di atas kertas sehingga kami dapat mulai membangun proyek secara menyeluruh.

Memetakan Alur Desain Anda

Dengan menggunakan cerita dan skenario pengguna Anda sebagai pendorong diskusi, Anda dapat mulai memetakan jalur melalui desain Anda pada tingkat tinggi. Proses pemetaan cerita pengguna ini , yang diilustrasikan sebelumnya, membantu kita mendefinisikan alur pengguna yang berbeda.

Pada titik proses ini, kertas adalah alat yang ampuh untuk pembuatan prototipe cepat , sebelum melanjutkan untuk mengembangkan papan cerita yang lebih halus. Pendekatan berbiaya rendah, kesetiaan rendah, dan cepat, pembuatan prototipe kertas memiliki banyak manfaat:

• Ini biaya rendah, memungkinkan Anda untuk mengeksplorasi banyak ide dengan sedikit hambatan untuk masuk;

• Ini kesetiaan yang rendah, yang mendorong Anda untuk fokus pada gambaran besar dan tidak tersesat dalam detailnya;

• Ini cepat, memungkinkan Anda untuk dengan cepat beralih melalui beberapa variasi aliran.

Paper juga memungkinkan kolaborasi, memungkinkan banyak peserta untuk berkeliling meja dan mengembangkan desain dengan cepat , menerima pendapat dan wawasan semua orang.

Terakhir, kertas 'menyimpan sendiri.' Saat kita mendesain di layar, kita sering kehilangan artefak desain karena sifat 'status' penyimpanan perangkat lunak, titik yang berbeda dalam proses desain. Pembuatan prototipe kertas memungkinkan kita untuk melihat keseluruhan proses desain termasuk ide-ide yang ditolak dalam perjalanan ke konsep akhir kita.

Dalam pengalaman saya, proyek tipikal sering kali membutuhkan beberapa putaran prototipe kertas saat Anda secara iteratif mengerjakan cara Anda melalui pemikiran Anda. Pada titik ini, proses bekerja di layar terlalu lambat dan terlalu halus, yang dapat dengan cepat membuat Anda tersesat dalam detail yang tidak perlu. Kertas membebaskan Anda untuk fokus pada gambaran besar , yang penting pada tahap ini.

Tentu saja, bahkan desainer berpengalaman pun dapat mundur ketika dihadapkan dengan gagasan membuat sketsa antarmuka, karena menganggap prosesnya menakutkan. Tidak jarang mendengar, "Tapi, saya tidak bisa menggambar!" Ini jelas tidak benar, kita semua dapat menggambar dengan baik ketika kita masih anak-anak (seperti semua gambar di lemari es orang tua kita!) kita hanya perlu mempelajari kembali keterampilan yang berharga ini.

Mengutip Jason Santa Maria:

Membuat sketsa bukan tentang menjadi seniman yang baik, ini tentang menjadi pemikir yang baik.

Dengan sketsa tingkat tinggi yang dibuat, inilah saatnya untuk mulai menambahkan beberapa fidelitas dengan membuat beberapa storyboard dan gambar rangka. Tahan pikiran itu. Namun, saya akan kembali ke artikel keenam saya tentang Wireframing dan Prototyping.

Tempat Ilmu Pengetahuan: Hukum UX

UX mungkin merupakan disiplin yang relatif baru, tetapi diinformasikan oleh penelitian selama beberapa dekade di bidang Interaksi Komputer Manusia (HCI).

Seperti yang saya sebutkan di artikel pertama dalam seri ini, tentang Evolusi Desain Pengalaman Pengguna, kami terutama mendesain untuk manusia , dan manusia secara umum memiliki karakteristik serupa yang harus kami pertimbangkan saat membuat keputusan desain. HCI menawarkan kepada kami banyak prinsip yang dapat kami terapkan pada bidang desain pengalaman pengguna.

Banyak dari prinsip-prinsip ini telah disaring dalam bentuk 'hukum' yang dapat kita tarik, misalnya:

• Hukum Hick, yang menekankan perlunya meminimalkan pilihan untuk meringankan beban kognitif dan membantu mendorong pengambilan keputusan ;

• Hukum Fitt, yang memberikan saran berharga tentang bagaimana kita dapat memudahkan interaksi melalui ukuran dan posisi elemen antarmuka yang cermat ; dan

• Hukum Miller, yang menekankan manfaat 'chunking' untuk memudahkan tugas yang kompleks .

Ini adalah prinsip-prinsip yang dapat diterapkan baik di tingkat makro maupun mikro dan untuk ditingkatkan sebagai seorang desainer, prinsip-prinsip ini perlu ditelusuri secara mendalam. Saya akan menjelajahi tiga — Hukum Hick, Hukum Fitt, dan Hukum Miller — tetapi masih banyak lagi.

Situs luar biasa Jon Yablonski, Laws of UX, adalah kumpulan prinsip yang bermanfaat, yang layak untuk di-bookmark. Tidak hanya merupakan bagian dari desain yang indah, tetapi juga memberikan gambaran yang baik tentang setiap prinsip disertai dengan tautan ke bacaan lebih lanjut.

Hukum Hick

Hukum Hick (atau, secara penuh, Hukum Hick-Hyman) menyatakan:

Waktu yang dibutuhkan untuk membuat keputusan meningkat dengan jumlah dan kompleksitas pilihan.

Dinamakan setelah William Edmund Hick dan Ray Hyman, sepasang psikolog, undang-undang tersebut menekankan pentingnya mengurangi jumlah pilihan yang Anda berikan kepada pengguna .

Anda mungkin berpikir Anda membantu pengguna Anda dengan menawarkan serangkaian pilihan tanpa akhir, tetapi pada kenyataannya, Anda menambah beban kognitif mereka. Semakin banyak pilihan yang dihadapi pengguna, semakin besar kemungkinan mereka untuk pergi, dilumpuhkan oleh ' kelumpuhan keputusan '. Ini bisa sangat bermasalah dalam konteks e-niaga, di mana pengguna yang pergi membawa dampak langsung pada intinya.

Kami dapat menerapkan Hukum Hick ke desain UX dalam berbagai cara:

• Saat membuat navigasi alih-alih memberikan daftar pilihan yang tak ada habisnya, fokuslah hanya pada beberapa . Pengguna Anda akan berterima kasih.

• Dalam konteks e-niaga, alih-alih mencantumkan setiap produk, kurangi jumlah pilihan dan fokus. Lakukan ini, dan Anda akan mengimbangi kelumpuhan keputusan yang mengarah ke tingkat konversi yang lebih tinggi .

• Membedakan konten penting dari konten sekunder. Dengan memungkinkan pengguna menemukan jalan melalui lebih sedikit pilihan, Anda akan mengurangi beban kognitif mereka .

Kita sering bersalah karena menyamakan 'lebih banyak' dengan 'lebih baik', tetapi Hukum Hick menyuruh kita untuk berpikir sebaliknya. Semakin banyak jumlah opsi, semakin lama waktu yang dibutuhkan pengguna kami untuk mencapai keputusan (dan terkadang membuat mereka tidak membuat keputusan). Fokus adalah yang terpenting, paling tidak di dunia yang semakin kewalahan dengan pilihan.

Hukum Fitt

Hukum Fitt menyatakan: Waktu yang dibutuhkan untuk mendapatkan target adalah fungsi dari jarak dan ukuran target. Diterjemahkan itu berarti: Semakin jauh target — sebuah tombol di layar, misalnya — semakin besar yang dibutuhkan pengguna untuk dapat menjangkaunya dengan mudah.

Hukum Fitt sangat penting dalam hal mendesain tombol dan elemen layar lainnya yang dapat diklik. Konteks yang berbeda memerlukan pendekatan yang berbeda dan akan menginformasikan pendekatan desain Anda.

Dalam konteks desktop, pengguna akan menggunakan mouse dan — pada layar besar — ​​melintasi jarak yang berpotensi besar. Dalam konteks ini, penting untuk memastikan tombol ajakan bertindak (CTA) berukuran wajar, mudah dilihat, dan diklik .

Dalam konteks seluler, penting untuk mempertimbangkan target tap saat mendesain antarmuka. Saat mendesain untuk layar sentuh, jari kita memiliki fidelitas yang lebih rendah daripada penunjuk tetikus, jadi kita perlu meningkatkan ukuran target ketukan . (Tentu saja, target ketuk yang lebih besar di lingkungan desktop juga dapat membantu!)

Kami dapat menerapkan Hukum Fitt ke desain UX dalam berbagai cara:

• Saat mendesain untuk seluler, pertimbangkan target ketuk Anda. Dengan lebih sedikit real estat layar , kurangi jumlah elemen yang dapat diklik dan tambah ukurannya .

• Ini mungkin terdengar jelas, tetapi jika Anda memiliki tombol besar di layar, pastikan itu adalah ajakan bertindak utama jika tidak, Anda berisiko mengekliknya secara tidak sengaja oleh pengguna.

• Saat merancang menu tarik-turun atau bentuk navigasi bersarang lainnya, pastikan ukuran target Anda cukup besar untuk diperoleh pengguna .

Secara umum, semakin jauh sesuatu, semakin besar yang dibutuhkan agar pengguna dapat memukulnya. Saat merencanakan desain Anda pada tingkat tinggi, pertimbangkan ajakan bertindak yang penting dan pastikan Anda telah mengikuti Hukum Fitt saat mendesain ini. Tombol kecil mungkin terlihat rapi dan rapi, tetapi jika membuat pengguna Anda frustrasi, desain Anda perlu diperbaiki.

Hukum Miller

Hukum Miller menyatakan: Rata-rata orang hanya dapat menyimpan tujuh (plus atau minus dua) item dalam memori kerja mereka. Singkatnya: hanya ada begitu banyak yang bisa kita simpan di kepala kita dalam waktu singkat.

Hukum Miller sangat penting ketika kita mempertimbangkan bagaimana kita mengatur dan mengelompokkan informasi, dan di sinilah chunking dapat berguna. Pertimbangkan pemformatan dua nomor telepon berikut (keduanya sama, nomor fiksi):

• 07700984964

• 07700 984 964

Sebagai rangkaian angka tanpa spasi, angka sebelas digit sulit disimpan oleh pengguna di memori kerja. Tambahkan beberapa spasi, bagaimanapun, dan tugas pengguna Anda jauh berkurang. Dengan memotong informasi, pengguna Anda dapat menyimpan tiga kelompok angka dalam memori kerja, memungkinkan mereka untuk menyelesaikan tugas mereka.

Hukum Miller melangkah lebih jauh dari sekadar mengurangi interaksi mikro seperti ini; itu juga dapat digunakan pada skala yang lebih makro. Misalnya, saat mendesain formulir, fokuslah pada pengelompokan informasi ke dalam grup yang terorganisir secara logis : nama, alamat, dan detail kontak; detail akun, seperti nama pengguna dan kata sandi; rincian bank; dan pengelompokan lainnya.

Kami dapat menerapkan Hukum Miller ke desain UX dalam berbagai cara:

• Saat membuat daftar nomor telepon , potonglah informasi tersebut sehingga dapat disimpan dengan mudah di memori kerja .

• Saat merancang formulir pembayaran yang menampilkan informasi kartu kredit, nomor kartu kredit akan lebih mudah diurai oleh pengguna jika dipecah menjadi empat bagian.

• Kurangi beban kognitif dengan membatasi jumlah pilihan yang ditawarkan.

Sebagai desainer, seringkali kita harus menyajikan informasi yang kompleks. Hukum Miller berguna untuk diingat dalam konteks ini. Jika memungkinkan, cari kelompok informasi yang dapat dipecah dan dipotong, sehingga memungkinkan mereka untuk disimpan lebih mudah di memori kerja pengguna.

Tampilan Dan Nuansa: Mengkomunikasikan Desain Visual

Dengan pandangan sekilas tentang aliran proyek Anda, penting untuk mulai memikirkan tampilan dan nuansanya, serta desain visualnya. Inilah yang saya sebut 'tata bahasa visual', dan ini adalah pendekatan visual yang akan Anda adopsi dalam desain Anda.

Dengan proliferasi perangkat yang terus meningkat untuk dirancang — jam tangan, ponsel (dari kecil hingga besar), tablet, desktop, dan media lainnya — gagasan untuk mengembangkan visual piksel tunggal yang sempurna telah menjadi ketinggalan zaman.

Menanggapi lanskap yang berubah ini, kami telah melihat pergerakan menuju artefak desain yang menjauh dari kesempurnaan piksel demi menangkap 'rasa' desain. Artefak ini termasuk, misalnya:

• Papan suasana hati
• Ubin Gaya
• Kolase Elemen

Proses setiap orang berbeda, tetapi pada tahap proses ini, saya menggunakan kombinasi papan suasana hati dan kolase elemen untuk membantu menetapkan arah: papan suasana hati membantu Anda masuk ke stadion baseball yang tepat , kolase elemen bertindak sebagai jembatan antara desain visual Anda dan desain antarmuka pengguna Anda.

Moodboarding

Moodboarding, seperti namanya, membangun suasana hati, membantu Anda membuat zona pada tampilan dan nuansa tertentu yang sesuai dengan tujuan Anda secara keseluruhan. Papan suasana hati berguna sebagai pembuka percakapan, bertindak sebagai fokus yang dapat Anda bangun. Sebagai aturan praktis, saya biasanya mengumpulkan antara tiga dan lima papan suasana hati yang berbeda, masing-masing menunjukkan arah yang berbeda.

Anda mungkin memiliki tampilan dan perasaan tertentu dalam pikiran, tetapi — seperti yang kita semua tahu, saya yakin — opsi pilihan Anda mungkin tidak cocok dengan sudut pandang klien Anda. Saya merasa terbantu untuk memiliki alternatif dan sering menemukan hasil akhir yang menyatukan berbagai elemen dari papan suasana hati yang berbeda.

Intinya: Pada tahap ini Anda menampilkan desain visual tingkat tinggi, tidak tersesat dalam menciptakan desain yang sempurna piksel , yang sia-sia di zaman dengan ukuran layar yang sangat berbeda. Maket terperinci akan mengikuti pada tahap wireframing dan prototyping.

Poin dalam proses ini adalah tentang mengembangkan artefak desain yang dapat digunakan untuk memicu percakapan. Untuk mendorong diskusi kreatif itu, ada baiknya memiliki berbagai papan suasana hati yang berbeda — masing-masing dengan tampilan dan nuansa yang berbeda.

Saat menyusun papan suasana hati, penting untuk mempertimbangkan pendekatan analog dan juga pendekatan digital . Jika inspirasi visual Anda 100% digital, Anda menanggung risiko apa yang saya sebut semuanya terlihat sama di mana satu desain terlihat persis seperti yang lain. Pertimbangkan untuk mencari inspirasi di luar layar, menggunakan majalah lama yang tidak diinginkan sebagai inspirasi, lakukanlah, dan desain Anda akan menonjol.

Kolase Elemen

Dengan umpan balik yang terkumpul di papan suasana hati Anda, inilah saatnya untuk mulai mengembangkan beberapa komponen desain, menerapkan arah visual Anda ke beberapa elemen antarmuka pengguna yang khas sehingga Anda dapat menetapkan 'tata bahasa visual.'

Ada sejumlah alat yang dapat Anda gunakan untuk melakukan ini termasuk Ubin Gaya dan Kolase Elemen. Keduanya memiliki kekuatan, terutama bertindak sebagai katalis untuk bergerak menuju tampilan dan nuansa akhir.

Seperti yang dikatakan Samantha Warren, yang mengembangkan metodologi Style Tiles:

Style Tiles adalah katalis untuk diskusi seputar preferensi dan tujuan klien.

Penekanan ini — pada diskusi tentang tampilan dan nuansa — adalah kekuatan dari kedua metode ini. Mereka menghemat banyak waktu, menghilangkan kebutuhan pada tahap ini untuk membuat rendering piksel-sempurna pada berbagai ukuran.

Dalam pengalaman saya, Style Tiles dapat salah dibaca oleh klien yang salah mengira bahwa itu adalah maket visual. Saya lebih suka bentuk yang lebih bebas, pendekatan berbasis template yang lebih sedikit, dan ketika saya menemukan pendekatan Element Collage Dan Mall, saya terpikat.

Dalam posting yang sangat bagus yang merinci proses desainnya pada proyek untuk Reading Is Fundamental , Mall menekankan perlunya mengganti presentasi dengan percakapan, membuat klien terlibat dalam proses tersebut. Kolase Elemen adalah cara terbaik untuk mendorong pendekatan percakapan ini. Seperti yang dikatakan Mall:

Ketika berbicara tentang desain dengan klien saya, saya ingin memiliki makanan visual sebanyak yang saya bisa, untuk memastikan kita membicarakan hal yang sama. Versi Style Tiles saya mengintegrasikan kecintaan saya pada kolase untuk jenis eksekusi berbeda yang saya sebut 'Element Collage.' Ungkapan khusus itu menciptakan harapan bahwa apa yang kita lihat bukanlah desain akhir melainkan kumpulan bagian yang berbeda tanpa logika atau urutan tertentu.

Keindahan Element Collages adalah mereka bertindak sebagai jembatan antara papan suasana hati Anda dan komponen UI Anda (segera dikembangkan). Mereka cukup fleksibel untuk menunjukkan kepada klien untuk merasakan apa yang akan kita bangun . Di atas segalanya, mereka adalah alat yang berguna untuk membantu Anda mendapatkan konsensus seputar tata bahasa visual Anda sebelum Anda mulai mengembangkan prototipe yang lebih intensif waktu.

Dalam Penutupan

Sebelum kita membahas detail desain antarmuka pengguna (UI) dan membangun prototipe interaktif, penting untuk mendapatkan aliran desain tingkat tinggi, membangun kerangka di mana kita dapat membangun desain kita.

Dengan menetapkan proses tingkat tinggi untuk memulai fase desain proyek Anda, Anda dapat bekerja lebih efisien untuk mendapatkan kerangka kerja yang jelas. Pada tahap proses ini, penting untuk tidak tersesat dalam detailnya, tetapi lebih fokus untuk mendapatkan sapuan kuas yang luas pada tempatnya.

Sangat penting untuk mendapatkan sapuan kuas yang luas sebelum menyelam lebih dalam ke dalam merancang UI dan mengembangkan gambar rangka dan prototipe. Fokus pada penetapan arah desain yang jelas, dan beberapa tujuan pengguna yang jelas , sebelum masuk ke detailnya. Menolak keinginan untuk fokus pada detail tanpa menetapkan tujuan desain yang jelas akan menghemat pekerjaan yang sia-sia.

Singkatnya, jangan tersesat dalam detail sampai Anda memiliki semuanya dipetakan.

Bacaan yang Disarankan

Ada banyak publikasi hebat — offline dan online — yang akan membantu Anda dalam petualangan Anda. Saya telah menyertakan beberapa di bawah ini untuk memulai perjalanan Anda.

• “Cara Menulis Kisah Pengguna yang Lebih Cerdas,” Joe Natoli
  Jika Anda sudah terbiasa dengan cerita pengguna, saya sarankan membaca peningkatan yang disarankan Natoli untuk cerita pengguna — dengan menambahkan fokus pada manfaat yang terukur — adalah hal yang menarik.

• “Kisah Pengguna,” Perangkat Lunak Kambing Gunung
  Panduan ini memberikan saran yang berguna untuk membagi cerita pengguna menjadi serangkaian cerita yang lebih kecil dan terhubung dan menambahkan 'kondisi kepuasan', yang patut dipertimbangkan.

• “Hukum UX,” Jon Yablonski
  Situs luar biasa dengan kumpulan prinsip bermanfaat yang layak untuk di-bookmark. Tidak hanya merupakan bagian dari desain yang indah, tetapi juga memberikan gambaran yang baik tentang setiap prinsip disertai dengan tautan ke bacaan lebih lanjut.

• “Psikologi dan UX,” Nielsen Norman Group
  Dengan landasan yang kuat dalam berbagai undang-undang yang dapat diterapkan dalam bidang pengalaman pengguna, saya juga merekomendasikan untuk menjelajahi psikologi.

• “Kolase Elemen,” Dan Mall
  Ini layak dibaca jika Anda ingin mendapatkan pemahaman tentang bagaimana alat ini dapat digunakan dalam layanan proyek klien biasa.

Artikel ini adalah bagian dari seri desain UX yang disponsori oleh Adobe. Adobe XD dibuat untuk proses desain UX yang cepat dan lancar, karena memungkinkan Anda beralih dari ide ke prototipe lebih cepat. Desain, prototipe, dan bagikan — semuanya dalam satu aplikasi. Anda dapat melihat lebih banyak proyek inspiratif yang dibuat dengan Adobe XD di Behance, dan juga mendaftar ke buletin desain pengalaman Adobe untuk tetap mendapatkan informasi terbaru dan terinformasi tentang tren dan wawasan terbaru untuk desain UX/UI.