Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Mendesain, Wireframing & Mebuat Prototipe sebuah Aplikasi Android: Bagian 1

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Jika Anda bermimpi membuat hal besar selanjutnya pada aplikasi Android, maka saya tidak akan berbohong: Anda menghadapi tantangan yang sangat sulit!

Anda hanya perlu melihat secara cepat saja pada toko Google Play untuk melihat bahwa sedikit banyak setiap aplikasi apapun yang Anda pikirkan telah tersedia—biasanya bahkan, beberapa kali dan dengan level kesuksesan yang berbeda-beda.

Di dalam pasar yang sangat kompetitif seperti ini, aplikasi Anda harus menawarkan paket lengkap – hanya memiliki seperangkat fitur tidak akan mempermudahnya! Aplikasi Anda juga harus responsif, mudah digunakan, bebas dari bug sepenuhnya, dan (sedangkal mungkin ia terlihat) aplikasi Anda juga harus terlihat bagus, juga.

Jadi, ketika Anda tersentak bangun di tengah malam dengan ide brilliant Anda untuk aplikasi Android, lawan gejolak hati untuk langsung melompat dari kasur, mendirikan Studio Android dan mulai membawa visi Anda pada kenyataan. Jika Anda ingin memberikan keadilan pada ide Anda maka Anda perlu utuk memikirkan lebih jauh pada desain aplikasi Anda.

Pada seri dua-bagian ini, saya akan menunjukkan pada Anda bagaimana mengubah ide yang hebat menjadi aplikasi yang hebat. Anda akan belajar bagaimana merencanakan, menguji, dan menyempurnakan setiap bagian dari desain aplikasi Anda, dan merapikan setiap permasalahan sebanyak mungkin sebelum Anda bahkan menuliskan sebaris kode.

Pada bagian pertama ini, kita akan melihat bagaimana menjawab semua pertanyaan yang besar, menggebu-gebu yang harus dipatahkan oleh setiap pengembang ketika mereka memulai sebuah proyek Android baru. Kemudian kita akan membuat daftar semua layar yang harus kita bangun, dan peta layar yang menunjukkan bagaimana semua bagian layar ini akan saling melengkapi satu sama lain.

Pada bagian 2, Anda akan menguasai teknik jitu berorientasi desain, termasuk wireframing dan membuat prototipe. Pada akhir bagian 2 Anda akan harus membuat prototipe digital yang dapat Anda pasang dan uji pada smatphone, tablet, atau emulator Android Anda.

Untuk membantu Anda melihat secara tepat bagaimana Anda akan mengambil ide dari ‘percikan inspirasi’ menjadi prototipe digital yang berfungsi, saya akan menggambarkan seolah saya telah memiliki ide untuk aplikasi Android apa yang ingin saya buat, kemudian mengembangkan ide sepanjang seri ini.

Karena kita (seharusnya) tengah menuju musim panas, saya akan mendesain sebuah aplikasi yang akan membantu orang-orang untuk mengatur rencana dan mengagendakan liburan musim panas jitu bersama teman-teman mereka.

Jadi, kita telah memiliki sebuah ide—apa hal pertama yang harus kita lakukan?

1. Tulislah Statement Produk

Aplikasi biasa Anda memiliki memiliki banyak tambahan menarik, tetapi ia juga memiliki tugas utama yang jelas. Misalnya, aplikasi perjalanan kita yang telah rampung mungkin memasukkan fungsi media sosial sehingga pengguna dapat membagian sedikit cuplikan tentang koktail yang mereka nikmati ketika di pantai, atau kucing yang mereka elus di luar hotel mereka, tetapi fitur ini bukanlah tugas utama dari aplikasi kita.

