Metode, Tips dan Trick untuk Prototyping yang Efektif
Prototyping adalah di mana semua pekerjaan fase penemuan yang telah kami lakukan hingga saat ini bersatu. Ini adalah manifestasi pertama dari brief proyek, persona pengguna, cerita pengguna & kriteria penerimaan, audit penemuan, arsitektur informasi, dan perjalanan pengguna. Kami mengambil semua pekerjaan ini dan mengubahnya menjadi antarmuka pengguna awal (UI) untuk situs web / aplikasi yang sedang kami bangun.
Ingat, kita tahu layar yang harus kita prototipe karena arsitektur informasinya. Kami percaya diri dalam iA karena dirancang bersama dengan perjalanan pengguna dan kisah pengguna, yang diinformasikan oleh para persona.
Pada akhirnya, prototipe adalah tentang fungsionalitas, tata letak, dan hierarki produk terlebih dahulu. Formulir datang kemudian. Mereka dirancang untuk efisiensi dan percakapan, sehingga kami dapat mengevaluasi dan merevisi UI terhadap persona, cerita pengguna, kendala teknis, KPI dan sejenisnya.
Kami memasukkan mereka dalam fase penemuan karena prototipe sering mengungkap beberapa persyaratan lagi, kendala teknis, dan pertimbangan sebelum menuju ke siklus Desain & Bangun. Mereka sering berakhir memunculkan pemahaman baru di sekitar cerita dan fungsionalitas pengguna. Misalnya, Anda dapat membuat sketsa UI untuk pencari dokumen yang mencakup kemampuan untuk mencari dokumen yang diterbitkan oleh penulis tertentu dalam rentang tanggal dan dalam jenis file tertentu. Fungsionalitas itu mungkin belum ditangkap dalam kriteria penerimaan untuk cerita pengguna itu - tetapi sekarang kami telah menangkapnya, berkat prototipe, dan memperbarui kriteria penerimaan untuk menerimanya.
Penemuan di atas mengubah tingkat upaya dan rencana pengiriman, dan itu hanya satu contoh mengapa prototipe harus menjadi bagian dari fase penemuan.
Jawaban singkatnya adalah: format apa pun yang mewakili nilai terbaik. Jawaban yang lebih bermanfaat sedikit lebih lama. Mari kita bicara tentang prototipe format umum dapat masuk, dari upaya terendah ke tertinggi, dan ketika mereka sering paling berguna.
Kami berbicara sketsa kertas dan pensil literal di sini. Prototipe kertas adalah kesetiaan terendah, cara tercepat untuk memetakan UI - dan seringkali, itu adalah jawaban terbaik. Apa pun yang terjadi, kami selalu mulai dengan sketsa pensil di Paper Leaf - sangat banyak sehingga kami telah menyediakan beberapa templat sketsa UI yang dapat dicetak tersedia untuk Anda di bawah ini. Anda dapat mengunduh dan mencetak file - yang berisi kisi-kisi dan placeholder untuk ponsel, tablet, dan desktop - lalu membuat sketsa sesuai isi hati Anda, dalam konteks perangkat tempat Anda membuat prototipe. Kami menggunakan yang sama.
Seperti yang kami sarankan mulai dengan kertas dan pensil untuk perjalanan pengguna karena Anda kemungkinan akan melakukan banyak perubahan, kami sarankan Anda mulai dengan kertas dan pensil untuk prototipe karena alasan yang sama.
Terkadang - untuk situs web yang lebih mudah - hanya sketsa pensil yang diperlukan. Untuk proyek tertentu, kami telah beralih dari sketsa pensil ke pengembangan dan perusahaan desain dengan kesetiaan tinggi. Bersamaan dengan hal-hal lain dalam fase penemuan, mereka seringkali berakhir dengan memunculkan pemahaman baru seputar cerita dan fungsionalitas pengguna.
Baik Anda bekerja dengan tim internal atau menyewa agen, memberikan sketsa kasar - dengan asumsi prototipe UI ada di ruang kemudi Anda, bijaksana-keterampilan - membantu lebih lanjut mengomunikasikan maksud dan harapan Anda sambil secara bersamaan memicu percakapan kolaboratif. Misalnya, beberapa klien telah memberikan kami sketsa di masa lalu, yang memberi kami titik awal yang baik dalam estimasi untuk proyek, atau dalam fase Desain & Bangun aktual.
Yang berikutnya berbunyi di tangga kesetiaan, ketika datang ke prototipe, adalah apa yang kami beri nama wireframes statis. Pada dasarnya, ini adalah mockup UI non-interaktif, rendah / tanpa warna - pikirkan kotak abu-abu dan teks. Saat kami memberikan gambar rangka statis, kami membuatnya di alat desain UI kami (secara membingungkan disebut Sketch).
Gambar rangka statis adalah jalan tengah yang bagus ketika sketsa pensil terlalu rendah kesetiaan untuk proyek, tetapi prototipe HTML / CSS berlebihan. Misalnya, untuk situs web yang lebih besar yang lebih banyak tentang penemuan dan konsumsi konten, kami akan menggunakan gambar rangka statis. Untuk aplikasi web dan aplikasi seluler, kami akan pindah ke prototipe HTML / CSS.
Gambar rangka statis memberikan beberapa manfaat tambahan:
Pada poin terakhir: menggunakan alat seperti InVision untuk membuat prototipe yang dapat diklik sangat menarik dan terkadang membantu, tetapi seringkali kita merasa ini lebih padat karya dan kurang otentik daripada hanya membuat prototipe dalam HTML / CSS. Secara anekdot, kami telah menemukan bahwa kami menerima umpan balik yang jauh lebih bermanfaat tentang prototipe yang dapat diklik saat menggunakan HTML / CSS versus 'berpura-pura' dengan alat desain lainnya.
HTML / CSS prototipe mewakili upaya yang paling realistis, upaya tertinggi pada tangga prototipe. Mereka paling baik digunakan untuk prototipe aplikasi (seluler atau web) daripada prototipe situs web. Terutama, itu karena aplikasi umumnya lebih banyak tentang interaksi pengguna dan penyelesaian tujuan (mis. Mencatat tiket, mengunggah foto) dibandingkan dengan situs web standar.
Kelemahan dari prototipe HTML / CSS adalah bahwa mereka membutuhkan pengetahuan bahasa untuk memproduksinya (meskipun ini berubah dengan alat seret-dan-jatuhkan seperti Adobe Edge Reflow dan Webflow), dan mereka bisa menjadi usaha yang lebih tinggi dan dengan demikian lebih tinggi- biaya.
Namun, mereka memberikan beberapa manfaat utama:
Sama seperti segala sesuatu yang lain dalam tahap penemuan hingga saat ini, prototipe perlu tidak hanya diproduksi, tetapi diuji terhadap apa yang kita ketahui. Secara umum, inilah cara kami melakukannya, dan bagaimana Anda mungkin ingin menanganinya juga:
Secara keseluruhan, membuat prototipe bisa sangat mudah. Namun, kualitas dan efektivitas prototipe itu sendiri sebagian besar terletak pada proses, pelaksanaan, dan keahlian siapa pun yang memproduksi prototipe tersebut. Ketika dilakukan dengan benar, prototipe adalah bagian yang sangat penting untuk membongkar dan membangun produk digital berkualitas tinggi.
Prototipe juga merupakan langkah terakhir dalam Fase Penemuan kami untuk proyek digital. Jika Anda telah menyelesaikan setiap langkah di sepanjang jalan, Anda akan memiliki pemahaman yang komprehensif dan berpendidikan tentang apa yang produk digital Anda butuhkan untuk menjadi sukses. Jika Anda menyewa agen, ini adalah segalanya yang diperlukan untuk membuat estimasi informasi tentang proyek. Jika Anda bekerja secara internal, tim pengembangan Anda akan menghargai kejelasan tentang kebutuhan. Dan jika Anda tidak menyelesaikan setiap langkah, untuk waktu atau alasan lain, ada nilai dalam setiap kemajuan yang dibuat. Langkah-langkah lainnya masih harus diselesaikan, tentu saja, tetapi mereka dapat ditangani oleh anggota lain dari tim proyek atau agen. Semoga berhasil!
Ingat, kita tahu layar yang harus kita prototipe karena arsitektur informasinya. Kami percaya diri dalam iA karena dirancang bersama dengan perjalanan pengguna dan kisah pengguna, yang diinformasikan oleh para persona.
Mengapa Prototipe?
Pada akhirnya, prototipe adalah tentang fungsionalitas, tata letak, dan hierarki produk terlebih dahulu. Formulir datang kemudian. Mereka dirancang untuk efisiensi dan percakapan, sehingga kami dapat mengevaluasi dan merevisi UI terhadap persona, cerita pengguna, kendala teknis, KPI dan sejenisnya.
Kami memasukkan mereka dalam fase penemuan karena prototipe sering mengungkap beberapa persyaratan lagi, kendala teknis, dan pertimbangan sebelum menuju ke siklus Desain & Bangun. Mereka sering berakhir memunculkan pemahaman baru di sekitar cerita dan fungsionalitas pengguna. Misalnya, Anda dapat membuat sketsa UI untuk pencari dokumen yang mencakup kemampuan untuk mencari dokumen yang diterbitkan oleh penulis tertentu dalam rentang tanggal dan dalam jenis file tertentu. Fungsionalitas itu mungkin belum ditangkap dalam kriteria penerimaan untuk cerita pengguna itu - tetapi sekarang kami telah menangkapnya, berkat prototipe, dan memperbarui kriteria penerimaan untuk menerimanya.
Penemuan di atas mengubah tingkat upaya dan rencana pengiriman, dan itu hanya satu contoh mengapa prototipe harus menjadi bagian dari fase penemuan.
Dalam Format Apa Prototipe Saya?
Jawaban singkatnya adalah: format apa pun yang mewakili nilai terbaik. Jawaban yang lebih bermanfaat sedikit lebih lama. Mari kita bicara tentang prototipe format umum dapat masuk, dari upaya terendah ke tertinggi, dan ketika mereka sering paling berguna.
Sketsa
Kami berbicara sketsa kertas dan pensil literal di sini. Prototipe kertas adalah kesetiaan terendah, cara tercepat untuk memetakan UI - dan seringkali, itu adalah jawaban terbaik. Apa pun yang terjadi, kami selalu mulai dengan sketsa pensil di Paper Leaf - sangat banyak sehingga kami telah menyediakan beberapa templat sketsa UI yang dapat dicetak tersedia untuk Anda di bawah ini. Anda dapat mengunduh dan mencetak file - yang berisi kisi-kisi dan placeholder untuk ponsel, tablet, dan desktop - lalu membuat sketsa sesuai isi hati Anda, dalam konteks perangkat tempat Anda membuat prototipe. Kami menggunakan yang sama.
Seperti yang kami sarankan mulai dengan kertas dan pensil untuk perjalanan pengguna karena Anda kemungkinan akan melakukan banyak perubahan, kami sarankan Anda mulai dengan kertas dan pensil untuk prototipe karena alasan yang sama.
Terkadang - untuk situs web yang lebih mudah - hanya sketsa pensil yang diperlukan. Untuk proyek tertentu, kami telah beralih dari sketsa pensil ke pengembangan dan perusahaan desain dengan kesetiaan tinggi. Bersamaan dengan hal-hal lain dalam fase penemuan, mereka seringkali berakhir dengan memunculkan pemahaman baru seputar cerita dan fungsionalitas pengguna.
Baik Anda bekerja dengan tim internal atau menyewa agen, memberikan sketsa kasar - dengan asumsi prototipe UI ada di ruang kemudi Anda, bijaksana-keterampilan - membantu lebih lanjut mengomunikasikan maksud dan harapan Anda sambil secara bersamaan memicu percakapan kolaboratif. Misalnya, beberapa klien telah memberikan kami sketsa di masa lalu, yang memberi kami titik awal yang baik dalam estimasi untuk proyek, atau dalam fase Desain & Bangun aktual.
Static Wireframes
Yang berikutnya berbunyi di tangga kesetiaan, ketika datang ke prototipe, adalah apa yang kami beri nama wireframes statis. Pada dasarnya, ini adalah mockup UI non-interaktif, rendah / tanpa warna - pikirkan kotak abu-abu dan teks. Saat kami memberikan gambar rangka statis, kami membuatnya di alat desain UI kami (secara membingungkan disebut Sketch).
Gambar rangka statis adalah jalan tengah yang bagus ketika sketsa pensil terlalu rendah kesetiaan untuk proyek, tetapi prototipe HTML / CSS berlebihan. Misalnya, untuk situs web yang lebih besar yang lebih banyak tentang penemuan dan konsumsi konten, kami akan menggunakan gambar rangka statis. Untuk aplikasi web dan aplikasi seluler, kami akan pindah ke prototipe HTML / CSS.
Gambar rangka statis memberikan beberapa manfaat tambahan:
- Mereka dapat dengan mudah disajikan di browser atau di perangkat - meniru konteks pengguna yang sebenarnya berinteraksi dengan produk
- Mereka sering dapat dibuat sangat cepat mengingat proliferasi kit bingkai gambar yang tersedia
- Stakeholder dapat membagikan file dengan mudah, dan jika Anda menggunakan sesuatu seperti InVision, komentari langsung file itu sendiri
- Mereka dapat diubah menjadi prototipe yang dapat diklik melalui alat pihak ke-3 seperti InVision atau Marvel
Pada poin terakhir: menggunakan alat seperti InVision untuk membuat prototipe yang dapat diklik sangat menarik dan terkadang membantu, tetapi seringkali kita merasa ini lebih padat karya dan kurang otentik daripada hanya membuat prototipe dalam HTML / CSS. Secara anekdot, kami telah menemukan bahwa kami menerima umpan balik yang jauh lebih bermanfaat tentang prototipe yang dapat diklik saat menggunakan HTML / CSS versus 'berpura-pura' dengan alat desain lainnya.
HTML / CSS Prototypes
HTML / CSS prototipe mewakili upaya yang paling realistis, upaya tertinggi pada tangga prototipe. Mereka paling baik digunakan untuk prototipe aplikasi (seluler atau web) daripada prototipe situs web. Terutama, itu karena aplikasi umumnya lebih banyak tentang interaksi pengguna dan penyelesaian tujuan (mis. Mencatat tiket, mengunggah foto) dibandingkan dengan situs web standar.
Kelemahan dari prototipe HTML / CSS adalah bahwa mereka membutuhkan pengetahuan bahasa untuk memproduksinya (meskipun ini berubah dengan alat seret-dan-jatuhkan seperti Adobe Edge Reflow dan Webflow), dan mereka bisa menjadi usaha yang lebih tinggi dan dengan demikian lebih tinggi- biaya.
Namun, mereka memberikan beberapa manfaat utama:
- Dilakukan dengan benar, kode yang dihasilkan dapat digunakan untuk maju ke siklus Desain & Bangun (jadi ada sedikit pengerjaan ulang atau pekerjaan yang sia-sia)
- Mereka mewakili 'keadaan akhir' yang paling akurat dari produk, yang penting ketika menguji prototipe untuk validitas
- Mereka dapat dengan cepat diperbarui, misalnya berdasarkan umpan balik, jika terstruktur dengan benar; dan terakhir,
- Kami telah menemukan prototipe HTML / CSS untuk memperoleh umpan balik yang jauh lebih berguna daripada metode prototipe lainnya saat digunakan untuk aplikasi web dan seluler.
Memproduksi & Menguji Prototipe
Sama seperti segala sesuatu yang lain dalam tahap penemuan hingga saat ini, prototipe perlu tidak hanya diproduksi, tetapi diuji terhadap apa yang kita ketahui. Secara umum, inilah cara kami melakukannya, dan bagaimana Anda mungkin ingin menanganinya juga:
- Gunakan arsitektur informasi bersamaan dengan perjalanan pengguna untuk mencari tahu layar mana yang akan prototipe. Jangan membuat prototipe setiap layar kecil di aplikasi atau situs web - peluangnya adalah 20% layar akan menghasilkan 80% dari nilai.
- Sketsa layar-layar itu di atas kertas (gunakan templat sketsa kertas gratis kami jika Anda mau). Jika Anda menyukai organisasi, tulis ID layar dari dokumen iA di sebelah layar yang Anda buat sketsa, sehingga Anda dapat dengan mudah melakukan referensi silang.
- Pilih perjalanan pengguna, lalu jalankan melalui layar untuk menyelesaikan perjalanan itu (atau jika pengguna yang sebenarnya tersedia, minta mereka untuk melakukannya, ajukan pertanyaan dan amati). Ketika kita mengatakan 'jalankan melalui', itu bisa secara mental, atau Anda benar-benar dapat memotong sketsa dan mengacak setiap layar satu per satu, meniru perjalanan dengan kertas.
- Cari inefisiensi, kebingungan, dan peluang umum untuk meningkatkan perjalanan pengguna. Peningkatan itu bisa sebesar mengulang seluruh bagian atau layar, atau sesederhana membuat tombol sedikit lebih besar.
- Perbaiki sketsa dan tes ulang.
- Jika nilainya ada di sana, dan Anda memiliki keterampilan teknis, buatlah mereka sedikit lebih tinggi kesetiaannya dengan mengubahnya menjadi gambar rangka statis atau prototipe HTML / CSS. Atau, jangan. Kamu lakukan kamu
Secara keseluruhan, membuat prototipe bisa sangat mudah. Namun, kualitas dan efektivitas prototipe itu sendiri sebagian besar terletak pada proses, pelaksanaan, dan keahlian siapa pun yang memproduksi prototipe tersebut. Ketika dilakukan dengan benar, prototipe adalah bagian yang sangat penting untuk membongkar dan membangun produk digital berkualitas tinggi.
Prototipe juga merupakan langkah terakhir dalam Fase Penemuan kami untuk proyek digital. Jika Anda telah menyelesaikan setiap langkah di sepanjang jalan, Anda akan memiliki pemahaman yang komprehensif dan berpendidikan tentang apa yang produk digital Anda butuhkan untuk menjadi sukses. Jika Anda menyewa agen, ini adalah segalanya yang diperlukan untuk membuat estimasi informasi tentang proyek. Jika Anda bekerja secara internal, tim pengembangan Anda akan menghargai kejelasan tentang kebutuhan. Dan jika Anda tidak menyelesaikan setiap langkah, untuk waktu atau alasan lain, ada nilai dalam setiap kemajuan yang dibuat. Langkah-langkah lainnya masih harus diselesaikan, tentu saja, tetapi mereka dapat ditangani oleh anggota lain dari tim proyek atau agen. Semoga berhasil!
Posting Komentar untuk "Metode, Tips dan Trick untuk Prototyping yang Efektif"