Haruskah pengembang melakukan mockup UI jika tidak ada desainer dalam proyek ini?

57

Saya bekerja dengan tim kecil yang membuat aplikasi web berpemilik dan UX tidak terlalu menjadi prioritas karena orang-orang kami sendiri yang akan mengoperasikannya, tetapi kami berusaha membuat pekerjaan mereka lebih mudah.

Haruskah saya, sebagai pengembang, membuat mockup UI sebelum saya mulai membuat layar baru? Tidak ada yang terlalu mewah, kebanyakan tata letak umum untuk membicarakannya dengan kolega dan untuk memiliki model referensi. Saya membandingkannya dengan membuat beberapa diagram UML sebelum mempelajari penulisan kode secara membabi buta.

Salah satu rekan kerja saya mengatakan ini tidak masuk akal dan bukan pekerjaan saya untuk melakukan itu.

design modeling user-experience front-end Konstantine
sumber
51
Jika Anda tidak memiliki desainer, dan ini bukan pekerjaan pengembang, lalu siapa yang seharusnya melakukannya? Petugas kebersihan, mungkin?
GrandmasterB
10
Anda tentu bisa, mungkin Anda harus, tetapi itu jauh dari tidak biasa dan jelas bukan "tidak masuk akal" seperti yang dikatakan rekan kerja Anda yang terlalu dramatis. Tergantung pada situasi dan lingkungannya, Anda mungkin lebih baik melakukan mockup kasar yang disengaja daripada sesuatu yang terlihat seperti produk jadi. Balsamiq adalah alat yang bagus untuk ini, seperti halnya menggambar mockup Anda di atas kertas atau papan tulis.
Joe Ballard
3
Saya menganggap Anda benar-benar bermaksud "maket?" "Mock" adalah sesuatu yang lain .
Robert Harvey
23
Desain Pengalaman Pengguna melampaui membuat segala sesuatu terlihat cantik. Pemrogram harus sangat terlibat dengannya.
JeffO
2
apa yang tidak masuk akal adalah reaksi rekan kerja Anda. ini sangat umum
Claudiu Creanga

Jawaban:

74

Saya sangat sering bekerja di proyek-proyek seperti itu, dan jawabannya adalah YA tegas, dan sedini mungkin.

Orang-orang merasa jauh lebih mudah untuk mengkritik perbaikan rancangan daripada datang dengan solusi dari awal. Jadi saya mulai menyusun awal karena dua alasan:

  • Berikan kesan pada ahli materi tentang bagaimana informasi dapat disajikan.
  • Tunjukkan pemahaman saya saat ini tentang masalah dan struktur informasi.

Dalam kasus yang jarang terjadi, menyenangkan juga memiliki beberapa bukti bahwa saya telah benar-benar memberikan apa yang kami sepakati ...

Stefan Schmiedl
sumber
16
Dan jujur, jauh lebih mudah untuk menulis kode jika Anda memiliki setidaknya sketsa serbet di depan Anda.
Kathy
9
Butir 2) sangat penting jika bisnisnya tidak sepele!
bigstones
4
Sebagai seseorang yang melakukan UX bekerja selama 3 tahun, hanya memiliki sketsa untuk berbicara dengan orang (pengembang, klien, pengguna akhir) tentang sangat berguna dan penting. Ini akan menghemat BANYAK waktu di jalan ketika Anda tidak perlu sepenuhnya mengulangi situs karena seseorang menjadi frustrasi!
Gnomejon
39

Maket itu fantastis dan tidak ada alasan seorang dev seharusnya tidak melakukannya. (Bahkan dapat berguna bagi seorang dev untuk melakukan rancangan kasar tata letak UI bahkan ketika Anda memiliki desainer UI pada proyek tersebut.)

Saya sangat merekomendasikan Anda untuk tidak membuat maket yang terlihat seperti layar sebenarnya. Jika Anda membagikan ini dengan pengguna akhir yang sering berfokus pada hal-hal yang tidak penting seperti warna dan tema. Apa yang saya sarankan Anda lakukan adalah membuat sketsa tangan di kertas atau papan tulis. Atau jika Anda ingin mereka menggunakan komputer seperti Pencil Project atau Visio ( berikut adalah beberapa stensil Visio dari Jonathan Abbett yang terlihat digambar tangan.)

