User interface design?

• User interface adalah tampilan antarmuka yang berhubungan langsung dengan pengguna
• Interface adalah antar muka
• User interface design adalah desain aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna.

TUGAS

• Buat kelompok anggota 6 orang
• Cari masing masing 3 desain UI aplikasi mobile yang baik dan buruk
• Tuliskan alasan mengapa baik dan buruk
• Upload di s.id/1ecR

 

APLIKASI MOBILE YANG BAIK

• Instagram

Karena desain tampilan yang minimalis, responsive, dan tidak terlalu berat, serta selalu diupdate tampilannya menjadi lebih baik.

• Spotify

Desain dengan tema warna yang bagus, tidak ada informasi tidak penting yang ditampilkan di homepage, serta tampilan awal yang berisi playlist-playlist yang sesuai dengan apa yang ingin didengarkan oleh user

• GrabDriver

Desain tampilan awal yang minimalis dan tidak menampilkan terlalu banyak informasi yang tidak penting, serta banyaknya tools yang bermanfaat yang mudah diakses, seperti heatmaps yang bisa diaktifkan dengan satu kali klik, serta tools-tools lain yang juga mudah untuk digunakan.

APLIKASI MOBILE YANG BURUK

• SV UGM Apps

Karena interface yang terlalu sederhana, dan banyak bugs yang ada, serta tampilan masih out dated

• UC Browser

Karena terlalu banyak iklan, serta tampilan homepage yang terlalu banyak informasi tidak penting yang ditampilkan, sehingga membuat pengguna merasa risih melihat homepagenya

Pertemuan 2 23-02-2018

Buku Referensi

• Design Book by
• About Face by
• Don’t Make Me Think by
• Element User Experience by
• Digital Design Essential by
• Simple and Usable by
• Designing Interfaces by
• Evil By Design by

 

Prinsip dasar design

• Kontras, harus ada yang dijadikan point of interest, sehingga membuat orang tertarik
• Repetition, Agar terlihat rapi dan tertata
• Alignment, Tata letak penulisan
• Proximity, Pengaturan jarak antar elemen

Prinsip dasar UI Design

• Struktur
• Simplicity
• Visibility
• Feedback
• Tolerance
• Reuse

 

UNTUK TUGAS AKHIR

Desain Aplikasi Mobile Yang ingin dibuat

 

Pertemuan 3-4 02-03-2018

UI Design dibedakan menurut cara penggunaan

• Menggunakan Mouse
• Keyboard
• Gesture
• Pointer

Berdasar Struktur Aplikasi

Berdasar Hardware

• PC
• Phone
• Tablet

Prinsip dasar UI Design

• Struktur, Pembuatan design harus terstruktur
• Simplicity, Kesederhanaan, Simpel, Mudah digunakan
• Visibility, Ketika user menggunakannya user bisa mengetahui elemen-elemennya
• Feedback, User mengetahui setelahi melakukan aksi apa apa
• Tolerance, Ketika user melakukan kesalahan ada perbaikannya
• Reuse, (Konsistensi) Penggunaan ulang komponen komponen yang ada

Teknik Interaksi

• Command Line
• Key-Model
• WIMP (Windows Icon Menu Pointer) Window untuk menampilkan aplikasi, Icon sbg Shrotcut, Menu sbg pengautran, Pointer untuk berinteraksi
• Gesture
• Voice
• Web semua aplikasi yang web based

Interface Pattern (Struktur Aplikasi)

• Command Line Interface
• Canvas Plus Palette, area kanfas dan toolsnya
• Picture Manager, Galery
• Explorer, Menjelajah File
• Single Task, Notepad
• Integrated development environment, Netbeans, Eclipsa
• Wizard, Installer
• Many Workspace, Photoshop, Excel, Browser
• Setting Editor, Control Panel
• Media Player, VLC, WMP
• Mesenger, Whatsapp, Line
• Voice Control App
• Fitur, Search and Browse
• Stream, NewsFeed, Timeline
• Dashboard,
• Single Page

 

Pertemuan 16 Maret 2018

UI Design Process

Requirement Discovery

• Research, mencari tau sementasi pasar, atau pengguna/peminat
• Observe, Mengamati pola penggunaan aplikasi yang sedang trending
• Understanding, Memahami kemauan user
• Analyze, menganalisa data data yang telah dikumpulkan, yang kemudian dituangkan ke dalam bentuk desain

Conceptual Design

• Architecture/Patern menentukan pola desain suatu aplikasi
• Wireframe, Gambaran kasar
• Storyboard, alur penggunaan aplikasi
• Sketches,
• Diagram, semacam flow chart

Communicate review refine, mengkomunikasikan dengan client, mendengarkan review lalu menerapkannya.

Design Development, perancangan desain aplikasi(prototype)

• Lo-fi Masih gambaran simpel
• Hi-fi Mendekati bentuk asli

/* Evaluation & Improvement

kita analisa aplikasi tsb mulai dari segi tampilan, apakah sudah terstruktur, penggunaan warnanya, enak untuk dipandang lama lama, adakah elemen yang tidak/susah dilihat, tidak ada bug bug tampilan lagi.

lalu dilihat dari segi pengoperasian, apakah semua fiturnya sudah berjalan sesuai keinginan, apakah masih susah untuk dioperasikan oleh orang awam,

kemudian apakah aplikasi tsb. mudah untuk dipahami oleh user baru. kemudian melihat bagaimana feedback dari user setiap menggunakannya. apakah masih ada hal yang tidak disuka ketika menggunakannya. */

 

Evaluation & Improvement

• Usability Testing, pengecekan fungsi fungsi aplikasi yang ada
• Expert Review, menggunakan orang yang telah ahli untuk mereview desain kita
• Performance Measurement, pengecekan performa desain yang telah dibuat
• Test Case, Membuat skenario skenario yang mungkin dilakukan oleh user
• A/B Testing, Test multivarian dengan desain yang berbeda
• UAT/Approval, pengujian oleh vendor

Implementation

 

TUGAS KELOMPOK BESAR

Review Aplikasi dan cara pakainya

Zeplin, Figma, Invision, Adobe xd,  Fluidu

Dipresentasikan minggu depan

 

UX (USER EXPERIENCE)

• Perbedaan UI dan UX
  UI lebih ke tampilan antarmuka, UX lebih ke pengalaman pengguna dalam menggunakan aplikasi.
• Elemen dari UX
  • Strategi
    Mengetahui apa yang user inginkan, mengetahui target pengguna,
  • Scope
    Lingkup penggunaan aplikasi, apa yang perlu dan tidak perlu di buat
  • Struktur