ANTARMUKA PENGGUNA Materi 1-2. Pemahaman Dasar – Dasar UX&UI.pptx

ANTARMUKA PENGGUNA Materi 1-2. Pemahaman Dasar – Dasar UX&UI

1. Oleh : KETUT GUS OKA CIPTAHADI, S.Kom.,M.Kom Pemahaman Dasar – Dasar User Experience dan User Interface Design

2. Sumber : Google.com

3. User Experience dan User Interface Design

4. Sumber : Google.com UI dan UX adalah singakatan dari User Interface dan User experience yakni merupakan sebuah tampilan visual dalam sebuah aplikasi atau alat pemasaran digital dalam bentuk website yang dapat meningkatkan brand yang dimiliki oleh bisnis atau perusahaan yang anda miliki . User Interface UI adalah desain antarmuka yang lebih memfokuskan pada keindahan dari sebuah tampilan , pemilihan warna yang baik dan pas dan hal-hal lainnya yang membuat tampilan web ecommerce yang kita miliki lebih enak dipandang mata dan membuat pengujung betah berlama -lama. User Experience UX merupakan desain yang digunakan untuk meningkatkan kepuasan dari pengguna website melalui kesenangan dan kegunaan yang diberikan dalam interaksi antara pengguna internet atau pengunjung dan produk .  User Experience dan User Interface Design

5. Sumber : Google.com UX Desainer dan UI Desainer itu bekerja dalam satu tim , UX Desainer yang merancang   flow   aplikasinya ,  layouting ,   melakukan riset dan lain-lain, lalu kemudian hasil kerjaan dari UX Desainer diberikan kepada UI Desainer untuk dibuatkan visualisasinya atau tampilan antarmukanya , sehingga mereka sering melakukan kolaborasi , lalu kemudian mereka melakukan kolaborasi lagi dengan seorang   enginer   atau   developer  yang akan mengeksekusi hasil rancangan aplikasi yang dibuat ke dalam bentuk kodingan . User Experience dan User Interface Design

6. Bagaimana UX dan UI yang Bagus ?

7. 1. Memiliki Nilai ( Valuable ) UX yang bagus itu harus bernilai atau memiliki nilai yang berarti sesuai dengan kebutuhan pengguna . Jika produk tersebut tidak dibutuhkan oleh pengguna , website tersebut belum dikatakan mempunyai nilai yang berharga . Sumber : Google.com 2. Mudah Digunakan ( Usability ) Pengguna bisa menggunakan fitur-fitur aplikasi atau website tanpa membutuhkan   effort  ( upaya ) yang berlebih . Artinya setiap fitur yang kamu buat tidak hanya berfokus pada fungsinya , namun juga harus memperhatikan cara penggunaannya . Ciri – Ciri UX Bagus

8. 4. Disukai ( Desirable ) Hal ini berkaitan dengan emosi tertentu , misalnya pengguna lebih suka menggunakan website A dibandingkan website B. Sehingga sebagai UX designer, kamu harus meningkatkan kualitas website B agar disukai banyak orang. Sumber : Google.com 3. Mudah Didapatkan ( Adoptability ) Setelah membuat website atau aplikasi yang memiliki nilai dan mudah digunakan , website atau aplikasi tersebut juga harus mudah didapatkan , mudah dibeli , dan mudah diunduh . Agar website atau aplikasi kamu dapat digunakan oleh banyak orang. Ciri – Ciri UX Bagus

9. 2. Responsive Tampilan website yang baik harus fleksibel di berbagai device (desktop, tablet, atau handphone). Hal ini bertujuan agar tampilan website atau aplikasi tetap bagus jika diakses pada berbagai device yang digunakan pengguna . Sumber : Google.com 1. Jelas dan Ringkas Tampilan sebuah website atau aplikasi kamu harus terlihat jelas dan ringkas agar pengguna dapat memahami informasi yang disampaikan pada website atau aplikasi tersebut . Ciri – Ciri UI Bagus

10. 4. Informasi Terstruktur UI design tidak hanya berfokus pada keindahan tampilan , tetapi informasi yang ingin disampaikan juga harus dipahami oleh pengguna . Jangan sampai kamu membuat tampilan website yang menarik , tetapi tidak ada informasi yang bisa didapatkan oleh pengguna . Sumber : Google.com 3. Pilihan Warna yang Tepat Warna yang tepat akan memudahkan pengguna memahami atau membaca informasi yang disediakan . Jadi misalnya background website kamu berwarna dark blue, adalah warna yang cocok untuk font ( jenis tulisan). Ciri – Ciri UI Bagus

11. Prinsip Dasar UX ?

