Memahami Apa Saja Komponen Layer Dalam Dokumen Design Handoff

Baik itu perangkat lunak atau situs web, serah terima desain adalah salah satu hal terpenting selama tahap pengembangan produk. Desainer Produk, Desainer UX, atau peran serupa bertanggung jawab penuh atas masalah ini. Oleh karena itu, seorang desainer produk, desainer UX, atau peran serupa harus mendokumentasikan desain produk yang mereka buat setelah disetujui oleh manajer produk atau pemilik produk. Dokumen ini sering disebut dokumen rilis desain dan kemudian diteruskan ke pengembang untuk diterjemahkan ke dalam bahasa pemrograman.

Istilah Desain Handoff

Handoff desain adalah salah satu fase pengembangan produk di mana pengembang memulai implementasi desain yang dibuat dalam bahasa pemrograman oleh desainer produk atau UX. Perlu ditekankan bahwa desain produk yang dibuat oleh desainer produk atau desainer UX adalah desain yang matang dan telah disetujui oleh manajer produk, pemilik produk, atau orang yang bertanggung jawab.

Tim pengembangan sangat penting saat mengimplementasikan sebuah desain dalam bahasa pemrograman, desainer bukanlah pelaksana dari desain yang telah dibuat. Oleh karena itu desainer perlu mengetahui cara kerja pengembang dan menyampaikan desain mereka dengan benar. Dokumen handoff desain adalah salah satu media komunikasi yang terbukti di industri antara desainer dan pengembang.

Tahapan Proses Desain Handoff

Bagaimana proses serah terima desain untuk desainer dan pengembang bisa berhasil? Berikut langkah-langkah dan prosesnya:

1. Komunikasi dari awal

Komunikasi antara desainer dan pengembang diperlukan sejak awal. Keduanya harus memiliki komunikasi yang harmonis. Diskusi alur kerja atau pedoman untuk merancang alat handoff yang paling tepat. Penggunaan terminologi dalam produk dan penamaan di layar harus dalam semangat yang sama.

2. Membuat Dokumen Checklist

Untuk menghindari file atau draf yang hilang, Anda harus membuat dokumen daftar periksa. Anda dapat membuat daftar periksa ini menggunakan Google Spreadsheet atau Dropbox Paper. Anda dapat menambahkan deskripsi apakah pengembang telah mengadopsinya, tautan ke file tema, dll. ke daftar periksa.

3. Penataan aset dan spesifikasi

Template rilis Figma memungkinkan Anda untuk mentransliterasi desain Anda ke dalam bahasa pemrograman yang dipahami oleh programmer. Alhasil, programmer tidak perlu menebak-nebak, mereka langsung menerima identitas teknis dari setiap elemen. Misalnya, seorang programmer membuat persegi panjang putih. Tanpa fungsi pass, programmer harus menghitung ukuran persegi panjang putih. Namun, fungsi kirim secara otomatis membantu dengan informasi ukuran dan identitas teknis.

4. Buat Flow

Alur ideal untuk dibuat adalah prototipe interaktif. Bukan hanya desainer yang paham, tapi juga developer. Semua alur layar harus logis dan saling berhubungan.

5. Handoff Meeting

Konferensi ini untuk memastikan bahwa semua informasi dipahami sepenuhnya dan akurat oleh pengembang. Proses ini memungkinkan terjadinya komunikasi tanya jawab dan penjelasan informasi yang terkandung dalam dokumen desain. Serah terima ini merupakan fase yang sangat penting. Kesalahpahaman pada tahap ini akan mempengaruhi peluncuran produk, yang tidak diragukan lagi akan memakan waktu. Penting juga untuk menyadari bahwa proses penamaan harus konsisten selama proses handoff ini.

Nama file, produk, dan layar harus tetap konsisten sehingga pengembang dapat menavigasi semua file dengan benar. Proses pengambilalihan ini biasanya dilakukan dalam hal-hal seperti desain web dan aplikasi. Anda sebagai pengguna tidak perlu bingung dengan prosesnya karena Anda hanya bisa bekerja sama dengan developer website profesional.

Apa Itu Dokumen Design Handoff?

Sederhananya, dokumen handoff desain adalah dokumen yang berisi informasi kunci dari desain yang ditulis oleh desainer produk untuk pengembang. Dokumentasi merupakan salah satu media yang mendukung komunikasi antara desainer dan pengembang. Fungsi utamanya adalah untuk menyederhanakan proses pengembangan produk. Kesederhanaan, pemahaman, dan kemudahan akses oleh anggota tim yang terlibat adalah aspek utama yang perlu dipertimbangkan saat membuat dokumen ini. Selain itu, desainer produk atau desainer UX harus menghindari penggunaan jargon desain saat menyampaikan pesan dalam dokumen handoff desain. Saat memulai desain UX, berikut adalah komponen lapisan informasi yang harus Anda sertakan dalam dokumen handoff desain Anda:

