Chủ đề môn học

2. Chủ đề môn học • Giới thiệu về HCI • Tính sử dụng được của hệ thống • Thiết kế hướng người sử dụng • Khả năng con người • Mô hình vào – ra dữ liệu • Nguyên lý thiết kế giao diện • Xây dựng prototype • Thiết kế đồ họa và tương tác • Đánh giá và kiểm thử giao diện • Các chủ đề nghiên cứu Bài 8: Thiết kế đồ họa và tương tác

3. Nội dung bài này • Lỗi thiết kế trong hệ thống tương tác • Hướng dẫn thiết kế đồ họa • Nguyên tắc Gestalt • Thiết kế biểu tượng • Kỹ thuật thiết kế tương tác • Tổng kết bài Bài 8: Thiết kế đồ họa và tương tác

4. 1. Lỗi thiết kế? • Web site ‘Midwest Microwave’ • Cái gì quan trọng và cái gì không quan trọng? • Không chia đoạn, không có tiêu đề, khoảng trắng • Không tổ chức thành các chunks • Thông tin không hữu ích. Bài 8: Thiết kế đồ họa và tương tác

5. Lỗi thiết kế? • Sử dụng "may đo" không cần thiết • Dòng văn bản, font chữ rối rắm • Âm thanh, màu, annimation, nền hoa văn... không phù hợp. Bài 8: Thiết kế đồ họa và tương tác

6. Lỗi thiết kế? • Selling bonsai trees and equipment (Website) • Sử dụng các hiệu ứng của Flash: Menus chuyển động tùy ý theo chiều ngang/dọc • Flash là công cụ mạnh, có thể tạo ra UI tốt và cả UI tồi http://www.bonsaietc.com/BEtcSiteSearchEngine_Frame.htm Bài 8: Thiết kế đồ họa và tương tác

7. Lỗi thiết kế? • Thiết kế Icons trong America On Line (circa 1995) • Thiếu nhất quán • Hai Icons khác nhau cùng biểu diễn một đối tượng (ví dụ Software Library) • Cùng một Icon biểu diễn hai đối tượng khác nhau (ví dụ Software Library và Geographic Store) và … Bài 8: Thiết kế đồ họa và tương tác

8. 2. Hướng dẫn thiết kế đồ họa • Trong quyển sách "Designing Visual Interfaces" (1995), Kevin Mullet và Darrell Sano đã trình bày các hướng dẫn (guidelines) thiết kế đồ họa • Sự đơn giản (Simplicity) • Sự tương phản (Contrast) • Khoảng trống (White space) • Sự cân đối (Balance) • Căn chỉnh (Alignment) • Edward Tufte trình bày về chủ đề này trong quyển sách "The Visual Display of Quantitative Information". Bài 8: Thiết kế đồ họa và tương tác

9. Sự đơn giản • Sự hoàn thiện đạt được khi không còn cái gì để bổ sung vào và không còn cái gì đáng phải bỏ nó đi (Antoine de St-Exupery) • Sự đơn giản không có nghĩa là thiếu đi sự trang trí... Nó chỉ có nghĩa rằng sự trang trí cần phải phù hợp với thiết kế, bất kỳ những gì lạ lẫm với nó thì phải bỏ đi (Paul Jacques Grillo) • "When in doubt, leave it out" • Nguyên lý "Keep it simple, stupid" (KISS) • Các kỹ thuật để đạt được sự đơn giản • Sự rút gọn (Reduction) • Tính đều (Regularity) • Nhiệm vụ kép (Double-Duty) Bài 8: Thiết kế đồ họa và tương tác

10. Sự đơn giản: Rút gọn • Loại bỏ các thành phần không cần thiết • Ví dụ trang chủ Google và thiết bị điều khiển từ xa Tivo • Ba bước • Quyết định cái gì là cần thiết để lại trong thiết kế • Xem xét kỹ lưỡng từng phần tử (label, control, color, font, line weight) xem có ích cho việc đạt được mục tiêu chính • Loại bỏ nếu nó không phải là cơ bản. • Các biểu tượng • Ảnh của Icon phải chứa các chi tiết tối thiểu, chủ yếu • Biểu tượng "cái kéo" trong bitmap 16x16, không thể rút gọn hơn. • Biểu tượng người tàn tật (Chuẩn của Bộ Giao thông Mỹ) Bài 8: Thiết kế đồ họa và tương tác

