SlideShare ist ein Scribd-Unternehmen logo
1 von 39
User-Centered DesignThiết kế hướng Người Dùng
Affordance Affordance làmộtđặctính (quality) củamộtđốitượng (object) hay mộtmôitrường(env), đặctínhnàychophépngườidùngthựchiệnmộthành động.
Ném đá
Fitts’ Law      là mô hình dự đoán (predict) thời gian di chuyển một thiết bị trỏ (pointing device) từ một xuất phát điểm đến một mục tiêu.
D W
Một số ứng dụng Buttons và các giao diện phải có kích thước đủ lớn Cạnh hoặc góc của màn hình là mục tiêu dễ trỏ Menu của Mac thì dễ dùnghơn menu của Windows
Big names don’t know Fitts’ law too
UI là một lớp của hệ thống. UI không tồn tại độc lập.
Giao diện
http://www.slideshare.net/jwd2a/make-it-obvious-affordance-as-a-design-tool http://particletree.com/features/visualizing-fittss-law/ http://www.asktog.com/columns/022DesignedToGiveFitts.html
Iterative Design Tập trung vào người dùng(user) và tác vụ(task) User Analysis: người dùng là ai? Task analysis: người dùng cần gì? Người dùng tham gia như tư vấn, đánh giá, và nhiều lúc là người thiết kế Đánh giá thường xuyên
User & Task Analysis Bước đầu tiên của thiết kế lấy người dùng làm trung tâm User analysis: người dùng là ai? Task analysis: người dùng cần gì?
Tìm hiểu người dùng Xác định những đặc tính của tập người dùng Tuổi, giới tính, sắc tộc Trình độ văn hóa Kinh nghiệm sử dụng máy tính Kỹ năng chung Kinh nghiệm chuyên ngành Kinh nghiệm về ứng dụng Môi trường làm việc văn cảnh xã hội Các mối quan hệ và thói quen giao tiếp
Các tập người dùng khác nhau Nhiều ứng dụng có các tập người dùng khác nhau Ví dụ: go.vn Giáo dục: giáo viên, phụ huynh, học sinh Giải trí: teen, văn phòng, sinh viên
Các phương pháp Phương pháp Questionaires – Khảo sát Interviews – Phỏng vấn Observation – Quan sát
Ví dụ: Clubs/Clan Người dùng là ai? Hội/nhóm có cùng sở thích Độ tuổi rộng (10-50), gồm các thành phần xã hội khác nhau Có kinh nghiệm dùng máy tính và Internet Kiến thức về đề tài yêu thích tốt, nhưng không nhiều về sản phẩm Nhóm người sử dụng đặc biệt Game thủ
Task Analysis Xác định các tác vụ(task) cụ thể mà hệ thống/chương trình sẽ thực hiện Mỗi tác vụ là một mục tiêu (goal) (what not how) Bắt đầu từ mục tiêu chung của hệ thống, sau đó chia tách 1 cách hệ thống xuống thành tác vụ nhỏ Mục tiêu chung: Tạo clan CF Tác vụ:  Nhập thông tin cơ bản Mời thành viên tham gia Mua icon cho nhóm
Những thành phần chính Cái gì cần phải làm? Mục tiêu CC Điều kiện cần (precondition) Các tác vụ cần mà tác vụ này phụ thuộc Thông tin người dùng cần phải biết Các bước bao gồm khi thực hiện tác vụ này Tác vụ con (subtasks) Subtask có thể tiếp tục được chia nhỏ
Ví dụ: Tạo tài khoản go.vn Mục tiêu Tạo tài khoản tại hệ thống go.vn Precondition Có giấy chứng minh thư nhân dân Truy nhập được mạng Internet Subtasks Chấp nhận điều khoản sử dụng Nhập thông tin liên lạc Nhập thông tin cá nhân Nhập mã bảo mật
Các câu hỏi khác Tác vụ (task) được thực hiện ở đâu? Mức độ thường xuyên? Các giới hạn về thời gian và tài nguyên? Người dùng học các thực hiện như thế nào? Những lỗi nào có thể xảy ra? Những người nào khác cần tham gia?
Các thực hiện Phỏng vấn người dùng Quan sát trực tiếp người dùng thực hiện tác vụ
Một số điều cần tránh Lập lại những lỗi của quy trình hiện tại Không thu thập được những khía cạnh tốt của quy trình hiện tại
Một có kỹ năng Cách đặt câu hỏi Tại sao anh/chị lại làm như thế này? (goal/mục tiêu) Anh/chị làm như thế nào? (subtasks) Chú ý đến điểm yếu trong quy trình hiện tại Mục tiêu không đặt được, tốn thơi gian, người dùng khó chịu Contextual inquiry Participatory design
http://particletree.com/features/visualizing-fittss-law/