- Mockup
- Interaction
- Copy
- Specs & assets
- Checklist

Komponen Layer Informasi dalam Dokumen Design Handoff

Mockup, interaksi, teks copy, spesifikasi aset dan daftar periksa adalah komponen lapisan informasi yang harus disertakan dalam dokumen handoff desain sesuai dengan sumber desain UX. Di bawah ini, Glints menjelaskan setiap lapisan masalah dan cara mendokumentasikannya.

1. Mockup

Mockup adalah visualisasi (tampilan) dari desain produk akhir (baik web atau perangkat lunak), tetapi tidak dapat (statis) berfungsi karena elemen interaktif belum diimplementasikan. Alat yang biasa digunakan untuk membuat Mockup antara lain Figma, InVision, dan Marvel. Desainer produk biasanya membuat versi model mereka dengan kesetiaan sedang dan tinggi untuk pengembang. Namun, ada dua hal lain yang kurang penting dan harus dikejar.

- Beri nama file Anda dengan jelas dan konsisten

Nama file dan layar model produk harus disesuaikan dengan fungsinya. Selain itu, Anda harus secara konsisten menggunakan "case of case" saat memberi nama file dan layar. Contoh: "nama file"; "nama file"; "nama file"; dan lain-lain. Pola penamaan file atau layar yang konsisten memudahkan pengembang menemukan file yang mereka butuhkan.

- Hilangkan elemen-elemen yang tidak lagi diperlukan

Mockup biasanya juga menyertakan elemen desain sisa dari proses berulang atau eksplorasi dalam membuat desain produk. Item ini harus dihapus sebelum membuat arsip pengembang final. Ini membuat dokumentasi lebih jelas dan lebih mudah dipahami.
 
2. Interaction

Interaksi adalah salah satu bagian penting dari informasi yang pengembang perlu komunikasikan. Komponen ini memungkinkan situs web atau perangkat lunak untuk berinteraksi dengan pengguna. Unsur-unsur yang berinteraksi dapat disampaikan dalam dua cara. Yang pertama adalah membuat prototipe interaktif (desain web atau perangkat lunak interaktif) atau menyediakan teks deskriptif untuk setiap layar mockup statis (desain desain non-interaktif). Anda dapat memilih metode apa pun.

Opsi untuk menggabungkan dua metode di atas juga dimungkinkan. Yang terpenting, dokumentasi untuk komponen ini mudah dipahami oleh pengembang. Berikut adalah dua tip yang dapat Anda gunakan saat mendokumentasikan komponen interaksi Anda:

- Membuat flow

Membuat model adalah langkah pertama. Setelah itu, kita perlu merakit model di sepanjang perjalanan pengguna. Anda juga dapat membuat layar prototipe interaktif untuk menjalankan string aliran. Terutama untuk layar dengan banyak elemen interaksi. Alur ini membantu manajer produk dan pemilik produk memahami cara kerja perjalanan pengguna produk. Dokumen alur ini juga membantu tim pengembangan merencanakan pendekatan pengkodean yang tepat untuk implementasinya.

- Mengecek fidelity tiap screen

Sederhananya, kategori fidelity screen bisa dibagi menjadi tiga level yakni low fidelity, medium fidelity, dan high fidelity. Low fidelity screen biasanya memiliki sedikit elemen interaction. Sebaliknya, high fidelity memiliki banyak sekali elemen interaction. Untuk mendokumentasikan elemen interaksi pada layar fidelitas rendah, Anda dapat mendeskripsikan elemen interaksi dengan mengekspos kalimat pendek pada mockup statis. Namun, jika layar Anda berisi elemen interaktif yang sangat kompleks, sebaiknya buat dan dokumentasikan layar prototipe interaktif. Pengembang dan desainer produk dapat menghabiskan waktu ekstra untuk berdiskusi langsung melalui layar, meskipun itu yang mereka inginkan.

3. Teks Copy

Salin teks berisi elemen yang selalu ada di situs web atau perangkat lunak. Menurut desainer produk Bilal Mohammed, sebagian besar tim produk dan desain di industri ini mendedikasikan sebagian kecil proses copywriting. Namun, beberapa perusahaan mempekerjakan spesialis copywriting dan penulis UI/UX di tim produk mereka. Terlepas dari apakah ada salinan penanganan peran tertentu dalam tim, penting untuk memastikan bahwa semua teks salinan didokumentasikan dengan benar dalam dokumen rilis desain. Sekarang, Anda dapat menerapkan langkah-langkah berikut untuk menyalin teks dokumen.