11. Sự đơn giản: Tính đều đặn • Sử dụng các pattern đều đặn • Hạn chế sự biến đổi không cần thiết giữa các phần tử • Hãy sử dụng cùng font, màu, độ rộng đường, khổ cỡ và hướng cho nhiều phần tử. • Ví dụ: Text layout trong PowerPoint • Đạt được sự rút gọn (các biểu tượng tối thiểu trình diễn layout) • Tính đều: Tiêu đề và các danh sách bullet được thể hiện theo cùng một cách. Bài 8: Thiết kế đồ họa và tương tác

12. Sự đơn giản: Nhiệm vụ kép • Có thể tổ hợp các phần tử để chúng có khả năng thực hiện đa nhiệm vụ trong thiết kế. • Ví dụ • Thanh trượt thực hiện ba nhiệm vụ khi trượt • Quan sát toàn bộ tài liệu • Vị trí cửa sổ trượt so với toàn bộ tài liệu • Phần trăm tài liệu hiển thị trong cửa sổ trượt • Thanh tiêu đề • Chứa label cửa sổ, điểm để trượt cửa sổ, chỉ báo cửa sổ là active và nơi chứa các phím lệnh hệ thống. Scrollbar thumb Title bar Bài 8: Thiết kế đồ họa và tương tác

13. Sự tương phản • Tương phản là đề cập đến sự cảm nhận khác nhau do những tính chất trực quan khác nhau của đối tượng như kích thước và màu của chúng. • Tương phản là sự không đều trong thiết kế để làm nổi bật các phần tử. • Biến thị giác • Bertin đề xuất 7 biến thị giác (visual variables) • Bộ xử lý cảm nhận có thể cảm nhận sự khác biệt của chúng • Trong đó: Hue - màu tinh khiết, Value - độ sáng (chói) của màu. Bài 8: Thiết kế đồ họa và tương tác

14. Đặc điểm của biến thị giác • Các biến thị giác có đặc điểm khác nhau. • Việc lựa chọn biến thị giác để phân biệt đối tượng sao cho các thuộc tính của nó phù hợp với sự giao tiếp. • Ví dụ việc biểu diễn nhiệt độ có thể sử dụng: position on a scale, length of a bar, color of an indicator, hoặc shape of an icon • Đặc điểm của biến thị giác bao gồm các độ đo sau • Nominal: chỉ so sánh bằng; • Mọi biến • Ordered: so sánh (<, >) • Các biến Position, size, value, và texture là có đặc điểm thứ tự. • Quantitative: tổng số khác nhau; • Các biến position và size là biến định lượng; • Các biến value, texture, orientation, hue, shape không phải định lượng • Length (tổng số mức độ phân biệt được) • Shape rất dài (đa dạng là vô hạn), Position là dài, Orientation là rất ngắn (~4)... Bài 8: Thiết kế đồ họa và tương tác

15. Sự tương phản: Lựa chọn • Sự lựa chọn (Selectivity) là cấp độ mà giá trị đơn của biến thị giác có thể được cảm nhận lựa chọn từ mảng quan sát • Biến lựa chọn: vị trí, kích thước, hướng, sắc màu, độ chói và hoa văn • Biến không lựa chọn: hình dạng • Ví dụ • Tìm mọi ký tự ở bên phải trang ký tự bên (position), • Tìm mọi ký tự màu đỏ (hue), • Tìm tất cả ký tự 'K' (shap) Câu hỏi nào khó trả lời? Bài 8: Thiết kế đồ họa và tương tác

16. Kỹ thuật tạo tương phản • Chọn biến thị giác phù hợp • Ví dụ phân cấp nội dung text (title, chapter, section, body text, footnote) • Các biến thị giác thứ tự là phù hợp • Biến nominal như hình dạng (ví dụ font family) là không phù hợp. • Sử dụng độ dài biến lớn nhất có thể • Sử dụng toàn bộ dải (xác định giá trị min và max để sử dụng) • Phân biệt rõ nét để dễ dàng cảm nhận • Độ đo cấp số nhân (ví dụ tăng 2 lần) dễ dàng phân biệt hơn so với độ đo cấp số cộng (ví dụ tăng 5 pixel) • Mã hóa dư thừa: ví dụ sử dụng font cho title không chỉ là lớn hơn (size) mà còn bổ sung thêm Bold (value), Centered (position) • Biếm họa những nơi cần thiết Bài 8: Thiết kế đồ họa và tương tác

