Tutorial Alur Kerja Desain untuk Pengembang: Memberikan UI/UX yang Lebih Baik Tepat Waktu

Catatan Editor: Lubos Volkov adalah seorang desainer berpengalaman yang telah bekerja dari jarak jauh dengan banyak pengembang sepanjang karirnya. Sebagai desainer produk di Toptal, Lubos berinteraksi setiap hari dengan anggota tim dari berbagai departemen termasuk teknik, komunitas, dan konten. Dia adalah seorang desainer berbakat yang keterampilan komunikasinya berkontribusi pada kesuksesannya. Dalam tutorial ini, Lubos berbagi pengalaman dan cara untuk mengoptimalkan alur kerja UI dan UX desainer-developer yang menghasilkan produk berkualitas yang dikirimkan pada, atau sebelum, tenggat waktu.

Bekerja dengan desainer atau tim desain yang hebat dapat menjadi aset yang tak ternilai bagi tim mana pun. Dengan saluran komunikasi yang jelas, dan kerjasama yang mengalir bebas, perancang harus memberikan semua yang Anda butuhkan untuk mempercepat proses pembangunan dan membatasi pertanyaan dan kebingungan sebanyak mungkin.

Apa yang dapat Anda, pengembang UX, lakukan untuk memastikan bahwa produk yang Anda buat dikirimkan tepat waktu tanpa mengorbankan kualitas antarmuka pengguna dan pengalaman pengguna?

Jawaban saya: Libatkan desainer Anda sejak hari pertama , dan libatkan mereka di seluruh proses pengembangan UI/UX. Pastikan untuk membangun jalur komunikasi yang jelas dan pesan yang konsisten antara pengembang dan desainer.

Apakah Anda Memiliki Semua yang Anda Butuhkan?

Hal terburuk yang dapat terjadi selama implementasi UI apa pun adalah __kurangnya komunikasi antara perancang dan pengembang __(kecuali mereka orang yang sama). Beberapa desainer berpikir pekerjaan mereka selesai setelah PSD dikirim. Tapi, itu salah! Anda harus membuat alur kerja komunikasi yang selalu aktif yang berlangsung di luar pengiriman PSD.

Dalam banyak kasus, perlu waktu sebelum desainer melihat implementasi desain UI/UX yang sebenarnya. Yang mengejutkan mereka, pembuatannya seringkali benar-benar berbeda dari pengajuan awal. (Ini terjadi pada saya lebih dari sekali. Saya telah mengirim file sumber dengan deskripsi lengkap dan prototipe interaksi, tetapi ketika saya akhirnya melihat proyek tersebut, berbulan-bulan kemudian, ia memiliki tata letak yang berbeda, warna yang berbeda, dan tidak ada interaksi di tempat.)

Beberapa desainer mungkin membenci saya karena ini, karena alur kerja desain ini membutuhkan banyak pekerjaan "ekstra" di pihak mereka. Namun, membuat dan memberikan aset dan informasi lengkap, dengan cara yang terorganisir, lebih baik untuk proyek dan tim secara keseluruhan.

Jika pengembang memiliki semua yang mereka butuhkan di depan mereka, itu akan mempercepat prosesnya. PSD yang bersih saja tidak cukup.

Apa yang Anda butuhkan untuk menyelesaikan pekerjaan secara efektif dan efisien?

Ini adalah aset yang diharapkan pengembang dari perancang untuk membawa desain UI/UX ke implementasi:

• File sumber daya - Perancang harus menempatkan setiap elemen aplikasi dalam satu file. File ini harus berisi tombol, kotak centang, gaya header, font, warna, dll. Pada dasarnya, berdasarkan informasi dalam file ini, pengembang harus dapat membuat ulang antarmuka apa pun dari awal. Jauh lebih mudah bagi pengembang untuk mengekspor elemen apa pun dari satu PSD, daripada mencari banyak file untuk itu.