12. Sumber : Google.com Hierarchy adalah salah satu komponen terbaik desainer untuk membantu pengguna bergerak melalui suatu produk dengan mudah . Hirarki berkaitan dengan arsitektur informasi , yang mengatur konten di seluruh aplikasi atau situs. Contohnya , Saat kamu mengklik atau mengarahkan kursor ke salah satu menu utama , Kamu mungkin melihat menu sekunder yang menampilkan kategori dari menu tersebut . Hierarchy / Hirarki

13. Sumber : Google.com Setiap Pengguna berharap suatu produk tetap konsisten dengan produk serupa yang pernah mereka gunakan sebelumnya . Semakin akrab produk kamu , semakin mudah pengguna akan mempelajarinya dan semakin baik pengalaman mereka . Consistency / Konsisten

14. Sumber : Google.com Memberikan Konfirmasi untuk mencegah adanya kesalahan . Misalnya , Ketika pengguna secara tidak sengaja menghapus item atau melakukan pembayaran yang tidak diinginkan . Confirmation / Konfirmasi

15. Sumber : Google.com User Control adalah membantu pengguna memberi mereka kontrol di mana mereka berada dalam produk dan apa yang mereka lakukan . Misalkan memberikan fitur undo atau recovery suatu kesalahan yang dilakukan pengguna . Atau bisa memberikan kolom pencarian . Integrasi antara fitur dan produk dapat membantu pengguna mentransfer konten , dan pencarian lanjutan membantu pengguna menemukan apa yang mereka cari dengan lebih efisien . User Control / Kontrol Pengguna

16. Sumber : Google.com Aksesibilitas atau sering disebut juga kemudahan untuk mengakses baik untuk aplikasi atau mobile website. Misalkan, Pada gambar disamping, baik Squarespace dan Amazon menempatkan label di atas Form Field sehingga mereka terlihat secara permanen dan dapat diakses oleh pembaca di layar mereka. Accessibility / Aksesibilitas

17. Elemen Dasar UX ?

18. Elemen Dasar UX 1. STRATEGY Strategy dimana merupakan elemen dasar dalam pembuatan UX, Tujuan utama strategy ini untuk memenuhi kebutuhan user dan kebutuhan bisnis , Contohnya : Kenapa kita membangun / membuat aplikasi teresebut dan kepada siapa aplikasi ini digunakan . Maka dari itu perlu nya melakukan research process diaman kita melakukan interview yang berkaitan dengan product atau company.

19. Elemen Dasar UX 2. SCOPE Scope pada elemen dasar UX, memiliki fungsi untuk menentukan functional requirement dan content, Seperti Fitur, Menu, dan konten apa saja yang akan di masukan ke dalam aplikasi . Functional Requiement merupakan fitur / fungsi apa saja yang dimiliki oleh aplikasi /product Content Requirement merupakan informasi apa saja yang dibutuhkan untuk memberikan value/ nilai . Misalkan : Youtube memiliki fitur untuk menampilkan video, konten nya berupa audio dan video.

20. Elemen Dasar UX 3. STRUCTURE Structure menentukan bagaimana user berinteraksi dengan product, bagaimana system merespon Ketika user memberikan perintah . Structure dibagi menjadi 2 yaitu : A. Interaction Design Interaction design harus sesuai dengan function requirement, Hal ini menentukan bagaimana user berinterkasi dengan product dan bagaimana system merespon interaksi user. Salah satu contohnya mampu mencegah kesalahan user. B. Information Architecture Architecture harus sesuai dengan content requirement, Hal ini menentukan bagaimana konten di atur agar dapat memudahkan user memahami isi product.

21. Elemen Dasar UX 4. SKELETON/KERANGKA Skeleton merupakan tampilan bagaimana user bergerak melalui suatu informasi dan bagaimana informasi di tampilakn kepada user. Salah contohnya bisa menggunakan Wifeframe menggambarkan diagram statis yang mewakili konten , navigasi , dan bagaimana user berinteraksi . Skeleton dibagai menjadi 3 yaitu : Interface Design menyajikan Menyusun elemen interface untuk berinteraksi dengan fungsi system. Navigation Design bagaimana cara menavigasi informasi menggunakan suatu interface Information Design mendifinisikan penyajian informasi dengan cara yang mudah di pahami .

22. Elemen Dasar UX 5. SURFACE Surface merupakan keseluruhan pekerjaan dan decision yang telah dibuat . Surface menentukan bagaimana product akan terlihat , bagaimana tata letak atau layoutnya , bagaimana typography, warna , text dan lain sebagainya .

23. Sumber : https://shopee.co.id/ Sumber : https://www.tokopedia.com/ STUDI KASUS! Analisa kedua website dibawah ini , Apakah sudah memenuhi ciri dan Elemen UX/UI Design ?

24. Terima Kasih 👍