Bagaimana saya harus membuat prototipe UI lo-fi (non-interaktif)?

Saat ini saya sedang bekerja untuk mengumpulkan beberapa prototipe dasar, sebagian untuk mengumpulkan persyaratan dan sebagian untuk merancang UI akhir.

Saat ini saya sedang mencoba membangun layar menggunakan Post-it note, dengan catatan kuning untuk informasi dan pink untuk tindakan (tombol atau menu). Gagasannya adalah Anda dapat dengan mudah memindahkan, menghapus, dan menambahkan informasi. Tapi saya yakin ada metode yang lebih efisien di luar sana.

Apa cara yang disarankan bagi pengembang untuk secara efisien membuat prototipe UI non-interaktif?

Dan mengapa?

Saya mencoba beberapa versi pena, kertas, dan Post-it note dan jatuh seperti balon utama (kemungkinan keterampilan menggambar saya). Pada akhirnya saya menggunakan Balsamiq , yang sejauh ini disukai oleh sebagian besar pengguna dan mereka mendapatkannya adalah prototipe. Sayangnya, beberapa orang masih mengalami masalah dengan gagasan bahwa yang pertama harus mendapatkan gagasan tentang apa yang harus dilakukan aplikasi melalui beberapa prototipe lo-fi dan benar-benar ingin "melihat sesuatu di layar" sebelum melakukan apa pun.

Saya lebih suka papan tulis.

Itu membuatnya mudah untuk berubah saat Anda membuat keputusan tanpa menggambar ulang semuanya. Sangat mudah untuk dibagikan dengan pengembang (terdekat) lainnya. Mudah untuk membuat catatan menggunakan catatan tempel atau warna lain.

Balsamiq mockup biasanya merupakan tempat panggilan pertama, hampir secepat menggunakan pena dan kertas dan dapat digunakan kembali.

Plus, Anda dapat menambahkan beberapa tingkat interaktivitas jika diinginkan, misalnya dengan menghubungkan halaman bersama.

http://balsamiq.com/

Proyek Pensil adalah addin Firefox yang melakukan mockup yang bagus dan sederhana.

Pencil menyediakan beragam koleksi bentuk bawaan untuk menggambar berbagai jenis antarmuka pengguna mulai dari desktop hingga platform seluler. Mulai dari 2.0.2, Pensil dikirim dengan stensil Android dan iOS UI pra-instal. Ini membuatnya lebih mudah untuk mulai membuat aplikasi dengan instalasi sederhana.

Fitur gambar populer juga diterapkan dalam Pensil untuk menyederhanakan operasi menggambar ...

Saya menggunakan kombinasi MS Paint dan Visual Studio. Saya menggunakan VS untuk menarik / melepas semua kontrol yang saya inginkan ke formulir, lalu screenshot ke dalam cat MS untuk mengatur ulang mereka sampai saya suka cara tampilannya.

Dengan cara ini saya dapat menggunakan alat yang sederhana, akrab, gratis, dan selalu dapat diakses (bagi saya) untuk mengejek UI saya, dan klien dapat melihat UI karena mungkin akan terlihat setelah aplikasi selesai. Selain itu, seringkali VS akhirnya berisi awal dari proyek saya untuk saya.

Sunting: Jawaban Toby membawa saya ke Balsamiq , dan itu sekarang menjadi alat utama pilihan saya untuk maket UI untuk disajikan kepada orang lain.

Saya masih mengeluarkan MSPaint atau pena / kertas pada kesempatan tertentu, tetapi itu biasanya hanya ketika saya membuat sketsa desain UI dasar untuk referensi saya sendiri, atau jika saya ingin menghadirkan kepada klien dua opsi untuk layar yang telah dilengkapi (mis. "Apakah Anda ingin tombol Di Sini atau Di Sini? " )

Kedengarannya seperti Anda menggunakan metode yang baik, tetapi Anda menghadapi perlawanan karena orang-orang menerima kegunaan prototyping cepat. Semua orang suka kode, tetapi jika setengah jam masuk, mereka masih bertarung dengan JScrollBars dan Anda telah menghasilkan 12 maket, mereka mungkin mengerti bahwa kekuatan alat-alat ini ada dalam iterasi yang cepat .

Yang sedang berkata, berbagai pendekatan fi rendah memiliki kekuatan yang berbeda:

• Pembuatan prototipe papan tulis bermanfaat karena siapa saja dapat berpartisipasi dan ini membantu ide-ide dasar, tetapi itu hanya alat diskusi. Anda ingin sesuatu selangkah lebih maju jika Anda akan beralih pada desain, jika hanya karena sulit untuk menghapus penanda lama. ;)

• Pembuatan prototipe kertas bermanfaat karena orang-orang memahaminya tidak kekal dan terbuka untuk berubah, dan Anda dapat beralih dengan cepat, dan Anda masih bisa mendapatkan hasil yang sangat baik. Lakukan tes kegunaan dengan beberapa pengguna pada prototipe kertas dan Anda bisa mendapatkan umpan balik yang bagus pada desain dengan sangat cepat, dengan biaya yang cukup rendah. Orang-orang benar-benar terlibat ketika mereka dapat melihat dan merasakan antarmuka di atas kertas.

