BAB 12 PERANCANGAN USER INTERFACE

Presentasi berjudul: "BAB 12 PERANCANGAN USER INTERFACE"— Transcript presentasi:

1 BAB 12 PERANCANGAN USER INTERFACE
Suprapto, ST, MT Quit

2 Strategi Pengembangan Antarmuka
Secara garis besar, pengembangan bagian antarmuka perlu memperhatikan beberapa hal sebagai berikut: Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer Berbagai informasi yang berhubungan dengan karakteristik dialog Penggunaan prototipe yang didasarkan pada spesifikasi dialog formal yang disusun secara bersama-sama antara (calon) pengguna dan perancang sistem Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses prototipe yang telah dilakukan.

3 Pentingnya Perancangan Antarmuka Pengguna yang Baik
Mengurangi biaya penulisan program Dalam pemrograman antarmuka pengguna grafis, rata-rata 70% penulisan program berkaitan dengan antarmuka. Mempermudah penjualan produk Suatu produk dilihat pertama kali dari tampilannya, apabila tampilannya menarik biasanya akan menarik minat orang untuk menggunakan aplikasi tersebut. Meningkatkan kegunaan komputer pada organisasi. Dengan antarmuka yang menarik, biasanya pengguna akan tertarik untuk menggunakan suatu aplikasi komputer.

4 Dampak Antarmuka Pengguna yang Baik
Peningkatan produktivitas Mengurangi biaya pelatihan pegawai Mencegah pengambil alihan pegawai Kepuasan pengguna Produksi hasil dengan kualitas yang lebih baik.

5 Penyebab adanya antarmuka yang kurang baik
Kurangnya pendidikan / pelatihan yang berkaitan dengan perancangan antarmuka. Penyebaran pengetahuan yang diperlukan untuk merancang antarmuka pengguna yang baik. Perkembangan teknologi yang sangat cepat. Koordinasi yang kurang baik dalam pengembangan aplikasi

6 Bidang Kerja Dalam UI Designer interaksi – mereka yang terlibat dalam mendesain semua aspek interaktif sesuatu produk Designer web – mereka yang membangun dan mencipta desain laman web Arsitek Infromasi – mereka yang mencetuskan idea tentang bagaimana untuk merancang produk interaktif User experience designers – mereka yang membuat kesemua di atas termasuk menjalankan kajian tentang desain produk

7 HCI design models Waterfall model The star life cycle model
Rapid prototyping

8 The waterfall model Requirements analysis & specification
System & software design Implementation & unit testing Integration & system testing

9 The star life cycle Task analysis / functional analysis Implementation
Evaluation Requirements specification Prototyping Conceptual design / formal design

10 Rapid prototyping

11 From instructional design to HCI design
Task analysis, functional analysis Conceptual design, based on selected instructional strategies and tactics Physical design guidelines

12 What is user-centered design?
Pembuatan use interface dengan hanya mengacu pada contoh 2x desain yang sudah ada, bukan termasuk user centered design Tapi user dalam hal ini aktif memberikan masukan terhadap desain User Interface yang diinginkan

13 Instead: User-Centered System Design
Base design on real people: Abilities Needs Work context Tasks they are trying to accomplish Golden Rule of UI Design: “Know Thy User”

14 User-Centered System Design
The design process is a collaboration between designers and customers The design evolves and adapts to their changing concerns Designer and customer are in constant communication throughout the process

15 Key Components of TCUID
Phase 1 – Identification/definition Users and tasks – figure out who’s going to use the system for what Create specific scenarios Phase 2 – Design Select tasks to support Create designs (mockups first, then prototypes) to support these tasks Phase 3 – Evaluation Walk through tasks to test the design Test with users What we’ll cover today iterate as necessary

16 Who are the users? You need to identify real people who will (at least potentially) use your system if you can’t find users, you’re in trouble! “everyone” is not a user “the designer” is not a good user “the VP” is rarely the user “purchasing” is rarely the user And you sure aren’t the user!

17 Why “you” don’t count as a user
You almost certainly aren’t typical You’re too technically savvy You don’t care (just) about the task It’s “cheating” Remember: Design model  System Image  User’s Model But you know the Design Model, so you can’t test whether the System Image leads users to form an appropriate model

18 Spend time with users Go talk with the users Observe the user at work
Are they too busy? Then how will they have time to evaluate/use it? Are there good surrogate users? Observe the user at work Content – what they’re trying to accomplish Context – physical workplace, organizational setting, etc.

19 Talking with users What do they know? What do they do?
systems, skills, etc. What do they do? tasks How do they do it now? scenarios What do they want to do? new tasks