Matthew Whited
sumber
6
Anda bahkan dapat menggambar tangan overlay, dialog dll, memotongnya dengan gunting, dan menempatkannya di atas layar utama yang digambar tangan ketika pengguna menyentuh tombol digambar tangan. Sangat cepat untuk memberikan ide tentang apa yang mereka temukan secara intuitif, berapa banyak tombol yang sebenarnya Anda perlukan, dan sebagainya.
RemcoGerlich
Itu hanya pembicaraan gila ... benar-benar melakukan storyboard. Jalan ke sekolah lama untuk orang-orang baru ini: P
Matthew Whited
1
"Jangan membuat maket yang terlihat seperti layar sebenarnya" adalah wawasan yang sangat mendalam.
Andrew Myers
1
Saya ingat sebuah anekdot bahwa pengguna akan menilai penyelesaian suatu proyek dengan cara memoles tampilan tangkapan layar mereka. Untuk pengguna non-teknis seperti itu yang tidak membedakan antara presentasi dan fungsionalitas, membuat sketsa sangat penting untuk berkomunikasi "itu tidak dilakukan".
Matthieu M.
1
@Andrew ... itu salah satu hal yang saya pelajari ketika saya mengejek aplikasi di Access dan VB. Anda menunjukkan kepada seseorang sesuatu yang terlihat seperti tangkapan layar dan mereka berharap Anda dapat mengirimkannya :)
Matthew Whited
11

Ya, tentu saja.

Jangan biarkan orang lain memberi tahu Anda bagaimana melakukan pekerjaan Anda. Dan Anda benar, ini sangat mirip dengan melakukan UML untuk model data Anda. Dengan asumsi Anda adalah seorang pengembang, tugas Anda adalah memberikan perangkat lunak berkualitas. Jika maket membantu Anda melakukan itu, maka itu bagian dari pekerjaan Anda.

Lakukan mockup dengan kesetiaan rendah - jangan membuatnya terlihat seperti layar sungguhan. Anda akan menghabiskan terlalu banyak waktu untuk menyesuaikan font dan piksel serta batas, dan pengguna Anda akan terobsesi dengan detail seperti itu daripada fokus pada fungsionalitas. Sesuatu seperti balsamiq sangat bagus untuk ini, tidak ada keraguan alat serupa lainnya. Dengan mockup di tangan, menjadi lebih mudah untuk mendiskusikan fitur-fitur proyek dengan pengguna Anda dan dengan anggota tim pengembangan lainnya.

Bryan Oakley
sumber
Tentu saja seperti yang Anda katakan saya sedang berbicara tentang maket kesetiaan yang rendah. Saya pribadi menggunakan draw.io sebagai solusi super ringan dan untuk berbagi yang mudah di antara kolega.
Konstantine
10

Saat merancang "layar baru", Anda ingin mendiskusikan gagasan kasar UI terlebih dahulu dengan pengguna dan / atau kolega Anda. Anda tidak dapat membicarakan hal ini dengan pengguna "dalam kode" atau "dalam UML", yang tidak berfungsi (bahkan tidak akan berfungsi di antara pemrogram). Dan Anda harus berharap bahwa Anda perlu membuang dua atau tiga sketsa pertama Anda, atau setidaknya mengatur ulang elemen UI dengan berat.

Jadi, jika Anda memiliki alat desain UI grafis yang memungkinkan Anda melakukan ini dengan cepat, masuk akal untuk menggunakannya. Namun, jika Anda perlu kode elemen UI secara manual, dan membuang atau menata ulang elemen UI membutuhkan banyak usaha, maka jelas lebih masuk akal untuk tidak "kode" UI terlebih dahulu. Akan jauh lebih efisien untuk membuat maket terpisah, baik dengan menggunakan alat gambar grafis, atau hanya dengan menggunakan pensil dan kertas.

Doc Brown
sumber
5

