ch ng 8 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CHƯƠNG 8 PowerPoint Presentation
Download Presentation
CHƯƠNG 8

Loading in 2 Seconds...

play fullscreen
1 / 109

CHƯƠNG 8 - PowerPoint PPT Presentation


  • 290 Views
  • Uploaded on

CHƯƠNG 8. THIẾT KẾ Lấy người dùng làm trung tâm. 1. 2. 3. 4. Định hướng thiết kế hướng đến người dùng. Phương pháp làm việc với người dùng. Làm việc với khách hàng. Thiết kế hướng đến người dùng. Nội dung. Những vấn đề chung Xem xét Bảy nguyên tắc Quy trình

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CHƯƠNG 8' - sugar


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
ch ng 8

CHƯƠNG 8

THIẾT KẾ

Lấy người dùng làm trung tâm

n i dung

1

2

3

4

Định hướng thiết kế hướng đến người dùng

Phương pháp làm việc với người dùng

Làm việc với khách hàng

Thiết kế hướng đến người dùng

Nội dung

NMLT - Mảng hai chiều

slide3
Những vấn đề chung

Xem xét

Bảy nguyên tắc

Quy trình

Làm việc với người dùng

Định hướng thiết kế hướng đến người dùng

slide4
Những vấn đề chung

Thiết kế theo ngữ cảnh công việc

Xem người sử dụng như là một thành viên của nhóm thiết kế

Người sử dụng cộng tác tích cực trong qui trình thiết kế

Người sử dụng tham gia vào nhóm thiết kế và cóthể đóng góp tích cực ở mọi giai đoạn của qui trình thiết kế

Dùng phương pháp lặp

Định hướng thiết kế hướng đến người dùng

slide5
Xem xét

Khả năng sử dụng

Sử dụng hướng dẫn

Dùng ngôn ngữ

Thiết kế trực quan

Định hướng thiết kế hướng đến người dùng

slide6
Khả năng sử dụng

Cải thiện khả năng sử dụng của sản phẩm

Cho phép thử nghiệm để quan sát và ghi lại cáchành động của người tham gia

Cho phép thử nghiệm phân tích dữ liệu

Thực hiện

Quay phim

Phỏng vấn

Bảng câu hỏi

Định hướng thiết kế hướng đến người dùng

slide7
Sử dụng hướng dẫn

Tầm nhìn

Tra cứu danh mục

Vấn đề Lỗi

Dễ dùng, rõ ràng

Định hướng thiết kế hướng đến người dùng

slide8
Dùng ngôn ngữ

Để rõ ràng cần sử dụng

Câu ngắn

Từ phổ thống thay cho từ kỹ thuật

Hoạt động bằng giọng nói

động từ

Cấu trúc câu đơn giản

Cẩn thận với sự mơ hồ trong các hình thức

Hài hước

Phép ẩn dụ

Các biểu tượng

Thành ngữ

Định hướng thiết kế hướng đến người dùng

slide9
Thiết kế trực quan

Sử dụng lưới

Đơn giản và gọn gàng

Sử dụng đồ họa

Minh họa/ Thông báo

Tăng sự hài lòng của người sử dụng

Có dung lượng nhỏ

Nổi bật các yếu tố quan trọng nhất

Xử dụng văn bản như là một yếu tố đồ họa

Dè dặt với màu sắc

Nhóm các yếu tố với nhau

Định hướng thiết kế hướng đến người dùng

slide10
Bảy nguyên tắc

1. Sử dụng kiến thức trong đầu và trên thế giới

2. Đơn giản cấu trúc nhiệm vụ

3. Làm cho mọi điều dễ nhìn thấy

4. Nhận quyền ánh xạ

5. Khai thác sức mạnh của những khó khăn (tự nhiên và nhân tạo)

6. Thiết kế cho lỗi

7. Tiêu chuẩn

Định hướng thiết kế hướng đến người dùng

slide11
Bảy nguyên tắc

1. Sử dụng kiến thức trong đầu và trên thế giới

2. Đơn giản cấu trúc nhiệm vụ

3. Làm cho mọi điều dễ nhìn thấy

4. Nhận quyền ánh xạ

5. Khai thác sức mạnh của những khó khăn (tự nhiên và nhân tạo)

6. Thiết kế cho lỗi

7. Tiêu chuẩn

Định hướng thiết kế hướng đến người dùng

slide12
Qui trình

Tiêu chuẩn ISO 13407

Con người là trung tâm của quy trình thiết kế

Xác định một quá trình chung mà bao gồm cả conngười như một trung tâm hoạt động trong suốt chu kỳ thiết kế

Bốn hoạt động hình thức

Các ngữ cảnh sử dụng

Các yêu cầu

Các giải pháp

Thẩm định

Định hướng thiết kế hướng đến người dùng

slide13
Hiểu nhu cầu người dùng

Câu lưu tâm người ta tốt hay xấu ở những điểm nào

Quan tâm nhưng gì có thể giúp người ta theo cáchthức mà họ hiện đang làm việc

Suy nghĩ qua những gì có thể cung cấp chất luợng cho trải nghiệm của người dùng

Lắng nghe những gì người dùng muốn và đưa chúng vào thiết kế

Thử và kiểm tra việc sử dụng theo phương phápcủa người sử dụng

Định hướng thiết kế hướng đến người dùng

slide14
Làm việc với người dùng

Suy nghĩ cẩn thận về người sử dụng là ai

Lắng nghe người dùng thảo luận về các giải pháp thay thế

Không phải tất cả các giải pháp thiết kế được đánhgiá bởi người sử dụng đều tốt cả

Định hướng thiết kế hướng đến người dùng

slide15

2

Phân tích thiết kế UI ở mức rất cao

Vòng đời kỹ nghệ giao diện người sử dụng.

  • Nhận biết ai là người sử dụng.
  • Đo lường tính sử dụng được.
  • Thiết kế tương tác hướng mục tiêu.
  • Thiết kế lặp, bao gồm: làm bản mẫu và đánh giá tính sử dụng được.
  • Nghiên cứu tính phản hồi
slide16

2

Phân tích thiết kế UI ở mức rất cao

Nhận biết người sử dụng (Know the User)

  • Quan sát, phỏng vấn số đông, hình thành lý lịch người dùng(user profile).
  • Nhận biết các mục tiêu, quan điểm, thái độ của user đối với phần mềm
  • Họ có kỹnăng gì và mức độ tới đâu?
  • Họ sử dụng hệ thống như thế nào?
  • Hình thành các kịch bản người sử dụng điển hình.
    • Phân lớp người sử dụng theo kinh nghiệm, trình độ học vấn, tuổi tác,…
slide17

2

Phân tích thiết kế UI ở mức rất cao

Đo tính sử dụng được (Benchmarking)

  • Phân tích các sản phẩm hay phân tích các giao diện cạnh tranh theo khám phá (heuristic:khả năng tích lũy tri thức) và kinh nghiệm.
  • Mục tiêu là xác định mức độ tính sử dụng được so với các hệ thống khác
  • Thiết lập mức độ tính sử dụng được đối với giao diện đang thiết kế

Vd: Hệ thống hiện tại sinh 4.5 lỗi/giờ->Mục tiêu của hệ thống mới sẽ là 3 lỗi/giờ hoặc trên website người mới sử dụng mất 8 phút 21 giây mới đặt được vé, mục tiêu của website mới là 6 phút cho công việc này

slide18

2

Phân tích thiết kế UI ở mức rất cao

Thiết kế tương tác hướng mục tiêu (Goal-Oriented Iteraction Design)

  • ID đưa ra sự ghép nối giữa mã trình hệ thống và người sử dụng. UI có trách nhiệm thực hiện việc trao đổi thông điệp giữa chúng
  • ID đề cập đến thiết kế chức năng, hành vi và thiết kế trình diễn cuối cùng.
  • GOID là thiết kế phần mềm trên cơ sở hiểu các mục tiêu của con người.
slide19

2

Phân tích thiết kế UI ở mức rất cao

