Cara Membuat Atau Menambahkan Folder Assets Pada Project Android Studio

Cara Membuat Atau Menambahkan Folder Assets Pada Project Android Studio

Cara Membuat Atau Menambahkan Folder Assets Pada Project Android Studio

Ngulik Kode - Assalamu'alaikum, pada kesempatan kali ini saya ingin membagikan sebuah tutorial cara membuat folder assets pada project android studio sangat mudah bagi teman-teman, kalian pasti bisa membuatnya dengan mengikuti langkah-langkah pada tutorial ini.

Folder assets ini sangat berguna sekali bagi teman-teman yang ingin menyimpan file seperti doc, pdf, html .dll. tidak hanya itu pada android studio ini juga bisa menambahkan folder lainya seperti menu, anim, font, raw dll. untuk folder lainnya nanti kita bahas juga secara terpisah di postingan.

Dalam bembuat folder assets ini berbeda dengan membuat folder lainnya seperti folder, maka dari itu saya memcoba membuatkan tutorialnya untuk temen-temen. Langsung saja kita mulai langkah-langkahnya seperti dibawah :

Membuat Directory/Folder Assets

  1. Langkah pertama teman-teman buka terlebih dahulu project Android Studio yang ingin di tambahkan folder assets.
  2. Lalu klik kanan pada folder app > New > Folder > Assets Folder ikuti langkah langkahnya seperti gambar dibwah ini.


  3. Kemudian akan muncul jendela seperti gambar dibawah ini, lalu teman-teman cukup klik tombol Finish.


  4. Maka folder assets akan muncul pada project Android Studio di sebelah kiri pada bagian struktur project teman-teman.



Gimana ? cukup mudah bukan, untuk membuat folder assets ini, jika teman-teman masih terkendala dalam membuat folder assets ini teman-teman bisa komentar di bawah ini.

Sekian yang bisa saya berikan, kurang lebihnya mohon maaf dan semoga apa yang saya berikan melalui tulisan ini dapat bermanfaat bagi teman-teman dan sampai bertemu lagi di artikel lainnya.

Menampilkan File PDF Pada Apalikasi Android Dengan Android Studio

Menampilkan File PDF Pada Apalikasi Android Dengan Android Studio

Menampilkan File PDF Pada Apalikasi Android Dengan Android Studio


Ngulik Kode - Pada kesempatan kali ini saya ingin mencoba memberikan tutorial kembali kepada taman-teman cara menampilkan file PDF pada aplikasi android dengan menggunakan Android Studio. Langsung saja kita mulai tutorialnya.

Langkah pertama membuat project baru pada android studio teman-teman lalu tambahkan build.gradle seperti dibawah ini, library yang akan kita gunakan untuk menampilkan file PDFnya nanti.
implementation 'com.github.barteksc:android-pdf-viewer:3.2.0-beta.1'

Jika sudah lalu teman-teman lakukan sync pada project android studio agar bisa menggunakan librarynya.


Membuat Folder Asses

Langkah pertama teman-teman bikin dulu folder assets pada android studionya, jika teman-teman belum tau cara membuat folder assets pada android studio teman-teman bisa mengikutinya dengan membaca tutorial pada link dibawah :

Tambahkan File PDF Pada Folder Assets

Kemudian tambahkan file dengan format PDF ke folder assets yang sudah di buat, pada tutorial ini saya akan menambahkan file dokument Mata Kuliah dengan nama file matakuliah_reguler_2.pdf. teman-teman bisa menggunakan file lainya dengan format PDF.

Kita Mulai Koding

Kemudian teman-teman masuk ke file layout activity_main.xml kemudian ketikkan seperti kode dibawah ini :


Kemudian teman-teman masuk ke file java MainActivity.java lalu ketikkan hingga menjadi seperti kode dibawah ini :

Setelah semua sudah di lakukan dan tidak ada error pada baris kode teman-teman bisa langsung jalankan project android studionya dan lihat hasilnya akan seperti gambar dibawah :


Sekian tutorial yang bisa saya berikan pada kesempatan kali ini, semoga teman-teman bisa memahami tulisan yang saya berikan, jika teman-teman ada pertanyaan bisa langsung komentar di kolam komentar dibawah. Terima Kasih