17. Chọn biến thị giác để hiển thị • Ví dụ sử dụng biến thị giác phù hợp cho email inbox • Spam flag: nominal 2 mức (spam hoặc không) • Subject: nominal (có thứ tự tăng dần) • Sender: nominal (có thứ tự tăng dần) • Unread flag: nominal 2 mức (đã đọc và chưa đọc) • Date: số lượng (có thứ tự) • Redundant coding: • Sử dụng biến vị trí để gán mỗi field vào một cột. • Spam flag: Sử dụng shape, hue, value, size • Subject: Sử dụng shape • Sender: Sử dụng shape • Unread flag: Sử dụng shape, hue, value, size (chấm màu xanh lớn) • Date: Sử dụng shape, size và position (sắp xếp theo thời gian) • Thực hành • Hãy thiết kế trình diễn màn hình email inbox theo biến thị giác lựa chọn phù hợp. Bài 8: Thiết kế đồ họa và tương tác

18. Ví dụ thiết kế ít tương phản • Cần phân biệt captions và text fields • Vị trí rất giống nhau. • Kích thước tương tự nhau (độ rộng các cột như nhau) • Sắc màu nền khác chút ít (yellow vs. white) • Cường độ (giá trị) màu nền là giống nhau (rất sáng) • Sắc màu và cường độ chữ là như nhau (black, plain font) Bài 8: Thiết kế đồ họa và tương tác

19. Khoảng trắng • Giải quyết mâu thuẫn: nhu cầu khoảng trắng đối với nhu cầu có nhiều thông tin và nhiều controls trên màn hình. • Hãy để lề (margin) xung quanh mọi nội dung hiển thị. Không để dày đặc các controls. • Vi dụ hộp thoại dày đặc Bài 8: Thiết kế đồ họa và tương tác

20. Khoảng trắng • Tránh nhiễu bằng khoảng trắng • Ý tưởng của Tufte • Ví dụ loại bỏ qui tắc lưới trên Biểu đồ thanh chuẩn và sử dụng khoảng trống để biểu diễn nơi lưới đi qua • Cảm nhận ít nhiễu hơn • Excel không tự động làm việc này. Bài 8: Thiết kế đồ họa và tương tác

21. 3. Qui tắc Gestalt • Qui tắc Gestalt đề cập đến việc nhóm các đối tượng • Gestalt (tiếng Đức, có nghĩa là form, shape hay organized structure) là đề cập đến các tiến trình nhận thức cách mà sự vật (thing) được xếp đặt. • Sáu qui tắc: Bài 8: Thiết kế đồ họa và tương tác

22. Qui tắc Gestalt • Qui tắc liền kề (proximity) • Các phần tử gần nhau hơn có xu thế nhóm lại với nhau • Ví dụ: ta nhìn thấy bốn cột hình tròn trong ví dụ bên • Qui tắc tương tự (similarity) • Các phần tử với thuộc tính tương tự có xu thế nhóm lại với nhau • Ví dụ: ta nhìn thấy bốn hàng hình tròn • Qui tắc tiếp tục (Continuity) • Mắt người chờ đợi nhìn contour như đối tượng liên tục • Ví dụ: ta cảm nhận trước hết hai đoạn thẳng vuông góc với nhau, thay vì 4 đoạn thẳng gặp nhau tại 1 điểmhay hai góc vuông chung đỉnh Bài 8: Thiết kế đồ họa và tương tác

23. Qui tắc Gestalt • Qui tắc đóng (Closure) • Con người có xu thế cảm nhận hình đóng, đầy đủ thậm chí thiết chi tiết đoạn thẳng. • Ví dụ: ta nhìn thấy tam giác ở giữa ba hình tròn, mặc dù cạnh không được vẽ đầy đủ • Qui tắc vùng (Area) • Khi hai phần tử đè lên nhau, phần tử nhỏ hơn sẽ được diễn giải là nằm bên trên hình lớn hơn. • Ví dụ ta nhìn thấy hình vuông con năm trên hình vuông lớn. Không cảm nhận hình vuông lớn có lỗ hổng. • Qui tắc đối xứng (Symmetry) • Con người cảm nhận với xu thế đối xứng cao. • Ví dụ ta cảm nhận hai hình vuông chồng lên nhau thay vì ba đa giác tách biệt. Bài 8: Thiết kế đồ họa và tương tác

24. 4. Thiết kế biểu tượng • Trong máy tính, biểu tượng (Icon)có nghĩa là bức tranh nhỏ có ý nghĩa. • Biểu tượng là thành phần quan trọng trong thiết kế GUI: “A picture is worth a thousand words.” • Các phần tử của Icon Đường viền Nền Ảnh Nhãn Bài 8: Thiết kế đồ họa và tương tác