• Aset - Pastikan pengembang mendapatkan semua aset yang diperlukan, karena file sumber tidak boleh disentuh lagi.

• Prototipe interaksi - Hari-hari "layar statis" sudah lama berlalu. Menggunakan interaksi dan animasi yang cerdas, untuk memuluskan alur kerja dan implementasi desain UX, adalah praktik umum sekarang. Tapi, Anda tidak bisa hanya mengatakan "ini akan meluncur dari kiri" ke pengembang. Perancang harus membuat prototipe sebenarnya dari interaksi itu. Prototipe harus mencakup informasi seperti kecepatan, kecepatan, dll., dan perancang diharapkan untuk menentukan masing-masing nilai ini.

• Konvensi penamaan - Minta struktur penamaan file untuk menjaga semuanya tetap teratur. Ini akan memudahkan Anda berdua untuk menavigasi file. (Tidak ada yang suka menyembunyikan sesuatu di folder latar belakang.)

• Sumber Daya HDPI - Kita hidup di "masa sulit", dengan kepadatan layar yang sangat besar. Pastikan desainer akan mengirimkan gambar dalam semua resolusi yang diperlukan, sehingga aplikasi Anda akan terlihat renyah di mana-mana. Catatan: gunakan vektor sebanyak mungkin; itu akan banyak membantu Anda (svg).

Jika Anda menemukan sesuatu yang hilang selama implementasi, jangan takut; ping perancangnya dan mintalah. Jangan pernah melewatkan, dan jangan pernah berhemat! Anda adalah anggota tim yang sama, dan tugas Anda adalah memberikan produk sebaik mungkin. Jika seorang desainer gagal, Anda juga gagal.

Pekerjaan Dalam Proses

Manfaatkan desainer Anda selama proses pengembangan UI/UX. Jangan biarkan mereka di sela-sela mengharapkan mereka untuk hanya "mendorong piksel." Seorang desainer melihat kemungkinan inovasi bahkan sebelum implementasi dimulai. Untuk memanfaatkan ini, pertahankan mereka dalam lingkaran. Berikan mereka akses untuk melihat, dan menguji, pekerjaan yang sedang berlangsung. Saya sangat menyadari bahwa tidak ada yang suka berbagi proyek yang belum selesai. Tapi, jauh lebih mudah untuk membuat perubahan di tengah build daripada di akhir. Melakukannya dapat menghemat waktu Anda dan mencegah pekerjaan yang tidak perlu. Setelah Anda memberi desainer kesempatan untuk menguji proyek, minta dia untuk menyusun daftar masalah dan solusi, dan menyarankan perbaikan.

Apa yang harus dilakukan ketika pengembang memiliki ide yang akan mengubah tampilan aplikasi? Diskusikan dengan desainer, dan jangan biarkan pengembang memodifikasi desain, tanpa berkonsultasi dengan desainer. Alur kerja desain ini akan memastikan bahwa pembangunan tetap pada jalurnya. Seorang desainer hebat memiliki alasan untuk setiap elemen di layar. Mengambil satu bagian, tanpa memahami mengapa itu ada di sana, dapat merusak pengalaman pengguna produk.

Manajemen Proyek Desain UI/UX

Desainer berpikir bahwa pengembang dapat menghidupkan desain dalam satu hari, atau bahkan dalam satu jam. Namun, seperti desain yang hebat, pengembangan yang hebat membutuhkan waktu dan usaha. Jauhkan desainer Anda yang cemas dengan membiarkan dia melihat kemajuan pembangunan. Menggunakan perangkat lunak manajemen proyek eksternal, untuk memastikan setiap revisi diperhitungkan, adalah cara yang bagus untuk memastikan Anda tidak melewatkan informasi penting yang dibahas dalam percakapan email atau sesi Skype. Dan jujur ​​saja: terkadang perubahan dan aktivitas bahkan tidak dikomunikasikan sampai terjadi.