- Gunakan alat cloud seperti Google Sheets dan Dropbox Paper untuk membuat dokumen teks yang disalin lebih mudah diakses oleh semua orang yang terlibat dalam proyek.

- Buat tabel dengan tiga kolom. Masing-masing dari tiga kolom diberi nama Type, Heuristic (usability), dan Message.

- Di kolom [Jenis], Anda dapat mengelompokkan teks salinan berdasarkan layar. Misalnya, salin teks di Beranda, Blog, Daftar, Masuk, Kategori, dan layar lainnya.

- Bagian Heuristik (Kegunaan) memungkinkan Anda untuk menggambarkan situasi atau konteks di mana Salinan digunakan. Misalnya, jika kata sandi yang dimasukkan salah dan login tidak memungkinkan, "Salin A" akan ditampilkan.

- Jenis deskripsi ini membantu pengembang memahami konteks atau situasi di mana pesan ditampilkan.

- Berita di akhir. Ini adalah kolom khusus di mana salinan asli teks atau versi lengkap dari teks yang disalin ditempatkan. Ini memungkinkan pengembang untuk mendistribusikan teks langsung ke lokasi yang diinginkan tanpa harus menulis ulang teks.

4. Specs and assets

Spesifikasi desain adalah bagian rinci dari antarmuka pengguna produk. Menurut sumber Mockplus, elemen ini pada dasarnya berisi aset dari warna, gaya, dan ukuran. Ada dua metode yang dapat digunakan untuk mendokumentasikan spesifikasi barang dan aset. Yang pertama menggunakan alat otomatis dan yang kedua manual. Namun, dalam artikel ini, Glints hanya menjelaskan cara menggunakan alat otomatis untuk mendokumentasikan spesifikasi dan aset. Prosedurnya adalah sebagai berikut.

- Dokumentasi specs dan assets menggunakan tool otomasi

Cara mudah untuk mendokumentasikan spesifikasi dan aset desain Anda adalah dengan alat otomatis seperti Zeplin, Avocode, InVision Inspect, dan Sympli. Banyak dari alat ini dapat mendokumentasikan desain dengan ukuran, dimensi, dan spesifikasi yang diperlukan. Alat seperti Avocode diketahui dapat mengonversi sketsa desain versi desktop ke kode React Native versi iOS dan Android.

Di sisi lain anda dapat memanfaatkan sepenuhnya alat seperti plugin Sympli Xcode dan Android Studio untuk membuat desain yang responsif. Menggunakan alat otomatis akan membantu Anda mengatur lapisan dan grup dengan rapi. Ini memudahkan pengembang untuk menyerap informasi dan mengimplementasikan pengkodean yang diperlukan.

- Memastikan desain terimplementasi dengan tepat

Setelah menyerahkan dokumen handoff desain, desainer produk harus memastikan bahwa desain yang mereka buat telah diterapkan dengan baik oleh tim pengembangan. Tim pengembangan biasanya menggunakan alat seperti Jira dan Trello untuk mendokumentasikan proses pengembangan mereka.

Desainer produk, desainer UX, dan pembuat desain dapat memeriksa kemajuan pengembangan melalui alat ini. Jika Anda memerlukan konfirmasi, desainer produk Anda dapat meminta tiket dari Jira atau Trello. Dengan cara ini, akuntabilitas pengembangan produk terpelihara dengan baik, dan komunikasi untuk setiap peran didokumentasikan dengan baik sehingga setiap pemangku kepentingan dapat merespons dengan cepat.
 
5. Checklist

Selama proses serah terima, ada banyak file desain untuk dibagikan dan dikembangkan. Tidak jarang kita menjumpai kasus "draf atau file tidak ditemukan" saat proses eksekusi draf sedang berjalan. Untuk menghindari hal ini, Anda dapat membuat dokumen daftar periksa. Dokumen daftar periksa dapat dibuat menggunakan Google Sheets atau Dropbox Paper, yang mudah diakses secara online. Sekarang, inilah cara menerapkan ini untuk membuat dokumen daftar periksa masalah.

- Membuat dan memelihara daftar periksa yang berisi semua fitur dan kasus desain produk akhir.

- Daftar hal-hal kecil dan kasus harus diberi status yang memungkinkan mereka untuk dilihat secara rinci. Misalnya, apakah dokumen kasus atau fitur diadopsi oleh tim pengembangan.

- Untuk deskripsi yang lebih lengkap, sebaiknya tambahkan tautan yang menjelaskan lokasi file tema yang akan diekstrak.

- Buat kolom yang menjelaskan dependensi untuk setiap fitur atau kasus yang perlu diimplementasikan. Itu juga menambahkan kolom deskripsi untuk memberikan konteks pada karakteristik masalah dan kasus.