Thiết kế tương tác hướng mục tiêu (Goal-Oriented Iteraction Design)

  • Mục tiêu(goal) là cái đích, là trạng thái mà người sử dụng muốn đạt tới.
  • Nhiệm vụ (task) là con đường cụ thể để đạt tới mục tiêu(cách thức), là con đường mà người sử dụng muốn thực hiện.
    • Ví dụ :Goal :cần có gì để ăn, Task: đến tiệm, hoặc gọi dịch vụ cơm hộp hoặc ra siêu thị mua về nấu,… Có nhiều cách để đạt mục tiêu
    • Nhiệm vụ thì thay đổi, mục tiêu thì không
slide20

2

Phân tích thiết kế UI ở mức rất cao

Thiết kế lặp (Iteractive Design)

  • Thiết kế, kiểm thử, tái thiết kế: xây dựng, đánh giá bản mẫu. Làm bản mẫu sẽ sớm phát hiện những thiếu sót của tính sử dụng được.
  • Thực hiện vòng lặp sau cho đến khi hết thời gian hay hết kinh phí :
    • Phát hiện các vấn đề liên quan đến tính sử dụng được.
    • Thực hiện sửa chữa các lỗi, hình thành các giao diện mới.
    • Thu thập và lưu trữ các lý do thay đổi thiết kế
    • Cuối cùng là đánh giá phiên bản giao diện mới
slide21

2

Phân tích thiết kế UI ở mức rất cao

Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho phép user tra cứu sách trong thư viện

Vòng 1:

  • Các vấn đề liên quan: thông tin về quyển sách cần tra cứu, thường chỉ là tên quyển sách
  • Thực hiện giao diện
  • Lý do thay đổi thiết kế : độc gỉa muốn thông tin về tác giả ?
  • Đánh giá : tìm đúng loại sách và tác giả
slide22

2

Phân tích thiết kế UI ở mức rất cao

Bài tập: Dùng pp thiết kế lặp để thiết kế gd cho phép user tra cứu sách trong thư viện

Vòng 2:

  • Vấn đề liên quan: thông tin thêm về quyển sách cần tra cứu-> nhà xuất bản
  • Thực hiện giao diện
  • Lý do thay đổi thiết kế : độc gỉa muốn thông tin về nhà xuất bản ?
  • Đánh giá phiên bản mới: tìm đúng loại sách và tác giả, nhà xuất bản,…

Vòng 3 :

  • Xuất hiện thêm: năm xuất bản, thêm loại như tạp chí, tài liệu, …
slide23

2

Phân tích thiết kế UI ở mức rất cao

Bài tập:

Dùng pp thiết kế lặp để thiết kế gd Web cho phép bán quần áo

Thiết kế gd Web bán mỹ phẩm

slide24

2

Phân tích thiết kế UI ở mức rất cao

Nghiên cứu tiếp theo (Follow-Up Studies)

Các dữ liệu về tính sử dụng được cần được thu thập sau khi phân phát sản phẩm là quan trọng cho phiên bản tiếp theo.

Để có dữ liệu này, ta thực hiện nghiên cứu bằng các phương pháp phỏng vấn, quan sát, lấy ý kiến của người sử dụng trên báo chí, email, dữ liệu log từ phần mềm,…

slide25

3

  • Mục đích của phương pháp thiết kế hướng người sử dụng là để thiết kế ra hệ thống sao cho con người sử dụng chúng một cách thuận tiện
  • Khác với thiết kế truyền thống, thiết kế hướng người sử dụng trước hết tập trung vào mục tiêu, mô hình khái niệm, khả năng và ràng buộc của người dùng.
  • Nó đòi hỏi phải giao tiếp với người sử dụng trong suốt quá trình thiết kế.
  • Để thiết kế thành công thì người thiết kế phải dành nhiều thời gian với người sử dụng, quan sát công việc họ làm, họ là đối tượng nào?

Thiết kế hướng người sử dụng

slide26

3

Thiết kế hướng người sử dụng

Các bước thiết kế hướng người sử dụng

  • Người thiết kế hiểu sâu sắc/chi tiết về người sử dụng cuối cùng, nhiệm vụ của họ, yêu cầu về tính sử dụng được của hệ thống,…
  • Người sử dụng cuối cùng đóng vai trò tích cực trong đội ngũ thiết kế, trong giai đoạn phân tích và thiết kế. Nếu chỉ tham gia phỏng vấn ở giai đoạn trước là chưa đủ. Họ thường đưa ra câu hỏi:”Tôi sẽ sử dụng cái này để thực hiện công việc của tôi như thế nào?”
  • Lặp lại tiến trình thiết kế
  • Người thiết kế và người sử dụng cùng nhau đánh giá hệ thống, sau đó đưa ra đề xuất sớm nhất và thực hiện hiệu chỉnh nếu cần.
slide27

3

Thiết kế hướng người sử dụng

Các bước thiết kế hướng người sử dụng

Chú ý:

  • Việc tham gia của người sử dụng là đặc biệt quan trọng nhưng người sử dụng không phải là người thiết kế, họ không thiết kế cái gì và họ không phải luôn luôn đúng. Hơn nữa, thông thường người sử dụng ít hiểu biết và ít kinh nghiệm về thiết kế giao diện
  • Tiến trình tương tác giữa người thiết kế và người sử dụng trong quá trình phát triển UI được gọi là phân tích người sử dụng và phân tích nhiệm vụ
slide28

3

Thiết kế hướng người sử dụng

Phân tích người sử dụng:

Khẳng định tầm quan trọng của thiết kế lặp đối với giao diện người sử dụng

Sau một số lần lặp của thiết kế, chúng ta có thể có hệ thống phần mềm với tính sử dụng cao. Nhưng khởi đầu thiết kế như thế nào và thu thập thông tin cho thiết kế ban đầu bằng cách nào?

Tiến trình thu thập thông tin cho thiết kế lần đầu tiên gọi là phân tích người sử dụng và phân tích nhiệm vụ.

slide29

3

Thiết kế hướng người sử dụng

Mục tiêu của phân tích người sử dụng :

  • Nhận biết ai là người sử dụng hệ thống phần mềm do ta thiết kế
  • Họ có kỹ năng gì và mức độ của họ tới đâu?
  • Họ sử dụng hệ thống như thế nào?
slide30

3

Thiết kế hướng người sử dụng

Hai nhiệm vụ chính của phân tích người sử dụng:

  • Nhận biết các yếu tố quan trọng của người sử dụng:
    • Tuổi, nam/nữ, dân tộc
    • Học vấn
    • Khả năng vật lý
    • Kinh nghiệm sử dụng máy tính
    • Các kỹ năng (gõ phím, đọc,…)
    • Kinh nghiệm chuyên môn, nghiệp vụ
    • Tần suất sử dụng hệ thống
    • Môi trường làm việc và ngữ cảnh xã hội khác
    • Quan hệ giao tiếp, nền văn hóa
slide31

3

Thiết kế hướng người sử dụng

Hai nhiệm vụ chính của phân tích người sử dụng:

  • Phân nhóm người sử dụng theo các yếu tố, mỗi nhóm cùng chia sẻ các đặc tính tương tự:
    • Các mức độ kỹ năng sử dụng máy tính và kỹ năng nghiệp vụ, phân nhóm người sử dụng thành nhóm người mới bắt đầu, nhóm người học việc, nhóm người có kinh nghiệm và nhóm chuyên gia.
    • Các mức độ tần suất sử dụng hệ thống: phân nhóm người sử dụng thành nhóm người sử dụng thường xuyên và nhóm thỉnh thoảng sử dụng phần mềm.
slide32

3

Thiết kế hướng người sử dụng

Bài tập:

  • Cho biết các yếu tố quan trọng của user là trẻ em độ tuổi từ 6->11.
  • Các yếu tố quan trọng của user là người trưởng thành
  • Đối với người trưởng thành : phân chia theo độ tuổi, trình độ học vấn, kỹ năng sử dụng máy tính, kỹ năng chuyên môn,
  • Nêu các kết quả phân tích người sử dụng là nhân viên ngân hàng, nhân viên trực tổng đài điện thoại, thu ngân, thủ thư, …
slide33

3

Thiết kế hướng người sử dụng

