ux

The Best UI Mockup App

The Best UI Mockup App

I’ve tried using FluidUI and Mockflow to design apps. Both worked well and easy to use.

However both requires subscription and the price is a bit too steep. Mockflow starts at USD29 for a small team of three. At that price it’s almost the same price as my broadband connection.

So I called up my partner-in-crime for recommendation. Surprisingly he suggested Google Slides so I decided to give it a spin. Digging up my Dropbox, I still have UI elements library from Keynotopia. Then I just upload it to Google Drive and copied elements that I wanted it into my new design.

First few steps is a bit daunting as Google Slides didn’t behave exactly like Keynote or Power Point when it comes to managing graphic elements. In 15 minutes or so I got the hang of it and designing the app is rather smooth after that.

Of course some features are missing like link overview between screens or smartphone preview mode but the important collaboration features are there. It will be good enough for us for now and saved us a fair bit of money before the app is live and starts to generate revenue.

Apa Itu Getting Real?

Mahu membina web app yang berjaya? Sudah tiba masanya untuk Get Real. Getting Real adalah kaedah membina software yang lebih kecil, lebih pantas dan lebih baik.
  • Getting Real adalah tentang melangkau segala benda yang kononnya realiti (carta, graf, kotak, anak panah, skematik, wireframe, dsb) dan betul-betul membina perkara sebenar
  • Getting Real adalah mengurangkan segalanya. Kurang berat, kurang software, kurang feature, kurang kertas kerja , kurang segala-galanya yang tidak penting (dan kebanyakan yang anda fikirkan penting sebenarnya tidak penting)
  • Getting Real adalah kekal kecil dan menjadi tangkas
  • Getting Real bermula dengan interface, skrin sebenar yang pengguna akan gunakan. Ia bermula dengan apa yang sebenarnya dialami oleh pengguna dan bina dari situ. Ini membolehkan anda mendapat interface yang sebenar sebelum tersilap membina software.
  • Getting Real adalah tentang perubahan demi perubahan dan menurunkan kos perubahan. Getting Real adalah tentang melancarkan, membaiki dan terus-menerus menambahbaik yang menjadikannya pendekatan yang bagus untuk software berasaskan web.
  • Getting Real menghasilkan apa yang pelanggan perlukan dan menghapuskan apa sahaja yang mereka tidak perlukan.
Manfaat Getting Real
Getting Real membawakan hasil yang lebih kerana kaedah ini memaksa anda menangani masalah sebenar yang anda cuba selesaikan. Bukannya idea anda tentang masalah tersebut. Kaedah ini memaksa anda berhadapan dengan realiti.
Getting Real menolak ketepi spesifikasi dan dokumen-dokumen lain bagi memberi laluan kepada membina skrin sebenar. Spesifikasi hanyalah satu anganan semata-mata, ilusi persefahaman, sedangkan web page sebenar adalah realiti. Itulah yang akan dilihat dan digunakan oleh pelanggan anda. Itu yang penting. Getting Real membawa anda ke situ lebih pantas. Dan itu bermakna anda membuat keputusan software berdasarkan perkara sebenar – bukannya idea abstrak.
Akhirnya, Getting Real adalah kaedah yang ideal untuk membina software berasaskan web. Model lapuk menjual software dalam kotak dan menunggu setahun dua untuk update sudah berlalu. Tidak seperti software yang diinstall, web app boleh berevolusi setiap hari. Getting Real mengeksploitasi sepenuhnya kelebihan ini.
Bagaimana Coding Software Yang Mantap
Tulisan yang mantap adalah tepat dan padat. Sebuah ayat tidak seharusnya mengandungi perkataan yang tidak perlu, sebuah perenggan tidak seharusnya mengandungi ayat yang tidak perlu, atas sebab yang sama sebuah lukisan tidak patut mengandungi garisan yang tidak perlu dan sebuah mesin tidak patut mengandungi komponen yang tidak perlu. Ini tidak bermaknan penulis menjadikan semua ayat pendek atau mengelakkan segala perincian dan menangani subjek sebagai outline, tetapi memastikan setiap perkataan membawa erti.
Dari “Elements of Style” oleh William Strunk Jr.
Jangan Gebang
Cara lama; proses panjang, penuh birokrasi, dan buat supaya selamat. Hasil tipikal; software yang suam-suam kuku dan sap-sap soi. Hap tui!
Getting Real menghapuskan…
  • Timeline projek yang mengambil masa berbulan-bulan atau bertahun-tahun
  • Spesifikasi yang tidak berpijak di bumi nyata
  • Debat scalability
  • Mesyuarat yang tidak produktif
  • ‘Keperluan’ menggajikan berpuluh-puluh pekerja
  • Version number yang tidak bermakna
  • Peta yang meramalkan masa hadapan
  • Option preference yang berjela-jela
  • Outsource support
  • User testing yang tidak realistik
  • Birokrasi sampah
  • Hierarki feudal
