Merancang sebuah tampilan UI (User Interface) dan UX (User Experience) merupakan hal yang penting pada awal pengembangan aplikasi mobile. Hal ini penting karena pasalnya UI/UX merupakan hal pertama yang dilirik oleh calon pengguna sebelum menggunakan fungsi-fungsi utama dari aplikasi tersebut.
Dengan UI/UX yang nyaman serta mudah diakses akan membuat pengguna betah berlama-lama menggunakan aplikasi tersebut. Untuk itu, salah satu perusahaan asal Jepang, Goodpatch Inc, membuat sebuah tool untuk memudahkan developer dalam merancang UI dan UX aplikasi mobile yakni Prott.
Prott ini sendiri merupakan tool yang dikembangkan untuk membantu developer dalam merancang UI dan UX aplikasi mobile yang baik. Tool ini sendiri dapat diakses melalui website atau aplikasi mobile. Namun ketika mencoba aplikasi ini saya lebih menyukai untuk menjalankan tool ini melalui website karena memiliki area yang lebih luas dibandingkan aplikasi mobile.
Dalam tool ini developer dapat mengunggah aset desain berupa gambar dengan format JPG, PNG, dan GIF yang berada di komputer atau Dropbox. Namun jika developer tidak memiliki aset gambar, maka dapat juga membuat desain wireframe langsung pada halaman yang telah disajikan oleh Prott ini.
Untuk mulai menggunakan tool ini terlebih dahulu developer harus membuat akun Prott. Setelah developer selesai membuat akun maka dapat melakukan login pada tool Prott yang berada dalam website atau aplikasi mobile.
Pada kesempatan ini saya mencoba menggunakan Prott yang berbasis website. Bisa dibilang cukup mudah menggunakan tool ini untuk mengembangkan rancangan maupun prototype UI dan UX aplikasi mobie.
Ketika developer sudah melakukan login pada halaman utama Prott ini maka akan ditampilkan tutorial yang berupa tulisan dan gambaran yang harus dilakukan pertama kali oleh developer. Selanjutnya, developer dapat membuat proyek dengan beberapa pilihan pengaturan seperti nama proyek, simulator perangkat mobile, dan orientasi aplikasi baik itu portrait maupun lanskap.
Untuk simulator perangkat mobile yang disediakan oleh Prott ini terdiri dari iPhone 5, iPhone 6, iPhone 6 Plus, Nexus 5, Nexus 6, Nexus 7, iPad, Web, Apple Watch, hingga kustomasi resolusi perangkat mobile.
Setelah membuat proyek maka developer akan dihadapkan pada menu untuk mengambil aset desain gambar atau membuat wireframe langsung di website Prott. Bagi yang tidak memiliki aset desain gambar maka membuat wireframe langsung disini adalah pilihan terbaik.
Hal ini dikarenakan dalam halaman pembuatan wireframe ini telah disediakan beragam aset yang dapat membantu developer dalam merancang prototype dari suatu aplikasi. Aset yang tersedia ini dikelompokan menjadi tiga bagian utama yang terdiri dari “Shape”, “Wireframe Kits”, dan “iOS UI Kits iPhone 5”.
Aset-aset ini dapat developer susun dan rancang pada kanvas di bagian tengah yang telah disediakan oleh Prott. Kanvasnya sendiri telah diatur sesuai dengan resolusi simulator perangkat mobile yang telah ditentukan pada awal pembuatan proyek. Selain itu, developer juga dapat mengatur tata letak dan warna aset pada menu properti.
Rancangan prototype yang telah dihasilkan menggunakan wireframe ini akan menjadi sebuah obyek gambar yang bersanding dengan aset gambar lainnya yang telah diunggah pada folder proyek. Untuk memberikan sentuhan tautan layaknya menggunakan aplikasi mobile yang sudah jadi maka developer dapat menambahkan hotspot pada aset gambar proyek.
Hotspot ini berfungsi untuk menghubungkan satu aset gambar dengan aset lainnya. Misalnya developer ingin membuat sebuah tombol ataupun menu yang dapat mengarahkan ke halaman berikutnya.
Setelah developer selesai dalam menentukan skenario atau skema penggunaan aplikasi mobile maka dapat langsung memilih tombol preview dan secara otomatis simulator perangkat mobile akan dijalankan. Nantinya developer dapat menguji skenario dari aplikasi mobile yang dikembangkannya seperti sudah terinstal di perangkat mobile.
Selain itu, developer juga dapat mencoba menggunakan simulasi dari aplikasi mobile Prott ini yang akan ditampilkan pada perangkat mobile secara nyata. Untuk mempermudah kolaborasi antar anggota tim pengembang aplikasi maka developer dapat mengundang rekan lainnya untuk menguji dan berkomentar terhadap prototype yang sedang dikembangkan.
Bagi pembaca maupun developer yang tertarik menggunakan tool ini untuk merancang UI/UX pada sebuah aplikasi mobile dapat mencobanya dengan mengunjungi situs resmi Prott atau mengunduh aplikasinya di Google Play Store untuk ponsel Android dan Apple App Store untuk iPhone.
[appbox googleplay compact badge com.prottapp.android]
[appbox appstore compact badge 917618029]