Ai là người sử dụng?

  • Lý do để phân tích người sử dụng là rõ ràng : người thiết kế không phải là người sử dụng, do đó phải tìm ra ai thực sự là người sử dụng
  • Có khi người phát triển UI cho rằng phân tích người sử dụng là hiển nhiên và bỏ qua bước này, có thể dẫn đến làm hỏng giao diện hệ thống
  • Việc hiểu biết về người sử dụng không chỉ có ý nghĩa là hiểu biết về tính cách của từng cá nhân mà còn cả về tình huống sử dụng hệ thống của họ. Họ sử dụng phần mềm trong môi trường nào? Cái gì làm họ mất tập trung? Ngữ cảnh xã hội là gì?
slide34

3

Thiết kế hướng người sử dụng

Ai là người sử dụng?

  • Khía cạnh khác cần quan tâm về tình huống người sử dụng là quan hệ của họ với người sử dụng khác trong cùng tổ chức. Vấn đề là người sử dụng có thể giúp đỡ nhau trong khi sử dụng hệ thống UI hay họ làm việc độc lập?
  • Mỗi ứng dụng có thể có nhiều nhóm người sử dụng khác nhau.
slide35

3

Thiết kế hướng người sử dụng

Phân tích người sử dụng như thế nào?

  • Tìm ra một số người đại diện và phỏng vấn họ, các tính chất nổi bật có thể được bộc lộ sau khi trả lời bằng bảng câu hỏi thăm dò
  • Các chi tiết về ngữ cảnh và môi trường có thể được thu thập bằng cách phỏng vấn trực tiếp người sử dụng, tốt nhất là quan sát người sử dụng thực hiện nhiệm vụ hằng ngày của họ như thế nào.
  • Thực tế rất khó tiếp cận người sử dụng. Các công ty có thể dựng nên các rào cản giữa người sử dụng và người phát triển để bảo vệ lẫn nhau. Nếu biết ai là người phát triển, thì người phát triển có thể bị quấy rầy bởi các lỗi phần mềm và các câu hỏi về phần mềm, mà lẽ ra để dành cho các nhân viên kỹ thuật.
slide36

3

Thiết kế hướng người sử dụng

Thí dụ về phân tích người sử dụng :

  • Giả sử nhiệm vụ đặt ra là thiết kế hệ thống cho phép người mua tạp hóa và thanh toán tiền (tự thanh toán). Kết quả phân tích người sử dụng như sau:
    • Ai là người sử dụng (đối tượng sử dụng):
      • người mua tạp hóa, mua sắm
      • Tuổi tác, khả năng hoạt động (năng động, thích ứng, phù hợp,…)
      • Kinh nghiệm sử dụng máy tính(căn bản, thường xuyên,…)
      • Không được đào tạo bài bản
      • Có hiểu biết về thực phẩm nhưng không hiểu biết về kỹ thuật phân loại thực phẩm, kỹ thuật kiểm kê hàng hóa,…
slide37

3

Thiết kế hướng người sử dụng

Thí dụ về phân tích người sử dụng :

  • Giả sử nhiệm vụ đặt ra là thiết kế hệ thống cho phép người mua tạp hóa và thanh toán tiền (tự thanh toán). Kết quả phân tích người sử dụng như sau:
    • Nhóm người sử dụng chính:
      • phụ nữ thường xuyên mua sắm thực phẩm cho gia đình và thường dẫn theo trẻ em.
      • Các đối tượng khác
      • Nhân viên bán hàng giúp khách hàng
slide38

3

Thiết kế hướng người sử dụng

Ví dụ 2 về phân tích nhóm người sử dụng theo các yếu tố quan trọng

Yêu cầu: phát triển hệ thống phần mềm kế toán cho các doanh nghiệp nhỏ

  • Mức độ kỹ năng sử dụng máy tính: bắt đầu (15%), học việc(30%), kinh nghiệm(45%), thành thạo(10%)
  • Mức độ kỹ năng kế toán: bắt đầu (5%), học việc(15%), kinh nghiệm(50%), thành thạo(30%)
  • Tần suất sử dụng hệ thống: người ít dùng(20%), người hay dùng(80%)
  • Sở thích môi trường đồ họa: windows(50%), Macintosh(35%), khác(10%), không biết(5%)
slide39

3

Thiết kế hướng người sử dụng

  • Từ số liệu thống kê trên, ta có thể tính toán tìm ra nhóm người sử dụng chính của hệ thống như sau:
    • Tính xác suất cho từng tổ hợp các đặc tính của người sử dụng
    • Xác suất cao chỉ ra nhóm người sử dụng chính
slide40

3

Thiết kế hướng người sử dụng

slide41

3

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ.

  • Là quá trình thu thập dữ liệu về nhiệm vụ mà người sử dụng thực hiện và phân tích chúng để hiểu biết sâu sắc về các nhiệm vụ đó.
  • Phân tích nhiệm vụ tập trung vào các hành động bên ngoài hệ thống của người sử dụng, còn phân tích hệ thống hướng tới thiết kế bên trong hệ thống.
  • Phân tích chi tiết các nhiệm vụ dẫn đến việc mô tả nhiệm vụ rõ ràng, bảo đảm
slide42

3

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ.

UI phù hợp nhiệm vụ người sử dụng. Việc hiểu lầm những gì mà người sử dụng muốn làm sẽ dẫn đến thiết kế UI kém. Việc phân tích và mô tả nhiệm vụ đầy đủ sẽ tránh sai sót.

Nhiệm vụ (Task): là hành động mà người sử dụng muốn thực hiện

Mục tiêu (goal): là trạng thái mà người sử dụng muốn đạt tới.

slide43

3

Thiết kế hướng người sử dụng

Sự khác nhau giữa phân tích hệ thống và phân tích nhiệm vụ:

  • Phân tích nhiệm vụ hướng tới hành động bên ngoài của người sử dụng
  • Phân tích hệ thống hướng tới thiết kế bên trong hệ thống
slide44

3

Thiết kế hướng người sử dụng

Các câu hỏi cần trả lời khi phân tích nhiệm vụ là:

  • Người sử dụng làm cái gì?
  • Họ làm việc bằng công cụ gì?
  • Họ cần phải hiểu biết những gì khi làm việc?
slide45

3

Thiết kế hướng người sử dụng

Nhiệm vụ :

Vd: Hệ thống quản lý thư viện

Mục tiêu: Mượn sách thư viện

Nhiệm vụ:?

  • Đến thư viện
  • Tìm sách trên hệ thống máy tính
  • Đến giá để sách và lấy sách
  • Đem sách đăng ký với quản thư trước khi rời khỏi thư viện
slide46

3

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ phân cấp (HTA Hierarchical Task Analysis)

  • Suy nghĩ tổng thể về vấn đề cần giải quyết đó là nhiệm vụ mức đỉnh
  • Sau đó phân chia chúng thành tập các nhiệm vụ con (subtasks, subgoals), chúng là các bộ phận làm thỏa mãn mục tiêu tổng thể
  • Khi nhận ra danh sách các nhiệm vụ, ta phải bổ sung chi tiết
  • Mỗi nhiệm vụ trong phân tích nhiệm vụ có các thành phần sau: mục tiêu, tiền điều kiện và phân rã nhiệm vụ thành nhiệm vụ con
slide47

3

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ phân cấp (HTA Hierarchical Task Analysis)

  • Mục tiêu: tên nhiệm vụ
  • Tiền nhiệm vụ: là điều kiện cần thỏa mãn trước khi thực hiện nhiệm vụ hiện hành
    • Là những nhiệm vụ mà nhiệm vụ hiện hành phụ thuộc vào
    • Là thông tin hay sự vật mà người sử dụng cần biết để thực hiện nhiệm vụ.
  • Phân rã nhiệm vụ thành nhiệm vụ con
slide48

3

Thiết kế hướng người sử dụng

Qui tắc:

  • Mỗi task phải là closure, nghĩa là task kết thúc với mục tiêu có ý nghĩa đối với người sử dụng.
  • Mỗi task cần được thực hiện kể từ khi kích hoạt(trigger) cho đến khi đóng(closure)
  • Nếu task không tự kết thúc được thì người sử dụng có khả năng kết thúc task đó
  • Cân nhắc việc lựa chọn task cho hệ thống