Anda tidak perlukan wang berjuta-juta atau tim yang besar atau development cycle yang panjang bagi membina software yang hebat. Perkara-perkara ini adalah resepi software yang lembab lagi bengap. Getting Real mengambil pendekatan yang bertentangan.
Dalam buku ini kami akan menunjukkan anda bagaimana…
  • Kepetingan mempunyai falsafah
  • Mengapa kekal kecil adalah baik
  • Bagaimana untuk buat lebih sedikit
  • Bagaimana untuk bergerak dari idea kepada realiti dengan cepat
  • Bagaimana untuk membina tim anda
  • Mengapa anda perlu design dari dalam ke luar
  • Mengapa penulisan sangat penting
  • Mengapa anda perlu buat lebih sedikit berbanding pesaing
  • Bagaimana mempromosi app anda dan meluaskan promosi
  • Rahsia sukses support
  • Tips mengekalkan momentum selepas pelancaran
  • … Dan macam-macam lagi
Fokus kami adalah pada idea-idea besar. Kami tidak akan melambatkan anda dengan petikan code yang terperinci atau trik CSS. Kami akan fokus pada idea dan falsfah utama yang memacu proses Getting Real.
Adakah Buku Ini Untuk Anda?
Anda adalah usahawan, designer, programmer atau marketer yang mengusahakan idea besar.
Anda sedar peraturan lama tidak terpakai lagi. Edarkan software dalam CD setiap tahun? Sangatlah 2002. Version number? Campak keluar. Anda perlu bina, lancarkan dan baiki. Kemudian cuci dan buat lagi.
Ataupun anda belum lagi tahu tentang agile development dan struktur bisnes, tetapi anda berminat untuk tahu lebih lanjut.
Sekiranya bunyinya seperti anda, maka buku ini adalah untuk anda.
Nota: Walaupun buku ini menekankan pembinaan web app, banyak idea relevan untuk aktiviti bukan software juga. Cadangan tetang team yang kecil, rapid prototyping, menjangkakan perubahan dan banyak lagi yang dipersembahkan di sini dapat memandu anda memulkan bisnes, menulis buku, design website, merakamkan album, atau pelbagai perkara lain. Apabila anda sudah mula menggunakan Getting Real dalam satu aspek kehidupan anda, anda akan lihat bagaimana konsep-konsep ini boleh digunakan dalam pelbagai aktiviti.
Nota Penterjemah: Ini adalah salah satu daripada strategi yang boleh digunakan bagi membina bisnes yang berjaya. Pelajari lebih banyak tentang strategi dan taktik di sini.

Apa Perkara Pokok UX?

Jika hendak disenaraikan apa buku yang perlu dibaca bagi menjadi pakar UX, memang terlalu banyak. UX adalah persimpangan antara pengguna, teknologi dan bisnes. Komponen teknologi pula sangat pantas maju ke hadapan.