Keep Ngulik Kode ✊
Tutorial Membuat Project Aplikasi Android Petunjuk Arah Kiblat Sederhana

Tutorial Membuat Project Aplikasi Android Petunjuk Arah Kiblat Sederhana

Tutorial Membuat Project Aplikasi Android Petunjuk Arah Kiblat Sederhana

Ngulik Kode - Halo, kembali lagi dengan saya untuk membahas tutorial membuat aplikasi petunjuk arah kiblat pada aplikasi android dengan memanfaatkan sensor pada perangkat android yang sudah saya bahas pada tutorial sebelumnya, anda bisa membacanya pada link dibawah.

Baca Selengkapnya disini :
Tutorial Membuat Project Aplikasi Kompas Pada Android

Saya sarankan sebelum melanjutkan tutorial ini sebaiknya anda baca terlebih dahulu tutorial diatas. Jika sudah langusng saja kita mulai tutorialnya.

Langkah pertama yang kita lakukan adalah membuat proyek baru pada android studionya, pada tutorial ini saya membuat proyeknya tetap menggunakan java bukan kotlin ya.


Kemudian kalian tambahkan permission untuk akses lokasi GPS terlebih dahulu pada file AndroidManifest.xml dan mengetikkannya seperti berikut :


Kemudian langkah berikutnya dengan membuat file baru dengan nama Compass.java dan mengetikan seperti kode di bawah ini :

Kemudian langkah berikutnya lagi dengan membuat file baru dengan nama GPSTracker.java dan mengetikkannya seperti kode di bawah ini :


Kemudian siapkan asset untuk gambar kompas dan kiblatnya, kalian bisa membuat sendiri atau bisa menggunakan gambar-gambar yang sudah saya sediakan di google drive, bisa langusng kalian download dan langsung digunakan. Download Assets Arah Kiblat

Langkah selanjutnya adalah membuat tampilah untuk kompas dan arah kiblatnya lalu menambahkan kode activity_main.xml hingga menjadi seperti kode dibawah ini :


Kemudian balik lagi untuk ngoding bagian MainActivity.java nya, dengan mengetikkan kode seperti berikut :


Sekarang kita bisa coba dengan menjalankan project yang sudah kita buat dan koding untuk memastikan tidak ada error dan berjalan sesuai mestinya. Jika berhasil akan menjadi seperti gambar dibawah ini.



Sekian tutorial yang bisa saya berikan, semoga dapat dipahami untuk semua dan jika ada pertanyaan bisa ditanyakan di kolam komentar dibawah. Terima kasih

Proyek GudangKita Bagian 3 – Tutorial Figma Membuat Halaman Login & Halaman Register

Proyek GudangKita Bagian 3 – Tutorial Figma Membuat Halaman Login & Halaman Register

Proyek GudangKita Bagian 3 – Tutorial Figma Membuat Halaman Login & Halaman Register

Tutorial Membuat CRUD Aplikasi Android Dengan Firebase Pada Proyek GudangKita Bagian 2 – Tutorial Figma Membuat Halaman Login & Halaman Register

Halo teman-teman balik lagi dengan Admin MuhFikriH, apa kabar ?, Semoga kalian sehat selalu.

Dalam membangun sebuah Aplikasi, peran UI/UX sangat dibutuhkan. Bagaimana tidak, jika User Interface aplikasi yang kita buat tidak baik, maka User akan kurang tertarik untuk menggunakan Aplikasi kita. Begitu juga dengan User Experience, Aplikasi yang kita buat dengan UX yang buruk maka akan mempersulit User menggunakan aplikasi kita.

Maka dari itu kali ini Admin akan membuat tutorial menggunakan Figma untuk Design Mobile Application. Dalam tutorial pertama membuat design UI/UX kali ini, yang akan kita buat adalah Login Page dan Register Page Interface Mobile di Figma.

Figma sendiri adalah Web Based Application yang bisa digunakan di dalam situs nya figma.com tanpa harus mendownload aplikasi desktop nya. Tetapi jika kalian ingin mendowload nya, kalian bisa download disini https://www.figma.com/downloads/