slide49

3

Thiết kế hướng người sử dụng

Phân tích nhiệm vụ bằng cách nào?

  • Cách tốt nhất để thu thập thông tin cho phân tích người sử dụng là phỏng vấn và quan sát. Thông thường người thiết kế quan sát cách người sử dụng thực hiện nhiệm vụ.
    • Vd: quan sát thu ngân trong cửa hàng tạp hóa tính tiền để hiểu được nhiệm vụ tính tiền tạp hóa
  • Kết quả của phân tích nhiệm vụ là danh sách nhiệm vụ hiện hành của người sử dụng, danh sách các đối tượng mà người sử dụng nhìn thấy vì nó là quan trọng đối với cái mà người sử dụng làm
slide50

3

Thiết kế hướng người sử dụng

Mẫu mô tả nhiệm vụ của hệ thống quản lý khách sạn:

1.Tiếp tân:

T1.1:Đặt phòng :

T1.2:Check in : một số khách đã đặt trước, một số không

T1.3:Check out: Tính tiền, in báo giá. Vấn đề: hàng đợi check out vào buổi sáng. Giải pháp : tự động check out

T1.4: Đổi phòng: có thể đổi phòng vào bất kỳ thời điểm nào khi đang ở khách sạn

T1.5: Dịch vụ giữ đồ và ăn sáng: ăn sáng hằng ngày, dịch vụ giữ đồ vào bất kỳ thời điểm nào

slide51

3

Thiết kế hướng người sử dụng

Mẫu mô tả nhiệm vụ của hệ thống quản lý khách sạn:

2.Nhân viên

  • T2.1: Dọn phòng
  • T2.2:
  • T2.3:
  • Mỗi nhiệm vụ cần được mô tả chi tiết hơn.
  • Vd:
    • T2.1: Check in
    • Khởi đầu: khi khách đến, kiểm tra 1 số thủ tục, giấy tờ
    • Kết thúc: Giao chìa khóa phòng cho khách. Bắt đầu tính tiền
slide52

3

Thiết kế hướng người sử dụng

Tần số thực hiện nhiệm vụ:

Sự khó khăn xảy ra: khi khách đến theo đoàn

Mẫu mô tả nhiệm vụ:

  • Task header: tiêu đề nhiệm vụ
  • Number and Name: tên và số hiệu
  • Start: bắt đầu nhiệm vụ
  • End: Kết thúc(hoàn thành) nhiệm vụ. Nhiệm vụ có thể không hoàn thành, hệ thống cần ứng xử cho phù hợp
  • Nhiệm vụ được thực hiện thường xuyên như thế nào.
  • Khó khăn: mô tả nhiệm vụ khó thực hiện khi nào
slide53

3

Thiết kế hướng người sử dụng

    • 2.3 Nhập các tiêu chí tìm kiếm
    • 2.4 Nhận biết sách muốn mượn
    • (kiểm tra thông tin về sách:
    • tác giả,nxb, năm xb,…)
    • 2.5 Ghi lại vị trí để sách
  • 3.Đi đến giá sách và chọn lựa sách
  • 4.Lấy sách ra đăng ký với thủ thư
  • Mô tả nhiệm vụ con(subtask): trọng tâm của việc mô tả nhiệm vụ là mô tả các nhiệm vụ con

MÔ TẢ TRẬT TỰ CÁC NHIỆM VỤ CON BẰNG BiỂU ĐỒ

Vd: mô tả nhiệm vụ con cho nhiệm vụ “Mượn sách ở thư viện” như sau:

1.Đi đến thư viện

2.Tìm sách mong muốn

2.1 Tìm trong catalogue

2.2 Tìm trên màn hình máy tính

slide54

3

Mượn sách từ thư viện

Thiết kế hướng người sử dụng

Tìm sách muốn mượn 2

Đi đến thư viện

1

Chọn lựa sách từ giá sách

3

Đem sách đến bàn đăng ký với thủ thư

4

Tìm trong Catalogue 2.1

Tìm trên màn hình máy tính 2.2

Nhập các tiêu chí tìm kiếm 2.3

Nhận dạng sách muốn mượn

2.4

Ghi lại vị trí để sách 2.5

slide55

3

Thiết kế hướng người sử dụng

Phương pháp chuyển đổi sang thiết kế GUI

1. Ánh xạ yêu cầu người sử dụng trong luồng nhiệm vụ vào các đối tượng nhiệm vụ

  • Các thực thể của đối tượng nhiệm vụ
  • Các thuộc tính của đối tượng nhiệm vụ
  • Các hành động áp dụng vào các đối tượng nhiệm vụ
  • Quan hệ chính giữa các đối tượng nhiệm vụ
  • Thử nghiệm tính sử dụng được của các đối tượng nhiệm vụ đối với luồng nhiệm vụ
slide56

3

Thiết kế hướng người sử dụng

Phương pháp chuyển đổi sang thiết kế GUI

2. Ánh xạ đối tượng nhiệm vụ vào các đối tượng GUI

  • Các thực thể của đối tượng GUI
  • Quan hệ chính giữa các đối tượng GUI
  • Định nghĩa các cửa sổ của các đối tượng GUI
  • Các khung nhìn của các đối tượng GUI
  • Các lệnh trên các đối tượng GUI
  • Thử nghiệm tính sử dụng được của các đối tượng GUI đối với luồng nhiệm vụ.
slide57

3

Thiết kế hướng người sử dụng

slide58

3

Thiết kế hướng người sử dụng

Quan hệ giữa phân tích người sử dụng và phân tích nhiệm vụ.

  • Mục tiêu của phân tích nhiệm vụ và phân tích người sử dụng là để có được bức tranh về mô hình trí tuệ (metal model) của người sử dụng.
  • Mô hình trí tuệ là tập các hiểu biết về hệ thống làm việc như thế nào. Người sử dụng tương tác với hệ thống thông qua tập các hiểu biết này
slide59

3

Thiết kế hướng người sử dụng

Quan hệ giữa phân tích người sử dụng và phân tích nhiệm vụ.

  • Mỗi người sử dụng có mô hình trí tuệ riêng đối với hệ thống. Nhiệm vụ của người thiết kế là giúp người sử dụng phát triển được mô hình trí tuệ hiệu quả. Mô hình trí tuệ rất quan trọng đối với tính sử dụng được của UI
  • Mô hình trí tuệ được phát triển để hiểu, diễn giải và thực hiện. Hơn nữa, trên cơ sở mô hình trí tuệ, người sử dụng có khả năng dự báo hành động cần thiết để thực hiện công việc khi quên hay khi chưa gặp các hành động như vậy trước đây.
slide60

2

Phương pháp Sắp xếp thẻ (Card sorting)

Nguyên lý thiết kế của Nielsen

Bảy nguyên tắc thiết kế của Donald A. Norman

Phương pháp làm việc với người dùng

slide61

2

  • Thẻ phân loại là một kỹ thuật đơn giản trong sử dụng kinh nghiệm thiết kế, nơi một nhóm các chuyên gia đề ra hoặc "người sử dụng" không có kinh nghiệm với thiết kế, được hướng dẫn để tạo ra một cây thể loại hoặc folksonomy.
  • Là một phương pháp hữu ích cho việc thiết kế kiến ​​trúc thông tin, quy trình công việc, cấu trúc menu, hoặc đường dẫn điều hướng trang web.

Phương pháp sắp xếp thẻ (card sorting)

slide62

2

Các bước thực hiện:

1. Chuẩn bị các thẻ

  • Tạo danh sách các chủ đề nội dung. 
    • Đối với một trang web mới, danh sách các chủ đề nội dung của các loại thông tin mà bạn có thể có trên trang web
    • Đối với một trang web hiện có, liệt kê / loại phổ biến quan trọng nhất của nội dung
    • Để tạo ra danh sách này:
      • Xem xét nội dung của bạn được liệt kê trong hàng tồn kho nội dung .
      • Xác định các nội dung quan trọng nhất hoặc sử dụng thường xuyên nhất