Belum tentu. Setidaknya ada dua alasan mengapa maket mungkin tidak banyak berguna.

Pertama, jika ada praktik industri yang mapan mengenai melakukan hal-hal yang akan Anda lakukan, Anda bisa melanjutkan dan melakukan hal itu. Anda tidak akan mengedepankan seni desain UI, tetapi itu juga bagus.

Kedua, pengguna akhir Anda sering tidak tahu apa yang baik untuk mereka, dan mengapa demikian. Mereka hanya tidak tahu sampai mereka mulai menggunakan program (dengan data aktual atau mock). Tidak ada jumlah mockup statis yang akan membantu.

Dengan kerangka kerja web yang cukup fleksibel, untuk "hanya layar UI lain, seperti layar N sebelumnya", Anda dapat mulai dengan prototipe yang berfungsi dan mengatur ulang sesuai keinginan. Lakukan mockup dan diskusikan dengan rekan kerja kapan pun Anda akan melakukan sesuatu yang mewah.

Eugene Ryabtsev
sumber
Semi-benar tentang pengguna akhir tidak tahu yang terbaik. Tetapi Anda bahkan tidak dapat dengan jujur ​​mengatakan Anda tahu apa yang terbaik sampai Anda melihat tata letak dan aliran aplikasi. Masalah terbesar dengan menggunakan UI sebagai mockup adalah harapan yang Anda atur. Orang-orang melihat sesuatu dan mengeluh tentang hal-hal kecil yang tidak penting atau hanya bertanya-tanya mengapa Anda begitu lama melakukan hal lain.
Matthew Whited
@MatthewWhited Apakah mereka mengeluh tentang hal-hal kecil ketika Anda datang untuk membahas UI atau apakah mereka mengeluh tentang hal itu ketika Anda mengusulkan untuk menggunakan produk untuk menyelesaikan tugas mereka? Saya lebih suka kasus selanjutnya akan lebih konstruktif, dan ini cocok untuk aplikasi web in-house dengan basis terpasang 1.
Eugene Ryabtsev
3

SELALU!

Saya bekerja untuk perusahaan kecil, dan saya satu-satunya orang IT "Lembut". Saya melakukan semua persyaratan, desain, pengkodean, pengujian (meskipun seseorang selalu memvalidasi pengujian saya), desain basis data dll.

JANGAN PERNAH MEMOTONG CANGGA DI LANGKAH DESAIN - pengguna akhir Anda akan berterima kasih. Anda juga akan berterima kasih kepada diri Anda sendiri, karena Anda AKAN akhirnya akan bekerja kembali untuk membuat pengguna akhir senang. Bahkan jika maket Anda tidak lebih dari selembar kertas tangan, itu memberi mereka ide tentang apa yang diharapkan. Mengambil 10 menit untuk mencoret-coret sesuatu dapat menghemat waktu kerja satu minggu (pernah ke sana, melakukan itu)

Ini juga membantu Anda dalam coding Anda. Ini memberi Anda kesempatan untuk berpikir tentang apa yang perlu Anda lakukan, cara paling efisien untuk mencapainya, dan segala hambatan yang mungkin menghalangi.

Misalnya, Anda mungkin menemukan bahwa laporan "sederhana" yang perlu Anda buat lebih sulit daripada yang Anda duga sebelumnya karena Anda tidak menangkap beberapa tanggal pada tabel xyz. Ini juga memperluas cakrawala Anda dan menunjukkan tim Anda, atasan, atau bahkan dapat digunakan untuk peluang karir masa depan yang potensial yang Anda lakukan lebih dari batas minimum dan dapat keluar dari kotak "itu bukan pekerjaan saya" (<--- serius, JANGAN menjadi pria itu, kita semua membencinya) atau itu memberi Anda kesempatan untuk belajar tambahan.

Jon Milliken
sumber
2

Mari kita lihat ini secara lebih umum:

  • Apakah membuat konsep merupakan ide yang bagus?
  • Siapa yang harus membuat konsep?

Apakah membuat konsep merupakan ide yang bagus?