Okay, setelah menyelesaikan proses download dan login di Figma, kalian bisa langsung membuat file baru yang berada di kanan atas, atau kalian bisa dengan mudah menggunakan shortcut Ctrl+N

A. Mengenal Tools di Figma

Nah sebelum kita memulai, kita akan melakukan pengenalan terlebih dahulu dengan tools yang ada di dalam figma yang perlu kalian ketahui. 


Nah, untuk memudahkan pengerjaan, kita bisa menggunakan shortcut seperti di bawah ini: 
     F - Untuk membuat frame
     T - Untuk Membuat text
     R - Untuk membuat persegi
     O - Untuk membuat lingkaran
     L - Untuk membuat garis

B. Membuat Login Page

Nah setelah itu kita akan membuat frame untuk halaman login terlebih dahulu. Ketik F, lalu sebelah kanan akan muncul design frame yang ingin kalian buat, karena kita ingin membuat tampilan di mobile, kalian pilih frame untuk phone. 

Admin akan memilih iPhone 8 Plus, tapi kalian bebas menentukan pilihan yang kalian suka. Jika sudah, akan muncul frame yang kalian pilih di canvas seperti berikut :


Lalu kalian bisa mengikuti Langkah-langkah selanjutnya dibawah ini, telah disajikan gambar properties/style untuk memudahkan kalian dalam mengikuti tutorial di bawah.


Style:

  • Text--font-poppins, weight-regular, size-18, color: #000
  • Rectangle--border radius-15, color:#ddd
  • Text--font-poppins, size-10, weight-light
  • Rectangle--border radius-15, color: #454545
  • Text--font-poppins, size-12, weight-light
  • Text--font-poppins, size-14, weight-light
  • Rectangle--border radius-3, color:#454545
  • Text--font-poppins, weight-regular, size-18, color: #fff
  • Ellipse --olor:#c4c4c4

Jika kalian liat, di bawah Prototype terdapat Icon Google dan Facebook. Nah kali ini kita akan mendownload plugin Brandfetch. Kalian klik menu lalu ke plugins, lallu klik browser plugins in community. 

Jika sudah, ketik "Brandfetch" lalu install.


Balik ke design kalian, lalu ketik Ctrl + /  kemudian ketik Brandfetch, kalian bisa mencari logo brand yang kalian inginkan. Sebagai contoh disini Admin menggunakan logo Faceboook. Jika sudah select pada bagian ellipse dan klik gambar yang ada di plugins.


Jika menjadi seperti gambar di bawah, tandanya kalian sudah berhasil. 


Lakukan juga ke ellipse lainnya, kalian boleh mengisinya dengan contoh brand Google. Seperti gambar di bawah ini. 


Lalu kita akan menambahkan icon show/hide di dalam rectangle password. Silahkan kalian download plugins icons8 icons di plugins community seperti sebelumnya. Jika sudah, klik ctrl + / dan cari plugins icons8 icons. Lalu ketikkan show hide seperti gambar berikut :



Kalian juga bisa mengubah warna di kanan atas plugin nya menjadi warna sesuai selera kalian. Jika sudah, klik dan arahkan ke dalam rectangle password seperti gambar. 


Okay memasuki langkah terakhir yaitu menambahkan vector. Sekarang kalian klik link ini https://undraw.co/search dan ketikkan “login” kalian boleh pilih  sesuka hati, lalu setelah itu kalian download. Kemuadian, kalian copy ke frame seperti ini :


Fyi, kalian bisa mengganti warna dari gambar yang udah kalian download tadi dengan cara klik dua kali lalu ubah warnanya. 

Nah untuk touching terakhirnya,  Admin merubah warna gambarnya menjadi lebih gelap dan menambah beberapa shape untuk meramaikan white space dan terakhir menambahan Text Register di ujung kanan atas seperti gambar berikut :


C. Membuat Register Page