Phương pháp sắp xếp thẻ (card sorting)

slide63

2

2. Quyết định xem bạn có thể làm một loại thẻ vật lý hoặc sử dụng phần mềm thẻ phân loại trực tuyến.

  • Nếu bạn đang sử dụng phần mềm thẻ phân loại trực tuyến, tham khảo ý kiến ​​các hướng dẫn phần mềm.
  • Nếu bạn sẽ được tiến hành một thẻ loại sử dụng thẻ vật lý, viết từng chủ đề trên một thẻ chỉ số riêng biệt.
    • Sử dụng nhãn tự dính và một trình xử lý. Các thẻ sẽ được gọn gàng, rõ ràng, và nhất quán.Bạn sẽ có danh sách các chủ đề trong máy tính để phân tích sau.
    • Đánh số các thẻ ở góc dưới cùng hoặc trên lưng. Điều này giúp bạn khi bạn bắt đầu phân tích các thẻ.
    • Có thẻ trống có sẵn cho người tham gia để thêm chủ đề và đặt tên cho nhóm họ làm khi họ sắp xếp các thẻ.
    • Xem xét sử dụng một thẻ màu khác nhau để có người tham gia đặt tên cho nhóm.

Phương pháp sắp xếp thẻ (card sorting)

slide64

2

Thiết lập phiên

  • Kế hoạch khoảng một giờ cho mỗi phiên,
  • Nếu bạn có nhiều thẻ, tổ chức không gian.
    • Cho các loại thẻ giấy, đảm bảo người tham gia có đủ chỗ để để có thể dán các thẻ này lên bảng hay tường một cách luân phiên.
    • Đối với các loại thẻ trực tuyến, đảm bảo có một máy tính với kết nối internet cũng như phòng cho cả người tham gia (s) và hỗ trợ để ngồi thoải mái.
  • Kế hoạch người điều hành hoặc một thành viên trong nhóm khả ghi chú các hoạt động hay phát biểu của những người tham gia.

Phương pháp sắp xếp thẻ (card sorting)

slide65

2

Dẫn phiên

  • Các người tham gia các bộ thẻ. Giải thích rằng bạn đang yêu cầu được giúp đỡ để tìm loại thông tin mà bạn cần.
    • Trong một loại thẻ mở, giải thích rằng bạn muốn xem các thẻ của những người tham gia, và nhóm của bạn nên đặt tên cho từng nhóm thẻ.

Nếu bạn đang tiến hành một loại thẻ đóng, giải thích rằng bạn muốn xem cách người tham gia để có thể phân loại thẻ cho phù hợp.

  • Yêu cầu người tham gia nói chuyện lớn tiếng trong khi làm việc. Bạn muốn hiểu suy nghĩ của người tham gia, lý do, và thất vọng.

Phương pháp sắp xếp thẻ (card sorting)

slide66

2

Dẫn phiên

  • Trong quá trình tham gia cố gắng giảm thiểu sự gián đoạn nhưng khuyến khích người tham gia suy nghĩ lớn tiếng. Cho phép người tham gia:
    • Thêm thẻ - ví dụ, để chỉ ra các siêu liên kết bên hoặc các chủ đề bổ sung.
    • Đưa thẻ sang một bên để chỉ ra chủ đề người tham gia sẽ không muốn trên trang web.
  • Nếu, cuối cùng, người tham gia có quá nhiều nhóm cho trang chủ, yêu cầu có thể kết hợp một số nhóm thành một.

Phương pháp sắp xếp thẻ (card sorting)

slide67

2

  • Yêu cầu người tham gia để đặt tên cho mỗi thể loại.
    • Trong một loại thẻ mở, cung cấp cho người tham gia một chồng thẻ màu khác nhau. Yêu cầu người tham gia sử dụng thẻ màu để đặt tên cho mỗi nhóm. Hãy hỏi những gì từ người tham gia sẽ mong đợi để xem trên trang chủ hay trang thứ hai cấp sẽ dẫn người tham gia với nhóm cụ thể của mục nội dung.
    • Trong một loại thẻ khép kín, hỏi về kỳ vọng từ, tổ chức thẻ cuối cùng của họ, và theo dõi các câu hỏi khác có thể cung cấp cái nhìn sâu sắc và quan sát có giá trị cho nghiên cứu của bạn.
  • Cuối cùng, cảm ơn những người tham gia.

Phương pháp sắp xếp thẻ (card sorting)

slide68

2

Sắp xếp Phiên từ xa

Tạo danh sách các chủ đề nội dung. Chủ đề có thể cụm từ, lời nói, vv, và có thể rất cụ thể hoặc tổng quát.

  • Chuẩn bị các thẻ theo hướng dẫn phần mềm.
  • Gửi email tham gia của bạn một liên kết để nghiên cứu. Cung cấp hướng dẫn cho các loại (cho dù mở hay đóng) và cho họ biết khoảng bao lâu phiên nên làm để hoàn thành.
  • Nếu một hộp bình luận có sẵn, đôn đốc, tham gia sử dụng lĩnh vực này để ghi lại bất kỳ quan sát hoặc câu hỏi. Trong khi bạn sẽ không thể trả lời cho họ trong thời gian thực cho người tham gia, những ý kiến ​​có thể hữu ích cho việc phân tích của bạn.
  • Cảm ơn những người tham gia cho thời gian của mình

Phương pháp sắp xếp thẻ (card sorting)

slide69

2

Phân tích dữ liệu của bạn

  • Chuẩn bị dữ liệu của bạn để phân tích.
    • Nếu bạn sử dụng phần mềm thẻ phân loại trực tuyến, tham khảo ý kiến ​​các hướng dẫn phần mềm. Các phần mềm sẽ phân tích dữ liệu tham gia trong nhiều cách khác nhau.
    • Nếu bạn sử dụng thẻ vật lý cho các kiểm tra, hoặc chụp ảnh các loại hoặc sử dụng những con số trên thẻ để nhanh chóng ghi lại những gì người tham gia đã làm. Bức ảnh hoặc viết tên người tham gia đã cung cấp cho mỗi nhóm và số lượng thẻ người tham gia bao gồm dưới tên đó. Sau đó, bạn có thể cải tổ các thẻ cho phiên tiếp theo.

Phương pháp sắp xếp thẻ (card sorting)

slide70

2

Phân tích dữ liệu của bạn

      • Tạo ra một tập tin trên máy tính cho mỗi phiên để thu thập một bức tranh hoàn chỉnh của bản đồ trang web chi tiết mỗi người dùng tạo ra.
      • Làm việc từ danh sách ban đầu của bạn về chủ đề và di chuyển xung quanh chủ đề để tái tạo các nhóm mỗi người tham gia và nhập tên của người tham gia mà cho các nhóm.
      • Nếu bạn sử dụng một loại thẻ vật lý, bạn cũng có thể chụp một bức ảnh của thẻ loại thành để tham khảo sau.
  • Phân tích thông tin định tính dựa trên ý kiến ​​của người dùng.

Phương pháp sắp xếp thẻ (card sorting)

slide71

2

  • Phân tích thông tin định lượng dựa trên:
    • Mà thẻ xuất hiện cùng nhau thường xuyên nhất
    • Thường xuyên xuất hiện trong thẻ chuyên mục cụ thể
  • Đối với một phân tích chi tiết hơn về kết quả, sử dụng các ghi chú và ghi tên của người tham gia và số thẻ dưới tên của mỗi người bạn để tìm sự tương đồng từ các phiên khác nhau.
  • Đối với một phân tích chi tiết hơn, hãy xem xét sử dụng một bảng tính Excel để hiển thị các mối quan hệ giữa các thẻ hoặc sử dụng một trong các chương trình phần mềm có sẵn để phân tích dữ liệu của bạn.
  • Sau khi phân tích các dữ liệu từ phân loại thẻ, bạn cần phải có thông tin hữu ích cho cơ cấu kiến ​​trúc thông tin của trang web. Bạn nên sử dụng các kết quả của loại thẻ của bạn để giúp bạn xác định chuyển hướng trang web của bạn.