Weitere ähnliche Inhalte

Ähnlich wie 2. fitts law

tnyc-c1-yeucauphanmem-sv.pdf
tnyc-c1-yeucauphanmem-sv.pdftnyc-c1-yeucauphanmem-sv.pdf
tnyc-c1-yeucauphanmem-sv.pdfitexcel
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1Alice_Stone
 
Quản trị dự án trong công nghệ thông tin
Quản trị dự án trong công nghệ thông tinQuản trị dự án trong công nghệ thông tin
Quản trị dự án trong công nghệ thông tincxbach
 
phan tich thiet ke he thong
phan tich thiet ke he thongphan tich thiet ke he thong
phan tich thiet ke he thongvantinhkhuc
 
Phan Tich Httt Bang Uml
Phan Tich Httt Bang UmlPhan Tich Httt Bang Uml
Phan Tich Httt Bang Umlhbgfd
 
Giao trinh phan tich thiet ke he thong thong tin
Giao trinh phan tich thiet ke he thong thong tinGiao trinh phan tich thiet ke he thong thong tin
Giao trinh phan tich thiet ke he thong thong tinNguyen Patrick
 
Asp tiengviet
Asp tiengvietAsp tiengviet
Asp tiengvietquanvn
 
Thiết Kế Giao Diện Người dùng
Thiết Kế Giao Diện Người dùngThiết Kế Giao Diện Người dùng
Thiết Kế Giao Diện Người dùngPhương Minh
 
Đồ án kiểm thử phần mềm
Đồ án kiểm thử phần mềmĐồ án kiểm thử phần mềm
Đồ án kiểm thử phần mềmNguyễn Anh
 
Công nghệ yêu cầu requirements engineering (re)
Công nghệ yêu cầu requirements engineering (re)Công nghệ yêu cầu requirements engineering (re)
Công nghệ yêu cầu requirements engineering (re)nataliej4
 
Báo cáo kĩ thuật phần mềm và ứng dụng
Báo cáo kĩ thuật phần mềm và ứng dụngBáo cáo kĩ thuật phần mềm và ứng dụng
Báo cáo kĩ thuật phần mềm và ứng dụngVượng Đặng
 
Tìm việc làm từ xa ngành IT có đơn giản.pdf
Tìm việc làm từ xa ngành IT có đơn giản.pdfTìm việc làm từ xa ngành IT có đơn giản.pdf
Tìm việc làm từ xa ngành IT có đơn giản.pdfGrowup Work
 
Phan tich httt_bang_uml
Phan tich httt_bang_umlPhan tich httt_bang_uml
Phan tich httt_bang_umlMai Mit
 
Phan tich hệ thống thông tin bằng uml
Phan tich hệ thống thông tin bằng umlPhan tich hệ thống thông tin bằng uml
Phan tich hệ thống thông tin bằng umldlmonline24h
 
Phan tich httt_bang_uml
Phan tich httt_bang_umlPhan tich httt_bang_uml
Phan tich httt_bang_umlAxnet Dung
 

Ähnlich wie 2. fitts law (20)

2 thu thap va mo hinh yeu cau
2 thu thap va mo hinh yeu cau2 thu thap va mo hinh yeu cau
2 thu thap va mo hinh yeu cau
 
tnyc-c1-yeucauphanmem-sv.pdf
tnyc-c1-yeucauphanmem-sv.pdftnyc-c1-yeucauphanmem-sv.pdf
tnyc-c1-yeucauphanmem-sv.pdf
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1
 