Solusi apa pun yang Anda gunakan, pastikan untuk memilih satu proses alur kerja yang akan diadopsi oleh seluruh tim dan digunakan secara konsisten. Di tim kami, saya mencoba mendorong Basecamp karena itulah yang saya gunakan, tetapi pengembang front-end kami menganggapnya memiliki fitur terbatas. Mereka sudah menggunakan perangkat lunak manajemen proyek lain untuk melacak bug, kemajuan, dll., seperti JIRA, GitHub, dan bahkan Evernote. Saya mengerti bahwa pelacakan dan manajemen proyek harus dibuat sesederhana mungkin, jadi saya memigrasikan alur kerja desain UI saya ke JIRA. Saya ingin memastikan mereka memahami alur kerja dan kemajuan saya, tetapi saya tidak ingin mereka merasa bahwa desain adalah hal lain yang harus dikelola.

Berikut adalah beberapa saran untuk alat manajemen proyek:

• Basecamp - Melacak kemajuan tugas terkait desain dan pengembangan, dan memungkinkan Anda mengekspor tugas dengan mudah. Ini juga memiliki klien seluler sederhana.
• JIRA - Platform yang sepenuhnya dapat disesuaikan di mana Anda dapat dengan mudah mengatur papan kustom untuk area yang berbeda. Misalnya, atur papan untuk melacak aktivitas seperti back-end, front-end, desain, dll. Saya pikir klien seluler agak lemah, tetapi ini adalah solusi yang bagus untuk tim yang lebih besar dan menyertakan fitur pelacakan bug.
• Email - Ini bagus untuk mengatur percakapan atau mengirim gambar. Tapi harap berhati-hati jika Anda menggunakan email untuk umpan balik. Hal-hal dapat dengan mudah hilang.

Anda juga dapat mencoba Trello dan perangkat lunak manajemen proyek lainnya, tetapi yang paling banyak digunakan di industri kami adalah Basecamp dan JIRA. Sekali lagi, hal yang paling penting adalah menemukan sistem manajemen proyek yang dapat digunakan setiap orang secara konsisten, karena jika tidak, ini adalah poin yang bisa diperdebatkan.

Desain dan Pengembangan UX Datang Bersama

Perancang dan pengembang adalah kombinasi yang kuat. Pastikan untuk melakukan brainstorming UI dan UX bersama sesering mungkin. Pengembang harus bersedia membantu seorang desainer menyusun ide, sementara seorang desainer harus memiliki setidaknya pengetahuan dasar tentang teknologi yang digunakan.

Cari tahu alur kerja desain bersama. Jangan hanya membabi buta mengimplementasikan apa yang dibuat oleh desainer Anda. Jadilah proaktif, dan ciptakan sesuatu yang terlihat indah dan memiliki pengalaman pengguna yang luar biasa, dengan memanfaatkan dua perspektif Anda yang berbeda. Desainer berpikir di luar kotak dan melihat animasi, ide, piksel, dan tombol yang gila, sementara pengembang melihat teknologi, kecepatan, dan batasan.

Dalam pengalaman saya, setiap desainer tergila-gila dengan piksel dan konsep menarik. Namun terkadang, seorang desainer sampai pada suatu titik ketika mereka memiliki ide, tetapi pengembang menolak dan berkata, “Ini tidak akan bekerja dengan baik setelah diimplementasikan. Akan ada masalah konsumsi kinerja”. Baru-baru ini, saya ingin menerapkan jendela modal dengan latar belakang buram, tetapi kekaburan ini menyebabkan waktu pemuatan yang berat. Untuk mengatasi masalah ini, pengembang menyarankan untuk menggunakan hamparan penuh warna biasa, yang memuat lebih cepat dan mempertahankan kualitas gambar. Desainer, perhatikan: Jangan kompromikan pengalaman pengguna untuk desain.

Putaran Umpan Balik