Phương pháp sắp xếp thẻ (card sorting)

slide72

2

Thực tiễn tốt nhất cho cả các loại thẻ

  • Hạn chế số lượng thẻ. Nó là hấp dẫn để muốn tham gia để sắp xếp "ALL" nội dung của bạn, nhưng hãy chú ý của người tham gia mệt mỏi. Chúng tôi muốn giới thiệu 30 đến 40 ở bên ngoài tuyệt đối, đặc biệt là đối với một loại mở.
  • Nếu có thể, ngẫu nhiên tự trình bày để mỗi phần nội dung có một cơ hội để được sắp xếp trước đó trong phiên giao dịch.
  • Cung cấp những người tham gia với một ước tính bao lâu các loại thẻ sẽ mất trước khi bắt đầu phiên giao dịch để giúp họ đánh giá tốt hơn thời gian và nỗ lực cần thiết.

Phương pháp sắp xếp thẻ (card sorting)

slide73

2

Thực tiễn tốt nhất cho cả các loại thẻ

  • Xem xét các lợi ích của việc yêu cầu người tham gia để hoàn thành sắp xếp của bạn. Đối với một loại mở, nếu có thể xem xét yêu cầu họ để sắp xếp các thẻ, nhưng có lẽ không ghi nhãn, vì đó có thể là một phần khó khăn hơn trong những nhiệm vụ, cung cấp cho bạn đã giới hạn các mục của bạn như đề nghị.
  • Hãy xem xét một loại mở như phần 1 và loại đóng như phần 2 của quá trình của bạn. Một cho phép bạn tìm hiểu những gì đi cùng với nhau, trong khi 2 cho phép bạn thực sự kiểm tra nhãn của bạn để xem họ là trực quan để tham gia của bạn.

Phương pháp sắp xếp thẻ (card sorting)

kinh nghi m thi t k c a nielsen
Kinh nghiệm thiết kế của Nielsen
  • Phù hợp với thế giới thực
    • Nielsen gọi hướng dẫn này là “Speak the user’s language”
    • Nếu user nói tiếng Anh thì UI phải bằng tiếng Anh
    • Tránh biệt ngữ chuyên môn
    • Các từ chuyên môn có thể được sử dụng cho lĩnh vực ứng dụng khi users là chuyên gia trong lĩnh vực ứng dụng.
      • Ví dụ khi thiết kế giao diện cho các bác sỹ thì phải có các từ chuyên môn
    • Khi user được quyền đặt tên trong UI thì họ phải được tự do lựa chọn tên. Nên tránh giới hạn độ dài và nội dung.
    • Khi thiết kế giao diện để user nhập lệnh hay từ khóa tìm kiếm, UI cần hỗ trợ nhiều nhất có thể các từ đồng nghĩa vì user khác nhau sẽ gọi đối tượng với các tên khác nhau.
      • Theo Furnas (CACM v30 n11, Nov. 1987) thì có khoảng 7-18% cặp người thống nhất trong việc gọi tên đối tượng.
    • Lựa chọn metaphor thận trọng sẽ góp phần vào đáp ứng UI phù hợp với thế giới thực.

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen1
Kinh nghiệm thiết kế của Nielsen
  • Nhất quán và chuẩn
    • Kinh nghiệm thứ hai là nhất quán, hay còn gọi là “Principle of Least Surprise”
      • Không được làm users ngạc nhiên với cách mà lệnh và đối tượng giao diện hoạt động.
    • Những cái tương tự cần phải có hình dáng và hành vi tương tự.
    • Loại nhất quán quan trọng khác là cách diễn đạt thông qua toàn bộ UI
      • Nếu sử dụng “share price” ở 1 nơi, “stock price” và “stock quote” thì user sẽ do dự về 3 vấn đề khác nhau trong hệ thống.
    • “Phù hợp với thế giới thực” và “Nhất quán” có mâu thuẫn?
      • Phù hợp thế giới thực: Yêu cầu hỗ trợ từ động nghĩa (delete, erase và remove) cho lệnh.
      • Nhất quán: Yêu cầu chỉ 1 tên cho cùng lệnh
      • Giải pháp: Khi user nói thì cho phép từ đồng nghĩa; khi UI nói thì phải nhất quán, luôn sử dụng cùng 1 tên cho cùng 1 lệnh hay đối tượng.

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen2
Kinh nghiệm thiết kế của Nielsen
  • Nhất quán và chuẩn (tt)
    • Thứ tự lệnh-đối số là loại nhất quán khác, thực tế đã sử dụng cả hai loại như sau:
      • Thứ tự danh từ-động từ trong GUI: User chọn đối tượng sau đó chọn lệnh tác động trên đối tượng.
      • Thứ tự động từ-danh từ: Kích hoạt lệnh trước sau đó chọn đối số.
    • Các loại nhất quán
      • Nhất quán trong: Nhất

quán ngay trong ứng

dụng

      • Nhất quán ngoài : Nhất

quán giữa các ứng dụng

trong cùng platform.

      • Nhất quán ẩn dụ: Nhất

quán trong việc chọn

ẩn dụ

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen3
Kinh nghiệm thiết kế của Nielsen
  • Trợ giúp và tài liệu
    • Users không đọc trợ giúp và tài liệu, chí ít cho đến thời điểm trước khi sử dụng UI.
      • Họ muốn dành thời gian để làm việc ngay để đạt mục tiêu, không học về cách hoạt động của hệ thống.
    • Cẩm nang sử dụng và hướng dẫn trực tuyến là sống còn
      • Thông thường khi users bị “tắc” khi sử dụng họ mới mở đến tài liệu.
    • Trợ giúp cần phải có các khả năng sau
      • Tìm kiếm theo chủ đề
      • Phù hợp ngữ cảnh
      • Hướng nhiệm vụ
      • Cụ thể
      • Ngắn gọn

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen4
Kinh nghiệm thiết kế của Nielsen
  • Người sử dụng làm chủ
    • Nielsen còn gọi kinh nghiệm này là “Clearly Marked Exits”
    • Phải cung cấp khả năng Undo
    • Các thao tác cần nhiều thời gian thì phải có khả năng hủy (cancelable)
    • Tất các các hộp thoại nên có phím Cancel.
    • Ví dụ Nhận xét hộp thoại sau:

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen5
Kinh nghiệm thiết kế của Nielsen
  • Quan sát trạng thái hệ thống
    • Kinh nghiệm này còn được gọi là “Feedback”.
    • Luôn thông báo Users về trạng thái của hệ thống.
    • Các dấu hiệu (idioms)
      • Thay đổi hình dạng con chạy
      • Highlight.
      • Thanh trạng thái và chỉ báo (progress).
    • Không nên cài đặt “dày đặc” phản hồi
      • Ví dụ hộp thoại không phù hợp.
    • Khuyến cáo sử dụng
      • Hành động <0.1 s, cảm giác hành động xảy ra tức thì
      • Hành động xảy ra trong khoảng 0.1-1.0 s, người sử dụng nhận ra hành động nhưng không cần phản hồi
      • Hành động trong khoảng 1-5s, hiển thị con chạy “busy”
      • Hành động kéo dài trên 5 s, hiển thị Progress bar.

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen6
Kinh nghiệm thiết kế của Nielsen
  • Mềm dẻo và hiệu quả (Efficiency)
    • Còn gọi là “Shortcuts”
    • Cần cung cấp các “đường tắt” để thực hiện các thao tác thường xuyên
      • Phím lệnh cấp tốc (Ctrl+C, Ctrl+B, Ctrl+O...)
      • Viết tắt dòng lệnh
      • Phong cách
      • Bookmarks
      • Lịch sử thực hiện

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen7
Kinh nghiệm thiết kế của Nielsen
  • Tránh lỗi
    • Tránh lỗi
      • Giải pháp có thể: Chọn lệnh thay nhập bàn phím. Chọn lệnh bằng chuột ít xảy ra lỗi hơn gõ lệnh từ bàn phím. Nhưng tránh cực đoan.
      • Ẩn các lệnh không cần thiết
    • Các loại lỗi chính
      • Lỗi mô tả: Xảy ra khi hai hành động tương tự nhau (pha sữa – ngũ cốc, các thực đơn gần nhau có hình dáng tương tự nhau)
      • Lỗi thu hút: Khi hai hành động có giai đoạn bắt đầu khởi động như nhau
      • Lỗi phương thức: Ví dụ với text editor vi, ở insert mode, các phím ký tự được chèn vào tệp văn bản, trong khi ở command mode (mặc định), phím ký tự kích hoạt editing commands.
    • Thông báo lỗi
      • Chính xác: Không “Cannot open file”, mà phải sử dụng “Cannot open file named paper.docx”
      • Nói bằng ngôn ngữ của người sử dụng
      • Đưa ra hỗ trợ mang tính xây dựng. Tại sao xảy ra, loại bỏ bằng cách nào.
      • Lịch sự: Không sử dụng “fatal error” và “illegal”

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen8
Kinh nghiệm thiết kế của Nielsen
  • Nhận dạng – không hồi tưởng
    • Kinh nghiệm này còn được gọi là “Minimize Memory Load”
    • Hãy sử dụng thực đơn, không sử dụng dòng lệnh
    • Sử dụng Combo Box, không sử dụng Text Box nơi chọn lệnh
    • Sử dụng những lệnh chung những nơi có thể (ví dụ Open, Save, Copy Paste)
    • Tất cả các thông tin cần thiết phải được nhìn thấy.
    • Hộp thoại Modal trong MS Word: Quá nhiều thông tin phải nhớ.

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen9
Kinh nghiệm thiết kế của Nielsen
  • Thiết kế thẩm mỹ và tối thiểu
    • Kinh nghiệm cuối cùng là tập qui tắc thiết kế đồ họa tốt. Triết lý ở đây là “Less is More”.
    • Bỏ đi các thông tin, đặc trưng đồ họa và các tính chất xa lạ, không cần thiết.
    • Ví dụ thiết kế đơn giản:

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen10
Kinh nghiệm thiết kế của Nielsen
  • Thiết kế thẩm mỹ và tối thiểu (tt)
    • Lựa chọn màu và font phù hợp
    • Nhóm bằng dấu cách
    • Gán các điều khiển hợp lý
    • Sử dụng ngôn ngữ phù hợp, bố trí hợp lý

