Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Suprapto, ST, MT BAB 12 PERANCANGAN USER INTERFACE.

Presentasi serupa


Presentasi berjudul: "Suprapto, ST, MT BAB 12 PERANCANGAN USER INTERFACE."— Transcript presentasi:

1

2 Suprapto, ST, MT BAB 12 PERANCANGAN USER INTERFACE

3 Strategi Pengembangan Antarmuka Secara garis besar, pengembangan bagian antarmuka perlu memperhatikan beberapa hal sebagai berikut: Secara garis besar, pengembangan bagian antarmuka perlu memperhatikan beberapa hal sebagai berikut: Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer Berbagai informasi yang berhubungan dengan karakteristik dialog 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 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. Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses prototipe yang telah dilakukan.

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

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

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

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

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

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

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

11 Rapid prototyping

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

13 What is user-centered design? Pembuatan use interface dengan hanya mengacu pada contoh 2x desain yang sudah ada, bukan termasuk 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 Tapi user dalam hal ini aktif memberikan masukan terhadap desain User Interface yang diinginkan

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

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

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

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

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

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

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

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

22 Many more interesting examples

23 What is the problem with these designs? No designer purposes sets out to confuse or irritate users 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 Fallacy: the most usable design is OBVIOUS by thinking through interior thinking about the problem

24 Reference Information for Java What frame controls what window?

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

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

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

28 User Research Focusing on users from the beginning

29 User Research Analysis Design Prototyping & Testing Development Iterative Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

47 Low Fidelity vs. Final Design

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

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

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

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

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

53 “Discount” Usability Methods

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

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

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

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

58


Download ppt "Suprapto, ST, MT BAB 12 PERANCANGAN USER INTERFACE."

Presentasi serupa


Iklan oleh Google