Buatlah Prototype Aplikasi Sebelum Memulai Coding

Sekarang kita mengetahui konsep dasar dari pemgoraman iOS, tentunya setelah mengikuti tutorial di postingan-postingan sebelumnya. Sebenarnya cara tercepat untuk belajar mengembangkan aplikasi, adalah dengan membuatnya. Nah mari kita buat aplikasi yang bener-bener aplikasi, eeittss tapi sebelumnya kita harus membuat prototypenya pertama kali.

Prototype before Coding

Mungkin dua pertanyaan ini akan muncul di benak kita :

  • Apa itu prototype?
  • Kenapa harus buat prototype segala?

Prototype adalah model pertama dari produk yang digunakan untuk men-testing konsep atau gambaran dari ide kita. Prototyping telah digunakan oleh banyak industri. Sebelum memulai membangun sebuah bangunan, arsitek harus menggambarkan blueprint dari bangaunan dan membuat model dari bangunan. Perusahaan pesawat terbang juga harus membuat sebuah prototype dari design pesawat sebelum mulai membuatnya. Perusahaan yang bergerak di bidang software, juga membuat prototype software untuk mengexplore ide sebelum memulai pengembangan aplikasi.

Dalam kontek pengembangan aplikasi, sebuah prototype bisa menjadi contoh awal dari aplikasi dan hal ini menentukan mana fitur yang tidak akan digunakan sehingga muncul gambaran dasar dari tampilan aplikasi.

Prototyping merupakan sebuah proses dari pengembangan aplikasi dasar. Keuntungan yang didapat pertama kali yaitu membantu kita menggambarkan ide kita dan menjadikannya media komunikasi kita kepada sebuah tim atau pengguna. Tapi jika Anda hanya seorang self developer dan hanya Anda yang nantinya menikmati aplikasi aplikasi Anda, tentu Anda tidak butuh dengan namanya prototype.

Ya, secara garis besar proses pengembangan aplikasi harus melalui tahapan itu. Karena itu cara komunikasi paling efektif jika kita bekerja dalam sebuah team atau membuat aplikasi untuk pengguna. Dengan membuat prototype kita bisa mengerti kebutuhan user diawal pengembangan tanpa harus mengulang kembali jika ada fitur yang ternyata belum fix ketika aplikasi aslinya selesai di kembangkan.

Prototype juga mengetes ide kita tanpa harus membuat aplikasinya terlebih dahulu, kita bisa menampilkannya pada user yang ingin menggunakannya sebelum aplikasi itu sendiri jadi. Ini tentu akan menghemat uang dan waktu. Berikut gambaran dari benefit dalam membuat prototype.

Prototyping Benefit


 

Sketsakan Ide Aplikasi dalam sebuah Kertas

Misalnya sekarang kita telah memiliki ide aplikasi, lalu bagaimana membuat prototype dari aplikasi kita?

Prototype bisa dibuat dalam berbagai cara. Bisa di tulis langsung di kertas biasa atau dalam bentuk digital. Nah saya akan memulainya membuat prototype dengan menggunakan tulis tangan, dan sangat direkomendasikan menggunakan kerta biasa untuk mendesign konsep aplikasi yang akan kita buat. Hal ini dikarenakan kertas merupakan cara terbaik dan tercepat untuk merekam semua ide yang ada dikepala kita.

Contoh ide aplikasinya gini, saya punya ide ingin membuat aplikasi tentang makanan yang memperbolehkan saya menyimpan restaurant favorite saya di aplikasi tersebut. Ya, saya ingin membuat kumpulan restaurant yang saya sukai dalam bentuk personal guide. Fitur yang mungkin ada di aplikasi seperti :

  • Daftar restauran favorit saya berada di home aplikasi.
  • Saya bisa membuat halaman penyimpanan data restaurant seperti sebuah foto restaurant.
  • Saya juga bisa menyimpan lokasi restaurant dan dapat membagikannya melalui media social
  • Saya dapat melihat lokasi restaurant dalam bentuk maps
  • Sata dapat melihat restaurant yang orang laing bagikan di aplikasi ini.

Saya pikir banyak orang akan suka dengan ide aplikasi itu. Oke selanjutnya kita lakukan tes pada ide aplikasi ini, pertama kita gambar design ide ini dalam kertas. Mungkin tidak semua orang bagus dalam hal menggambar, tapi kita tidak harus menjadi designner untuk bisa menggambar toh? Hehe :D.