Hal pertama yang harus kalian lakukan adalah duplicate hasil login page yang sudah jadi dengan shortcut Alt + Shift lalu geser ke tempat yang kalian inginkan, lalu ikuti seperti gambar dibawah ini :



  • Ganti text “ Register” menjadi “Login”
  • Download gambar berbeda dari sebelumnya di sini https://undraw.co/search Kalian bisa search dengan menggunakan keyword “Register” dan pilih sesuai selera kalian. Setelah itu copy seperti gambar diatas
  • Ganti text “Login” menjadi “Register”
  • Ganti text “Login” menjadi “Register”
  • Duplicate salah satu label text dan textfieldnya. Lalu ubah menjadi “Email”
  • Ubah text menjadi seperti diatas.
Nah desain halaman Login dan Halaman Register kita sudah selesai nih, gampang banget kan ?. Sekian dulu Tutorial Figma dari Admin, kita akan lanjut sama-sama mempelajari Figma untuk mendesain aplikasi kita pada artikel berikutnya. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar, begitu juga dengan kritik dan saran. Maaf bila ada salah kata, dan terima kasih telah membaca tutorial ini. Semoga ilmu nya bermanfaat.
Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase

Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase

Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase

Tutorial Membuat CRUD Aplikasi Android Dengan Firebase
Pada Proyek GudangKita Bagian 2 – Menghubungkan Aplikasi Android ke Firebase



Ngulik Kode - Assalamu’alaikum teman-teman kembali lagi di Artikel Admin MuhFikriH, kali ini kita akan melanjutkan Aplikasi GudangKita Part kedua. Di sesi kali ini, Admin akan membantu kalian bagaimana caranya menghubungkan Firebase ke Aplikasi Android dengan bahasa pemrograman Java Native kita. Sebenarnya untuk menghubungkan Aplikasi kita ke Firebase itu ada dua cara yakni :
  • Otomatis by Assistant dari Android Studio
  • Manual copy paste file google-service.json dari Firebase
Nah umumnya orang-orang menggunakan cara yang pertama, jadi banyak artikel yang sudah membahas cara mengkoneksikannya dengan cara yang pertama. Tapi tidak sedikit juga yang menggunakan cara kedua karna sering gagal jika menggunakan cara yang pertama, oleh karna itu Admin disini akan membantu  kalian yang gagal menggunakan cara pertama untuk menghubungkan Aplikasi Android kalian ke Firebase dengan cara yang kedua. Okey admin rasa sudah cukup pembukaannya maka kita langsung aja eksekusi.

1. Buka Situs Resmi Firebase Source 

Lalu klik "Buka konsol" pada bagian atas.


2. Add Project

Klik "Add project" untuk membuat project baru



3. Nama Project

Masukkan nama project kalian, sebagai contoh disini admin akan membuat project "GudangKita"



4. Google Analytics

Terdapat radio button sebagai pilihan apakah kalian akan mengaktifkan fitur "Google Analytics" atau tidak. Disini Admin akan mengaktifkannya. Sebagai informasi, dengan kalian mengaktifkan fitur ini terdapat banyak keuntungannya, salah satu fitur yang sangat diuntungkan adalah "Crash-free users" yang mana fitur ini akan memberi tahu kalian jika suatu waktu terdapat crash pada Aplikasi kalian, dan juga menunjukan Log dimana titik crash tersebut terjadi.



5. Requirement Google Analytics

Centang saja semua yang dibutuhkan pada form jika kalian masih menginginkan fitur "Google Analytics" lalu klik "Create project"



6. Registrasi Sukses

Tunggu beberapa saat maka project Firebase anda akan siap digunakan. Dan dibawah ini adalah tampilan Dashboard project Firebase kita. Tapi proses belum selesai, saat ini kalian baru saja berhasil membuat project Firebase kalian tapi belum bisa terhubung ke Aplikasi Android kalian. Oleh karena itu mari kita lanjutkan petualangan kita. 

Dibawah tulisan "Get started by adding Firebase to your app" terdapat beberapa button salah satunya Button Android, klik button tersebut.



7. Register App