Trik yang bagus untuk mendapatkan poin utama dari apa sebenarnya aplikasi Anda adalah dengan menuliskan statement produk. . Ini adalah sebuah kalimat statement sederhana yang mengkomunikasikan tentang apa aplikasi Anda, apa yang ia lakukan, dan mengapa penting untuk pengguna mengaktifkan Google Playnya kemudian mengunduh aplikasi ini sekarang juga. Mungkin membantu, jika Anda membayangkan Anda tengah memasarkan aplikasi Anda pada calon pengguna, dan Anda hanya memiliki satu kalimat untuk menyampaikan maksud aplikasi Anda.

Setelah pertimbangan yang panjang, saya meutuskan untuk memilih statement seperti di bawah ini”

Sebuah aplikasi yang menghilangkan stress mengatur rencana dan mengagendakan liburan musim panas yang jitu.

Merupakan hal yang sangat penting bahwa Anda tidak pernah kehilangan pandangan dari statement produk ini, sehingga Anda mungkin ingin menuliskannya pada memo dan menempelkannya pada meja kerja Anda.

You may want to scribble your product statement on a post it note

2. Identifikasi Audiens Target Anda

Pertanyaan besar selanjutnya yang perlu Anda patahkan adlah: Kepada siapa saya sebenarnya membangun aplikasi ini?

Semoga Anda telah memiliki gambaran tentang orang seperti apa yang mungkin ingin menggunakan aplikasi Anda, tetapi untuk hasil yang terbaik, Anda perlu untuk mendesain aplikasi Anda dengan memikirkan audiens target yang spesifik. Pepatah lama benar: mencoba memuaskan semua orang, maka Anda akan berakhir dengan tidak memuaskan siapa-siapa.

Siapa yang sedang Anda coba rayu haruslah mempengaruhi setiap bagian dari apliaksi Anda—dari fitur Anda memasukkan penampilan dan pengalaman dari UI Anda, melalui nada teks aplikasi Anda. Itulah mengapa, penting untuk Anda mengidentifikasi sasaran target Anda dalam proses desain sedini mungkin.

Saya telah memiliki ide kasar pada siapa aplikasi ini ditargetkan: remaja dewasa berusia 18-25 tahun yang baik sedang dalam libur musim panas kampus atau universitas, tengah mengambil cuti perkuliahan, atau merencanakan petualangan terakhir sebelum memulai untuk bekerja tetap. Ini merupakan awal yang baik, tetapi kita dapat menjadi lebih spesifik daripada itu!

Satu trik sederhana namun efektif untuk kondisi tidak ada audiens adalah dengan membuat user persona/persona pengguna.

Persona pengguna merupakan satu-satunya pengguna yang dapat mewakili keseluruhan jenis orang yang Anda targetkan. Karakteristik seperti apa yang harus dimiliki orang ini? Walaupun karakteristik spesifik akan sangat bervariasi tergantung jenis aplikasi apa yang Anda pikirkan, Anda dapat memulai dengan menjawab pertanyaan-pertanyaan berikut ini:

  • Berapa usia persona pengguna Anda? Bisa dalam bentuk usia yang spesifik atau tentang usia seperti, orang-orang berusia di atas 60 tahun, atau dewasa muda.
  • Di mana mereka tinggal? Ini bisa menjadi Negara atau kota secara spesifik, atau tipe tempat seperti pinggiran laut atau kota besar.
  • Apakah mereka memiliki anak?
  • Apa kegemaran mereka?
  • Apakah mereka memiliki pekerjaan? Jika ya, apa itu?
  • Apakah mereka sedang menempuh pendidikan?
  • Tipe aplikasi apakah yang menjadi kesukaan mereka?
  • Tipe aplikasi apakah yang paling tidak terlalu digemari?
  • Faktor apa yang akan mendorong mereka untuk mengunduh aplikasi ini?
  • Apakah mereka pernah membayar untuk aplikasi mobile?
  • Seberapa berpengalaman kah mereka terhadap aplikasi mobile? Apakah mereka pengguna yang telah ahili ataukah pemula?
  • Bagaimana pengalaman mereka dengan teknologi secara umum?