Bài 6: Nguyên lý thiết kế giao diện

kinh nghi m thi t k c a nielsen11
Kinh nghiệm thiết kế của Nielsen
  • Tóm tắt 10 kinh nghiệm của Nielsen theo các nhóm
    • Phù hợp sự chờ đợi:
      • Phù hợp thế giới thực
      • Nhất quán và chuẩn
      • Trợ giúp và tài liệu
    • Người sử dụng làm chủ
      • Người sử dụng điều khiển UI và tự do
      • Trực quan trạng thái hệ thống
      • Mềm dẻo và hiệu quả
    • Quản lý lỗi
      • Tránh lỗi
      • Nhận dạng, không hồi tưởng
      • Thông báo, kiểm tra và phục hồi lỗi
    • Thiết kế đơn giản
      • Thiết kế đẹp và tối thiểu.

Bài 6: Nguyên lý thiết kế giao diện

m i s u qui t c c a tognazzini
Mười sáu qui tắc của Tognazzini
  • Danh sách 16 qui tắc thiết kế UI tốt của Tognazzini
  • Nhiều qui tắc trong danh sách đã được xem xét
  • Khảo sát một số qui tắc mới của Tognazzini
    • Anticipation: Nên bố trí các thông tin và công cụ cần thiết vào nơi người sử dụng dễ xâm nhập
    • Defaults: Là đường tắt cho users mới và users hay sử dụng UI.
      • Sử dụng "Restore Initial Settings", "Restore Factory Settings", "Standard Settings" hay Home trong khi duyệt Web.

Anticipation

Autonomy

Color blindness

Consistency

Defaults

Efficiency

Explorable interfaces

Fitts s Law

Human interface objects

Latency reduction

Learnability

Metaphors

Protect users work

Readability

Track state

Visible navigation

m i s u qui t c c a tognazzini1
Mười sáu qui tắc của Tognazzini
  • Khảo sát một số qui tắc mới của Tognazzini (tt)
    • Protect users work: Đây thuộc nguyên lý tránh lỗi.
      • Lỗi gây ra phá hủy công việc của người sử dụng là loại lỗi nguy hiểm nhất
      • Cần đầu tư thích đáng vào kỹ nghệ để phòng chống lỗi này.
    • Track state:Là hình thức cung cấp đường tắt, cho phép user khôi phục trạng thái của phiên giao dịch cuối cùng.
      • Ví dụ sử dụng lệnh Print. UI cần nhớ lại bộ tham số mà user thiết lập trước đó trong hộp thoại in.
    • Visible navigation: Thuộc nhóm trực quan trạng thái hệ thống.
      • Trên trang Web, user rất dễ bị lạc lối.
      • Tránh việc này bằng cách hiển thị vị trí của user. Một kỹ thuật là chỉ dẫn trên " Navigation bars"

Bài 6: Nguyên lý thiết kế giao diện

t m qui t c v ng c a shneiderman
Tám qui tắc vàng của Shneiderman
  • Danh sách 8 qui tắc vàng thiết kế UI của Shneiderman
  • Khảo sát qui tắc mới của Shneiderman
    • Dialog closure: Trình tự các hành động có thể được tổ chức thành các nhóm (begin - middle - end).
    • Vi dụ với Drag end Drop
      • Bắt đầu: Người sử dụng nhấn chuột và thấy đối tượng được nhấc lên cùng với con chạy chuột
      • Giữa: Di đối tượng trên màn hình. Phản hồi là đối tượng chuyển dịch
      • Cuối: Nhả phím chuột. Phản hồi ở đây là thấy hiệu ứng nhả đối tượng.
    • Phản hồi cần được cho lại ở cuối mỗi nhóm và cho biết đã hoàn thành task. Người sử dụng có thể chuyển đễn task khác.

Consistency

Shortcuts

Feedback

Dialog closure

Simple error handling

Reversible actions

Put user in control

Reduce short-term memory load

Bài 6: Nguyên lý thiết kế giao diện

qui tr nh thi t k ui c a galitz
Qui trình thiết kế UI của Galitz

Galitz đề xuất 14 bước trong qui trình phát triển GUI

  • Bước 1: Nhận biết ai là người sử dụng
  • Bước 2: Hiểu rõ các chức năng nghiệp vụ
  • Bước 3: Hiểu rõ nguyên lý thiết kế màn hình tốt
  • Bước 4: Phát triển thực đơn hệ thống và lược đồ dẫn đường
  • Bước 5: Lựa chọn loại cửa sổ phù hợp
  • Bước 6: Lựa chọn các điều khiển phần cứng phù hợp
  • Bước 7: Lựa chọn các Controls trên màn hình phù hợp
  • Bước 8: Viết text và thông điệp rõ ràng
  • Bước 9: Cung cấp phản hồi, hướng dẫn và hỗ trợ hiệu quả

Bài 6: Nguyên lý thiết kế giao diện

qui tr nh thi t k ui c a galitz1
Qui trình thiết kế UI của Galitz
  • Bước 10: Cung cấp khả năng quốc tế hóa và khả năng sử dụng rộng rãi
  • Bước 11: Tạo lập đồ họa, biểu tuwongj và ảnh có ý nghĩa
  • Bước 12: Chọn màu phù hợp
  • Bước 13: Tổ chức và bố trí cửa sổ và các trang màn hình
  • Bước 14: Kiểm thử hệ thống.

Bài 6: Nguyên lý thiết kế giao diện

l m vi c v i kh ch h ng
Làm việc với khách hàng
  • Phân loại hành vi của con người
  • Các hoạt động

Bài 6: Nguyên lý thiết kế giao diện

ph n lo i h nh vi c a con ng i
Phân loại hành vi của con người

1. Hành vi bản năng

2. Hành vi kỹ xảo

3. Hành vi đáp ứng

4. Hành vi trí tuệ

Bài 6: Nguyên lý thiết kế giao diện