Terdapat 3 data yang dibutuhkan dalam meregistrasikan App kita ke Firebase, yakni :
  • Package name :
    Cara untuk mendapatkan package name App kita adalah dengan membuka project di IDE favorit kalian. Lalu buka file AndroidManifest.xml, lalu pada bagian paling atas tepatnya pada tag <manifest> akan tertera nama Package Apk kita, jika tidak dapat menemukannya kita juga bisa mengeceknya pada file build.gradle(app).
  • App Nickname :
    Nickname App kalian di Firebase, kali ini terserah kalian mau menggunakan nama seperti apa yang penting mudah kalian ingat aja.
  • SHA-1 :
    SHA-1 terdapat 2 tipe, yakni tipe Release dan Debug. Karena saat ini kita hanya membutuhkan untuk belajar Development saja, maka SHA-1 yang kita butuhkan adalah yang Debug. Untuk saat ini Admin belum membuat artikel bagaimana cara untuk mendapatkan SHA-1 pada laptop kalian. Tapi disini Admin sudah menyiapkan tutorial yang Admin temukan pada Stackoverflow, kalian bisa saja mengikuti tutorial berikut Source

8. Download Config File




Klik button yang bertuliskan "Download google-service.json" jika sudah, copy file yang sudah didownload tadi dan paste pada direktori "App" seperti gambar berikut.


Jika sudah, kembali pada Firebase lalu klik "Next".

9. Add Firebase SDK

Pada sesi kali ini, kalian wajib menambahkan SDK Firebase pada project kalian. Tapi jika kalian sudah mengikuti tutorial ini dari sesi pertama Source, kalian tidak perlu menambahkan banyak SDK. Hanya perlu menambahkan code ke dalam 2 file, yakni :

  • Gradle level root (level project) build.gradle.


classpath 'com.google.gms:google-services:4.3.10'


  • Gradle modul (level aplikasi), biasanya app/build.gradle.


apply plugin: 'com.google.gms.google-services'

Jika kedua codingan tadi sudah kalian masukkan, maka diatas akan ada notif perubahan pada file build.gradle, yang kalian perlu lakukan adalah dengan menekan tombol "Sync now" tunggu hingga proses selesai.

10. Finished

Kembali pada laman Firebase dan tekan tombol terakhir yang tersisa. Maka proses Registrasi App kita ke Firebase sudah selesai, dan Aplikasi kita sudah terhubung ke Firebase.

Baik teman-teman untuk tutorial GudangKita Part 2 sudah selesai sampai sini, jika ada pertanyaan bisa kalian tanyakan pada kolom komentar. Begitu juga jika ada kritik dan saran. Di tutorial berikutnya kita akan mulai mempelajari Firebase Authentication, yakni fitur dari Firebase yang memudahkan para Developer untuk membuat fitur Autentikasi yang mana nanti bisa terhubung ke Google Account, Facebook, dll.

Terima kasih sudah membaca tutorial ini, sampai jumpa di sesi berikutnya.
Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi

Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi

Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi

Tutorial Membuat CRUD Aplikasi Android Dengan Firebase Pada Proyek GudangKita Bagian 1 – Setup Aplikasi : Membuat Splash Screen, Mengganti Icon Aplikasi, Dan Setup Tema Aplikasi



Ngulik Kode - Assalamu’alaikum teman-teman selamat datang di artikel pertama saya di Blog Ngulik Kode. Perkenalkan saya Admin MuhFikriH, disini kita akan belajar bersama-sama membuat CRUD dengan Firebase pada Aplikasi Android dengan Bahasa pemrograman Java. Bagi yang belum tau apa itu Firebase, saya akan bantu menjelaskan nya di lain Artikel. Di artikel ini saya asumsikan temen-temen sudah mengetahui apa itu Firebase. Nah artikel ini akan terbagi menjadi beberapa part. Jadi bagi yang ingin mempelejari nya, silahkan simak setiap artikel nya karena itu semua akan menjadi bagian yang berkelanjutan. Langsung aja yuk kita mulai.

1. Buat Project Android

Buka IDE kesayangan teman-teman, kalo disini saya menggunakan Android Studio. 

  • Pilih “Start a new Android Stuideo project”
  • Pilih “Empty Activity”


  • Sesuaikan requirement device untuk Aplikasi kita


  • Tunggu hingga proses selesai dan Aplikasi anda sudah selesai dibuat
  • Migrate projek anda ke AndroidX
  • Klik tab Refactor -> Migrate to AndroidX