Quản trị dự án trong công nghệ thông tin
Quản trị dự án trong công nghệ thông tinQuản trị dự án trong công nghệ thông tin
Quản trị dự án trong công nghệ thông tin
 
Cơ sở lý luận về phân tích thiết kế hệ thống thông tin quản lý khách hàng.docx
Cơ sở lý luận về phân tích thiết kế hệ thống thông tin quản lý khách hàng.docxCơ sở lý luận về phân tích thiết kế hệ thống thông tin quản lý khách hàng.docx
Cơ sở lý luận về phân tích thiết kế hệ thống thông tin quản lý khách hàng.docx
 
phan tich thiet ke he thong
phan tich thiet ke he thongphan tich thiet ke he thong
phan tich thiet ke he thong
 
Phan Tich Httt Bang Uml
Phan Tich Httt Bang UmlPhan Tich Httt Bang Uml
Phan Tich Httt Bang Uml
 
Slide
SlideSlide
Slide
 
Giao trinh phan tich thiet ke he thong thong tin
Giao trinh phan tich thiet ke he thong thong tinGiao trinh phan tich thiet ke he thong thong tin
Giao trinh phan tich thiet ke he thong thong tin
 
Asp tiengviet
Asp tiengvietAsp tiengviet
Asp tiengviet
 
Asp tiengviet
Asp tiengvietAsp tiengviet
Asp tiengviet
 
Thiết Kế Giao Diện Người dùng
Thiết Kế Giao Diện Người dùngThiết Kế Giao Diện Người dùng
Thiết Kế Giao Diện Người dùng
 
Đồ án kiểm thử phần mềm
Đồ án kiểm thử phần mềmĐồ án kiểm thử phần mềm
Đồ án kiểm thử phần mềm
 
1 gioi thieu httt
1 gioi thieu httt1 gioi thieu httt
1 gioi thieu httt
 
Công nghệ yêu cầu requirements engineering (re)
Công nghệ yêu cầu requirements engineering (re)Công nghệ yêu cầu requirements engineering (re)
Công nghệ yêu cầu requirements engineering (re)
 
Báo cáo kĩ thuật phần mềm và ứng dụng
Báo cáo kĩ thuật phần mềm và ứng dụngBáo cáo kĩ thuật phần mềm và ứng dụng
Báo cáo kĩ thuật phần mềm và ứng dụng
 
Tìm việc làm từ xa ngành IT có đơn giản.pdf
Tìm việc làm từ xa ngành IT có đơn giản.pdfTìm việc làm từ xa ngành IT có đơn giản.pdf
Tìm việc làm từ xa ngành IT có đơn giản.pdf
 
Phan tich httt_bang_uml
Phan tich httt_bang_umlPhan tich httt_bang_uml
Phan tich httt_bang_uml
 
Phan tich hệ thống thông tin bằng uml
Phan tich hệ thống thông tin bằng umlPhan tich hệ thống thông tin bằng uml
Phan tich hệ thống thông tin bằng uml
 
Phan tich httt_bang_uml
Phan tich httt_bang_umlPhan tich httt_bang_uml
Phan tich httt_bang_uml
 

