T HIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC PGS.TS. Đặng Văn Đức [email protected] HÀ NỘI...

THIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC

PGS.TS. Đặng Văn Đứ[email protected]

HÀ NỘI – 2007/10

BÀI 8

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

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 2/40

Bài 8: Thiết kế đồ họa và tương tácdvduc-2007/10

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

3/40


1. Lỗi thiết kế?

dvduc-2007/10

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.

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

http://www.bonsaietc.com/BEtcSiteSearchEngine_Frame.htm

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)

dvduc-2007/10

và …

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

dvduc-2007/10

Title bar

Scrollbar thumb

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

Trong đó: Hue - màu tinh khiết, Value - độ sáng (chói) của màu.

dvduc-2007/10 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;

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

dvduc-2007/10 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 15/40


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

dvduc-2007/10 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 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.

dvduc-2007/10 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 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 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 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 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 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 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

dvduc-2007/10

Đường viền

Nền

Ảnh

Nhãn

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 25/40


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

dvduc-2007/10

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

DocumentFolderCabinetv.v...

SelectionTextGraphicsv.v...

Pushbutton FillRadio buttonCheck Boxv.v...

EraserPencilv.v...

HourglassWatchThermometerv.v...

26/40


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.

dvduc-2007/10

Paintbrush(Mất cân đối

giữa nửa trên và nửa

dưới)

MS Paint

27/40



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.

dvduc-2007/10

Khoảng cách quan sát thông thường

60 cm

45 cm30 cm

28/40



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.

dvduc-2007/10 29/40



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

dvduc-2007/10 30/40


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]

dvduc-2007/10

Elementary Symbols Document Types

Document Text document

Assistant Spreadsheet document

Template Presentation document

Database document

Applications Generated Icons

Word Word text document

Excel Excel document

Powerpoint Powerpoint document

31/40


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.

dvduc-2007/10 32/40


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)

dvduc-2007/10 33/40


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. dvduc-2007/10 34/40


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.

dvduc-2007/10 35/40



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

dvduc-2007/10 36/40



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

dvduc-2007/10 37/40


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.

dvduc-2007/10 38/40


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.

dvduc-2007/10

Trả lời gửi về eMail: [email protected]

39/40

mailto:[email protected]


Vấn đề nghiên cứu tiếp theo

dvduc-2007/10 40/40

Câu hỏi?

T HIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC PGS.TS. Đặng Văn Đức [email protected] HÀ NỘI...

Documents

Transcript of T HIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC PGS.TS. Đặng Văn Đức [email protected] HÀ NỘI...