2. Setup Library

Disini kita akan menggunakan beberapa library untuk menunjang kebutuhan aplikasi kita, diantaranya sebagai berikut :
Nama Library Source Keterangan
ButterKnife  Source Library untuk Binding View
SDP Source Library untuk menulis satuan size yang akan responsive terhadap setiap ukuran device.
Picasso Source Library untuk menampilkan gambar
Converter GSON Source Library untuk mengkonversi data JSON ke GSON begitu juga sebaliknya
Google Material Source Library agar kita bisa menggunakan widget-widget dari Material Google
Firebase Source Library yang akan menjadi Library utama kita agar bisa menggunakan
  • Buka file build.gradle(app) anda lalu ubah menjadi seperti berikut.


3. Mengganti Icon Aplikasi

  • Siapkan gambar yang akan menjadi icon anda. Disini saya menggunakan asset dari iconfinder.com jika teman-teman ingin membuat nya sama seperti saya, silahkan download icon pada halaman berikut.
  • Download gambar gratis : Source
    Download file dalam bentuk SVG
  • Import gambar
  • Buka kembali projek aplikasi teman-teman, lalu buka direkrori App->res->mipmap. Klik kanan pada folder mipmap, lalu pilih new->Image Asset seperti pada gambar

  • Pilih letak file yang sudah anda siapkan pada form "path" lalu klik Next seperti pada gambar.
Jika kalian ingin mengganti warna background pada icon, klik pada bagian "Background Layer" dan pilih color, lalu masukkan kode hexa warna yang kalian inginkan.



  • Klik finish maka Icon sudah siap digunakan


  • Edit file pada AndroidManifest.xml menjadi seperti berikut. 


  • Ubah pada bagian :
    - android:icon
    - android:roundIcon
  • Run kembali projek anda, maka icon aplikasi anda akan berubah.

4. Membuat SplashScreen

  • Buat Activity berikut dengan nama SplashScreenActivity.
    Klik kanan pada direktori gudangkita, lalu pilih new->Activity->Empty Activity


  • Centang kolom Launcher Activity
  • Edit file activity_splashscreen.xml menjadi seperti berikut.


  • Edit file SplashScreenActivity.java menjadi seperti berikut.


  • Edit file AndroidManifest.xml, hapus tag <intent filter> pada bagian MainActivity (Jika ada), seperti pada kode berikut :


  • Dan berikut hasilnya



Baik teman-teman sekian dulu tutorial GudangKita kali ini. Jika ada saran, kritik, atau pertanyaan silahkan tinggalkan pada kolom komentar ya. Semoga ilmunya bermanfaat, terima kasih dan maaf bila ada salah kata. Sampai jumpa di artikel berikutnya.
Mengenal Apa Itu Design Best Practice Beserta Contohnya

Mengenal Apa Itu Design Best Practice Beserta Contohnya

Mengenal Apa Itu Design Best Practice Beserta Contohnya



Ngulik Kode - Design best practice mengacu pada suatu metode atau teknik dimana teknik tersebut sudah menjadi standar  yang telah ditetapkan dalam kualitas, etika, peraturan, tolak ukur dan lain-lainnya. Design best practice sendiri ada banyak, tapi kali ini kita akan membahas 10 Nielsen's 10 Usability Heuristic yang dikemukakan oleh Jakob Nielsen. Dimana prinsip ini sudah menjadi prinsip universal dan telah banyak digunakan produk-produk perangkat lunak.

1. Visibility of System Status

Istilah visibility atau visibilitas sendiri adalah keadaan yang dapat dilihat dan diamati. Jika dalam desain,  terutama UI design sendiri, visibility of system status adalah keadaan dimana design itu  mampu memberikan informasi yang terjadi, terlihat jelas dan dapat diamati oleh user. 



Contoh dari tampilan home Gojek yang menyuguhkan visibility of system status yaitu saldo gopay yang masih kosong.


2. Match Between System & Real World

Heuristik kedua ini menyatakan bahwa Sistem harus berbicara dalam bahasa user, dengan kata, frasa, dan konsep yang akrab bagi pengguna, daripada istilah yang berorientasi pada sistem.

