TÌM HIỂU VỀ UI pptx

Basic Principle 1: Focus on the users and their tasks, not on the technology  Các cách khảo sát thu thập thông tin từ người dùng: ◦ Nói chuyện với người dùng.. ◦ Tìm hiểu những mối quan

Dos)

N i dung ộ

Chương 1: First Principles

Using the wrong control.

Using controls wrongly

Chương 2: GUI Control Bloopers.

Ch ươ ng 1: First Principles

 Basic Principle 1: Focus on the users and their tasks, not on the technology

 Basic Principle 2: Consider function first, presentation later

 Basic Principle 3: Conform to the users’ view of the task

Trình bày: 1041448 Hoàng Nguy n Minh Tu n ễ ấ

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Tìm hiểu người dùng

 Tìm hiểu các nghiệp vụ của người dùng

 Tìm hiểu môi trường hoạt động của ứng dụng

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Tìm hiểu người dùng

◦ Xác định người dùng ứng dụng là ai ?

◦ Khảo sát tính cách của người dùng.

◦ Cộng tác với người dùng để hiểu họ nhiều hơn.

◦ Kết quả cuối cùng của quá trình này

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Các cách khảo sát thu thập thông tin từ người dùng:

◦ Nói chuyện với người dùng.

◦ Mời người dùng tham gia vào nhóm.

◦ Quan sát môi trường thực tế của người dùng.

◦ Tìm hiểu những mối quan hệ của người dùng

và tìm hiểu nghiệp vụ của họ.

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Kết quả cuối cùng của quá trình này:

 Nghề nghiệp của người dùng là gì.

 Thâm niên trong nghề của người dùng như thế nào.

 Trình độ học vấn.

 Mức lương hiện tại.

 …

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Tìm hiểu nghiệp vụ của người dùng

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Khảo sát, tìm hiểu những nghiệp vụ dự định triển khai

Hình thức Ưu điểm Nhược điểm

Phỏng vấn Cung cấp thông tin

giải thích, mục tiêu,

lý do, và những thông tin khác mà việc quan sát trực tiếp không có được.

Có thể đưa ra những thông tin sai lệch.

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Kết quả thu hoạch được ở quá trình này:

◦ Những nghiệp vụ nào là phổ biến, và những nghiệp vụ nào ít phổ biến hơn?

◦ Những nghiệp vụ nào là quan trọng nhất và những nghiệp vụ nào là ít quan trọng nhất?

◦ Thứ tự các bước thực hiện mỗi nghiệp vụ ?

◦ Kết quả sau cùng của mỗi nghiệp vụ là như thế nào?

◦ ….

Basic Principle 1: Focus on the users and their tasks, not on the technology

 Tìm hiểu môi trường mà ứng dụng sẽ hoạt động

Basic Principle 2: Consider function first,

presentation later

 Phát triển những mô hình quan niệm

 Thiết kế giao diện người dùng dựa trên

mô hình quan niệm đã phân tích

 Dựa vào những đối tượng và hành động

để bắt đầu phát triển phần mềm

Basic Principle 2: Consider function first,

presentation later

 Phát triển những mô hình quan niệm

◦ Mô hình quan niệm là mô hình mà người thiết

kế muốn người dùng hiểu được.

◦ Mô hình quan niệm nhấn mạnh những vấn đề liên quan đến quan niệm về nghiệp vụ của

người dùng như:

 Người dùng tương tác dữ liệu như thế nào?

 Dữ liệu sẽ tổ chức như thế nào?

 Người dùng sẽ làm gì trên những dữ liệu đó?

Basic Principle 2: Consider function first,

presentation later

 Các bước phát triển mô hình quan niệm

◦ Tập trung những nghiệp vụ quen thuộc với người dùng.

◦ Phân tích đối tượng và hành động mức quan niệm

◦ Xác định mối quan hệ giữa các đối tượng.

◦ Phát triển từ điển ứng dụng.