ph n lo i h nh vi c a con ng i1
Phân loại hành vi của con người

Hành vi bản năng

  • Thoả mãn nhu cầu sinh lý của cơ thể
  • Có thể là tự vệ
  • Mang tính lịch sử
  • Mang tính văn hoá mỗi quốc gia vùng miền

Bài 6: Nguyên lý thiết kế giao diện

ph n lo i h nh vi c a con ng i2
Phân loại hành vi của con người

Hành vi kỹ xảo

  • Là hành vi mới tự tạo trên cơ sở luyện tập
  • Có tính mềm dẻo và biến đổi
  • Nếu được định hình trên vỏ não và củng cố thì sẽbên vững không thay đổi
  • Ví dụ: tập viết, làm xiếc…..

Bài 6: Nguyên lý thiết kế giao diện

ph n lo i h nh vi c a con ng i3
Phân loại hành vi của con người

Hành vi đáp ứng

  • Là hành vi ứng phó để tồn tại, phát triển và là nhữnghành vi ngược lại với sự tự nguyện của bản thân và không có sự lựa chọn.

Bài 6: Nguyên lý thiết kế giao diện

ph n lo i h nh vi c a con ng i4
Phân loại hành vi của con người

Hành vi trí tuệ

  • Là hành vi đạt được do hoạt động trí tuệ nhằm nhậnthức được bản chất của các mối quan hệ xã hội cóquy luật của sự vật hiện tượng để đáp ứng và cải tạo thế giới

Bài 6: Nguyên lý thiết kế giao diện

c c ho t ng t v n cho kh ch h ng
Các hoạt động - Tư vấn cho khách hàng
  • Tư vấn đúng nhu cầu
  • Giải thích rõ ràng
  • Hướng dẫn khách hàng tỉ mỉ
  • Nắm bắt tâm lý và mong muốn của khách hàng luôn là yếu tố quan trọng hàng đầu trong bất cứ chiến lược chăm sóckhách hàng nào. Chỉ khi nào bạn biết được khách hàngthực sự mong muốn những gì thì lúc đó bạn mới chăm sóckhách hàng một cách hiệu quả và chu đáo nhất

Bài 6: Nguyên lý thiết kế giao diện

c c ho t ng t v n cho kh ch h ng1
Các hoạt động - Tư vấn cho khách hàng

Biết Lắng nghe

  • Biết lắng nghe những gì khách hàng nói
  • Các khách hàng thường có ấn tượng không tốt với những ai chỉ biết giải quyết các lời phàn nàn mà không thực sự lắng nghe những gì họ nói.
  • Hãy giữ một thái độ cởi mở cũng như kiềm chế những thôi thúc khiến bạn cắt ngang lời nói bằng một câu trả lời. Cũng thật sự quan trọng khi cho khách hàng thấy bạn đang chăm chú lắng nghe những gì họ nói

Bài 6: Nguyên lý thiết kế giao diện

c c ho t ng t v n cho kh ch h ng2
Các hoạt động - Tư vấn cho khách hàng

Giữ mối quan tâm của khách hàng

  • Hãy cho khách hàng thấy khách hàng thực sự quan trọng với bạn.
  • KH biết rằng công ty bạn có rất nhiều khách hàng khác nhau nhưng họ chỉ thực sự yêu quí bạn và Cty bạn nếu bạn khiến họ cảm thấy họ thực sự quan trọng với bạn
  • (VD: chị là người đầu tiên em thông báo thông tin…)

Bài 6: Nguyên lý thiết kế giao diện

c c ho t ng t v n cho kh ch h ng3
Các hoạt động - Tư vấn cho khách hàng

Giữ mối quan tâm của khách hàng

  • Hãy cho khách hàng thấy khách hàng thực sự quan trọng với bạn.
  • KH biết rằng công ty bạn có rất nhiều khách hàng khác nhau nhưng họ chỉ thực sự yêu quí bạn và Cty bạn nếu bạn khiến họ cảm thấy họ thực sự quan trọng với bạn
  • (VD: chị là người đầu tiên em thông báo thông tin…)

Bài 6: Nguyên lý thiết kế giao diện

thi t k h ng n ng i d ng
Thiết kế hướng đến người dùng
  • Nguyên lý thiết kế tương tác người dùng
  • Thiết kế tiện dụng

Bài 6: Nguyên lý thiết kế giao diện

c c l u trong thi t k t ng t c ng i d ng
Các lưu ý trong thiết kế tương tác người dùng
  • Feedback to user - signal that selection has been made
  • The user should be in control – no situation where the user can not abort an action
  • Predictability – avoid modes that change the action invoked by an input
  • Transparency – the user can “see” what is happening
  • Never interrupt the user – avoid pop-ups that change the action

Bài 6: Nguyên lý thiết kế giao diện

c c l u trong thi t k t ng t c ng i d ng1
Các lưu ý trong thiết kế tương tác người dùng
  • Can I guess what the user wants? – use text continuations carefully
  • Error tolerance – the computer can not guess incorrectly
  • WYSIWYG – the user may want to see actual as well as processed
  • Speak the user's language – messages should use terms the user will understand
  • Design should reflect the user's logic, not the constructor's logic – the design reflects how work is done

Bài 6: Nguyên lý thiết kế giao diện

c c l u trong thi t k t ng t c ng i d ng2
Các lưu ý trong thiết kế tương tác người dùng
  • The design of a button should reflect its importance – make often used buttons bigger
  • Provide alternative ways out of a situation – this allows the user to choose the best one for them
  • Accessibility to handicapped users - each action has multiple means of invocation
  • Novices versus experienced users – different levels of interface for different users
  • Standardization – standard arrangements of buttons or other input devices
  • Open standards – standards such as de facto and proprietary

Bài 6: Nguyên lý thiết kế giao diện

thi t k ti n d ng
Thiết kế tiện dụng
  • Ứng dụng cố gắng liệu trước được mong muốn vànhu cầu của người dung
  • Kỹ thuật về trạng thái phải cho người dùng nhận thức và nhận thông tin
  • Thông tin trạng thái phải hợp thời và dễ nhìn
  • Dùng màu sắc để chuyển tải thông tin trong giaodiện phải rõ ràng, và dành cho những người chưa có kinh nghiệm
  • Sự toàn vẹn quan trọng nhất là sự toàn vẹn với sự mong đợi của người dùng
  • Nhìn ở năng suất người dùng, không là của máy

Bài 6: Nguyên lý thiết kế giao diện

thi t k ti n d ng1
Thiết kế tiện dụng
  • Giữ người dùng quan tâm (Keep the user occupied)
  • Giao diện phải che dấu kiến trúc cơ bản của hệ thống với thể hiện bề mặt
  • Thời gian để đạt được một đích là hàm số củakhoảng cách và kich thước của đích
  • Bất cứ nơi nào có thể, phải cho những những quá trình ngầm vào nền (backbround)
  • Chọn phương pháp ẩn dụ tốt cho phép người dùngnắm ngay được những chi tiết tốt nhất của mô hình khái niệm
  • Văn bản cần đọc phải tương phản cao

Bài 6: Nguyên lý thiết kế giao diện

nguy n l ti n d ng
Nguyên lý tiện dụng
  • Tương tự như nguyên lý thíết kế
  • Cơ sở cho việc đánh giá hệ thống
  • Framework cho đánh giá heuristic

Bài 6: Nguyên lý thiết kế giao diện

ch c a tr i nghi m ng i d ng
Đích của trải nghiệm người dùng
  • Satisfying - rewarding
  • Fun - support creativity
  • Enjoyable - emotionally fulfilling
  • Entertaining …and more
  • Helpful
  • Motivating
  • Aesthetically pleasing

Bài 6: Nguyên lý thiết kế giao diện

ch c a tr i nghi m ng i d ng1
Đích của trải nghiệm người dùng
  • Satisfying - rewarding
  • Fun - support creativity
  • Enjoyable - emotionally fulfilling
  • Entertaining …and more
  • Helpful
  • Motivating
  • Aesthetically pleasing

Bài 6: Nguyên lý thiết kế giao diện