2. fitts law

  • 1. User-Centered DesignThiết kế hướng Người Dùng
  • 2.
  • 3.
  • 4.
  • 5. Affordance Affordance làmộtđặctính (quality) củamộtđốitượng (object) hay mộtmôitrường(env), đặctínhnàychophépngườidùngthựchiệnmộthành động.
  • 6.
  • 7.
  • 9.
  • 10.
  • 11. Fitts’ Law là mô hình dự đoán (predict) thời gian di chuyển một thiết bị trỏ (pointing device) từ một xuất phát điểm đến một mục tiêu.
  • 12. D W
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. Một số ứng dụng Buttons và các giao diện phải có kích thước đủ lớn Cạnh hoặc góc của màn hình là mục tiêu dễ trỏ Menu của Mac thì dễ dùnghơn menu của Windows
  • 19.
  • 20.
  • 21.
  • 22. Big names don’t know Fitts’ law too
  • 23. UI là một lớp của hệ thống. UI không tồn tại độc lập.
  • 26. Iterative Design Tập trung vào người dùng(user) và tác vụ(task) User Analysis: người dùng là ai? Task analysis: người dùng cần gì? Người dùng tham gia như tư vấn, đánh giá, và nhiều lúc là người thiết kế Đánh giá thường xuyên
  • 27. User & Task Analysis Bước đầu tiên của thiết kế lấy người dùng làm trung tâm User analysis: người dùng là ai? Task analysis: người dùng cần gì?
  • 28. Tìm hiểu người dùng Xác định những đặc tính của tập người dùng Tuổi, giới tính, sắc tộc Trình độ văn hóa Kinh nghiệm sử dụng máy tính Kỹ năng chung Kinh nghiệm chuyên ngành Kinh nghiệm về ứng dụng Môi trường làm việc văn cảnh xã hội Các mối quan hệ và thói quen giao tiếp
  • 29. Các tập người dùng khác nhau Nhiều ứng dụng có các tập người dùng khác nhau Ví dụ: go.vn Giáo dục: giáo viên, phụ huynh, học sinh Giải trí: teen, văn phòng, sinh viên
  • 30. Các phương pháp Phương pháp Questionaires – Khảo sát Interviews – Phỏng vấn Observation – Quan sát
  • 31. Ví dụ: Clubs/Clan Người dùng là ai? Hội/nhóm có cùng sở thích Độ tuổi rộng (10-50), gồm các thành phần xã hội khác nhau Có kinh nghiệm dùng máy tính và Internet Kiến thức về đề tài yêu thích tốt, nhưng không nhiều về sản phẩm Nhóm người sử dụng đặc biệt Game thủ
  • 32. Task Analysis Xác định các tác vụ(task) cụ thể mà hệ thống/chương trình sẽ thực hiện Mỗi tác vụ là một mục tiêu (goal) (what not how) Bắt đầu từ mục tiêu chung của hệ thống, sau đó chia tách 1 cách hệ thống xuống thành tác vụ nhỏ Mục tiêu chung: Tạo clan CF Tác vụ: Nhập thông tin cơ bản Mời thành viên tham gia Mua icon cho nhóm
  • 33. Những thành phần chính Cái gì cần phải làm? Mục tiêu CC Điều kiện cần (precondition) Các tác vụ cần mà tác vụ này phụ thuộc Thông tin người dùng cần phải biết Các bước bao gồm khi thực hiện tác vụ này Tác vụ con (subtasks) Subtask có thể tiếp tục được chia nhỏ
  • 34. Ví dụ: Tạo tài khoản go.vn Mục tiêu Tạo tài khoản tại hệ thống go.vn Precondition Có giấy chứng minh thư nhân dân Truy nhập được mạng Internet Subtasks Chấp nhận điều khoản sử dụng Nhập thông tin liên lạc Nhập thông tin cá nhân Nhập mã bảo mật
  • 35. Các câu hỏi khác Tác vụ (task) được thực hiện ở đâu? Mức độ thường xuyên? Các giới hạn về thời gian và tài nguyên? Người dùng học các thực hiện như thế nào? Những lỗi nào có thể xảy ra? Những người nào khác cần tham gia?
  • 36. Các thực hiện Phỏng vấn người dùng Quan sát trực tiếp người dùng thực hiện tác vụ
  • 37. Một số điều cần tránh Lập lại những lỗi của quy trình hiện tại Không thu thập được những khía cạnh tốt của quy trình hiện tại
  • 38. Một có kỹ năng Cách đặt câu hỏi Tại sao anh/chị lại làm như thế này? (goal/mục tiêu) Anh/chị làm như thế nào? (subtasks) Chú ý đến điểm yếu trong quy trình hiện tại Mục tiêu không đặt được, tốn thơi gian, người dùng khó chịu Contextual inquiry Participatory design