25. Yêu cầu thiết kế biểu tượng • Việc thiết kế Icon tốt là rất khó khăn • Ý nghĩa của Icon phụ thuộc vào ngữ cảnh sử dụng và nền văn hóa • Yêu cầu tổng quát của thiết kế Icon • Tiết kiệm không gian màn hình • Được nhận biết nhanh trong môi trường hiển thị dày đặc • Dễ nhớ • Giúp “quốc tế hóa” các UI. Bài 8: Thiết kế đồ họa và tương tác

26. Icon trên thiết bị trực quan Icon tương tác Icon phi-tương tác Object Icon Pointer Icon Control Icon Tool Icon Status Indicator Icon Selection Text Graphics v.v... Pushbutton Fill Radio button Check Box v.v... Eraser Pencil v.v... Hourglass Watch Thermometer v.v... Document Folder Cabinet v.v... Phân lớp biểu tượng • Có nhiều cách phân lớp Icon • ISO/IEC CD 11581-1.2 1993 standard Bài 8: Thiết kế đồ họa và tương tác

27. Các nguyên tắc thiết kế Icon • Tính cố kết (Coherency) • Thiết kế một tập Icon như tổng thể • Icon cần được nhất quán về màu, kích thước, metaphor, mức trừu tượng (ảnh chụp, phác họa hay biểu tượng). • Icon trong cùng một tập cần phải được hiển thị cân đối • Phân biệt trực quan giữa các Icon phải rõ ràng. Paintbrush (Mất cân đối giữa nửa trên và nửa dưới) MS Paint Bài 8: Thiết kế đồ họa và tương tác

28. Các nguyên tắc thiết kế Icon • Tính rõ ràng (Legibility) • Kích thước đối tượng, nét vẽ phải rõ ràng • Tương phản nền/hình vẽ • Quan tâm đến độ phân giải và khoảng cách quan sát • Ít sử dụng nét vẽ hình cung và đường cong. 60 cm 45 cm 30 cm Khoảng cách quan sát thông thường Bài 8: Thiết kế đồ họa và tương tác

29. Các nguyên tắc thiết kế Icon • Nhận dạng và nhớ lại (Recognition và Recall) • Chọn lựa metaphor tốt, quen thuộc với người quan sát. • Có thể chọn đối tượng cụ thể cho những nơi các khái niệm và hành động trừu tượng khó hiển thị. • Sử dụng tiết kiệm màu • Nên sử dụng gam màu gray và thêm 1, 2 màu. Bài 8: Thiết kế đồ họa và tương tác

30. Các nguyên tắc thiết kế Icon • Chú ý nền văn hóa các dân tộc • Chú ý khi sử dụng text hay các ký tự abc trong các Icon, nên thiết kế các phiên bản Icon khác nhau. • Ví dụ MS Word 97: Phiên bản tiếng Anh và tiếng Đức • Hạn chế sử dụng hình dạng mặt người, biểu tượng bàn tay trong Icon. • Metaphor đôi khi phụ thuộc vào văn hóa cụ thể. • Hộp thư của Mỹ xa lạ với nhiều người châu Âu • Nên sử dụng letter tray làm Icon cho thư đến Bài 8: Thiết kế đồ họa và tương tác

31. Ngôn ngữ Icon • Đối với tập lớn các Icon, cần phát triển Iconic language • Ngôn ngữ Icon là cách thức tổ hợp các biểu tượng thành phần vào Icon phức tạp • Ví dụ với Windows 95: • Document=Aplication + DocType [+ Template] [+Assistant] Bài 8: Thiết kế đồ họa và tương tác

32. 5. Thiết kế tương tác • Sau khi phân tích nhiệm vụ, người thiết kế phải chuyển đổi các nhiệm vụ thành đặc trưng (features) chương trình. • Trong thiết kế UI, khái niệm ‘dẫn đường’ là việc thực hiện chuyển đổi nhiệm vụ sang đặc trưng. • Để dẫn đường là trực quan thì: • Cần dễ dàng nhận biết điểm khởi đầu • Hiểu rõ ràng điểm đích • Dấu hiệu rõ ràng trên đường đi từ khởi đầu đến đích • Tại bất kỳ thời điểm nào cũng phải biết được đang ở đâu, cách tiến lên và cách đi trở lại và cách thoát khỏi chương trình. Bài 8: Thiết kế đồ họa và tương tác