Mari membuat persona pengguna untuk aplikasi perjalanan kita. Untuk hasil terbaik, akan sangat membantu jika Anda memikirkan persona kita sebagai seseorang yang nyata. Anda bahkan mungkin ingin memberikan persona pengguna kita sebuah nama. Hal yang tentu saja saya lakukan: kenalkan, Sasha!

  • Dia berusia 20 tahun.
  • Dia adalah mahasiswi yang tengah libur musim panas.
  • Dia tinggal dengan orang tuanya ketika musim panas, tetapi akan kembali ke asrama saat tahun ajaran baru dimulai.
  • Dia masih lajang dan tidak memiliki anak.
  • Dia tidak memiliki pekerjaan, sehingga pinjaman pelajarnya adalah satu-satunya penghasilan yang ia miliki.
  • Sebagai seseorang yang tumbuh dengan media sosial, aplikasi kesukaannya adalah segala sesuatu yang memungkinkannya berbagi foto dan update status dengan kularga, teman, dan seluruh dunia pada umumnya.
  • Dia sudah professional dengan teknologi, terutama aplikasi mobile.

Karena aplikasi saya adalah seluruhnya tentang mengorganisir liburan, saya juga perlu mengetahui pengalaman Sasha seputar jalan-jalan. Apakah pengguna “umum” saya menyukai perjalanan yang sempurna? Apakah mereka sudah pernah bertanggung jawab untuk merencanakan liburan mereka sendiri sebelumnya, atau semua ini sangat baru bagi mereka?

Saya akan menambahkan karakteristik berikut ini pada persona pengguna saya:

  • Sasha sudah pernah bepergian ke luar negeri sebelumnya, tetapi hanya pernah dengan keluarganya.
  • Ini adalah pertama kalinya ia merencanakan liburannya sendiri.
  • Shasa dapat menjadi cukup terorganisir ketika dia berniat melakukannya, dia sangat menghargai bantuan!

Skenario Penggunaan

Jadi sekarang kita telah memiliki siapa, tetapi bagaimana dengan kapan? Pada kondisi apakah Sasha mungkin merasa terdorong untuk memacu ponselnya dan mengaktifkan aplikasi kita?

Berikut adalah beberapa hal yang ada di pikiran saya:

  • Sasha sedang berkumpul dengan teman-teman kampusnya, dan tanpa dapat terhindarkan topik pembicaraan akan berkisar tentang betapa menyenangkannya liburan musim panas mereka nantinya. Semua orang merasa sangat bersemangat, dan sebelum Anda mengetahuinya, Shasa telah membuka aplikasi kita, dan dia dan teman-temannya sangat bersemangat untuk merencanakan yang tentu saja akan menjadi sebuah perjalanan tak terlupakan seumur hidup mereka.
  • Shasa baru saja muncul dalam grup chat yang dia dan teman-temannya selalu gunakan, sebuah aplikasi chat kesukaan mereka, dan dia melihat—akhirnya!—semua orang sepakat untuk tujuan wisatanya. Dengan bersemangat, Sasha mengaktifkan aplikasi kita dan mulai mencari hal-hal menyenangnkan yang dapat dilakukan pada area tersebut.
  • Sasha merasa sangat frustrasi. Dia dan teman-temannya menghabiskan waktu berjam-jam membicarakan bagaimana menyenangkannya perjalanan mereka nanti, tetpi, tidak pernah benar-benar pergi ke lokasi untuk mem-booking apapun. Seseorang harus mengkoordinir, dan sepertinya seseorang itu adalah Sasha sendiri. Masalahnya adalah, dia tidak pernah mengatur sesuatu seperti ini sebelumnya. Yang dia butuhkan adalah suatu aplikasi yang dapat menghilangkan stressnya dalam merencanakan dan booking liburan musim panas yang sempurna….

3. Buat Daftar Fitur

Waktunya bersenang senang! Biarkan imajinasi Anda menjadi liar dan tuliskan setiap fitur yang akan Anda masukkan dalam aplikasi jika Anda memiliki waktu yang tak terbatas, uang, dan seluruh armada pengembang yang telah siap dan bersedia membantu Anda. Untuk sekarang, jangan risau tentang apakah fitiur ini praktis—pikirkan ia sebagai daftar fitur jitu Anda.