Lagi-lagi kita memakai contoh dari app gojek. Gambar diatas merupakan contoh app tersebut menggunakan Bahasa yang mudah dipahami dan tidak menggunakan istilah system. 


3. User Control & Freedom

Pengertian ini secara singkat adalah memberikan kemudahan dan kebebasan kepada user dalam interface. Contoh yang paling sering adalah dengan adanya tombol undo dan redo di dalam UI design.
Contoh kali ini kita ambil dari app mitra gojek, yang mana 2 button tersebut adalah contoh dari user control and freedom, tentu saja, user bisa memilih salah satu pilihan disana dengan bebas.


4. Consistency & Standards

Konsistensi & Standar adalah nilai kunci dari setiap produk, merek, atau identitas. Dalam istilah sederhana, Sebuah design tidak boleh membingungkan user dengan menggunakan kata-kata, tindakan, desain, atau situasi yang berbeda untuk mendapatkan arti yang sama. 


Contoh button di app gojek seperti gambar diatas merupakan contoh design yang konsisten dalam pembuatan icon di dalam button. 


5. Error Prevention 

Selanjutnya, Error prevention merupakan bentuk pencegahan kesalahan yang mungkin saja dilakukan oleh user. Dengan adanya error prevention ini maka akan memperkecil kemungkinan kesalahan oleh user pemula hingga expert.

Contoh yang sering digunakan adalah memunculkan error message untuk menghindari adanya kesalahan yang lebih fatal. 

Fitur Show/Hide di kolom Password memberikan pencegahan terjadinya password yang salah/typo. User dapat melakukan cek terhadap text yang telah diinput, sehingga dapat meningkatkan kemungkinan password yang telah diinput adalah benar dan mengurangi kemungkinan eror login. 


6.  Recognition Rrather Than Recall 

Membuat user mengenali system daripada mengingat. Dengan kata lain meminimalkan beban untuk user mengingat dengan membuat objek, tindakan, dan opsi terlihat agar user tidak harus mengingat informasi dari satu bagian dialog ke bagian lain


Adanya breadcrumb di file path, atau file recent di Ms. Word memudahkan pengguna untuk mengenali system nya daripada harus mengingat. 


7. Flexibility and Efficiency of Use 

Pada dasarnya user terbagi menjadi dua, yaitu user berpengalaman dan user yang tidak berpengalaman, prinsip fleksibilitas dan efisiensi ini mengharuskan kita membuat design yang nyaman dan memudahkan penggunaan untuk kedua tipe user. 

Kali ini kita menggunakan app shopee, dengan adanya fitur filter, memudahkan user dalam mencari barang, contoh lain adalah fitur sort by ataupun fitur shortcut dan lain-lain.


8. Aesthetic and Minimalist Design

Nyaman dipandang dengan warna kontras yang baik, posisi sesuai dan serasi dengan adanya design minimalist ditambah white space yang sesuai agar user focus dan dalam nilai estetika nya membuat desain lebih elegan. 

Contohnya adalah home page Google yang terlihat sederhana dan elegan juga hanya menyediakan informasi yang sederhana dan penting. Juga fokus pada system yang dibutuhkan user. 


9. Help Users Recognize, Diagnose, and Recover From Errors 

Prinsip ke-9 ini mengharuskan kita membantu user jika ada kemungkinan kesalahan atau kegagalan yang terjadi pada system. Dalam kalimat sederhananya adalah memberi solusi jika ada error, tidak hanya pesannya. 

  • Microsoft Edge
    Contoh dari Microsoft edge, bisa dilihat dari gambar dibawah, yang mana tidak hanya pesan error nya saja, tetapi ada juga Langkah langkah yang memudahkan user.

  • App Gopay
    Contoh dari app gopay yang menampilkan pesan error untuk memberitahu informasi kepada user. 



10. Help and Documentation 

Berikan fitur bantuan dan dokumentasi dan membiarkan user belajar lebih banyak. Maka secara tidak langsung kita kita telah memberikan control lebih kepada user.

  • Fitur bantuan di Gojek

  • Fitur bantuan di Google Chrome