Umpan balik dari perancang sangat penting, dan itu harus terjadi sesering mungkin. Ini mungkin hal yang paling memakan waktu (dan energi) yang akan Anda lakukan. Tapi, Anda perlu mengadopsinya untuk bisa memberikan hasil yang sempurna. Berikut adalah beberapa tips kerja desain UX dan UI tentang cara membuat umpan balik Anda sempurna.

• Bersikaplah visual - Umpan balik harus sespesifik mungkin. Cara terbaik untuk membuatnya akurat adalah dengan mengambil tangkapan layar sederhana dan menyorot masalah yang ingin Anda perbaiki. Akan lebih baik jika Anda memiliki gambar implementasi saat ini vs bagaimana tampilannya . Komunikasi visual akan menghilangkan 50% pertanyaan.

• Bersikaplah deskriptif - Umpan balik harus akurat. Anda tidak bisa hanya mengatakan "pindahkan tombol ini ke atas". Perancang harus menentukan berapa banyak piksel yang harus dipindahkan oleh tombol, bantalan apa yang harus digunakan, dll. Selalu sertakan penjelasan masalah, dan solusi yang tepat untuk itu. Ini akan memakan banyak waktu, tetapi itu sepadan.

• Bersabarlah - Ingatlah bahwa perancang dan pengembang tidak memiliki fokus yang sama. Jika pengembang tidak sepenuhnya memahami ide seorang desainer, hal itu dapat menyebabkan kebingungan dan keputusan yang buruk. Dalam setiap kasus, kedua belah pihak harus sabar dan bersedia membantu anggota tim lainnya. Terkadang sangat sulit, tetapi ini adalah soft skill yang harus dipelajari oleh setiap desainer dan pengembang.

Cukup jelas bahwa hal-hal ini perlu digabungkan bersama untuk membuatnya menjadi alur kerja desain yang sesuai. Namun, alat apa yang benar-benar dapat membantu Anda menyampaikan umpan balik?

• Email - Saya tidak takut untuk mengatakan bahwa ini masih merupakan platform paling umum untuk menyampaikan umpan balik. Tidak apa-apa untuk menggunakannya, jika Anda mengikuti beberapa aturan sederhana.
  • Pertama, gunakan utas email tunggal untuk umpan balik Anda. Jangan menempatkan setiap tweak individu ke email baru dengan subjek yang berbeda.
  • Kedua, buat daftar perbaikan. Cobalah untuk duduk dan memikirkan setiap perubahan atau perbaikan yang Anda perhatikan.
  • Dan terakhir, jangan mengirim daftar besar sekaligus. Cobalah untuk memecahnya menjadi daftar individu yang lebih kecil dan pergi bagian demi bagian.

• Skype (Hangouts) - Suara adalah alat yang sangat ampuh untuk umpan balik. Anda dapat langsung bertanya dan menjawab pertanyaan. Tapi, pastikan untuk membuat catatan dan mengirimkan pesan tindak lanjut (email) setelah panggilan.

• Alat kolaborasi - Sejujurnya, saya bukan penggemar alat kolaborasi. Tapi, mereka memiliki manfaat besar. Mereka membantu Anda mempertahankan umpan balik. Mengajukan dan menjawab pertanyaan itu cepat, dan itu tetap ada selamanya.

Berikut adalah beberapa alat yang hebat:

Anotasi umpan balik:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Alat kolaborasi:

• http://www.invisionapp.com/
• https://basecamp.com/

Kesimpulan

Membangun sistem dan alur kerja desain UI/UX yang menjaga jalur komunikasi tetap terbuka selama proses desain dan pengembangan. Ini akan memungkinkan Anda untuk menerapkan ide-ide hebat, memperkirakan potensi masalah, dan memprioritaskan masalah penting.

Pengembang dan perancang dapat menciptakan hal-hal hebat bersama selama mereka mau bekerja sebagai sebuah tim . Belajar dari satu sama lain dan tutorial desain seperti ini!