Jika Anda kesulitan dengan inspirasi, pergilah ke Google Play dan unduh beberapa contoh aplikasi Android yang mengulas konten yang mirip, atau memiliki target audiens yang sama dengan aplikasi Anda.


Sediakan waktu untuk mengeksplorasi aplikasi-aplikasi ini dan buatlah catatan apa yang aplikasi tersebut dapat lakukan dengan baik,dan bagian tertentu yang Anda rasa Anda mampu membuatnya lebih baik.

Berikut adalah beberapa fitur yang telah saya catat:

  • Kemampuan untuk mem-book semua yang mungkin dibutuhkan oleh pengguna untuk perjalanan mereka, dari pesawat, kereta, tiket bus, hingga reservasi hotel, bahkan beraneka hal seperti memesan sebuah meja pada restoran lokal yang memiliki ulasan yang baik pada TripAdvisor.
  • Membaca ulasan yang ditinggalkan orang lian, dan post review Anda sendiri.
  • Pengguna lebih dulu mengatur budget mereka, dan aplikasi akan menyaring semua rekomendasinya berdasarkan budget yang diinginkan pengguna.
  • Spontan! Merancang liburan seharusnya menjadi hal yang menyenangkan, jadi mengapa tidak menyerahkan semuanya pada takdir dengan membuat pin virtual pada peta virtual.
  • Baik, jadi merencanakan liburan seharusnya menjadi sangat menyenangkan, tetapi juga dapat menjadi kerja keras—terutama jika ini adalah perjalanan pertama yang pernah Anda agendakan. Aplikasi kita harus menyediakan daftar conteng (checklist) setiap hal yang dibutuhkan pengguna untuk mem-booking dan atur, untuk mengatur rencana liburan yang sempurna.
  • Fungsi media sosial, sehingga pengguna dapat membuat iri teman dan keluarga mereka dengan mem-posting foto dan status terbaru tentang betapa menyenangkan liburan mereka.
  • Jurnal perjalanan untuk pengguna yang ingin membagikan lebih dari sekedar foto dan status.
  • Karena target audiens saya adalah para dewasa muda, ini mungkin pertama kalinya bagi mereka untuk bertanggung jawab dalam mengagendakan liburan mereka. Mereka akan sangat menghargai saran umum yang ditujukan untuk wisatawan pemula, seperti bagaimana cara membuat passport, atau hal-hal yang dapat dan tidak dapat Anda bawa di tas jinjing Anda.
  • Sebuah penghitung mundur, sehingga pengguna dapat melihat pecan, hari, jam, dan menit sebelum hari liburannya.

Sekarang waktunya untuk pengujian secara nyata: tidak mungkin seseorang dapat menjejalkan seluruh idenya dalam satu aplikasi. walaupun semua ide Anda mungkin tidak muluk-muluk, sangat dipikirkan dan menggoda untuk calon pengguna Anda, melemparkan semuanya kecuali wastafel dalam sebuah aplikasi akan menjadi mimpi buruk bagi Anda dan pengembang, dan sangat mungkin menjerumuskan pada pengalaman pengguna yang teramat buruk.

Bayangkan untuk meluncurkan sebuah aplikasi untuk pertama kali dan tiba-tiba disodorkan dengan paket menu yang besar dan kompleks dengan ribuan pilihan. Pilihan merupakan hal yang baik, tetapi terlalu banyak pilihan hanya akan menjadikannya sangat memusingkan! Karena hal paling terakhir yang ingin Anda lakukan adalah membuat pusing pengguna Anda, kita harus mengurangi daftar fitur luar biasa kita menjadi hanya yang perlu-perlu saja.

Jadi, bagaimana cara kita memutuskan fitur mana yang harus ada dan yang mana harus hilang?