Hinweis der Redaktion

  1. Chúng ta review lại một số khái niệm của usability trong buổi seminar lần trước. Một trong những khái niệm đó là affordance.Affordance của vòi nước đầu tiên là vặn, hay có thể nói “this tap affords turning”
  2. Vòi nước thứ 2, affordance của nó là gập lên gập xuống.
  3. Loại vòi nước thứ 3, affordance của nó là ấn vào.
  4. Định nghĩa affordance.
  5. Khi một vật được thiết kế tốt, chỉ nhìn vào vật đó, người dùng sẽ hiểu cách sử dụng nó. Khái niệm affordance không chỉ áp dụng cho các đồ vật mà còn áp dụng cho các công cụ giao diện (UI elements).Khoảng 10 năm trước, tất cả các nút ấn được thiết kế theo phong cách 3D. Sử dụng mầu sắc và bóng chiếu, các nút ấn (buttons) trông nổi lên khỏi mặt phẳng màn hình. Việc thể hiện nút ấn nào không chỉ cho đẹp về mặt Mỹ thuật mà vì nút ấn 3D nổi lên và cho ta cảm giác muốn tương tac với nó thì ấn vào.
  6. Nhiều websites gần đây, trong đó có cả go.vn, có thiết kế giao diện đẹp nhưng nút bấm (buttons) lại không có affordance hợp lý.Ví dụ, nút “Tạo Avatar hoạt hình” và “Tạo Avatar thường” trông nổi, không tạo được cảm giác nó là nút bấm (buttons) và muốn tương tác với nó thì bấm vào nó. Thực tế nó trông giống như Label “Avatar hiện tại”, label này không thể click vào được. Điều này cũng vi phạm vào tính đồng nhất (consistency) trong thiết kế của Avatar. Things look alike should behave alike.
  7. Tiếp theo chúng ta cùng bình luận (ném đá) một giao diện khác.Khi xem một ảnh trong một album thì một tác vụ quan trọng đó là xem ảnh kế tiếp. Tuy vậy có rất nhiều người dùng phản ánh là việc xem ảnh kế tiếp trong giao diện goOnline chưa thực sự được tiện lợi.Có nhiều phương pháp để tìm ra những vấn đề trong giao diện,Thu thập feedback (phản hồi) usability testing, mời người dùng kiểm tra sản phẩm mới và quan sátTuy vậy, có một số vấn đề chúng ta có thể tiên đoán bằng lý thuyết trước khi đưa ra chạy thử. Vấn đề ở giao diện ảnh trên cũng nằm trong số đó.
  8. Một tình huống thông dụng trong sử dụng máy tính, người dùng cần di chuyển con trỏ từ một điểm (xuất phát) đến một vùng mục tiêu (buttons, labels, menu).Point and click action.
  9. Định luật Fitts.
  10. Thời gian cần thiết để di chuyển đến vùng mục tiêu là một hàm số với biến số là khoảng cách giứa 2 điểm và độ rộng của vùng mục tiêu.T = thời gian trung bình để hoàn thành hành động di chuyểna và b là 2 hằng số: a thể hiện tốc độ khởi động và dừng, b thể hiện tốc độ của thiết bị trỏ. 2 hằng số này được xác định bằng thực nghiệm.D = khoảng cách từ điểm xuất phát đến tâm vùng mục tiêu.W = độ rộng vùng mục tiêu đo theo trục di chuyển.Định luật Fitts được chứng minh bằng thực nghiệm là nó cho kết quả chính xác trong thực tế.
  11. Mặc dù thông điệp cơ bản tương đối dễ hiểu, (vật to thì dễ chọn, khoản cách gần hơn thì dễ chọn), điều thú vị nằm ở tính chất toán học của công thức. Hàm số trogn đinh luật Fitts là hàm số log, do vậy quan hệ giữa kích thước và thời gian là đường cong. Đối với vật nhỏ, tăng kích thước sẽ cải thiệm thời gian rất nhiều, trong khi đó một đối tượng kích thước đã lớn rồi, tăng thêm kích thước không cải thiện nhiều về thơi gian.Tính chất này cũng đúng với khoảng cách (D)
  12. Định luật Fitts ban áp dụng cho di chuyển trên một trục.
  13. Do vậy khi áp dụng định luật Fitts vào không gian 2 chiều (như màn hình), thì đơn vị W phụ thuộc vào điểm xuất phát.
  14. Giải thích tại sao cho mỗi trường hợp