33. Các yếu tố chính của dẫn đường • Điểm khởi đầu • Cung cấp dấu hiệu điểm bắt đầu rõ ràng để người sử dụng biết khởi đầu nhiệm vụ • Đảm bảo điểm khởi đầu là ở ngay trong chương trình này. Nếu nhiệm vụ (task) được chương trình khác thực hiện thì sử dụng Menu command để kết nối nó. • Điểm đích • Người sử dụng có khả năng dự báo điểm khởi đầu nào sẽ dẫn tới đích mong muốn. • Đường thoát • Lệnh thoát được đánh dấu rõ ràng trong trường hợp người sử dụng thay đổi ý định hay khởi động lại (sử dụng phím Exit hay Home) Bài 8: Thiết kế đồ họa và tương tác

34. Các yếu tố chính của dẫn đường • Bước hiện hành • Cung cấp rõ ràng chỉ báo: người sử dụng đang ở nơi nào trong tiến trình thực hiện công việc. • Thông thường sử dụng mô tả trên thanh tiêu đề cửa sổ ở trong trường hợp xuất hiện nhiều cửa sổ. Trong tiến trình đa bước thường bổ sung thêm thông báo, Ví dụ: Step 1 of 7 • Bước tiếp theo • Chỉ rõ ràng cách thực hiện đến bước tiếp theo. • Thường sử dụng các lựa chọn hay lệnh phù hợp. Các phím lệnh có nhãn mô tả để người sử dụng biết cái gì sẽ thực hiện khi nó bị nhấn. • Bước trước đó • Chỉ rõ ràng cách quay trở lại bước trước đó • Thường sử dụng phím Cancel trong trong hộp thoại Modal hay phím Back trong Wizards. Bài 8: Thiết kế đồ họa và tương tác

35. Kỹ thuật thiết kế tương tác • Nhận biết các bước trong cửa sổ • Phân nhóm logíc các controls trong cửa sổ. Hiển thị theo trật tự từ trên xuống dưới. • Đánh số các bước trong nhiệm vụ • Sử dụng cửa sổ đơn mỗi khi có thể • Có thể tổ hợp các cửa sổ liên quan vào Property Sheet hay hộp thoại động. Ví dụ hộp thoại “Page Setup” của Windows. • Sử dụng Wizard • Lý tưởng để thực hiện các nhiệm vụ phức tạp. Có bước đi rõ ràng. Bài 8: Thiết kế đồ họa và tương tác

36. Kỹ thuật thiết kế tương tác • Sử dụng hộp thoại Modal • Để người sử dụng thực hiện một nhiệm vào một thời điểm. • Không sử dụng các cửa sổ không liên quan cho cùng nhiệm vụ. Bài 8: Thiết kế đồ họa và tương tác

37. Kỹ thuật thiết kế tương tác • Không bỏ qua các bước • Nếu 2 nhiệm vụ có cùng một số bước ban đầu sau đó chúng có các bước riêng biệt. • Kỹ thuật dẫn đường rõ ràng là hình thành hai đường dẫn độc lập ngay từ ban đầu. • Ví dụ Add/Remove Programs Properties của Windows 95 thực hiện cả với component và program: Nên tách phím Add/Remove... thành 2 phím, đó là “Add or Remove Program Components…” và “Add or Remove Program…” Bài 8: Thiết kế đồ họa và tương tác

38. 6. Tổng kết bài • Năm hướng dẫn thiết kế đồ họa cho UI được xem xét • Qui tắc Gestalt ứng dụng trong thiết kế đồ họa • Các qui tắc thiết kế biểu tượng • Kỹ thuật chuyển đổi nhiệm vụ thành các đặc trưng chương trình. Bài 8: Thiết kế đồ họa và tương tác

39. Vấn đề nghiên cứu tiếp theo • Anh/chị hãy thiết kế trình diễn trang Web kết quả của Search engine. • Trình bày thiết kế màn hình giao diện (desktop/Web) hoặc nội dung văn bản mà anh/chị đã thực hiện. • Theo các anh/chị trang màn hình giao diện nào là có thiết kế tốt từ góc độ sử dụng các biến thị giác. Tại sao? • Những nguyên tắc gestalt nào được sử dụng trong các hình sau đây? Diễn giải. • Chuẩn ISO về thiết kế biểu tượng. Trả lời gửi về eMail: hci.dvduc@gmail.com Bài 8: Thiết kế đồ họa và tương tác

40. Vấn đề nghiên cứu tiếp theo Bài 8: Thiết kế đồ họa và tương tác

41. Câu hỏi?