BAB 12 PERANCANGAN USER INTERFACE Suprapto, ST, MT Quit

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.

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.

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

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

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

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

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

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

Rapid prototyping

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

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

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”

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

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

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!

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

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.

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

“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 www.iarchitect.com/mshame.htm

Many more interesting examples http://www.iarchitect.com/mshame.htm http://www.baddesigns.com

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

Reference Information for Java What frame controls what window?

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

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 !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Prototyping & Testing User Research Analysis Design Iterative Design Development

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

Low Fidelity vs. Final Design

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

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

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

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

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

“Discount” Usability Methods

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”

Options Conduct a heuristic evaluation Heuristics represent user interface design best practices Jakob Nielsen is a good starting point www.useit.com/papers/heuristic/

Options Test with even one or two users Nielsen: zero users yields zero insights http://www.useit.com/alertbox/20000319.html

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

Quit