Chủ đề môn học

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

[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/10http://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 barScrollbar 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


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.

dvduc-2007/10

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

60 cm

45 cm30 cm

28/40


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.

dvduc-2007/10 29/40


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

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 TypesDocument Text document

Assistant Spreadsheet document

Template Presentation document

Database document

Applications Generated IconsWord 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


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

dvduc-2007/10 36/40


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

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?

Documents

Chủ đề môn học