Fokus UX tetap pada pengguna; iaitu apa yang dialami oleh mereka. Teknologi dan pasaran sentiasa berubah mengikut peredaran zaman. Namun, apa yang dikehendaki oleh manusia tetap sama.

Maka, apa yang skill asas yang diperlukan untuk mencipta UX yang baik? Hanya ada dua iaitu:

  1. Observation (Pemerhatian)
  2. Common Sense / Empathy (Empati)

Video Tutorial Edgecraft kini boleh didapati Downloadilmu.

Bagaimana Mencipta UX Yang Hebat?

Apabila kita melihat sesuatu produk dengan UX yang hebat, kita sebenarnya hanya melihat Surface atau Permukaannya. Sebenarnya terdapat empat lagi lapisan di bawahnya yang menjadi batu asas UX. Lapisan tersebut adalah:

  1. Surface (Permukaan)
  2. Skeleteon (Rangka)
  3. Structure (Struktur)
  4. Scope (Skop)
  5. Strategy (Strategi)

Sebagai contoh, para pelanggan hanya lihat siri buku Chef Hanieliza laku dijual di Mydin. Itu baru surface, zahirnya.

Paling mendasar, PTS memilih strategi Tribe iaitu mencari chef yang memang sudah ada pengikutnya tersendiri. Blue Ocean Strategy dan Long Tail turut digunakan dalam memasuki pasaran.

Dari segi skop pula Jabatan Marketing PTS membuat ‘kajian pandang-pandang’ tingkah laku pengunjung hipermarket membeli-belah:

  1. Siapa yang paling banyak membeli-belah di hipermarket? > Perempuan sudah berkeluarga
  2. Apa yang mereka beli? > Bahan makan dan barang rumah

Resepi yang dimuatkan pula hanya menggunakan bahan-bahan yang mudah didapati di kedai-kedai runcit. Tiada bahan-bahan ‘fancy’ yang hanya boleh dijumpai di kedai-kedai tertentu.

Kemudian, tim editorial PTS bersama Chef Hanieliza merancang struktur buku iaitu apa isi kandungannya. Fotografer pula merancang sesi fotografi dan stail apa yang hendak digunakan.


Pada tahap Skeleton atau Rangka, tim editorial sudah menghasilkan draf buku dan cover. Itu akan dibincangkan lagi bersama Tim Sales & Marketing. Beberapa pilihan cover juga akan  diberikan sebelum satu yang terbaik akan dipilih. Setelah beberapa perubahan dibuat mengikut keperluan, barulah buku dihantar ke kilang untuk dicetak.

Mengapa dan Apa Itu UX?

Terdapat begitu banyak produk dan perkhidmatan dalam pasaran yang menawarkan fungsi yang serupa. Antara perkara yang membolehkan produk tersebut menjadi remarkable adalah UX yang hebat. UX yang hebat bukan sahaja membolehkan pengguna menggunakan produk dengan betul malah menggembirakan pengguna. Ini memberikan competitive edge kepada produk tersebut.

Ilmu ini bermula sebagai ergonomics dalam kejuruteraan lalu menjadi HCI (Human Computer Interaction) dalam sains komputer dan akhirnya berubah menjadi UX (User Experience) dalam IT serta bisnes secara amnya.

UX terletak antara persimpangan tiga komponen iaitu pengguna, teknologi dan bisnes. Intipatinya adalah bagaimana untuk mengharmonikan keperluan ketiga-tiga bahagian bagi menghasilkan user experience yang bagus. UX bukan design semata-mata tetapi juga adalah strategi bisnes.

Caleb Tang, Yeevon Ooi, Chui Chui Tan dan moderator dari UX Malaysia

Entri ini adalah olahan daripada forum anjuran UX Malaysia semalam di Mindvalley, Bangsar. Barisan panelnya adalah Caleb Tang, Yeevon Ooi dan Chui Chui Tan.