20 “Helpful” color coding
Are you sure you want to delete all records from the data base? Yes No “Yes” in instance is NOT a good thing

21 Many more interesting examples

22 What is the problem with these designs?
No designer purposes sets out to confuse or irritate users Fallacy: the most usable design is OBVIOUS by thinking through interior thinking about the problem

23 Reference Information for Java
What frame controls what window?

24 But… the target audience loved this approach
The organization was highly meaningful and powerful It reflects how users think about the information Packages Classes

25 The lesson Relying solely on interior thinking is a risky approach to design It risks making incorrect assumptions about the people who will use a system !

26 User-Centered Design Fokus pada siapa (user) yang akan menggunakan sistem User melakukan pengecekan pada tahapan pembuatan prototipe dan memberikan masukan pada setiap perubahan prototipe User Research Analysis Design Iterative Design Prototyping & Testing Development

27 Focusing on users from the beginning
User Research Focusing on users from the beginning

28 User Research User Research Analysis Design Iterative Design
Prototyping & Testing Development

29 Discovering User Needs Through Direct Research
Observational Studies User Needs User Interviews User Surveys

30 Observational Studies
Observing how people currently perform work within their “live” context Observational Studies User Needs User Interviews User Surveys

31 Observational Studies
People aren’t able to fully articulate what they do Behavior is often automatic Important factors in the social and physical context are taken for granted

32 Example: Observational Study
Kitchen entertainment/information center Physical context of use is very important Frequent interruptions Work occurs in a variety of locations Cleanliness highly important

33 Example findings (user needs) Context of Use
User interface for system must be visible and controllable from a distance Touch screen has limitations for use Hands are frequently wet and/or dirty Stylus must be attached to unit

34 User Interviews Asking users to describe how they perform work and what they think about it Observational Studies User Needs User Interviews User Surveys

35 User Interviews Less open-ended than observational studies
Questions usually focus on getting information about particular user goals and tasks Best conducted in the environment where users perform work

36 Example: User Interviews
Web Site targeted at software developers How can we improve the information we provide to developers? Questions about how they seek information

37 Example findings (user needs)
Concentrate information on fewer pages To leverage using browser search function to find information Provide fresh technology news daily Very consistent pattern of proactive information seeking

38 User Surveys Asking people specific questions on use and satisfaction
Observational Studies User Needs User Interviews User Surveys

39 User Surveys The Internet makes these easy and inexpensive to deploy
Good for getting specific data on existing features

40 Example: User Survey Developer Web site
Used to get more data on specific issues identified in open-ended interviews

41 Example findings (user needs)
Optimize PDFs for on-screen use PDF Printouts used less frequently Replacing search engine is not a high priority Satisfaction level with current search technology is relatively high

42 User Research: Potential Pitfalls
Methods misapplied or executed poorly Results may point the wrong direction

43 Checking in with users each step along the way
Prototyping & Testing Checking in with users each step along the way

44 Prototyping & Testing User Research Analysis Design Iterative Design
Development

45 Early prototypes are low fidelity
They may be very exploratory designs Mostly, paper prototypes are used Pages may be hand-drawn or computer-drawn Goal: Get user feedback early when changes are easy to make

46 Low Fidelity vs. Final Design

47 Usability Testing of Prototypes
Create task scenarios Recruit participants to perform the tasks using the prototype Use the results of testing to fix any problems Repeat Steps 2-3

48 Conducting test sessions
Usually involves the “Think Aloud Protocol” (TAP) User expresses thoughts out loud as they perform tasks Clip shows testing a system in the final design stages

49 In the TAP the facilitator must remain neutral
Key to the success of the method Participants will look to the facilitator for reassurance May feel like they are “failing” the test Some participants become highly stressed Sessions can be long and unpredictable

50 How many users do you need to test?
Clients are initially skeptical But after watching the first set of sessions they believe You start seeing the same problems again & again Conserve your participant budget for additional rounds of testing

51 How much of the system do you test?
Some testing is always better than none There are always time and budget trade-offs Prioritize the most risky areas of a design Or focus on “mission-critical” areas such as the check-out flow for e-commerce sites

52 “Discount” Usability Methods

53 Reality Bites… The time and expertise for user-centered design may be absent on many projects Small projects Engineering-driven company culture Focus on internal thinking to solve design problems “We know what users want already”

54 Options Conduct a heuristic evaluation
Heuristics represent user interface design best practices Jakob Nielsen is a good starting point

55 Options Test with even one or two users
Nielsen: zero users yields zero insights

56 Options Test with internal people
They should have no involvement with the design Get folks close to the target audience as possible Risk of misleading information

57 Quit