Untuk perluncuran pertama, Anda harus berkonsentrasi pada fitur utama untuk mengantarkan fungsi paling penting aplikasi Anda. Dan ingat, hanya karena sebuah fitur tidak berhasil sampai pada versi 1.0, tidak berarti ia tidak akan menemukan jalan untuk pembaruan berkelanjutan. Jika Anda kemudian mendapati sebuah fitur pada daftar Anda memiliki potensi, tetapi tidak begitu esensial untuk memenuhi tugas utama aplikasi Anda, maka buatlah catatannya sebagai sesuatu yag berpotensi untuk ditinjau ulang nanti ketika aplikasi Anda telah menyelesaikan fondasi awalnya.

Persona pengguna Anda dan skenario penggunaan harus juga memainkan peranan dalam menentukan fitur apa yang Anda masukkan pada Versi 1.0 (dan pada peluncuran selanjutnya). Fitur apa yang kira-kira paling menarik untuk Sasha?

Setelah membaca kembali persona pengguna, skenario penggunaan, dan statement produk, saya telah menetapkan beberapa fitur berikut ini:

  • Booking perjalanan dan akomodasi. Ini adalah keharusan yang absolult—jika Sasha tidak sedang setidaknya mengatur transportasi dan tempat menginap, maka dia tidak akan bepergian ke manapun.
  • Mengatur budget. Sasha mendanai seluruh perjalanan dengan uang sisa pinjaman pelajarnya, sehingga mengatur budget merupakan prioritas tertinggi untuk mahasiswa yang sadar budget kita.
  • Menandai lokasi pada peta virtual. Sasha adalah mahasiswi muda yang mencari petualangan musim panas dengan semua teman-temannya, sehingga ide untuk melakukan hal-hal gila dan spontan tentu akan sangat menggoda untuknya. Juga, ingat skenario penggunaan kita ketika Sasha sedang berkumpul denganteman-temannya dan mereka semua menantang masing-masing tentang menyenangkannya liburan musim panas mereka kali ini? Ini adalah kesempatan sempurna untuk Sasha untuk memulai mengaktifkan aplikasi kita dan menancapkan penanda virtual pada peta virtual kita.
  • Sebuah checklist (daftar centang). Karena ini adalah pertama kalinya Sasha terlibat dalam merencanakan liburannya sendiri, memiliki checklist yang jelas untuk digunakan akan membuat semua hal menjadi tidak terlalu mengintimidasi.

Daftar kita mengandung fitur lain yang akan juga menarik untuk Sasha, seperti dapat mem-post foto perjalanannya, seperti yang kita tahu bahwa Sasha adalah penyuka semua hal tentang media sosial. Bagaimanapun, untuk peluncuran pertama ini ,saya akan menjaga hal-hal tetap sederhana dan tetap fokus pada tujuan utama aplikasi ini. Ketika Anda telah mencapai fungionalitas paling penting dari aplikasi Anda dan telah memenuhi statementt produk Anda, Anda dapat mengalihkan perhatian Anda pada tambahan lain yang akan bagus untuk dimiliki nanti.

4. Membuat Sketsa Alur High-Level

Tugas Anda selanjutnya adalah untuk mulai memikirkan tentang layar yang akan perlu untuk Anda buat untuk mengantarkan seluruh daftar fitur ini, sehingga ambillah selembar kertas dan pulpen atau pensil. Sketsa beberapa diagram alur kasar dari rute yang mungkin pengguna Anda akan lakukan dalam aplikasi Anda, untuk mencapai tugas paling utama.

Untuk aplikasi perjalanan sya, tugas utamanya adalah:

  1. Booking sebuah perjalanan.
  2. Mengulas detail tentang semua perjalanan yang pengguna telah rencanakan.

Anda biasanya akan menampilkan layar dengan berbagai bentuk, dan menampilkan nvigasi menggunakan garis dan panah.

Example of a quick flowchart