Membuat draft terutama memberikan 2 manfaat. Pertama, ini memberikan fokus, yang mengarah ke percepatan dalam pekerjaan aktual yang sedang dilakukan. Kedua, itu membuat mendiskusikan arah pekerjaan sebelum pekerjaan selesai jadi lebih sederhana.

Kelemahan dari membuat konsep adalah bahwa ia menggunakan waktu. Tidak masuk akal untuk menghabiskan 2 jam untuk membuat konsep yang rumit untuk sesuatu yang membutuhkan waktu 4 jam untuk dibuat.

Dalam kasus Anda, tingkat mockup perlu memperhitungkan taksiran jumlah pekerjaan yang masuk ke dalam proyek, dan manfaat rancangan. Tergantung pada ini, mockup Anda dapat berada di mana saja antara coretan 10 detik pada post-it dan situs web yang sepenuhnya interaktif. Untuk proyek yang sangat besar dan mahal, tidak jarang seluruh tim mengerjakan draft selama berminggu-minggu dan membuat draft draft mereka saat melakukan itu.

Siapa yang harus membuat konsep?

Tidak perlu jawaban yang rumit di sini: Jika Anda mendapat manfaat dari membuat konsep, Anda membuat konsep. Jika Anda mendapat manfaat dari orang lain yang membuat konsep untuk Anda, minta orang lain untuk membuat konsep untuk Anda.

Peter
sumber
Poin yang sangat bagus tentang pentingnya membandingkan waktu pembuatan. Tidak ada gunanya menggandakan waktu yang dibutuhkan hanya karena kami membuat konsep.
Konstantine
-2

Kolega Anda benar sekali. Aplikasi internal umumnya memiliki tampilan standar. Juga untuk aplikasi semacam itu, pengguna tidak mencari UI mutakhir. Yang mereka inginkan adalah sesuatu yang berfungsi dan cukup mudah digunakan. Kecuali jika Anda berencana untuk secara radikal mengubah UI (yang saya akan sangat menyarankan .... untuk aplikasi internal), cukup ikuti tampilan dan nuansa yang ada. Mock-up itu bagus, tetapi dalam kasus Anda, hanya akan meningkatkan rasa sakit Anda.

Kshitij Upadhyay
sumber
1
Mockup bukan untuk membuat UI canggih, mereka untuk mengejek tata letak dan perilaku layar. Bahkan dalam banyak kasus, mereka benar-benar tidak cantik. Saya hanya tidak setuju
Kieren Johnstone
3
Saya menemukan maket berguna untuk aplikasi internal tertentu yang saya kembangkan. Idenya bukan untuk mendesain tampilan atau menciptakan paradigma UI baru (seperti yang Anda katakan, ini tidak diperlukan), tetapi untuk menggoda para pengguna tentang apa persyaratannya, karena UI memberi Anda sesuatu yang konkret untuk dibahas.
James_pic
@KierenJohnstone, saya sepenuhnya setuju dengan Anda. Namun dia sendiri mengatakan bahwa "UX tidak terlalu menjadi prioritas". Kecuali jika ia adalah anggota tim yang cukup senior, ganjarannya tidak akan cocok dengan upaya (menciptakan mock-up). Mock-up itu bagus. Tetapi tidak dalam situasinya.
Kshitij Upadhyay
Saya tidak setuju - maket benar-benar berguna dalam situasi ini - dalam kebanyakan situasi - untuk melihat bagaimana aplikasi akan bekerja, jika itu masuk akal, dan jika persyaratan dipahami oleh pengembang - sebelum bagian yang mahal terjadi (penulisan kode)
Kieren Johnstone
1
Tim kami adalah sekitar 3 orang. Ada satu anggota senior / pemimpin tim, dan saya dan seorang lelaki lain yang telah dikontrak untuk mengerjakan proyek tersebut. Draf ini terutama dilakukan untuk membahas layar baru dengan pemimpin tim. Juga tidak ada tampilan yang telah ditentukan karena seluruh titik layar baru adalah untuk meningkatkan yang sudah ada yang menyakitkan untuk digunakan, jadi semuanya harus dilakukan kembali.
Konstantine