Berikut ide design yang bisa digambarkan dari ide yang telah disebut sebelumnya.

Sketch


 

Membuat Prototype menggunakan POP

Kita memang bisa membuat ilustrasi dari aplikasi kita dalam kertaS. Tetapi akan lebih bagus jika kita bisa melihat perpindahan halaman tiap design yang telah kita buat dalam bentuk animasi, lalu bagaimana caranya?

Di iPhone Store ada banyak aplikasi yang bisa kita gunakan untuk membuat prototype ini, seperti POP app, Proto.io, Flinto dan InvisionApp. Nah di postingan kali ini kita akan menggunakan aplikasi POP untuk membuat prototype aplikasi, mmm sebenarnya tidak ada alasa khusus sih soalnya fungsinya sama saja dengan aplikasi lainnya.

POP app membuat gambaran prototype yang ada dikertas tadi menjadi protoype digital dengan cara mengambil gambarnya menggunkan kamera dan memasukkanya kedalam photo album. Untuk berinteraksi dengan gambar, aplikasi menyediakan fitur transisi untuk menghubungkan masing-masing gambar. Pertama instal POP app di iPhone dan download contoh prototype yang disini : https://www.dropbox.com/s/x6v8xlnbr7zusid/sketches.zip?dl=0

POP app sangat mudah digunakan, ketika kita mengjalankannya pertama kali kita akan melihat daftar project kita. Klik icon + untuk menambahkan project baru. Kita beri nama project Food Pin, lalu pilih project ketika telah dibuat. Umumya didalamnya terdapat project kosong. Sekarang gunakan icon kamera dan gunakan kamrea untuk mengambil gambar sketsa ide yang telah kita buat sebelumnya. Alternatif lain dengan memasukkan gambar yang telah ada di photo album. Berikut contohnya:

POP Sketch

Mulai dengan tampilan awal dari aplikasi dan definisikan transisi tiap halamannya. POP memperbolehkan kita untuk memberi tanda pada sebuah area spesidik dari gambar dan halam yang spesifik ketika di sentuh. Kemudian definisikan tiap transisi seperti next, back, rise dan dismiss. Ketika di halaman home screen, aplikasi seharusnya berpindah ke halaman detail screen ketika kita menekan tombol manapun. Jadi ini bisa kita beri tanda sebagai “next” dan menghubungkannya dengan halaman detail screen. Kita juga bisa menambahkan tanda untuk masing-masing gambar seperti yang terlihat pada gambar dibawah untuk melakuakn perpindah pada tiap halamannya.

POP Sketch 2

Nah kita bisa mengulangi cara ini untuk gambar lainnya agar aplikasi terlihat berjalan seperti aplikasi aslinya. Ketika prototype selesai dikerjakan, kita bisa membagikannya ke tim dan user yang ingin menggunakannya menggunakan menu share. Pengguna yang ingin mencobanya bisa mengunjungi link seperti ini nantiny : https://popapp.in/projects/542b9b22fdaf026132c03b74/preview

Inilah cara yang efektif untuk mengumpulkan semua feedback dari user diawal pengembangan. Jika user tidak menyukai ide dari tampilan aplikasi, tentu ini tidak menjadi masalah besar. Kita hanya perlu menggambarkannya kembali dan menjelaskannya kembali ke user sehingga mencapai kata sepakat dan user menyukai prototype aplikasi. Jika sudah sampai pada tahap itu, pengembangan aplikasi aslinya pun akan terasa lebih mudah. Hemat waktu, dan hemat biaya tentunya.

Seperti yang telah disebutkan diawal, membuat prototype aplikasi memiliki banyak cara. Menggambarkannya dengan tangan merupakan salah satu cara membuat prototype. Jika Anda seorang designer kita bisa menggunakan aplikasi Photoshop dan Sketch untuk mendesign prototype aplikasi. Apple Keynote juga bisa digunakan untuk prototype yang cepat. Ini sudah ada di aplikasi drawing iOS. Keynotpia juga menyediakan template mock untuk membuat gambaran dari prototype, seperti gambar berikut.

Apple Keynote

Well semoga bermanfaat guys !! 😉

Iklan

3 pemikiran pada “Buatlah Prototype Aplikasi Sebelum Memulai Coding

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s