Latihan ini ditujukan untuk membuat Anda berpikir tentang layar yang berbeda yang perlu Anda buat untuk mengantarkan fitur terpilih dari daftar fitur jitu Anda. Jangan habiskan terlalu banyak waktu pada diagram alur Anda, karena Anda akan memperbaikinya ketika Anda mencapai titik untuk membuat peta layar Anda.

5. Membuat Daftar Layar

Selanjutnya, sediakan sebuah daftar layar yang Anda perlu buat, berdasarkan diagram alur Anda.

Berikut ini daftar layar saya, juga sekilas pratinjau dari apa yang saya rencanakan untuk dimasukkan pada masing-masing layar:

  • Halaman depan. Halaman atau layar ini memiliki menu perjalanan apa saja yang telah direncanakan pengguna via palikasi kita. Pengguna dapat mengetuk item apa saja pada menu ini, untuk melihat checklist dari perjalanan tertentu. Atau, mereka dapat ‘Rencanakan Sebuah Petualangan Baru!’. memberikan link.
  • Peta. Layar ini akan memuat peta dan penanda virtual. Pengguna dapat mengetuk sebuah bagian dari peta, atau jika mereka merasa spontan mereka dapat memiliki penanda virtual, menutup mata mereka, dan membiarkannya ditentukan oleh takdir.
  • Pilih sebuah kota. Ketika pengguna telah memilih Negara yang ingin mereka kunjungi, layar ini akan merekomendasikan kota-kota yang mungkin ingin mereka kunjungi. Layar ini juga mengandung control di mana pengguna dapat membuat aplikasi mengetahui budget seperti apa yang sedang mereka kerjakan.
  • Daftar Periksa. Layar ini memiliki checklist untuk digunakan pengguna. Mengetuk item apa saja pada daftar ini akan meluncurkan sebuah layar ketika pengguna dapat menyelesaikan sebuah tugas, termasuk:
  • Buku transportasi.
  • Reservasi hotel.

6. Membuat Peta Layar

Sekarang waktunya untuk mengkombinasikan diagram alur kita dan daftar layar menjadi peta layar yang menampilkan hubungan navigasi antar layar.

Mulai dengan layar pertama ketika pengguna baru membuka aplikasi Anda, dan kerjakan seterusnya.

A screen map of our travel app

Tidak pernah terlalu dini untuk mulai mencari cara untuk meningkatkan pengalaman pengguna, sehingga ketika Anda telah membuat peta layar Anda, alokasikan waktu untuk mengamatinya dengan mata yang teliti. Satu factor yang memiliki dampak yang besar pada pengalaman pengguna adalah jumlah layar yang pengguna perlu navigasikan untuk memnuhi tugas utama aplikasi ini.

Secara umum, lebih sedikit langkah-langkahnya, akan lebih baik pengalaman penggunanya. Peta ini adalah kesempatan paling baik untuk mengidentifikasi tempat-tempat di mana Anda dapat mengurangi jumlah layar yang perlu pengguna navigasikan. Proses ini mungkin melibatkan menghapus beberapa layar, mengkombinasikan layar, engatur ulang layar, atau mengidentifikasi tempat-tempat yang lebih masuk akal untuk menambahkan ‘jalan pintas’ navigasi sehingga pengguna dapat langsung melompat dari layar A ke layar E.

Kesimpulan

Sejauh ini kita telah membuat beberapa keputusan besar tentang sebuah aplikasi yang akan kita buat, termasuk siapa target audiens kita, dan fitur apa yang akan kita masukkan pada Versi 1.0 (dengan beberapa fitur sisa untuk peluncuran selanjutnya). Kita juga telah membuat daftar semua layar yang perlu kita desain, dan membuat coretan bagaimana semua layar ini akan diatur pada aplikasi kita yang telah selesai.

Pada tahap ini kita telah memiliki aplikasi yang rampung perencanaannya, walaupun belum pada level yang paling tinggi. Pada bagian 2, saya akan menggali lebih dalam dan mendesain layar satu-satu yang akan melengkapi peta layar ini, sebelum meletakkan seluruh layar ini untuk diuji dengan membangun prototipe digital.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.