HCI lec8 final

BÀI 8

THIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC
PGS.TS. Đặng Văn Đức


HÀ NỘI – 2007/10


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

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

2/40


Nội dung bài này








dvduc-2007/10

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

3/40

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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

4/40

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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

5/40


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

/>dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

6/40


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à …

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

7/40


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".

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

8/40


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)

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

9/40


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ỹ)

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

10/40


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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

11/40


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.

Title bar
Scrollbar thumb

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

12/40


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



dvduc-2007/10

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

13/40


Đặ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;





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)



dvduc-2007/10

Mọi biến

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

14/40


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?

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

15/40


Kỹ thuật tạo tương phản



Chọn biến thị giác phù hợp







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ể





Ví dụ phân cấp nội dung text (title, chapter, section, body text, footnote)

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)



dvduc-2007/10

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

16/40

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



dvduc-2007/10

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

17/40


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)

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

18/40


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

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

19/40

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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

20/40

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:

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

21/40


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

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

22/40


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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

23/40


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

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

24/40


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.

dvduc-2007/10

Bài 8: Thiết kế đồ họa và tương tác

25/40