◦ Viết kịch bản cho các nghiệp vụ.

Basic Principle 2: Consider function first,

presentation later

 Phân tích đối tượng và hành động mức quan niệm:

 Ví dụ: phần mềm kiểm tra việc checking tài khoản

 objects sẽ gồm: transaction, check, account (những object trực tiếp liên quan đến task).

 Những object không trực tiếp liên quan đến task: buffer, dialog box, mode, database, table, string.

 Những actions sẽ được add là: writing, deposit, withdrawing, balance account,

 Những actions không được add là: clicking buttons, loading databases, editing table rows.

 Những attribute được add như sau: Checks(payee, number, memo, date);

Account(owner, balance); Transactions(deposit, withdraws, amount, date).

 Những attribute không được add là: Accounts(encryption type)

Basic Principle 2: Consider function first, presentation later

 mối quan hệ giữa các đối tượng:

Basic Principle 3: Conform to the users’ view

of the task

 Hướng đến những hành động tự nhiên của người dùng

 Sử dụng ngôn ngữ của người dùng

 Tập trung những ứng dụng nào cần thiết cho người dùng

 Giảm sự phức tạp cho ứng dụng

Basic Principle 3: Conform to the users’ view

◦ Cung cấp giao diện sử dụng step-by-step (wizards).

◦ Tinh giản những tính năng có liên quan với nhau.

Basic Principle 3: Conform to the users’ view

of the task

 Cung cấp những mẫu thiết lập sẵn cần

thiết cho người dùng

Basic Principle 3: Conform to the users’ view

of the task

 Cung cấp giao diện sử dụng step-by-step

(wizards).

Basic Principle 3: Conform to the users’ view

of the task

 Tinh giản những tính năng có liên quan với

nhau:

Ch ươ ng 1: First Principles

 Basic Principle 4: Design for the common case

 Basic Principle 5: Don’t distract users

from their goals

 Basic Principle 6: Facilitate learning

Trình bày: 1041165 Lê Th H ng Vi ị ồ

Basic Principle 4: Design for the common case

 Tại sao cần thiết kế phổ biến?

Phổ biến ở đây chúng ta đề cập tới vấn

đề tiện dụng đối với người dùng.

Đ a ra k t qu d dàng khi s d ngư ế ả ễ ử ụ

 Đoán trước được mục tiêu của người dùng thường là giao diện đơn giản, thân thiện

dễ sử dụng Không mất quá nhiều thời

gian, các nhà phát triển phầm mềm nên

giảm sự phức tạp của giao diện, hướng dẫn cài đặt…để nâng cao hiệu quả công việc Đó là tất cả những gì người dùng

mong muốn

Có 2 kiểu phổ biến: “1 Có bao nhiêu

người sử dụng” và “Tần xuất sử dụng”

 Một phầm mềm được đánh giá tối ưu phụ

thuộc vào hai yếu tố:

Có bao nhiêu người sử dụng tính năng

này?

nhiêu, họ có cần và sử dụng thường

xuyên không?

Một số tóm tắt về các quy tắc thiết kế:

 Tính năng thường xuyên hơn sẽ được sử dụng nhiều hơn.

Tính năng thường xuyên hơn sẽ được sử dụng nhiều hơn.

 Bên cạnh đó khi bạn thiết

kế một form có thể có

những control như xử lý

một button insert,

delete…

Nổi bật và dễ nhìn thấy

 Để một phầm mềm nổi bật và dễ nhìn thấy thì

cần sử dụng đến biểu tượng

Basic Principle 5: Don’t distract users

from their goals

 Tính t p trung và thuy t ph c ngậ ế ụ ười

dùng

◦ Xác định mục tiêu của người dùng, nội dung và đối tượng

sử dụng bám sát yêu cầu của họ.

◦ Không cố gắng gây ấn tượng với những thiết kế phức tạp nên làm cho phần mềm đơn giản