• Balsamiq adalah jalan pintas untuk membuat prototipe kertas dengan cepat yang dapat digunakan kembali. Saya mencetak tangkapan layar dan menggunakannya sebagai prototipe kertas. Saya juga menggunakannya selama rapat untuk membantu membuat ide seperti yang kita miliki - mirip dengan prototipe papan tulis. Saya juga menggunakan Visio dan OmniGraffle untuk ini.

• Potong dan rekatkan prototipe yang baik untuk iterasi pada desain yang ada - ambil screenshot, potong dalam editor gambar, dan campur dan cocokkan dengan kontrol baru (dari Balsamiq atau di tempat lain). Sekali lagi tujuan Anda adalah iterasi cepat dari prototipe, bukan sesuatu yang terlihat bagus.

Saya tidak pernah melakukan prototipe dengan pengguna. Saya melakukannya dengan tim desain, berdasarkan data pengguna yang kami miliki. Pengguna bukan desainer ; jika Anda memperlakukan mereka sebagai desainer, Anda akan berakhir dengan saus tomat encer, kopi pahit (terima kasih Malcolm Gladwell), dan The Homer car. Kumpulkan input pengguna untuk desain Anda dan gunakan untuk menyempurnakan desain dengan tim desain.

Mock-up pertama saya selalu pensil & kertas atau papan tulis, tapi begitu dasar-dasarnya dipaku saya biasanya pindah ke HTML. Saya memiliki banyak gambar placeholder yang hanya mengatakan "Header", "Banner", "Image", "Chart" dan sejenisnya. Beberapa CSS sederhana untuk meletakkan hal-hal yang agak masuk akal dan saya sudah selesai. Sebuah JS kecil yang ditempel pada kontrol dapat memberi Anda beberapa fungsi, dan orang-orang sepertinya "mengerti" dengan lebih baik.

Satu-satunya masalah dengan ini adalah bahwa saya mungkin desainer UI hidup terburuk di dunia, dan kadang-kadang harus mengingatkan orang-orang bahwa saya hanya memenuhi persyaratan, tidak menunjukkan kepada mereka seperti apa bentuknya. Saya sering mengatur latar belakang menjadi merah muda atau sesuatu, jadi setiap kali ada yang bertanya, "Apakah harus berwarna merah muda?" Saya dapat menjawab dengan "Ini hanya mock-up, hal yang nyata akan terlihat berbeda" (atau "Anda harus mendiskusikannya dengan desainer").

Saya menggunakan pena dan kertas terlebih dahulu, lalu setelah menggambar UI beberapa kali dengan cepat, saya mencoba membuatnya di powerpoint 2 atau 3 kali. Memiliki 5 atau 6 iterasi sebelum masuk ke editor aktual membantu saya mengurangi UI yang tidak bisa dijalankan (seperti menghasilkan konten Y berdasarkan kotak teks X ketika pengguna bahkan belum melihat X). Saya melihatnya sebagai peluang untuk segera keluar dari kebodohan.

Pena & kertas / papan tulis, dan Anda juga dapat menggunakan Visio atau yang serupa (Visio dilengkapi dengan templat UI untuk kontrol umum). Kadang-kadang saya mengambil bidikan dari UI (mirip) yang ada yang kami miliki dan memotong dan menempelkan UI baru ke atasnya menggunakan program cat seperti Paint.NET.

Saya telah melakukan prototyping cepat di Delphi beberapa kali. Ini membuatnya mudah untuk dengan cepat menyatukan tata letak layar, jauh lebih cepat daripada di powerpoint atau visio. Exe yang dihasilkan dapat dilampirkan ke email tanpa memerlukan dependensi. Karena saya menggunakannya untuk membuat prototipe aplikasi web, tidak ada bahaya orang membingungkan prototipe dengan versi setengah jadi.

Saya sudah mencoba melakukan hal yang sama dengan Sencha Ext Designer, tetapi sistem tata letak Ext JS lebih sulit untuk digunakan, dan rasanya lebih seperti sebuah beban daripada kenyamanan untuk dengan cepat beralih ide.

Saya tidak selalu menggunakan pendekatan yang sama. Beberapa teknik yang saya gunakan adalah (dalam urutan frekuensi kasar):

• Papan tulis (untuk membuat prototipe secara interaktif / berdiskusi. Ambil foto sesudahnya!)

• Perancang GUI gaya RAD (Visual Studio, NetBeans, Delphi)

  • Jadilah ahli dalam hal ini, dan itu benar-benar dapat menjadi salah satu cara tercepat untuk membuat prototipe aplikasi "windows, widget, dan form". Bonus: prototipe dapat terlihat sangat profesional, tergantung seberapa cepat Anda membuangnya. Mereka kadang-kadang bahkan dapat berfungsi sebagai titik peluncuran untuk menciptakan hal yang nyata, setelah prototipe disetujui.
    
    

• Kertas dan pena / pensil (biasanya untuk brainstorming sendiri)

• File HTML / CSS / JS statis pada disk

  • Saya membayangkan aplikasi desain WYSIWYG tidak ada salahnya di sini, tapi saya biasanya hanya meretas HTML mentah. Saya tidak banyak melakukan ini.
    
    

• Alat menggambar vektor - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Alat grafik raster - Photoshop / Gimp

• ASCII art ;-)