ANTARMUKA PENGGUNA

1. ANTARMUKA
(INTERFACES)
SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
Disampaikan Oleh:
Harry B. Santoso, PhD

2. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
AGENDA
➔ Pengantar
➔ UI, Usability, dan UX
➔ Shneiderman’s Eight Golden Rules of
Interface Design
➔ Bentuk-bentuk Antarmuka
➔ Penelitian Terkini
➔ Referensi dan Jurnal Terkait

3. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PENGANTAR

4. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
UI, USABILITY & UX
USER INTERFACE USABILITY USER EXPERIENCE
Submit
Submit
VS VS
Submit Cancel
Submit Cancel
Yes, complete my order No, Thanks
Bonus :
Order arrives earlier than promised
“
Function : It works “
Function : It works well “
Function : It works well
and makes me say WOW !

5. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
USABILITY & UX
USABILITY USER EXPERIENCE
VS
Can the users accomplish
their goals ?
Did the user have as delightful an
experience as possible ?
“ “
In the case of our camera shopper,
from the perspective of the site’s
design, she did accomplish the goal,
being very satisfied with the result.
The store portion of the experience
canceled out the online portion.

6. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
USER CENTERED VS ‘DESIGNER CENTERED’ DESIGN
VS
Ax Ay
User User Interface Designer

7. BAGAIMANA CARA
MEMINIMALKAN GAP-NYA ?

8. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SHNEIDERMAN’S REQUIREMENTS
FUNCTIONAL REQUIREMENTS
NON FUNCTIONAL REQUIREMENTS

9. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SHNEIDERMAN’S REQUIREMENTS
FUNCTIONAL REQUIREMENTS
NON FUNCTIONAL REQUIREMENTS
INTERACTION REQUIREMENTS

10. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SHNEIDERMAN’S EIGHT GOLDEN RULES
Consistency
Shortcuts
Informative Feedback
Dialogue to Yield Closure
Simple Error Handling
Easy Reversal
Support Internal Locus of Control
Reduce Short-Term Memory Load

11. BENTUK - BENTUK ANTARMUKA

12. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
1. COMMAND-BASED LINE

13. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
2. GRAPHICAL USER INTERFACE (GUI)

14. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
early icons newer (skeuomorphic) icons modern flat 2D icons
1990an - 2000 2000 - 2010 2010 - sekarang

15. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SESI LATIHAN
● Buatlah sketsa ikon sederhana yang akan ditampilkan
pada layar kamera digital, untuk :
○ Fitur rotasi gambar 90 derajat ke samping
○ Fitur Auto-Enhance
○ Fitur Fix Red Eye
○ Fitur Crop
● Tunjukkan sketsa yang dibuat pada teman Anda tanpa
memberitahukan fiturnya. Tanyakan apakah mereka
memahami sketsa yang dibuat

16. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
3. SPEECH / VOICE

17. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
4. HAPTICT FEEDBACK

18. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
6. AUGMENTED & MIXED REALITY

19. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
7. VIRTUAL REALITY

20. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
8. ROBOT & DRONE

21. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
9. WEARABLE

22. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
10. INFORMATION VISUALIZATION & DASHBOARDS

23. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
… bahkan perabotan rumah kita sehari-hari

24. PENILITIAN TERKINI
PEDAGOGICAL AGENT ON SCELE

25. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PEDAGOGICAL AGENT ON SCELE

26. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PEDAGOGICAL AGENT ON SCELE

27. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PEDAGOGICAL AGENT ON SCELE

28. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PEDAGOGICAL AGENT ON SCELE

29. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
PEDAGOGICAL AGENT ON SCELE

30. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
REPORT (LOGS) ON SCELE

31. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
LEARNING DASHBOARD : COURSE OVERVIEW
Antini, S. P. (2014).
Analisis dan Perancangan Antarmuka
Learning Dashboard pada Student
Centered E-Learning Environment.
Skripsi, Fakultas Ilmu Komputer
Universitas Indonesia
“

32. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
LEARNING DASHBOARD : COURSE OVERVIEW
Antini, S. P. (2014).
Analisis dan Perancangan
Antarmuka Learning Dashboard
pada Student Centered E-Learning
Environment.
Skripsi, Fakultas Ilmu Komputer
Universitas Indonesia
“

33. REFERENSI & JURNAL TERKAIT

34. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
RECOMMENDED BOOKS

35. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
JOURNAL OF USABILITY STUDIES

36. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SPRINGER: mUX

37. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
The Magazine of the UX Professionals Association

38. SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER
SPRINGER : QUALITY AND USER EXPERIENCE

39. Terima Kasih,
Ada
Pertanyaan?
SISTEM INTERAKSI | FAKULTAS ILMU KOMPUTER