◦ Hỗ trợ người dùng giải quyết vấn đề cần thiết của họ.

 Thu hút ngườ ử ụi s d ng

◦ Các chức năng điều khiển, lệnh và các thiết lập trong giao diện người dùng phải rõ ràng.

Basic Principle 5: Don’t distract users

from their goals

Basic Principle 6: Facilitate learning

 Hi u t ngoài vào trong ể ừ

Gán nhãn rõ ràng

 Nên gán nhãn rõ ràng cho một button khi muốn truyền đạt chức năng đó cho người dùng

Hình nh rõ ràngả

 Hình ảnh cần phải rõ ràng, không mơ hồ

như vậy sẽ tránh

được sự nhầm lẫn của người dùng

M c r i ro th pứ ủ ấ

 Để tránh mức rủi ro thấp nhất cho dự án phầm mềm nên phân tích, kiểm soát và giám sát thường xuyên

Ch ươ ng 1: First Principles

 Basic Principle 7: Deliver information, not just data

 Basic Principle 8: Design for responsiveness

 Basic Principle 9: Try it out on users, then

fix it!

Trình bày: 1041141 Phan Th Th ị ươ ng

Basic Principle 7: Deliver information, not just data

 D li u không ph i là thông tin Ng ữ ệ ả ườ i ta l y thông tin t d li u ấ ừ ữ ệ

 Ph n m m nên t p trung s chú ý c a ng ầ ề ậ ự ủ ườ i dùng vào các d li u ữ ệ quan tr ng và giúp h có đ ọ ọ ượ c nh ng thông tin c n thi t ữ ầ ế

 Thi t k màn hình c n th n, nh đ n s tr giúp chuyên ế ế ẩ ậ ờ ế ự ợ nghi p ệ

◦ Hi n th giao di n m t cách có th t và tr c quan, rõ nét cho ng ể ị ệ ộ ứ ự ự ườ i dùng

VD: Tìm văn bản được chọn trong mỗi màn hình máy tính

Basic Principle 7: Deliver information, not just data

Basic Principle 8: Design for responsiveness

◦ Đáp ng đ ứ ượ c đánh giá trong đi u ki n phù ề ệ

h p v i yêu c u th i gian c a con ng ợ ớ ầ ờ ủ ườ i, và

cu i cùng là s hài lòng c a ng ố ự ủ ườ i dùng.

Basic Principle 8: Design for responsiveness

 Đ có th đáp ng cho ngể ể ứ ười dùng thì ph n ầ

m m tề ương tác ph i:ả

◦ Cho ng ườ i dùng bi t khi nào ph n m m b n ế ầ ề ậ

◦ Ng ườ i dùng t do đ làm nh ng th khác trong ự ể ữ ứ khi ch đ i m t ch c năng đ k t thúc ờ ợ ộ ứ ể ế

Basic Principle 8: Design for responsiveness

 Đ có th đáp ng cho ngể ể ứ ười dùng thì

ph n m m tầ ề ương tác ph i:ả

◦ Cho phép người dùng h y b các ho t đ ng ủ ỏ ạ ộ

kéo dài h không mu n ọ ố

◦ Cho phép người dùng đ đánh giá ho t đ ng ể ạ ộ

th i gian s m t bao nhiêu ờ ẽ ấ

Basic Principle 9: Tr y it out on users, then fix it!

 Kiểm tra sớm và thường xuyên

 Kết quả thử nghiệm có thể gây bất ngờ với các nhà thiết kế giàu kinh nghiệm

 Lịch trình thời gian cho các vấn đề chính xác được tìm thấy bằng các cuộc kiểm thử

 Thử nghiệm có hai mục tiêu:

◦ Mục tiêu thông tin

◦ Mục tiêu xã hội

Basic Principle 9: Try it out on users, then fix it!

Chương 2: GUI Control Bloopers

Using the wrong control

Trình bày: 1041011 Vũ Thị Hồng Ánh

What is a GUI blooper?

họa người dùng là một thuật ngữ trong ngành

công nghiệp máy tính Đó là một cách giao tiếp với máy tính hay các thiết bị điện tử bằng hình ảnh và chữ viết thay vì chỉ là các dòng lệnh đơn thuần GUI được sử dụng phổ biến trong máy tính, các thiết bị cầm tay, các thiết bị đa phương tiện, hoặc các linh kiện điện tử trong văn phòng, nhà ở

 (Nguồn: http://vi.wikipedia.org/wiki/GUI )

What is a GUI blooper?

 GUI Blooper là những lỗi hay những sai

lầm mà một nhà thiết kế thường hay mắc phải trong quá trình thiết kế giao diện

người dùng

 (Nguồn: Sách của

Morgan.Kaufmann.GUI.Bloopers.2.0.S ep.2007)

 Một số phần mềm được thiết kế bởi các lập trình viên thiếu kinh nghiệm trong khi thiết kế giao diện người dùng.

 Ngay cả trong một số tổ chức phát triển lớn,

không có ai được đào tạo thiết kế giao diện

người dùng, hoặc số người được đào tạo là rất ít

và không được đào tạo một cách chuyên nghiệp.

 Mục tiêu chính của cuốn sách này là để giúp các nhà phát triển và người thiết kế giao diện tránh được những sai lầm khi họ thiết kế.

Who should read GUI Bloopers 2.0?

 Những người mới bắt đầu thiết kế giao diện người dùng

 Nhóm quản lý và phát triển phần mềm

Blooper 1: Confusing checkboxes and radio buttons

 Một blooper phổ biến là sự nhầm lẫn giữa các checkboxes và các radio buttons

Variation A: Single radio button

Variation B: Checkboxes as radio buttons

 Sử dụng các checkboxes sai mục đích

giống như việc sử dụng các radio buttons

Lời khuyên:

 Sử dụng các checkboxes và các radio

buttons một cách rõ ràng và phân biệt

 Sử dụng một nhóm các nút radio buttons đại diện cho một sự lựa chọn điều khiển duy nhất

Blooper 2: Using a checkbox for a non-ON/OFF setting

 Đôi khi checkbox được sử dụng để hiển thị một sự lựa chọn giữa hai tùy chọn mà không phải là đối lập

Lời khuyên khi thiết lập một checkbox

ON/OFF:

 Các checkboxes không phù hợp cho các thiết lập có hai giá trị nonopposite Sử

dụng chúng chỉ cho các thiết lập nhị phân

mà hai giá trị là tự nhiên, rõ ràng, đối lập, chẳng hạn như On/Off, True/False, Color B&W, hoặc Present/Absent

Blooper 3: Using command buttons as toggles

 Các buttons thực hiện việc gọi một hành động hoặc kích hoạt một sự kiện nào đó Các Command buttons đôi khi sử dụng không đúng như các toggle controls

Lời khuyên khi sử dụng command buttons:

 Sử dụng các command buttons một cách

rõ ràng và riêng biệt

Blooper 4: Using tabs as radio buttons

 Các tabs thường được sử dụng không đúng như các radio buttons: hiện các sự lựa chọn

có ảnh hưởng đến ứng dụng sẽ làm, chứ

không phải là để chọn bảng điều khiển được hiển thị.

Lời khuyên:

 Thay vì sử dụng các tabs cho một sự lựa chọn duy nhất, nên sử dụng các control khác như combobox hay Drop down

Menu…

Blooper 5: Too many tabs

 Tabbled panels là tiết kiệm không gian, Tabbled panels cung cấp một giao diện quen thuộc cho người dùng với tabbled sheets(trong Exel), notebooks và các

folders

 Tuy nhiên, quy mô các tab sử dụng vượt quá giới hạn, thì việc sử dụng nhiều tabs lại không là giải pháp tốt

Variation A: Wagging the dog

 Việc sử dụng quá nhiều tabs sẽ tạo sự nhầm lẫn và gây khó chịu cho thị giác của người dùng

Variation B: Tabs to the left of us, tabs to the right of us, tabs all around us!

Variation D: Dancing tabs

Blooper 6: Using input controls for display-only data

 Using Noneditable text fields

Lời khuyên:

 Dữ liệu Noneditable không bao giờ được hiển thị trong một control, cái mà có thể edit hoặc có thể active

 Noneditable nên được hiển thị bằng cách

sử dụng một label control.

Blooper 7: Overusing text fields for constrained input

 Myth: Text fields are easier to code

Lời khuyên:

Ghi chú và kiểm tra tính hợp lệ của các text fields quan trọng

Thay thế các

text fields bằng

cách sử dụng các controls tiện dụng cho người dùng

Chương 2: GUI Control Bloopers

Using controls wrongly

Trình bày: 1041433 Nguy n Th Th y Tiên ễ ị ủ

Blooper 8: Dynamic menus

Items trên menu xu t hi n và bi n m t ph thu c vào l a ấ ệ ế ấ ụ ộ ự

ch n hi n t i c a ngọ ệ ạ ủ ười dùng.

Blooper 8: Dynamic menus

Items trên menu xu t hi n và bi n m t ph thu c vào tr ng ấ ệ ế ấ ụ ộ ạ

thái c a chủ ương trình.

Sybase PowerBuilder :

Blooper 8: Dynamic menus

Để tránh Blooper 8:

 Menu c a menubar c n n đ nhủ ầ ổ ị

Blooper 8: Dynamic menus

Để tránh Blooper 8:

Photoshop CS6: Khi ch a m file như ở ả

Blooper 8: Dynamic menus

Để tránh Blooper 8:

Photoshop CS6: Khi đã m file nhở ả

Blooper 8: Dynamic menus

Để tránh Blooper 9:

Thêm và lo i b menu, ch không ph i là item c a menu:ạ ỏ ứ ả ủ

Blooper 9: Intolerant data fields

United.com không ch p nh n nh p s Frequent Flier có kho ng ấ ậ ậ ố ả

tr ng.ắ

Blooper 9: Intolerant data fields

StuffIt.com:không ch p nh n nh p s th tín d ng có kho ng ấ ậ ậ ố ẻ ụ ả

tr ng.ắ

Blooper 9: Intolerant data fields

Website: https://www.vietinbank.vn/OnlineRegister/

Để tránh Blooper 9:

Độ dài của trường dữ liệu: đủ chứa dữ liệu

Tự động di chuyển khi số lượng yêu cầu nhập

đã được gõ.

Blooper 9: Intolerant data fields

 Cung cấp một khuôn mẫu định dạng hợp lệ

 Cấu trúc trường văn bản phải theo định dạng quốc tế.

Blooper 10: Input fields and controls with no default

Lý do để bỏ qua mặc định:

 Không có mặc định hợp lý

Blooper 10: Input fields and controls with no default

Lý do để bỏ qua mặc định:

Link: http://www.canada.gc.ca/

Yêu cầu về mặc xã hội, chính trị, pháp luật:

Blooper 10: Input fields and controls with no default

Lý do để có mặc định:

Blooper 10: Input fields and controls with no default

Để tránh Blooper 10:

Blooper 10: Input fields and controls with no default

Để tránh Blooper 10:

Blooper 10: Input fields and controls with no default

Để tránh Blooper 10:

Blooper 11: Poor defaults, M c đ nh ặ ị

kém ch t lấ ượng.

Giả sử: giá trị mặt đinh quốc gia của website vinabook.vn

website http://www.vinabook.com

Blooper 11: Poor defaults, M c đ nh ặ ị

kém ch t lấ ượng.

http://www.agoda.vn

Giả sử: website Agoda.vn được xây dựng năm 2004