Translated from English to Vietnamese - www.onlinedoctranslator.

com

Cuốn sách này gần như hoàn toàn về giao diện và hành vi của các ứng dụng, ứng dụng web và thiết bị
tương tác. Nhưng chương đầu tiên này là ngoại lệ của quy tắc. Không có ảnh chụp màn hình ở đây; không
bố cục, không điều hướng, không sơ đồ, không hình ảnh nào cả.

Tại sao không? Rốt cuộc, đó có thể là lý do tại sao bạn chọn cuốn sách ngay từ đầu.

Đó là vì thiết kế giao diện tốt không bắt đầu bằng hình ảnh. Nó bắt đầu với sự hiểu biết về mọi người:
họ như thế nào, tại sao họ sử dụng một phần mềm nhất định và cách họ có thể tương tác với phần
mềm đó. Bạn càng biết nhiều về họ và bạn càng đồng cảm với họ, bạn càng có thể thiết kế cho họ
hiệu quả hơn. Xét cho cùng, phần mềm chỉ là một phương tiện để đạt được mục đích cho những
người sử dụng nó. Bạn càng đáp ứng tốt những mục đích đó, những người dùng đó sẽ càng hạnh
phúc.

Mỗi khi ai đó sử dụng một ứng dụng hoặc bất kỳ sản phẩm kỹ thuật số nào, anh ta sẽ tiếp tục trò chuyện với
máy. Nó có thể là nghĩa đen, chẳng hạn như với một dòng lệnh hoặc menu điện thoại, hoặc ngầm, giống
như “cuộc trò chuyện” mà một nghệ sĩ có với sơn và vải vẽ của cô ấy—sự cho và nhận giữa người thợ thủ
công và thứ được tạo ra. Với phần mềm xã hội, nó thậm chí có thể là một cuộc trò chuyện bằng proxy. Dù
thế nào đi chăng nữa, giao diện người dùng làm trung gian cho cuộc trò chuyện đó, giúp người dùng đạt
được bất kỳ mục đích nào mà họ mong muốn.

Sau đó, với tư cách là nhà thiết kế giao diện người dùng, bạn có thể viết kịch bản cuộc trò chuyện đó
hoặc ít nhất là xác định các điều khoản của nó. Và nếu bạn định viết kịch bản cho một cuộc trò
chuyện, bạn nên hiểu rõ khía cạnh của con người nhất có thể. Động cơ và ý định của người dùng là gì?
Người dùng muốn sử dụng “từ vựng” nào về từ ngữ, biểu tượng và cử chỉ? Làm cách nào ứng dụng có
thể đặt kỳ vọng phù hợp cho người dùng? Làm thế nào để người dùng và máy cuối cùng giao tiếp ý
nghĩa với nhau?

Có một câu châm ngôn trong lĩnh vực thiết kế giao diện: “Biết người dùng của bạn, vì họ không phải là bạn!”

Vì vậy, chương này sẽ nói về con người. Nó đề cập ngắn gọn một vài ý tưởng cơ bản trong phần giới
thiệu này, và sau đó thảo luận về một số mẫu khác với những mẫu trong phần còn lại của cuốn sách.
Chúng mô tả hành vi của con người—trái ngược với hành vi của hệ thống—mà phần mềm bạn thiết
kế có thể cần hỗ trợ. Phần mềm hỗ trợ những hành vi này của con người tốt hơn sẽ giúp người dùng
đạt được mục tiêu của họ.
2Chương 1: Người dùng làm gì

Mọi người sử dụng một công cụ—phần mềm hay cách khác—đều có lý do để sử dụng nó. Ví dụ:

• Tìm một số sự thật hoặc đối tượng

• Học gì đó
• Thực hiện giao dịch
• Kiểm soát hoặc giám sát một cái gì đó

• Tạo ra thứ gì đó
• Trò chuyện với người khác
• Được giải trí
Các thành ngữ, hành vi người dùng và mẫu thiết kế nổi tiếng có thể hỗ trợ từng mục tiêu
trừu tượng này. Ví dụ, các nhà thiết kế trải nghiệm người dùng đã học được cách giúp mọi
người tìm kiếm thông tin cụ thể trong một lượng lớn thông tin trực tuyến. Họ đã học cách
trình bày các nhiệm vụ sao cho dễ dàng thực hiện chúng. Họ đang học cách hỗ trợ xây dựng
tài liệu, hình minh họa và mã.

Bước đầu tiên trong việc thiết kế giao diện là tìm ra những gì người dùng đang thực sự cố gắng
đạt được. Ví dụ, điền vào một biểu mẫu gần như không bao giờ là mục tiêu tự thân—mọi người
chỉ làm điều đó vì họ đang cố gắng mua thứ gì đó trực tuyến, gia hạn giấy phép lái xe hoặc cài
đặt phần mềm. Họ đang thực hiện một số loại giao dịch.

Đặt câu hỏi đúng có thể giúp bạn kết nối mục tiêu của người dùng với quy trình thiết kế. Người dùng và
khách hàng thường nói chuyện với bạn về các tính năng và giải pháp mong muốn, không phải về nhu cầu
và vấn đề. Khi một người dùng hoặc khách hàng nói với bạn rằng họ muốn một tính năng nhất định, hãy
hỏi tại sao họ muốn tính năng đó—xác định mục tiêu trước mắt của họ. Sau đó, với câu trả lời cho câu hỏi
này, hãy hỏi lại “tại sao”. Và một lần nữa. Tiếp tục hỏi cho đến khi bạn vượt ra khỏi ranh giới của vấn đề thiết
kế trước mắt.*

Tại sao bạn nên hỏi những câu hỏi này nếu bạn có yêu cầu rõ ràng? Bởi vì nếu bạn yêu thích
thiết kế mọi thứ, bạn rất dễ bị cuốn vào một vấn đề thiết kế giao diện thú vị. Có thể bạn giỏi xây
dựng các biểu mẫu chỉ yêu cầu thông tin phù hợp, với các điều khiển phù hợp, tất cả đều được
trình bày đẹp mắt. Nhưng nghệ thuật thực sự của thiết kế giao diện nằm ởgiải quyết đúng vấn
đề.

Vì vậy, đừng quá thích thiết kế hình thức đó. Nếu có bất kỳ cách nào để kết thúc giao dịch mà không khiến
người dùng phải đi qua biểu mẫu đó, hãy loại bỏ nó hoàn toàn. Điều đó giúp người dùng tiến gần hơn đến
mục tiêu của mình, với ít thời gian và công sức hơn từ phía họ (và có thể cả của bạn nữa).

Hãy sử dụng cách tiếp cận “tại sao” để tìm hiểu sâu hơn một chút về một số tình huống thiết kế điển hình.

* Đây cũng chính là nguyên tắc làm nền tảng cho một kỹ thuật nổi tiếng được gọi làphân tích nguyên nhân gốc rễ.Nhưng phân tích nguyên nhân
gốc rễ là một công cụ để khắc phục những thất bại của tổ chức; ở đây, chúng tôi sử dụng “năm câu hỏi tại sao” (ít nhiều) để hiểu hành vi hàng
ngày của người dùng và yêu cầu tính năng.
 Một phương tiện để kết thúc3

• Tại sao người quản lý cấp trung sử dụng ứng dụng email khách? Tất nhiên là có—“để đọc
email.” Tại sao cô ấy đọc và gửi email ngay từ đầu? Để trò chuyện với những người khác.
Tất nhiên, các phương tiện khác có thể đạt được mục đích tương tự: điện thoại, một cuộc trò chuyện ở hành
lang, một tài liệu chính thức. Nhưng rõ ràng, email đáp ứng một số nhu cầu mà các phương thức khác không
đáp ứng được. Chúng là gì, và tại sao chúng lại quan trọng với cô ấy? Sự riêng tư? Khả năng lưu trữ một cuộc
trò chuyện? Lợi ích xã hội? Còn gì nữa không?

• Một người cha đến một đại lý du lịch trực tuyến, nhập thành phố nơi gia đình ông sẽ nghỉ hè và cố gắng tìm giá
vé máy bay vào các ngày khác nhau. Anh ấy đang học hỏi từ những gì anh ấy tìm thấy, nhưng mục tiêu của
anh ấy không chỉ là duyệt và khám phá các tùy chọn khác nhau. Hỏi tại sao. Mục tiêu của anh ta thực ra là
một giao dịch: mua vé máy bay. Một lần nữa, anh ấy có thể đã làm điều đó tại nhiều trang web khác nhau
hoặc qua điện thoại với một đại lý du lịch trực tiếp. Làm thế nào là trang web này tốt hơn so với các tùy chọn
khác? Nó có nhanh hơn không? Thân thiện hơn? Nhiều khả năng để tìm thấy một thỏa thuận tốt hơn?

• Một người dùng điện thoại di động muốn có một cách để tìm kiếm trong danh sách liên lạc của mình nhanh
hơn. Bạn, với tư cách là nhà thiết kế, có thể đưa ra một số ý tưởng thông minh để tiết kiệm thao tác gõ phím
khi tìm kiếm. Nhưng tại sao anh ta muốn nó? Hóa ra là anh ấy thực hiện rất nhiều cuộc gọi khi đang lái xe và
anh ấy không muốn rời mắt khỏi đường nhiều hơn mức cần thiết—anh ấy muốn thực hiện cuộc gọi trong khi
vẫn đảm bảo an toàn (trong phạm vi có thể). Trường hợp lý tưởng là anh ấy hoàn toàn không phải nhìn vào
điện thoại! Một giải pháp tốt hơn là quay số bằng giọng nói: tất cả những gì anh ta phải làm là nói tên và
điện thoại sẽ thực hiện cuộc gọi cho anh ta.

• Đôi khi phân tích mục tiêu thực sự không đơn giản chút nào. Một trang web trượt tuyết
có thể cung cấp thông tin (để học tập), một cửa hàng trực tuyến (để giao dịch) và một
bộ phim Flash (để giải trí). Giả sử ai đó truy cập trang web để mua hàng, nhưng cô ấy bị
phân tâm khi xem thông tin về thủ thuật trượt tuyết—cô ấy đã chuyển mục tiêu từ
hoàn thành giao dịch sang duyệt và tìm hiểu. Có thể cô ấy sẽ quay lại mua thứ gì đó, có
thể không. Và phần giải trí của trang web có giải trí thành công cho cả người 12 tuổi và
người 35 tuổi không? Người đàn ông 35 tuổi sẽ đi nơi khác để mua tấm ván mới của
mình nếu anh ta không cảm thấy như ở nhà, hay anh ta không quan tâm?

Thật dễ dàng để lập mô hình người dùng như một thực thể vô danh duy nhất—“Người dùng”—đi qua một tập hợp
các trường hợp sử dụng đơn giản, với một mục tiêu định hướng theo nhiệm vụ. Nhưng điều đó không nhất thiết
phản ánh thực tế của người dùng của bạn.

Để thiết kế tốt, bạn cần tính đến nhiều yếu tố “nhẹ nhàng” hơn: phản ứng bản năng, sở thích, bối cảnh
xã hội, niềm tin và giá trị. Tất cả những yếu tố này có thể ảnh hưởng đến thiết kế của một ứng dụng
hoặc trang web. Trong số các yếu tố mềm hơn này, bạn có thể tìm thấy tính năng quan trọng hoặc
yếu tố thiết kế giúp ứng dụng của bạn hấp dẫn và thành công hơn.

Vì vậy, hãy tò mò. Chuyên tìm hiểu xem người dùng của bạn thực sự thích gì, họ thực sự
nghĩ và cảm thấy gì.
4Chương 1: Người dùng làm gì

Khám phá thực nghiệm là cách thực sự tốt duy nhất để có được thông tin này. Để bắt đầu thiết
kế, bạn cần mô tả đặc điểm của những kiểu người sẽ sử dụng thiết kế của bạn (bao gồm cả
những yếu tố nhẹ nhàng hơn vừa được đề cập) và cách tốt nhất để làm điều đó là ra ngoài và
gặp gỡ họ.

Tất nhiên, mỗi nhóm người dùng là duy nhất. Chẳng hạn, đối tượng mục tiêu của một ứng dụng điện thoại di động mới sẽ
khác biệt đáng kể so với đối tượng mục tiêu của một phần mềm khoa học. Ngay cả khi cùng một người sử dụng cả hai, kỳ
vọng của anh ta đối với mỗi người là khác nhau—một nhà nghiên cứu sử dụng phần mềm khoa học có thể chấp nhận giao
diện kém bóng bẩy hơn để đổi lấy chức năng cao, trong khi cũng người đó có thể ngừng sử dụng ứng dụng dành cho thiết
bị di động nếu anh ta thấy giao diện người dùng của nó không phù hợp. quá khó để sử dụng sau một vài ngày.

Mỗi người dùng là duy nhất, quá. Người này thấy khó, người sau lại không. Bí quyết là tìm ra
những gìnói chung làđúng về người dùng của bạn, điều đó có nghĩa là tìm hiểu đủ về từng
người dùng để tách những điều kỳ quặc khỏi các mẫu hành vi phổ biến.

Cụ thể, bạn sẽ muốn tìm hiểu:

• Mục tiêu của họ khi sử dụng phần mềm hoặc trang web

• Nhiệm vụ cụ thể mà họ đảm nhận để theo đuổi các mục tiêu đó

• Ngôn ngữ và từ ngữ họ sử dụng để mô tả công việc họ đang làm

• Kỹ năng sử dụng phần mềm tương tự như những gì bạn đang thiết kế

• Thái độ của họ đối với loại sản phẩm bạn đang thiết kế và các thiết kế khác nhau có thể ảnh hưởng đến
những thái độ đó như thế nào

Tôi không thể cho bạn biết đối tượng mục tiêu cụ thể của bạn là như thế nào. Bạn cần tìm hiểu những gì họ
có thể làm với phần mềm hoặc trang web và cách nó phù hợp với bối cảnh rộng lớn hơn trong cuộc sống
của họ. Mặc dù có thể khó khăn, nhưng hãy cố gắng mô tả đối tượng tiềm năng của bạn về cách thức và lý
do họ có thể sử dụng phần mềm của bạn. Bạn có thể nhận được một số câu trả lời riêng biệt, đại diện cho
các nhóm người dùng riêng biệt; vậy là được rồi. Bạn có thể muốn giơ tay và nói: “Tôi không biết người
dùng là ai” hoặc “Mọi người đều là người dùng tiềm năng”. Nhưng điều đó hoàn toàn không giúp bạn tập
trung vào thiết kế của mình—nếu không có mô tả cụ thể và trung thực về những người đó, thiết kế của bạn
sẽ không có cơ sở trong thực tế.

Thật không may, giai đoạn khám phá người dùng này sẽ tiêu tốn rất nhiều thời gian ngay từ đầu
trong chu kỳ thiết kế. Nó đắt tiền. Nhưng nó đáng giá, bởi vì bạn có cơ hội tốt hơn để giải quyết đúng
vấn đề—bạn sẽ xây dựng được thứ phù hợp ngay từ đầu.

May mắn thay, hiện nay có rất nhiều sách, khóa học và phương pháp có thể giúp bạn. Mặc dù cuốn sách này
không đề cập đến nghiên cứu người dùng, đây là một số phương pháp và chủ đề cần xem xét:
 Khái niệm cơ bản về nghiên cứu người dùng5

Quan sát trực tiếp

Các cuộc phỏng vấn và lượt truy cập của người dùng tại chỗ đưa bạn trực tiếp vào thế giới của người dùng.
Bạn có thể hỏi người dùng về mục tiêu của họ là gì và họ thường làm những công việc gì. Thường được thực
hiện “tại địa điểm”, nơi người dùng sẽ thực sự sử dụng phần mềm (ví dụ: ở nơi làm việc hoặc ở nhà), các cuộc
phỏng vấn có thể được cấu trúc—với một bộ câu hỏi được xác định trước—hoặc không có cấu trúc, trong đó
bạn thăm dò bất kỳ chủ đề nào xuất hiện. Các cuộc phỏng vấn mang lại cho bạn rất nhiều sự linh hoạt; bạn
có thể làm nhiều hay ít, dài hay ngắn, trang trọng hay không trang trọng, qua điện thoại hay gặp trực tiếp.
Đây là những cơ hội tuyệt vời để học những gì bạn không biết. Hỏi tại sao. Hỏi lại nó đi.

nghiên cứu trường hợp

Nghiên cứu trường hợp cung cấp cho bạn cái nhìn sâu sắc, chi tiết về một vài người dùng hoặc nhóm người
dùng đại diện. Đôi khi, bạn có thể sử dụng chúng để khám phá những người dùng “cực đoan” vượt qua ranh
giới của những gì phần mềm có thể làm, đặc biệt khi mục tiêu là thiết kế lại phần mềm hiện có. Bạn cũng có
thể sử dụng chúng như các nghiên cứu theo chiều dọc—khám phá bối cảnh sử dụng trong nhiều tháng hoặc
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

thậm chí nhiều năm. Cuối cùng, nếu bạn đang thiết kế phần mềm tùy chỉnh cho một người dùng hoặc một
trang web, bạn sẽ muốn tìm hiểu càng nhiều càng tốt về ngữ cảnh sử dụng thực tế.

khảo sát
Khảo sát bằng văn bản có thể thu thập thông tin từ nhiều người dùng. Bạn thực sự có thể nhận được số
lượng người trả lời có ý nghĩa thống kê với những điều này. Vì không có sự tiếp xúc trực tiếp với con người
nên bạn sẽ bỏ lỡ rất nhiều thông tin bổ sung—bất cứ điều gì bạn không hỏi, bạn sẽ không tìm hiểu về—
nhưng bạn có thể có được bức tranh rất rõ ràng về một số khía cạnh nhất định của đối tượng mục tiêu của
mình. Thiết kế khảo sát cẩn thận là điều cần thiết. Nếu bạn muốn những con số đáng tin cậy thay vì một
“cảm nhận” định tính cho đối tượng mục tiêu, bạn nhất định phải viết chính xác các câu hỏi, chọn chính xác
người nhận khảo sát và phân tích chính xác các câu trả lời—và đó là một khoa học.

cá tính
Personas không phải là một phương pháp thu thập dữ liệu, nhưng chúng giúp bạn tìm ra những việc
cần làm với dữ liệu của mình sau khi bạn có dữ liệu đó. Đây là một kỹ thuật thiết kế “mô hình hóa” đối
tượng mục tiêu. Đối với mỗi nhóm người dùng chính, bạn tạo một người hư cấu nắm bắt các khía cạnh
quan trọng nhất của người dùng trong nhóm đó: họ đang cố gắng hoàn thành nhiệm vụ gì, mục tiêu
cuối cùng của họ và mức độ kinh nghiệm của họ trong lĩnh vực chủ đề và với máy tính nói chung .
Personas có thể giúp bạn tập trung. Khi thiết kế của bạn tiếp tục, bạn có thể tự hỏi mình những câu
hỏi như “Liệu người hư cấu này có thực sự làm X không? Thay vào đó cô ấy sẽ làm gì?”

Bạn có thể nhận thấy rằng một số phương pháp và chủ đề này, chẳng hạn như phỏng vấn và khảo sát, nghe
có vẻ giống các hoạt động tiếp thị một cách đáng ngờ. Đó chính xác là những gì họ đang có. Các nhóm tập
trung cũng có thể hữu ích (mặc dù không nhiều như các nhóm khác) và khái niệm phân khúc thị trường
giống với định nghĩa về đối tượng mục tiêu được sử dụng ở đây. Trong cả hai trường hợp, toàn bộ vấn đề là
hiểu khán giả tốt nhất có thể.

Sự khác biệt là với tư cách là một nhà thiết kế, bạn đang cố gắng hiểu những ngườisử dụngphần
mềm. Một chuyên gia tiếp thị cố gắng hiểu những người mua nó.
6Chương 1: Người dùng làm gì

Không dễ để hiểu các vấn đề thực sự làm nền tảng cho sự tương tác của người dùng với một hệ thống.
Người dùng không phải lúc nào cũng có ngôn ngữ hoặc kỹ năng nội tâm để giải thích những gì họ thực sự
cần để hoàn thành mục tiêu của mình và bạn phải mất rất nhiều công sức để tìm ra các khái niệm thiết kế
hữu ích từ những gì họCó thểnói cho bạn biết—các quan sát tự báo cáo thường bị sai lệch theo những cách
tinh vi.

Một số kỹ thuật này rất trang trọng, còn một số thì không. Các phương pháp chính thức và định lượng có
giá trị vì chúng là khoa học tốt. Khi được áp dụng đúng cách, chúng sẽ giúp bạn nhìn thế giới theo đúng bản
chất của nó, chứ không phải theo cách bạn nghĩ. Nếu bạn thực hiện nghiên cứu người dùng một cách tùy
tiện, không tính đến các thành kiến chẳng hạn như việc người dùng tự chọn, thì bạn có thể nhận được dữ
liệu không phản ánh đúng đối tượng mục tiêu của mình—và điều đó chỉ có thể gây hại cho thiết kế của bạn
về lâu dài.

Nhưng ngay cả khi bạn không có thời gian cho các phương pháp chính thức, tốt hơn hết là chỉ gặp gỡ một số
người dùng một cách không chính thức hơn là không thực hiện bất kỳ khám phá nào. Nói chuyện với người dùng
là tốt cho tâm hồn. Nếu bạn có thể đồng cảm với người dùng và tưởng tượng những cá nhân đó thực sự sử dụng
thiết kế của bạn, thì bạn sẽ tạo ra thứ gì đó tốt hơn nhiều.

Trước khi bạn bắt đầu quá trình thiết kế, hãy xem xét cách tiếp cận tổng thể của bạn. Hãy suy nghĩ về cách bạn có
thể thiết kế phong cách tương tác tổng thể của giao diện—cá tính của nó, nếu bạn muốn.

Khi bạn tiếp tục trò chuyện với ai đó về một chủ đề nhất định, bạn điều chỉnh những gì bạn nói theo
sự hiểu biết của bạn về người kia. Bạn có thể xem xét mức độ quan tâm của anh ấy đối với chủ đề này,
mức độ anh ấy đã biết về chủ đề đó, mức độ tiếp thu của anh ấy đối với việc học hỏi từ bạn và liệu anh
ấy có hứng thú với cuộc trò chuyện ngay từ đầu hay không. Nếu bạn hiểu sai bất kỳ điều gì trong số
đó, điều tồi tệ sẽ xảy ra—anh ấy có thể cảm thấy bị bảo trợ, không quan tâm, thiếu kiên nhẫn hoặc
hoàn toàn bối rối.

Sự tương tự này dẫn đến một số lời khuyên thiết kế rõ ràng. Chẳng hạn, từ vựng theo chủ đề cụ thể mà bạn
sử dụng trong giao diện của mình phải phù hợp với trình độ hiểu biết của người dùng; nếu một số người
dùng không biết từ vựng đó, hãy cung cấp cho họ cách học các thuật ngữ không quen thuộc. Nếu họ không
rành về máy tính, đừng bắt họ sử dụng các công cụ phức tạp hoặc các quy ước thiết kế giao diện không phổ
biến. Nếu mức độ quan tâm của họ có thể thấp, hãy tôn trọng điều đó và đừng đòi hỏi quá nhiều nỗ lực để
nhận được quá ít phần thưởng.

Một số trong những mối quan tâm này thấm vào toàn bộ thiết kế giao diện theo những cách
tinh tế. Ví dụ: người dùng của bạn có mong đợi một cuộc trao đổi ngắn, tập trung chặt chẽ về
một điều gì đó rất cụ thể hay họ thích một cuộc trò chuyện mang tính khám phá tự do hơn? Nói
cách khác, có bao nhiêu độ mở trong giao diện? Quá ít và người dùng của bạn cảm thấy bị mắc
kẹt và không hài lòng; quá nhiều, và họ đứng đó tê liệt, không biết phải làm gì tiếp theo, không
chuẩn bị cho mức độ tương tác đó.
 Động lực học tập của người dùng7

Do đó, bạn cần chọn mức độ tự do mà người dùng của bạn có để hành động tùy ý. Ở một đầu của thang đo
có thể là trình hướng dẫn cài đặt phần mềm: người dùng được đưa qua đó mà không có cơ hội sử dụng bất
kỳ thứ gì khác ngoài Tiếp theo, Trước đó hoặc Hủy. Nó tập trung chặt chẽ và cụ thể, nhưng khá hiệu quả—
và thỏa mãn, ở mức độ mà nó hoạt động và nhanh chóng. Ở đầu bên kia có thể là một ứng dụng chẳng hạn
như Excel, một giao diện “sơ đồ tầng mở” hiển thị một số lượng lớn các tính năng ở một nơi. Tại bất kỳ thời
điểm nào, người dùng có khoảng 872 việc mà anh ta có thể làm tiếp theo, nhưng điều đó được coi là tốt, bởi
vì những người dùng có kỹ năng, tự định hướng có thể làm được rất nhiều việc với giao diện đó. Một lần
nữa, nó thỏa mãn, nhưng vì những lý do hoàn toàn khác.

Đây là một câu hỏi thậm chí còn cơ bản hơn: người dùng của bạn sẵn sàng bỏ ra bao nhiêu công sức
để tìm hiểu giao diện của bạn?

Thật dễ dàng để đánh giá quá cao. Có thể họ sẽ sử dụng nó hàng ngày trong công việc—rõ ràng là họ sẽ có động
lực để học nó thật tốt trong trường hợp đó, nhưng điều đó rất hiếm. Có thể đôi khi họ sẽ sử dụng nó và chỉ học nó
đủ tốt để vượt qua (thỏa mãn). Có lẽ họ sẽ chỉ nhìn thấy nó một lần, trong 30 giây. Thành thật mà nói: bạn có thể
mong đợi hầu hết người dùng trở thành người trung gian hoặc chuyên gia hay hầu hết người dùng sẽ mãi mãi là
người mới bắt đầu?

Phần mềm được thiết kế cho người dùng từ trung cấp đến chuyên gia bao gồm:

• Photoshop
• Người dệt mộng

• Excel
• Môi trường phát triển mã
• Công cụ quản trị hệ thống cho máy chủ web

Ngược lại, đây là một số thứ được thiết kế cho người dùng không thường xuyên:

• Ki-ốt trong trung tâm du lịch hoặc bảo tàng

• Điều khiển Windows hoặc Mac OS để đặt hình nền màn hình
• Trang mua hàng cho các cửa hàng trực tuyến

• Trình hướng dẫn cài đặt

• Máy rút tiền tự động

Sự khác biệt giữa hai nhóm là rất lớn. Các giả định về kiến thức công cụ của người dùng tràn ngập
các giao diện này, hiển thị trong cách sử dụng không gian màn hình, cách ghi nhãn và mức độ phức
tạp của tiện ích cũng như ở những nơi trợ giúp được cung cấp (hoặc không).

Các ứng dụng trong nhóm đầu tiên có nhiều chức năng phức tạp, nhưng chúng thường không hướng
dẫn người dùng thực hiện từng bước các tác vụ. Họ cho rằng người dùng đã biết phải làm gì và họ tối
ưu hóa để hoạt động hiệu quả chứ không phải khả năng học hỏi; chúng có xu hướng tập trung vào tài
liệu hoặc hướng theo danh sách (với một số ít là ứng dụng dòng lệnh). Họ thường có toàn bộ sách và
khóa học viết về họ. Đường cong học tập của họ là dốc.
số 8Chương 1: Người dùng làm gì

Các ứng dụng trong nhóm thứ hai thì ngược lại: hạn chế về chức năng nhưng hữu ích trong việc giải
thích nó trên đường đi. Họ trình bày các giao diện được đơn giản hóa, giả sử không có kiến thức
trước về các kiểu ứng dụng tập trung vào tài liệu hoặc danh sách (ví dụ: thanh menu, nhiều lựa chọn,
v.v.).pháp sưthường xuyên xuất hiện, loại bỏ trách nhiệm tập trung chú ý khỏi người dùng. Điều quan
trọng là người dùng không có động lực để làm việc chăm chỉ trong việc học các ứng dụng này—điều
đó thường không đáng!

Bây giờ bạn đã nhìn thấy các điểm cực đoan, hãy xem các ứng dụng ở giữa sự liên tục:

• Microsoft Powerpoint
• Email khách hàng

• Facebook
• Công cụ viết blog
Sự thật là hầu hết các ứng dụng đều rơi vào khoảng trung gian này. Họ cần phục vụ mọi người ở cả hai đầu một
cách đầy đủ—để giúp người dùng mới tìm hiểu công cụ (và đáp ứng nhu cầu hài lòng tức thì của họ), đồng thời
cho phép những người trung gian là người dùng thường xuyên hoàn thành công việc một cách trôi chảy. Các nhà
thiết kế của họ có thể biết rằng mọi người sẽ không tham gia khóa học ba ngày để tìm hiểu về ứng dụng email.
Tuy nhiên, các giao diện vẫn hoạt động tốt trong quá trình sử dụng lặp đi lặp lại. Mọi người nhanh chóng học
những điều cơ bản, đạt đến trình độ thành thạo khiến họ hài lòng và không bận tâm đến việc học thêm cho đến
khi họ có động lực để làm như vậy vì những mục đích cụ thể.

Một ngày nào đó bạn có thể thấy mình căng thẳng giữa hai đầu của quang phổ này. Đương nhiên, bạn
muốn mọi người có thể sử dụng thiết kế của mình “ngay lập tức”, nhưng bạn cũng có thể muốn hỗ trợ
những người dùng thường xuyên hoặc chuyên gia càng nhiều càng tốt. Tìm sự cân bằng phù hợp với hoàn
cảnh của bạn. Các mô hình tổ chức trong Chương 2, chẳng hạn nhưTrợ giúp đa cấp, có thể giúp bạn phục vụ
cả hai khu vực bầu cử.

Mặc dù các cá nhân là duy nhất, mọi người cư xử có thể dự đoán được. Các nhà thiết kế đã thực hiện các
lượt truy cập trang web và quan sát người dùng trong nhiều năm; các nhà khoa học nhận thức và các nhà
nghiên cứu khác đã dành hàng trăm giờ để quan sát cách mọi người làm mọi việc và cách họ nghĩ về những
gì họ làm.

Vì vậy, khi bạn quan sát mọi người sử dụng phần mềm của bạn hoặc thực hiện bất kỳ hoạt động nào mà
bạn muốn hỗ trợ bằng phần mềm mới, bạn có thể mong đợi họ thực hiện một số việc nhất định. Các mẫu
hành vi tuân theo thường được thấy trong các quan sát của người dùng. Rất có thể bạn cũng sẽ thấy chúng,
đặc biệt nếu bạn tìm kiếm chúng.

(Lưu ý dành cho những người đam mê mô hình: những mô hình này không giống những mô hình khác trong cuốn sách
này. Chúng mô tả hành vi của con người—không phải các yếu tố thiết kế giao diện—và chúng không mang tính quy định,
giống như các mô hình trong các chương khác. Thay vì được cấu trúc như các mô hình khác các mẫu, chúng được trình
bày dưới dạng các bài tiểu luận nhỏ.)
 các mẫu9

Một lần nữa, một giao diện hỗ trợ tốt các mẫu này sẽ giúp người dùng đạt được mục tiêu
của họ hiệu quả hơn nhiều so với các giao diện không hỗ trợ chúng. Và các mẫu không chỉ
là về giao diện. Đôi khi, toàn bộ gói—giao diện, kiến trúc cơ bản, lựa chọn tính năng, tài
liệu, mọi thứ—cần được xem xét theo các hành vi này. Nhưng với tư cách là nhà thiết kế
giao diện hoặc nhà thiết kế tương tác, bạn nên nghĩ về những điều này nhiều như bất kỳ ai
trong nhóm của mình. Bạn có thể ở một nơi tốt hơn bất kỳ ai để biện hộ cho người dùng.

1.thăm dò an toàn
2.Sự hài lòng tức thì
3.thỏa mãn
4.Thay đổi ở giữa dòng
5.Lựa chọn hoãn lại
6.xây dựng gia tăng
7.thói quen
số 8.vi phạm
9.Bộ nhớ không gian

10.Bộ nhớ tương lai

11.Sắp xếp hợp lý
12.Chỉ bàn phím
13.Lời khuyên của người khác

14.Khuyến nghị cá nhân

“Hãy để tôi khám phá mà không bị lạc hay gặp rắc rối.”

Khi ai đó cảm thấy mình có thể khám phá một giao diện và không phải chịu những hậu quả nghiêm trọng,
thì có khả năng cô ấy sẽ học được nhiều hơn—và cảm thấy tích cực hơn về điều đó—so với người không
khám phá. Phần mềm tốt cho phép mọi người thử thứ gì đó không quen thuộc, rút lui và thử thứ khác, tất
cả đều không gây căng thẳng.

Những “hậu quả thảm khốc” đó thậm chí không quá tệ. Chỉ sự khó chịu thôi cũng có thể đủ
để ngăn cản ai đó tự nguyện thử mọi thứ. Nhấp vào các cửa sổ bật lên, nhập lại dữ liệu bị
xóa nhầm, đột ngột tắt âm lượng trên máy tính xách tay của một người khi một trang web
bất ngờ phát nhạc lớn—tất cả đều có thể khiến bạn nản lòng. Khi bạn thiết kế hầu hết mọi
loại giao diện phần mềm, hãy cung cấp nhiều cách khám phá để người dùng thử nghiệm
mà không phải trả bất kỳ chi phí nào cho người dùng.
10Chương 1: Người dùng làm gì

Dưới đây là một số ví dụ:

• Một nhiếp ảnh gia thử một vài bộ lọc hình ảnh trong một ứng dụng xử lý hình ảnh. Sau đó, anh ấy quyết
định rằng mình không thích kết quả đó và nhấp vào Hoàn tác một vài lần để quay lại vị trí ban đầu. Sau
đó, anh ấy thử một bộ lọc khác và một bộ lọc khác, mỗi lần anh ấy có thể rút lui khỏi những gì anh ấy
đã làm. (Mẫu có tênHoàn tác đa cấp, trong Chương 6, mô tả cách hoạt động của tính năng này.)

• Một khách truy cập mới vào trang chủ của công ty nhấp vào nhiều liên kết khác nhau chỉ để xem có gì ở đó, tin
tưởng rằng nút Quay lại sẽ luôn đưa cô ấy trở lại trang chính. Không có cửa sổ bổ sung hoặc cửa sổ bật lên
nào mở ra và nút Quay lại tiếp tục hoạt động có thể đoán trước được. Bạn có thể tưởng tượng rằng nếu một
ứng dụng web thực hiện điều gì đó khác biệt để phản hồi lại nút Quay lại hoặc nếu một ứng dụng cung cấp
một nút trông giống như nút Quay lại, nhưng hoạt động không hoàn toàn giống như vậy—sự nhầm lẫn có
thể xảy ra. Người dùng có thể bị mất phương hướng trong khi điều hướng và có thể bỏ ứng dụng hoàn toàn.

“Tôi muốn hoàn thành một cái gì đó ngay bây giờ, không phải sau này.”

Mọi người thích nhìn thấy kết quả ngay lập tức từ những hành động họ thực hiện—đó là bản chất con
người. Nếu ai đó bắt đầu sử dụng một ứng dụng và nhận được “trải nghiệm thành công” trong vài giây đầu
tiên, thì điều đó thật hài lòng! Anh ấy sẽ có nhiều khả năng tiếp tục sử dụng nó, ngay cả khi sau này nó khó
hơn. Anh ta sẽ cảm thấy tự tin hơn trong đơn đăng ký và tự tin vào bản thân hơn là nếu phải mất một thời
gian để tìm ra mọi thứ.

Nhu cầu hỗ trợ sự hài lòng tức thì có nhiều nhánh thiết kế. Chẳng hạn, nếu bạn có thể dự đoán điều đầu tiên mà
người dùng mới có thể làm, thì bạn nên thiết kế giao diện người dùng để làm cho điều đầu tiên đó trở nên dễ dàng
một cách đáng ngạc nhiên. Ví dụ: nếu mục tiêu của người dùng là tạo một thứ gì đó, thì hãy tạo một khung vẽ mới,
đặt lời kêu gọi hành động trên đó và đặt một bảng màu bên cạnh nó. Nếu mục tiêu của người dùng là hoàn thành
một số nhiệm vụ, hãy chỉ đường tới một điểm xuất phát điển hình.

Điều này cũng có nghĩa là bạn không nên ẩn chức năng giới thiệu đằng sau bất kỳ thứ gì cần đọc
hoặc chờ đợi, chẳng hạn như đăng ký, bộ hướng dẫn dài, màn hình tải chậm, quảng cáo, v.v.
Những điều này không khuyến khích vì chúng ngăn người dùng hoàn thành nhiệm vụ đầu tiên
đó một cách nhanh chóng.
 các mẫu11

“Điều này là đủ tốt.

Tôi không muốn dành thêm thời gian để học cách làm tốt hơn.”

Khi mọi người nhìn vào một giao diện mới, họ không đọc từng phần của nó một cách có phương pháp và sau đó
quyết định, “Hmmm, tôi nghĩ nút này có cơ hội tốt nhất giúp tôi có được những gì tôi muốn.” Thay vào đó, người
dùng sẽ nhanh chóng quét qua giao diện, chọn bất cứ thứ gì anh ta nhìn thấy đầu tiên có thể mang lại cho anh ta
thứ anh ta muốn và thử nó - ngay cả khi nó có thể sai.

thuật ngữthỏa mãnlà sự kết hợp củathỏa mãnVàđủ.Nó được đặt ra vào năm 1957 bởi nhà khoa
học xã hội Herbert Simon, người đã sử dụng nó để mô tả hành vi của con người trong mọi tình
huống kinh tế và xã hội. Mọi người sẵn sàng chấp nhận “đủ tốt” thay vì “tốt nhất” nếu việc học
tất cả các giải pháp thay thế có thể tốn thời gian hoặc công sức.

Thỏa mãn thực sự là một hành vi rất hợp lý, một khi bạn đánh giá cao công việc trí óc cần thiết
để “phân tích” một giao diện phức tạp. Như Steve Krug đã chỉ ra trong cuốn sách của mìnhĐừng
Làm Tôi Nghĩ (New Riders), mọi người không muốn suy nghĩ nhiều hơn những gì họ phải làm—
nó hoạt động mà! Nhưng nếu giao diện hiển thị một hoặc hai tùy chọn rõ ràng mà người dùng
nhìn thấy ngay lập tức, họ sẽ thử. Rất có thể đó sẽ là lựa chọn đúng đắn, và nếu không, sẽ có ít
chi phí để rút lui và thử thứ khác (giả sử rằng giao diện hỗ trợthăm dò an toàn).

Điều này có nghĩa là một số điều cho các nhà thiết kế:

• Sử dụng “kêu gọi hành động” trong giao diện. Đưa ra hướng dẫn về những việc cần làm trước tiên: nhập vào
đây, kéo hình ảnh vào đây, nhấn vào đây để bắt đầu, v.v.

• Viết nhãn ngắn gọn, rõ ràng và dễ đọc. (Điều này bao gồm các mục menu, nút, liên kết và bất
kỳ thứ gì khác được xác định bằng văn bản.) Chúng sẽ được quét và đoán về; viết chúng sao
cho dự đoán đầu tiên của người dùng về ý nghĩa là chính xác. Nếu anh ấy đoán sai nhiều
lần, anh ấy sẽ thất vọng và cả hai bạn sẽ có một khởi đầu tồi tệ.

• Sử dụng bố cục của giao diện để truyền đạt ý nghĩa. Chương 4 giải thích cách thực hiện chi tiết.
Người dùng “phân tích” màu sắc và hình thức khi nhìn thấy và họ tuân theo các tín hiệu này hiệu
quả hơn so với các nhãn phải được đọc.

• Giúp bạn dễ dàng di chuyển xung quanh giao diện, đặc biệt là khi quay lại nơi mà một lựa chọn sai lầm
có thể đã được đưa ra một cách vội vàng. Cung cấp “cửa thoát hiểm” (xem Chương 3). Trên các trang
web điển hình, việc sử dụng nút Quay lại rất dễ dàng, do đó, việc thiết kế điều hướng tiến/lùi dễ dàng
đặc biệt quan trọng đối với các ứng dụng web, ứng dụng đã cài đặt và thiết bị di động.

• Hãy nhớ rằng một giao diện phức tạp gây ra chi phí nhận thức lớn đối với người dùng mới. Sự phức tạp
về hình ảnh thường sẽ khiến những người không phải là chuyên gia hài lòng: họ tìm kiếm thứ đầu tiên
có thể hoạt động.
12Chương 1: Người dùng làm gì

Hài lòng là lý do tại sao nhiều người dùng kết thúc với những thói quen kỳ lạ sau khi họ đã sử dụng một hệ thống
trong một thời gian. Từ lâu, một người dùng có thể đã học Đường dẫn A để làm một việc gì đó và mặc dù phiên
bản mới hơn của hệ thống cung cấp Đường dẫn B như một giải pháp thay thế tốt hơn (hoặc có thể nó đã ở đó từ
lâu), anh ta không thấy lợi ích gì khi học nó—điều đó cần xét cho cùng—và tiếp tục sử dụng Con đường A kém hiệu
quả hơn. Đó không hẳn là một lựa chọn phi lý. Phá vỡ những thói quen cũ và học một cái gì đó mới cần nhiều năng
lượng và một cải tiến nhỏ có thể không đáng giá đối với người dùng.

“Tôi đã thay đổi suy nghĩ về những gì mình đang làm.”

Đôi khi, mọi người thay đổi những gì họ đang làm khi đang làm dở. Ai đó có thể bước vào phòng với ý định
tìm chiếc chìa khóa mà cô ấy đã để quên ở đó, nhưng khi cô ấy ở đó, cô ấy tìm thấy một tờ báo và bắt đầu
đọc nó. Hoặc cô ấy có thể truy cập Amazon.com để đọc các nhận xét về sản phẩm, nhưng thay vào đó lại
mua một cuốn sách. Có lẽ cô ấy chỉ đi chệch hướng; có lẽ sự thay đổi là có chủ ý. Dù bằng cách nào, mục
tiêu của người dùng sẽ thay đổi khi họ đang sử dụng giao diện do bạn thiết kế.

Điều này có nghĩa là các nhà thiết kế nên tạo cơ hội cho mọi người làm điều đó. Đưa ra các lựa chọn
có sẵn. Không khóa người dùng vào một môi trường ít lựa chọn không có kết nối với các trang hoặc
chức năng khác trừ khi có lý do chính đáng để làm như vậy. Những lý do đó tồn tại. Xem các mẫu
được gọi làThuật sĩ(Chương 2) vàBảng điều khiển phương thức(Chương 3) để biết các ví dụ.

Bạn cũng có thể giúp ai đó dễ dàng bắt đầu một quy trình, dừng lại giữa chừng và quay lại quy
trình đó sau đó để tiếp tục nơi anh ta đã dừng lại—một tính chất thường được gọi lànhập cảnh
trở lại.Chẳng hạn, một luật sư có thể bắt đầu nhập thông tin vào một biểu mẫu trên iPad. Sau
đó, khi một khách hàng bước vào phòng, luật sư sẽ tắt thiết bị với ý định quay lại để hoàn thành
biểu mẫu sau. Thông tin đã nhập sẽ không bị mất.

Để hỗ trợ truy cập lại, bạn có thể làm cho các hộp thoại và biểu mẫu web ghi nhớ các giá trị đã nhập trước đó và
chúng thường không cần phải là phương thức; nếu chúng không phải là phương thức, chúng có thể được kéo
sang một bên trên màn hình để sử dụng sau. Các ứng dụng kiểu trình xây dựng—trình soạn thảo văn bản, môi
trường phát triển mã và chương trình vẽ—có thể cho phép người dùng làm việc trên nhiều dự án cùng một lúc, do
đó cho phép cô ấy bỏ bất kỳ số lượng dự án nào sang một bên trong khi làm việc trên một dự án khác. xemNhiều
không gian làm việctrong Chương 2 để biết thêm thông tin.

“Tôi không muốn trả lời điều đó bây giờ; hãy để tôi hoàn thành!

Điều này xuất phát từ mong muốn của mọi người về sự hài lòng ngay lập tức. Nếu bạn hỏi một người dùng tập
trung vào nhiệm vụ những câu hỏi không cần thiết trong quá trình này, anh ta có thể muốn bỏ qua các câu hỏi và
quay lại sau.
 các mẫu13

Ví dụ: một số bảng thông báo dựa trên web có quy trình đăng ký người dùng dài và phức tạp.
Tên màn hình, địa chỉ email, tùy chọn quyền riêng tư, hình đại diện, mô tả bản thân… danh sách
này cứ lặp đi lặp lại. “Nhưng tôi chỉ muốn đăng một điều nhỏ,” người dùng nói một cách buồn
bã. Tại sao không cho phép anh ta bỏ qua hầu hết các câu hỏi, trả lời mức tối thiểu và quay lại
sau (nếu có) để điền vào phần còn lại? Nếu không, anh ấy có thể ở đó trong nửa giờ để trả lời các
câu hỏi tiểu luận và tìm hình ảnh đại diện hoàn hảo.

Một ví dụ khác là tạo một dự án mới trong trình chỉnh sửa trang web. Có một số điều bạn
phải quyết định trước, chẳng hạn như tên của dự án, nhưng các lựa chọn khác—bạn sẽ đặt
cái này ở đâu trên máy chủ khi hoàn thành? Tôi chưa biết!—có thể dễ dàng hoãn lại.

Đôi khi đó chỉ là vấn đề không muốn trả lời các câu hỏi. Vào những thời điểm khác, người dùng
có thể chưa có đủ thông tin để trả lời. Điều gì sẽ xảy ra nếu một gói phần mềm viết nhạc hỏi
trước bạn về tiêu đề, khóa và nhịp độ của một bài hát mới, thậm chí trước khi bạn bắt đầu viết
nó? (Xem GarageBand của Apple để biết một chút về thiết kế “tốt” này.)

Ý nghĩa của thiết kế giao diện rất dễ hiểu, mặc dù không phải lúc nào cũng dễ
thực hiện:
• Đừng buộc người dùng phải trả trước quá nhiều lựa chọn ngay từ đầu.

• Trên các biểu mẫu mà anh ta phải sử dụng, hãy đánh dấu rõ ràng các trường bắt buộc và
không yêu cầu quá nhiều. Hãy để anh ấy tiếp tục mà không trả lời những câu hỏi tùy chọn.

• Đôi khi bạn có thể tách một vài câu hỏi hoặc lựa chọn quan trọng khỏi những câu hỏi hoặc lựa chọn khác
ít quan trọng hơn. Trình bày danh sách ngắn; ẩn danh sách dài.

• Sử dụngMặc định tốt(Chương 8) bất cứ khi nào có thể, để cung cấp cho người dùng một số câu trả lời mặc
định hợp lý để bắt đầu. Nhưng hãy nhớ rằng các câu trả lời được điền sẵn vẫn yêu cầu người dùng
xem chúng, đề phòng trường hợp chúng cần được thay đổi. Họ có một chi phí nhỏ, quá.

• Giúp người dùng có thể quay lại các trường bị trì hoãn sau đó và giúp họ có thể truy cập được ở những
nơi dễ thấy. Một số hộp thoại hiển thị cho người dùng một câu lệnh ngắn, chẳng hạn như “Bạn luôn có
thể thay đổi điều này sau bằng cách nhấp vào nút Chỉnh sửa dự án”. Một số trang web lưu trữ các mục
nhập biểu mẫu chưa hoàn thành của người dùng hoặc dữ liệu liên tục khác, chẳng hạn như giỏ hàng
có các mặt hàng chưa mua.

• Nếu yêu cầu đăng ký tại một trang web cung cấp các dịch vụ hữu ích, người dùng có thể sẽ đăng
ký nhiều hơn nếu lần đầu tiên họ được phép trải nghiệm trang web—bị thu hút và tương tác—rồi
sau đó được hỏi về họ là ai. Một số trang web cho phép bạn hoàn tất toàn bộ giao dịch mua mà
không cần đăng ký, sau đó hỏi bạn ở phần cuối xem bạn có muốn tạo thông tin đăng nhập dễ
dàng với thông tin cá nhân được cung cấp trong bước mua hay không.
14Chương 1: Người dùng làm gì

“Hãy để tôi thay đổi cái này. Điều đó có vẻ không ổn; để mình đổi lại.
Cái đó tốt hơn."

Khi mọi người tạo ra mọi thứ, họ thường không làm tất cả theo một thứ tự chính xác. Ngay cả một chuyên
gia cũng không bắt đầu ngay từ đầu, làm việc thông qua quá trình sáng tạo một cách có phương pháp và
tạo ra thứ gì đó hoàn hảo và hoàn thành ở cuối.

Hoàn toàn ngược lại. Thay vào đó, cô ấy bắt đầu với một số phần nhỏ của nó, làm việc với nó, lùi lại và
xem xét nó, kiểm tra nó (nếu đó là mã hoặc một số thứ “có thể chạy được” khác), sửa lỗi sai và bắt đầu
xây dựng các phần khác của nó. Hoặc có thể cô ấy bắt đầu lại, nếu cô ấy thực sự không thích. Quá
trình sáng tạo diễn ra phù hợp và bắt đầu. Nó đôi khi di chuyển ngược cũng như tiến lên, và nó
thường gia tăng, được thực hiện trong một loạt các thay đổi nhỏ thay vì một vài thay đổi lớn. Đôi khi
nó là từ trên xuống; đôi khi nó là từ dưới lên.

Giao diện kiểu trình tạo cần hỗ trợ kiểu làm việc đó. Giúp người dùng dễ dàng xây dựng các mảnh nhỏ. Giữ cho
giao diện phản ứng nhanh với những thay đổi nhanh chóng và tiết kiệm. Phản hồi là rất quan trọng: liên tục hiển
thị cho người dùng toàn bộ nội dung trông như thế nào và hoạt động như thế nào trong khi người dùng làm việc.
Nếu người dùng xây dựng mã, mô phỏng hoặc những thứ có thể thực thi khác, hãy làm cho phần "biên dịch" của
chu trình càng ngắn càng tốt để phản hồi hoạt động có cảm giác ngay lập tức—để lại ít hoặc không có độ trễ giữa
người dùng thực hiện các thay đổi và nhìn thấy kết quả.

Khi các hoạt động sáng tạo được hỗ trợ tốt bởi các công cụ tốt, chúng có thể tạo ra trạng tháichảy trong
người dùng. Đây là trạng thái hoàn toàn tập trung vào hoạt động, trong đó thời gian bị bóp méo, những
thứ gây xao nhãng khác biến mất và người đó có thể tiếp tục tham gia hàng giờ—việc tận hưởng hoạt động
là phần thưởng của chính nó. Các nghệ sĩ, vận động viên và lập trình viên đều biết trạng thái này.

Nhưng các công cụ xấu sẽ khiến người dùng mất tập trung, đảm bảo. Nếu người dùng phải đợi dù chỉ nửa
phút để xem kết quả của thay đổi gia tăng mà cô ấy vừa thực hiện, thì sự tập trung của cô ấy sẽ bị phá vỡ;
dòng chảy bị gián đoạn.

Nếu bạn muốn đọc thêm về dòng chảy, hãy đọc sách của Mihaly Csikszentmihalyi, người đã nghiên cứu về
nó trong nhiều năm.

“Cử chỉ đó hoạt động ở mọi nơi khác; tại sao nó cũng không hoạt động ở đây?”

Khi một người sử dụng một giao diện nhiều lần, một số hành động vật lý thường xuyên sẽ trở thành
phản xạ: nhấn Ctrl-S để lưu tài liệu, nhấp vào nút Quay lại để rời khỏi trang web, nhấn Return để đóng
hộp thoại phương thức, sử dụng cử chỉ để hiển thị và ẩn các cửa sổ— thậm chí nhấn bàn đạp phanh
của một chiếc xe hơi. Người dùng không còn cần phải suy nghĩ có ý thức về những hành động này.
Chúng đã trở thành thói quen.
 các mẫu15

Xu hướng này giúp mọi người trở thành những người sử dụng thành thạo một công cụ (và cũng giúp tạo ra
cảm giác trôi chảy). Thói quen cũng cải thiện đáng kể hiệu quả, như bạn có thể tưởng tượng. Nhưng nó
cũng có thể đặt bẫy cho người dùng. Nếu một cử chỉ trở thành thói quen và người dùng cố gắng sử dụng
nó trong tình huống nó không hoạt động—hoặc tệ hơn là làm điều gì đó phá hoại—thì người dùng sẽ bị hụt
hẫng. Anh ta đột nhiên phải nghĩ lại về công cụ (Tôi vừa làm gì? Làm thế nào để làm điều tôi dự định?), và
anh ta có thể phải hoàn tác bất kỳ thiệt hại nào do cử chỉ đó gây ra.

Chẳng hạn, Ctrl-X→Ctrl-S là chuỗi phím “lưu tệp này” được sử dụng bởi trình soạn thảo văn bản
Emacs. Ctrl-A di chuyển con trỏ nhập văn bản đến đầu dòng. Những tổ hợp phím này trở thành
thói quen đối với người dùng Emacs. Khi người dùng nhấn Ctrl-A→Ctrl-X→Ctrl-S trong Emacs, nó
thực hiện một cặp thao tác khá vô thưởng vô phạt: di chuyển con trỏ, lưu tệp.

Bây giờ điều gì sẽ xảy ra khi anh ấy gõ cùng trình tự quen thuộc đó trong Microsoft Word?

1. Ctrl-A: Chọn tất cả

2. Ctrl-X: Cắt vùng chọn (trong trường hợp này là toàn bộ tài liệu)

3. Ctrl-S: Lưu tài liệu (rất tiếc)

Đây là lý do tại sao tính nhất quán giữa các ứng dụng là quan trọng! (Và cũng là lý do tại sao một "hoàn tác" mạnh mẽ lại
hữu ích.)

Tuy nhiên, điều quan trọng không kém là tính nhất quán trong một ứng dụng. Một số ứng dụng
xấu vì chúng thiết lập kỳ vọng rằng một số cử chỉ sẽ thực hiện Hành động X, ngoại trừ trong một
chế độ đặc biệt khi nó đột nhiên thực hiện Hành động Y. Đừng làm điều đó. Chắc chắn rằng
người dùng sẽ mắc lỗi và họ càng có nhiều kinh nghiệm—tức là họ càng có nhiều thói quen—họ
càng có nhiều khả năng mắc lỗi đó.

Hãy cân nhắc kỹ điều này nếu bạn đang phát triển giao diện dựa trên cử chỉ cho thiết bị di động. Khi ai đó
học cách sử dụng thiết bị của mình và quen với nó, anh ta sẽ phụ thuộc vào các cử chỉ tiêu chuẩn hoạt động
nhất quán trên tất cả các ứng dụng. Kiểm tra xem tất cả các cử chỉ trong thiết kế của bạn có hoạt động như
mong đợi không.

Đây cũng là lý do tại sao các hộp thoại xác nhận thường không hoạt động để bảo vệ người dùng trước
những thay đổi ngẫu nhiên. Khi các hộp thoại phương thức bật lên, người dùng có thể dễ dàng loại bỏ
chúng chỉ bằng cách nhấp vào OK hoặc nhấn Return (nếu nút OK là nút mặc định). Nếu các hộp thoại bật
lên mọi lúc khi người dùng thực hiện các thay đổi dự định, chẳng hạn như xóa tệp, việc bấm vào OK sẽ trở
thành một phản hồi quen thuộc. Sau đó, khi nó thực sự quan trọng, hộp thoại không có bất kỳ tác dụng
nào, bởi vì nó nằm ngay dưới ý thức của người dùng.

(Tôi đã thấy ít nhất một ứng dụng thiết lập ngẫu nhiên các nút của hộp thoại xác nhận từ lời gọi
này sang lời gọi khác. Một ứng dụng thực sự phảiđọccác nút để tìm ra những gì để bấm vào! Đây
không hẳn là cách tốt nhất để tạo hộp thoại xác nhận—thực tế, tốt hơn hết là không nên có
chúng trong hầu hết các trường hợp—nhưng ít nhất thiết kế này tránh được thói quen một cách
sáng tạo.)
16Chương 1: Người dùng làm gì

“Tôi đang đợi chuyến tàu. Hãy để tôi làm điều gì đó hữu ích trong hai phút.

Mọi người thường thấy mình có vài phút rảnh rỗi. Họ có thể cần được nghỉ ngơi về tinh thần khi làm việc; họ
có thể đang xếp hàng tại một cửa hàng hoặc ngồi trong tình trạng kẹt xe. Họ có thể buồn chán hoặc thiếu
kiên nhẫn. Họ muốn làm điều gì đó mang tính xây dựng hoặc giải trí để giết thời gian, biết rằng họ sẽ không
có đủ thời gian để tham gia sâu vào một hoạt động trực tuyến.

Mẫu này đặc biệt áp dụng cho các thiết bị di động vì mọi người có thể dễ dàng rút chúng ra vào
những thời điểm như thế này.

Dưới đây là một số hoạt động tiêu biểu trong thời gian nghỉ vi mô:

• Kiểm tra thư điện tử

• Đọc mộtDòng tin tức(trong Chương 2) chẳng hạn như Facebook hoặc Twitter

• Truy cập một trang web tin tức để tìm hiểu những gì đang xảy ra trên thế giới

• Xem một video ngắn

• Thực hiện tìm kiếm nhanh trên web

• Đọc sách trực tuyến

• Chơi trò chơi ngắn
Chìa khóa để hỗ trợ vi ngắt là giúp tiếp cận một hoạt động dễ dàng và nhanh chóng—dễ
dàng như bật thiết bị và chọn một ứng dụng (hoặc trang web). Không yêu cầu thiết lập
phức tạp. Đừng mất mãi mãi để tải. Và nếu người dùng cần đăng nhập vào một dịch vụ, hãy
cố gắng giữ lại xác thực trước đó để họ không phải đăng nhập mỗi lần.

VìDòng tin tứcdịch vụ, tải nội dung mới nhất nhanh nhất có thể và hiển thị nội dung đó trên màn hình
đầu tiên mà người dùng nhìn thấy. Các hoạt động khác, chẳng hạn như trò chơi, video hoặc sách trực
tuyến, nên nhớ nơi người dùng để lại lần trước và khôi phục ứng dụng hoặc trang web về trạng thái
trước đó mà không cần hỏi (do đó hỗ trợ truy cập lại).

Nếu bạn đang thiết kế một ứng dụng email hoặc bất kỳ ứng dụng nào khác mà người dùng cần thực hiện
công việc “dọn dẹp nhà cửa” để duy trì trật tự, hãy cung cấp cho họ cách phân loại các mục một cách hiệu
quả. Điều này có nghĩa là hiển thị đủ dữ liệu cho mỗi mục để cô ấy có thể xác định, chẳng hạn như nội dung
và người gửi của thư. Bạn cũng có thể cho cô ấy cơ hội “gắn dấu sao” hoặc chú thích các mục quan tâm, xóa
các mục dễ dàng cũng như viết phản hồi và cập nhật ngắn.

Thời gian tải dài xứng đáng được đề cập khác. Mất quá nhiều thời gian để tải nội dung chắc chắn sẽ
khiến người dùng từ bỏ ứng dụng của bạn—đặc biệt là trong thời gian nghỉ ngắn! Đảm bảo rằng
trang được thiết kế sao cho nội dung hữu ích, có thể đọc được tải trước và rất ít bị trễ.
 các mẫu17

“Tôi thề là nút đó đã ở đây một phút trước. Nó đã đi đâu?”

Khi mọi người thao tác với các đối tượng và tài liệu, họ thường tìm lại chúng sau đó bằng cách
ghi nhớ vị trí của chúng chứ không phải tên của chúng.

Lấy máy tính để bàn Windows, Mac hoặc Linux. Nhiều người sử dụng nền màn hình làm nơi đặt
tài liệu, ứng dụng thường dùng và những thứ khác. Hóa ra mọi người có xu hướng sử dụng bộ
nhớ không gian để tìm mọi thứ trên màn hình và nó rất hiệu quả. Chẳng hạn, mọi người nghĩ ra
các nhóm của riêng họ hoặc nhớ lại rằng “tài liệu này nằm ở trên cùng bên phải của cái này cái
kia.” (Đương nhiên, cũng có những thứ tương đương trong thế giới thực. Bàn làm việc của nhiều
người là “hỗn loạn có tổ chức”, một mớ hỗn độn rõ ràng mà chủ văn phòng có thể tìm thấy bất
cứ thứ gì ngay lập tức. Nhưng trời cấm ai đó phải dọn dẹp nó cho anh ta.)

Nhiều ứng dụng đặt các nút hộp thoại — OK, Hủy, v.v. — ở những vị trí có thể dự đoán được, một
phần vì bộ nhớ không gian đối với chúng quá mạnh. Trong các ứng dụng phức tạp, mọi người cũng
có thể tìm thấy mọi thứ bằng cách ghi nhớ vị trí của chúng so với những thứ khác: công cụ trên thanh
công cụ, đối tượng trong hệ thống phân cấp, v.v. Do đó, bạn nên sử dụng các mẫu như
tiết lộ đáp ứng(Chương 4) cẩn thận. Việc thêm các mục vào khoảng trống trong giao diện không gây ra sự cố
nhưng việc sắp xếp lại các điều khiển hiện có có thể làm gián đoạn bộ nhớ không gian và khiến mọi thứ khó
tìm hơn. Nó phụ thuộc. Hãy dùng thử trên người dùng của bạn nếu bạn không chắc chắn.

Cùng với thói quen, có liên quan chặt chẽ, bộ nhớ không gian là một lý do khác giải thích tại sao tính
nhất quán giữa và bên trong các ứng dụng của nền tảng là tốt. Mọi người có thể mong đợi tìm thấy
chức năng tương tự ở những nơi tương tự. xemCông cụ đăng nhậpmẫu (Chương 3) để làm ví dụ.

Bộ nhớ không gian giải thích lý do tại sao nên cung cấp các khu vực do người dùng sắp xếp để
lưu trữ tài liệu và đối tượng, chẳng hạn như màn hình nền đã nói ở trên. Những thứ như vậy
không phải lúc nào cũng thực tế, đặc biệt là với số lượng lớn đối tượng, nhưng nó hoạt động khá
tốt với số lượng nhỏ. Khi mọi người tự sắp xếp mọi thứ, họ có khả năng nhớ nơi họ đặt chúng.
(Chỉ cần không sắp xếp lại nó cho họ trừ khi họ yêu cầu!)tấm di độngmẫu trong Chương 4 mô tả
một cách cụ thể để làm điều này.

Ngoài ra, đây là lý do tại sao việc thay đổi menu động đôi khi có thể phản tác dụng. Mọi người đã quen với việc
nhìn thấy một số mục nhất định ở trên cùng và dưới cùng của menu. Sắp xếp lại hoặc thu gọn các mục menu một
cách “hữu ích” có thể chống lại thói quen và dẫn đến lỗi người dùng. Vì vậy, có thể thay đổi menu điều hướng trên
các trang web. Cố gắng giữ các mục menu ở cùng một vị trí và theo cùng một thứ tự trên tất cả các trang con
trong một trang web.

Ngẫu nhiên, phần trên cùng và dưới cùng của danh sách và menu là những vị trí đặc biệt, nói theo
cách nhận thức. Mọi người chú ý và ghi nhớ chúng nhiều hơn các mục ở giữa danh sách. Các mục đầu
tiên và cuối cùng có lẽ là những mục tồi tệ nhất để thay đổi từ bên dưới người dùng.
18Chương 1: Người dùng làm gì

“Tôi đặt cái này ở đây để tự nhắc mình xử lý nó sau.”

Ký ức tương lai là một hiện tượng nổi tiếng trong tâm lý học nhưng dường như vẫn chưa thu hút
được nhiều sự chú ý trong thiết kế giao diện. Nhưng tôi nghĩ là nên.

Chúng ta tham gia vào trí nhớ tương lai khi chúng ta dự định làm điều gì đó trong tương lai và chúng
ta sắp xếp một số cách để nhắc nhở bản thân thực hiện điều đó. Ví dụ, nếu bạn cần mang sách đi làm
vào ngày hôm sau, bạn có thể đặt nó trên bàn cạnh cửa trước vào đêm hôm trước. Nếu bạn cần trả lời
email của ai đó sau (chỉ là không phải bây giờ!), bạn có thể để email đó trên màn hình của mình như
một lời nhắc thực tế. Hoặc nếu bạn có xu hướng bỏ lỡ các cuộc họp, bạn có thể sắp xếp để Outlook
hoặc thiết bị di động của mình đổ chuông báo thức năm phút trước mỗi cuộc họp.

Về cơ bản, đây là điều mà hầu như ai cũng làm. Đó là một phần trong cách chúng ta đương đầu với cuộc sống
phức tạp, nhiều lịch trình và nhiều nhiệm vụ: chúng ta sử dụng kiến thức “trên thế giới” để hỗ trợ những ký ức
không hoàn hảo của chính mình. Chúng ta cần phải có khả năng làm điều đó tốt.

Một số phần mềm hỗ trợ ghi nhớ trong tương lai. Outlook và hầu hết các nền tảng di động, như
đã đề cập trước đó, triển khai trực tiếp và tích cực; họ có lịch và họ phát ra âm thanh báo động.
Nhưng những gì khác bạn có thể sử dụng cho bộ nhớ tiềm năng?

• Ghi chú cho chính mình, như “ghi chú dán” ảo

• Cửa sổ trái trên màn hình

• Chú thích được đưa trực tiếp vào tài liệu (chẳng hạn như “Finish me!”)

• Dấu trang của trình duyệt, dành cho các trang web để xem sau

• Tài liệu được lưu trữ trên màn hình nền, thay vì ở những nơi thông thường trong hệ thống tệp

• Email được lưu trong hộp thư đến (và có thể được gắn cờ) thay vì lưu trữ

Mọi người sử dụng tất cả các loại hiện vật để hỗ trợ ghi nhớ triển vọng thụ động. Nhưng hãy lưu ý rằng hầu như
không có kỹ thuật nào trong danh sách trước được thiết kế với mục đích đó! những gì họđã từngđược thiết kế cho
tính linh hoạt—và thái độ tự do đối với cách người dùng sắp xếp nội dung của họ. Một ứng dụng email tốt cho
phép bạn tạo các thư mục với bất kỳ tên nào bạn muốn và nó không quan tâm bạn làm gì với các thư trong hộp
thư đến của mình. Trình soạn thảo văn bản không quan tâm bạn gõ gì hay văn bản màu đỏ tươi đậm khổng lồ có ý
nghĩa như thế nào đối với bạn; trình chỉnh sửa mã không quan tâm đến việc bạn có nhận xét “Hoàn thành việc
này” trong tiêu đề phương thức. Các trình duyệt không quan tâm tại sao bạn giữ một số dấu trang nhất định.

Trong nhiều trường hợp, sự linh hoạt khi rảnh tay đó là tất cả những gì bạn thực sự cần. Cung cấp cho mọi
người công cụ để tạo hệ thống nhắc nhở của riêng họ. Đừng cố gắng thiết kế một hệ thống quá thông minh
vì lợi ích của chính nó. Chẳng hạn, đừng cho rằng chỉ vì một cửa sổ không hoạt động trong một thời gian
nên không có ai sử dụng nó và nó sẽ bị đóng. Nói chung, đừng "hữu ích" dọn dẹp các tập tin hoặc
 các mẫu19

các đối tượng mà hệ thống có thể nghĩ là vô dụng; ai đó có thể rời bỏ họ xung quanh vì một lý do. Ngoài ra,
không tổ chức hoặc sắp xếp mọi thứ một cách tự động trừ khi người dùng yêu cầu hệ thống làm như vậy.

Là một nhà thiết kế, bạn có thể làm gì tích cực cho trí nhớ tương lai không? Nếu ai đó rời khỏi
một biểu mẫu dang dở và đóng nó tạm thời, bạn có thể giữ lại dữ liệu trong đó cho lần tiếp theo
—điều này sẽ giúp nhắc nhở người dùng nơi họ đã dừng lại. (XemLựa chọn hoãn lại
mẫu.) Tương tự, nhiều ứng dụng gọi lại một số đối tượng hoặc tài liệu cuối cùng mà chúng đã chỉnh sửa.
Bạn có thể cung cấp các danh sách “đối tượng quan tâm” giống như dấu trang—cả trong quá khứ và tương
lai và làm cho các danh sách đó dễ dàng có sẵn để đọc và chỉnh sửa. Bạn có thể thực hiệnNhiều không gian
làm việc, cho phép người dùng để mở các trang chưa hoàn thành trong khi họ làm việc trên một thứ khác.

Đây là một thách thức lớn hơn: nếu người dùng bắt đầu các tác vụ và rời khỏi chúng mà không hoàn
thành chúng, hãy nghĩ cách để lại một số đồ tạo tác xung quanh, ngoài các cửa sổ đang mở, để xác
định các tác vụ chưa hoàn thành. Một ý tưởng khác: làm cách nào người dùng có thể thu thập lời nhắc
từ các nguồn khác nhau (email, tài liệu, lịch, v.v.) vào một nơi? Sáng tạo!

"Tôi phải lặp lại điều này bao nhiêu lần?"

Trong nhiều loại ứng dụng, đôi khi người dùng thấy mình phải thực hiện đi thực hiện lại cùng một
thao tác. Càng dễ dàng cho họ thì càng tốt. Nếu bạn có thể giúp giảm thao tác đó xuống còn một lần
nhấn phím hoặc nhấp chuột cho mỗi lần lặp lại—hoặc tốt hơn, chỉ một vài lần nhấn phím hoặc nhấp
chuột cho tất cả các lần lặp lại—bạn sẽ giúp người dùng bớt tẻ nhạt hơn nhiều.

Các hộp thoại Tìm và Thay thế, thường được tìm thấy trong các trình soạn thảo văn bản (Word, trình soạn
thảo email, v.v.), là một cách thích ứng tốt cho hành vi này. Trong các hộp thoại này, người dùng gõ cụm từ
cũ và cụm từ mới. Sau đó, chỉ cần một lần nhấp vào nút Thay thế cho mỗi lần xuất hiện trong toàn bộ tài
liệu. Và đó chỉ là khi người dùng muốn xem hoặc phủ quyết từng lần thay thế—nếu cô ấy tự tin rằng mình
thực sự nên thay thế tất cả các lần xuất hiện, cô ấy có thể nhấp vào nút Thay thế tất cả; một cử chỉ làm toàn
bộ công việc.

Đây là một ví dụ tổng quát hơn. Photoshop cho phép bạn ghi lại các “hành động” khi bạn muốn thực hiện
một số chuỗi hành động tùy ý chỉ bằng một cú nhấp chuột. Nếu bạn muốn thay đổi kích thước, cắt xén, làm
sáng và lưu 20 hình ảnh, bạn có thể ghi lại 4 bước đó khi chúng được thực hiện với hình ảnh đầu tiên, rồi
nhấp vào nút Phát của hành động đó cho từng bước trong số 19 bước còn lại. Xem phầnmacro
trong Chương 6 để biết thêm thông tin.
Môi trường viết kịch bản thậm chí còn tổng quát hơn. Unix và các biến thể của nó cho phép bạn viết bất kỳ
tập lệnh nào mà bạn có thể nhập vào trình bao. Bạn có thể gọi lại và thực hiện các lệnh đơn lẻ, thậm chí là
các lệnh dài, bằng Ctrl-P và Return. Bạn có thể đưa bất kỳ tập hợp lệnh nào bạn đưa ra vào dòng lệnh, đặt
chúng vào mộtvìvòng lặp và thực hiện chúng bằng cách nhấn phím Return một lần.
20Chương 1: Người dùng làm gì

Hoặc bạn có thể đặt chúng trong một shell script (hoặc trong mộtvìlặp trong tập lệnh Shell) và thực thi
chúng dưới dạng một lệnh. Viết kịch bản rất mạnh mẽ và khi phức tạp, nó sẽ trở thành chương trình
chính thức.

Các biến thể khác bao gồm khả năng sao chép và dán (ngăn không cần phải nhập lại cùng một nội
dung ở hàng triệu vị trí), "lối tắt" do người dùng xác định cho các ứng dụng trên máy tính để bàn của
hệ điều hành (ngăn không cần tìm thư mục của các ứng dụng đó trong hệ thống tệp ), dấu trang của
trình duyệt (để người dùng không phải nhập URL) và thậm chí cả phím tắt.

Quan sát trực tiếp người dùng có thể giúp bạn tìm ra loại nhiệm vụ lặp đi lặp lại nào bạn cần hỗ trợ. Không
phải lúc nào người dùng cũng nói thẳng với bạn. Họ thậm chí có thể không nhận thức được rằng họ đang
làm những việc lặp đi lặp lại có thể được sắp xếp hợp lý bằng các công cụ phù hợp—họ có thể đã làm việc
đó quá lâu đến mức thậm chí không còn nhận thấy nữa. Bằng cách xem họ làm việc, bạn có thể thấy những
gì họ không thấy.

Trong mọi trường hợp, ý tưởng là cung cấp cho người dùng các cách để hợp lý hóa các tác vụ lặp
đi lặp lại có thể tốn thời gian, tẻ nhạt và dễ mắc lỗi.

“Làm ơn đừng bắt tôi sử dụng chuột.”

Một số người thực sự gặp khó khăn về thể chất khi sử dụng chuột. Những người khác không
muốn tiếp tục chuyển đổi giữa chuột và bàn phím vì điều đó tốn thời gian và công sức—họ
muốn luôn đặt tay trên bàn phím. Vẫn còn những người khác không thể nhìn thấy màn hình và
các công nghệ hỗ trợ của họ thường tương tác với phần mềm chỉ bằng API bàn phím.

Vì lợi ích của những người dùng này, một số ứng dụng được thiết kế để được "điều khiển" hoàn toàn thông
qua bàn phím. Chúng cũng thường được điều khiển bằng chuột, nhưng không phải thực hiện thao tác nào
vớichỉ mộtchuột—người dùng chỉ sử dụng bàn phím không bị tắt bất kỳ chức năng nào.

Một số kỹ thuật tiêu chuẩn tồn tại để chỉ sử dụng bàn phím:

• Bạn có thể xác định lối tắt bàn phím, trình tăng tốc và ghi nhớ cho các thao tác có thể truy cập qua thanh
menu ứng dụng, chẳng hạn như Ctrl-S cho Lưu. Xem hướng dẫn về phong cách nền tảng của bạn để
biết những tiêu chuẩn.

• Lựa chọn từ danh sách, thậm chí nhiều lựa chọn, thường có thể sử dụng các phím mũi tên kết hợp
với các công cụ sửa đổi (chẳng hạn như phím Shift), mặc dù điều này phụ thuộc vào bộ thành
phần bạn sử dụng.

• Phím Tab thường di chuyển tiêu điểm bàn phím—điều khiển nhận các mục nhập trên bàn phím
vào lúc này—từ điều khiển này sang điều khiển tiếp theo và Shift-Tab di chuyển lùi lại. Điều này
đôi khi được gọi làduyệt tab.Nhiều người dùng mong đợi nó hoạt động trên giao diện kiểu biểu
mẫu.
 các mẫu21

• Hầu hết các điều khiển tiêu chuẩn, ngay cả các nút radio và hộp tổ hợp, cho phép người dùng thay đổi giá trị
của họ từ bàn phím bằng cách sử dụng các phím mũi tên, phím Return hoặc phím cách.

• Các hộp thoại và trang web thường có một “nút mặc định”—một nút đại diện cho một hành động
có nội dung “Tôi đã hoàn thành nhiệm vụ này ngay bây giờ”. Trên các trang web, nó thường là
Gửi hoặc Xong; trên các hộp thoại, OK hoặc Hủy. Khi người dùng nhấn phím Quay lại trên trang
hoặc hộp thoại này, đó là thao tác xảy ra. Sau đó, nó di chuyển người dùng đến trang tiếp theo
hoặc đưa anh ta trở lại cửa sổ trước đó.

Có nhiều kỹ thuật hơn. Các biểu mẫu, bảng điều khiển và các trang web tiêu chuẩn khá dễ điều khiển
từ bàn phím. Trình chỉnh sửa đồ họa và bất kỳ thứ gì khác chủ yếu là không gian, khó hơn nhiều, mặc
dù không phải là không thể.

Việc sử dụng chỉ bàn phím đặc biệt quan trọng đối với các ứng dụng nhập dữ liệu. Trong đó, tốc độ nhập dữ
liệu là rất quan trọng và người dùng không thể rời tay khỏi bàn phím để chuyển sang chuột mỗi khi họ
muốn di chuyển từ trường này sang trường khác hoặc thậm chí từ trang này sang trang khác. (Trên thực tế,
nhiều biểu mẫu trong số này thậm chí không yêu cầu người dùng nhấn phím Tab để di chuyển giữa các
điều khiển; nó được thực hiện tự động.)

“Những người khác đã nói gì về điều này?”

Con người là xã hội. Đôi khi ý kiến của chúng ta mạnh mẽ đến đâu, chúng ta có xu hướng bị ảnh hưởng bởi suy
nghĩ của đồng nghiệp.

Hãy chứng kiến sự tăng trưởng ngoạn mục của “nhận xét của người dùng” trực tuyến: Amazon dành cho sách (và
mọi thứ khác), IMDb dành cho phim, Flickr dành cho ảnh và vô số nhà bán lẻ cung cấp không gian cho các bài
đánh giá sản phẩm do người dùng gửi. Các trang web đấu giá như eBay chính thức hóa ý kiến của người dùng
thành giá thực tế. Blog cung cấp không gian hộp xà phòng không giới hạn để mọi người có ý kiến và thảo luận về
bất cứ điều gì họ muốn, từ sản phẩm đến lập trình đến chính trị.

Lời khuyên của đồng nghiệp, dù trực tiếp hay gián tiếp, đều ảnh hưởng đến sự lựa chọn của mọi người khi
họ quyết định bất kỳ điều gì. Tìm kiếm mọi thứ trực tuyến, thực hiện các giao dịch (Tôi có nên mua sản
phẩm này không?), chơi trò chơi (Những người chơi khác đã làm gì ở đây?) và thậm chí là xây dựng mọi thứ
—mọi người có thể làm việc hiệu quả hơn khi được người khác hỗ trợ. Nếu không, ít nhất họ có thể hạnh
phúc hơn với kết quả.

Đây là một ví dụ tinh vi hơn. Các lập trình viên sử dụng ứng dụng MATLAB để thực hiện các nhiệm vụ
khoa học và toán học. Cứ sau vài tháng, công ty sản xuất MATLAB lại tổ chức một cuộc thi lập trình
công khai; trong vài ngày, mỗi thí sinh viết mã MATLAB tốt nhất có thể để giải một bài toán khoa học
khó. Mã nhanh nhất, chính xác nhất sẽ thắng. Điều hấp dẫn là mọi người chơi đều có thể xem mã của
những người khác—và việc sao chép được khuyến khích! “Lời khuyên” trong trường hợp này là gián
tiếp, ở dạng mã được chia sẻ, nhưng nó khá có ảnh hưởng. Đến cuối cùng,
22Chương 1: Người dùng làm gì

chương trình giành chiến thắng không bao giờ thực sự nguyên bản, nhưng nó chắc chắn là mã tốt hơn bất
kỳ nỗ lực đơn lẻ nào. (Trong nhiều khía cạnh, đây là một mô hình thu nhỏ của phát triển phần mềm nguồn
mở, được thúc đẩy bởi một tập hợp các động lực xã hội mạnh mẽ.)

Không phải tất cả các ứng dụng và hệ thống phần mềm đều có thể chứa thành phần xã hội và không phải tất cả đều nên
thử. Nhưng hãy xem xét liệu nó có thể nâng cao trải nghiệm người dùng để làm như vậy hay không. Và bạn có thể trở nên
sáng tạo hơn là chỉ dán một bảng thông báo dựa trên web lên một trang web thông thường—làm thế nào bạn có thể
thuyết phục người dùng tham gia một cách xây dựng? Làm cách nào bạn có thể tích hợp nó vào quy trình làm việc của
người dùng thông thường?

Nếu nhiệm vụ là sáng tạo, bạn có thể khuyến khích mọi người đăng tác phẩm của họ cho công chúng xem.
Nếu mục tiêu là tìm kiếm một số sự kiện hoặc đối tượng, có lẽ bạn có thể giúp người dùng dễ dàng xem
những gì người khác tìm thấy trong các tìm kiếm tương tự.

Trong số các mẫu trong cuốn sách này,Trợ giúp đa cấp(Chương 2) đề cập trực tiếp nhất đến ý tưởng
này; cộng đồng hỗ trợ trực tuyến là một phần có giá trị của hệ thống trợ giúp hoàn chỉnh cho một số
ứng dụng.

“Bạn tôi bảo tôi đọc cái này đi, chắc nó hay lắm.”

Mô hình này hoạt động theo nguyên tắc giống như mô hình trước đó—chúng ta bị ảnh hưởng mạnh mẽ bởi các
đồng nghiệp của mình. Trên thực tế, nhiều đến mức chúng ta có nhiều khả năng xem các bài báo và video mà ai
đó giới thiệu cho chúng ta hơn là những bài viết và video mà chúng ta tìm thấy theo cách khác. Liên lạc cá nhân
tạo ra sự khác biệt lớn khi chúng tôi quyết định đọc gì trực tuyến.

Do đó, hãy hỗ trợ chia sẻ nội dung giữa người với người. Cho phép mọi người gửi URL (hoặc
chính nội dung ) cho bạn bè và gia đình, qua email hoặc qua mạng xã hội như Facebook
hoặc Buzz.

Điều này ngụ ý một loạt các cơ chế cần được sử dụng hoặc thiết kế. Đầu tiên, chính xác thì người
dùng đang chia sẻ những gì? Nếu nội dung chưa có URL, hãy xem liệu có thể tạo một URL cho nó
hay không. (CácNhà nước liên kết sâumẫu trong Chương 3 nói về điều này.) URL này phải hướng
người nhận đến một trang có cùng nội dung mà người gửi đang xem, để tránh nhầm lẫn.

Thứ hai, họ sẽ chia sẻ nó với ai? Cho phép người dùng kết nối với mạng xã hội hoặc cung cấp cho họ
cách gửi email.

Thứ ba, tham chiếu này có ý nghĩa gì? Nếu một người dùng gửi email đến một vài “mối quan hệ
thân thiết”, cùng với một tin nhắn cá nhân—một tin nhắn do người dùng nhập, không phải là
một “tin nhắn cá nhân!— tự động có thể mang lại đề xuất rất cao. Rốt cuộc, ai đó đủ quan tâm
để nghĩ về bạn và dành thời gian để viết một ghi chú. Sự đặc biệt giảm dần khi người gửi CCTuy
nhiên, ngày càng có nhiều địa chỉ email.
 các mẫu23

Khi người dùng đăng một liên kết tới luồng Facebook hoặc Twitter của cô ấy, điều đó mang hàm ý khác: “Tôi nghĩ
điều này thật tuyệt và nó thể hiện điều gì đó về con người của tôi”. Những người theo dõi vẫn có khả năng đọc các
liên kết này, đặc biệt nếu họ tin tưởng rằng người đăng có khiếu thẩm mỹ tốt. Hơn nữa, những người theo dõi có
thể tự đăng lại hoặc chuyển tiếp tin nhắn đó, cũng như những người theo dõi họ, ad infinitum. Đây là cách các
meme bắt đầu, nội dung lan truyền và mạng xã hội tiếp tục phát triển.
Tại thời điểm này, bạn biết những gì người dùng của bạn muốn từ ứng dụng hoặc trang web của bạn. Bạn
đang nhắm mục tiêu một nền tảng đã chọn: Web, máy tính để bàn, thiết bị di động hoặc một số kết hợp.
Bạn biết nên sử dụng thành ngữ hoặc loại giao diện nào—một biểu mẫu, trang web thương mại điện tử,
trình xem ảnh hoặc thứ gì đó khác—hoặc bạn có thể nhận ra rằng mình cần kết hợp một vài trong số
chúng. Nếu bạn thực sự hiểu rõ, bạn đã viết ra một số tình huống điển hình mô tả cách mọi người có thể sử
dụng các yếu tố cấp cao của ứng dụng để đạt được mục tiêu của họ. Bạn có ý tưởng rõ ràng về giá trị mà
ứng dụng này mang lại cho cuộc sống của mọi người.

Giờ thì sao?

Bạn có thể bắt đầu phác thảo giao diện. Nhiều nhà tư tưởng trực quan làm điều đó ở giai đoạn
này. Nếu bạn là kiểu người thích suy nghĩ trực quan và cần chơi với các bản phác thảo trong khi
tìm ra các nét bao quát của thiết kế, hãy tiếp tục.

Nhưng nếu bản chất bạn không phải là người có tư duy trực quan (và đôi khi ngay cả khi bạn là người như vậy),
hãy tạm dừng các bản phác thảo giao diện. Họ có thể khóa suy nghĩ của bạn vào những thiết kế trực quan đầu tiên
bạn đặt trên giấy. Bạn cần duy trì sự linh hoạt và sáng tạo trong một thời gian ngắn, cho đến khi bạn tìm ra cách tổ
chức tổng thể của ứng dụng.

Có thể hữu ích khi nghĩ về một ứng dụng theo các nhiệm vụ và dữ liệu cơ bản của nó. Những đối
tượng nào đang được hiển thị cho người dùng? Chúng được phân loại và sắp xếp như thế nào? Người
dùng cần làm gì với chúng? Và bây giờ bạn đang suy nghĩ một cách trừu tượng về chúng, bạn có thể
thiết kế bao nhiêu cách trình bày về những thứ và nhiệm vụ đó?

Những dòng yêu cầu này có thể giúp bạn suy nghĩ sáng tạo hơn về giao diện bạn đang thiết
kế.

Kiến trúc thông tin (IA) là nghệ thuật tổ chức không gian thông tin. Nó bao gồm nhiều
thứ: trình bày, tìm kiếm, duyệt, dán nhãn, phân loại, sắp xếp, thao tác và ẩn thông tin
một cách chiến lược. Đặc biệt nếu bạn đang làm việc với một sản phẩm mới, đây là nơi
bạn nên bắt đầu.
26Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Trước tiên, hãy xem cấp độ cao nhất của ứng dụng của bạn. Từ quan điểm của nhà thiết kế, trang web hoặc
ứng dụng của bạn có thể phục vụ một số chức năng: dịch vụ phần mềm—có thể là một số dịch vụ—chia sẻ
thông tin, bán sản phẩm, xây dựng thương hiệu, giao tiếp xã hội hoặc bất kỳ mục tiêu nào khác. Trang chủ
hoặc màn hình mở đầu của bạn có thể cần chuyển tải tất cả những điều này. Thông qua văn bản và hình
ảnh, người dùng sẽ được chuyển hướng đến phần trang web hoặc ứng dụng của bạn hoàn thànhcủa họ
mục đích.

Ở cấp độ này, bạn sẽ đưa ra quyết định về toàn bộ gói. Nó sẽ sử dụng mô hình tương tác nào? Ẩn dụ
máy tính để bàn? Mô hình đơn giản hơn của một trang web truyền thống? Hoặc một trang web có
tính tương tác phong phú giúp phân chia sự khác biệt? Nó có phải là một thiết bị độc lập như điện
thoại di động hoặc máy quay video kỹ thuật số mà bạn phải thiết kế các tương tác từ đầu không? Mô
hình tương tác thiết lập tính nhất quán trong toàn bộ tạo phẩm và nó xác định cách người dùng di
chuyển qua và giữa các phần chức năng khác nhau. Tôi sẽ không đi vào chi tiết hơn ở cấp độ này, bởi
vì hầu hết tất cả các mẫu trong cuốn sách này đều áp dụng ở quy mô nhỏ hơn.

Bây giờ, hãy xem xét một đơn vị nhỏ hơn trong một ứng dụng hoặc trang web: các trang phục vụ các chức năng
quan trọng đơn lẻ. Trong một ứng dụng, đây có thể là màn hình chính hoặc công cụ tương tác chính; trong một
trang web tương tác phong phú, nó có thể là một trang duy nhất, chẳng hạn như màn hình chính của Gmail; trong
một trang web tĩnh hơn, nó có thể là một nhóm các trang dành cho một quy trình hoặc chức năng.

Bất kỳ trang nào như vậy sẽ chủ yếu thực hiện một trong những điều sau:

1. Hiển thị một thứ duy nhất, chẳng hạn như bản đồ, sách, video hoặc trò chơi

2. Hiển thị một danh sách hoặc tập hợp các thứ

3. Cung cấp các công cụ để tạo ra một thứ

4. Tạo thuận lợi cho một nhiệm vụ

Tất nhiên, hầu hết các ứng dụng và trang web đều thực hiện một số kết hợp của những điều này. Một trang
web có thể hiển thị một bài viết nổi bật (1), danh sách các bài viết bổ sung (2), với khu vực wiki để thành viên
tạo trang (3) và biểu mẫu đăng ký cho thành viên mới (4). Tốt rồi. Mỗi phần này của trang web nên được
thiết kế bằng cách sử dụng các mẫu và công cụ để phù hợp với nguyên tắc tổ chức cụ thể đó.

Danh sách này phản ánh một số công việc do Theresa Neil thực hiện với các cấu trúc ứng dụng trong
bối cảnh các ứng dụng Internet phong phú (RIA). Cô định nghĩa ba loại cấu trúc dựa trên mục tiêu
chính của người dùng: thông tin, quy trình và sáng tạo.*

Danh sách này cung cấp cho chúng ta một khuôn khổ phù hợp với các thành ngữ và mẫu mà chúng ta sẽ nói đến trong
chương này và các chương khác.

* “Thiết kế màn hình Internet phong phú,” trongTạp chí UX: http://www.uxmag.com/design/rich-internet-applicationscreen-
design.
 Bức tranh lớn27

Đây thực sự là những gì trang của bạn làm? Toàn bộ quan điểm thiết kế của trang là hiển thị hoặc phát một
phần nội dung, không có danh sách các phần khác mà người dùng cũng có thể xem, không có nhận xét và
không có mục lục hay bất kỳ thứ gì tương tự?

Bạn thật may mắn!

Sau đó, tất cả những gì bạn thực sự cần là quản lý tương tác của người dùng với thứ này. IA
có lẽ là đơn giản. Có thể có các công cụ quy mô nhỏ được nhóm xung quanh nội dung—
cuộn và thanh trượt, hộp đăng nhập, điều hướng chung, đầu trang và chân trang, v.v.—
nhưng chúng nhỏ và dễ thiết kế. Thiết kế của bạn có thể có một trong những hình dạng
sau:

• Một trang văn bản dài, được cuộn theo chiều dọc (bài báo, sách và nội dung dạng dài tương
tự).

• Một giao diện có thể thu phóng cho các đồ tạo tác rất lớn, chi tiết, chẳng hạn như bản đồ, hình ảnh
hoặc đồ họa thông tin. Các trang web bản đồ như Google Maps cung cấp một số ví dụ nổi tiếng.

• Thành ngữ “trình phát đa phương tiện”, bao gồm trình phát video và âm thanh.

Khi bạn thiết kế giao diện này, hãy xem xét các mẫu và kỹ thuật sau để hỗ trợ
thiết kế:
• Chế độ xem thay thế, để hiển thị nội dung theo nhiều cách.

• Nhiều không gian làm việc, trong trường hợp mọi người muốn xem nhiều địa điểm, tiểu bang hoặc tài liệu cùng

một lúc.

• Nhà nước liên kết sâu, trong Chương 3. Với điều này, người dùng có thể lưu một địa điểm hoặc trạng thái nhất

định trong nội dung để anh ta có thể quay lại nội dung đó sau hoặc gửi cho người khác một URL.

• ứng dụng chia sẻvà các khuôn mẫu xã hội khác, trong Chương 9.

• Một số mẫu di động được mô tả trong Chương 10, nếu một trong những mục tiêu thiết kế của bạn là
cung cấp nội dung trên thiết bị di động.

Đây là điều mà hầu hết các đồ tạo tác kỹ thuật số trên thế giới dường như làm được. Danh sách ở khắp mọi
nơi! Thế giới kỹ thuật số đã hội tụ nhiều thành ngữ phổ biến để hiển thị danh sách, hầu hết trong số đó đều
quen thuộc với bạn—danh sách văn bản đơn giản, menu, lưới hình ảnh, kết quả tìm kiếm, danh sách email
hoặc thông tin liên lạc khác, bảng biểu, cây cối. Có nhiều hơn, tất nhiên.

Danh sách đưa ra những thách thức phong phú trong kiến trúc thông tin. Danh sách dài bao nhiêu? Nó
phẳng hay phân cấp, và nếu là phân cấp thì là loại gì? Nó được sắp xếp như thế nào và người dùng có thể tự
động thay đổi thứ tự đó không? Nó nên được lọc hoặc tìm kiếm? Những thông tin hoặc hoạt động nào được
liên kết với từng mục danh sách và chúng nên được hiển thị khi nào và như thế nào?
28Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Bởi vì các danh sách rất phổ biến, nên việc nắm vững các cách khác nhau để trình bày chúng có thể mang lại
lợi ích cho bất kỳ nhà thiết kế nào. Đây lại là cùng một chủ đề—bằng cách học và hình thức hóa các kỹ thuật
này, bạn có thể mở rộng suy nghĩ của mình về cách trình bày nội dung theo những cách thú vị và khác biệt.

Một số mẫu thiết kế giao diện xung quanh danh sách được mô tả trong chương này (các mẫu khác có trong
Chương 5). Bạn có thể xây dựng toàn bộ ứng dụng hoặc trang web hoặc một phần nhỏ của một phần mềm lớn
hơn xung quanh một trong các mẫu này. Chúng thiết lập một cấu trúc mà các kỹ thuật hiển thị khác như danh
sách văn bản, danh sách hình thu nhỏ, v.v.—có thể phù hợp với. Các tổ chức cấp cao nhất khác không được liệt kê
ở đây có thể bao gồm lịch, menu toàn trang và kết quả tìm kiếm.

• Tính năng, Tìm kiếm và Duyệtlà mô hình được theo sau bởi vô số trang web hiển thị sản phẩm và nội
dung bằng văn bản. Tính năng tìm kiếm và duyệt cung cấp hai cách để người dùng tìm thấy các
mục quan tâm, trong khi trang đầu làm nổi bật một mục để thu hút sự quan tâm.

• Các blog, trang tin tức, trình đọc email và các trang xã hội như Twitter đều sử dụngDòng tin tức
để liệt kê nội dung của họ, với các bản cập nhật gần đây nhất ở trên cùng.

• Trình quản lý ảnhlà một loại giao diện được xác định rõ để xử lý ảnh và các tài liệu hình ảnh khác.
Nó có thể chứa các hệ thống phân cấp và danh sách phẳng, các công cụ để sắp xếp và sắp xếp lại
các tài liệu, các công cụ để thao tác trực tiếp trên ảnh, v.v.

Khi bạn đã chọn một thiết kế tổng thể cho giao diện, bạn có thể xem xét các mẫu và kỹ thuật
hiển thị danh sách khác. Những điều này phù hợp với các mẫu được đề cập trước đó; vì
ví dụ, mộtTrình quản lý ảnhcó thể sử dụng mộtLưới hình thu nhỏ, Mộtphân trang, hoặc cả hai để hiển thị một
danh sách ảnh—tất cả trong mộtBộ chọn hai bảngkhuôn khổ. Xem Chương 5 để thảo luận kỹ
lưỡng.

Các nhà xây dựng và biên tập viên là những gia đình lớn của thế giới phần mềm. Microsoft
Word, Excel, PowerPoint và các ứng dụng Office khác, ngoài Adobe Photoshop, Illustrator, In
Design, Dreamweaver và các công cụ khác hỗ trợ các nhà thiết kế đều thuộc danh mục này. Các
công cụ hỗ trợ kỹ sư phần mềm cũng vậy, chẳng hạn như các trình soạn thảo mã khác nhau và
môi trường phát triển tích hợp. Chúng có lịch sử lâu đời, cơ sở người dùng lớn và phong cách
tương tác được thiết lập rất tốt, được mài dũa qua nhiều năm.

Hầu hết mọi người đều quen thuộc với các thành ngữ được sử dụng bởi các công cụ này: trình soạn thảo văn bản, trình

chỉnh sửa mã, trình chỉnh sửa hình ảnh, trình chỉnh sửa tạo đồ họa vector và bảng tính.

Chương 8 của ấn bản trước của cuốn sách này thảo luận về cách thiết kế các khía cạnh khác nhau của
những công cụ này. Nhưng ở cấp độ cấu trúc ứng dụng hoặc IA, các mẫu sau đây thường được tìm
thấy:

• Bảng màu Canvas Plusmô tả hầu hết các ứng dụng này. Mẫu thiết lập tốt, dễ nhận biết này
dành cho trình chỉnh sửa trực quan đặt ra kỳ vọng rất cao cho người dùng.

• Hầu như tất cả các ứng dụng thuộc loại này đều cung cấpNhiều không gian làm việc—thường là các cửa sổ
chứa các tài liệu khác nhau, cho phép người dùng làm việc song song trên chúng.
 các mẫu29

• Chế độ xem thay thếcho phép người dùng xem một tài liệu hoặc không gian làm việc qua các ống kính khác

nhau để xem các khía cạnh khác nhau của thứ họ đang tạo.

• “Lời mời Slate trống” được đặt tên và viết vềThiết kế giao diện web (http://oreilly.com/
catalog/9780596516253/)của Bill Scott và Theresa Neil (O'Reilly), và là một mẫu cực kỳ
hữu ích cho người xây dựng và biên tập viên. Nó liên quan mật thiết với
Gợi ý đầu vàomô hình trong Chương 8.

Có thể công việc của giao diện của bạn không phải là hiển thị danh sách bất kỳ thứ gì hoặc tạo ra bất kỳ thứ
gì, mà chỉ đơn giản là hoàn thành công việc. Đăng nhập, đăng ký, đăng, in, tải lên, mua, thay đổi cài đặt—tất
cả các tác vụ đó đều thuộc danh mục này.

Các hình thức làm rất nhiều công việc ở đây. Chương 8 nói về các biểu mẫu dài và liệt kê nhiều điều
khiển và mẫu để hỗ trợ các biểu mẫu hiệu quả. Chương 6 định nghĩa một tập hợp các mẫu hữu ích
khác tập trung nhiều vào “động từ” hơn là “danh từ”.

Không cần thực hiện nhiều IA nếu người dùng có thể thực hiện công việc cần thiết trong một khu vực nhỏ,
kín, chẳng hạn như hộp đăng nhập. Nhưng khi nhiệm vụ trở nên phức tạp hơn thế—nếu nhiệm vụ đó dài,
phân nhánh hoặc có quá nhiều khả năng—một phần công việc của bạn là tìm ra cách cấu trúc nhiệm vụ.

• Phần lớn thời gian, bạn sẽ muốn chia nhiệm vụ thành các bước hoặc nhóm các bước nhỏ hơn. Đối với
những điều này, mộtThuật sĩcó thể hoạt động tốt cho những người dùng cần được hướng dẫn qua tác
vụ.

• MỘTTrình chỉnh sửa cài đặtlà một loại giao diện rất phổ biến cung cấp cho người dùng cách thay đổi
cài đặt hoặc tùy chọn của một thứ gì đó—ứng dụng, tài liệu, sản phẩm, v.v. Đây hoàn toàn không
phải là một nhiệm vụ từng bước. Tại đây, công việc của bạn là cung cấp cho người dùng quyền
truy cập mở vào nhiều lựa chọn và công tắc khác nhau và để họ chỉ thay đổi những gì họ cần, khi
họ cần, biết rằng họ sẽ bỏ qua.

Một số mẫu trong chương này có quy mô lớn, xác định các tương tác cho các phần lớn của
ứng dụng hoặc trang web (hoặc đôi khi là toàn bộ). Một số trong số này, bao gồm cả
Trình quản lý ảnh,Bảng màu Canvas Plus, VàTính năng, Tìm kiếm và Duyệt, thực sự là cụm của
các mẫu khác hỗ trợ lẫn nhau theo những cách được xác định rõ ràng—chúng là “nhóm” các mẫu có quy mô
nhỏ hơn.

1.Tính năng, Tìm kiếm và Duyệt

2.Dòng tin tức

3.Trình quản lý ảnh
4.bảng điều khiển
30Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

5.Bảng màu Canvas Plus

6.Thuật sĩ
7.Trình chỉnh sửa cài đặt

Ba mẫu cuối cùng là “meta” hơn, theo nghĩa là chúng có thể áp dụng cho các mẫu khác trong danh
sách trước đó. Chẳng hạn, hầu hết mọi nội dung, tài liệu hoặc danh sách đều có thể được hiển thị
theo nhiều cách và khả năng chuyển đổi giữa các cách đóChế độ xem thay thếcó thể trao quyền cho
người dùng.

số 8.Chế độ xem thay thế

Tương tự như vậy, người dùng có thể muốn khởi tạo giao diện nhiều lần, để duy trì đồng thời nhiều luồng
suy nghĩ—xem xét các tab trong cửa sổ trình duyệt, tất cả đều hiển thị các trang web khác nhau và không
liên quan. cung cấp cácNhiều không gian làm việcmẫu cho những người dùng này.

9.Nhiều không gian làm việc

Nhiều mẫu, ở đây và ở những nơi khác trong cuốn sách, đóng góp ở các mức độ khác nhau vào khả
năng học hỏi của một giao diện.Trợ giúp đa cấpđưa ra các cách để tích hợp trợ giúp vào ứng dụng, do
đó hỗ trợ khả năng học hỏi cho nhiều người dùng và tình huống.

10.Trợ giúp đa cấp

Tính năng Tìm kiếm

duyệt

EMS
 các mẫu31

Đặt ba yếu tố trên trang chính của trang web hoặc ứng dụng: bài viết hoặc sản phẩm nổi bật, hộp tìm
kiếm và danh sách các mục hoặc danh mục có thể duyệt qua.

Trang web của bạn cung cấp cho người dùng danh sách dài các mục—bài viết, sản phẩm, video, v.v.—
có thể duyệt và tìm kiếm. Bạn muốn thu hút người dùng mới ngay lập tức bằng cách cung cấp cho họ
thứ gì đó thú vị để đọc hoặc xem.

Ba yếu tố này được tìm thấy cùng nhau trên rất nhiều trang web thành công. Một khi bạn đã hòa
hợp với chúng, bạn có thể tìm thấy chúng ở khắp mọi nơi.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Tìm kiếm và duyệt đi đôi với nhau như hai cách để tìm các mục mong muốn: một số người sẽ biết những gì
họ đang tìm kiếm và nhập vào hộp tìm kiếm, trong khi những người khác sẽ thực hiện nhiều thao tác duyệt
mở hơn thông qua các danh sách và danh mục mà bạn hiển thị cho họ .

Các mục nổi bật là cách bạn “câu” người dùng. Chúng thú vị hơn nhiều so với chỉ danh sách danh
mục và hộp tìm kiếm, đặc biệt khi bạn sử dụng hình ảnh và tiêu đề hấp dẫn. Người dùng truy
cập vào trang của bạn hiện có thứ gì đó để đọc hoặc thử nghiệm mà không cần thực hiện thêm
bất kỳ công việc nào—và anh ta có thể thấy nó thú vị hơn bất kỳ thứ gì anh ta tìm đến ban đầu.

Đặt hộp tìm kiếm ở vị trí nổi bật, chẳng hạn như góc trên hoặc trong biểu ngữ ở giữa trên cùng
của trang web. Phân định ranh giới rõ ràng với phần còn lại của trang web—sử dụng khoảng
trắng để tắt nó và sử dụng màu nền xung quanh khác nếu cần.

Cố gắng loại bỏ tất cả các trường văn bản khác trong màn hình đầu tiên (ngoại trừ hộp đăng nhập, nếu bạn có), để
đảm bảo người dùng không nhầm lẫn những trường đó với hộp tìm kiếm. Những người đang tìm kiếm một hộp
tìm kiếm có xu hướng tập trung vào trường văn bản đầu tiên họ bắt gặp. Hãy chắc chắn rằng họ tìm đúng!

Để qua một bênTrung tâm sân khấu(xem Chương 4) để biết bài viết, sản phẩm hoặc video nổi bật. Rất gần nó và vẫn
ở trên màn hình đầu tiên, hãy đặt một khu vực để duyệt phần còn lại của nội dung trang web. Hầu hết các trang
web hiển thị danh sách các chủ đề hoặc danh mục sản phẩm. Đây có thể là các liên kết đến các trang dành cho các
danh mục đó. Hoặc họ có thể thay đổi nội dung của trang hiện tại, thay thế tính năng này bằng một danh sách các
mục trong danh mục đó; xemBộ chọn hai bảngmô hình trong Chương 5.

Nếu các nhãn danh mục mở tại chỗ để hiển thị các danh mục con, danh sách sẽ hoạt động giống như một
cái cây. Một số trang web, chẳng hạn như Amazon, biến nhãn danh mục thành menu: khi con trỏ cuộn qua
nhãn, menu danh mục phụ sẽ xuất hiện.
32Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Chọn các tính năng tốt. Các tính năng là một cách hay để bán các mặt hàng, quảng cáo đặc biệt và thu hút
sự chú ý đến những tin tức nóng hổi. Tuy nhiên, chúng cũng xác định trang web của bạn nói về cái gì. Các
mục bạn chọn để làm nổi bật nói lên nhiều điều về giá trị của trang web. Các tính năng nói về nỗ lực vị tha
hoặc từ thiện có sức hấp dẫn rất khác so với các tính năng quảng cáo các sản phẩm cụ thể. Như mọi khi, hãy
biết người dùng của bạn. Họ sẽ muốn biết về điều gì? Điều gì sẽ thu hút sự chú ý của họ và giữ chân họ tại
trang web của bạn?

Khi người dùng duyệt qua các danh mục và danh mục con, hãy giúp anh ấy “được tìm thấy” bằng
vụn bánh mìhoa văn (Chương 3).

Mẫu này áp dụng tốt cho các trang web như cửa hàng tin tức (CNET, Hình 2-2), nhà xuất
bản (Lulu), cơ sở tri thức (About.com, Hình 2-3) và, tất nhiên, các trang thương mại điện tử
(Amazon, Hình 2-4; và EMS, ở trên cùng của mẫu trong Hình 2-1).

Cnet
 các mẫu33

About.com

amazon
34Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Twitter

Hiển thị các mục nhạy cảm với thời gian trong danh sách theo thứ tự thời gian đảo ngược, với các mục mới nhất ở
trên cùng. Cập nhật nó một cách linh hoạt và kết hợp các mục từ các nguồn hoặc người khác nhau vào một luồng
duy nhất.

Trang web hoặc ứng dụng của bạn sử dụng một hoặc nhiều kênh liên lạc, chẳng hạn như blog, email, cập nhật trang xã

hội hoặc trang tin tức để cung cấp nội dung kịp thời cho người dùng.

Kênh này có thể là kênh cá nhân—một người dùng “sở hữu” kênh đó, chẳng hạn như ứng dụng email khách hoặc danh sách bạn bè trên

Facebook—hoặc công khai, chẳng hạn như trang web hoặc luồng Twitter công khai.

Mọi người có thể cập nhật luồng tin tức một cách dễ dàng, vì các mục mới nhất xuất hiện ở trên cùng một
cách đáng tin cậy mà người dùng không cần nỗ lực. Họ có thể đăng ký thường xuyên và yên tâm xem
những gì họ cần xem.
 các mẫu35

Mọi người truy cập nhiều trang web hoặc ứng dụng mỗi ngày để cập nhật các hoạt động của bạn bè họ, tham gia
vào các cuộc trò chuyện hoặc theo dõi các chủ đề hoặc blog mà họ quan tâm. Khi nhiều nguồn “tin tức” có thể
được kết hợp ở một nơi, việc theo dõi tất cả sẽ dễ dàng hơn.

Mô hình này hỗ trợ cácvi phạmmẫu hành vi trong Chương 1. Nhìn thoáng quaDòng tin tứcứng
dụng có thể cung cấp cho người dùng nhiều thông tin hữu ích (hoặc giải trí) với rất ít thời gian và
công sức.

Từ quan điểm của một nhà xuất bản, chẳng hạn như một trang web, có mộthộp tin tức(Chương 9) hoặc
nội dung tương đương trên trang chính của bạn cho phép khách truy cập thấy những điểm mới và
đáng chú ý tại tổ chức của bạn. Đặc biệt, các tổ chức lớn có thể có nhiều sáng kiến đang diễn ra sẽ
thu hút khách truy cập: sản phẩm mới, mục blog, video, tin tức, công việc từ thiện và nội dung khác.

Liệt kê các mục đến theo thứ tự thời gian đảo ngược. Nếu công nghệ cho phép, hãy “đẩy” các mục mới
lên đầu danh sách mà không cần đợi người dùng yêu cầu cập nhật, nhưng vẫn cung cấp một cách để
người dùng nhận được bản cập nhật hoặc làm mới ngay lập tức.

Các luồng rất bận có thể được chia thành các luồng phụ có thể quản lý theo chủ đề, người gửi, nguồn, cụm
từ tìm kiếm hoặc các yếu tố khác—bạn có thể cho phép người dùng chọn (những) luồng nào sẽ hiển thị. Các
dịch vụ như Facebook, FriendFeed, Twitter và một số trình đọc RSS hiển thị danh sách có thể nhấp của các
luồng con này ở bên trái hoặc bên phải của nội dung đến (do đó triển khaiBộ chọn hai bảngmẫu). Những
người khác, chẳng hạn như Tweetdeck, sử dụngNhiều không gian làm việcđể hiển thị nhiều bảng song song
của nội dung đến.

Thông tin hiển thị với mỗi mục có thể bao gồm:
Cái gì
Đối với các bản cập nhật vi mô ngắn, hãy hiển thị toàn bộ. Nếu không, hãy hiển thị tiêu
đề, đoạn giới thiệu ngắn dài vài từ hoặc câu và hình thu nhỏ nếu có.

Ai
Đây có thể là người đã viết một bản cập nhật, blog nơi bài báo được đăng, tác giả của
bài báo nói trên hoặc người gửi email. Tên người thực giúp nhân hóa giao diện, nhưng
hãy cân bằng điều này với sự công nhận và tính có thẩm quyền—tên của các hãng tin
tức, blog, công ty, v.v. cũng rất quan trọng. Sử dụng cả hai nếu điều đó có ý nghĩa.

Khi
Đưa ra một ngày hoặc dấu thời gian; cân nhắc sử dụng thời gian tương đối, chẳng hạn như “Hôm qua” và
“Mười một phút trước”.

Ở đâu
Nếu nguồn của một mặt hàng là một trang web, hãy liên kết đến trang web đó. Nếu nó đến từ một trong các
blog của tổ chức bạn, hãy liên kết tới đó. (Nhưng đây là một cách giải thích khác về “ở đâu”: bạn có thể lấy dữ
liệu định vị địa lý về vật phẩm và hiển thị nó trên bản đồ không?)
36Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Khi có nhiều mục hơn mức có thể hiển thị dễ dàng trong màn hình danh sách, hãy hiển thị liên kết
hoặc nút “Thêm”. Bạn có thể thiết kế một cách để hiển thị toàn bộ nội dung của một mục trongDòng
tin tứccửa sổ. CácDòng tin tứclà một danh sách, vì vậy bạn có thể chọn trong sốhai bảng điều khiển
Bộ chọn,Xem chi tiết một cửa sổ, VàLiệt kê khảm. Ví dụ rất nhiều về mỗi mô hình.

Cung cấp cho người dùng cách phản hồi ngay lập tức với các mục đến. Các dấu sao, tán thành, thích và yêu
thích có sẵn trong một số hệ thống—tất cả những hệ thống này đều cung cấp phản hồi ít tốn công sức và
“bắt tay” giữa những người không có thời gian để viết ra các câu trả lời dài. Nhưng cũng cho phép những
câu trả lời dài đó được viết! Bằng cách đặt các điều khiển và trường văn bản ngay bên cạnh một mục trong
Dòng tin tức, bạn khuyến khích phản hồi và tương tác. Đây thường là một điều tốt trong các hệ thống xã hội.

Chia sẻ các mục, riêng tư qua email hoặc bán công khai thông qua một dịch vụ xã hội được cung cấp, cũng
phổ biến trong các giao diện này. xemứng dụng chia sẻmô hình trong Chương 9.

Dòng tin tứcthiết kế cho thiết bị di động khá đơn giản khi viết bài này. Hầu như tất cả chúng đều dành toàn bộ màn

hình cho một danh sách—thường là mộtDanh sách hình thu nhỏ và văn bản(Chương 10) với văn bản được định dạng
phong phú—và người dùng có thể xem chi tiết một mục bằng cách chỉ cần chạm hoặc bấm vào mục đó trong danh
sách.

NhiềuDòng tin tứcdịch vụ, bao gồm cả Twitter và Facebook, sử dụngDanh sách vô hạnmẫu (xem
Chương 10) cho cả thiết kế di động và toàn màn hình của họ. Mẫu này cho phép người dùng tải
một hoặc hai trang trong số các bản cập nhật gần đây nhất và cung cấp tùy chọn tải thêm để "lùi
thời gian".

Một số tài nguyên sử dụng thuật ngữluồng hoạt độngđối với một khái niệm có liên quan rất chặt chẽ:
chuỗi hành động được sắp xếp theo thời gian (thường là các hành động xã hội) được thực hiện bởi
một thực thể đơn lẻ chẳng hạn như một cá nhân, hệ thống hoặc tổ chức. Đây là một khái niệm hữu
ích và nó không thực sự xung đột vớiDòng tin tứcmô hình, nói về dòng hoạt động đượcquan tâm đến
một cá nhân hoặc một nhóm người dùng, khôngđược tạo ra bởihọ.Dòng tin tứcthường sẽ có nhiều
nguồn đa dạng.

Digg (Hình 2-6) và Google News (Hình 2-7) đều công khaiDòng tin tức. Mục đích và thiết kế của
chúng rất khác nhau, nhưng chúng có chung một số tính năng được nói đến trong mẫu này.
Digg hiển thị tất cả các mục đến trong một danh sách lớn; Google Tin tức tách chúng ra
 các mẫu37

thành các chủ đề, trong đó các bài báo mới nhất được hiển thị đầu tiên. (Đi sâu vào chủ đề sẽ hiển thị một
trang có một danh sách.) Cả hai đều hiển thị thông tin mục có thể so sánh được: tiêu đề, đoạn giới thiệu,
nguồn được liên kết và dấu thời gian tương đối. Họ sử dụng tên người: Digg hiển thị tên của người gửi,
trong khi Google Tin tức hiển thị tên tác giả bài báo. Và trên cả hai trang web, bạn có thể đánh dấu các mục
quan tâm—bằng cách “đào” trên một trang, đánh dấu sao cho trang kia—và chia sẻ chúng qua email.

đào
38Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Google Tin tức

Hai ví dụ trước cho thấy công chúngDòng tin tức; hai người tiếp theo thể hiện cá nhânTin tức
Dòng.

Các dịch vụ mạng xã hội, tập hợp tin tức và thông tin liên lạc cá nhân (chẳng hạn như email) cung cấp
nhiều ví dụ về cá nhânDòng tin tức. Trong Hình 2-8 và 2-9, chúng ta thấy Facebook và Google Reader,
một công cụ tổng hợp dựa trên RSS. Cả hai đều sử dụng một danh sách các mục theo trình tự thời
gian đảo ngược duy nhất, mỗi mục hiển thị nguồn, tiêu đề và đoạn giới thiệu được liên kết (khi thích
hợp), tên tác giả và dấu thời gian tương đối. Người dùng có thể “thích” các mục, chia sẻ chúng và theo
các liên kết để đọc thêm.

Nhưng lưu ý sự khác biệt, quá. Google Reader cho phép người dùng chia một luồng tổng hợp có khả
năng rất lớn thành các luồng phụ, dựa trên nguồn và chủ đề; chúng được hiển thị trong danh sách
cây có thể lựa chọn ở bên trái, do đó làm cho cửa sổ trở thành mộtBộ chọn hai bảng. Theo mặc định,
Facebook không cung cấp cho người dùng tùy chọn này. Thay vào đó, nó tự động (và không thể đoán
trước) chuyển đổi giữa chế độ xem “Tin bài hàng đầu” được lọc và chế độ xem “Gần đây nhất” hiển thị
mọi thứ. Tuy nhiên, Facebook vượt trội ở khả năng phản hồi ngay lập tức. Đăng một bình luận ngắn
cho một mục Facebook gần như dễ dàng như suy nghĩ về nó.
 các mẫu39

Facebook

người đọc Google

40Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Hai chế độ xem của iPhoto

Sử dụng hình thu nhỏ, chế độ xem mục và giao diện duyệt để tạo cấu trúc quen thuộc để
quản lý ảnh, video và các mục hình ảnh khác.

Mọi người sử dụng phần mềm của bạn để làm việc với các danh sách hoặc bộ sưu tập những thứ có hình
ảnh: ảnh, bản vẽ, video clip, v.v. Danh sách có thể nằm trong một trang web hoặc trong một ứng dụng hoặc
cả hai. Nó có thể cho phép chủ sở hữu nội dung chỉnh sửa hoặc đơn giản là nó có thể hiển thị nội dung cho
công chúng để duyệt, xem và nhận xét.

Đây là một phong cách riêng biệt của ứng dụng mà nhiều người nhận ra. Nó cũng là mộtbang hộicác mẫu
một tập hợp các mẫu được liên kết với nhau và hỗ trợ lẫn nhau theo những cách có thể dự đoán được. Một
khi ai đó nhìn thấy mộtLưới hình thu nhỏhình ảnh hoặc video trong ngữ cảnh phù hợp, cô ấy biết điều gì sẽ xảy
ra: duyệt qua, nhấp để xem, thiết lập trình chiếu hoặc danh sách phát, v.v.

Các mẫu và các thành phần khác thường đóng vai trò trong bang hội này bao gồm:

• Lưới hình thu nhỏ • Cây hoặc đường viền

• Xem chi tiết một cửa sổ • Chỉ bàn phím

• Bộ chọn hai bảng • ứng dụng chia sẻ

• Kim tự tháp • Hộp tìm kiếm

• Các tab vàTấm có thể gập lại • Bình luận xã hội và thảo luận
• Nhóm nút
 các mẫu41

Thiết lập hai chế độ xem chính: aLưới hình thu nhỏcủa các mục trong danh sách và chế độ xem lớn của một
mục. Người dùng sẽ qua lại giữa những điều này. Thiết kế một giao diện duyệt web và liên kết nó vớiLưới
hình thu nhỏđể cho phép người dùng khám phá một bộ sưu tập lớn một cách dễ dàng.

Sử dụng mẫu này để hiển thị một chuỗi các mục. NhiềuTrình quản lý ảnhhiển thị một lượng nhỏ siêu dữ liệu với mỗi
mục, chẳng hạn như tên tệp hoặc tác giả của mục đó, nhưng hãy cẩn thận vì điều này làm lộn xộn giao diện. Bạn
có thể cung cấp một điều khiển để điều chỉnh kích thước của hình thu nhỏ. Cũng có thể có một cách để sắp xếp các
mục theo các tiêu chí khác nhau, chẳng hạn như ngày, nhãn hoặc xếp hạng hoặc để lọc mục đó và chỉ hiển thị các
mục được gắn dấu sao (ví dụ).

Khi người dùng nhấp vào một mục, hãy hiển thị mục đó ngay lập tức trong chế độ xem một mục. Các
ứng dụng thường cho phép người dùng duyệt qua lưới bằng bàn phím—ví dụ: bằng các phím mũi tên
và phím cách. (XemChỉ bàn phímmẫu trong Chương 1.)

Nếu người dùng sở hữu các mục, hãy cung cấp các cách di chuyển, sắp xếp lại và xóa các mục ở cấp độ này
trong giao diện. Điều này có nghĩa là có một giao diện nhiều lựa chọn, chẳng hạn như Shift-select, hộp kiểm
hoặc xâu chuỗi một nhóm mục bằng con trỏ. Cắt, sao chép và dán cũng sẽ hoạt động trong các ứng dụng.

Bạn có thể cung cấp chức năng trình chiếu hoặc danh sách phát cho tất cả người dùng tạiLưới hình thu nhỏmức độ.

Hiển thị chế độ xem lớn của hình ảnh đã chọn (hoặc trình phát cho video). Hiển thị siêu dữ liệu—
thông tin về mục—bên cạnh mục đó. Chế độ xem này có thể nằm cạnhLưới hình thu nhỏnếu cửa sổ lớn
hoặc nó có thể thay thế khu vực được sử dụng bởi lưới. Trong thực tế, điều này có nghĩa là
lựa chọn giữa mộtBộ chọn hai bảngvà mộtXem chi tiết một cửa sổ. Xem Chương 5 để biết
các mẫu liên quan đến danh sách này.

Nếu giao diện là một trang web hoặc được kết nối với web, bạn có thể chọn cung cấp các tính năng xã
hội ở cấp độ này. Nhận xét, thích hoặc thích và chia sẻ có thể ở đây; xemứng dụng chia sẻvà các mẫu
khác trong Chương 9. Tương tự như vậy, việc gắn thẻ hoặc dán nhãn cũng có thể được thực hiện tại
đây, riêng tư hoặc công khai. Tính năng “các mặt hàng khác mà bạn có thể thích” đôi khi được tìm
thấy trong các bộ sưu tập công cộng dựa trên web.

Các tính năng chỉnh sửa cho các mục riêng lẻ cũng sẽ có ở đây. Chẳng hạn, trình quản lý ảnh có thể
cung cấp chức năng đơn giản như cắt xén, điều chỉnh màu sắc và độ sáng cũng như giảm mắt đỏ. Các
thuộc tính siêu dữ liệu cũng có thể được chỉnh sửa tại đây. Nếu trình chỉnh sửa đầy đủ quá phức tạp
để trình bày ở đây, hãy cung cấp cho người dùng cách khởi chạy trình chỉnh sửa “thực sự”. (Ví dụ:
Adobe Bridge cho phép người dùng khởi chạy Photoshop trên ảnh.) Sử dụngNhóm nútđể duy trì một
nhóm hình ảnh đơn giản, dễ hiểu của tất cả các tính năng này.

Liên kết mục này với mục trước đó và mục tiếp theo trong danh sách bằng cách cung cấp các nút
“trước” và “tiếp theo”, đặc biệt nếu bạn sử dụngXem chi tiết một cửa sổđể hiển thị chế độ xem một mục
(cũng yêu cầu nút “quay lại”). xemKim tự thápmô hình điều hướng trong Chương 3.
42Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

nội dung củaLưới hình thu nhỏnên được điều khiển bởi một giao diện duyệt web có thể phức
tạp, đơn giản hoặc gần như không tồn tại, tùy thuộc vào bản chất của ứng dụng.

Ở mức tối thiểu, hầu hết các giao diện phải cung cấp hộp tìm kiếm, để tìm kiếm các mục của người dùng riêng lẻ
hoặc để tìm kiếm tất cả các mục công khai (hoặc cả hai).

Các giao diện quản lý ảnh và video riêng tư—đặc biệt là các ứng dụng dành cho máy tính để bàn như Picasa và
iPhoto—nên cho phép người dùng duyệt qua hệ thống tệp để tìm hình ảnh được lưu trữ trong các thư mục khác
nhau. Nếu người dùng có thể nhóm các mục thành album, bộ, dự án hoặc các loại bộ sưu tập khác, thì những mục
này cũng sẽ có sẵn trong giao diện duyệt web. Hầu hết cũng cho phép ưu tiên hoặc gắn dấu sao cho các mục.

Hầu hết các ứng dụng và trang web hiển thị giao diện duyệt bên trên hoặc bên trái củaLưới hình thu nhỏ. Đối
với phần mềm có tính tương tác cao, chúng liên quan đến nhau như mộtBộ chọn hai bảng: khi người dùng
chọn một danh mục hoặc thư mục (hoặc nhập cụm từ tìm kiếm), nội dung ngay lập tức hiển thị trongLưới
hình thu nhỏbên cạnh giao diện duyệt web.

Bộ lọc đôi khi được tìm thấy ở đây. Adobe Bridge đặt các bộ lọc vào giao diện duyệt web của
nó; hơn 10 thuộc tính có thể được sử dụng để cắt qua một bộ sưu tập lớn các mục, bao gồm
từ khóa, ngày sửa đổi, loại máy ảnh và ISO.

Các trang web lưu trữ các bộ sưu tập công khai, chẳng hạn như YouTube và Flickr, đôi khi sử dụng
toàn bộ trang chủ làm giao diện duyệt. Các trang web như thế này phải đối mặt với một lựa chọn thú
vị: khi người dùng đã đăng nhập và “sở hữu” nội dung truy cập trang chủ, cô ấy nên xem bộ sưu tập
cá nhân của riêng mình hay nội dung nổi bật mà phần còn lại của công chúng nhìn thấy? Hoặc cả hai?

Picasa và Adobe Bridge, cùng với iPhoto (hiển thị trong Hình 2-10), là các ứng dụng máy tính để bàn
để quản lý các bộ sưu tập hình ảnh cá nhân. Giao diện trình duyệt của họ—tất cảBộ chọn hai bảng—
khác nhau về độ phức tạp từ thiết kế rất đơn giản của iPhoto cho đến nhiều bảng và bộ lọc của Adobe
Bridge. Sử dụng Picasa (Hình 2-11) và iPhotoXem chi tiết một cửa sổđể đạt được chế độ xem một mục,
trong khi Adobe Bridge (Hình 2-12) đặt cả ba chế độ xem cùng nhau trên một trang.
 các mẫu43

Hai chế độ xem của Picasa

Adobe Bridge, chứa tất cả các chế độ xem trong một cửa sổ phức tạp

Thiết kế của Flickr (Hình 2-13) đã bị bắt chước bởi nhiều bộ sưu tập hình ảnh và video dựa trên web
khác. Duyệt hình ảnh tại Flickr khác với duyệt trong một ứng dụng riêng tư, dựa trên máy tính để bàn
—bộ, nhóm, nhóm và bộ sưu tập công khai của người dùng là phương tiện để một người khám phá
vũ trụ Flickr. Các yếu tố xã hội cũng rất quan trọng đối với sức sống của Flickr. Nhưng bạn vẫn có thể
thấy mộtLưới hình thu nhỏ, đã đạt được chế độ xem một mục thông quaXem chi tiết một cửa sổ, chi tiết
mặt hàng, và mộtKim tự thápmẫu điều hướng (trước, tiếp theo, lên).
44Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Flickr

Ngay cả các trang web video phù hợp với mô hình này. Khi bạn xem kênh YouTube của ai đó, bạn có thể
chọn xem một trong haiLưới hình thu nhỏhoặc danh sách bên cạnh trình phát video (mặc định). (Cả hai tùy
chọn được hiển thị trong Hình 2-14.) Nhấp vào hình thu nhỏ sẽ đưa bạn đến trang dành cho video đó, nơi
thông tin chi tiết và thảo luận được hiển thị. Khách truy cập có thể duyệt bằng cách xem danh sách phát,
video mới nhất được thêm vào, video được xem nhiều nhất và video được xếp hạng cao nhất; một hộp tìm
kiếm cũng được cung cấp, vì nó ở khắp mọi nơi.

Kênh Sesame Street trên YouTube

Giao diện trình duyệt của TED phức tạp hơn (xem Hình 2-15). Trang chủ của nó cung cấp một đồ họa thông
tin có thể thay đổi linh hoạt được tạo thành từ các hình thu nhỏ có kích thước khác nhau. Bằng cách bật và
tắt các trường, khách truy cập có thể thu hẹp trường video và tìm những video họ muốn. Cuộn qua một
hình thu nhỏ cung cấp thông tin chi tiết về mục. Nhấp vào nó sẽ đưa bạn đến chế độ xem một mục, trông
rất giống với YouTube.
 các mẫu45

TED

Mẫu Trình duyệt ảnh tại Welie.com mô tả một số khía cạnh của Trình quản lý ảnh: http://

welie.com/patterns/showPattern.php?patternID=image-browsing

Fitbit
46Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Sắp xếp dữ liệu hiển thị thành một trang dày đặc thông tin, được cập nhật thường xuyên. Hiển thị cho người dùng
thông tin có liên quan, có thể thực hiện được và cho phép họ tùy chỉnh màn hình khi cần.

Trang web hoặc ứng dụng của bạn xử lý luồng thông tin đến từ dữ liệu máy chủ web
nào đó, trò chuyện xã hội, tin tức, chuyến bay, thông tin tình báo kinh doanh hoặc tài
chính chẳng hạn. Người dùng của bạn sẽ được hưởng lợi từ việc theo dõi liên tục thông
tin đó.

Đây là kiểu trang quen thuộc và dễ nhận biết. Trang tổng quan có một lịch sử lâu dài, cả
trực tuyến và trong thế giới thực, và mọi người có những kỳ vọng rõ ràng về cách họ làm
việc: họ hiển thị thông tin hữu ích, họ tự cập nhật, họ thường sử dụng đồ họa để hiển thị dữ
liệu, v.v.

Bảng điều khiển cũng là một nhóm các mẫu và thành phần lồng vào nhau. Nhiều trang tổng quan trực tuyến sử dụng những cách

này theo những cách có thể dự đoán được:

• Phần có tiêu đề • Danh sách và bảng các loại (xem

Chương 5)
• Các tab vàTấm có thể gập lại
• tấm di động • sọc hàng
• Đồ họa thông tin (xem Chương 7)
• Xem chi tiết một cửa sổ
• chú giải dữ liệu

Xác định những thông tin mà người dùng cần hoặc muốn xem. Điều này nghe có vẻ không đơn giản vì bạn
cần có con mắt biên tập—bạn không thể rải đầy màn hình những dữ liệu khó hiểu hoặc không quan trọng,
nếu không mọi người sẽ không thể chọn ra những phần quan trọng. Loại bỏ, hoặc ít nhất là không nhấn
mạnh, thông tin không giúp ích cho người dùng.

Sử dụng hệ thống phân cấp trực quan tốt (xem Chương 4) để sắp xếp danh sách, bảng và đồ họa
thông tin trên trang. Cố gắng giữ thông tin chính trên một trang, ít hoặc không cuộn, để mọi
người có thể giữ cửa sổ trên màn hình và xem mọi thứ trong nháy mắt. Nhóm dữ liệu liên quan
vàoPhần có tiêu đềvà chỉ sử dụng tab khi bạn tin rằng người dùng sẽ không cần xem nội dung tab
cạnh nhau.

Sử dụngXem chi tiết một cửa sổđể cho phép người dùng xem chi tiết bổ sung về dữ liệu—họ có thể
nhấp vào liên kết hoặc hình ảnh để tìm hiểu thêm.chú giải dữ liệuhoạt động tốt để hiển thị các
điểm dữ liệu riêng lẻ khi con trỏ cuộn qua đồ họa thông tin.
 các mẫu47

Chọn đồ họa thông tin phù hợp và được thiết kế tốt cho dữ liệu bạn cần hiển thị. Đồng hồ đo, mặt số,
biểu đồ hình tròn và biểu đồ thanh 3D trông đẹp mắt, nhưng chúng hiếm khi là cách tốt nhất để hiển
thị thông tin so sánh trong nháy mắt—biểu đồ thanh và đường đơn giản thể hiện dữ liệu tốt hơn, đặc
biệt là dữ liệu dựa trên thời gian. Khi số và văn bản phù hợp hơn đồ họa, hãy sử dụng danh sách và
bảng.sọc hànglà một mẫu phổ biến cho các bảng dữ liệu nhiều cột.

Mọi người sẽ cố gắng lấy thông tin có thể thực hiện được từ trang tổng quan trong nháy mắt mà
không cần nhìn kỹ vào mọi thành phần trên trang. Vì vậy, khi bạn hiển thị văn bản, hãy xem xét đánh
dấu các từ khóa và số để chúng nổi bật so với văn bản xung quanh.

Người dùng của bạn có thể tùy chỉnh màn hình bảng điều khiển của họ không? Nhiều trang tổng
quan cung cấp khả năng tùy chỉnh và người dùng của bạn có thể mong đợi điều đó. Một cách để tùy
chỉnh trang tổng quan là sắp xếp lại các phần—iGoogle và My Yahoo! cả hai cung cấptấm di độngcho
người dùng, ngoài việc chọn tiện ích nào được hiển thị.

Yahoo của tôi! là một bảng điều khiển kiểu cổng thông tin, hiển thị thông tin thời tiết, tin tức, email và các
thông tin được cá nhân hóa khác cho người dùng đã đăng nhập (xem Hình 2-17). Đây là loại cửa sổ mà ai đó
sẽ kiểm tra thường xuyên trong ngày hoặc trong tuần. Nó có thể được sắp xếp lại thông qua
tấm di độngvà người dùng có thể quyết định phần và tiện ích con nào sẽ hiển thị.

Yahoo của tôi!

 48Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Netvibes cung cấp các bảng điều khiển có thể tùy chỉnh hoàn toàn có thể kết nối với tìm kiếm trên
web trên diện rộng (xem Hình 2-18). Với điều này, ai đó có thể cập nhật các cuộc trò chuyện, hình ảnh
và bài viết về một chủ đề đang diễn ra nhanh chóng. Mẹo công cụ hiển thị một vài từ đầu tiên của bài
viết, có thể giúp người dùng quyết định xem có nhấp qua hay không.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Netvibe

Google Analytics giống với ví dụ về Fitbit hơn trong Hình 2-16 ở đầu mẫu. Google Analytics sử dụng đồ
họa thông tin để hiển thị ảnh chụp nhanh trực quan của hệ thống. Trong Hình 2-19, hệ thống là một
trang web và bảng điều khiển minh họa dữ liệu nhật ký.
 các mẫu49

Google Analytics

http://quince.infragistics.com/Patterns/Dashboard.aspx

http://patternry.com/p=information-dashboard/

Bảng điều khiển là một trong những bố cục màn hình RIA chuẩn được mô tả bởi Bill Scott và Theresa
Neil. Một bài báo trongTạp chí UXgiải thích các bố cục này:

http://www.uxmag.com/design/rich-internet-application-screen-design

Cuối cùng, bạn có thể quan tâm đến cuốn sách của Stephen Few,Thiết kế bảng điều
khiển thông tin: Giao tiếp dữ liệu trực quan hiệu quả (O'Reilly,http://oreilly.com/
catalog/9780596100162/).
50Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

photoshop CS5

Đặt một bảng màu mang tính biểu tượng bên cạnh một khung vẽ trống; người dùng nhấp vào các nút bảng màu để tạo
các đối tượng trên canvas.

Bạn đang thiết kế bất kỳ loại trình soạn thảo đồ họa nào. Một trường hợp sử dụng điển hình liên quan đến việc tạo các đối
tượng mới và sắp xếp chúng trên một số không gian ảo.
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu51

Cặp bảng điều khiển này—một bảng màu để tạo ra mọi thứ và một khung vẽ để đặt chúng trên
đó—phổ biến đến mức hầu hết mọi người dùng phần mềm máy tính để bàn đều đã nhìn thấy
nó. Đó là một ánh xạ tự nhiên từ các đối tượng vật lý quen thuộc đến thế giới ảo trên màn hình.
Và bảng màu tận dụng khả năng nhận dạng trực quan: các biểu tượng phổ biến nhất (cọ vẽ, bàn
tay, kính lúp, v.v.) được sử dụng lại nhiều lần trong các ứng dụng khác nhau, với cùng một ý
nghĩa mỗi lần.

Hiển thị một vùng trống lớn cho người dùng dưới dạng canvas. Nó có thể nằm trong cửa sổ riêng của
nó, như trong Photoshop (Hình 2-20), hoặc được nhúng trong một trang với các công cụ khác. Người
dùng chỉ cần xem canvas bên cạnh bảng màu. Đặt các công cụ bổ sung—bảng thuộc tính, mẫu màu,
v.v.—ở bên phải hoặc dưới cùng của khung vẽ, trong các cửa sổ hoặc bảng điều khiển nhỏ giống như
bảng màu.

Bản thân bảng màu phải là một mạng lưới các nút mang tính biểu tượng. Họ có thể có văn bản trong đó
nếu các biểu tượng quá khó hiểu; chẳng hạn, một số bảng trình tạo GUI liệt kê tên của các thành phần GUI
cùng với các biểu tượng của chúng. Visio cũng vậy, với các bảng cấu trúc hình ảnh phức tạp được điều chỉnh
cho các miền cụ thể. Nhưng sự hiện diện của các biểu tượng là cần thiết để người dùng nhận ra bảng màu
đó là gì.

Đặt bảng màu ở bên trái hoặc trên cùng của canvas. Nó có thể được chia thành các nhóm nhỏ, và bạn
có thể muốn sử dụngTab mô-đunhoặcTấm có thể gập lạitrình bày các nhóm con đó.

Hầu hết các nút bảng màu sẽ tạo đối tượng trong hình trên khung vẽ. Nhưng nhiều nhà xây dựng đã tích
hợp thành công những thứ khác, chẳng hạn như chế độ thu phóng và lassoing, vào bảng màu. Điều này bắt
đầu sớm; MacPaint đã trộn các chế độ của nó vào bảng màu của nó (xem Hình 2-24) và mọi người đã biết
chức năng của mũi tên, bàn tay và các biểu tượng khác.

Các cử chỉ được sử dụng để tạo các mục trên bảng màu thay đổi từ ứng dụng này sang ứng dụng khác. Một
số chỉ sử dụng kéo và thả; một số sử dụng một cú nhấp chuột vào bảng màu và một cú nhấp chuột vào
khung vẽ; và một số sử dụngChế độ một lần,Chế độ tải mùa xuân(xem ấn bản trước của cuốn sách này để biết
cả hai mẫu này) và các cử chỉ được thiết kế cẩn thận khác. Tôi luôn nhận thấy rằng việc kiểm tra khả năng sử
dụng trong lĩnh vực này là đặc biệt quan trọng, vì kỳ vọng của người dùng rất khác nhau.

Trình chỉnh sửa vectơ Raven (Hình 2-21), của Aviary và Sumo Paint (Hình 2-22) là hai trình chỉnh sửa đồ
họa dựa trên web tuân theo mô hình này một cách trung thực.
52Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

con quạ

sơn sumo
 các mẫu53

Adobe Flash Builder đặt bảng các thành phần Flex UI của nó ở phía dưới bên trái, như trong
Hình 2-23. Bên cạnh các biểu tượng, bảng màu hiển thị các nhãn văn bản làm rõ chính xác
loại thành phần nào sẽ được tạo cho mỗi mục bảng màu. Người dùng ứng dụng này được
coi là đủ kỹ năng để biết tên gần đúng của các thành phần họ cần. (Cũng được hiển thị là
thao tác kéo từ bảng màu sang canvas.)

Trình tạo flash

Quay ngược thời gian, chúng ta hãy xem một trong những giao diện phổ biến mẫu này:
MacPaint (xem Hình 2-24). Mô hình không thay đổi nhiều kể từ năm 1984—tất cả các yếu tố cơ
bản đều ở đó, trong cùng một cấu hình không gian được sử dụng bởi phần mềm hiện đại như
Photoshop. Trên thực tế, Photoshop và các trình tạo hình ảnh khác vẫn sử dụng nhiều biểu
tượng của MacPaint hơn 20 năm sau.
54Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

MacPaint, khoảng năm 1984

Bảng màu/Canvas là một trong những bố cục màn hình RIA chuẩn được mô tả bởi Bill Scott và
Theresa Neil. Một bài báo trongTạp chí UXgiải thích các bố cục này:

http://www.uxmag.com/design/rich-internet-application-screen-design

Hai bước đầu tiên của My Yahoo! thuật sĩ thiết lập

 các mẫu55

Dẫn dắt người dùng qua giao diện từng bước để thực hiện các tác vụ theo thứ tự quy định.

Bạn đang thiết kế một giao diện người dùng cho một nhiệm vụ dài hoặc phức tạp và nhiệm vụ đó thường sẽ
là điều mới lạ đối với người dùng—không phải là điều họ làm thường xuyên hoặc muốn có nhiều quyền
kiểm soát chi tiết (chẳng hạn như việc cài đặt gói phần mềm). Bạn chắc chắn rằng người thiết kế giao diện
người dùng sẽ biết nhiều hơn người dùng về cách tốt nhất để hoàn thành nhiệm vụ.

Các nhiệm vụ có vẻ phù hợp với cách tiếp cận này có xu hướng phân nhánh hoặc rất dài và tẻ nhạt—chúng
bao gồm một loạt các quyết định do người dùng đưa ra ảnh hưởng đến các lựa chọn tiếp theo.

Điều hấp dẫn là người dùngphảisẵn sàng từ bỏ quyền kiểm soát những gì xảy ra khi nào. Trong nhiều bối
cảnh, điều đó diễn ra tốt đẹp, vì việc đưa ra quyết định là một gánh nặng không mong muốn đối với những
người đang làm một số việc nhất định: “Đừng bắt tôi phải suy nghĩ, chỉ cần cho tôi biết phải làm gì tiếp
theo.” Hãy nghĩ về việc di chuyển qua một sân bay xa lạ—việc đi theo một loạt các biển báo thường dễ dàng
hơn là tìm ra cấu trúc tổng thể của sân bay. Bạn không cần tìm hiểu nhiều về cách sân bay được thiết kế,
nhưng bạn không quan tâm đến điều đó.

Nhưng trong các bối cảnh khác, nó phản tác dụng. Người dùng chuyên gia thường tìm thấypháp sưcứng nhắc và
hạn chế một cách bực bội. Điều này đặc biệt đúng đối với phần mềm hỗ trợ các quy trình sáng tạo như viết, nghệ
thuật hoặc viết mã. Nó cũng đúng với những người dùng thực sựLÀMmuốn tìm hiểu phần mềm;
pháp sưkhông hiển thị cho người dùng hành động của họ thực sự làm gì hoặc trạng thái ứng dụng nào bị thay đổi khi các

lựa chọn được thực hiện. Điều đó có thể gây phẫn nộ cho một số người. Biết rõ người dùng của bạn!

Phân chia và chinh phục. Bằng cách chia nhiệm vụ thành một chuỗi các phần, mỗi phần có thể được người
dùng xử lý trong một “không gian tinh thần” riêng biệt, bạn đã đơn giản hóa nhiệm vụ một cách hiệu quả.
Bạn đã sắp xếp một lộ trình định sẵn thông qua nhiệm vụ, do đó giúp người dùng không phải nỗ lực tìm ra
cấu trúc của nhiệm vụ—tất cả những gì anh ta cần làm là giải quyết lần lượt từng bước, tin tưởng rằng nếu
anh ta làm theo hướng dẫn, mọi việc sẽ ổn thỏa .

Nhưng chính nhu cầu về mộtThuật sĩchỉ ra rằng một nhiệm vụ có thể quá phức tạp. Nếu bạn có thể đơn giản hóa
một nhiệm vụ đến mức mà thay vào đó, một biểu mẫu ngắn hoặc một vài lần nhấp vào nút có thể thực hiện được
thủ thuật, thì đó là một giải pháp tốt hơn. (Hãy ghi nhớ, quá, rằngpháp sưđược coi là một chút bảo trợ trong một số
nền văn hóa châu Á.)
56Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Chia nhỏ các hoạt động cấu thành nhiệm vụ thành một loạt các phần hoặc nhóm các hoạt động.
Bạn có thể cần trình bày các nhóm này theo một trình tự chặt chẽ hoặc không; đôi khi chia nhỏ
nhiệm vụ thành các bước 1, 2, 3 và 4 để thuận tiện cũng có ích.

Phân tích theo chủ đề cho mua hàng trực tuyến có thể bao gồm các màn hình để lựa chọn sản phẩm,
thông tin thanh toán, địa chỉ thanh toán và địa chỉ giao hàng. Thứ tự trình bày không quan trọng lắm
vì các lựa chọn sau không phụ thuộc vào các lựa chọn trước đó. Đặt các lựa chọn liên quan lại với
nhau chỉ đơn giản hóa mọi thứ cho những người điền vào các biểu mẫu đó.

Bạn có thể quyết định chia nhỏ nhiệm vụ tại các điểm quyết định để các lựa chọn của người dùng có thể
thay đổi các bước tiếp theo một cách linh hoạt. Trong cài đặt phần mềmThuật sĩ, ví dụ: người dùng có thể
chọn cài đặt các gói tùy chọn yêu cầu nhiều lựa chọn hơn; nếu cô ấy chọn không thực hiện cài đặt tùy chỉnh,
các bước đó sẽ bị bỏ qua. Giao diện người dùng động rất tốt trong việc trình bày các tác vụ phân nhánh như
thế này, bởi vì người dùng không bao giờ phải nhìn thấy bất kỳ thứ gì không liên quan đến lựa chọn của
mình.

Trong cả hai trường hợp, phần khó của việc thiết kế loại giao diện người dùng này là tạo ra sự cân bằng
giữa kích thước của các khối và số lượng của chúng. Thật ngớ ngẩn khi có 2 bướcThuật sĩ, và 15 bước
Thuật sĩlà tẻ nhạt. Mặt khác, mỗi đoạn không nên quá lớn, nếu không bạn sẽ
mất đi một số lợi ích của mẫu này.

pháp sưtrình bày từng bước trong một trang riêng biệt, thường được điều hướng bằng các nút Quay lại và
Tiếp theo, là cách triển khai mẫu này rõ ràng và nổi tiếng nhất. Tuy nhiên, chúng không phải lúc nào cũng là
lựa chọn đúng đắn vì giờ đây mỗi bước là một không gian giao diện người dùng bị cô lập không hiển thị
ngữ cảnh—người dùng không thể nhìn thấy những gì diễn ra trước đó hoặc những gì diễn ra tiếp theo.
Nhưng một lợi thế của như vậypháp sưlà họ có thể dành trọn vẹn từng trang cho bước đó, bao gồm cả hình
ảnh minh họa và giải thích.

Nếu bạn làm điều này, hãy cho phép người dùng di chuyển qua lại theo ý muốn thông qua chuỗi
nhiệm vụ. Cung cấp một cách để người dùng lùi lại hoặc thay đổi ý định về lựa chọn trước đó. Ngoài
ra, nhiều giao diện người dùng hiển thị bản đồ có thể lựa chọn hoặc tổng quan về tất cả các bước,
nhận được một số lợi ích củaBộ chọn hai bảng. (Ngược lại với mô hình đó, mộtpháp sư
ngụ ý một thứ tự đã được quy định—ngay cả khi nó chỉ được gợi ý—trái ngược với truy cập hoàn toàn ngẫu
nhiên.)

Thay vào đó, nếu bạn chọn giữ tất cả các bước trên một trang, bạn có thể sử dụng một trong số các
mẫu từ Chương 4:

• Phần có tiêu đề, với những con số nổi bật trong tiêu đề. Điều này hữu ích nhất cho các tác vụ không

được phân nhánh nhiều, vì tất cả các bước có thể hiển thị cùng một lúc.

• Kích hoạt đáp ứng, trong đó tất cả các bước đều có trên trang, nhưng mỗi bước vẫn bị vô hiệu
hóa cho đến khi người dùng hoàn thành bước trước đó.
 các mẫu57

• tiết lộ đáp ứng, trong đó bạn đợi để hiển thị một bước trên giao diện người dùng cho đến khi người
dùng hoàn thành bước trước đó. Cá nhân, tôi nghĩ rằng đây là cách thanh lịch nhất để thực hiện một
đoạn ngắnThuật sĩ. Nó năng động, nhỏ gọn và dễ sử dụng.

Mặc định tốt(từ Chương 8) đều hữu ích cho dù bạn sắp xếp các bước như thế nào. Nếu người dùng sẵn
sàng chuyển giao quyền kiểm soát quy trình cho bạn, rất có thể cô ấy cũng sẵn sàng để bạn chọn các
giá trị mặc định hợp lý cho các lựa chọn mà cô ấy có thể không quan tâm lắm, chẳng hạn như vị trí cài
đặt phần mềm.

Yahoo của tôi! ví dụ trong Hình 2-25 minh họa nhiều đặc điểm tốt của một
Thuật sĩ. Nó sử dụng kỹ thuật “hộp đèn” để tập trung sự chú ý vào các hộp thoại phương thức; nó đặt
ra một cách rõ ràngBản đồ trình tự(Chương 3) về các bước để hiển thị cho người dùng điều gì sẽ xảy ra;
nó ngắn gọn, dễ sử dụng và trực quan thú vị; và nó có nút Hủy ở phía trên bên phải, như mộtLối thoát
từ toàn bộ sự việc.

Hộp thoại thêm ngân hàng của Mint (xem Hình 2-26) không sử dụng chuỗi các bước được đánh số và cũng
không sử dụng nút Tiếp theo cố định. Nhưng nó vẫn có những gì tinh túy nhấtThuật sĩchất lượng hướng dẫn
người dùng qua một loạt các bước tương đối phức tạp, mỗi lần một màn hình. Ngoài ra, danh sách các bước
ở phía bên trái (không thể nhấp vào) cung cấp cho người dùng cái nhìn tổng quan về những gì mong đợi.

Trình hướng dẫn thêm ngân hàng của Mint

58Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Các nhà thiết kế Microsoft Office đã loại bỏ nhiều tính năng của nó.pháp sư, nhưng một số còn lại và vì
lý do chính đáng. Nhập dữ liệu vào Excel là một nhiệm vụ khó hiểu. Trình hướng dẫn Nhập khẩu (xem
Hình 2-27) là một ứng dụng truyền thống, kiểu cũThuật sĩvới các nút Quay lại/Tiếp theo, phân nhánh và
không có bản đồ trình tự. Nhưng nó đã có tác dụng. Mỗi màn hình cho phép bạn tập trung vào bước
hiện tại mà không phải lo lắng về bước tiếp theo.

Trình hướng dẫn nhập dữ liệu Excel

http://ui-patterns.com/patterns/Wizard http://www.welie.com/patterns/

showPattern.php?patternID=wizard http://patternry.com/p=one-page-

wizard/

http://patternry.com/p=multiple-page-wizard/ http://

quince.infragistics.com/Patterns/Wizard.aspx

Thuật sĩ là một trong những bố cục màn hình RIA chính tắc được mô tả bởi Bill Scott và Theresa Neil.
Một bài báo trongTạp chí UXgiải thích các bố cục này:

http://www.uxmag.com/design/rich-internet-application-screen-design
 các mẫu59

Tùy chọn hệ thống Mac OS

Cung cấp một trang hoặc cửa sổ độc lập, dễ tìm, nơi người dùng có thể thay đổi cài đặt, tùy
chọn hoặc thuộc tính. Chia nội dung thành các tab hoặc trang riêng biệt nếu bạn cần quản
lý số lượng lớn cài đặt.

Bạn đang thiết kế bất kỳ ứng dụng hoặc công cụ nào sau đây hoặc thứ gì đó tương tự:

• Một ứng dụng có các tùy chọn trên toàn ứng dụng.

• Hệ điều hành, thiết bị di động hoặc nền tảng có các tùy chọn trên toàn hệ thống.

• Trang web hoặc ứng dụng mà người dùng phải đăng nhập—người dùng sẽ cần chỉnh sửa tài khoản và
hồ sơ của họ.

• Một công cụ mở để tạo tài liệu hoặc các sản phẩm công việc phức tạp khác. Người dùng
có thể cần thay đổi thuộc tính của tài liệu, đối tượng trong tài liệu hoặc mục khác.

• MỘTcấu hình sản phẩm,cho phép mọi người tùy chỉnh một sản phẩm trực tuyến.
(Tuy nhiên, đây thực sự là một mẫu khác với các yêu cầu và ràng buộc hơi khác.
Xem mẫu Trình cấu hình sản phẩm tạihttp://www.welie.com/patterns/
showPattern.php?patternID=product-configurator.)

Mặc dù cả hai đều sử dụng các hình thức, mộtTrình chỉnh sửa cài đặtkhác biệt với mộtThuật sĩvà nó có những
yêu cầu rất đặc biệt. Người dùng phải có khả năng tìm và chỉnh sửa thuộc tính mong muốn mà không bị
buộc phải thực hiện theo trình tự các bước đã định—việc truy cập ngẫu nhiên là rất quan trọng.
60Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Để hỗ trợ khả năng tìm thấy, các thuộc tính nên được nhóm thành các danh mục được dán nhãn rõ ràng và
có ý nghĩa ngay lập tức.

Một khía cạnh quan trọng khác củaTrình chỉnh sửa cài đặtthiết kế là mọi người sẽ sử dụng nó để xem
các cài đặt hiện có chứ không chỉ thay đổi chúng. Thiết kế cần truyền đạt các giá trị của các cài đặt đó
trong nháy mắt.

Người dùng có kinh nghiệm có kỳ vọng cao đối với trình chỉnh sửa tùy chọn, cài đặt tài khoản và hồ sơ người dùng
ở những nơi quen thuộc và hành xử theo những cách quen thuộc. Phá vỡ những kỳ vọng trong tình trạng nguy
hiểm của riêng bạn!

Đầu tiên, làm cho nó có thể tìm thấy. Hầu hết các nền tảng, cả thiết bị di động và máy tính để bàn, đều có một vị trí
tiêu chuẩn để tìm các tùy chọn trên toàn ứng dụng—hãy tuân theo các quy ước và đừng cố tỏ ra quá thông minh.
Tương tự như vậy, các trang web nơi mọi người đăng nhập thường đặt liên kết đến cài đặt tài khoản và hồ sơ nơi
tên người dùng được hiển thị, thường ở góc trên bên phải hoặc góc bên trái.

Thứ hai, nhóm các thuộc tính thành các trang và đặt tên cho các trang đó để dễ đoán nội dung
trên đó. (Đôi khi tất cả các thuộc tính hoặc cài đặt nằm gọn trong một trang, nhưng không
thường xuyên.) Các bài tập sắp xếp thẻ với người dùng đại diện có thể giúp bạn tìm ra các danh
mục và tên của chúng. Một số lượng quá lớn các thuộc tính có thể yêu cầu phân cấp nhóm ba
hoặc bốn cấp, nhưng hãy cẩn thận để người dùng không cảm thấy khó chịu khi phải nhấp 53 lần
để đến được các thuộc tính thường cần.

Thứ ba, quyết định cách trình bày các trang này. tab,Bộ chọn hai bảng, VàXem chi tiết một cửa sổ(
Chương 5) với một trang mở rộng “menu” trên trang đầu dường như là bố cục phổ biến
nhất choTrình chỉnh sửa cài đặt.

Bản thân thiết kế của các biểu mẫu xứng đáng có cả một chương. Xem Chương 8 để biết các mẫu và kỹ thuật được
sử dụng trong các biểu mẫu.

Cuối cùng, bạn có nên áp dụng ngay các thay đổi mà người dùng thực hiện hoặc cung cấp các nút Lưu và
Hủy không? Điều đó có thể phụ thuộc vào loại cài đặt bạn đang làm việc. Cài đặt toàn nền tảng dường như
được áp dụng ngay lập tức khi thay đổi; cài đặt trên các trang web chủ yếu sử dụng nút Lưu; và các tùy chọn
và cài đặt ứng dụng có thể thực hiện theo một trong hai cách. Nó có thể không phải là một vấn đề lớn về
khả năng sử dụng trong mọi trường hợp. Thực hiện theo một quy ước đã được thiết lập nếu có hoặc xem
công nghệ cơ bản yêu cầu những gì; kiểm tra nó với người dùng nếu bạn vẫn còn câu hỏi mở.

Windows 7 cung cấp “số lượng thuộc tính cực kỳ lớn” yêu cầu hệ thống phân cấp sâu
của các trang. Ảnh chụp màn hình trong Hình 2-29 minh họa hành trình từ đỉnh của
Trình chỉnh sửa cài đặtxuống trang cho phép bạn thay đổi chủ đề máy tính để bàn. (Còn một cấp độ nữa—nếu
bạn muốn thay đổi các biểu tượng trên màn hình nền hoặc một số thứ khó hiểu khác, bạn cần khởi chạy
hộp thoại từ một liên kết trên màn hình cuối cùng.)
 các mẫu61

Tuy nhiên, các nhà thiết kế đã giảm thiểu một số vấn đề bằng hệ thống phân cấp sâu. Chẳng hạn, họ đặt một danh
sách các lối tắt trên trang cấp cao nhất; đây có lẽ là những mục mà người dùng tìm kiếm thường xuyên nhất. Họ
đặt một hộp tìm kiếm ở trên cùng và có thể nhấp đượcvụn bánh mìbên cạnh nó. Và bằng cách đặt danh sách các
mặt hàng ở hai cấp độ cao nhất, họ cho người dùng biết mặt hàng nào thuộc danh mục nào.

Trình chỉnh sửa cài đặt Windows 7

62Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Yahoo! (Hình 2-30) và Facebook (Hình 2-31) đều sử dụng các tab để trình bày các trang của trình
chỉnh sửa hồ sơ của họ. Yahoo! ví dụ thực sự là hai cấp độ; xem các tab trên đầu trang.

Yahoo! cài đặt cấu hình

Cài đặt hồ sơ Facebook

 các mẫu63

Amazon có một liên kết duy nhất cho tất cả thông tin liên quan đến tài khoản: “Tài khoản của bạn” (xem
Hình 2-32). Cái nàyTrang thực đơn(Chương 3) liệt kê các cài đặt tài khoản cùng với thông tin đặt hàng, quản lý
thẻ tín dụng, nội dung kỹ thuật số và thậm chí cả hoạt động của cộng đồng và danh sách mong muốn. Tổ
chức trang rõ ràng, chặt chẽ thật tuyệt vời—nếu tôi có bất kỳ câu hỏi nào về điều gì đang xảy ra với mối
quan hệ của tôi với Amazon, tôi biết tôi có thể tìm thấy nó ở đâu đó trên trang này. (Trái ngược điều này với
Facebook, vốn có thói quen che khuất một số thông tin hồ sơ nhất định đằng sau thiết kế phức tạp.)

Cài đặt tài khoản Amazon

64Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

bản đồ Google

Cho phép người dùng chọn trong số các chế độ xem thay thế khác biệt đáng kể so với chế độ xem
mặc định.

Bạn đang xây dựng thứ gì đó để xem hoặc chỉnh sửa một tài liệu phức tạp, danh sách, trang web, bản
đồ hoặc nội dung khác. Có thể bạn đã cung cấp một số khả năng tùy chỉnh—cỡ chữ, ngôn ngữ, thứ tự
sắp xếp, mức thu phóng, v.v.—nhưng những thay đổi nhẹ đó không đủ xa để đáp ứng tất cả những
điều mọi người thường làm với nó.

Bạn có thể phải đối mặt với các yêu cầu thiết kế xung đột trực tiếp với nhau. Bạn không thể tìm
cách hiển thị cả bộ tính năng A và bộ tính năng B cùng một lúc, vì vậy bạn cần thiết kế riêng biệt
cả hai và cho phép người dùng chọn giữa chúng.

Hãy cố gắng hết sức có thể, không phải lúc nào bạn cũng có thể đáp ứng tất cả các tình huống sử
dụng có thể có trong một thiết kế. Ví dụ: việc in thường gặp vấn đề đối với các trang web vì các yêu
cầu hiển thị thông tin khác nhau—chẳng hạn như các gizmos điều hướng và tương tác nên được loại
bỏ và nội dung còn lại được định dạng lại để phù hợp với giấy in.

Có một số lý do khác choChế độ xem thay thế:

• Người dùng có sở thích liên quan đến tốc độ, phong cách trực quan và các yếu tố khác.

• Người dùng có thể cần tạm thời xem dữ liệu qua một “lăng kính” hoặc quan điểm khác
để hiểu rõ hơn về một vấn đề. Hãy xem xét một người dùng bản đồ chuyển đổi giữa
chế độ xem thông tin đường phố và thông tin địa hình (xem Hình 2-33 ở trên cùng của
mẫu).
 các mẫu65

• Ví dụ: nếu người dùng đang chỉnh sửa bản trình chiếu hoặc trang web, anh ta có thể thực hiện hầu hết việc
chỉnh sửa của mình trong khi sử dụng chế độ xem “cấu trúc” của tài liệu, chứa bộ điều khiển chỉnh sửa, điểm
đánh dấu cho nội dung ẩn, hướng dẫn bố cục, ghi chú riêng tư, v.v. . Nhưng đôi khi anh ta sẽ muốn xem tác
phẩm như một người dùng cuối sẽ nhìn thấy nó.

Chọn một vài tình huống sử dụng mà chế độ hoạt động bình thường của ứng dụng hoặc trang web không thể dễ
dàng phục vụ. Thiết kế các dạng xem chuyên biệt cho các tình huống đó và trình bày chúng dưới dạng các lựa
chọn thay thế trong cùng một cửa sổ hoặc màn hình.

Trong các chế độ xem thay thế này, một số thông tin có thể được thêm vào và một số thông tin có thể
bị loại bỏ, nhưng nội dung cốt lõi ít nhiều vẫn giữ nguyên. Một cách phổ biến để chuyển chế độ xem
là thay đổi cách hiển thị danh sách; công cụ tìm tệp trong cả Windows và Mac OS cho phép
người dùng chuyển từ danh sách sangLưới hình thu nhỏĐẾNbàn câyĐẾNXếp tầng danh sáchĐẾNbăng chuyền, vì
ví dụ.
Ví dụ: nếu bạn cần loại bỏ giao diện—để máy in hoặc trình đọc màn hình sử dụng, hãy xem
xét việc loại bỏ nội dung phụ, thu nhỏ hoặc loại bỏ hình ảnh và loại bỏ tất cả điều hướng trừ
điều hướng cơ bản nhất.

Đặt một “công tắc” cho chế độ ở đâu đó trên giao diện chính. Nó không cần phải nổi bật; PowerPoint
và Word từng đặt các nút chế độ ở góc dưới bên trái, đây là vị trí dễ bị bỏ qua trên bất kỳ giao diện
nào. Hầu hết các ứng dụng đại diện cho các chế độ xem thay thế bằng các nút mang tính biểu tượng.
Đảm bảo rằng bạn cũng có thể dễ dàng chuyển về chế độ xem mặc định. Khi người dùng chuyển đổi
qua lại, hãy giữ nguyên tất cả trạng thái hiện tại của ứng dụng—các lựa chọn, vị trí của người dùng
trong tài liệu, các thay đổi chưa được cam kết, thao tác hoàn tác/làm lại, v.v.—bởi vì việc mất chúng sẽ
khiến người dùng ngạc nhiên.

Các ứng dụng “nhớ” người dùng của họ thường giữ lại lựa chọn chế độ xem thay thế của người dùng từ lần sử
dụng này sang lần sử dụng tiếp theo. Nói cách khác, nếu người dùng quyết định chuyển sang chế độ xem thay thế,
ứng dụng sẽ chỉ sử dụng chế độ xem đó theo mặc định vào lần tới. Các trang web có thể làm điều này bằng cách
sử dụng cookie; các ứng dụng máy tính để bàn có thể theo dõi các tùy chọn của mỗi người dùng; một ứng dụng
trên thiết bị di động có thể chỉ cần nhớ chế độ xem mà nó đã sử dụng vào lần cuối cùng nó được gọi. Các trang
web có thể có tùy chọn triển khaiChế độ xem thay thếnhư các trang CSS thay thế. Ví dụ, đây là cách một số trang web
chuyển đổi giữa các trang thông thường và các trang chỉ in.

Trong Hình 2-34 và 2-35, hai trình soạn thảo đồ họa, Microsoft PowerPoint và Adobe Illustrator, hiển thị các
góc nhìn khác nhau về một sản phẩm công việc. Trong bản trình chiếu, người dùng thường chỉnh sửa từng
trang một cùng với các ghi chú của nó, nhưng đôi khi người dùng cần xem tất cả các trang chiếu được trình
bày trên một bảng ảo. (Không được hiển thị là dạng xem thứ ba, trong đó PowerPoint chiếm lấy màn hình
và thực sự phát bản trình chiếu.) Trong ví dụ về trang web, Illustrator hiển thị một “đường viền”
66Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

chế độ xem các đối tượng đồ họa trong tài liệu—hữu ích nhất nếu bạn có nhiều đối tượng phức tạp và
nhiều lớp—và chế độ xem bình thường, được hiển thị đầy đủ của tác phẩm nghệ thuật. Chế độ xem phác
thảo tăng tốc công việc đáng kể.

Chế độ xem thay thế PowerPoint

Chế độ xem thay thế Illustrator

Các trang web tin tức và blog thường hiển thị nhiều “phần bổ sung” ở bên lề xung quanh một bài báo,
nhiều trong số đó là hoạt ảnh hoặc tương tác. Nhưng một số trang web cung cấp chế độ xem bản in
một cách thận trọng—một phiên bản của bài báo không có nội dung bổ sung nào. Định dạng đơn
giản và thương hiệu là tối thiểu. Ví dụ trong Hình 2-36 là của CNN.
 các mẫu67

Trang web CNN và lượt xem bản in của một bài báo

http://quince.infragistics.com/Patterns/Alternative%20Views.aspx
68Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Cửa sổ và tab Firefox

Sử dụng nhiều tab, nhóm tab và cửa sổ cấp cao nhất để người dùng có thể xem nhiều trang, dự án,
tệp hoặc ngữ cảnh cùng một lúc. Hãy để người dùng đặt các không gian làm việc này cạnh nhau nếu
có thể.

Bạn đang xây dựng một ứng dụng xem hoặc chỉnh sửa bất kỳ loại nội dung nào—trang web, tài
liệu, hình ảnh hoặc toàn bộ dự án bao gồm nhiều tệp.

Các nhà thiết kế của các trang web thông thường thường không cần phải suy nghĩ về điều này.
Tất cả các trình duyệt phổ biến đều cung cấp các triển khai hoàn hảo cho mẫu này, sử dụng các
tab và cửa sổ trình duyệt (như trong Hình 2-37 ở trên cùng của mẫu).

Ứng dụng có cấu trúc tổ chức trung tâm là cá nhânDòng tin tứccó thể không cần
Nhiều không gian làm việc, hoặc. Ứng dụng email khách, trang Facebook cá nhân, v.v. chỉ hiển thị mộtDòng tin tứcđiều

đó quan trọng đối với người dùng; nhiều cửa sổ không thêm nhiều giá trị. Điều đó đang được nói, các ứng dụng
email thường cho phép người dùng khởi chạy nhiều email trong các cửa sổ khác nhau. Một số ứng dụng Twitter có
thể hiển thị một số luồng được lọc cạnh nhau—chẳng hạn như chúng có thể hiển thị nguồn cấp dữ liệu dựa trên
tìm kiếm, sau đó là nguồn cấp dữ liệu từ danh sách tùy chỉnh, sau đó là nguồn cấp dữ liệu của các tin nhắn lại phổ
biến. (Xem ví dụ về TweetDeck trong Hình 2-38.)

Mọi người đa nhiệm. Họ đi chệch hướng, từ bỏ dòng suy nghĩ, ngừng làm việc ở nhiệm vụ A để
chuyển sang nhiệm vụ B, và cuối cùng quay trở lại với thứ mà họ đã bỏ dở. Bằng cách này hay cách
khác, chúng sẽ đa nhiệm, vì vậy bạn cũng có thể hỗ trợ nó trực tiếp bằng một giao diện được thiết kế
tốt để thực hiện điều đó.
 các mẫu69

So sánh song song giữa hai hoặc nhiều mặt hàng có thể giúp mọi người tìm hiểu và hiểu rõ hơn. Cho
phép người dùng kéo các trang hoặc tài liệu cạnh nhau lên mà không cần phải chuyển ngữ cảnh từ
trang này sang trang khác một cách vất vả.

Mẫu này hỗ trợ trực tiếp một số mẫu Chương 1, chẳng hạn nhưBộ nhớ tương lai(người dùng có thể để
một cửa sổ mở như một lời nhắc nhở bản thân để hoàn thành một việc gì đó) vàthăm dò an toàn
(vì không mất phí mở thêm không gian làm việc trong khi vẫn để nguyên không gian làm
việc ban đầu).

Chọn một hoặc nhiều cách để hiển thị nhiều không gian làm việc. Nhiều ứng dụng nổi tiếng sử
dụng như sau:

• Thẻ
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

• Cửa sổ hệ điều hành riêng biệt

• Cột hoặc bảng trong cửa sổ
• Chia cửa sổ, với khả năng điều chỉnh các bộ chia một cách tương tác

Nếu bạn xử lý nội dung khá đơn giản trong mỗi không gian làm việc—chẳng hạn như tệp văn bản, danh sách hoặcDòng tin
tức—các cửa sổ hoặc bảng phân chia hoạt động tốt. Nội dung phức tạp hơn có thể đảm bảo toàn bộ trang tab hoặc cửa sổ

của riêng chúng để người dùng có thể nhìn thấy một khu vực lớn hơn cùng một lúc.

Các trường hợp phức tạp nhất mà tôi từng thấy liên quan đến môi trường phát triển cho toàn bộ dự
án viết mã. Khi một dự án được mở, người dùng có thể đang xem một số tệp mã, biểu định kiểu, cửa
sổ lệnh (nơi chạy trình biên dịch và các công cụ khác), đầu ra hoặc tệp nhật ký hoặc thậm chí là trình
chỉnh sửa trực quan. Điều này có nghĩa là có thể mở nhiều cửa sổ hoặc bảng điều khiển cùng một lúc.

(Và sau đó, có lẽ, người dùng có thể tạm thời chuyển sang một dự án khác, với một bộ tệp và
trình chỉnh sửa đang mở khác! Một số môi trường phát triển có thể hỗ trợ điều đó.)

Khi người dùng đóng một số trình duyệt web, chẳng hạn như Chrome, tập hợp không gian làm việc (tất cả
các trang web đang mở, trong tab và cửa sổ) sẽ tự động được lưu để sử dụng sau này. Sau đó, khi người
dùng khởi động lại trình duyệt, toàn bộ tập hợp các trang web đã mở trước đó của cô ấy sẽ được khôi phục,
gần như khi cô ấy rời khỏi nó. Điều này đặc biệt tốt khi trình duyệt hoặc máy bị lỗi. Cân nhắc thiết kế theo
tính năng này vì nó sẽ là một sự tử tế đối với người dùng của bạn.

TweetDeck là mộtDòng tin tức–loại ứng dụng có thể hiển thị nhiều luồng cùng một lúc: nguồn cấp dữ
liệu Twitter được lọc, nguồn không phải Twitter, v.v. Ví dụ trong Hình 2-38 hiển thị một số cột
TweetDeck điển hình. Điều này duy trì tinh thần của mộtDòng tin tứcbằng cách giữ tất cả các bản cập
nhật hiển thị cùng một lúc; nếu các cột này nằm trong các tab hoặc cửa sổ khác nhau, người dùng sẽ
không thể xem tất cả các cập nhật khi chúng xảy ra.
70Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

TweetDeck

Trên màn hình di động nhỏ, bạn không có chỗ để hiển thị bất cứ thứ gì cạnh nhau. Safari trên iPhone
đã giải quyết vấn đề này bằng cách cho phép người dùng mở tối đa tám trang web cùng một lúc, sau
đó sử dụng mộtbăng chuyềnđể xáo trộn giữa chúng (xem Hình 2-39). Người dùng vuốt sang phải và
trái để đến các cửa sổ khác.

Cửa sổ trình duyệt Safari trên iPhone

 các mẫu71

Đầu vào Truyền thống

lời nhắc danh sách trợ giúp Chú giải công cụ truy vấn trợ giúp

nội dung cụ thể

giúp đỡ

Trực tuyến

tài nguyên

Nhiều loại trợ giúp trong Excel

Sử dụng kết hợp các kỹ thuật trợ giúp nhẹ và nặng để hỗ trợ người dùng với các nhu cầu khác
nhau.

Bạn đang thiết kế một ứng dụng phức tạp. Một số người dùng có thể cần một hệ thống trợ giúp chính thức, nhưng bạn
biết rằng hầu hết người dùng sẽ không dành thời gian để sử dụng nó. Bạn cũng muốn hỗ trợ người dùng thiếu kiên nhẫn
hoặc không thường xuyên trong phạm vi có thể. Đặc biệt, bạn có thể cần điều chỉnh thiết kế của mình cho người dùng từ
trung cấp đến chuyên gia—nhưng bạn sẽ giúp người mới bắt đầu trở thành chuyên gia như thế nào?

Người dùng của hầu hết mọi tạo phẩm phần mềm cần các mức hỗ trợ khác nhau cho các tác vụ mà họ
đang cố gắng hoàn thành. Ai đó tiếp cận nó lần đầu tiên (hoặc lần đầu tiên sau một thời gian) cần sự
hỗ trợ khác với người sử dụng nó thường xuyên. Ngay cả trong số những người dùng lần đầu, vẫn tồn
tại những khác biệt lớn về mức độ cam kết và phong cách học tập. Một số người muốn đọc hướng
dẫn, một số thì không; hầu hết thấy mẹo công cụ hữu ích, nhưng một số ít thấy chúng khó chịu.
72Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Các văn bản trợ giúp được cung cấp ở nhiều cấp độ cùng một lúc—ngay cả khi chúng trông không giống “hệ thống
trợ giúp” truyền thống—đến được với mọi người cần chúng. Nhiều kỹ thuật trợ giúp tốt đặt văn bản trợ giúp ở nơi
dễ tiếp cận, nhưng không phải lúc nào cũng trực tiếp trước mặt người dùng, vì vậy người dùng không cảm thấy
khó chịu. Tuy nhiên, các kỹ thuật cần phải quen thuộc với người dùng của bạn. Nếu họ không để ý hoặc mở một
Bảng điều khiển có thể thu gọn, chẳng hạn, họ sẽ không bao giờ nhìn thấy những gì bên trong nó.

Tạo trợ giúp ở nhiều cấp độ, bao gồm một số (nhưng không nhất thiết là tất cả) các loại trợ giúp trong
danh sách sau. Hãy nghĩ về nó như một sự liên tục: mỗi cái đòi hỏi nhiều nỗ lực hơn từ người dùng so
với cái trước, nhưng có thể cung cấp thông tin chi tiết và nhiều sắc thái hơn.

• Chú thích và hướng dẫn trực tiếp trên trang, bao gồm các mẫu nhưGợi ý đầu vào
VàDấu nhắc đầu vào(cả hai đều được tìm thấy trong Chương 8). Hãy cẩn thận đừng quá nhiệt tình với họ. Nếu được thực hiện

một cách ngắn gọn, những người dùng thường xuyên sẽ không bận tâm đến chúng, nhưng đừng sử dụng toàn bộ đoạn văn

bản—rất ít người dùng sẽ đọc chúng.

• Mẹo dụng cụ. Sử dụng chúng để hiển thị các mô tả ngắn gọn, một hoặc hai dòng về các tính năng giao diện
không hiển nhiên. Đối với các tính năng chỉ có biểu tượng, các mẹo về công cụ là rất quan trọng; người dùng
có thể thực hiện ngay cả những biểu tượng vô nghĩa nếu cuộn qua cho biết biểu tượng làm gì! (Tất nhiên, tôi
không khuyên bạn nên thiết kế biểu tượng kém.) Nhược điểm của mẹo công cụ là chúng ẩn bất cứ thứ gì bên
dưới chúng và một số người dùng không thích chúng luôn xuất hiện.
Thời gian trễ ngắn khi di chuột—ví dụ: một hoặc hai giây—loại bỏ yếu tố khó
chịu đối với hầu hết mọi người.
• Công cụ di chuột(Chương 6). Chúng có thể hiển thị các mô tả dài hơn một chút, được hiển thị động khi
người dùng chọn hoặc cuộn qua các thành phần giao diện nhất định. Dành riêng các khu vực trên
trang cho việc này, thay vì sử dụng một mẹo công cụ nhỏ.

• Các văn bản trợ giúp dài hơn có bên trongTấm có thể gập lại(xem Chương 4).

• Tài liệu giới thiệu, chẳng hạn như màn hình tĩnh giới thiệu, chuyến tham quan có hướng dẫn và video. Khi một
người dùng mới bắt đầu ứng dụng hoặc dịch vụ lần đầu tiên, những tài liệu này có thể ngay lập tức định
hướng cho anh ta những bước đầu tiên (xemSự hài lòng tức thìmẫu trong Chương 1). Người dùng cũng có thể
quan tâm đến các liên kết để trợ giúp tài nguyên. Cung cấp một công tắc bật tắt để tắt phần giới thiệu—
người dùng cuối cùng sẽ không còn thấy nó hữu ích nữa—và cung cấp một cách để quay lại phần giới thiệu
đó ở nơi khác trong giao diện, trong trường hợp người dùng muốn quay lại và đọc nó sau.

• Trợ giúp được hiển thị trong một cửa sổ riêng, thường ở dạng HTML thông qua trình duyệt, nhưng đôi
khi trong WinHelp hoặc Mac Help. Tài nguyên trợ giúp thường là sách hướng dẫn trực tuyến—toàn bộ
sách—có được thông qua các mục menu trên menu Trợ giúp hoặc từ các nút Trợ giúp trên hộp thoại
và trang HTML.

• Hỗ trợ kỹ thuật “trực tiếp”, thường qua email, Web, Twitter hoặc điện thoại.
 các mẫu73

• Hỗ trợ cộng đồng không chính thức. Điều này chỉ áp dụng cho phần mềm được đầu tư và sử dụng nhiều
nhất—chẳng hạn như Photoshop, Linux, Mac OS X hoặc MATLAB—nhưng người dùng có thể coi đó là
một tài nguyên có giá trị cao. Sử dụng các tài nguyên mạng xã hội cho các diễn đàn trực tuyến truyền
thống này hoặc nhiều hơn nữa.

Firefox “chỉ đơn thuần” là một trình duyệt web và miễn phí, nhưng hệ thống trợ giúp của nó rất xuất
sắc. Trợ giúp được cung cấp ở hầu hết các cấp độ được mô tả trong danh sách trước, vì vậy cả người
mới bắt đầu và chuyên gia đều được hỗ trợ tốt. Tất cả các ví dụ sau đều đến từ Firefox để bạn có thể
thấy phạm vi trợ giúp có thể được cung cấp cho một sản phẩm.

Khi bạn truy cập trang web của Firefox để tải xuống trình duyệt, bạn sẽ được chào đón bởi một phác
thảo về quá trình cài đặt và lời kêu gọi hành động rất rõ ràng, như trong Hình 2-41.

Trang tải Firefox

Khi bạn khởi chạy nó lần đầu tiên, bạn sẽ thấy một màn hình giới thiệu có thể gây tò mò cho người dùng: các cách
dễ dàng để tùy chỉnh giao diện Firefox, các kết nối với phương tiện truyền thông xã hội và các liên kết đến các tài
nguyên trợ giúp (xem Hình 2-42). Trang này cũng xác nhận với người dùng rằng quá trình cài đặt đã thành công;
nếu người dùng cần làm gì thêm, chẳng hạn như nhận các bản cập nhật bảo mật, thì trang giới thiệu sẽ cho biết
như vậy.
74Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Trang khởi động Firefox

Mỗi công cụ trên cửa sổ trình duyệt có một mẹo công cụ (xem Hình 2-43). Các nút quay lại, tiếp
theo, tải lại, về nhà cơ bản—sẽ quen thuộc với hầu hết người dùng, nhưng có thể cần giải thích
các mục khó hiểu hơn.

Mẹo công cụ Firefox

Các trường văn bản chính sử dụngLời nhắc đầu vàođể mô tả bản thân (xem Hình 2-44). Đây là
sự lựa chọn phù hợp hơn so vớiGợi ý đầu vào(sẽ được hiển thị bên cạnh các trường văn bản)
vì nó giữ cho cửa sổ sạch sẽ và gọn gàng. Hơn nữa, không có nhiều kiến thức bị mất khi
người dùng bắt đầu nhập vào trường văn bản, xóa dấu nhắc. Xem các mô tả mẫu choGợi ý
đầu vàoVàDấu nhắc đầu vàotrong Chương 8.
 các mẫu75

Lời nhắc đầu vào của Firefox

Một số hộp thoại cố gắng tự mô tả, như trong Hình 2-45.

Hộp thoại thanh công cụ của Firefox

Các hộp thoại khác cung cấp liên kết đến hệ thống trợ giúp chính thức; một trang trợ giúp phù hợp
được hiển thị trong cửa sổ trình duyệt khi người dùng nhấp vào nút tròn màu tím ở góc dưới bên trái
(xem Hình 2-46 và 2-47).

Hộp thoại tùy chọn Firefox

76Chương 2: Tổ chức Nội dung: Kiến trúc Thông tin và Cấu trúc Ứng dụng

Trang trợ giúp hộp thoại tùy chọn Firefox

Cuối cùng, nếu tất cả các nguồn trợ giúp khác đã cạn kiệt, người dùng có thể chuyển sang cộng đồng người
dùng rộng lớn hơn để được tư vấn. Giờ đây, chúng tôi đã vượt ra ngoài lĩnh vực thiết kế phần mềm, nhưng
đây vẫn là thiết kế sản phẩm—trải nghiệm người dùng vượt ra ngoài các bit được cài đặt trên máy tính của
người dùng. Nó bao gồm các tương tác mà họ có với tổ chức, nhân viên của tổ chức hoặc các đại diện khác
và trang web của tổ chức (xem Hình 2-48).

Việc xây dựng cộng đồng như thế này chỉ diễn ra đối với những sản phẩm mà người dùng quan
tâm sâu sắc, có lẽ vì họ sử dụng sản phẩm hàng ngày tại nơi làm việc hoặc ở nhà—như trường
hợp của Firefox—hoặc vì họ có một số tình cảm gắn bó với sản phẩm đó.

Diễn đàn hỗ trợ Firefox

Các mẫu trong chương này giải quyết vấn đề điều hướng. Làm cách nào để người dùng biết
họ đang ở đâu, đi đâu tiếp theo và làm thế nào để đến đó từ đây?

Tôi gọi điều hướng là một “vấn đề” vì điều hướng xung quanh một trang web hoặc ứng dụng cũng giống
như đi lại. Bạn phải làm điều đó để đến được nơi bạn cần đến, nhưng điều đó thật buồn tẻ, đôi khi khiến
bạn bực bội và thời gian cũng như năng lượng bạn dành cho nó dường như bị lãng phí. Bạn không thể làm
điều gì đó tốt hơn với thời gian của mình, chẳng hạn như chơi trò chơi hoặc hoàn thành một số công việc
thực tế?

Loại đi lại tốt nhất là không có gì cả. Có mọi thứ bạn cần ngay trong tầm tay mà không cần phải
đi đâu đó khá thuận tiện. Tương tự như vậy, việc giữ hầu hết các công cụ “trong tầm tay” trên
một giao diện rất tiện lợi, đặc biệt đối với người dùng từ trung cấp đến chuyên gia (tức là những
người đã biết vị trí của mọi thứ). Đôi khi bạn cần đặt các công cụ ít sử dụng hơn trên các màn
hình riêng biệt, nơi chúng không làm lộn xộn mọi thứ; đôi khi bạn cần nhóm nội dung vào các
trang khác nhau để giao diện có ý nghĩa. Tất cả điều này đều ổn, miễn là “khoảng cách” mà
người dùng phải di chuyển vẫn còn ngắn.

Vì vậy, ít hơn là tốt hơn. Hãy nói về thuật ngữ trong một phút và quay lại khái niệm này.

Giả sử bạn đã xây dựng một trang web hoặc ứng dụng lớn mà bạn phải chia thành các phần, phần
phụ, công cụ chuyên dụng, trang, cửa sổ, trình hướng dẫn, v.v. Làm thế nào để bạn giúp người dùng
điều hướng?

Biển chỉ dẫnlà các tính năng giúp người dùng tìm ra môi trường xung quanh ngay lập tức. Các biển
chỉ dẫn phổ biến bao gồm tiêu đề trang và cửa sổ, logo trang web và các thiết bị xây dựng thương
hiệu khác, tab và chỉ báo lựa chọn. Các mẫu và kỹ thuật như điều hướng toàn cầu và cục bộ tốt
liên kết cổng,Bản đồ trình tự,vụn bánh mì, VàThanh cuộn được chú thích—tất cả được mô tả trong này
chương—cho người dùng biết vị trí hiện tại của họ và thường là vị trí họ có thể đến chỉ với một bước nhảy nữa. Chúng giúp người

dùng duy trì trạng thái “được tìm thấy” và lập kế hoạch cho các bước tiếp theo của mình.
78Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

tìm đườnglà những gì mọi người làm khi họ tìm đường hướng tới mục tiêu của họ. Thuật ngữ này khá dễ
hiểu. Nhưng cách mọi người thực sự làm điều đó là một chủ đề nghiên cứu khá thú vị—các chuyên gia từ
khoa học nhận thức, thiết kế môi trường và thiết kế trang web đã nghiên cứu về nó. Những tính năng thông
thường này giúp người dùng tìm đường:

biển báo tốt

Các nhãn rõ ràng, rõ ràng dự đoán những gì bạn đang tìm kiếm và cho bạn biết phải đi đâu; các dấu
hiệu là nơi bạn mong đợi chúng ở đó và bạn không bao giờ bị bỏ lại ở điểm quyết định mà không có
hướng dẫn. Bạn có thể kiểm tra điều này bằng cách đi qua vật phẩm bạn đang thiết kế và đi theo
đường dẫn của tất cả các trường hợp sử dụng chính. Đảm bảo rằng mỗi điểm mà người dùng phải
quyết định nơi tiếp theo sẽ được ký tên hoặc dán nhãn thích hợp. Sử dụng “kêu gọi hành động” mạnh
mẽ trên các trang đầu tiên mà người dùng nhìn thấy.

manh mối môi trường

Chẳng hạn, bạn sẽ tìm phòng vệ sinh ở phía sau nhà hàng hoặc cổng nơi lối đi cắt ngang
hàng rào. Tương tự như vậy, bạn sẽ tìm nút đóng “X” ở trên cùng bên phải của hộp thoại
phương thức và các biểu trưng ở góc trên bên trái của trang web. Hãy nhớ rằng những
manh mối này thường được xác định theo văn hóa và ai đó mới tiếp cận với nền văn hóa đó
(ví dụ: ai đó chưa từng sử dụng hệ điều hành nào trước đây) sẽ không biết về chúng.

bản đồ
Đôi khi mọi người đi từ dấu hiệu này sang dấu hiệu khác hoặc liên kết này sang liên kết khác mà không bao
giờ thực sự biết họ đang đi đâu trong một hệ quy chiếu lớn hơn. (Nếu bạn đã từng tìm đường đi qua một sân
bay xa lạ, thì đó có thể là điều bạn đã làm.) Nhưng một số người có thể thích hình dung trong đầu về toàn bộ
không gian, đặc biệt nếu họ thường xuyên ở đó. Ngoài ra, trong các không gian có mật độ xây dựng hoặc ký
hiệu kém, chẳng hạn như các khu dân cư đô thị, bản đồ có thể là công cụ hỗ trợ điều hướng duy nhất mà
mọi người có.

Trong chương này, cácXóa điểm đầu vàomẫu là một ví dụ về các biển báo cẩn thận kết hợp với các
gợi ý về môi trường—các liên kết phải được thiết kế sao cho nổi bật trên trang. MỘT
Bản đồ trình tự, rõ ràng, là một bản đồ; bạn có thể dùngTổng quan Cộng với Chi tiết(Chương 7) để hiển thị bản
đồ cho không gian ảo.Bảng điều khiển phương thứcđủ tiêu chuẩn để trở thành manh mối về môi trường, vì lối
thoát khỏi bảng điều khiển phương thức sẽ đưa bạn trở lại ngay vị trí ban đầu.

Tôi đã so sánh không gian ảo với không gian thực ở đây. Nhưng không gian ảo có khả năng duy nhất để
cung cấp một con át chủ bài điều hướng, một thứ mà không gian vật lý chưa thể (chưa) cung cấp:
Lối thoát. Dù bạn đang ở đâu, hãy nhấp vào liên kết đó và bạn sẽ quay lại một trang quen thuộc. Nó giống
như mang theo một lỗ sâu đục với bạn. Hoặc một đôi dép hồng ngọc.

Khi bạn bước vào một căn phòng xa lạ, bạn nhìn xung quanh. Trong một tích tắc của giây, bạn
hình dung căn phòng, đồ đạc, ánh sáng, lối ra và những manh mối khác; rất nhanh chóng, bạn
đưa ra một số giả định về căn phòng này là gì và nó liên quan như thế nào đến lý do tại sao
 Chi phí Điều hướng79

bạn bước vào. Sau đó, bạn cần phải làm những gì bạn bước vào để làm. Ở đâu? Làm sao? Bạn có
thể trả lời ngay lập tức—hoặc không. Hoặc có thể bạn chỉ bị phân tâm bởi những điều thú vị
khác trong phòng.

Tương tự như vậy, mở một trang web hoặc mở một cửa sổ sẽ gây ra chi phí nhận thức. Một lần nữa, bạn
cần tìm ra không gian mới này: bạn nắm bắt hình dạng, bố cục, nội dung, lối ra của nó và cách thực hiện
những gì bạn phải làm. Tất cả điều này cần năng lượng và thời gian. "Chuyển đổi ngữ cảnh" buộc bạn phải
tập trung lại sự chú ý của mình và điều chỉnh theo môi trường xung quanh mới.

Ngay cả khi bạn đã quen thuộc với cửa sổ (hoặc căn phòng) mà bạn vừa bước vào, nó vẫn phát sinh
chi phí. Chi phí không lớn, nhưng nó cộng lại—đặc biệt là khi bạn tính toán thời gian thực tế cần thiết
để hiển thị một cửa sổ hoặc tải một trang.

Điều này đúng cho dù bạn đang xử lý các trang web, cửa sổ ứng dụng, hộp thoại hay màn hình thiết
bị. Các quyết định mà người dùng đưa ra về nơi sẽ đến là tương tự nhau—các nhãn vẫn cần được đọc
hoặc các biểu tượng được giải mã và người dùng vẫn sẽ tin tưởng bằng cách nhấp vào các liên kết
hoặc nút mà họ không chắc chắn.

Hơn nữa, thời gian tải ảnh hưởng đến quyết định của mọi người. Nếu người dùng nhấp qua một trang mất
quá nhiều thời gian để tải—hoặc tải không thành công—anh ấy có thể nản lòng và có thể đóng trang trước
khi tìm thấy thứ mình cần. (Vậy trình phát video thanh bên đó tiêu tốn của bạn bao nhiêu người xem?)
Ngoài ra, nếu các trang của một trang web mất nhiều thời gian để tải, người dùng sẽ ít có khả năng khám
phá trang web đó hơn.

Có một lý do khiến các công ty như Google làm việc rất chăm chỉ để giữ cho trang tải nhanh nhất có thể: độ
trễ khiến người xem phải trả giá.

Biết rằng có một chi phí liên quan đến việc nhảy từ trang này sang trang khác, bây giờ bạn có thể hiểu
tại sao điều quan trọng là phải giữ số lần nhảy đó xuống. Khi một tác vụ thông thường yêu cầu nhiều
lần nhảy trang, hãy cố gắng giảm xuống còn một hoặc hai lần.

Nhưng hiệu quả đạt được thực sự đến từ cấu trúc của ứng dụng. Một trong những điều tồi tệ nhất mà
một nhà thiết kế có thể làm là buộc người dùng phải truy cập vào nhiều cấp độ trang con, hộp thoại,
v.v. mỗi khi anh ta cần hoàn thành một nhiệm vụ đơn giản hàng ngày. (Tệ hơn là dẫn anh ta đến đó,
nói với anh ta rằng anh ta không thể hoàn thành nó vì thiếu một số điều kiện tiên quyết, và đưa anh
ta trở lại ô vuông.)

Bạn có thể thiết kế ứng dụng của mình sao cho 80% trường hợp sử dụng phổ biến nhất có thể được thực hiện trong một

trang mà không có bất kỳ chuyển ngữ cảnh nào không? (Hoặc có lẽ chỉ một?)

Điều này khó thực hiện với một số loại ứng dụng. Là một công cụ nào đó quá lớn để đặt trên trang chính
của bạn? Hãy thử thu nhỏ nó: loại bỏ các điều khiển, rút ngắn nhãn, chuyển từ thành hình ảnh hoặc sử
dụng các điều khiển biểu mẫu chuyên dụng để tiết kiệm dung lượng. Có quá mất tập trung khi kết hợp với
mọi thứ khác trên trang chính không? Một lần nữa, hãy thử thu nhỏ nó, cô lập nó bằng khoảng trắng hoặc
đặt nó ở một vị trí khác. Bạn có thể sử dụng công bố lũy tiến để dần dần hiển thị nhiều nội dung hơn trên
cùng một trang không? Bạn có thể sử dụngTab mô-đunhoặc mộtđàn phong cầmđể ẩn một số nội dung theo
mặc định?
80Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Đôi khi, thật thích hợp để ẩn chức năng bên trong các trang cần nhiều lần nhảy để truy cập, chẳng
hạn như 20% nhiệm vụ bổ sung còn lại từ 80% mà bạn đã cung cấp dễ dàng. Cũng có thể là trong ứng
dụng của bạn, sự đơn giản trong cách trình bày quan trọng hơn là tiết kiệm một hoặc hai bước nhảy.
Bạn có thể đặt chức năng ít sử dụng đằng sau một “cánh cửa” phụ (cũng sử dụng quy tắc 80/20). Như
mọi khi, hãy thử nghiệm với các thiết kế khác nhau và kiểm tra khả năng sử dụng của chúng nếu bạn
có bất kỳ nghi ngờ nào.

cái gìmô hình điều hướngcho trang web hoặc ứng dụng của bạn? Nói cách khác, làm cách nào để các màn hình (hoặc
trang hoặc không gian) khác nhau liên kết với nhau và làm cách nào để người dùng di chuyển giữa chúng?

Đầu tiên, một số thuật ngữ hơn.

điều hướng toàn cầulà những gì được tìm thấy trên mọi màn hình chính. Nó thường có dạng menu, tab và/
hoặc thanh bên và đây là cách người dùng di chuyển xung quanh cấu trúc điều hướng chính thức của trang
web. (Trong phiên bản trước của cuốn sách này, điều hướng toàn cầu được định nghĩa là một khuôn mẫu.
Nhưng hiện nay, nó đã quá phổ biến và được hiểu rõ đến mức nó thực sự không cần phải được gọi như vậy
nữa.)

điều hướng tiện ích,cũng được tìm thấy trên mọi màn hình chính, chứa các liên kết và công cụ liên quan đến các
khía cạnh không có nội dung của trang web hoặc ứng dụng: đăng nhập, trợ giúp, in,Trình chỉnh sửa cài đặt(xem
Chương 2), các công cụ ngôn ngữ, v.v.

liên kếtVàđiều hướng nội tuyếnnhúng liên kết trong hoặc gần nội dung thực tế. Khi người dùng
đọc hoặc tương tác với trang web, các liên kết này đưa ra các tùy chọn có thể liên quan ngay đến
người dùng. Họ liên kết nội dung với nhau theo chủ đề.

Bây giờ, hãy xem xét một số mô hình được tìm thấy trong các trang web và ứng dụng điển hình:

trung tâm và nói

Thường thấy nhất trên thiết bị di động, kiến trúc này (Hình 3-1) liệt kê tất cả các phần chính của trang
web hoặc ứng dụng trên màn hình chính hoặc “trung tâm”. Người dùng nhấp hoặc chạm vào chúng,
thực hiện những gì cô ấy cần làm và quay lại trung tâm để đi đến một nơi khác. Các màn hình “có nan
hoa” tập trung chặt chẽ vào công việc của chúng, sử dụng không gian cẩn thận—chúng có thể không
có chỗ để liệt kê tất cả các màn hình chính khác. Màn hình chính của iPhone là một ví dụ điển hình; các
Trang thực đơnmẫu được tìm thấy trên một số trang web là một mẫu khác.

trung tâm và nói

 Mô hình điều hướng81

kết nối đầy đủ

Nhiều trang web theo mô hình này. Có một trang chủ hoặc màn hình, nhưng nó và mọi trang khác liên
kết với tất cả các trang khác—mỗi trang đều có tính năng điều hướng chung, chẳng hạn như menu
trên cùng. Điều hướng chung có thể là một cấp độ duy nhất (như trong Hình 3-2, chỉ có năm trang),
hoặc nó có thể sâu và phức tạp, với nhiều cấp độ và nội dung được chôn sâu. Miễn là người dùng có
thể truy cập bất kỳ trang nào từ bất kỳ trang nào khác chỉ bằng một bước nhảy, thì nó được kết nối
đầy đủ.

kết nối đầy đủ

đa cấp
Điều này cũng phổ biến giữa các trang web (xem Hình 3-3). Các trang chính được kết nối đầy đủ với
nhau, nhưng các trang con chỉ được kết nối với nhau (và thường là với các trang chính khác, thông qua
điều hướng chung). Bạn đã thấy điều này trên các trang web có các trang con chỉ được liệt kê trong
thanh bên hoặc tab phụ—người dùng nhìn thấy những trang này trên menu chỉ hiển thị sau khi họ đã
nhấp vào liên kết cho trang hoặc danh mục chính. Phải mất hai lần nhảy trở lên để chuyển từ trang
con tùy ý này sang trang con khác. Sử dụng trình đơn thả xuống,thực đơn béohoa văn, hoặcSơ đồ trang
webmẫu với một trang web đa cấp sẽ chuyển đổi nó thành một trang được kết nối đầy đủ, điều này tốt
hơn.

đa cấp
82Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

từng bước
Trình chiếu, quy trình xử lý vàpháp sư(xem Chương 2) hướng dẫn người dùng từng bước
qua các màn hình theo trình tự quy định (xem Hình 3-4). Các liên kết Quay lại/Tiếp theo nổi
bật trên trang.

từng bước

Kim tự tháp

Một biến thể của mô hình từng bước, kim tự tháp sử dụng trang trung tâm hoặc trang menu để liệt kê toàn
bộ chuỗi các mục hoặc trang con ở một nơi (xem Hình 3-5). Người dùng chọn bất kỳ mục nào, chuyển đến
mục đó và sau đó có tùy chọn sử dụng liên kết Quay lại/Tiếp theo để duyệt qua các mục khác theo thứ tự.
Anh ấy có thể quay lại trang trung tâm bất cứ lúc nào. xemKim tự thápmô hình trong chương này để biết
thêm.

Kim tự tháp

Xoay và thu phóng

Một số đồ tạo tác được thể hiện tốt nhất dưới dạng không gian lớn duy nhất, không phải nhiều không
gian nhỏ. Bản đồ, hình ảnh lớn, tài liệu văn bản lớn, đồ họa thông tin và biểu diễn phương tiện dựa
trên thời gian (chẳng hạn như âm thanh và video) thuộc loại này. Chương 7 thảo luận chi tiết hơn về
những điều này. Xoay và thu phóng vẫn là điều hướng—vì vậy hãy cung cấp các điều khiển để xoay (di
chuyển theo chiều ngang hoặc chiều dọc), phóng to và thu nhỏ cũng như đặt lại vị trí và trạng thái đã
biết. Hình 3-6 cho thấy một ví dụ về pan-and-zoom.

Xoay và thu phóng

 Mô hình điều hướng83

điều hướng phẳng

Một số loại ứng dụng cần ít hoặc không cần điều hướng. Coi nhưBảng màu Canvas Pluscác ứng
dụng như Photoshop hoặc các ứng dụng phức tạp khác như Excel—những ứng dụng này cung
cấp rất nhiều công cụ và chức năng có thể dễ dàng tiếp cận thông qua menu, thanh công cụ và
bảng màu. Các công cụ không hoạt động ngay lập tức khi làm việc có thể được truy cập thông
quaBảng phương thứchoặc tiến triển từng bước. Các loại ứng dụng này dường như khác biệt về
chất so với các kiểu điều hướng khác được liệt kê ở đây: người dùng luôn biết mình đang ở đâu,
nhưng có thể không dễ dàng tìm thấy các công cụ mình cần do có quá nhiều tính năng có sẵn
cùng một lúc.

bảng điều khiển phương thức

Thao tác này đưa người dùng đến một màn hình không có tùy chọn điều hướng nào ngoài việc xác nhận thông báo,
hoàn thành biểu mẫu hoặc nhấp vào bảng điều khiển (Hình 3-7). Bảng điều khiển phương thức thường hiển thị theo
lớp trên cùng của toàn màn hình hoặc trang và được sử dụng cho các tác vụ nhỏ, tập trung đòi hỏi sự chú ý đầy đủ
của người dùng. xemBảng điều khiển phương thứcmô hình để thảo luận thêm.

bảng điều khiển phương thức

Xóa điểm vào

Làm cách nào để người dùng biết bắt đầu từ đâu trong một trang web hoặc ứng dụng phức tạp? CácXóa điểm đầu vào

mô hình chỉ cho anh ta nơi cần đi đầu tiên (xem Hình 3-8). Đối với những người dùng lần đầu và không
thường xuyên, nó sẽ loại bỏ một số gánh nặng khi tìm hiểu trang web.

MỘT

b
Xóa điểm vào
84Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Dấu trang
Dấu trang (Hình 3-9), liên kết cố định, liên kết sâu vàNhà nước liên kết sâulà tất cả các cách để người dùng điều
hướng thuận tiện đến một điểm mà anh ta chọn, bất cứ lúc nào anh ta muốn, ngay cả khi nó nằm sâu bên
trong một cấu trúc điều hướng. Những điều này cho anh ta một cách để tránh đi qua nhiều liên kết để đến
một trang hoặc trạng thái mong muốn.

http://

Dấu trang

Lối thoát
Khi người dùng bị vướng vào một ứng dụng một cách vô vọng, rơi vào trạng thái lỗi hoặc được
liên kết sâu vào một trang mà anh ta không có ngữ cảnh để hiểu, anh ta cần một lối thoát (Hình
3-10), một liên kết được gắn nhãn rõ ràng để quay lại một nơi được biết đến. xemLối thoát
mẫu.

Lối thoát

Có ba điều cần lưu ý về các mô hình điều hướng này. Đầu tiên là chúng kết hợp và kết hợp—một ứng
dụng hoặc trang web có thể kết hợp một số trong số này, đặc biệt làBảng điều khiển phương thức,
Xóa điểm đầu vào, dấu trang vàLối thoát, rất cục bộ và không ảnh hưởng đến chiến lược điều
hướng trên toàn trang web.

Điều thứ hai là một số cơ chế này thực sự hạn chế các tùy chọn điều hướng của người dùng. Hầu hết
thời gian, truy cập mở và nhảy ngắn là những điều tốt. Nhưng khi người dùng đang xem trình chiếu
toàn màn hình, cô ấy không muốn thấy một menu điều hướng chung phức tạp! Cô ấy chỉ muốn tập
trung vào bản trình chiếu, vì vậy, các nút điều khiển Quay lại/Tiếp theo và mộtLối thoátlà tất cả những
gì cần thiết. Sự hiện diện của các tùy chọn điều hướng đầy đủ không phải là không có chi phí: nó
chiếm dung lượng, làm lộn xộn màn hình, phát sinh tải nhận thức và báo hiệu cho người dùng rằng
việc rời khỏi trang không thành vấn đề.
 Quy ước thiết kế cho trang web85

Thứ ba, tất cả các cơ chế và mẫu này có thể được hiển thị trên màn hình theo nhiều cách khác nhau. Một trang web hoặc
ứng dụng phức tạp có thể sử dụng tab hoặc menu hoặc chế độ xem dạng cây của thanh bên để hiển thị điều hướng
chung trên mỗi trang—đó là điều bạn không cần phải quyết định cho đến khi bắt đầu bố trí trang. Tương tự như vậy, bảng
điều khiển phương thức có thể được thực hiện bằng hộp đèn hoặc hộp thoại phương thức thực tế—nhưng bạn có thể trì
hoãn điều đó cho đến khi bạn biết điều gì cần là phương thức và điều gì không.

Thiết kế trực quan có thể xuất hiện muộn hơn trong quá trình thiết kế, sau kiến trúc thông tin và các
mô hình điều hướng.

Việc tách mô hình điều hướng khỏi thiết kế trực quan của nó là một điều tốt. Làm như vậy có thể
giúp bạn suy nghĩ linh hoạt và thận trọng hơn về cách tự thiết kế các trang. Nhưng các trang
web có một số quy ước nhất định về vị trí trực quan của các tính năng điều hướng và có lẽ không
khôn ngoan nếu bỏ qua chúng.

Điều hướng chung hầu như luôn được hiển thị ở trên cùng hoặc bên trái của trang web, đôi khi
cả hai. Hiếm khi, nó có thể được tìm thấy ở bên phải—vị trí này có thể gây ra sự cố với kích thước
trang và cuộn ngang, trừ khi nhà thiết kế sử dụngbố trí chất lỏng(xem Chương 4).

Hai cách tiếp cận tương đối mới đối với điều hướng toàn cầu được tìm thấy trongthực đơn béoVàSơ đồ trang web
hoa văn. Trong đó, toàn bộ cấu trúc của một trang web có thứ bậc được trình bày cho người dùng xem, với
chi phí là không gian màn hình ở đầu trang hoặc chân trang. Như đã giải thích trước đó, các mẫu này biến
mô hình điều hướng đa cấp thành một mô hình được kết nối đầy đủ.

Khi khách truy cập của một trang web thường là thành viên đã đăng nhập, trang web đó có thể cung cấp một tập hợp các
liên kết điều hướng tiện ích ở góc trên bên phải của nó. Người dùng có xu hướng tìm kiếm ở đó các công cụ liên quan đến
sự hiện diện của họ trên trang web: cài đặt tài khoản, hồ sơ người dùng, đăng xuất, trợ giúp, v.v. xemCông cụ đăng nhập
mẫu để biết thêm.

Một hình thức phổ biến củađiều hướng kết hợp—khi các liên kết được nhúng trong hoặc gần nội dung, việc liên
kết các mục với nhau theo chủ đề—là phần hoặc bảng điều khiển "Bài viết có liên quan". Các trang web tin tức và
blog sử dụng điều này rất nhiều: khi người dùng đọc một bài viết, thanh bên hoặc chân trang sẽ hiển thị các bài
viết khác nói về các chủ đề tương tự hoặc được viết bởi cùng một tác giả.

Các thẻ, cả do người dùng xác định và do hệ thống xác định, có thể giúp hỗ trợ điều hướng liên kết và các
bài viết hoặc liên kết có liên quan. Các đám mây thẻ hỗ trợ khả năng tìm kiếm theo chủ đề trên một số trang
web, đặc biệt là khi số lượng bài báo rất lớn và các chủ đề chi tiết. (Trên các trang web và blog nhỏ hơn,
chúng không hoạt động tốt.) Một kỹ thuật điều hướng phổ biến hơn là liệt kê các thẻ của bài viết ở cuối; mỗi
thẻ là một liên kết dẫn đến toàn bộ các bài viết chia sẻ thẻ đó.

Khi một trang web tận dụng lợi thế của phương tiện truyền thông xã hội, thậm chí nhiều tùy chọn điều hướng sẽ
xuất hiện. Mặt trước của một trang web có thể có mộthộp tin tức, liên kết người dùng với các mục được đăng gần
đây nhất.Bảng xếp hạng nội dunghiển thị các phần được chia sẻ hoặc nhận xét thường xuyên nhất, trong khitrò
chuyện gần đâyhướng người dùng đến các cuộc hội thoại đang diễn ra. Vàđường liên kết mạng xã hộiVàTiện ích chia sẻ

kết nối người dùng trực tiếp với các dịch vụ truyền thông xã hội. Xem Chương 9 để biết các mẫu này.
86Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Tóm lại, chương này nói về một số khía cạnh của điều hướng: cấu trúc hoặc mô hình tổng
thể, biết bạn đang ở đâu, tìm ra nơi bạn đang đến và đến đó một cách hiệu quả.

Tập hợp các mẫu đầu tiên đề cập đến mô hình điều hướng và ít nhiều độc lập với bố
cục màn hình:
1.Xóa điểm đầu vào
2.Trang thực đơn

3.Kim tự tháp

4.Bảng điều khiển phương thức

5.Nhà nước liên kết sâu

6.Lối thoát
Kết hợp bố cục và mô hình trên các trang web thông thường, chúng tôi nhận được các mẫu sau:

7.thực đơn béo

số 8.Sơ đồ trang web

9.Công cụ đăng nhập

Một số mẫu tiếp theo hoạt động tốt như biển chỉ dẫn “Bạn đang ở đây” (cũng như một bảng chỉ dẫn toàn cầu được thiết kế tốt

dẫn đường).Bản đồ trình tự,vụn bánh mì, VàThanh cuộn được chú thíchcũng đóng vai trò tương tác
bản đồ nội dung.Thanh cuộn được chú thíchđược dành nhiều hơn cho các mô hình xoay và thu phóng hơn là
cho nhiều trang được kết nối với nhau.

10.Bản đồ trình tự
11.vụn bánh mì
12.Thanh cuộn được chú thích

chuyển đổi hoạt hìnhgiúp người dùng luôn được định hướng khi họ di chuyển từ nơi này sang nơi khác. Đó là một thủ thuật đánh

lừa thị giác, không hơn không kém, nhưng nó rất hiệu quả trong việc duy trì cảm giác của người dùng về vị trí của anh ta và những

gì đang xảy ra.

13.chuyển đổi hoạt hình

 các mẫu87

MỘT

b
Xóa sơ đồ điểm đầu vào

Chỉ trình bày một số điểm vào chính trong giao diện; làm cho chúng định hướng nhiệm vụ và mô tả.
Sử dụng lời kêu gọi hành động rõ ràng.

Bạn đang thiết kế một trang web hoặc ứng dụng có nhiều người dùng lần đầu hoặc không thường xuyên. Hầu hết những
người dùng này sẽ được phục vụ tốt nhất bằng cách đọc một đoạn văn bản giới thiệu nhất định, thực hiện một nhiệm vụ
ban đầu hoặc chọn từ một số lượng rất nhỏ các tùy chọn được sử dụng thường xuyên.

Tuy nhiên, nếu về cơ bản, mục đích rõ ràng đối với tất cả những người bắt đầu sử dụng nó và nếu hầu hết người dùng có
thể khó chịu với một bước điều hướng nhiều hơn mức cần thiết (như các ứng dụng được thiết kế cho người dùng từ trung
cấp đến chuyên gia), thì đây có thể không phải là lựa chọn thiết kế tốt nhất .

Một số ứng dụng và trang web, khi được mở, sẽ hiển thị cho người dùng thứ trông giống như một mớ thông tin và
cấu trúc: rất nhiều bảng điều khiển được lát gạch, các thuật ngữ và cụm từ lạ, quảng cáo không liên quan hoặc
thanh công cụ chỉ nằm ở đó bị vô hiệu hóa. Họ không cung cấp cho người dùng do dự bất kỳ hướng dẫn rõ ràng
nào về những việc cần làm trước tiên. “Được, tôi đây. Giờ thì sao?"

Vì lợi ích của những người dùng này, hãy liệt kê một số tùy chọn để bắt đầu. Nếu những tùy chọn đó phù
hợp với mong đợi của người dùng, anh ta có thể tự tin chọn một tùy chọn và bắt đầu làm việc—điều này
góp phần mang lại sự hài lòng ngay lập tức. Nếu không, ít nhất bây giờ anh ấy biết trang web hoặc ứng
dụng thực sự làm gì, bởi vì bạn đã xác định trước các nhiệm vụ hoặc danh mục quan trọng. Bạn đã làm cho
ứng dụng dễ hiểu hơn.
88Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Khi trang web được truy cập hoặc ứng dụng bắt đầu, hãy trình bày các điểm vào này dưới dạng “cánh
cửa” vào nội dung chính. Từ những điểm bắt đầu này, hãy hướng dẫn người dùng vào ứng dụng một
cách nhẹ nhàng và rõ ràng cho đến khi họ có đủ ngữ cảnh để tự mình tiếp tục.

Nói chung, các điểm vào này sẽ bao gồm hầu hết các lý do mà hầu hết người dùng sẽ ở đó. Có thể chỉ có
một hoặc hai điểm vào, hoặc nhiều; nó phụ thuộc vào những gì phù hợp với thiết kế của bạn. Nhưng bạn
nên diễn đạt chúng bằng ngôn ngữ mà người dùng lần đầu có thể hiểu được—đây không phải là nơi dành
cho các tên công cụ dành riêng cho ứng dụng.

Trực quan, bạn nên hiển thị các điểm vào này với sự nhấn mạnh tỷ lệ thuận với tầm quan trọng của chúng.

Trên trang chủ hoặc trang bắt đầu, hầu hết các trang web sẽ liệt kê thêm các liên kết điều hướng
khác, điều hướng toàn cầu, điều hướng tiện ích, v.v.—và những liên kết này phải nhỏ hơn và
kém nổi bật hơn so vớiXóa điểm đầu vào. Chúng chuyên dụng hơn và không nhất thiết dẫn bạn
thẳng vào trung tâm của trang web, giống như một cánh cửa nhà để xe dẫn bạn thẳng vào
phòng khách. CácXóa điểm đầu vàonên đóng vai trò là “cửa trước”.

Phần trên cùng của trang iPad chính của Apple (Hình 3-12) chỉ cần thực hiện một số việc: xác định chính nó, làm
cho iPad trông hấp dẫn và hướng người dùng tới các tài nguyên để mua một chiếc hoặc tìm hiểu thêm. Điều
hướng toàn cầu rút lui một cách trực quan, so với các điểm vào mạnh mẽ, được xác định rõ. Trên phần còn lại của
trang, nhiều văn bản và liên kết làm cho trang dày đặc hơn, nhưng đây là tất cả những gì người dùng nhìn thấy
trong màn hình đầu tiên.

Trang iPad trên trang web của Apple

 các mẫu89

Pháo hoa và các ứng dụng khác hiển thị hộp thoại khởi động khi ứng dụng được khởi động (xem Hình 3-13).
Điều này hướng người dùng mới hoặc người dùng không thường xuyên đến các khả năng hành động; tạo
một cái gì đó mới, mở một tài liệu hiện có hoặc đọc tài nguyên trợ giúp là những mục phổ biến nhất được
tìm thấy ở đây. (Một cách thích hợp, hộp thoại khởi động này có một hộp kiểm cho phép người dùng tắt nó
đi cho các lần khởi động sau này. Người dùng chuyên nghiệp có thể không muốn bận tâm đến hộp thoại
như vậy, vì nó thêm một bước nữa—và không có giá trị—vào quá trình bắt đầu công việc của họ.)

Hộp thoại khởi động pháo hoa

http://quince.infragistics.com/Patterns/Clear%20Entry%20Points.aspx
90Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Craigslist

Điền vào trang một danh sách các liên kết đến các trang giàu nội dung trong trang web hoặc ứng dụng của bạn.
Hiển thị đủ thông tin về mỗi liên kết để cho phép người dùng lựa chọn tốt. Không hiển thị nội dung quan trọng
nào khác trên trang.

Bạn đang thiết kế trang chủ, màn hình bắt đầu hoặc bất kỳ màn hình nào khác có mục đích chỉ là
“mục lục”—để hiển thị nơi người dùng có thể truy cập từ đây. Bạn có thể không có chỗ cho nội dung
nổi bật (chẳng hạn như bài báo, video hoặc quảng cáo) hoặc bạn có thể chỉ muốn cho phép người
dùng chọn một liên kết mà không bị phân tâm.

Các ứng dụng và trang web dành cho thiết bị di động đặc biệt cầnTrang thực đơnđể tận dụng tốt nhất màn hình nhỏ của họ.

Nếu trang web (kích thước đầy đủ) của bạn cần "câu" khách truy cập ở lại trang, tốt hơn là sử dụng
một số không gian trang cho các mục quảng cáo hoặc nội dung thú vị khác vàTrang thực đơnsẽ không
phải là sự lựa chọn thiết kế phù hợp. Tương tự như vậy, một trang web cần giải thích giá trị và mục
đích của nó nên sử dụng không gian để làm điều đó.

Phải mất một số táo bạo để thiết kế mộtTrang thực đơn, bởi vì bạn phải rất tự tin rằng:
 các mẫu91

• Khách truy cập biết trang web hoặc ứng dụng nói về điều gì.

• Họ biết họ đến đây để làm gì và làm thế nào để tìm thấy nó.

• Họ sẽ không quan tâm đến tin tức, cập nhật hoặc tính năng.

Không bị phân tâm, người dùng có thể tập trung toàn bộ sự chú ý vào các tùy chọn điều hướng có
sẵn. Bạn có toàn bộ màn hình (hoặc hầu hết màn hình) để sắp xếp, giải thích và minh họa các liên kết
đó và do đó có thể hướng người dùng đến trang đích phù hợp nhất cho nhu cầu của họ.

Nếu bạn đang tạo một thiết kế di động,Trang thực đơnlà một trong những công cụ chính của bạn để thiết kế trang
web hoặc ứng dụng có nhiều cấp độ chức năng. Giữ nhãn danh sách ngắn, đặt mục tiêu đủ lớn để dễ dàng chạm
vào (đối với màn hình cảm ứng) và cố gắng không tạo hệ thống phân cấp quá sâu.

Phần còn lại của điều này áp dụng cho các trang web và ứng dụng có kích thước đầy đủ.

Đầu tiên, gắn nhãn tốt cho các liên kết và cung cấp vừa đủ thông tin theo ngữ cảnh để người dùng quyết định nơi
sẽ đến. Điều này không nhất thiết phải dễ dàng. Khách truy cập có thể thấy rất hữu ích khi có một mô tả hoặc đoạn
giới thiệu với mỗi liên kết, nhưng điều đó có thể chiếm nhiều không gian trên trang. Tương tự như vậy đối với hình
ảnh thu nhỏ—chúng có thể trông rất tuyệt, nhưng chúng mang lại bao nhiêu giá trị?

Nhìn vào Hình 3-15 và 3-16. Khách truy cập vào trang MIT đã biết ý nghĩa của các liên kết này—
chúng là tên của các chương trình học thuật—vì vậy không cần thêm thông tin. Do đó, nhà thiết
kế có thể đóng gói nhiều liên kết hơn trong màn hình đầu tiên. Kết quả là một trang hữu ích, dày
đặc thông tin.

Mặt khác, các bài viết trong trang tài nguyên AIGA được hưởng lợi từ văn bản và hình ảnh
mô tả. Chỉ riêng tiêu đề thôi chưa đủ để thuyết phục khách truy cập nhấp qua. (Cũng nên
nhớ rằng người dùng nhấp qua và thấy rằng trang đích không phải là thứ họ muốn sẽ
nhanh chóng cảm thấy thất vọng. Hãy đảm bảo rằng các mô tả của bạn chính xác và công
bằng!)

Thứ hai, hãy xem xét tổ chức trực quan của danh sách các liên kết. Chúng có phân loại hay có thể là
phân cấp hai hoặc ba cấp? Là nó được đặt hàng theo ngày? Thể hiện sơ đồ tổ chức đó trong danh
sách. Xem Chương 5 để biết thêm các cuộc thảo luận về chủ đề này.

Thứ ba, đừng quên hộp tìm kiếm.

Cuối cùng, hãy xem xét lại xem bạn có điều gì khác để nói trên trang này không. Không gian trang
chủ, đặc biệt, khá có giá trị để thu hút người dùng. Có một bài viết trêu ghẹo thú vị mà bạn có thể đặt
ở đó? Một tác phẩm nghệ thuật thị giác? MỘThộp tin tức(xem Chương 9)? Nếu những thứ như vậy gây
khó chịu hơn là gây tò mò, hãy tiếp tục thiết kế mộtTrang thực đơn.
92Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Trong trang web của MIT (Hình 3-15), trang “Giáo dục” hiển thị rất ít văn bản giải thích và rất
nhiều liên kết. Khi một người dùng truy cập vào điểm này trên trang web, cô ấy có thể đang tìm
kiếm một bộ phận hoặc tài nguyên cụ thể và cô ấy không tìm kiếm, chẳng hạn như, một lời giải
thích về nội dung của MIT. Toàn bộ mục đích của trang này là đưa khách truy cập đến một trang
đáp ứng nhu cầu đã được xác định rõ. (Điều này cũng đúng với ví dụ Craigslist trong Hình 3-14 ở
đầu mẫu.)

Một trang menu từ trang web của MIT

Trang web AIGA chứa nhiều tài nguyên dành cho các chuyên gia thiết kế. Trang web trình bày một số
danh mục cấp cao nhất cho các tài nguyên đó, như được hiển thị trong điều hướng toàn cầu, nhưng
trang đích cho mỗi danh mục đó là mộtTrang thực đơn(Hình 3-16). Các bài viết được hiển thị với hình
ảnh thu nhỏ và văn bản tóm tắt; định dạng phong phú cung cấp cho người xem đủ ngữ cảnh để quyết
định xem có nên đầu tư thời gian vào việc nhấp qua bài viết hay không.
 các mẫu93

Một trang Menu từ trang web của AIGA

Cuối cùng, Bảo tàng Nghệ thuật Hiện đại sử dụng hình ảnh lớn và ít văn bản về điều nàyTrang
thực đơn(xem Hình 3-17). Trang này đủ hấp dẫn để tự thu hút người dùng mà không có bất kỳ
nội dung cụ thể nào.

Trang Menu từ trang web của MoMA

94Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Mẫu Điều hướng thư mục tại URL sau đây mô tả một cách sử dụng chuyên biệt của
MộtTrang thực đơn:

http://welie.com/patterns/showPattern.php?patternID=directory

sơ đồ kim tự tháp

Liên kết với nhau một chuỗi các trang bằng liên kết Quay lại/Tiếp theo. Tạo một trang mẹ liên kết đến tất cả
các trang trong trình tự này và cho phép người dùng xem chúng theo trình tự hoặc không theo thứ tự.

Trang web hoặc ứng dụng chứa một chuỗi các mục mà người dùng thường xem lần lượt, chẳng
hạn như trình chiếu, trình hướng dẫn, các chương trong sách hoặc một bộ sản phẩm. Tuy nhiên,
một số người dùng muốn xem từng mục một và không theo thứ tự và họ cần có thể chọn từ
danh sách đầy đủ các mục.

Gần như tất cảTrình quản lý ảnh(xem Chương 2) sử dụng mộtKim tự thápmô hình điều hướng.
Đôi khi mọi người cần xem các bức ảnh riêng lẻ; đôi khi họ muốn duyệt bằng cách đi qua
toàn bộ trình tự.kim tự tháphỗ trợ cả hai trường hợp sử dụng.

Mẫu này làm giảm số lần nhấp cần thiết để di chuyển. Nó cải thiện hiệu quả
điều hướng và thể hiện mối quan hệ tuần tự giữa các trang.
Các liên kết hoặc nút Quay lại/Tiếp theo (hoặc Trước/Tiếp theo) đều hoạt động tốt. Mọi người biết phải
làm gì với chúng. Nhưng người dùng không nhất thiết muốn bị khóa trong một chuỗi trang mà anh ta
không thể dễ dàng thoát ra: sau khi xem hết bảy trang, anh ta có cần nhấp vào nút Quay lại bảy lần
để quay lại nơi anh ta bắt đầu không? Không vui!
 các mẫu95

Bằng cách đặt một liên kết trở lại trang mẹ trên mỗi trang trình tự, bạn tăng các tùy chọn của người
dùng. Giờ đây, bạn có ba tùy chọn điều hướng chính thay vì hai tùy chọn—Quay lại, Tiếp theo và Lên
trên. Bạn đã không làm cho nó phức tạp hơn nhiều, nhưng một người dùng tình cờ duyệt web (hoặc
một người đã thay đổi ý định giữa chừng) sẽ cần ít lần nhấp hơn để đến nơi anh ta muốn. Nó thuận
tiện hơn cho người dùng.

Tương tự như vậy, việc xâu chuỗi một tập hợp các trang không được kết nối lại với nhau là tốt cho những
người dùng thực sự muốn xem tất cả các trang. Nếu không có các liên kết Quay lại/Tiếp theo, chúng sẽ luôn
“dính chặt” vào trang mẹ; họ có thể bỏ cuộc và rời đi.

Liệt kê tất cả các mục hoặc trang theo thứ tự trên trang mẹ. Kết xuất danh sách theo cách phù hợp với các loại mục
mà bạn đang xử lý (xem Chương 5), chẳng hạn nhưLưới hình thu nhỏcho ảnh hoặc danh sách văn bản đa dạng thức
cho bài viết. Một cú nhấp chuột vào một mục hoặc liên kết sẽ đưa người dùng đến trang của mục đó.

Trên mỗi trang mục, hãy đặt các liên kết Quay lại/Tiếp theo. Nhiều trang web hiển thị một bản xem trước nhỏ của
mục tiếp theo, chẳng hạn như tiêu đề hoặc hình thu nhỏ của nó (Flickr thực hiện điều này, như thể hiện trong Hình
3-19). Ngoài ra, hãy đặt liên kết Lên để đưa người dùng quay lại trang gốc và gắn nhãn “Quay lại <Tiêu đề trang tại
đây>” hoặc một cái gì đó tương tự.

MộtKim tự thápbiến thể biến một chuỗi tuyến tính tĩnh thành một vòng lặp bằng cách liên kết trang cuối
cùng trở lại trang đầu tiên mà không cần quay lại trang gốc. Điều này có thể hoạt động, nhưng người dùng
có biết rằng cô ấy đã lặp lại tất cả các vòng không? Cô ấy có nhận ra trang đầu tiên trong chuỗi không?
Không cần thiết. Nếu thứ tự của một trình tự là quan trọng, bạn nên liên kết trang cuối cùng với trang mẹ,
vì nó cho người dùng biết rằng họ đã xem hết những gì cần xem.

Trang mục của Flickr là một trang cổ điểnKim tự thápví dụ. Cái nàyTrình quản lý ảnhhiển thị hình
ảnh trong một chuỗi được gọi là mộtdòng ảnh,có thể xem toàn bộ bằng cách nhấp vào liên kết
có nhãn ở đầu tiện ích này (xem Hình 3-19). Hai hình thu nhỏ hiển thị ảnh trước và ảnh tiếp theo
trong luồng ảnh.

Flickr

CácThời báo New Yorktính năng tương tác được hiển thị trong Hình 3-20 là một tính năng khác
Trình quản lý ảnh. Trang mẹ hiển thị bất thườngLưới hình thu nhỏhình ảnh có thể nhấp được; trang
mục (hiển thị trong Hình 3-21) chứa các nút mũi tên để duyệt qua một loạt ảnh. Lưu ý rằng
96Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

điều này cho người dùng biết vị trí của cô ấy trong chuỗi—“121 trên 176”—đó là một điểm nhấn thú vị. Không có
nút “Lên”, nhưng điều khiển duy nhất khác trong bảng điều khiển đó, “Đóng”, đưa người dùng trở lại trang mẹ. (Do
đó, nó tạo ra một cách sử dụng thú vị của mộtBảng điều khiển phương thức.)

Một tính năng tương tác của New York Times; đây là trang mẹ, nơi chứa tất cả các bức ảnh
cho xem

Một trang con từ cùng một tính năng, đang hiển thị các nút Quay lại, Tiếp theo và Đóng gần ảnh
 các mẫu97

Sơ đồ bảng điều khiển phương thức

Chỉ hiển thị một trang, không có tùy chọn điều hướng nào khác, cho đến khi người dùng hoàn thành tác vụ ngay
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

lập tức.

Ứng dụng hoặc trang web đã rơi vào trạng thái không nên hoặc không thể tiếp tục nếu không có thông tin
đầu vào từ người dùng. Ví dụ: trong một ứng dụng tập trung vào tài liệu, hành động “lưu” có thể yêu cầu
người dùng cung cấp tên tệp nếu tên tệp chưa được cung cấp. Trong các ngữ cảnh khác, người dùng có thể
cần phải đăng nhập trước khi tiếp tục hoặc xác nhận một thông báo quan trọng.

Nếu người dùng chỉ bắt đầu một hành động nhỏ có thể cần thêm thông tin đầu vào, hãy thử tìm cách yêu
cầu thông tin đầu vào đó mà không cần bảng điều khiển phương thức. Ví dụ: bạn có thể hiển thị trường văn
bản ngay bên dưới nút mà người dùng đã nhấp vào và để nó "treo" ở đó cho đến khi người dùng quay lại
trường đó—không cần phải giữ toàn bộ trang web hoặc ứng dụng cho đến khi đầu vào đó được cung cấp.
Hãy để người dùng làm việc khác và sau đó quay lại câu hỏi sau.

Một bảng điều khiển phương thức cắt bỏ tất cả các tùy chọn điều hướng khác từ người dùng. Anh ấy không thể bỏ qua nó và

chuyển sang một nơi khác trong ứng dụng hoặc trang web: anh ấy phải xử lý nó ngay tại đây và ngay bây giờ. Khi xong việc, anh ta

được đưa trở lại nơi anh ta đã ở trước đây.

Đó là một mô hình dễ hiểu—và dễ lập trình—mặc dù nó đã bị lạm dụng trong các ứng dụng của những năm trước.
Một bảng điều khiển phương thức là gây rối. Nếu người dùng không sẵn sàng trả lời bất cứ điều gì mà bảng điều
khiển phương thức yêu cầu, điều đó sẽ làm gián đoạn quy trình làm việc của anh ta, có thể buộc anh ta phải đưa ra
quyết định về điều gì đó mà anh ta không quan tâm. Nhưng khi được sử dụng một cách thích hợp, bảng điều
khiển phương thức sẽ hướng sự chú ý của người dùng vào quyết định tiếp theo mà họ cần đưa ra. Không có khả
năng điều hướng nào khác để đánh lạc hướng anh ta.
98Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Trong cùng một không gian trên màn hình nơi tập trung sự chú ý của người dùng, hãy đặt một bảng
điều khiển, hộp thoại hoặc trang yêu cầu thông tin cần thiết. Nó sẽ ngăn người dùng hiển thị các
trang khác trong ứng dụng đó. Bảng điều khiển này phải tương đối gọn gàng, phù hợp với nhu cầu
tập trung sự chú ý của người dùng vào nhiệm vụ mới này mà ít bị phân tâm nhất.

Hãy nhớ rằng đây là một mẫu liên quan đến điều hướng. Bạn nên đánh dấu và dán nhãn cẩn
thận các lối thoát, và không nên có nhiều lối thoát; một, hai, hoặc có thể là ba. Trong hầu hết các
trường hợp, chúng là các nút có nhãn ngắn, rõ ràng, chẳng hạn như “Lưu” hoặc “Không lưu”.
Thường có nút “Đóng” hoặc “X” ở phía trên bên phải. Khi nhấp vào một nút, người dùng sẽ được
đưa trở lại trang mà họ đã đến.

Hiệu ứng hộp đèn là cách trình bày trực quan rất hiệu quả của bảng điều khiển phương thức. Bằng
cách làm mờ hầu hết màn hình, nhà thiết kế làm nổi bật bảng chế độ sáng và tập trung sự chú ý vào
đó. (Để điều này hoạt động, bảng điều khiển phương thức cần phải đủ lớn để người dùng dễ dàng tìm
thấy nó. Tôi đã thấy các bảng điều khiển phương thức quá nhỏ và lệch tâm nên khó tìm thấy chúng
trong một cửa sổ trình duyệt lớn.)

Thay vì xếp lớp bảng điều khiển phương thức lên trên một trang khác, một số trang web chỉ sử dụng
các trang có điều hướng cực kỳ hạn chế. Màn hình đăng nhập và đăng ký thường được thực hiện theo
cách này: điều hướng toàn cầu và cục bộ bị loại bỏ và tất cả những gì còn lại là các lối thoát (Hủy, Tiếp
tục, v.v.) và mộtLối thoát.

Các hệ điều hành và nền tảng GUI thường cung cấp các hộp thoại phương thức cấp hệ điều hành. Chúng được sử dụng
tốt nhất trong các ứng dụng dành cho máy tính để bàn truyền thống—các trang web nên tránh sử dụng chúng để ưu tiên
sử dụng các kỹ thuật lớp phủ có trọng lượng nhẹ hơn, giúp nhà thiết kế dễ kiểm soát hơn và ít gây gián đoạn hơn cho
người dùng.

SlideShare sử dụng hộp đèn để thu hút sự chú ý vào hộp thoại đăng nhập của nó. Nếu bạn cố làm điều gì đó
trên SlideShare yêu cầu bạn phải đăng nhập, bảng điều khiển phương thức trong Hình 3-23 sẽ xuất hiện.
Chỉ có ba cách để xử lý: đăng nhập, đăng ký hoặc nhấp vào nút “X” quen thuộc ở góc trên bên phải. Đây là
điều rất điển hình của nhiều bảng điều khiển phương thức được làm nổi bật bằng hộp đèn trên Web.
 các mẫu99

Bảng điều khiển phương thức đăng nhập của SlideShare

Tương tự như vậy, Kayak sử dụng hộp đèn tương tự cho một tìm kiếm đã sửa đổi—nhưng hộp đèn này thực
sự trỏ đến liên kết khởi chạy nó, giúp người dùng kết nối cử chỉ của cô ấy với bảng điều khiển phương thức
kết quả (xem Hình 3-24). Đó là một liên lạc tốt đẹp.

Bảng điều khiển phương thức của thuyền kayak để sửa đổi các tìm kiếm

Hình thức "bóng râm" của hộp thoại phương thức Mac thu hút sự chú ý khi nó rơi xuống từ thanh tiêu đề
cửa sổ (tất nhiên là hoạt hình). Các hộp thoại phương thức này và các hộp thoại khác ở cấp độ ứng dụng
thực sự ngăn cản người dùng tương tác với phần còn lại của ứng dụng, vì vậy người dùng buộc phải hoàn
thành hoặc loại bỏ luồng công việc này trước khi làm bất kỳ điều gì khác (xem Hình 3-25).
100Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Bảng điều khiển phương thức trong ứng dụng Mac

http://quince.infragistics.com/Patterns/Modal%20Panel.aspx

http://patternry.com/p=overlay/

Xem thêm mẫu Lớp phủ hộp thoại trongThiết kế giao diện webcủa Bill Scott và Theresa Neil
(O'Reilly,http://oreilly.com/catalog/9780596516253/).Các loại lớp phủ khác cũng được mô tả
trong chương đó.

http://

Sơ đồ trạng thái liên kết sâu

Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu101

Nắm bắt trạng thái của một trang web hoặc ứng dụng trong một URL có thể được lưu hoặc gửi cho người khác. Khi được
tải, nó sẽ khôi phục trạng thái của ứng dụng về những gì người dùng đang thấy.

Nội dung của trang web hoặc ứng dụng là thứ gì đó lớn và có tính tương tác, chẳng hạn như bản đồ, sách, video
hoặc đồ họa thông tin. Một điểm hoặc trạng thái mong muốn cụ thể có thể khó tìm hoặc có thể mất nhiều bước để
đạt được điều đó từ một điểm xuất phát điển hình. Ứng dụng có thể có nhiều thông số hoặc trạng thái do người
dùng cài đặt, chẳng hạn như chế độ xem, tỷ lệ, lớp dữ liệu, v.v.—những thông số này có thể làm tăng thêm độ
phức tạp của việc tìm kiếm một điểm cụ thể và nhìn thấy nó theo cách “đúng”.

Nhà nước liên kết sâucung cấp cho người dùng một cách để chuyển trực tiếp đến một điểm và trạng thái ứng
dụng mong muốn, do đó tiết kiệm thời gian và công việc. Nó hoạt động giống như một “liên kết sâu” trực
tiếp vào một phần nội dung trên một trang web thông thường—hoặc một liên kết cố định tới một mục blog
—theo nghĩa là bạn kết thúc bằng một URL trỏ trực tiếp đến nội dung mong muốn. Nhưng nó có thể phức
tạp hơn permalink, vì nó có thể nắm bắt cả trạng thái ứng dụng và vị trí nội dung.

Mẫu này hữu ích để lưu trạng thái mà người dùng có thể muốn tạo lại sau này, đặc biệt nếu anh ta có thể
“đánh dấu” nó bằng các cơ chế nổi tiếng (như dấu trang của trình duyệt, các trang web như Delicious, v.v.).
Nó cũng thuận tiện để chia sẻ với người khác và đó là nơi nó thực sự tỏa sáng. Một URL đại diện cho mộtNhà
nước liên kết sâucó thể được gửi qua email, tweet, đăng lên mạng xã hội, thảo luận trong diễn đàn, xuất bản
trong một mục blog và được thảo luận theo bất kỳ cách nào. Nó có thể đưa ra một tuyên bố, hoặc lan
truyền nhanh chóng hoặc trở thành một “đối tượng trung gian xã hội”.

Theo dõi vị trí của người dùng trong nội dung và đặt vị trí đó vào một URL. Theo dõi dữ
liệu hỗ trợ ở đó—nhận xét, lớp dữ liệu, điểm đánh dấu, đánh dấu, v.v.—để việc tải lại
URL sẽ đưa tất cả trở lại.
Cân nhắc những thông số hoặc trạng thái giao diện khác mà bạn có thể muốn người dùng lưu lại: mức thu
phóng, độ phóng đại, chế độ xem, kết quả tìm kiếm, v.v. Không phải tất cả những thứ này nhất thiết phải
được ghi lại, vì tảiNhà nước liên kết sâukhông nên chà đạp lên các cài đặt mà người dùng không muốn thay
đổi. Làm việc cẩn thận thông qua một số tình huống sử dụng để tìm ra điều này.
102Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

URL là định dạng tốt nhất để lưuCác quốc gia liên kết sâu: chúng được mọi người hiểu, di động, ngắn
gọn và được hỗ trợ bởi rất nhiều công cụ, chẳng hạn như dịch vụ đánh dấu trang. (Nếu bạn đang xử lý
các ứng dụng không phải web, bạn có thể cần phải sáng tạo hơn.) Cũng có thể sử dụng các định dạng
khác, chẳng hạn như XML; định dạng dựa trên văn bản thường dễ quản lý hơn nhiều so với định dạng
nhị phân.

Khi người dùng di chuyển qua nội dung và thay đổi các tham số khác nhau, hãy đặt ngay URL đã cập
nhật vào trường URL của trình duyệt để có thể dễ dàng nhìn thấy và nắm bắt. Không phải ai cũng nghĩ
sẽ tìm thấy nó ở đó, vì vậy bạn cũng có thể thiết kế một tính năng “Liên kết” mà sự tồn tại của nó cho
người dùng biết, “Đây là cách bạn tạo một liên kết đến màn hình này.” Một số trang web đề nghị tạo
một đoạn JavaScript không chỉ nắm bắt vị trí và trạng thái mà còn cho phép người dùng nhúng toàn
bộ nội dung vào một trang web khác.

Google Sách ghi lại một lượng lớn trạng thái trong các URL của nó (xem Hình 3-27): vị trí
trong sách, chế độ xem (trang đơn, hai trang, hình thu nhỏ), sự hiện diện của thanh công cụ
và thậm chí cả kết quả tìm kiếm. Nó không ghi lại mức độ phóng đại, điều này có ý nghĩa, vì
đó là một cài đặt rất riêng lẻ. URL được thấy trong công cụ “Liên kết” thực sự là dư thừa—
URL do chính trình duyệt hiển thị hoàn toàn giống nhau.

Trạng thái được liên kết sâu trong Google Sách, được tìm thấy ở hai nơi: trường URL của trình duyệt và
Tính năng “Liên kết”

Many Eyes, công cụ trực quan hóa do IBM xuất bản, cung cấp cho khách truy cập khả năng kết hợp đồ họa
thông tin tùy chỉnh của riêng họ, dựa trên các loại biểu đồ và bộ dữ liệu do trang web cung cấp (xem Hình
3-28). Chúng có tính tương tác cao và phong phú. Để chia sẻ một trong những hình ảnh trực quan hóa này,
bạn có thể tạo JavaScript cho hình ảnh đó (để nhúng) hoặc tạo một hình ảnh chụp nhanh.
 các mẫu103

Nắm bắt trạng thái của một hình dung tại Nhiều Mắt

Giao diện của nó không quảng cáo nhưng YouTube cho phép bạn đặt dấu thời gian vào
URL của video. Khi được tải, điều này sẽ đưa người xem trực tiếp đến thời gian đã chỉ
định trong video. Trang webhttp://youtubetime.com egiải thích cách thực hiện (xem
Hình 3-29): thêm #t=XtôiYSđến cuối URL, nơiXlà số phút vàYsố giây.

Giải thích của YouTubeTime về cách sử dụng URL để liên kết sâu vào giữa video
104Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Sơ đồ thoát hiểm

Trên mỗi màn hình có các tùy chọn điều hướng hạn chế, hãy đặt một nút hoặc liên kết rõ ràng đưa người
dùng ra khỏi màn hình đó và quay lại một địa điểm đã biết.

Bạn có các trang cấu thành một số loại quy trình nối tiếp, chẳng hạn như trình hướng dẫn hoặc bất kỳ trang nào khóa
người dùng vào tình huống điều hướng hạn chế, chẳng hạn nhưBảng điều khiển phương thức. Đây có thể là những trang mà
người dùng có thể tiếp cận ngoài ngữ cảnh, như họ có thể làm thông qua kết quả tìm kiếm.

(Cửa thoát hiểmđôi khi không cần thiết khi bạn cóBản đồ trình tựhoặcvụn bánh mì
trên một trang. Người dùng hiểu chúng có thể sử dụng chúng để quay lại một số địa điểm đã biết.)

Điều hướng hạn chế là một chuyện, nhưng không có lối thoát lại là chuyện khác! Nếu bạn cung cấp cho người
dùng một cách đơn giản, rõ ràng để thoát khỏi một trang, không có sự ràng buộc nào, thì họ sẽ ít có khả năng
cảm thấy bị mắc kẹt ở đó.

Đây là loại tính năng giúp mọi người cảm thấy như họ có thể khám phá một ứng dụng hoặc trang web một
cách an toàn. Nó giống như một tính năng hoàn tác—nó khuyến khích mọi người đi theo con đường mà
không cảm thấy như họ đang cam kết với chúng. xemthăm dò an toànmẫu ở Chương 1.

Bây giờ, nếu đây là những trang mà người dùng có thể truy cập thông qua kết quả tìm kiếm, thì điều quan trọng gấp đôi là

Cửa thoát hiểmđược đặt trên mỗi trang. Khách truy cập có thể nhấp vào những trang này để đến trang “bình
thường” cho họ biết thêm về vị trí thực của họ.

Đặt một nút hoặc liên kết trên trang đưa người dùng trở lại “nơi an toàn”. Đây có thể là trang chủ,
trang trung tâm trong thiết kế trục và nan hoa hoặc bất kỳ trang nào có điều hướng đầy đủ và nội
dung nào đó tự giải thích trên đó. Chính xác những gì nó liên kết đến sẽ phụ thuộc vào thiết kế của
ứng dụng.
 các mẫu105

Các trang web thường sử dụng biểu trưng của trang web có thể nhấp làm liên kết trang chủ, thường ở phía trên bên trái
của trang. Những cung cấp mộtLối thoátở một nơi quen thuộc, đồng thời giúp xây dựng thương hiệu.

Trong một số hộp thoại, nút Hủy hoặc nút tương đương có thể phục vụ mục đích này. Những điều này cũng cho phép

người dùng nói, “Tôi đã hoàn thành việc này; quên tôi đã từng bắt đầu nó.

Bạn đã bao giờ gọi điện cho một công ty - chẳng hạn như ngân hàng của bạn - và phải tìm cách thông qua
một tập hợp các menu điện thoại chưa? Chúng có thể dài, khó hiểu và tốn thời gian. Nếu bạn thấy mình
đang ở trong menu sai, bạn có thể gác máy và thử lại từ trên cùng. Nhưng nhiều hệ thống menu điện thoại
có một ẩnLối thoátmà họ không cho bạn biết: nếu bạn quay số “0” vào bất kỳ thời điểm nào, bạn có thể được
kết nối với một nhà điều hành con người.

Nhiều trang web có một số trang giới hạn các tùy chọn điều hướng, chẳng hạn nhưBảng phương thức
và các trang không có điều hướng toàn cầu. Màn hình đăng nhập Netflix là một ví dụ. Nếu người dùng
thấy mình ở đây và không muốn đăng nhập, họ có thể nhấp vào biểu tượng Netflix để quay lại trang
chủ (xem Hình 3-31).

Trang đăng nhập Netflix, với logo là Escape Hatch

Đôi khi chủ nghĩa văn học hoạt động. Google Labs cung cấp các tính năng chưa sẵn sàng để phát hành và
đôi khi chúng bị hỏng. Trong ví dụ được hiển thị trong Hình 3-32, Google Maps cung cấp cho người dùng
một URL "escape hatch" rõ ràng để sử dụng khi có sự cố xảy ra.

Phòng thí nghiệm Google Maps Escape Hatch

106Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Hai mẫu này được đặt tên là “Home Link”. Khái niệm này rất giống vớiLối thoát. http://ui-

patterns.com/patterns/HomeLink http://welie.com/patterns/showPattern.php?

patternID=home

Menu Tất cả sản phẩm của Microsoft

Hiển thị một danh sách dài các tùy chọn điều hướng trong menu thả xuống hoặc bay ra. Sử dụng chúng để hiển
thị tất cả các trang con trong các phần của trang web. Sắp xếp chúng cẩn thận, sử dụng các danh mục được lựa
chọn kỹ lưỡng hoặc thứ tự sắp xếp tự nhiên và trải chúng ra theo chiều ngang.

Trang web hoặc ứng dụng có nhiều trang trong nhiều danh mục, có thể theo thứ bậc có ba cấp trở
lên. Bạn muốn hiển thị hầu hết các trang này cho những người tình cờ khám phá trang web để họ có
thể xem những gì có sẵn. Người dùng của bạn cảm thấy thoải mái với menu thả xuống (nhấp để xem
chúng) hoặc bay ra ngoài (cuộn qua chúng bằng con trỏ).
 các mẫu107

thực đơn béolàm cho một trang web phức tạp dễ khám phá hơn. Chúng hiển thị nhiều tùy chọn điều hướng hơn cho

khách truy cập so với những gì họ có thể tìm thấy.

Bằng cách hiển thị rất nhiều liên kết trên mỗi trang, bạn giúp người dùng có thể chuyển trực tiếp từ bất kỳ trang con nào
sang bất kỳ trang con nào khác (dù sao đi nữa, đối với hầu hết các trang con). Do đó, bạn biến một trang web đa cấp—nơi
các trang con không được liên kết với các trang con trong các phần khác của trang web—thành một trang web được kết
nối đầy đủ.

thực đơn béolà một hình thức củatiết lộ công khai,một khái niệm quan trọng trong thiết kế giao diện người
dùng. Độ phức tạp được ẩn cho đến khi người dùng yêu cầu xem nó. Khách truy cập vào một trang web sử
dụng những thứ này có thể xem qua các tiêu đề menu để có ý tưởng cấp cao về những gì ở đó và khi sẵn
sàng đi sâu vào, anh ta có thể mở mộtThực đơn béobằng một cử chỉ. Anh ấy không được hiển thị hàng triệu
trang con trước khi sẵn sàng xử lý chúng.

Nếu bạn đã sử dụng các menu trong điều hướng chung của mình, bạn có thể xem xét mở rộng chúng
thànhthực đơn béonếu việc hiển thị nhiều liên kết hơn sẽ làm cho nội dung hấp dẫn hơn đối với các trình
duyệt thông thường. Mọi người sẽ không phải đi sâu vào các danh mục và danh mục phụ trong hệ thống
phân cấp trang web của bạn để khám phá các trang thú vị—họ sẽ thấy chúng ở đó, ngay phía trước.

Trên mỗi menu, trình bày một danh sách các liên kết được tổ chức tốt. Sắp xếp chúng thànhPhần có tiêu đề
(Chương 4) nếu chúng phù hợp với các tiểu thể loại; nếu không, hãy sử dụng thứ tự sắp xếp phù hợp với bản chất của nội dung,

chẳng hạn như danh sách theo thứ tự bảng chữ cái hoặc theo thời gian.

Sử dụng các tiêu đề, dải phân cách, khoảng trắng rộng rãi, các yếu tố đồ họa khiêm tốn và bất kỳ thứ
gì khác mà bạn cần để sắp xếp các liên kết đó một cách trực quan. Và tận dụng không gian theo chiều
ngang—bạn có thể trải rộng menu trên toàn bộ trang nếu muốn. Nhiều trang web tận dụng rất tốt
nhiều cột để trình bày các danh mục. Nếu bạn làm cho menu quá cao, nó có thể nằm ngay cuối trang
trình duyệt. (Người dùng kiểm soát độ cao của trình duyệt; đoán một cách thận trọng.)

Các trang web tốt nhất cóthực đơn béohoạt động theo phong cách với phần còn lại của trang web.
Thiết kế chúng sao cho phù hợp với bảng màu, lưới, v.v. của trang.

Một số cách triển khai menu không hoạt động tốt với công nghệ trợ năng, chẳng hạn như trình đọc màn hình.
Đảm bảo rằng bạnthực đơn béocó thể làm việc với những thứ này. Nếu không thể, hãy xem xét chuyển sang một
chiến lược tĩnh hơn, chẳng hạn nhưSơ đồ trang web.

Cácthực đơn béotrên trang web của Starbucks được thiết kế rất tốt (xem Hình 3-34). Mỗi menu có chiều
cao khác nhau nhưng cùng chiều rộng và tuân theo một lưới trang chung nghiêm ngặt (tất cả chúng
đều được bố trí theo cùng một cách). Phong cách hòa hợp với trang web và khoảng trắng rộng rãi
giúp bạn dễ đọc. Quảng cáo được đưa vào thiết kế, nhưng không đáng ghét. Hình dạng không phải
hình chữ nhật thêm một cái nhìn bóng bẩy.
108Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Thực đơn cà phê Starbucks

Như thể hiện trong Hình 3-35, các menu của Slate khó đọc hơn và đông đúc hơn (phù hợp với phong
cách tổng thể của trang web). Chúng cũng không tận dụng hết không gian theo chiều ngang. Nhưng
ý tưởng sử dụng chúng để hiển thị các bài viết nổi bật là thông minh—người dùng thông thái có thể
lướt qua một số lượng lớn các tiêu đề bằng cách cuộn qua các menu.

Menu Tin tức & Chính trị của Slate

 các mẫu109

Hội Chữ thập đỏ Hoa Kỳ không chỉ thả nổi các menu của nó trên đầu trang (xem Hình 3-36).
Khi người dùng cuộn qua bất kỳ mục menu cấp cao nhất nào, kết quảThực đơn béo
thực sự thay thế một bảng tin tức xoay kiểu băng chuyền, chiếm không gian của nó trong trang. Menu
giống nhau cho tất cả các mục menu cấp cao nhất, vì vậy tất cả các trang con trong mọi danh mục đều hiển
thị cùng một lúc.

Thực đơn của Hội Chữ thập đỏ Hoa Kỳ (tất cả chúng)

WebMD sử dụng thứ tự sắp xếp theo thứ tự bảng chữ cái cho danh sách phẳng, dài về các chủ đề sức khỏe, như
trong Hình 3-37.

Thực đơn Sức khỏe A–Z của WebMD

110Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Chân trang Whole Foods

Đặt bản đồ trang web vào chân trang của mỗi trang trong một trang web. Hãy coi nó như một phần của điều
hướng chung, bổ sung cho tiêu đề. Rút ngắn sơ đồ trang web nếu bạn cần làm cho nó vừa với một không gian nhỏ
gọn.

Trang web bạn đang thiết kế sử dụng nhiều dung lượng trên mỗi trang và bạn không bị hạn chế
nghiêm trọng về kích thước trang hoặc thời gian tải xuống. Bạn không muốn chiếm quá nhiều không
gian cho tiêu đề hoặc thanh bên với điều hướng.

Trang web có nhiều trang, nhưng không có quá nhiều danh mục và trang “quan trọng” (những
thứ mà người dùng sẽ tìm kiếm). Bạn có thể vừa một sơ đồ trang web hoàn chỉnh hợp lý—ít nhất
là đối với các trang không có trong tiêu đề—vào một dải không cao hơn khoảng một nửa cửa sổ
trình duyệt.

Có thể có một menu điều hướng chung trong tiêu đề trang, nhưng nó không hiển thị tất cả các cấp trong
cấu trúc phân cấp của trang—có thể nó chỉ hiển thị các danh mục cấp cao nhất. Bạn thích một footer đơn
giản, bố cục hợp lý thay vìthực đơn béo, có lẽ do các vấn đề về khả năng tiếp cận hoặc khả năng triển khai dễ
dàng.

Chân trang sơ đồ trang weblàm cho một trang web phức tạp dễ khám phá hơn. Chúng hiển thị nhiều tùy chọn điều

hướng hơn cho khách truy cập so với những gì họ có thể có.

Bằng cách hiển thị rất nhiều liên kết trên mỗi trang, bạn giúp người dùng có thể chuyển trực tiếp từ bất kỳ
trang con nào sang bất kỳ trang con nào khác (hoặc trang chính, dù sao đi nữa). Do đó, bạn biến một trang
web đa cấp—nơi các trang con không được liên kết với các trang con trong các phần khác của trang web—
thành một trang web được kết nối đầy đủ. Chân trang là nơi người dùng chú ý khi họ đọc đến cuối trang.
Bằng cách đặt các liên kết thú vị ở đó, bạn lôi kéo người dùng ở lại trang web và đọc thêm.
 các mẫu111

Cuối cùng, việc hiển thị cho người dùng toàn bộ sơ đồ trang web mang lại cho họ cảm giác mạnh mẽ về cách trang web được xây

dựng và nơi họ có thể tìm thấy các tính năng có liên quan. Trong các trang web phức tạp, điều đó có thể có giá trị.

Bạn có thể thấy mình đang cố gắng lựa chọn giữa mộtSơ đồ trang webthiết kế và mộtthực đơn béo
thiết kế. Trong các trang web thông thường, mộtSơ đồ trang websẽ dễ triển khai và gỡ lỗi hơn vì nó
không phụ thuộc vào bất kỳ động lực nào: thay vì hiển thị các menu bay ra khi người dùng cuộn qua
các mục hoặc nhấp vào chúng, mộtSơ đồ trang webchỉ là một tập hợp các liên kết tĩnh. Nó cũng dễ sử
dụng hơn với trình đọc màn hình và nó không yêu cầu kiểm soát con trỏ tốt, do đó, nó cũng có khả
năng truy cập.

Mặt khác, chân trang có thể bị bỏ qua bởi những người dùng bận rộn hoặc không thường xuyên, những người chỉ
tập trung vào nội dung trang và tiêu đề. Kiểm tra khả năng sử dụng nếu bạn có bất kỳ nghi ngờ nào và xem số liệu
nhấp chuột để xem liệu có ai thậm chí sử dụngSơ đồ trang web.

Thiết kế chân trang trên toàn trang có chứa các phần (danh mục) chính của trang web và các trang con
quan trọng nhất của chúng. Bao gồm điều hướng tiện ích, các công cụ như lựa chọn ngôn ngữ hoặc
đường liên kết mạng xã hội(Chương 9) và các thông tin cuối trang điển hình khác như tuyên bố về bản quyền và
quyền riêng tư.

Điều này có thể tạo thành một bản đồ trang web hoàn chỉnh cho trang web của bạn hoặc có thể không. Ý tưởng là bao
gồm hầu hết những gì khách truy cập cần tìm mà không làm quá tải tiêu đề hoặc điều hướng thanh bên.

Trong thực tế, điều thường xảy ra là các tùy chọn điều hướng toàn cầu ở đầu trang phản ánh
một thiết kế hướng đến nhiệm vụ hơn—nó cố gắng trả lời các câu hỏi ngay lập tức của khách
truy cập về “Cái này nói về cái gì?” và “Tôi tìm ở đâuXngay giây phút này?” Trong khi đó, cácSơ đồ
trang webhiển thị cấu trúc phân cấp thực tế của chính trang web đó. Sự sắp xếp hai phần này
dường như hoạt động tốt.

Nếu trang web của bạn xử lý nội dung yêu cầu điều hướng phức tạp—chẳng hạn như một
tập hợp lớn các sản phẩm, bài báo, nhạc, video, sách, v.v.—bạn có thể sử dụng đầu trang để
điều hướng nội dung vàSơ đồ trang webcho hầu hết mọi thứ khác.

Dưới đây là một số tính năng thường có thể được tìm thấy trongChân trang sơ đồ trang web:

• Hạng mục nội dung chính

• Thông tin về trang web hoặc tổ chức

• Trang web đối tác hoặc trang web chị em—ví dụ: trang web hoặc thương hiệu thuộc sở hữu của cùng một công ty

• Liên kết cộng đồng, chẳng hạn như diễn đàn

• Giúp đỡ và hỗ trợ
• Thông tin liên lạc
• Các chương trình khuyến mãi hiện tại

• Thông tin quyên góp hoặc tình nguyện, cho các tổ chức phi lợi nhuận
112Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Trang web của REI thể hiện sự khác biệt giữa điều hướng toàn cầu trên trang theo định hướng nhiệm
vụ và điều hướng hiệu quảSơ đồ trang web(xem Hình 3-39). Mua sắm, học tập và du lịch chiếm ưu thế
trong tiêu đề, vì chúng nên như vậy—đây là những gì mà hầu hết khách truy cập trang web tìm đến.
Phần chân trang xử lý các tác vụ phụ nhưng vẫn quan trọng: thông tin “về”, hỗ trợ khách hàng, tư
cách thành viên, v.v.

Đầu trang và chân trang REI

Cácthời LAphần cuối trang hiển thị nhiều nội dung giống như tab đôi trong phần đầu
trang, nhưng được làm phẳng và sắp xếp hơi khác (xem Hình 3-40).
 các mẫu113

Đầu trang và chân trang của Thời báo Los Angeles

CácTạp chí Phố Wallcó một footer mênh mông (xem Hình 3-41). Cái này có thể lớn
hơn cái mà bạn muốn làm.

Chân trang Tạp chí Phố Wall

114Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Flickr, như mọi khi, là tối giản (xem Hình 3-42). Nó tránh cấu trúc cột mà hầu hết các trang web khác
sử dụng choChân trang sơ đồ trang webvà sử dụng các hàng để thay thế. MapQuest sử dụng các cột,
nhưng nó cũng hoạt động rất tốt trong một khoảng không gian nhỏ (xem Hình 3-43).

chân trang Flickr

MapQuest chân trang

http://welie.com/patterns/showPattern.php?patternID=sitemap-footer

http://ui-patterns.com/patterns/FatFooter

Cái tên “Fat Footer” đôi khi được sử dụng cho mẫu này, với định nghĩa được mở rộng hơn một chút.
Đối với một số ví dụ tuyệt vời, xemtạp chí đập phábài viết có tiêu đề “Chân trang thông tin và có thể sử
dụng trong thiết kế web”:

http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-
webdesign/
 các mẫu115

Công cụ đăng nhập Flickr

Đặt điều hướng tiện ích liên quan đến trải nghiệm trang web của người dùng đã đăng nhập ở góc
trên bên phải. Hiển thị các công cụ như giỏ hàng, cài đặt hồ sơ và tài khoản, trợ giúp và các nút đăng
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

xuất.

Công cụ đăng nhậphữu ích cho bất kỳ trang web hoặc dịch vụ nào mà người dùng thường đăng nhập.

Mô hình này hoàn toàn là quy ước; góc trên bên phải là nơi nhiều người mong đợi những công cụ như vậy,
vì vậy họ sẽ thường xuyên nhìn vào đó. Cung cấp cho người dùng trải nghiệm thành công bằng cách đặt
những công cụ này ở nơi họ mong đợi.

Dành không gian gần góc trên bên phải của mỗi trang choCông cụ đăng nhập. Đặt tên đăng nhập của
người dùng ở đó trước (và có thể là một phiên bản nhỏ hình đại diện của cô ấy, nếu có), trừ khi tên và
hình đại diện đã xuất hiện ở nơi khác trên trang. Đảm bảo mỗi công cụ hoạt động giống hệt nhau trên
mọi trang trong trang web hoặc ứng dụng.

Nhóm các công cụ lại với nhau như sau:

• Nút hoặc liên kết đăng xuất (điều này rất quan trọng, vì vậy hãy đảm bảo rằng nó ở đây)

• Cài đặt tài khoản

• Cài đặt cấu hình

• Trợ giúp trang web

116Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

• Dịch vụ khách hàng

• Giỏ hàng
• Tin nhắn cá nhân hoặc các thông báo khác

• Liên kết đến các bộ sưu tập cá nhân (ví dụ: bộ ảnh, mục yêu thích hoặc danh sách mong muốn)

• Trang chủ

Đừng làm cho không gian này quá lớn hoặc ồn ào, kẻo nó chiếm ưu thế trên trang—điều đó không nên. Đây là
điều hướng tiện ích; nó ở đó khi người dùng cần nó, nhưng nếu không thì nó “vô hình” (tốt, không phải theo nghĩa
đen). Đối với một số mặt hàng, bạn có thể sử dụng các biểu tượng nhỏ thay vì văn bản—ví dụ: giỏ hàng, tin nhắn
và trợ giúp đều có hình ảnh tiêu chuẩn mà bạn có thể sử dụng. Xem các ví dụ trong mẫu này để biết một số ví dụ.

Hộp tìm kiếm trang web thường được đặt gầnCông cụ đăng nhập, mặc dù nó cần phải ở một
vị trí nhất quán bất kể có ai đăng nhập hay không.

Khi không có người dùng nào đăng nhập, khu vực này của trang có thể được sử dụng cho hộp đăng nhập—
tên, mật khẩu, kêu gọi hành động và có thể là các công cụ để truy xuất mật khẩu đã quên.

Hình 3-45 cho thấy một loạt cácCông cụ đăng nhậptừ Mint, Twitter, Amazon và Gmail. Chúng
không phô trương về mặt trực quan, nhưng có thể tìm thấy đơn giản vì chúng ở đúng góc của
trang hoặc cửa sổ.

Theo chiều kim đồng hồ từ trên cùng bên trái: Mint, Twitter, Amazon và Gmail

Scribd sử dụng gần như tất cả các công cụ được liệt kê trong mẫu này (xem Hình 3-46). Vì có rất nhiều
trong số chúng, nên một trình đơn thả xuống có vẻ thích hợp để ngăn chúng làm lộn xộn góc của
trang. iTunes cũng sử dụng trình đơn thả xuống (xem Hình 3-47).
 các mẫu117

Công cụ đăng nhập Scribd

Công cụ đăng nhập iTunes

118Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Sơ đồ trình tự đặt hàng của Hanna Andersson

Trên mỗi trang theo trình tự, hiển thị bản đồ của tất cả các trang theo thứ tự, bao gồm chỉ báo “Bạn
đang ở đây”.

Bạn thiết kế một bài tường thuật bằng văn bản, một quy trình, mộtThuật sĩhoặc bất kỳ thứ gì khác mà qua đó người dùng
tiến hành từng trang. Đường dẫn của người dùng chủ yếu là tuyến tính.

Nếu cấu trúc liên kết điều hướng lớn và có thứ bậc (trái ngược với tuyến tính), bạn có thể cân nhắc sử
dụngvụn bánh mìthay vì. Nếu bạn có một số lượng lớn các bước hoặc mục và thứ tự của chúng không
quan trọng lắm, điều này sẽ biến thành mộtBộ chọn hai bảng(Chương 5) hoặcTổng quan Cộng với Chi tiết(
Chương 7).

Bản đồ trình tựcho người dùng biết anh ấy đã đi được bao xa qua một loạt các bước—và quan trọng hơn là
anh ấy còn phải đi bao xa trước khi hoàn thành. Biết được điều này giúp anh ấy quyết định có nên tiếp tục
hay không, ước tính thời gian sẽ mất bao lâu và giữ vững định hướng.

Bản đồ trình tựcũng đóng vai trò là thiết bị định vị. Nếu ai đó muốn quay lại bước đã hoàn thành trước
đó, anh ta có thể làm như vậy bằng cách nhấp vào bước đó trên bản đồ.

Gần một cạnh của trang, đặt một bản đồ nhỏ của các trang theo trình tự. Đặt nó thành một dòng
hoặc một cột nếu bạn có thể để nó không cạnh tranh trực quan với nội dung trang thực tế. Cung cấp
cho chỉ báo của trang hiện tại một số xử lý đặc biệt, chẳng hạn như làm cho nó sáng hơn hoặc tối hơn
các chỉ báo khác; làm điều gì đó tương tự với các trang đã truy cập.

Để thuận tiện cho người dùng, bạn có thể muốn đặt bản đồ gần hoặc bên cạnh các điều khiển điều hướng
chính, thường là các nút Quay lại và Tiếp theo.
 các mẫu119

Bạn nên dán nhãn chỉ báo của từng trang trên bản đồ như thế nào? Nếu các trang hoặc các
bước được đánh số, hãy sử dụng các con số—chúng ngắn gọn và dễ hiểu. Nhưng bạn cũng nên
đặt tiêu đề trang trong bản đồ. (Giữ tiêu đề ngắn gọn để bản đồ có thể chứa chúng.) Điều này
cung cấp cho người dùng đủ thông tin để biết nên quay lại trang nào và đoán trước thông tin họ
sẽ cần trong các trang sắp tới.

Trình chiếu trong Hình 3-49 có mộtBản đồ trình tựở dưới cùng. Nó cho phép người xem di
chuyển ngẫu nhiên qua các hình ảnh, mặc dù hầu hết người dùng có thể sẽ sử dụng các nút
Trước và Tiếp theo ở trên cùng.

Trình chiếu Quả cầu Boston, với bản đồ trình tự dưới ảnh

Bộ cấu hình sản phẩm Mini Cooper (xem Hình 3-50) là sự kết hợp giữaTrình chỉnh sửa cài đặtvà mộtThuật
sĩở chỗ nó cho phép người dùng di chuyển qua lại theo ý muốn, nhưng sắp xếp các trang theo trình tự
được đánh số. CácBản đồ trình tựở trên cùng là một điều khiển quan trọng để “chơi” với ứng dụng, để
di chuyển giữa các trang khác nhau và khám phá các tùy chọn khác nhau.

Trình hướng dẫn cài đặt thường yêu cầu rất nhiều bước. Một trong Hình 3-51, từ Adobe, có một điển
hìnhBản đồ trình tựở phía bên tay trái. Các bước của nó bị vô hiệu hóa khi chúng không liên quan hoặc
bị bỏ qua, chẳng hạn như bản cài đặt dùng thử này không có ID Adobe.
120Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Trình cấu hình sản phẩm Mini Cooper, với bản đồ trình tự ở phía trên bên trái

Trình cài đặt Adobe CS5, với sơ đồ trình tự ở bên trái

http://ui-patterns.com/patterns/StepsLeft http://developer.yahoo.com/

ypatterns/navigation/bar/progress.html
 các mẫu121

Mục tiêu breadcrumbs

Trên mỗi trang trong hệ thống phân cấp điều hướng sâu, hãy hiển thị danh sách tất cả các trang mẹ, cho đến
trang chính hoặc trang chủ.

Ứng dụng hoặc trang web của bạn có cấu trúc phân cấp với hai hoặc nhiều cấp độ. Người dùng di chuyển
xung quanh thông qua điều hướng trực tiếp, duyệt, lọc, tìm kiếm trong trang web hoặc liên kết sâu vào
trang web từ nơi khác. Chỉ riêng điều hướng toàn cầu là không đủ để hiển thị biển chỉ dẫn “Bạn đang ở đây”
vì hệ thống phân cấp quá sâu hoặc quá lớn.

Ngoài ra, trang web hoặc ứng dụng của bạn có thể có một bộ công cụ duyệt và lọc cho một tập dữ liệu lớn,
chẳng hạn như các sản phẩm được bán trực tuyến. Các sản phẩm được phân loại theo thứ bậc, nhưng cách
phân loại đó không nhất thiết phải khớp với cách mọi người tìm kiếm các sản phẩm đó.

vụn bánh mìhiển thị từng cấp độ phân cấp dẫn đến trang hiện tại, từ trên cùng của ứng dụng xuống dưới.
Theo một nghĩa nào đó, chúng hiển thị một “lát” tuyến tính duy nhất của bản đồ tổng thể của trang web
hoặc ứng dụng.

Vì vậy, giống như mộtBản đồ trình tự,vụn bánh mìgiúp người dùng tìm ra vị trí của mình. Điều này đặc biệt hữu ích
nếu anh ấy nhảy đột ngột đến một nơi nào đó sâu trong cây, giống như khi anh ấy làm theo kết quả tìm kiếm hoặc
một công cụ duyệt theo khía cạnh. không giống như mộtBản đồ trình tự, mặc dù,vụn bánh mì
không cho người dùng biết nơi anh ấy sẽ đến tiếp theo. Họ chỉ đối phó với hiện tại.

Một số văn bản cho bạn biết rằngvụn bánh mì—được đặt tên theo câu chuyện Hansel và Gretel, trong đó
Hansel đánh rơi vụn bánh mì trên con đường mòn trong rừng để đánh dấu đường về nhà—là hữu ích nhất
để cho người dùng biết cách anh ta đến được vị trí của mình từ đầu trang web hoặc ứng dụng. Nhưng điều
đó chỉ đúng nếu người dùng đã đi thẳng từ trên xuống, không đi chệch hướng, hoặc đi theo các nhánh
khác, hoặc ngõ cụt, hoặc tìm kiếm hoặc liên kết trực tiếp từ các trang khác…không có khả năng.
122Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Thay vì,vụn bánh mìlà cách tốt nhất để cho bạn biết vị trí của bạn so với phần còn lại của ứng dụng hoặc
trang web—đó là về ngữ cảnh, không chỉ về lịch sử. Nhìn vào ví dụ Mục tiêu trong Hình 3-52. Duyệt theo
khía cạnh—tìm kiếm các mục có đặc điểm nhất định—đã đưa tôi đến trang này nằm sâu trong trang web
Mục tiêu. (Một tìm kiếm từ khóa cũng có thể làm được như vậy.) Nhưng giờ đây khi tôi ở đây, tôi có thể biết
mình đang ở đâu trong hệ thống phân cấp sản phẩm và tôi biết mình có thể xem xét những gì khác. tôi có
thể sử dụngvụn bánh mìđể xem xét tất cả các máy trộn đứng của Target và so sánh mua sắm.

Cuối cùng,vụn bánh mìthường là các liên kết hoặc nút có thể nhấp được. Điều này biến chúng thành một thiết bị
định vị theo đúng nghĩa của chúng.

Gần đầu trang, đặt một dòng văn bản hoặc biểu tượng cho biết mức độ phân cấp hiện tại. Bắt
đầu với cấp cao nhất; sang bên phải của nó, đặt cấp độ tiếp theo, v.v. xuống trang hiện tại. Giữa
các mức, đặt một ký tự đồ họa hoặc văn bản để biểu thị mối quan hệ cha/con giữa chúng. Đây
thường là một mũi tên trỏ sang phải, hình tam giác, dấu lớn hơn (>), dấu gạch chéo (/) hoặc dấu
ngoặc kép góc phải (»).

Nhãn cho mỗi trang phải là tiêu đề trang. Người dùng sẽ nhận ra chúng nếu họ đã truy cập
các trang đó rồi; nếu không, các tiêu đề ít nhất phải đủ tự giải thích để cho người dùng biết
nội dung của các trang đó. Các nhãn phải là liên kết đến các trang đó.

Một sốvụn bánh mìhiển thị trang hiện tại là mục cuối cùng trong chuỗi; một số thì không. Nếu là của bạn, hãy làm
cho chúng khác biệt về mặt hình ảnh so với các mục còn lại, vì chúng không phải là liên kết.

Bảng điều khiển Windows 7 là một bảng phân cấpTrình chỉnh sửa cài đặtđó có thể là
ba cấp độ sâu. Ảnh chụp màn hình trong Hình 3-53 hiển thị cài đặt Cá nhân hóa
trong danh mục Giao diện và Cá nhân hóa (có ít nhất sáu danh mục con ngoài Cá
nhân hóa).

Bảng điều khiển Windows 7

 các mẫu123

Các cộng đồng trực tuyến như cộng đồng được hiển thị trong Hình 3-54 thường có hệ thống phân cấp sâu:
danh mục diễn đàn, diễn đàn, diễn đàn con, nhiều diễn đàn con hơn và chủ đề.vụn bánh mìgiúp người dùng
hiểu và vượt qua hệ thống phân cấp này.

Diễn đàn làm mẹ.com

Hình 3-55 cho thấy một ví dụ vềvụn bánh mìđược sử dụng bên ngoài ngữ cảnh “trang”. Công cụ dành cho nhà
phát triển Chrome, trong số nhiều công cụ khác dành cho nhà phát triển phần mềm, cung cấp cách để
người dùng quản lý các cấu trúc phân cấp rất sâu (trong trường hợp này là các thẻ cấu trúc lồng nhau trong
trang HTML).vụn bánh mìlà vô giá ở đây để theo dõi vị trí của một người trong cấu trúc đó.

Công cụ dành cho nhà phát triển Chrome

http://developer.yahoo.com/ypatterns/navigation/breadcrumbs.html

http://ui-patterns.com/patterns/Breadcrumbs

http://www.welie.com/patterns/showPattern.php?patternID=crumbs

http://patternry.com/p=breadcrumbs/

http://quince.infragistics.com/Patterns/Breadcrumbs.aspx

http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-
examplesand-best-practices-2/
124Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Thanh cuộn MSNBC hiển thị các phần của trang

Làm cho thanh cuộn phục vụ hai nhiệm vụ dưới dạng bản đồ nội dung hoặc dưới dạng chỉ báo “Bạn đang ở
đây”.

Bạn đang thiết kế ứng dụng tập trung vào tài liệu hoặc giao diện xoay và thu phóng, chẳng hạn
như bản đồ hoặc hình ảnh lớn. Người dùng sẽ quét tài liệu hoặc đồ họa này để tìm các mục cần
lưu ý, chẳng hạn như số trang hoặc mốc cụ thể. Họ có thể gặp khó khăn trong việc theo dõi vị trí
của họ và nơi tiếp theo khi họ cuộn.
 các mẫu125

Mặc dù người dùng vẫn ở trong một không gian điều hướng khi cô ấy cuộn qua nội dung, các
biển chỉ dẫn vẫn hữu ích. Khi cuộn nhanh, rất khó để đọc văn bản lướt qua (hoặc không thể, nếu
màn hình không thể làm mới đủ nhanh), vì vậy cần có một số chỉ báo khác về vị trí. Ngay cả khi
cô ấy dừng lại một lúc, phần tài liệu mà cô ấy có thể xem có thể không chứa bất kỳ thứ gì mà cô
ấy có thể tự định hướng, chẳng hạn như tiêu đề.

Tại sao một thanh cuộn? Bởi vì đó là nơi tập trung sự chú ý của người dùng. Nếu bạn đặt các biển chỉ dẫn ở
đó, người dùng sẽ nhìn thấy và sử dụng chúng khi họ cuộn thay vì cố gắng nhìn vào hai khu vực màn hình
khác nhau cùng một lúc. Bạn có thể đặt các biển chỉ dẫn gần thanh cuộn và vẫn nhận được hiệu ứng tương
tự; càng gần, càng tốt.

Khi thanh cuộn hiển thị các chỉ báo trong chính rãnh của thanh cuộn, bạn sẽ nhận được thứ gì
đó hoạt động giống như thanh một chiều.Tổng quan Cộng với Chi tiết(Chương 7). Theo dõi là tổng
quan; cửa sổ cuộn là chi tiết.

Đặt một chỉ báo vị trí trên hoặc gần thanh cuộn. Chỉ báo tĩnh hoặc động có thể hoạt động—chỉ báo tĩnh là
những chỉ báo không thay đổi từ giây này sang giây khác, chẳng hạn như các khối màu trong rãnh thanh
cuộn (xem ảnh chụp màn hình tkdiff trong Hình 3-57). Tuy nhiên, hãy chắc chắn rằng mục đích của họ rõ
ràng; những thứ như vậy có thể gây trở ngại cho những người dùng không quen nhìn thấy đồ họa trong
rãnh thanh cuộn!

Các chỉ báo động thay đổi khi người dùng cuộn và chúng thường được triển khai dưới dạng
mẹo công cụ. Khi vị trí cuộn thay đổi, mẹo công cụ hiển thị bên cạnh ngón tay cái cuộn sẽ
thay đổi để hiển thị thông tin về nội dung ở đó. Điều này sẽ thay đổi theo bản chất của ứng
dụng. Ví dụ, Microsoft Word đặt số trang và tiêu đề trong các mẹo công cụ này.

Trong cả hai trường hợp, bạn sẽ cần phải tìm ra những gì người dùng có nhiều khả năng sẽ tìm
kiếm nhất và do đó, bạn cần đưa những gì vào chú thích. Cấu trúc nội dung là một điểm khởi
đầu tốt. Nếu nội dung là mã, bạn có thể hiển thị tên của hàm hoặc phương thức hiện tại; nếu đó
là bảng tính, hãy hiển thị số hàng, v.v. Ngoài ra, hãy xem xét liệu người dùng hiện có đang thực
hiện tìm kiếm hay không—chú thích thanh cuộn sẽ hiển thị vị trí của kết quả tìm kiếm trong tài
liệu.

Ứng dụng tkdiff được hiển thị trong Hình 3-57 làm nổi bật trực quan sự khác biệt giữa hai phiên bản của tệp
văn bản: các phần mới được thêm vào được đánh dấu bằng màu xanh lá cây, các phần đã thay đổi có màu
xanh lam và các phần bị xóa có màu đỏ. MỘTThanh cuộn được chú thíchđóng vai trò như một bản đồ tổng thể,
do đó làm cho tệp lớn “khác biệt” dễ hiểu hơn.
126Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

tkdiff

Chrome chú thích thanh cuộn của nó với các kết quả tìm kiếm (xem Hình 3-58). Khi bạn tìm kiếm một từ trên
trang web, Chrome sẽ tô sáng các từ tìm thấy trên trang bằng màu vàng và đặt một chỉ báo màu vàng trong
thanh cuộn ở bất kỳ nơi nào chúng được tìm thấy. Bằng cách này, người dùng có thể cuộn trực tiếp đến
những điểm đó trong tài liệu.

Kết quả "Tìm" của Chrome

http://quince.infragistics.com/Patterns/Annotated%20Scrollbar.aspx
 các mẫu127

Chuyển đổi dock Mac OS

Làm mượt quá trình chuyển đổi gây sửng sốt hoặc trật khớp bằng hoạt ảnh khiến nó có cảm giác tự nhiên.

Người dùng di chuyển qua một không gian ảo lớn, chẳng hạn như hình ảnh, bảng tính, biểu đồ
hoặc tài liệu văn bản. Họ có thể phóng to ở các mức độ khác nhau, xoay hoặc cuộn hoặc xoay
toàn bộ nội dung. Điều này đặc biệt hữu ích cho đồ họa thông tin, chẳng hạn như bản đồ và sơ
đồ. (Xem Chương 7 để biết thêm về đồ họa thông tin.)

Ngoài ra, giao diện có thể có các phần có thể được đóng và mở lại, bởi hệ thống hoặc
bởi người dùng—chẳng hạn như cây có nút cha có thể đóng, cửa sổ độc lập có thể mở
và đóng hoặc giao diện được xây dựng bằngTấm có thể gập lại(Chương 4).
chuyển đổi hoạt hìnhcũng có thể được sử dụng khi người dùng chuyển từ trang riêng biệt này sang trang khác.
128Chương 3: Di chuyển: Điều hướng, Biển chỉ dẫn và Tìm đường

Tất cả những biến đổi này có thể phá vỡ cảm giác của người dùng về vị trí của cô ấy trong không gian
ảo. Chẳng hạn, phóng to và thu nhỏ có thể làm mất cảm giác về không gian của cô ấy khi nó được
thực hiện ngay lập tức, cũng như việc xoay và đóng toàn bộ các phần có thể dẫn đến bố cục lại màn
hình. Ngay cả khi cuộn xuống một trang văn bản dài, khi nó giật cục, có thể làm chậm trình đọc.

Nhưng khi sự thay đổi từ trạng thái này sang trạng thái khác diễn ra liên tục về mặt thị giác, thì điều đó
không tệ lắm. Nói cách khác, bạn có thể tạo hiệu ứng động cho quá trình chuyển đổi giữa các trạng thái để
nó trông mượt mà, không bị gián đoạn. Điều này giúp giữ cho người dùng được định hướng. Chúng ta có
thể đoán rằng nó hoạt động vì nó gần giống với thực tế vật lý hơn—lần cuối cùng bạn lập tức nhảy từ mặt
đất lên độ cao 20 feet trong không trung là khi nào? Ít huyền ảo hơn, một quá trình chuyển đổi hoạt hình
giúp mắt người dùng có cơ hội theo dõi một vị trí trong khi chế độ xem thay đổi, thay vì cố gắng tìm lại vị trí
đó sau khi thay đổi đột ngột.

Khi làm tốt,chuyển tiếp hoạt hìnhcủng cố yếu tố tuyệt vời của ứng dụng của bạn. Họ vui vẻ.

Đối với mỗi loại chuyển đổi mà bạn sử dụng trong giao diện của mình, hãy thiết kế một hoạt ảnh ngắn “kết
nối” trạng thái đầu tiên với trạng thái thứ hai. Để thu phóng và xoay, bạn có thể hiển thị các mức thu phóng
hoặc xoay ở giữa; đối với một bảng điều khiển đang đóng, bạn có thể hiển thị nó thu nhỏ lại trong khi các
bảng điều khiển khác mở rộng để chiếm không gian mà nó để lại. Ở bất kỳ mức độ nào có thể, hãy làm cho
nó giống như một điều gì đó thực tế đang xảy ra.

Nhưng mô hình này là một con dao hai lưỡi. Coi chừng làm cho người dùng say tàu xe! Hoạt ảnh
phải nhanh và chính xác, ít hoặc không có thời gian trễ giữa cử chỉ bắt đầu của người dùng và
thời điểm bắt đầu hoạt ảnh. Giới hạn nó ở phần bị ảnh hưởng của màn hình; không làm động
toàn bộ cửa sổ. Và giữ cho nó ngắn. Sở thích của tôi là giữ tốc độ dưới một giây và nghiên cứu
cho thấy rằng 300 mili giây có thể là lý tưởng để cuộn mượt mà. Kiểm tra nó với người dùng của
bạn để xem những gì có thể chấp nhận được.

Nếu người dùng đưa ra nhiều hành động liên tiếp, chẳng hạn như nhấn phím mũi tên
xuống nhiều lần để cuộn, hãy kết hợp chúng thành một hành động động. Nếu không,
người dùng có thể ngồi đó trong vài giây hoạt hình như hình phạt cho việc nhấn phím mũi
tên xuống 10 lần. Một lần nữa: giữ cho nó nhanh chóng và đáp ứng.

Một số loại chuyển đổi được liệt kê bởi Yahoo! thư viện mẫu (http://developer.yahoo.
com/ypatterns/richinteraction/transition/)VàThiết kế giao diện webnhư sau:
• Làm sáng và giảm độ sáng

• Mở rộng và thu gọn

• Tăng dần, giảm dần và giảm dần

• Tự chữa bệnh

• Cầu trượt

• Điểm sáng
 các mẫu129

Để thảo luận thêm và rất nhiều ví dụ tuyệt vời vềchuyển tiếp hoạt hìnhtrong danh
sách trước, hãy xem cụm mẫu Chuyển tiếp tại Yahoo! Thư viện mẫu thiết kế:
http://developer.yahoo.com/ypatterns/richinteraction/transition/

Ngoài ra, Scott và NeilThiết kế giao diện webchứa toàn bộ một chương về quá trình chuyển đổi.
Nó bao gồm một số nền tảng giống như Yahoo! trang web, nhưng nó đáng đọc.
Bố cục trang là nghệ thuật điều khiển sự chú ý của người dùng trên một trang để truyền đạt ý nghĩa,
trình tự và các điểm tương tác.

Nếu từthao túngnghe có vẻ không phù hợp với bạn, hãy nghĩ về nó theo cách này. Các đạo diễn phim
và truyền hình kiếm sống bằng cách điều khiển sự chú ý của bạn trên màn hình phim hoặc TV, và bạn
có lẽ là một người sẵn sàng tham gia. Các biên tập viên sắp xếp các bài viết, tiêu đề và quảng cáo trên
một tờ báo cũng vậy. Nếu tất cả nội dung này được trình bày bằng một giọng đều đều buồn tẻ, không
có điểm nhấn bằng hình ảnh để thu hút và thu hút sự chú ý của bạn, thì bạn sẽ khó hiểu được ý nghĩa
hơn—điều gì được cho là quan trọng, điều gì không?

Mặc dù cuối cùng nó là một nghệ thuật, nhưng có nhiều lý do để bố cục trang tốt hơn bạn nghĩ.
Một số ý tưởng quan trọng từ thiết kế đồ họa được giải thích trong phần giới thiệu của chương
này; mỗi cái có thể hướng dẫn bạn cách bố trí các trang, màn hình và hộp thoại. Chúng ta sẽ nói
về hệ thống phân cấp trực quan, luồng trực quan và tiêu điểm, nhóm và căn chỉnh—tất cả các
cách tiếp cận hợp lý và có thể đoán trước đối với thiết kế trang. Các mẫu của chương này mô tả
các cách cụ thể để áp dụng các khái niệm cấp cao đó vào thiết kế giao diện.

Nhưng bản chất tương tác, có thể thay đổi của màn hình máy tính làm cho bố cục dễ dàng hơn theo một số
cách, khó hơn ở những cách khác. Chúng ta sẽ nói về lý do tại sao điều đó đúng. Một số mẫu này hoạt động
tốt trên bản in cũng như trên màn hình, nhưng hầu hết chúng sẽ vô dụng trong bản in—chúng cho rằng
người dùng sẽ tương tác với trang.
132Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Phần này thảo luận về một số yếu tố của bố cục trang: phân cấp trực quan, luồng trực quan và
cách sử dụng màn hình động.

Khái niệm phân cấp thị giác đóng vai trò quan trọng trong mọi hình thức thiết kế đồ họa.
Nói một cách đơn giản, nội dung quan trọng nhất sẽ nổi bật nhất và nội dung ít quan trọng
nhất sẽ ít nổi bật nhất. Ngoài ra, tiêu đề phải giống tiêu đề, phụ đề phải giống phụ đề và
danh sách phải giống danh sách—nói cách khác, người đọc có thể suy ra cấu trúc thông tin
của trang từ bố cục của nó.

Điều quan trọng nhất trên trang bạn đang thiết kế là gì? Làm cho đó là trung tâm của sự chú ý.
Bạn có thể xếp hạng những thứ khác theo thứ tự tầm quan trọng giảm dần không? Sắp xếp
chúng trên trang theo cách ít thu hút sự chú ý hơn; khiến chúng trông kém thú vị hơn.

Nói tóm lại, một hệ thống phân cấp trực quan tốt sẽ đưa ra manh mối tức thì về:

• Tầm quan trọng tương đối của các yếu tố trang

• Mối quan hệ giữa chúng

Đối với văn bản ngắn nhưng lớn—chẳng hạn như tiêu đề và cụm từ ngắn—hãy sử dụng cỡ chữ, màu tương
phản và trọng lượng hình ảnh (xem Hình 4-1). Bạn cũng có thể làm cho văn bản trông rất ấn tượng bằng
cách đặt nó bằng khoảng trắng hoặc màu nền rộng rãi. Sử dụng hai hoặc nhiều đặc điểm này cùng một lúc
trên văn bản được nhấn mạnh để phân biệt văn bản đó với văn bản nội dung.

Văn bản lớn trong một hệ thống phân cấp

Các khối mục nhỏ hơn—chẳng hạn như văn bản nội dung, liên kết hoặc công cụ tương tác—có thể được nhấn mạnh hoặc
giảm nhấn mạnh bằng các công cụ này. Xem Hình 4-2 để biết ví dụ về từng loại.
 Khái niệm cơ bản về bố cục trang133

Tỉ trọng
Một khối dày đặc, nặng nề có độ tương phản mạnh hơn với trang xung quanh; một cái nhìn cởi
mở có ít độ tương phản hơn.

Màu nền
Tương phản thu hút sự chú ý. Màu đen trên nền trắng, hoặc ngược lại, là độ tương phản mạnh nhất có
thể.

Vị trí và kích thước

Một khối văn bản trung bình hoặc lớn, gần như ở giữa trang, gọi sự chú ý đến chính nó như
là nội dung chính (như một bài báo hoặc bài đăng trên blog). Nhưng một dòng chữ nhỏ ở
cuối trang khẽ nói: “Tôi chỉ là người đặt chân trang” và xin được bỏ qua!

Nhịp
Danh sách, lưới, các yếu tố xen kẽ như tiêu đề và tóm tắt cũng như phân tách khoảng trắng có
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

thể tạo ra một nhịp điệu hình ảnh mạnh mẽ thu hút ánh nhìn không thể cưỡng lại.

Các cách nhấn mạnh các khối văn bản hoặc mục nhỏ (theo chiều kim đồng hồ từ phía trên bên trái): mật độ,
màu nền, nhịp điệu, vị trí và kích thước

Đặt các mục nhỏ nhưng quan trọng ở đầu trang, dọc theo bên trái hoặc ở góc trên cùng bên phải (xem Hình 4-3).
Cung cấp cho chúng độ tương phản cao và trọng lượng hình ảnh, đồng thời đặt chúng bằng khoảng trắng. Nhưng
hãy lưu ý rằng trong một màn hình có nhiều văn bản, giống như hầu hết các trang web, một số điều khiển nhất
định—đặc biệt là các trường tìm kiếm, trường đăng nhập và các nút lớn—dù sao cũng có xu hướng nổi bật! Điều
này ít liên quan đến các đặc điểm hình ảnh thô hơn là ý nghĩa: ví dụ: nếu ai đó đang tìm kiếm hộp tìm kiếm, mắt
của họ sẽ chuyển thẳng đến các trường văn bản trên trang. (Cô ấy thậm chí có thể không đọc nhãn cho những
trường văn bản đó.)
134Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Nhấn mạnh các mục nhỏ

Hình ảnh có độ tương phản cao, ấn tượng thu hút sự chú ý; hình ảnh khuôn mặt cũng vậy. Nhưng phần lớn thời
gian, hình ảnh trên các trang web bị bỏ qua bởi những người xem có động cơ lấy thông tin ra khỏi trang hoặc để
hoàn thành một nhiệm vụ. Hình ảnh là một ký tự đại diện trong hệ thống phân cấp trực quan. Hãy sử dụng chúng
một cách thận trọng và tham khảo Chương 11 để thảo luận về việc sử dụng các yếu tố hình ảnh để truyền đạt
thương hiệu, cảm xúc và các thuộc tính phi lý trí khác.

Một điều nữa: đừng giảm giá “mù quảng cáo”. Người dùng có thể bỏ qua một cách có ý thức các yếu tố
trông giống như quảng cáo, ngay cả khi những yếu tố đó mang thông tin quan trọng! Một lần nữa, đây là về
ý nghĩa, không phải hình ảnh. Nếu bạn đã từng mở một trang web đầy quảng cáo và cố tình phớt lờ những
quảng cáo chuyển động có màu sắc rực rỡ (để bạn có thể đọc những khối văn bản đơn điệu mà bạn vào đó
để đọc), thì bạn biết rằng chúng ta không chỉ đơn thuần là nô lệ của chúng ta. hệ thống hình ảnh có dây
cứng! Chúng tôi có thể chọn bỏ qua những thứ mà chúng tôi nghĩ rằng chúng tôi không cần xem và tập
trung vào những gì chúng tôi nghĩ là phần quan trọng của trang.

Các mục được nhóm trông có liên quan với nhau (xem Hình 4-4). Ngược lại, sự cô lập ngụ ý sự khác
biệtTrong phần trước, tôi đã khuyến nghị rằng các mục nhỏ nhưng quan trọng nên được đặt bằng
khoảng trắng vì lý do này. Điều này sử dụng các nguyên tắc Gestalt củasự gần gũiVàKhép kín (xem
thanh bên “Bốn nguyên tắc Gestalt quan trọng” trên trang 139).

Các mục tương tự trông giống như các đồng nghiệp (xem Hình 4-5). Nếu bạn có một vài thứ “thuộc loại” và bạn
muốn người xem xem chúng như những lựa chọn thay thế thú vị không kém, hãy cung cấp cho chúng một cách
xử lý đồ họa giống hệt (và đặc biệt).
 Khái niệm cơ bản về bố cục trang135

Có một món đồ nào “đặc biệt” hơn những món đồ khác không? Xử lý nó hơi khác một chút, chẳng hạn như
màu nền tương phản, nhưng nếu không thì hãy giữ cho nó nhất quán với những màu khác (xem Hình 4-6).
Hoặc sử dụng một phần tử đồ họa để phá vỡ đường mà các mục được căn chỉnh dọc theo đó, chẳng hạn
như phần lồi ra, phần chồng lên nhau hoặc phần nào đó ở một góc.

Một danh sách gồm nhiều mục giống nhau, được sắp xếp trong một dòng hoặc cột mạnh, trở thành
một tập hợp các mục ngang hàng được xem theo một thứ tự nhất định (xem Hình 4-7). Sắp xếp các
mục này thật chính xác với nhau để tạo ra một đường trực quan (xem nguyên tắc Gestalt củaliên tục
trong thanh bên sắp tới). Ví dụ bao gồm danh sách dấu đầu dòng, menu điều hướng, trường văn bản
trong biểu mẫu, bảng có hàng và danh sách các cặp tiêu đề/tóm tắt. Lưu ý sự lặp lại xen kẽ được sử
dụng trong hai ví dụ sau. Sự lặp lại xen kẽ có thể trông đẹp mắt khi được thực hiện tốt và có thể thiết
lập nhịp điệu hình ảnh đẹp mắt trên trang.

Nhóm các mục liên quan vật phẩm ngang hàng

Phân biệt một mục giữa các đồng nghiệp Danh sách các mặt hàng

Văn bản được thụt lề và thu nhỏ nằm dưới phần tử mạnh hơn sẽ sửa đổi phần tử mạnh hơn đó. Chú
thích hình ảnh, văn bản phụ, nhận xét, v.v. tất cả đều hoạt động theo cách này (xem Hình 4-8).
136Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Ngăn chặn ngụ ý mối quan hệ cha/con (xem Hình 4-9). Sử dụng các ô, khối màu nền,Tab mô-đun,
đàn accordionvà các khối văn bản hoặc nhóm công cụ được bao quanh bởi khoảng trắng để chứa
và lồng các mục liên quan (xem nguyên tắc Gestalt củaKhép kíntrong thanh bên sắp tới). Việc
thụt lề cũng bao hàm các mối quan hệ cha/con trong ngữ cảnh của một phác thảo hoặc một
menu phân cấp.

Chú thích và bình luận ngăn chặn

Luồng thị giác xử lý các dấu vết mà mắt người đọc có xu hướng dõi theo khi họ quét trang. Tất nhiên,
nó có liên quan mật thiết đến hệ thống phân cấp thị giác—một hệ thống phân cấp thị giác được thiết
kế tốt sẽ thiết lập các tiêu điểm trên trang ở bất cứ nơi nào bạn cần thu hút sự chú ý đến các yếu tố
quan trọng nhất và luồng thị giác dẫn mắt từ những yếu tố đó đến thông tin ít quan trọng hơn. Là
một nhà thiết kế, bạn muốn có thể kiểm soát luồng trực quan trên một trang để mọi người theo dõi
nó theo đúng trình tự.

Một số lực lượng có thể hoạt động chống lại nhau khi bạn cố gắng thiết lập luồng trực quan. Một là xu hướng đọc
từ trên xuống dưới và từ trái sang phải của chúng ta. Khi đối mặt với một trang văn bản đơn điệu, đó là điều bạn
sẽ làm một cách tự nhiên; nhưng nếu có những tiêu điểm mạnh trên trang, chúng có thể khiến bạn mất tập trung
vào tiến trình thông thường, theo hướng tốt hơn hoặc tồi tệ hơn.

Tiêu điểmlà những điểm mà đôi mắt của bạn không thể cưỡng lại được. Bạn có xu hướng theo dõi chúng từ điểm
mạnh nhất đến điểm yếu nhất và các trang được thiết kế khéo léo chỉ có một số ít—quá nhiều tiêu điểm làm giảm
tầm quan trọng của từng điểm. Một hệ thống phân cấp thị giác tốt sử dụng các tiêu điểm để kéo mắt đến đúng nơi
theo đúng thứ tự.

Lần tới khi bạn chọn một tạp chí, hãy xem một số quảng cáo được thiết kế đẹp mắt và để ý xem mắt bạn
hướng về đâu. Những nghệ sĩ đồ họa thương mại giỏi nhất là những bậc thầy trong việc thiết lập các tiêu
điểm để điều khiển những gì bạn nhìn thấy đầu tiên.
 Khái niệm cơ bản về bố cục trang137

Vì vậy, làm thế nào để bạn tạo ra một dòng chảy hình ảnh tốt? Một cách đơn giản là sử dụng các đường ngụ
ý, cong hoặc thẳng, để kết nối các thành phần trên trang (xem Hình 4-10). Điều này tạo ra một câu chuyện
trực quan để người xem theo dõi.

Dòng ngụ ý cho dòng chảy trực quan

Đặt lời kêu gọi hành động sau văn bản bạn muốn người xem đọc trước. Nếu bạn không quan tâm liệu họ có đọc
nó hay không, bạn có thể tách biệt các lời kêu gọi hành động bằng khoảng trắng (xem Hình 4-11).

Kêu gọi hành động, cả trong luồng và ngoài luồng

Tương tự như vậy, nếu bạn đang thiết kế một biểu mẫu, hãy sắp xếp các điều khiển dọc
theo một đường liên tục và đặt các nút “Tôi đã hoàn tất” (OK, Hủy, Gửi, Mua, v.v.) ở cuối
dòng đó (xem Hình 4-12 ). Xem các mẫuCăn Phải/TráiVàcân bằng đường chéocho hai cách tiếp
cận cụ thể để tạo bố cục vàNút “Hoàn thành” nổi bậttrong Chương 6.
138Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Nút OK ở cuối biểu mẫu

Không khó để thiết lập một bố cục trôi chảy, nhưng hãy cảnh giác với những lựa chọn bố cục hoạt động ngược
dòng chảy. Nếu bạn muốn người xem đọc câu chuyện và đề xuất giá trị của trang web, hãy sắp xếp các phần quan
trọng của câu chuyện đó theo một dòng liên tục và không làm gián đoạn nó bằng các phần bổ sung bắt mắt. Nếu
bạn đang thiết kế một biểu mẫu hoặc bộ công cụ tương tác, đừng phân tán các điều khiển trên khắp trang—điều
đó chỉ buộc người dùng phải làm việc chăm chỉ hơn để tìm thấy chúng.

Hình 4-13 cho thấy một ví dụ rất nghèo nàn về luồng hình ảnh và hệ thống phân cấp hình
ảnh. Có bao nhiêu tiêu điểm, và làm thế nào để chúng cạnh tranh với nhau? Mắt bạn muốn
nhìn vào đâu trước tiên, và tại sao? Trang này nói gì là quan trọng?

Hệ thống phân cấp trực quan lộn xộn của Weather Underground
 Khái niệm cơ bản về bố cục trang139

Lý thuyết đằng sau việc nhóm và liên kết được phát triển vào đầu thế kỷ 20 bởi các nhà tâm lý học
Gestalt. Họ đã mô tả một số thuộc tính bố cục dường như được gắn chặt vào hệ thống trực quan của
chúng tôi. Trong số đó có những điều sau đây:

tiệm cận
Đặt mọi thứ gần nhau và người xem sẽ liên kết chúng với nhau. Đây là cơ sở để nhóm nội
dung và điều khiển chặt chẽ trên giao diện người dùng.

tương tự
Ví dụ: nếu hai vật có hình dạng, kích thước, màu sắc hoặc hướng giống nhau, người xem cũng sẽ
liên tưởng chúng với nhau.

Liên tục
Mắt chúng ta muốn nhìn thấy các đường và đường cong liên tục được hình thành do sự sắp xếp của các phần tử nhỏ
hơn.

Khép kín
Chúng tôi cũng muốn xem các hình thức khép kín đơn giản, chẳng hạn như hình chữ nhật và đốm màu trắng,
không được vẽ rõ ràng cho chúng tôi. Các nhóm sự vật thường có dạng khép kín.

Hình 4-14 mô tả bốn bố cục này và chỉ ra cách bạn có thể kết hợp chúng để tạo ra một thiết kế
tổng thể hiệu quả.

Cũng quan trọng như chúng là riêng lẻ, những nguyên tắc này được sử dụng tốt nhất khi kết hợp với nhau.
Một lần nữa, dự phòng là hữu ích; nhóm thứ năm trông giống một bố cục trang thực tế hơn là một bức
tranh khảm kiểu cổ điển.

Tiếp tục và đóng cửa, sau đó, giải thích sự liên kết. Khi bạn căn chỉnh mọi thứ, bạn tạo thành một đường liên tục với
các cạnh của chúng và người dùng sẽ đi theo đường đó và (có lẽ trong tiềm thức) giả định một mối quan hệ. Nếu
các mục được căn chỉnh đủ mạch lạc để tạo thành một hình—hoặc để tạo thành một hình từ khoảng trắng hoặc
“khoảng trống” xung quanh nó—việc đóng cũng đang hoạt động, làm tăng thêm hiệu ứng.

tiệm cận tương tự

Liên tục Khép kín

Tất cả cùng nhau bây giờ

Bốn nguyên tắc Gestalt

140Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Mọi thứ tôi đã thảo luận cho đến nay đều áp dụng như nhau cho giao diện người dùng, trang web, áp
phích, bảng quảng cáo và trang tạp chí. Họ xử lý các khía cạnh tĩnh của bố cục. À, nhưng bạn có một màn
hình máy tính động để làm việc—và đột nhiên thời gian trở thành một chiều khác của thiết kế! Cũng quan
trọng không kém, máy tính cho phép người dùng tương tác với bố cục ở mức độ mà hầu hết những thứ
được in không thể làm được.

Có rất nhiều cách bạn có thể tận dụng tính năng động của màn hình máy tính. Ví dụ, hãy xem xét việc sử
dụng không gian—ngay cả những màn hình máy tính lớn nhất dành cho người tiêu dùng cũng có ít không
gian sử dụng hơn, chẳng hạn như một tấm áp phích hoặc một trang báo. Đó là cuộc sống. Nếu bạn thiết kế
cho thiết bị di động, thì bạn có một không gian đặc biệt nhỏ để làm việc. Có nhiều kỹ thuật năng động để sử
dụng không gian đó để trình bày nhiều nội dung hơn mức bạn có thể hiển thị cùng một lúc.

Tất nhiên, thanh cuộn là một cách rất phổ biến để trình bày một “khung nhìn” nhỏ lên một vật lớn,
chẳng hạn như văn bản, hình ảnh hoặc bảng. Thanh cuộn cho phép người dùng di chuyển theo ý
muốn, theo một hoặc hai chiều (nhưng vui lòng không sử dụng cuộn ngang với văn bản).

Hoặc, nếu bạn có thể cắt nội dung thành các phần mạch lạc, bạn có một số tùy chọn—
Tab mô-đun,đàn accordion,Tấm có thể gập lại, Vàtấm di độngtất cả đặt một số kiểm soát bố trí
vào tay người dùng, không giống như tĩnh hơnPhần có tiêu đề. (Bạn cũng có thể chia nhỏ nội dung trên nhiều
trang ảo và cho phép người dùng điều hướng giữa các trang đó; xem Chương 3.) Các mẫu này gọi thời gian
bằng cách cho phép người dùng xem các nội dung khác nhau tại các thời điểm khác nhau mà họ chọn.

Nếu bạn muốn hướng người dùng qua một chuỗi các bước,Kích hoạt đáp ứngVà
tiết lộ đáp ứnglà hai cách lâu đời để làm như vậy.

Các mẫu của chương này cung cấp cho bạn những cách cụ thể để áp dụng tất cả các khái niệm bố cục này.

Ba địa chỉ đầu tiên giải quyết hệ thống phân cấp trực quan của toàn bộ trang, màn hình
hoặc cửa sổ, bất kể loại nội dung bạn đưa vào trang đó. Bạn nên xem xétKhung trực quan
khá sớm trong một dự án, vì nó ảnh hưởng đến tất cả các trang và cửa sổ chính trong một giao diện.

1.Khung trực quan

Bạn có một điều quan trọng duy nhất để hiển thị trên trang hoặc một số tính năng hoặc tùy chọn có tầm quan trọng
tương tự không?Trung tâm sân khấuáp dụng cho các trang chứa một mục hoặc nhiệm vụ chính duy nhất với các mục hoặc
nhiệm vụ nhỏ khác xung quanh nó, trong khi đóLưới đẳng thứclàm cho một số mục "ngang hàng" trông giống nhau. (Tất
nhiên, bạn có thể sử dụng cả hai trong các phần riêng biệt của một trang lớn.)

2.Trung tâm sân khấu

3.Lưới đẳng thức

 các mẫu141

Nhóm các mẫu tiếp theo đại diện cho các cách khác nhau để "phân đoạn" nội dung trên một trang
hoặc cửa sổ. Chúng hữu ích khi bạn có nhiều nội dung hơn mức bạn có thể đặt thoải mái trên trang
cùng một lúc. Tất cả các phần khác nhau có nên hiển thị cùng một lúc hay chúng có thể được xem độc
lập? Người dùng có thể thao tác với các phần đó trên trang hay có thể bỏ qua những phần bị ẩn
không? Các mẫu này cũng xử lý hệ thống phân cấp trực quan, nhưng chúng cũng liên quan đến tính
tương tác và chúng có thể giúp bạn chọn trong số các cơ chế cụ thể có sẵn trong bộ công cụ giao diện
người dùng.

4.Phần có tiêu đề
5.Tab mô-đun
6.đàn phong cầm

7.Tấm có thể gập lại

số 8.tấm di động
Căn Phải/TráiVàcân bằng đường chéodựa trên các khái niệm về luồng trực quan, căn chỉnh và những thứ
khác được thảo luận trong phần giới thiệu của chương. Chúng xử lý các mối quan hệ không gian giữa
các thành phần nhỏ hơn, tĩnh hơn trên một trang, chẳng hạn như văn bản và điều khiển.

9.Căn Phải/Trái
10.cân bằng đường chéo

Ba mẫu cuối cùng xử lý các khía cạnh động của bố cục nội dung.tiết lộ đáp ứngVàKích hoạt đáp ứnglà hai
cách hướng dẫn người dùng thông qua một loạt các bước hoặc một tập hợp các tùy chọn; chúng chỉ
ra những gì có thể được thực hiện tại bất kỳ thời điểm nào, đồng thời ngăn người dùng đi lạc vào
những khu vực có thể khiến cô ấy gặp rắc rối.bố trí chất lỏnglà một kỹ thuật để sắp xếp một trang có
thể thay đổi kích thước và hình dạng theo ý thích của người dùng.

11.tiết lộ đáp ứng

12.Kích hoạt đáp ứng
13.bố trí chất lỏng

JAQK
142Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Thiết kế mỗi trang để sử dụng cùng bố cục cơ bản, màu sắc và các yếu tố phong cách, nhưng cung cấp cho
thiết kế đủ linh hoạt để xử lý các nội dung trang khác nhau.

Bạn đang xây dựng một trang web có nhiều trang hoặc giao diện người dùng có nhiều cửa sổ—nói cách
khác, gần như bất kỳ phần mềm phức tạp nào. Bạn muốn nó “kết hợp với nhau” và trông giống như một
thứ, được thiết kế có chủ ý; bạn muốn nó dễ sử dụng và điều hướng.

Khi một giao diện người dùng sử dụng màu sắc, phông chữ và bố cục nhất quán, đồng thời khi tiêu đề
và các biển chỉ dẫn hỗ trợ điều hướng—ở cùng một vị trí mọi lúc, người dùng sẽ biết họ đang ở đâu và
tìm mọi thứ ở đâu. Họ không phải tìm ra bố cục mới mỗi khi họ chuyển ngữ cảnh từ trang này sang
cửa sổ khác.

Bạn đã bao giờ nhìn thấy một cuốn sách trong đó số trang và tiêu đề ở một vị trí khác nhau trên
mỗi trang chưa?

Khung hình ảnh mạnh mẽ, được lặp lại trên mỗi trang giúp nội dung trang nổi bật hơn.
Cái không đổi đó mờ dần trong nhận thức của người dùng; những gì thay đổi được chú
ý. Hơn nữa, việc thêm đủ ký tự vào thiết kế của khung trực quan sẽ giúp xây dựng
thương hiệu cho trang web hoặc sản phẩm của bạn—các trang trở nên dễ nhận biết là
của bạn.

Vẽ một giao diện tổng thể sẽ được chia sẻ giữa tất cả các trang hoặc cửa sổ. Các trang chủ và
cửa sổ chính là “đặc biệt” và thường được bố trí khác với các trang bên trong, nhưng chúng vẫn
phải chia sẻ một số đặc điểm nhất định với phần còn lại của trang web. Ví dụ:

Màu sắc

Nền, màu văn bản, màu nhấn và các màu khác

Phông chữ

Đối với tiêu đề, phụ đề, văn bản thông thường, văn bản chú thích và văn bản phụ

Phong cách viết và ngữ pháp

Tiêu đề, tên, nội dung, mô tả ngắn, bất kỳ khối văn bản dài nào và bất kỳ thứ gì khác sử
dụng ngôn ngữ
 các mẫu143

Tất cả các trang hoặc cửa sổ khác cũng nên chia sẻ thông tin sau, nếu phù hợp:

• Biển chỉ dẫn “Bạn đang ở đây”, chẳng hạn như tiêu đề, logo,vụn bánh mìđường mòn, điều hướng
toàn cầu với các chỉ báo của trang hiện tại vàTab mô-đun

• Các thiết bị điều hướng, bao gồm điều hướng toàn cầu và tiện ích, nút OK/Hủy, nút
Quay lại, nút Thoát hoặc Thoát và các mẫu điều hướng nhưBản đồ trình tự
Vàvụn bánh mì(tất cả trong Chương 3)

• Các kỹ thuật được sử dụng để xác địnhPhần có tiêu đề

• Giãn cách và căn chỉnh, bao gồm lề trang, giãn cách dòng, khoảng cách giữa các nhãn và các điều khiển
được liên kết của chúng cũng như căn chỉnh văn bản và nhãn

• Bố cục tổng thể hoặc vị trí của mọi thứ trên trang, trong cột và/hoặc hàng, có
tính đến các vấn đề về lề và khoảng cách đã liệt kê trước đó
Nếu bạn quen thuộc với các khái niệm thiết kế đồ họa, bạn có thể nhận ra một số kỹ thuật này bao
gồm mộtlưới bố cục.Lưới bố cục là một mẫu cấu trúc cho một tập hợp các trang hoặc bố cục. Mỗi
trang riêng lẻ là khác nhau, nhưng tất cả đều sử dụng các lề được chỉ định và căn chỉnh nội dung của
chúng dọc theo các đường lưới vô hình. TốtKhung trực quanthực sự bao gồm lưới bố cục, nhưng nó
cũng bao gồm các khía cạnh khác của giao diện, chẳng hạn như màu sắc, chi tiết hình ảnh và phong
cách viết.

Thực hiện mộtKhung trực quansẽ buộc bạn phải tách các khía cạnh phong cách của giao diện người
dùng khỏi nội dung. Đây không phải là một điều xấu. Nếu bạn chỉ xác định khung ở một nơi—chẳng
hạn như biểu định kiểu CSS hoặc lớp Java—thì nó cho phép bạn thay đổi khung độc lập với nội dung,
điều đó có nghĩa là bạn có thể điều chỉnh và làm cho đúng dễ dàng hơn. (Đó cũng là một thực hành kỹ
thuật phần mềm tốt.)

Trang web của JetBlue sử dụng bảng màu hạn chế, tiêu đề mạnh và sử dụng nhất quán các phông chữ và hình chữ
nhật cong trong trang web của nó.Khung trực quan(xem Hình 4-16). Ngay cả trang đăng nhập và hộp thoại phương
thức cũng sử dụng các yếu tố này; họ không nhìn ra khỏi chỗ.

Theo cách tương tự, trang web của TED sử dụng màu sắc hạn chế và lưới bố cục để duy trì tính nhất quán (xem
Hình 4-17). Nó có một vấn đề thú vị phổ biến hơn là nó có thể xuất hiện: các trang web phụ hoặc trang web liên
quan của nó (chẳng hạn như blog và trang web hội nghị của nó) phải trông hơi giống trang web chính của TED,
nhưng vẫn có những đặc điểm nhận dạng trực quan riêng biệt. Trong trường hợp này, hai trang có liên quan chia
sẻ hầu hết các yếu tố khung của chúng với trang TED, với một số điểm khác biệt chính (xem Hình 4-18).
144Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Trang web JetBlue

trang web TED

 các mẫu145

Các trang web liên quan đến TED, với các khung trực quan có liên quan nhưng hơi khác

trình chỉnh sửa flash

Đặt phần quan trọng nhất của giao diện người dùng vào tiểu mục lớn nhất của trang hoặc cửa sổ; nhóm các
công cụ phụ và nội dung xung quanh nó trong các bảng nhỏ hơn.
146Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Công việc chính của trang là hiển thị một đơn vị thông tin nhất quán cho người dùng, cho phép anh ta chỉnh
sửa tài liệu hoặc cho phép anh ta thực hiện một tác vụ nhất định. Nội dung và chức năng khác là thứ yếu
cho nội dung này. Nhiều loại giao diện có thể sử dụng mộtTrung tâm sân khấu—bảng và bảng tính, biểu mẫu
và trình chỉnh sửa đồ họa đều đủ điều kiện. Các trang web hiển thị các bài báo, hình ảnh hoặc tính năng đơn
lẻ cũng vậy.

Thiết kế nên hướng mắt người dùng ngay lập tức đến phần đầu của thông tin (hoặc nhiệm
vụ) quan trọng nhất thay vì để họ lang thang trên trang một cách bối rối. Một thực thể
trung tâm rõ ràng thu hút sự chú ý của người dùng. Giống như câu dẫn đầu trong một bài
báo thiết lập chủ đề và mục đích của bài báo, thực thể trong Giai đoạn Trung tâm thiết lập
mục đích của giao diện người dùng.

Khi đã xong, người dùng sẽ đánh giá các mục ở ngoại vi về cách chúng liên quan đến những gì ở
trung tâm. Điều này dễ dàng hơn cho người dùng so với việc quét đi quét lại trang để cố gắng tìm ra
nó. Điều gì đến trước? Thứ hai là gì? Làm thế nào để điều này liên quan đến điều đó? Và như thế.

Thiết lập một hệ thống phân cấp trực quan với nội dung hoặc tài liệu chính thống trị mọi
thứ khác. Xem phần giới thiệu chương để thảo luận về phân cấp thị giác. Khi thiết kế một
Trung tâm sân khấu, hãy xem xét các yếu tố cụ thể này, mặc dù không có yếu tố nào là bắt
buộc:

Kích cỡ

CácTrung tâm sân khấunội dung phải rộng ít nhất gấp đôi so với bất kỳ nội dung nào ở lề bên và cao gấp
đôi so với lề trên và dưới của nội dung. (Người dùng có thể thay đổi kích thước của nó trong một số
giao diện người dùng, nhưng đây là cách nó sẽ như vậy khi người dùng nhìn thấy nó lần đầu tiên.) Giữ
nguyên nếp gấplưu ý—khi sử dụng màn hình nhỏ, nội dung sẽ bị cắt ở đâu ở phía dưới? Hãy đảm bảo
rằngTrung tâm sân khấuvẫn chiếm nhiều không gian trong màn hình đầu tiên hơn bất kỳ thứ gì khác.

Màu sắc

Sử dụng màu tương phản với các mục trong lề. Trong giao diện người dùng máy tính để bàn, màu trắng hoạt
động tốt so với màu xám của Windows, đặc biệt là đối với bảng và cây cối. Khi điều đó xảy ra, màu trắng cũng
thường hoạt động trong các trang web, vì quảng cáo và thanh điều hướng thường sử dụng các màu khác
làm nền của chúng; Ngoài ra, người dùng web đã được "đào tạo" theo quy ước để tìm kiếm văn bản thuần
túy trên nền trắng.

tiêu đề
Các tiêu đề lớn là tiêu điểm và có thể thu hút sự chú ý của người dùng lên đầu trangTrung tâm sân khấu.
Tất nhiên, điều đó cũng xảy ra trong phương tiện in ấn. Xem phần giới thiệu chương và
Phần có tiêu đềđể biết thêm.
 các mẫu147

Bối cảnh
Người dùng muốn xem gì khi mở trang? Một biên tập viên đồ họa? Một bài báo văn bản dài? Bản đồ? Một cây
hệ thống tập tin? Làm việc với định kiến của cô ấy; đặt cái đó vàoTrung tâm sân khấuvà làm cho nó dễ nhận
biết. Người dùng sẽ tìm kiếm nó—điều này vượt trội hơn tất cả các quy tắc khác về nhận thức trực quan.
(Nhưng điều đó không có nghĩa là bạn có thể làm cô ấy thất vọng bằng cách ẩn đi những gì cô ấy đang tìm
kiếm! Một số trang web đưa nội dung chính của họ xuống dưới trang đến mức nằm dưới màn hình đầu tiên
trong các cửa sổ ngắn, yêu cầu người dùng phải cuộn xuống để tìm. tàn bạo.)

Lưu ý rằng tôi đã không đề cập đến một biến bố cục truyền thống: vị trí. Không quan trọng bạn đặt ở
đâuTrung tâm sân khấu—trên, trái, phải, dưới, giữa, bất kỳ thứ gì cũng có thể hoạt động được. Nếu nó
đủ lớn, dù sao nó cũng sẽ ít nhiều nằm ở trung tâm. Lưu ý rằng các thể loại được thiết lập tốt có các
quy ước về những gì sẽ đi vào lề nào, chẳng hạn như thanh công cụ trên đầu trình chỉnh sửa đồ họa
hoặc thanh điều hướng ở bên trái của trang web. Hãy sáng tạo, nhưng với đôi mắt của bạn mở. Nếu
bạn còn nghi ngờ, hãy chụp ảnh màn hình bố cục, thu nhỏ, làm mờ và hỏi ai đó xem họ nghĩ nội dung
chính nên bắt đầu từ đâu. Một lần nữa, hãy xem phần giới thiệu chương để biết ví dụ.

Trình soạn thảo văn bản của Google Tài liệu dành gần như toàn bộ không gian theo chiều ngang của nó cho tài
liệu đang được chỉnh sửa; trình soạn thảo bảng tính của nó cũng vậy. Ngay cả những công cụ ở đầu trang cũng
không chiếm nhiều dung lượng. Kết quả là một cái nhìn sạch sẽ và cân đối (xem Hình 4-20).

Trình soạn thảo văn bản Google Tài liệu

Nội dung dựa trên văn bản chẳng hạn như các bài viết trên blog thường có quá nhiều mục bên lề. Các
trang dành cho Newfangled (Hình 4-21) và Steepster (Hình 4-22) cung cấp cho nội dung chính của
chúng đủ không gian để cạnh tranh với điều hướng và các tính năng ngoại vi khác.
148Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Lưu ý tỷ lệ phần trăm không gian dành cho bài viết chính của cả hai trang web này và mức độ
cao trên trang mà bài viết bắt đầu.

bài viết mới lạ

Bài báo gác mái

http://www.welie.com/patterns/showPattern.php?patternID=center-stage
 các mẫu149

Nike

Sắp xếp các mục nội dung trong một lưới hoặc ma trận. Mỗi mục phải tuân theo một mẫu chung và trọng
lượng hình ảnh của mỗi mục phải tương tự nhau. Liên kết đến các trang nhảy khi cần thiết.

Trang chứa nhiều mục nội dung có phong cách và tầm quan trọng tương tự, chẳng hạn như các
bài báo, bài đăng trên blog, sản phẩm hoặc lĩnh vực chủ đề. Bạn muốn cung cấp cho người xem
nhiều cơ hội để xem trước và chọn các mục này.

Một lưới cung cấp cho mỗi mục không gian bằng nhau thông báo rằng chúng có tầm quan trọng như
nhau. Mẫu chung cho các mục trong lưới cho người dùng biết rằng các mục tương tự nhau. Cùng với
nhau, các kỹ thuật này thiết lập một hệ thống phân cấp trực quan mạnh mẽ phù hợp với ngữ nghĩa
của nội dung của bạn.

Lưới trông gọn gàng, có trật tự và êm dịu. Điều đó có thể phù hợp với phong cách của trang web hoặc ứng dụng của bạn.

Tìm hiểu cách bố trí từng mục trong lưới. Họ có hình thu nhỏ hoặc đồ họa không? Tiêu đề, tiêu đề
phụ, văn bản tóm tắt? Liên kết đến các trang nhảy (ví dụ: một trang có toàn bộ câu chuyện)? Kết xuất
chúng không chỉ bằng các khối văn bản nội dung: tạo các tiêu đề có màu sắc khác nhau, sáng tạo với
khoảng trắng và sử dụng hình ảnh nếu bạn có thể làm như vậy đồng đều trên tất cả các mục. Thử
nghiệm các cách để sắp xếp tất cả thông tin phù hợp vào một không gian tương đối nhỏ, dài, rộng
hoặc vuông—và áp dụng mẫu đó cho các mục bạn cần hiển thị.
 150Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Bây giờ sắp xếp các mục trong một lưới. Bạn có thể sử dụng một hàng hoặc một ma trận có hai, ba hoặc nhiều
mục rộng hơn. Xem xét chiều rộng của trang khi bạn thực hiện công việc thiết kế này—thiết kế của bạn sẽ trông
như thế nào trong một cửa sổ hẹp? Hầu hết người dùng của bạn sẽ có cửa sổ trình duyệt lớn chứ? Điều gì xảy ra
trên các thiết bị di động nhỏ?

Bạn có thể chọn đánh dấu các mục lưới, theo cách tĩnh (để nhấn mạnh một mục so với các mục khác)
hoặc động khi người dùng di chuột qua các mục lưới đó. Sử dụng màu sắc và các thay đổi phong cách
khác, nhưng không thay đổi vị trí, kích thước hoặc các thành phần cấu trúc khác của các mục lưới—
bạn không muốn nội dung nhảy lung tung khi người dùng di chuột qua các mục khác nhau!

Một mô hình liên quan làLưới hình thu nhỏ, trong Chương 5. Đây là một cách hiển thị danh sách trong
ma trận 2D gồm các ảnh nhỏ, có thể kèm theo một lượng nhỏ văn bản với mỗi ảnh. Xem thêm
Danh sách hình thu nhỏ và văn bảnmẫu cho thiết kế di động (Chương 10). Đó là về một cột duy nhất, không phải là một lưới,

nhưng ý tưởng là như nhau: sử dụng một mẫu nhất quán, có kiểu dáng phong phú cho tất cả các mục trong danh sách.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Hulu (Hình 4-24), CNN (Hình 4-25) và Nike (Hình 4-23, được hiển thị ở trên cùng của mẫu) sử dụng một
khuôn mẫu cứng nhắc cho mỗi mục. Hiệu ứng tổng thể là nhịp nhàng và êm dịu. Lưu ý cách mỗi
trang web sử dụng sự cân bằng khác nhau giữa văn bản và hình ảnh.

Hulu
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu151

CNN

Các ví dụ từ MapQuest (Hình 4-26) và IBM (Hình 4-27) cho thấy cách thực hiện điều này chỉ với một
hàng mục. (Về mặt kỹ thuật, nó vẫn là một “lưới”.) Cách xử lý trực quan nhất quán đánh dấu các mục
này là các mục ngang hàng với nhau. Mỗi mục kết thúc bằng một hoặc nhiều liên kết và điều đó cũng
đúng với các ví dụ của Hulu và CNN. Hầu hết các ví dụ tôi đã thấy về mẫu này đều sử dụng nó để hiển
thị nội dung được liên kết.

Bản đồQuest
152Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Một trang bên trong trang web của IBM

Để biết một số ví dụ tuyệt vời, hãy xem “15 mẹo để thiết kế những chiếc bàn tuyệt vời,” của Joshua
Johnson:

http://designshack.co.uk/articles/css/15-tips-for-designing-terrific-tables

Các phần có tiêu đề của JetBlue

 các mẫu153

Xác định các phần nội dung riêng biệt bằng cách đặt cho mỗi phần một tiêu đề trực quan mạnh mẽ, phân
tách các phần một cách trực quan và sắp xếp chúng trên trang.

Bạn có nhiều nội dung để hiển thị, nhưng bạn muốn làm cho trang dễ quét và dễ hiểu, với
mọi thứ hiển thị. Bạn có thể nhóm nội dung thành các phần theo chủ đề hoặc theo nhiệm
vụ phù hợp với người dùng.

Các phần được xác định rõ ràng và được đặt tên rõ ràng sẽ cấu trúc nội dung thành các phần dễ hiểu,
giờ đây mỗi phần có thể hiểu được trong nháy mắt. Điều này làm cho cấu trúc thông tin trở nên rõ
ràng. (Xem phần giới thiệu của chương này để biết phần thảo luận về hệ thống phân cấp trực quan,
về cơ bản là hiển thị nội dung theo cách truyền đạt cấu trúc thực của nó. Xem thêm Chương 2 để biết
định nghĩa về kiến trúc thông tin.)

Khi người dùng nhìn thấy một trang được chia thành các phần gọn gàng như thế này, mắt của họ sẽ được hướng
dẫn dọc theo trang một cách thoải mái hơn. Hệ thống thị giác của con người luôn tìm kiếm các mẫu lớn hơn, cho
dù chúng có chủ ý hay không. Vì vậy, hãy đặt chúng vào một cách có chủ ý!

Đầu tiên, hiểu đúng kiến trúc thông tin—chia nội dung thành các phần mạch lạc, nếu nội dung đó
chưa được thực hiện cho bạn và đặt cho chúng những cái tên ngắn gọn, dễ nhớ. Tiếp theo, chọn một
bản trình bày:

• Đối với tiêu đề, hãy sử dụng kiểu chữ nổi bật so với phần còn lại của nội dung—đậm hơn, rộng hơn, kích
thước điểm lớn hơn, màu sắc đậm hơn, họ phông chữ khác, văn bản có vết lõm, v.v. Xem phần giới
thiệu chương để biết thêm về hệ thống phân cấp trực quan.

• Hãy thử đảo ngược tiêu đề trên một dải màu tương phản.

• Sử dụng khoảng trắng để phân tách các phần.

• Sử dụng các khối màu nền tương phản phía sau toàn bộ phần.
• Các hộp được làm từ các đường khắc, vát hoặc nổi quen thuộc trên giao diện người dùng máy tính để
bàn. Nhưng chúng có thể bị lạc—và chỉ trở thành nhiễu hình ảnh—nếu chúng quá lớn, quá gần nhau
hoặc lồng sâu vào nhau.
154Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Nếu trang vẫn còn quá nhiều, hãy thử sử dụngTab mô-đun, MỘTđàn phong cầm, hoặcTấm có thể
gập lạiđể ẩn một số nội dung.

Nếu bạn gặp khó khăn khi đặt tiêu đề hợp lý cho những đoạn nội dung này, thì đó có thể là dấu
hiệu cho thấy nhóm không phù hợp tự nhiên với nội dung. Cân nhắc sắp xếp lại nó thành các
phần khác nhau để dễ đặt tên và ghi nhớ hơn. Các danh mục “khác” cũng có thể là một dấu hiệu
của tổ chức không hoàn toàn phù hợp, mặc dù đôi khi chúng thực sự cần thiết.

Trong trang cài đặt tài khoản của mình, Amazon hiển thị ba cấp độ tiêu đề tương ứng với ba cấp độ
của hệ thống phân cấp trực quan: tiêu đề trang, tiêu đề phần (Đơn hàng, Thanh toán, Cài đặt) và phụ
đề trên đầu danh sách liên kết (xem Hình 4-29). Lưu ý việc sử dụng khoảng trắng, hộp và căn chỉnh để
cấu trúc trang.

Cài đặt tài khoản Amazon

Tiện ích đồng bộ hóa iPhone được hiển thị trong Hình 4-30 cho thấy một cách đẹp mắt để đặt các loại
nội dung rất khác nhau vào các hộp có tiêu đề. Các phần này thể hiện rất ít tính nhất quán bên trong
(ngoài kiểu chữ)—chúng không chia sẻ sơ đồ lưới, căn chỉnh hoặc bố cục chung. Nhưng các hộp và
khoảng trắng chia trang quá nhiều nên điều này không thực sự quan trọng.
 các mẫu155

Tiện ích đồng bộ iPhone

http://quince.infragistics.com/Patterns/Titled%20Sections.aspx

http://patternry.com/p=content-groups/

Bản đồQuest
156Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Đặt các mô-đun nội dung vào một khu vực được gắn thẻ nhỏ để mỗi lần chỉ hiển thị một mô-đun.
Người dùng nhấp vào các tab để đưa các mô-đun khác nhau lên đầu.

Bạn có nhiều nội dung không đồng nhất để hiển thị trên trang, có thể bao gồm khối văn bản,
danh sách, nút, điều khiển biểu mẫu hoặc hình ảnh. Bạn không có chỗ cho mọi thứ.

Một số nội dung trang có trong các nhóm hoặc mô-đun (hoặc có thể được sắp xếp thành các
nhóm nhất quán). Những mô-đun đó có các đặc điểm sau:

• Người dùng chỉ cần xem một mô-đun tại một thời điểm.

• Chúng có chiều dài và chiều cao tương tự nhau.

• Không có nhiều mô-đun—ít hơn 10 mô-đun và tốt nhất là một số ít mô-đun.

• Tập hợp các mô-đun khá tĩnh; các trang mới sẽ không được thêm thường xuyên, cũng như các trang hiện có sẽ
không được thay đổi hoặc xóa thường xuyên.

• Nội dung của các module có thể liên quan hoặc tương tự nhau.

Các tab hiện có mặt khắp nơi trong các giao diện máy tính để bàn và trang web. Không ai sẽ bị nhầm
lẫn bởi cách họ làm việc.

Nói chung, nhóm và ẩn các khối nội dung có thể là một kỹ thuật rất hiệu quả để giải mã giao
diện. Các tab hoạt động tốt; làm như vậyđàn accordion,tấm di động,Tấm có thể gập lại, và đơn giản là
sắp xếp mọi thứ vào một mạng lưới gọn gàng gồmPhần có tiêu đề.

Đầu tiên, hiểu đúng kiến trúc thông tin. Chia nội dung thành các phần mạch lạc, nếu nội dung đó
chưa được thực hiện cho bạn và đặt cho chúng những tiêu đề ngắn gọn, dễ nhớ (một hoặc hai từ, nếu
có thể). Hãy nhớ rằng nếu bạn phân chia nội dung không chính xác, người dùng sẽ buộc phải chuyển
đổi qua lại giữa các tab khi họ so sánh chúng hoặc tìm kiếm thông tin mà họ không thể tìm thấy. Hãy
tử tế với người dùng của bạn và kiểm tra cách bạn đã tổ chức nó.

Chỉ rõ tab đã chọn, chẳng hạn như bằng cách đặt tab liền kề với chính bảng điều khiển.
(Chỉ màu thôi là chưa đủ. Nếu bạn chỉ có hai tab, hãy đảm bảo rằng tab nào được chọn
và tab nào không được chọn rất rõ ràng.)
Nhưng các tab không nhất thiết phải là các tab theo nghĩa đen và chúng không nhất thiết phải ở trên cùng
của ngăn xếp mô-đun. Bạn có thể đặt chúng ở cột bên trái hoặc bên dưới hoặc thậm chí xoay 90 độ với văn
bản được đọc sang một bên.
 các mẫu157

Khi triển khai trên các trang web,Tab mô-đuncó xu hướng khác biệt với các tab điều hướng (những tab được
sử dụng để điều hướng toàn cầu hoặc các tài liệu riêng biệt hoặc để tải các trang mới). Tất nhiên, các tab
cũng hữu ích ở đó, nhưng mẫu này thiên về việc cung cấp cho người dùng một cách nhẹ nhàng để xem các
mô-đun nội dung thay thế trong một trang.

Nếu có quá nhiều tab để vừa với một không gian hẹp, bạn có thể thực hiện một trong số những điều
sau: rút ngắn nhãn bằng dấu chấm lửng (và do đó làm cho mỗi tab hẹp hơn) hoặc sử dụngbăng chuyền
-giống như các nút mũi tên để cuộn các tab. Bạn cũng có thể đặt nhãn tab ở cột bên trái thay vì đặt
chúng ở trên cùng. Không bao giờ gấp đôi các tab.

(Trong lần xuất bản đầu tiên của cuốn sách này, mô hình này được đặt tên là Card Stack. Tuy nhiên, hầu hết
mọi người hiện nay đều biết khái niệm này đơn giản là “các tab” vàTab mô-đunlà tên được sử dụng bởi ít nhất
hai thư viện mẫu khác.)

Microsoft Office cho Windows 7 sử dụng một “dải băng” trên cùng các tài liệu, thay vì menu và thanh
công cụ truyền thống (xem Hình 4-32). Dải băng về cơ bản là một tập hợp cácTab mô-đun.

Hai tab trên dải băng Excel

158Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Một sốTab mô-đuntrong Mac OS trông không giống như các tab—chúng trông giống như các nút. Tuy nhiên,
chúng hoạt động chính xác như các tab. Các tab ở trên cùng, được dán nhãn “Âm thanh”, “Ảnh”, “Phim” và
“Tiện ích” như minh họa trong Hình 4-33.

iWeb

Các tab cũng có thể hoạt động dọc theo các cạnh của mô-đun, như trong Hình 4-34.

NguồnForge
 các mẫu159

http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html

http://ui-patterns.com/patterns/ModuleTabs

http://www.welie.com/patterns/showPattern.php?patternID=tabbing

http://patternry.com/p=horizontal-module-tabs/

bảng từ

Đặt các mô-đun nội dung vào một chồng bảng thẳng hàng có thể đóng và mở
độc lập với nhau.

Bạn có nhiều nội dung không đồng nhất để hiển thị trên trang, có thể bao gồm khối văn bản,
danh sách, nút, điều khiển biểu mẫu hoặc hình ảnh. Bạn không có chỗ cho mọi thứ.

Một số nội dung trang có trong các nhóm hoặc mô-đun (hoặc có thể được sắp xếp thành các
nhóm nhất quán). Những mô-đun đó có các đặc điểm sau:
160Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

• Người dùng có thể muốn xem nhiều mô-đun cùng một lúc.

• Một số mô-đun cao hơn hoặc ngắn hơn nhiều so với các mô-đun khác, nhưng chúng đều có cùng chiều rộng.

• Các mô-đun là một phần của bảng công cụ, menu hai cấp hoặc một số hệ thống yếu tố
tương tác mạch lạc khác.

• Nội dung của các mô-đun có thể liên quan hoặc tương tự nhau.

• Bạn có thể muốn duy trì thứ tự tuyến tính của các mô-đun.

Cũng lưu ý rằng khi các mô-đun lớn đang mở hoặc nhiều mô-đun đang mở, các nhãn ở dưới cùng của
đàn phong cầmcó thể cuộn khỏi màn hình hoặc cửa sổ. Nếu đó là vấn đề đối với người dùng của bạn,
hãy cân nhắc sử dụng một giải pháp khác.

đàn accordionđã trở thành một yếu tố tương tác quen thuộc trên các trang web, gần như quen thuộc
nhưTab mô-đunvà các menu thả xuống. (Tuy nhiên, chúng không hoàn toàn đơn giản để sử dụng.)
Nhiều trang web sử dụngđàn accordiontrong hệ thống menu của họ để quản lý danh sách trang và
danh mục rất dài.

Nói chung, nhóm và ẩn các khối nội dung có thể là một kỹ thuật rất hiệu quả để giải mã
giao diện.đàn accordionlà một phần của bộ công cụ bao gồmTab mô-đun,di động
tấm,Tấm có thể gập lại, VàPhần có tiêu đềlàm như vậy.

đàn accordioncó thể hữu ích trong các hệ thống điều hướng trang web, nhưng chúng thực sự tỏa sáng trong các

ứng dụng dành cho máy tính để bàn. Các bảng công cụ đặc biệt hoạt động tốt vớiđàn accordion(Vàtấm di động
cũng như vì những lý do tương tự). Bởi vì người dùng có thể mở bất kỳ bộ mô-đun nào và để chúng mở,đàn
accordiongiúp người dùng sửa đổi “không gian sống” của họ theo cách phù hợp với họ. Tuy nhiên, thật dễ
dàng để mở lại một mô-đun hiếm khi được sử dụng khi cần.

Sắp xếp các mô-đun theo chiều dọc, theo thứ tự phù hợp với ứng dụng hoặc trang web cụ thể của
bạn. Đặt cho mỗi mô-đun một tiêu đề ngắn và mang tính mô tả, đồng thời đặt tiêu đề đó vào một
thanh ngang mà người dùng có thể nhấp vào để chuyển đổi mở và đóng mô-đun. Bạn có thể chỉ ra
“khả năng mở” của thanh tiêu đề mô-đun bằng biểu tượng hình tam giác xoay: hướng nó sang phải
khi đóng và hướng xuống dưới khi mở.

Cho phép mở nhiều mô-đun cùng một lúc. Có nhiều ý kiến khác nhau về điều này, một số nhà
thiết kế chỉ thích mở một mô-đun tại một thời điểm và một số triển khai chỉ cho phép một mô-
đun (hoặc ít nhất có một công tắc mà nhà phát triển có thể đặt). Nhưng theo kinh nghiệm của
tôi, đặc biệt là trong các ứng dụng, tốt hơn hết là để người dùng mở nhiều mô-đun cùng một
lúc. Nó tránh được sự biến mất đột ngột và bất ngờ của một mô-đun đã mở trước đó: “Này,
menu kia đi đâu rồi? Nó ở ngay đây!”

Khi được sử dụng trong một ứng dụng hoặc khi người dùng đăng nhập vào một trang web, mộtđàn phong cầmphải
duy trì trạng thái của các mô-đun đã mở và đóng giữa các phiên. Điều này không quan trọng đối với các menu điều
hướng cũng như đối với các bảng công cụ.
 các mẫu161

đàn accordioncó thể được lồng vào nhau nếu nội dung mô-đun cần chia nhỏ hơn nữa, nhưng chúng có
xu hướng trông khó hiểu. Người dùng khó phân biệt được sự khác biệt giữa bảng đàn accordion “bên
ngoài” và bảng đàn accordion “bên trong”; với tất cả mọi thứ trong một cột, không có sự rõ ràng đối
với hệ thống phân cấp ngăn chặn. Tốt hơn là chỉ sử dụng một bộ mô-đun đàn accordion phẳng và sử
dụng một số mẫu cấu trúc khác bên trong mô-đun (ví dụ: tab) nếu cần.

Kỹ thuật này đã tồn tại ít nhất từ năm 1993, và có thể sớm hơn. Trình xây dựng GUI dựa trên Motif được
gọi là UIM/X đã sử dụng các bảng có thể đóng được—ngay cả với các mũi tên xoắn xuống—cho các bảng
tiện ích của nó.

(Trong ấn bản đầu tiên của cuốn sách này, mẫu này được đặt tên là Các bảng có thể đóng được. Trong
những năm kể từ đó, cộng đồng trải nghiệm người dùng dường như đã ổn định với tên nàyđàn phong cầm
thay vì.)

Cửa sổ trình duyệt của Picasa sử dụng mộtđàn phong cầmđể hiển thị một số cách khác nhau để xem
hình ảnh của một người. Trong mỗi ngăn, nội dung có thể được chia nhỏ hoặc tổ chức hơn nữa, điều
mà Picasa thực hiện trong ví dụ ở Hình 4-36 vớiPhần có tiêu đề. Mặt khác, các công cụ dành cho nhà
phát triển của Chrome, làm tổđàn accordionbên trong nhau (xem Hình 4-37). Bạn có thể tìm ra kế hoạch
lồng nhau nếu bạn đủ chăm chú nhìn vào nó, nhưng điều đó không dễ dàng.

Thanh bên trái Picasa

162Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Thanh bên bên phải của Chrome, với các đàn xếp lồng vào nhau

CNN sử dụng mộtđàn phong cầmđể hiển thị tài liệu được cá nhân hóa (xem Hình 4-38). Chỉ một bảng
điều khiển có thể được mở cùng một lúc trong quá trình triển khai này. Nếu tùy thuộc vào tôi, tôi
muốn thấy cả hai bảng này mở cùng một lúc, nhưng có lẽ CNN có một lượng không gian dọc rất hạn
chế để làm việc.

thanh bên CNN

 các mẫu163

Như thể hiện trong Hình 4-39, Yahoo! Mạng nhà phát triển sử dụng mộtđàn phong cầmở chân trang để cho phép
người dùng ẩn và hiển thị các phần mà họ quan tâm (hoặc không quan tâm). Lưu ý việc sử dụng mộtSơ đồ trang
web, được mô tả trong Chương 3.

Yahoo! Chân trang mạng của nhà phát triển

http://developer.yahoo.com/ypotypes/navlation/accordion.html

http://ui-potypes.com/potypes/AccordionMenu

http://www.welie.com/patterns/showPattern.php?patternID=accordion

Thiết kế giao diện webcủa Bill Scott và Theresa Neil (O'Reilly,http://oreilly.com/catalog/

9780596516253/)cũng mô tả mộtđàn phong cầmmẫu.

bản đồ Google
164Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Đặt vật liệu thứ cấp hoặc tùy chọn vào các bảng mà người dùng có thể mở và đóng.

Bạn có nhiều nội dung không đồng nhất để hiển thị trên trang, có thể bao gồm khối văn
bản, danh sách, nút, điều khiển biểu mẫu hoặc hình ảnh. Bạn không có chỗ cho mọi thứ.
Bạn có thể, tuy nhiên, cóTrung tâm sân khấunội dung cần ưu tiên hình ảnh.

Một số nội dung trang có trong các nhóm hoặc mô-đun (hoặc có thể được sắp xếp thành các
nhóm nhất quán). Những mô-đun đó có các đặc điểm sau:

• Nội dung của chúng chú thích, sửa đổi, giải thích hoặc hỗ trợ nội dung trong phần
chính của trang.
• Các mô-đun có thể không đủ quan trọng để bất kỳ mô-đun nào được mở theo mặc định.

• Giá trị của chúng có thể thay đổi rất nhiều tùy theo người dùng. Một số sẽ thực sự muốn xem một mô-đun cụ
thể và những người khác sẽ không quan tâm đến nó.

• Ngay cả đối với một người dùng, một mô-đun đôi khi có thể hữu ích, nhưng không phải lúc khác. Khi nó không mở,
không gian của nó được sử dụng tốt hơn cho nội dung chính của trang.

• Người dùng có thể muốn mở nhiều module cùng một lúc.

• Các mô-đun có rất ít liên quan đến nhau. KhiTab mô-đunhoặcđàn accordion
được sử dụng, chúng nhóm các mô-đun lại với nhau, ngụ ý rằng chúng có liên quan với nhau;
Tấm có thể gập lạikhông nhóm chúng lại.

Ẩn các phần nội dung không quan trọng giúp đơn giản hóa giao diện. Khi người dùng
ẩn một mô-đun hỗ trợ nội dung chính, nó chỉ đơn giản là thu gọn lại, trả lại không gian
cho nội dung chính (hoặc khoảng trắng). Đây là một ví dụ về nguyên tắctiết lộ công
khai-hiển thị nội dung ẩn “đúng lúc”, khi nào và ở đâu người dùng cần.
Nói chung, nhóm và ẩn các khối nội dung có thể là một kỹ thuật rất hiệu quả để giải mã
giao diện.Tấm có thể gập lạilà một phần của bộ công cụ bao gồmTab mô-đun,
đàn accordion,tấm di động, VàPhần có tiêu đềlàm như vậy.

Đặt từng mô-đun hỗ trợ vào một bảng điều khiển mà người dùng có thể mở và đóng chỉ bằng một cú nhấp chuột.
Gắn nhãn cho nút hoặc liên kết bằng tên của mô-đun hoặc chỉ đơn giản là “Khác” và cân nhắc sử dụng hình chữ V
hoặc hình tam giác xoay để biểu thị rằng có nhiều nội dung hơn được ẩn ở đó. Khi người dùng đóng bảng điều
khiển, hãy thu gọn không gian được sử dụng bởi bảng điều khiển đó và dành nó cho nội dung khác (chẳng hạn
như bằng cách di chuyển nội dung bên dưới bảng đó lên trên trang).
 các mẫu165

Cân nhắc tạo hoạt ảnh cho các bảng khi chúng mở và đóng. Nó có vẻ ít bị lệch hơn khi
chúng mở và đóng lại một cách trơn tru.

Nếu bạn có nhiều mô-đun để ẩn theo cách này, bạn có thể đặt các mô-đun lại với nhau trên một
bảng vớiTab mô-đunhoặc mộtđàn phong cầm, hoặc đặt chúng ở những nơi riêng biệt trên trang
chính.

Nếu bạn thấy rằng hầu hết người dùng đang mở mộtBảng điều khiển có thể thu gọnđược đóng theo mặc định, hãy chuyển nó sang

trạng thái mở theo mặc định.

Google Maps, được hiển thị trong Hình 4-40 ở trên cùng của mẫu, cho thấy mức độ hữu ích của việc
thu gọn một bảng điều khiển đã hết thời gian sử dụng—khu vực bản đồ hiển thị sẽ lớn hơn đáng kể
nếu không có thanh bên.

Một số diễn đàn thảo luận, chẳng hạn như trong Hình 4-41, đặt các bình luận dài vào
Tấm có thể gập lại. Khách truy cập có thể đọc lướt qua các bình luận ngắn và bị cắt ngắn của trang để
hiểu được nội dung thảo luận và nếu một bình luận dài thu hút sự chú ý của họ, họ có thể mở bình
luận bị cắt ngắn đó để đọc toàn bộ nội dung.

Bình luận bài viết trên MSNBC

Nhiều ứng dụng hiển thị các thanh bên tùy chọn được đính kèm vớiTrung tâm sân khấucác cửa sổ. Thanh bên
của Firefox, được hiển thị trong Hình 4-42, được đóng chỉ bằng một cú nhấp chuột vào nút “X”, và người
dùng có thể đưa nó trở lại bằng cách chọn một mục menu (hoặc bằng cách sử dụng phím tắt). Lưu ý sự bất
đối xứng—ẩn nó dễ hơn nhiều so với hiển thị nó, ít nhất là cho đến khi người dùng ghi nhớ trình tự bàn
phím! Với một trang web hoặc với một ứng dụng không được sử dụng thường xuyên, một nút hiển thị để
đưa bảng điều khiển trở lại sẽ là lựa chọn tốt hơn.
166Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Thanh bên dấu trang Firefox

Tại thời điểm viết bài này, YouTube đặt nhiềuTấm có thể gập lạitrên trang của video (xem Hình
4-43). Chúng chứa nội dung bổ sung như mô tả video, số liệu thống kê xem và nhiều video khác
từ áp phích này (không được hiển thị trong hình). Trang thu hút sự chú ý đến các khu vực có thể
mở rộng này bằng cách đánh dấu chúng bằng màu xanh lam khi di chuột qua. Tất cả chúng đều
được đóng theo mặc định và chúng tự đóng khi trang được tải lại. Trang kết quả ít lộn xộn hơn
so với trang khác, trong khi vẫn cung cấp thông tin thú vị cho người dùng đủ cảm hứng để mở
các bảng này.
 các mẫu167

Bảng điều khiển có thể thu gọn của YouTube; ba trạng thái được hiển thị: không mở bảng điều khiển, mô tả video
mở bảng điều khiển và mở bảng thống kê (không thể mở cả hai cùng một lúc)
168Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

http://www.welie.com/patterns/showPattern.php?patternID=collapsible-panels

http://www.welie.com/patterns/showPattern.php?patternID=details-on-demand

http://quince. infragistics.com/Patterns/Closable%20Panels.aspx

Yahoo của tôi!

Đặt các mô-đun nội dung vào các hộp có thể mở và đóng độc lập với nhau. Sắp xếp các hộp một
cách tự do trên trang và cho phép người dùng di chuyển chúng xung quanh thành một cấu hình
tùy chỉnh.

Bạn đang thiết kế một ứng dụng dành cho máy tính để bàn hoặc một trang web mà hầu hết người dùng đăng nhập vào. Tin tức

cổng thông tin,bảng điều khiển, VàBảng màu Canvas Plusứng dụng thường sử dụngtấm di động. Bạn muốn người dùng
để cảm nhận quyền sở hữu phần mềm, hoặc ít nhất là cảm thấy vui vẻ khi chơi với nó.
 các mẫu169

Trang được đề cập là một phần chính của ứng dụng hoặc trang web—thứ mà người dùng nhìn thấy
thường xuyên hoặc trong thời gian dài. Bạn có nhiều nội dung không đồng nhất để hiển thị trên
trang, có thể bao gồm khối văn bản, danh sách, nút, điều khiển biểu mẫu hoặc hình ảnh. Bạn không
có chỗ cho mọi thứ.

Một số nội dung trang có trong các nhóm hoặc mô-đun (hoặc có thể được sắp xếp thành
các nhóm nhất quán). Những mô-đun đó có một số đặc điểm sau:

• Người dùng gần như chắc chắn sẽ muốn xem nhiều hơn một mô-đun cùng một lúc.

• Giá trị của chúng có thể thay đổi rất nhiều tùy theo người dùng. Một số người muốn các mô-đun A, B và C, trong khi
những người khác hoàn toàn không cần những mô-đun đó và chỉ muốn xem D, E và F.

• Các module khác nhau rất nhiều về kích thước.

• Vị trí của họ trên trang không quá quan trọng đối với bạn nhưng có thể là đối với người dùng.
(Ngược lại, một trang tĩnhPhần có tiêu đềnên được sắp xếp với suy nghĩ về tầm quan trọng của vị
trí trang; chẳng hạn như những thứ quan trọng sẽ được đưa lên đầu.)

• Có nhiều mô-đun—có thể nhiều đến mức nếu hiển thị tất cả cùng một lúc, người
xem sẽ bị choáng ngợp. Bạn hoặc người dùng nên chọn và chọn trong số đó.
• Bạn sẵn sàng cho phép người dùng ẩn hoàn toàn một số mô-đun khỏi chế độ xem (và cung cấp cơ
chế để đưa chúng trở lại).

• Các mô-đun có thể là một phần của bảng công cụ hoặc một số hệ thống nhất quán khác của các yếu tố
tương tác.

Những người dùng khác nhau có những sở thích khác nhau. Các trang web như bảng điều khiển và cổng thông tin
hữu ích nhất cho mọi người khi họ có thể chọn nội dung mà họ xem.

Khi họ sẽ làm việc gì đó trong một thời gian trong một ứng dụng dành cho máy tính để bàn, mọi người muốn sắp
xếp lại môi trường của họ cho phù hợp với phong cách làm việc của họ. Họ có thể đặt các công cụ cần thiết gần nơi
họ làm việc; họ có thể giấu đi những thứ mà họ không cần đến; họ có thể sử dụngBộ nhớ không gian
(Chương 1) để nhớ nơi họ đặt đồ vật. Nói một cách hợp lý,tấm di độnggiúp người dùng
hoàn thành công việc hiệu quả và thoải mái hơn (về lâu dài—khi họ đã dành thời gian
sắp xếp lại môi trường của mình theo cách họ muốn!).
Nhưng kiểu cá nhân hóa này dường như cũng thu hút mọi người ở một số cấp độ khác. Chẳng
hạn, họ có thể làm điều này trên các trang web ít được truy cập, cung cấp một số loại hình giải
trí. Cá nhân hóa có thể tăng mức độ tương tác và mua hàng.

Cuối cùng, mộttấm di độngthiết kế dễ dàng chứa các mô-đun mới được giới thiệu theo thời gian, chẳng hạn
như các mô-đun do bên thứ ba đóng góp.
170Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Đặt tên cho mỗi mô-đun, thanh tiêu đề và kích thước mặc định, đồng thời sắp xếp chúng trên trang theo
cấu hình mặc định hợp lý. Cho phép người dùng di chuyển các mô-đun xung quanh trang theo ý muốn,
thông qua kéo và thả nếu có thể. Cho phép mở và đóng từng mô-đun bằng một cử chỉ đơn giản, chẳng hạn
như nhấp chuột vào nút trên thanh tiêu đề.

Tùy thuộc vào thiết kế bạn đã chọn, bạn có thể muốn cho phép người dùng tự do đặt các phần
này ở bất kỳ đâu, ngay cả khi chúng chồng lên nhau. Hoặc bạn có thể muốn có một lưới bố cục
được xác định trước với các “khe” nơi có thể kéo và thả các phần—điều này cho phép trang duy
trì sự liên kết (và một số cảm giác trang trọng!) mà không khiến người dùng mất quá nhiều thời
gian để loay hoay với các cửa sổ. Một số thiết kế sử dụngbóng ma—các mục tiêu thả lớn xuất
hiện linh hoạt; ví dụ: các hình chữ nhật có chấm—để hiển thị vị trí mô-đun được kéo sẽ đi khi bị
rơi.

Cân nhắc cho phép người dùng xóa hoàn toàn các mô-đun. Nút “X” trên thanh tiêu đề là cách quen thuộc để
xóa một nút. Khi một mô-đun không còn nữa, làm thế nào để người dùng mang nó trở lại? Cho phép người
dùng thêm các mô-đun—kể cả những mô-đun hoàn toàn mới, có thể là—từ danh sách các mô-đun có sẵn
có thể duyệt và tìm kiếm.

Các mô-đun có thể cho phép tùy chỉnh riêng lẻ; họ có thể cung cấpTrình chỉnh sửa cài đặt(Chương 2) để
điều chỉnh các thông số khác nhau cho nội dung hoặc xem. (Ví dụ: một tiện ích thời tiết có thể yêu cầu
người dùng đặt vị trí mong muốn.) Một số thiết kế cung cấp tính năng này thông qua một nút khác
hoặc menu thả xuống trên thanh tiêu đề mô-đun.

Khi được sử dụng trong một ứng dụng hoặc khi người dùng đăng nhập vào một trang web,tấm di động
phải giữ nguyên trạng thái của các mô-đun đã mở và đóng giữa các phiên. Mọi người sẽ mong đợi
điều đó, và họ sẽ giật mình nếu nó không hoạt động. (Bạn cũng có thể đặt chức năng “hoàn nguyên
về giá trị mặc định” ở đâu đó, phòng trường hợp người dùng bị rối trong quá trình tùy chỉnh và muốn
bắt đầu lại.)

iGoogle, được hiển thị trong Hình 4-45 và 4-46, thể hiện cơ chế kéo và thả mộtBảng điều khiển di động
quanh một trang. Người dùng lấy thanh tiêu đề của bảng điều khiển; khi bắt đầu thao tác kéo, một
"bóng ma" đường chấm chấm hiển thị vị trí của bảng điều khiển. Khi bảng điều khiển được kéo đến
gần một vùng thả khác giữa các bảng, một "bóng ma" khác sẽ xuất hiện ở đó—nếu người dùng
buông bảng điều khiển ngay bây giờ, đó là nơi nó sẽ hạ cánh.
 các mẫu171

iGoogle, sau khi bắt đầu kéo bảng điều khiển

iGoogle, sắp hoàn thành thao tác kéo bảng điều khiển
172Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Các ứng dụng máy tính để bàn có thể sử dụngtấm di độngtheo một số cách: để hiển thị tất cả các cửa
sổ công cụ chính trong một ứng dụng phức tạp như MATLAB hoặc để sắp xếp các cửa sổ bảng nhỏ
xung quanh một tài liệu, như Photoshop và các ứng dụng khác.Bảng màu Canvas Pluscác ứng dụng làm.
MATLAB (Hình 4-47) xếp các ô trong một cửa sổ, giống như My Yahoo! và iGoogle—nhưng mỗi bảng
điều khiển có thể được đặt thành kích thước tùy chỉnh. Photoshop (Hình 4-48) đặt các cửa sổ bảng
màu trên màn hình nền, nơi người dùng có thể tự do di chuyển chúng, thay đổi kích thước và xếp
chúng vàoTab mô-đun.

Máy tính để bàn MATLAB

máy tính để bàn photoshop

 các mẫu173

http://quince.infragistics.com/Patterns/Movable%20Panels.aspx http://www.welie.com/

patterns/showPattern.php?patternID=customization-window http://patternry.com/

p=drag- and-drop-modules/

http://developer.yahoo.com/ypotypes/richinteraction/dragdrop/modules.html

Trong các tài liệu tham khảo hướng đến nhà phát triển, thuật ngữportletthường được sử dụng để mô tả các
thành phần thực tế đi vàotấm di độngvà do đó soạn một trang cổng thông tin.

Tùy chọn hệ thống Mac OS

Khi thiết kế biểu mẫu hoặc bảng hai cột, hãy căn phải các nhãn ở bên trái và căn
trái các mục ở bên phải.
174Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Bạn đang sắp xếp một biểu mẫu hoặc bất kỳ bộ mục nào khác có nhãn văn bản ở phía trước chúng.
Điều này cũng có thể áp dụng cho cấu trúc bên trong của bảng hoặc bất kỳ cấu trúc hai cột nào khác
trong đó các hàng sẽ được đọc từ trái sang phải.

Các nhãn có nhiều độ dài—một số ngắn, một số dài, một số có dòng kẻ. Việc căn trái các nhãn sẽ
đặt một số nhãn quá xa so với các trường được liên kết của chúng, để lại một khoảng trống quá
lớn để mắt người dùng có thể nhìn thấy dễ dàng.

Khi bạn đặt văn bản ngay bên cạnh thứ mà nó dán nhãn, bạn sẽ tạo thành một nhóm nhận thức mạnh mẽ
về cặp đó—nhiều hơn so với việc chúng được phân tách bằng một khoảng cách lớn. Nếu bạn căn chỉnh các
nhãn có độ dài thay đổi dọc theo bên trái của chúng, các nhãn ngắn sẽ không đủ gần với các điều khiển của
chúng và nhóm cạnh nhau sẽ bị hỏng. (Đây là nguyên tắc Gestalt của sự gần gũitại nơi làm việc.) Tóm lại,
mọi người sẽ dễ dàng kết nối từng nhãn với điều khiển được liên kết của nó hơn khi giao diện người dùng
sử dụng căn chỉnh phải/trái.

Trong khi đó, bạn phải luôn căn trái các điều khiển. Khi được kết hợp với các nhãn được căn
phải và khoảng cách đồng đều giữa chúng, chúng sẽ giúp tạo thành một cạnh đôi mạnh mẽ
đẹp mắt ở giữa toàn bộ nội dung (tận dụngliên tục,một nguyên tắc Gestalt khác). Góc cạnh
mạnh mẽ này hướng mắt người xem xuống trang một cách mượt mà, hỗ trợ luồng thị giác
tốt.

Có một số trường hợp bạn không muốn các nhãn được căn phải. Chẳng hạn, có bằng
chứng rõ ràng rằng việc đọc các nhãn được căn lề phải khó hơn đọc các nhãn được căn
lề trái (điều này hợp lý vì mắt phải làm việc nhiều hơn để tìm phần đầu của dòng). Nếu
nhãn của bạn dài và cần được đọc cẩn thận, hãy cân nhắc việc căn trái chúng.

Nếu các nhãn sẽ được bản địa hóa sang các ngôn ngữ khác nhau, thì chúng sẽ có độ dài khác nhau.
Bố cục trở nên khó xử khi các nhãn nằm ở bên trái của các điều khiển—thay vào đó, hãy đặt chúng lên
trên cùng. (Điều này khó đọc hơn và làm cho trang dài hơn.)

Trong một số bố cục, việc căn chỉnh các nhãn trông không đẹp mắt. Có thể có một cột gồm các mục ở ngay
bên trái của nhãn hoặc có thể các tiêu đề được căn trái tách biệt các phần của biểu mẫu—tất cả những mục
này và hơn thế nữa có thể làm hỏng căn chỉnh phải/trái. Đi với những gì làm việc.

Thay vì căn trái từng nhãn văn bản, hãy căn phải nó. Đưa nó đến gần với điều khiển của nó, chỉ cách
nhau một vài pixel. Hiệu ứng ròng có thể sẽ là một cạnh trái bị rách (không được căn chỉnh)—điều đó
thường không sao cả. Nếu một số nhãn quá dài để thực hiện công việc này, hãy thử chia chúng thành
nhiều dòng hoặc sử dụng cách đặt nhãn phía trên điều khiển, trong trường hợp đó, mẫu này trở nên
không phù hợp.
 các mẫu175

Sau đó căn trái các điều khiển theo một đường tưởng tượng cách mép phải của nhãn vài pixel.
Làm cho chúng được căn chỉnh chính xác, pixel hoàn hảo—nếu không, các điều khiển sẽ trông
lộn xộn. (Hệ thống thị giác của con người thực sự giỏi trong việc phát hiện ra những sai lệch
nhỏ!)

Một lần nữa, cạnh kia của cột điều khiển có thể bị rách. Điều đó không tốt lắm nếu bạn đang xử lý các
trường văn bản, hộp tổ hợp và các đối tượng “nặng” trực quan khác, như trong Hình 4-49. Cố gắng
kéo căng chúng sao cho các cạnh bên phải của chúng cũng thẳng hàng với nhau ở bất kỳ mức độ nào
bạn có thể. Bạn có thể cố gắng sắp xếp những cái ngắn với nhau và những cái dài với nhau.

Căn Phải/Tráicũng hoạt động với các bố cục hoàn toàn không có điều khiển đầu vào. Mục
nhập sổ địa chỉ Mac OS được hiển thị trong Hình 4-50 có rất ít khoảng trắng giữa hai cột,
nhưng sự khác biệt về màu sắc giúp phân biệt chúng một cách trực quan. Lưu ý rằng nhãn
“trang chủ” dài hơn nhiều so với các nhãn khác; điều này sẽ làm cho việc căn chỉnh nhãn
bên trái kém bắt mắt hơn và khó đọc hơn.

Mục nhập sổ địa chỉ Mac OS

http://quince.infragistics.com/Patterns/Right%20Aligned%20Labels.aspx http://

www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
176Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Bảng điều khiển Windows 7

Sắp xếp các thành phần trang theo kiểu bất đối xứng, nhưng cân bằng nó bằng cách đặt trọng lượng trực
quan vào cả góc trên bên trái và góc dưới bên phải.

Bạn đang trình bày một trang hoặc hộp thoại có tiêu đề hoặc tiêu đề ở trên cùng và một số liên kết
hoặc nút hành động—chẳng hạn như OK và Hủy, hoặc Gửi hoặc Quay lại và Tiếp theo—ở dưới cùng.
Trang đủ ngắn để vừa với màn hình mà không cần cuộn.

Các tính năng nổi bật trực quan như tiêu đề, tab và nút sẽ góp phần tạo nên bố cục cân
bằng trên màn hình. Chúng đã ở hai đầu đối diện của trang; khi bạn đặt chúng ở hai
phía đối diện, chúng cũng thường cân bằng lẫn nhau. (Hãy coi chúng như trọng lượng
—các tính năng càng lớn hoặc càng “tương phản” thì chúng càng nặng; chúng càng tiến
gần đến mép thì bạn càng phải đặt nhiều ở phía bên kia để bù lại.)
 các mẫu177

Bên cạnh việc nhìn đẹp hơn, cân bằng đường chéo cũng thiết lập trang sao cho mắt người dùng di chuyển dễ dàng từ trên
cùng bên trái xuống dưới cùng bên phải—một luồng hình ảnh lý tưởng cho người dùng nói ngôn ngữ từ trái sang phải.
(Xem phần giới thiệu của chương để thảo luận về luồng hình ảnh.) Phần còn lại của trang cũng nên hỗ trợ luồng hình ảnh
này. Cuối cùng, con mắt sẽ dừng lại ở các yếu tố đại diện cho các hành động mà người dùng có thể thực hiện tiếp theo,
chẳng hạn như đóng giao diện người dùng này hoặc chuyển sang một nơi khác.

Đặt tiêu đề, tab hoặc một số yếu tố mạnh khác ở phía trên bên trái của trang; đặt (các) nút ở
phía dưới bên phải. Nội dung có chiều rộng bất kỳ nằm ở giữa. Nếu bản thân nội dung góp
phần tạo nên sự cân bằng của trang thì càng tốt—ví dụ: đừng đặt quá nhiều khoảng trắng
ở một bên.

Hãy xem hộp thoại màu trong Hình 4-51 trông như thế nào nếu bạn đặt các nút
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

OK và Cancel ở cạnh trái thay vì cạnh phải. Toàn bộ hộp thoại sẽ có cảm giác
nặng nề và bấp bênh.
Trong Windows, vị trí của tiêu đề ở phía trên bên trái và vị trí thông thường của các nút ở phía
dưới bên phải sẽ tự động thực hiện việc này cho bạn. Trong Mac OS, các thành phần như thanh
tiêu đề, tab và nút tác vụ được căn giữa, vì vậycân bằng đường chéoít phổ biến hơn ở đó.

Cuốn sách tiền Web kinh điển của Kevin Mullet và Darrell SanoThiết kế giao diện trực quan (Sun
Microsystems) mô tả các ý tưởng về cân bằng đường chéo:

Bố cục đối xứng cung cấp…sự cân bằng trực quan một cách tự động. Bố cục bất đối xứng cũng
có thể đạt được trạng thái cân bằng, nhưng dạng cân bằng căng hơn, ấn tượng hơn của chúng
phụ thuộc vào thao tác cẩn thận để bù đắp trực quan cho sự khác biệt về kích thước, vị trí và giá
trị của các yếu tố chính.

Sau đây là những ví dụ về cách bạn có thể đạt được sự cân bằng này.

Màn hình đơn giản được hiển thị trong Hình 4-52 hướng sự chú ý của người xem vào phía dưới bên phải,
nơi đặt lời kêu gọi hành động.
178Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Màn hình WiFi của Starbucks

Các tiêu điểm trong trang web được hiển thị trong Hình 4-53 là logo, ô tô đang di chuyển, dòng khẩu
hiệu “Let's Motor” và trường văn bản định vị đại lý ở dưới cùng bên phải—tất cả nằm trong một
đường chéo (xấp xỉ). Chuyển động của bức ảnh đẩy mắt xuống dưới và sang phải thậm chí còn mạnh
hơn các ví dụ khác. Không còn nghi ngờ gì nữa, những người thiết kế trang web muốn khuyến khích
mọi người sử dụng trường văn bản. Thay vào đó, nếu nó ở dưới cùng bên trái, trang sẽ mất đi nhiều
điểm nhấn và trường văn bản có thể bị mất trong trang.

Trang web Mini Cooper từ năm 2005

 các mẫu179

Trình giao dịch tự động

Bắt đầu với một giao diện người dùng rất tối thiểu, hãy hướng dẫn người dùng qua một loạt các bước bằng cách hiển thị thêm

giao diện người dùng khi họ hoàn thành từng bước.

Người dùng nên được hướng dẫn từng bước một nhiệm vụ phức tạp, có lẽ vì nhiệm vụ mới lạ, hiếm
khi được thực hiện hoặc nằm ngoài kiến thức miền của người dùng. Nhưng bạn không muốn buộc
người dùng phải đi từng trang ở mỗi bước—bạn muốn giữ toàn bộ giao diện trên một trang duy nhất.

Ngoài ra, nhiệm vụ có thể được phân nhánh, với các loại thông tin khác nhau được yêu cầu “hạ
lưu” tùy thuộc vào lựa chọn trước đó của người dùng.

Trong mẫu này, giao diện thực sự dường như được “tạo” trước mặt người dùng, từng bước một.
Lúc đầu, người dùng chỉ nhìn thấy những yếu tố cần thiết cho bước đầu tiên. Khi người dùng
thực hiện bước đó, tập hợp các phần tử tiếp theo sẽ được hiển thị cùng với phần tử đầu tiên, sau
đó là phần tử tiếp theo, v.v.

Khi người dùng nhìn thấy nhiệm vụ diễn ra trực tiếp trước mặt mình thông qua giao diện người dùng đang phát triển linh
hoạt, anh ta có thể hình thành mô hình tinh thần chính xác của nhiệm vụ nhanh chóng và dễ dàng hơn. Không có công tắc
ngữ cảnh khó xử nào mà các màn hình thuật sĩ riêng biệt áp đặt tồn tại ở đây: khi người dùng bị kéo ra khỏi quy trình làm
việc của mình để chuyển sang một tập hợp các màn hình phương thức cứng nhắc được hiển thị cùng một lúc, nó giống
như một sự áp đặt hơn là nếu giao diện người dùng vẫn ở trong đó bối cảnh làm việc của người dùng.
180Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Hơn nữa, vì giao diện người dùng được giữ cùng nhau trên một trang nên người dùng có thể dễ dàng quay
lại và thay đổi ý định về các lựa chọn trước đó. Khi làm lại mỗi bước, anh ấy thấy ngay hiệu quả ở các bước
tiếp theo. Điều này tốt hơn là chuyển từ màn hình thuật sĩ thiếu nội dung này sang màn hình thuật sĩ khác.

Đối với các nhiệm vụ không thường xuyên,tiết lộ đáp ứngcó thể hoạt động tốt hơn là trình bày một bộ điều
khiển phức tạp và được liên kết với nhau cùng một lúc, bởi vì bước đầu tiên, bước tiếp theo và bước tiếp
theo luôn rõ ràng. Người dùng không bao giờ phải suy nghĩ quá nhiều.

Làm thế nào bạn nên chọn giữa mô hình này vàKích hoạt đáp ứng? Nếu bạn dùngKích hoạt đáp ứng, bạn sẽ phải đặt tất cả các
điều khiển cho mọi lựa chọn trên giao diện người dùng—bạn sẽ chỉ vô hiệu hóa những điều khiển không liên quan cho
đến khi chúng trở nên phù hợp (một lần nữa, để đáp lại lựa chọn của người dùng). Đôi khi điều đó có thể làm cho giao
diện người dùng trông quá lộn xộn hoặc phức tạp. Đó là một cuộc gọi phán đoán: nếu bạn cần đặt giao diện người dùng
vào một không gian rất nhỏ hoặc nếu bạn nghĩ rằng có quá nhiều điều khiển trên giao diện người dùng có thể trông xấu
hoặc khiến người dùng lo lắng, hãy sử dụngtiết lộ đáp ứngthay vì.

Bắt đầu bằng cách chỉ hiển thị các điều khiển và văn bản cho bước đầu tiên. Khi người dùng hoàn thành bước đó,
hãy hiển thị các điều khiển cho bước tiếp theo, v.v. Hiển thị các điều khiển của các bước trước đó để cho phép
người dùng quay lại nếu cần. Giữ tất cả trên một trang hoặc hộp thoại để người dùng không đột ngột bị đẩy vào
một “không gian giao diện người dùng” riêng biệt.

Trong nhiều thiết kế từng bước như vậy, các lựa chọn mà người dùng đưa ra ở một bước sẽ thay đổi phần còn lại
của nhiệm vụ (nghĩa là nhiệm vụ được phân nhánh, không tuyến tính). Chẳng hạn, một mẫu đơn đặt hàng trực
tuyến hỏi xem địa chỉ thanh toán có giống với địa chỉ giao hàng hay không. Nếu người dùng nói có, giao diện
người dùng thậm chí không cần hiển thị các trường nhập cho nó. Mặt khác, còn một bước nữa trong quy trình và
giao diện người dùng hiển thị nhóm trường nhập thứ hai khi thích hợp.

Khái niệm tiết lộ đáp ứng không phải là mới. Nó được sử dụng vào năm 1981 trong giao diện WIMP
thương mại đầu tiên, Xerox Star. Các nhà thiết kế của nó coi “tiết lộ dần dần”, một khái niệm tổng quát
hơn bao gồm tiết lộ đáp ứng, là một nguyên tắc thiết kế chính: “Tiết lộ dần dần quy định rằng chi tiết
đó được ẩn khỏi người dùng cho đến khi họ yêu cầu hoặc cần xem nó. Do đó, Star không chỉ cung cấp
các cài đặt mặc định mà còn ẩn các cài đặt mà người dùng không có khả năng thay đổi cho đến khi
người dùng cho biết rằng họ muốn thay đổi chúng.”*Thực vậy.

Ví dụ, trong các trang thuộc tính của Star, không gian trống được dành riêng cho các điều khiển sẽ
xuất hiện khi cần thiết, để đáp ứng các lựa chọn của người dùng. Khi người dùng chọn từ một tập hợp
các giá trị bao gồm từKhác,chẳng hạn, một trường văn bản bổ sung sẽ xuất hiện để người dùng nhập
một số.

* Johnson, JA, và cộng sự. 1989. “The Xerox 'Star': Hồi tưởng.”Máy tính IEEE22(9), 11–29. Xem thêmhttp://
www.digibarn.com/friends/curbow/star/retrospect/.
 các mẫu181

Ví dụ Kayak trong Hình 4-55 ẩn lịch và ô so sánh cho đến khi người dùng điền đủ thông tin
vào biểu mẫu. Khi chúng xuất hiện, người dùng sẽ chuyển sự chú ý sang chúng.

Chèo xuồng

Một cách khác để sử dụngtiết lộ đáp ứnglà hoán đổi một phần của giao diện người dùng tùy thuộc vào
lựa chọn được thực hiện trong trình đơn thả xuống hoặc điều khiển lựa chọn hạn chế khác. Các ví dụ
trong Hình 4-56, từ Google Docs, thực hiện điều này: khi người dùng thay đổi lựa chọn “Loại câu hỏi”,
các câu hỏi tiếp theo sẽ thay đổi tương ứng. (Ví dụ AutoTrader cũng vậy, ở trên cùng của mẫu trong
Hình 4-54.)
182Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Tạo trường biểu mẫu Google Tài liệu

http://patternry.com/p=inline-input-adder/ http://quince.infragistics.com/

Patterns/Responsive%20Disclosure.aspx

TurboTax
 các mẫu183

Bắt đầu với giao diện người dùng gần như bị vô hiệu hóa, hãy hướng dẫn người dùng thực hiện một loạt các bước bằng cách bật

thêm giao diện người dùng khi mỗi bước được thực hiện.

Người dùng nên được hướng dẫn từng bước một nhiệm vụ phức tạp, có lẽ vì người dùng
chưa biết về máy tính hoặc vì nhiệm vụ hiếm khi được thực hiện (như trong mộtThuật sĩ).
Nhưng bạn không muốn buộc người dùng phải đi từng trang ở mỗi bước—bạn muốn giữ
toàn bộ giao diện trên một trang. Hơn nữa, bạn muốn giữ cho giao diện ổn định; bạn
không muốn tự động cấu hình lại trang ở mỗi bước, như bạn làm vớitiết lộ đáp ứng.

Giốngtiết lộ đáp ứng, mẫu này tận dụng tính linh hoạt của màn hình máy tính để hướng dẫn người
dùng qua giao diện một cách tương tác. Do đó, người dùng có cơ hội hình thành một mô hình
tinh thần chính xác về nguyên nhân và kết quả. Bản thân giao diện người dùng cho cô ấy biết
hậu quả của một số lựa chọn: nếu tôi bật hộp kiểm này, tôi phải điền vào bốn trường văn bản
vừa được bật này.

Hơn nữa, người dùng không thể làm những việc có thể khiến cô ấy gặp rắc rối, vì giao diện người dùng đã
“khóa” những hành động đó bằng cách vô hiệu hóa chúng. Do đó tránh được các thông báo lỗi không cần
thiết.

Trong một số ứng dụng, hầu hết các hành động trên giao diện người dùng bắt đầu bị tắt—chỉ những
hành động liên quan đến bước đầu tiên của người dùng mới khả dụng. Khi người dùng đưa ra lựa
chọn và thực hiện các hành động, nhiều mục bị vô hiệu hóa sẽ được bật và đưa vào hoạt động. Về mặt
này, nó đặc biệt giống nhưtiết lộ đáp ứng, trong đó máy chỉ định một trình tự cụ thể thông qua giao
diện.

Một kỹ thuật tương tự, ít dựa trên trình tự hơn phổ biến hơn nhiều trong giao diện người dùng máy tính để bàn. Khi người dùng

thực hiện mọi việc trên giao diện, một số hành động hoặc cài đặt nhất định trở nên không liên quan hoặc không thể thực hiện

được và những hành động đó sẽ bị vô hiệu hóa cho đến khi người dùng thực hiện bất kỳ điều gì cần thiết để kích hoạt lại chúng.

Trình tự tổng thể không quan trọng.

Bất cứ khi nào có thể, hãy đặt các mục bị vô hiệu hóa gần bất cứ thứ gì cho phép chúng. Điều đó
giúp người dùng tìm thấy hoạt động kích hoạt kỳ diệu và hiểu mối quan hệ giữa nó và các mục
bị vô hiệu hóa. Các ví dụ trong Hình 4-57 và 4-58 đặt trường văn bản đó (hoặc hộp kiểm, tương
ứng) ở trên cùng hoặc bên trái của các mục bị vô hiệu hóa, theo “dòng chảy” tự nhiên từ trên
xuống dưới và từ trái sang phải của giao diện.

Khi bạn thiết kế một giao diện sử dụngKích hoạt đáp ứnghoặctiết lộ đáp ứng,
đảm bảo chỉ vô hiệu hóa những thứ thực sự không thể hoặc không nên sử dụng. Hãy cảnh giác với việc hạn chế
quá mức trải nghiệm của người dùng nhằm cố gắng làm cho giao diện thân thiện hơn hoặc dễ dàng hơn
184Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

hiểu. Khi bạn quyết định tắt cái gì, hãy xem xét cẩn thận từng mục. Có phải nó bị vô hiệu hóa vì một lý
do thực sự tốt? Chức năng đó có thể được bật mọi lúc không? Như thường lệ, kiểm tra khả năng sử
dụng mang đến cho người dùng cơ hội để nói với bạn rằng bạn đã làm sai.

Một vấn đề khác về khả năng sử dụng cần tránh là điều mà Bruce Tognazzini từng gọi là “Các mục menu bị làm mờ
một cách bí ẩn”—khi thiết kế không đưa ra manh mối nào về lý do tại sao một mục nhất định bị vô hiệu hóa. Một
lần nữa, giảm thiểu tập hợp những thứ màcóbị vô hiệu hóa, đặc biệt là khi chúng ở xa bất kỳ hoạt động nào bật
chúng lên. Ngoài ra, ở đâu đó trong giao diện hoặc hệ thống trợ giúp của nó, hãy cho người dùng biết nguyên
nhân khiến một tính năng không khả dụng. Một lần nữa, toàn bộ vấn đề này có thể tránh được dễ dàng hơn khi
các điều khiển bị vô hiệu hóa không nằm trong menu trên thanh menu mà thay vào đó nằm ngoài giao diện người
dùng chính, được sắp xếp với bất kỳ thứ gì bật chúng lên. Khoảng cách không gian là một đầu mối quan trọng.

Tùy chọn Hệ thống Mac OS, được hiển thị trong Hình 4-58, cung cấp một ví dụ điển hình về việc vô
hiệu hóa dựa trên lựa chọn nhị phân: màn hình nền có hiển thị ngày và giờ trên thanh menu hay
không? Nếu người dùng chọn hiển thị nó, cô ấy sẽ nhận được vô số lựa chọn về cách hiển thị nó. Nếu
không, các lựa chọn không liên quan, vì vậy chúng bị vô hiệu hóa. Hành vi này (cộng với việc thụt lề
các tùy chọn bên dưới hộp kiểm) cho người dùng biết rằng những lựa chọn này ảnh hưởng đến hiển
thị ngày/giờ mà hộp kiểm đã bật—chứ không ảnh hưởng gì khác.

Tùy chọn hệ thống Mac OS

Bạn cũng có thể đảo ngược ý nghĩa của mô hình này và thực hiện “vô hiệu hóa phản hồi”. Hệ thống
định vị được sử dụng trong xe ô tô Prius và Lexus của Toyota sử dụng kỹ thuật này khi người dùng
nhập địa chỉ đích (xem Hình 4-59). Khi biết những đường phố nào tồn tại trong một khu vực tìm kiếm
nhất định, hệ thống sẽ thu hẹp các tên đường phố có thể có với mỗi chữ cái liên tiếp được người dùng
nhập vào. Sau đó, nó sẽ vô hiệu hóa các chữ cái không thể theo chuỗi hiện được nhập; người dùng có
ít nút hơn để suy nghĩ, cộng với một số đảm bảo rằng hệ thống “biết” những gì cô ấy đang cố gắng
nhập. Do đó, việc nhập địa chỉ được thực hiện dễ dàng và dễ chịu hơn. (Khi chỉ có một số đường phố
phù hợp, hệ thống sẽ loại bỏ hoàn toàn bàn phím và hiển thị các đường phố dưới dạng danh sách các
lựa chọn—xemtự động hoàn thànhmẫu trong Chương 8.)
 các mẫu185

Lexus hybrid hệ thống định vị

http://quince.infragistics.com/Patterns/Responsive%20Enabling.aspx
186Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Hộp thoại mở Mac OS

Khi người dùng thay đổi kích thước cửa sổ, hãy thay đổi kích thước nội dung trang cùng với nó để trang liên
tục được “lấp đầy”.

Người dùng có thể muốn có nhiều không gian hơn—hoặc ít hơn—để hiển thị nội dung của cửa sổ, hộp thoại
hoặc trang. Điều này có thể xảy ra bất cứ khi nào một trang chứa nhiều văn bản (chẳng hạn như trong
trang web), điều khiển chứa nhiều thông tin chẳng hạn như bảng hoặc cây hoặc trình chỉnh sửa đồ họa.
Mẫu này không hoạt động tốt khi thiết kế trực quan yêu cầu một lượng không gian màn hình nhất định,
không hơn không kém.

Trừ khi bạn đang thiết kế giao diện người dùng "đóng", chẳng hạn như ki-ốt hoặc trò chơi điện tử toàn màn hình, bạn không thể

dự đoán các điều kiện mà người dùng sẽ xem giao diện người dùng của bạn. Kích thước màn hình, tùy chọn phông chữ, các cửa sổ

khác trên màn hình hoặc tầm quan trọng của bất kỳ trang cụ thể nào đối với người dùng—không điều nào trong số này nằm trong

tầm kiểm soát của bạn. Sau đó, làm thế nào bạn có thể quyết định một kích thước trang tối ưu cho tất cả người dùng?

Cung cấp cho người dùng một chút quyền kiểm soát đối với bố cục của trang giúp giao diện người dùng của bạn linh hoạt hơn

trong các điều kiện thay đổi. Nó cũng có thể làm cho người dùng cảm thấy bớt phản đối giao diện người dùng hơn, vì anh ta có thể

điều chỉnh nó để phù hợp với nhu cầu và bối cảnh trước mắt của mình.
 các mẫu187

Nếu bạn cần thuyết phục hơn, hãy xem xét điều gì sẽ xảy ra với giao diện người dùng “không thanh khoản” có bố
cục cố định khi ngôn ngữ hoặc kích thước phông chữ thay đổi. Các cột vẫn xếp hàng? Các trang đột nhiên trở nên
quá rộng hoặc thậm chí bị cắt bớt ở lề? Nếu không, thật tuyệt; bạn có một thiết kế đơn giản và do đó mạnh mẽ.
Nhưng các trang được thiết kế để hoạt động độc đáo với những thay đổi về kích thước cửa sổ thường cũng phù
hợp với những thay đổi về ngôn ngữ hoặc kích thước phông chữ.

Làm cho nội dung trang liên tục “lấp đầy” cửa sổ khi nó thay đổi kích thước. Văn bản nhiều dòng nên ngắt
dòng ở lề phải cho đến khi nó rộng từ 10 đến 12 từ (sẽ nói thêm về điều đó sau). Văn bản, cây, bảng, biểu đồ
và trình chỉnh sửa ở “giai đoạn trung tâm” sẽ phóng to một cách hào phóng trong khi lề của chúng vẫn nhỏ
gọn. Nếu trang có bất kỳ thứ gì giống như biểu mẫu trên đó, việc kéo dài theo chiều ngang sẽ khiến các
trường văn bản dài ra—người dùng sẽ đánh giá cao điều này nếu họ cần nhập bất kỳ thứ gì dài hơn độ dài
bình thường của trường văn bản. Tương tự như vậy, bất kỳ thứ gì được cuộn (chẳng hạn như danh sách
hoặc bảng) cũng sẽ dài ra và có thể mở rộng ra.

Các trang web và giao diện người dùng tương tự phải cho phép nội dung cơ thể lấp đầy không gian mới,
trong khi vẫn giữ các thiết bị điều hướng và biển chỉ dẫn được neo vào lề trên cùng và bên trái. Màu và mẫu
nền phải luôn lấp đầy không gian mới, ngay cả khi bản thân nội dung không thể lấp đầy.

Điều gì xảy ra khi cửa sổ trở nên quá nhỏ so với nội dung của nó? Bạn có thể đặt thanh cuộn
xung quanh nó. Mặt khác, khoảng trắng sẽ thu nhỏ khi cần thiết; việc cắt bớt hoàn toàn có thể
xảy ra khi cửa sổ trở nên rất nhỏ, nhưng nội dung quan trọng nhất sẽ nằm ở đó cho đến cuối
cùng.

Nếu giao diện hiển thị các đoạn văn bản, hãy nhớ rằng chúng gần như không thể đọc được khi chúng
quá rộng. Các nhà thiết kế đồ họa nhắm đến độ dài dòng tối ưu để dễ đọc văn bản; một số liệu là 10
đến 12 từ tiếng Anh trung bình trên mỗi dòng. Một số liệu khác là chiều rộng từ 30 đến 35 em—nghĩa
là chiều rộng chữ thường của phông chữ của bạnm.Khi văn bản của bạn rộng hơn nhiều so với mức
đó, mắt của người dùng phải di chuyển quá xa từ cuối dòng này sang đầu dòng tiếp theo; nếu nó bị
thu hẹp lại, nó quá khó đọc.

(Tuy nhiên, có bằng chứng cho thấy văn bản có độ dài dòng dài hơn, chẳng hạn như 100 ký tự
trên mỗi dòng, đọc nhanh hơn so với các dòng ngắn hơn, mặc dù người dùng thích đọc các dòng
có độ dài dưới 55 ký tự.*)

Mac OS cho phép bạn thay đổi kích thước hộp thoại Mở tiêu chuẩn, sử dụng mộtbố trí chất lỏng. Điều
này là tốt bởi vì người dùng có thể thấy bao nhiêu hệ thống phân cấp của hệ thống tệp tùy thích, thay
vì bị giới hạn trong một không gian nhỏ được xác định trước. Xem Hình 4-60 ở trên cùng của mẫu.

* “Sử dụng hiệu suất đọc hoặc tùy chọn người dùng,” từhttp://usability.gov/guidelines/.
188Chương 4: Tổ chức Trang: Bố cục của các Thành phần Trang

Khi mộtbố trí chất lỏngđược sử dụng trên văn bản trong trình duyệt, các phần tử thả nổi sẽ xử lý thay đổi kích thước
một cách duyên dáng, như trong ví dụ về Drupal.org được minh họa trong Hình 4-61. Cũng lưu ý rằng văn bản
trong bài viết này không bao giờ rộng đến mức không thể đọc được, ngay cả khi bản thân cửa sổ rất rộng.

Từ Drupal.org

Google Docs cho phép người dùng thu nhỏ cửa sổ tới một kích thước rất hẹp (xem Hình 4-62). Mặc dù nó
đặt các thanh công cụ dài trên đầu tài liệu, nhưng các thanh công cụ đó sẽ bao quanh và thu gọn một cách
duyên dáng khi cửa sổ thu nhỏ lại. (Người dùng không thể thay đổi kích thước cho nó nhỏ hơn kích thước
nhỏ nhất được hiển thị ở đây.)
 các mẫu189

Trình chỉnh sửa trình chiếu Google Tài liệu

http://www.welie.com/patterns/showPattern.php?patternID=liquid-layout http://

quince.infragistics.com/Patterns/Liquid%20Layout.aspx http://www.designofsites.com/

designing- bố cục trang hiệu quả/mở rộng chiều rộng màn hình
Chương này chỉ đề cập đến một chủ đề: cách hiển thị danh sách các mục trong cài đặt tương tác. Chỉ là vật
phẩm. Dữ liệu thực tế—các tập dữ liệu phức tạp và có cấu trúc cao—không được đề cập cho đến Chương 7.

Bạn có thể hỏi tại sao các danh sách xứng đáng có chương riêng?

Xem xét nhiều loại mục được hiển thị trong danh sách: bài viết, trang, ảnh, video, bản đồ, sách, trò
chơi, phim, chương trình truyền hình, bài hát, sản phẩm, email, mục blog, cập nhật trạng thái, bài
đăng trên diễn đàn, nhận xét, tìm kiếm kết quả, con người, sự kiện, tệp, tài liệu, ứng dụng, liên kết,
URL, công cụ, chế độ, hành động. (Thêm của riêng bạn!)

Trên thực tế, mọi giao diện hoặc trang web phức tạp vừa phải từng được thiết kế đều bao gồm các danh
sách. Chương này sẽ giúp bạn suy nghĩ về chúng một cách logic và rõ ràng, hiểu các khía cạnh thiết kế khác
nhau và đưa ra những đánh đổi hợp lý khi thiết kế giao diện sử dụng danh sách.

Vì rất nhiều chủ đề thiết kế giao diện khác trùng lặp với chủ đề này nên chương này sẽ thường đề cập
đến các chương và mẫu khác. Các menu được xử lý trong Chương 6, dữ liệu phức tạp trong Chương 7,
liên kết và các cơ chế điều hướng khác trong Chương 3. Nền tảng di động có các ràng buộc thiết kế
rất cụ thể, vì vậy Chương 10 cũng sẽ được đề cập đến. Nhưng vẫn còn rất nhiều thứ còn sót lại.
192Chương 5: Danh sách các thứ

Trước khi bắt tay vào thiết kế, sẽ rất hữu ích nếu bạn phân tích các trường hợp sử dụng cho một danh sách. Mọi người sẽ cần phải

làm gì với nó? Trường hợp nào trong số này được áp dụng?

Nhận được một cái nhìn tổng quan

Ai đó sẽ có ấn tượng gì từ toàn bộ danh sách? Trong một số trường hợp, người dùng có
thể lướt qua danh sách và hiểu nó nói về cái gì. Đôi khi điều đó đòi hỏi nhiều hơn là lời
nói; nó có thể yêu cầu hình ảnh hoặc tổ chức trực quan cẩn thận để truyền đạt ấn
tượng đó.

Duyệt từng mục

Người dùng sẽ xem qua các mục, ngẫu nhiên hay theo thứ tự? Anh ấy có cần nhấp vào các mục
để mở chúng không? Nếu vậy, bạn có thể dễ dàng quay lại danh sách và tìm một mục khác hoặc
chuyển thẳng sang mục tiếp theo.

Tìm kiếm một mục cụ thể

Là người dùng đang tìm kiếm một cái gì đó cụ thể? Anh ấy sẽ có thể tìm thấy nó một cách nhanh
chóng, với số lần nhấp chuột, cuộn và tới lui tối thiểu.

Sắp xếp và lọc

Nếu ai đó đang tìm kiếm một mục hoặc nhóm mục có đặc điểm cụ thể (ví dụ: “bất kỳ thứ gì
có ngày giữa X và Y”) hoặc đang tìm kiếm thông tin chi tiết chung về một tập hợp dữ liệu,
chức năng sắp xếp và lọc có thể hữu ích. Điều này được đề cập chi tiết hơn trong Chương 7.

Sắp xếp lại, thêm, xóa hoặc phân loại lại các mục
xem xét mộtTrình quản lý ảnhchứa ảnh của người dùng: người dùng sở hữu danh sách và các mục
trong đó. Hầu hết các ứng dụng và trang web hiển thị các bộ sưu tập cá nhân đều cho phép thao
tác trực tiếp với các danh sách đó để người dùng có thể kéo các mục xung quanh theo thứ tự
hoặc sơ đồ nhóm mong muốn. Anh ta cũng có thể chọn nhiều mục cùng một lúc để di chuyển,
chỉnh sửa hoặc xóa; một thiết kế nên sử dụng các tiêu chuẩn nền tảng cho nhiều lựa chọn (ví dụ:
Shift-select) hoặc cung cấp các hộp kiểm bên cạnh mỗi mục để cho phép người dùng chọn một
tập hợp con tùy ý.

Chúng ta đã thảo luận về kiến trúc thông tin—thiết kế thông tin, độc lập với biểu diễn trực quan của
nó—trong Chương 2. Hãy quay lại vấn đề này trong một phút. Nếu bạn có một danh sách những thứ
cần hiển thị trong một trang, thì danh sách đó có những đặc điểm nổi bật nào?

Chiều dài

• Danh sách dài bao nhiêu? Nó có thể phù hợp với không gian bạn đã thiết kế cho nó không?

• Đôi khi danh sách này có thể là “không đáy” không? Ví dụ: kết quả tìm kiếm trên web thường tạo thành một
danh sách dài đến mức người dùng sẽ không bao giờ xem hết; tương tự như vậy đối với các mục được lấy từ
một kho lưu trữ rất lớn và sâu.
 Quay lại Kiến trúc thông tin193

Đặt hàng

• Danh sách có thứ tự tự nhiên, chẳng hạn như theo bảng chữ cái hoặc theo thời gian không?

• Người dùng có thể thay đổi thứ tự sắp xếp của danh sách không? Nếu vậy, những gì người
dùng sẽ sắp xếp trên?

• Nếu bạn chọn sắp xếp một danh sách theo thứ tự, liệu nó có thực sự hợp lý hơn như một sơ đồ
nhóm hay ngược lại? Ví dụ, hãy nghĩ về kho lưu trữ blog: các bài viết được sắp xếp theo thời gian
một cách tự nhiên và hầu hết các blog phân loại chúng theo tháng và năm, thay vì đưa ra một
danh sách có thứ tự cố định. Ai đó đang tìm kiếm một bài báo cụ thể có thể nhớ rằng “nó có
trước bài báo X nhưng sau bài báo Y,” nhưng không nhớ chính xác nó được xuất bản vào tháng
nào. Do đó, một nhóm hàng tháng khiến bạn khó tìm thấy bài viết đó; một danh sách tiêu đề
theo thứ tự thời gian có thể hoạt động tốt hơn.

nhóm
• Các mặt hàng có được phân loại không? Nó có phải là một phân loại tự nhiên mà người dùng sẽ hiểu ngay lập
tức? Nếu không, làm thế nào bạn có thể giải thích nó, bằng lời nói hoặc hình ảnh?

• Những danh mục này có thuộc danh mục lớn hơn không? Nói rộng hơn, các mục có phù hợp với hệ thống phân
cấp đa cấp, chẳng hạn như tệp trong hệ thống tệp không?

• Có nhiều cách phân loại tiềm năng không? Chúng có phù hợp với các trường hợp sử dụng hoặc diện mạo người dùng
khác nhau không? Và liệu người dùng có thể tạo danh mục riêng cho mục đích riêng của họ không?

các loại mặt hàng

• Các mục như thế nào? Chúng đơn giản hay chúng phong phú và phức tạp? Có phải chúng chỉ thay
thế cho những thứ lớn hơn, chẳng hạn như tiêu đề cho bài báo hoặc hình thu nhỏ cho video clip?

• Các mục trong danh sách có khác nhau nhiều không (ví dụ: một số đơn giản và một
số phức tạp)? Hay chúng đồng nhất?
• Mỗi mục có một hình ảnh hoặc hình ảnh liên quan đến nó?

• Mỗi mục có cấu trúc giống trường nghiêm ngặt không? Nó có giúp người dùng biết cấu trúc
đó hay thậm chí có thể sắp xếp danh sách dựa trên các trường khác nhau không? (Thư điện
tử thường có cấu trúc chặt chẽ và có thể sắp xếp—dấu thời gian, từ trường, chủ đề, v.v.—và
cấu trúc này thường được hiển thị trong danh sách thư.)

Sự tương tác

• Bạn có nên hiển thị toàn bộ mục cùng một lúc trong danh sách hay bạn chỉ có thể hiển thị đại diện của
mục đó (chẳng hạn như tên của mục đó hoặc một vài câu đầu tiên) và ẩn phần còn lại?

• Người dùng phải làm gì với những món đồ đó? Họ có nên được xem xét? Chúng có nên được chọn
để kiểm tra hay để thực hiện các nhiệm vụ trên chúng không? Hay chúng là các liên kết hoặc nút
được nhấp vào?

• Người dùng có thể chọn nhiều mục cùng một lúc không?
194Chương 5: Danh sách các thứ

hành vi năng động

• Mất bao lâu để tải toàn bộ danh sách? Nó có thể ít nhiều ngay lập tức hay sẽ có độ trễ đáng
chú ý khi danh sách được tập hợp lại ở đâu đó và cuối cùng được hiển thị cho người dùng?

• Danh sách sẽ thay đổi nhanh chóng? Bạn có nên hiển thị các bản cập nhật khi chúng xảy ra không? Điều
này có nghĩa là tự động chèn các mục mới vào đầu danh sách không?

Câu trả lời cho những câu hỏi này có thể gợi ý cho bạn nhiều giải pháp thiết kế. Tất
nhiên, một giải pháp cũng nên tính đến loại nội dung (blog sẽ trông khác với danh sách
liên hệ chẳng hạn), bố cục trang xung quanh và các ràng buộc triển khai.

Các câu hỏi về tương tác được liệt kê trong phần trước tạo ra tiếng vang cho hầu hết các quyết định
khác. Chẳng hạn, một danh sách tương tác đầy đủ—nhiều lựa chọn, kéo và thả, chỉnh sửa các mục,
v.v.—có xu hướng thống trị giao diện. Bạn có thể đang xây dựng mộtTrình quản lý ảnh, ứng dụng email
khách hoặc một số ứng dụng chính thức khác mà mọi người sử dụng để quản lý và tận hưởng nội
dung mà họ sở hữu.

Trong loại giao diện này và các loại giao diện khác, một yêu cầu chung là chỉ hiển thị tên mục hoặc
hình thu nhỏ trong danh sách—chỉ là phần trình bày của từng mục—và sau đó hiển thị toàn bộ mục
khi người dùng chọn một mục từ danh sách. Có ít nhất ba cách để làm điều này.

“Khi người dùng chọn một mục từ danh sách, tôi nên hiển thị chi tiết của mục đó ở đâu?”
• Bộ chọn hai bảnghiển thị chi tiết mục ngay bên cạnh danh sách. Nó hỗ trợ tổng quan và
duyệt các trường hợp sử dụng khá tốt vì mọi thứ đều hiển thị cùng một lúc; trang xung
quanh vẫn giữ nguyên, do đó không có chuyển ngữ cảnh khó xử hoặc tải lại trang.

• Liệt kê khảmhiển thị chi tiết mục được nhúng trong danh sách. Các chi tiết chỉ mở ra khi
người dùng yêu cầu chúng bằng một lần nhấp hoặc nhấn. Mẫu này cũng hỗ trợ các trường
hợp sử dụng duyệt và tổng quan—mặc dù tổng quan sẽ khó hơn nếu có nhiều mục đang
mở—và việc tìm kiếm nội dung mục có thể được thực hiện suôn sẻ bằng cách tự động mở
các mục phù hợp.

• Xem chi tiết một cửa sổthay thế không gian của danh sách bằng các chi tiết mục. Điều này thường được
sử dụng cho những không gian nhỏ không thể chứa mộtBộ chọn hai bảng, chẳng hạn như màn hình di
động hoặc bảng mô-đun nhỏ. Tuy nhiên, điều này dẫn đến tình trạng "gắn bó" giữa màn hình danh
sách và màn hình mục, vì vậy việc duyệt và tìm kiếm không dễ dàng như vậy.
 Một số giải pháp195

Bây giờ hãy chuyển sự chú ý của chúng ta sang chính các mục. Bạn nên hiển thị bao nhiêu chi tiết với từng
mục, giả sử người dùng sẽ nhấp qua để xem toàn bộ nội dung? Một lần nữa, bạn có ba trường hợp sử dụng
chính để phục vụ: xem tổng quan nhanh, duyệt qua danh sách và tìm các mục quan tâm. Đối với các tác vụ
thực sự tập trung, chẳng hạn như tìm số điện thoại của một người trong danh sách liên hệ dài, tất cả những
gì cần thiết là tên mục. Nhưng đối với trải nghiệm rộng hơn, định hướng duyệt web hơn—chẳng hạn như
các bài báo trên một trang web—nhiều thông tin hơn làm cho một mục trở nên thú vị hơn (dù sao cũng đến
một mức độ nào đó). Và nếu bạn có hình ảnh liên quan đến từng mục, hãy hiển thị hình thu nhỏ!

“Làm cách nào tôi có thể hiển thị một danh sách có hình ảnh nặng?”

• Sử dụng hàng béo. Thay vì chỉ một dòng cho mỗi mục, hãy cung cấp cho mỗi hàng mục văn bản có giá trị nhiều
dòng. Nâng cao nó bằng một hình thu nhỏ hình ảnh hoặc đồ họa nhỏ, nếu có và sử dụng định dạng văn bản
đa dạng thức để thể hiện một hệ thống phân cấp trực quan thu nhỏ trong mỗi hàng. xemLưới đẳng thứcmẫu
trong Chương 4 để biết cơ sở của mẫu này.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

• Danh sách hình thu nhỏ và văn bản,trong Chương 10, là chuyên môn hóa của các hàng béo dành cho thiết bị di

động.

• Lưới hình thu nhỏlà một mô hình phổ biến cho các đối tượng hình ảnh. Lưới 2D gồm các hình ảnh
nhỏ có sức mạnh trực quan; nó thống trị trang và thu hút sự chú ý. Dữ liệu văn bản thường được
hiển thị với hình thu nhỏ, nhưng nó có xu hướng nhỏ và ít quan trọng hơn hình ảnh. Một lần
nữa, hãy xemLưới đẳng thứcmô hình cho một tổng quát.

• băng chuyềnlà một thay thế choLưới hình thu nhỏcó thể sử dụng ít không gian hơn trên trang. Nó hoàn toàn

tuyến tính, không phải 2D và người dùng phải chủ động cuộn qua nó để xem nhiều hơn một vài đối tượng.
Tùy thuộc vào thiết kế của nó, mộtbăng chuyềnviệc triển khai thực sự có thể cung cấp cho bạn nhiều không
gian hơn để hiển thị đối tượng được chọn hoặc trung tâm hơn làLưới hình thu nhỏ.

Các bộ mục có cấu trúc cao, đồng nhất hoạt động tốt trong cách bố trí bảng, với một cột cho từng lĩnh vực
mà người dùng quan tâm. Một bảng như vậy có thể cung cấp sắp xếp thông qua mộtBảng có thể sắp xếphoặc
danh sách thả xuống “Sắp xếp theo” để triển khai đơn giản hơn.sọc hàngcó thể giúp mắt người xem di
chuyển qua một hàng của một mục, từ trái sang phải và ngược lại. Các bảng là danh sách, nhưng chúng
cũng là đồ họa dữ liệu phức tạp có thể được lọc và hiển thị bằng các công cụ tinh vi. Vì vậy, đối với các mẫu
liên quan đến bảng khác, tôi giới thiệu bạn đến Chương 7.

Các danh sách rất dài có thể khó thiết kế, đặc biệt là trên các trang web. Chắc chắn có những thách thức kỹ
thuật xung quanh thời gian tải và độ dài trang, nhưng thiết kế tương tác có thể còn khó hơn—làm cách nào
để người dùng duyệt và di chuyển qua một danh sách như vậy? Làm thế nào anh ta có thể tìm thấy một cái
gì đó cụ thể, đặc biệt nếu tìm kiếm văn bản không hoạt động như mong muốn? Các kỹ thuật và mẫu sau
đây áp dụng cho tất cả các cách được liệt kê trước đây để hiển thị danh sách và các mục của nó (ngoại trừ có
thể là mộtbăng chuyền, có ràng buộc chặt chẽ hơn):
196Chương 5: Danh sách các thứ

“Làm thế nào tôi có thể quản lý một danh sách rất dài?”

• phân trangcho phép bạn tải danh sách theo từng phần, giao trách nhiệm cho người dùng tải
các phần đó khi cần. Tất nhiên, điều này khá phổ biến trong các trang web—rất dễ thiết kế
và triển khai.phân tranghữu ích nhất khi người dùng có khả năng tìm thấy (các) mục mong
muốn trong trang đầu tiên, vì nhiều người sẽ không bận tâm đến các trang tiếp theo. Bạn
cũng có thể dùng đếnphân trangkhi tải toàn bộ danh sách sẽ dẫn đến một trang quá dài
hoặc mất nhiều thời gian. Tốtphân trangkiểm soát hiển thị cho người dùng có bao nhiêu
trang của các mục, cũng như cho phép người dùng chuyển giữa các trang đó.

• Danh sách vô hạnlà một trang đơn thay thế chophân trang. Phần đầu tiên của một danh sách
dài được tải và ở dưới cùng, người dùng tìm thấy một nút để tải và nối thêm phần tiếp theo.
Người dùng ở lại trên một trang. Phổ biến trong các thiết kế di động, mẫu này có thể được
tìm thấy trong Chương 10. Tuy nhiên, đừng bỏ qua nó cho các trang web thông thường!
Mẫu này hữu ích khi bạn không thực sự biết danh sách sẽ dài bao nhiêu hoặc khi nó “không
đáy”.

• Một biến thể trênDanh sách vô hạncó danh sách tự động tải khi người dùng
cuộn xuống. xemCuộn liên tụcmẫu ở trang sau:
http://ui-potypes.com/potypes/ContinuityScrolling

• Khi một danh sách rất dài được sắp xếp theo thứ tự bảng chữ cái được giữ trong hộp cuộn, hãy cân nhắc sử dụng một
Bảng chữ cái cuộn.Có quan hệ vớiThanh cuộn được chú thích(Chương 3), thiết bị này hiển thị bảng chữ cái được sắp xếp

dọc theo chính thanh cuộn; sau đó người dùng có thể chuyển trực tiếp đến một chữ cái mong muốn.

• Tìm kiếm trực tiếp qua trường “Tìm” có thể rất quan trọng để giúp người dùng của bạn tìm thấy các mục cụ thể.
Ngoài ra, lọc danh sách—sàng lọc ra toàn bộ nhóm mục không đáp ứng các tiêu chí nhất định—có thể giúp
rút ngắn danh sách xuống kích thước có thể quản lý được.

Cho đến nay, phần này chủ yếu nói về danh sách phẳng: những danh sách không có danh mục, ngăn chặn
hoặc phân cấp. Tuy nhiên, một danh sách có thể được hiển thị, bạn vẫn có thể muốn chia nó thành các danh
mục cho rõ ràng.

“Làm cách nào tôi có thể hiển thị danh sách được sắp xếp thành danh mục hoặc thứ bậc?”

• Phần có tiêu đề(Chương 4) hoạt động tốt cho một cấp độ ngăn chặn duy nhất. Chỉ cần tách danh
sách thành các phần có tiêu đề và có thể cho phép người dùng sắp xếp danh sách trong một
phần để không làm gián đoạn việc phân loại. Nếu bạn chỉ có một vài phần, hãy thử mộtđàn phong
cầm—điều này cho phép người dùng đóng các phần danh sách mà họ không cần.

• Đối với hai hoặc nhiều cấp độ phân cấp, cây cơ bản là giải pháp dự phòng. Chúng thường được
trình bày với các mức phân cấp thụt vào và với các biểu tượng như dấu cộng và dấu trừ (thường
thấy trên Windows) hoặc hình tam giác xoay. Các cấp độ có thể được đóng và mở bởi người dùng
hoặc tự động bởi giao diện khi cần thiết. Nhiều bộ công cụ giao diện người dùng cung cấp các
triển khai dạng cây.
 các mẫu197

• Xếp tầng danh sáchlấy hệ thống phân cấp định hướng theo chiều dọc của cây và xoay nó sang một
bên, với một loạt các cột liệt kê tất cả các khả năng ở mọi cấp độ của hệ thống phân cấp. Được
phổ biến bởi Mac OS, mẫu này cho phép duyệt rất hiệu quả và tổng quan về các hệ thống phân
cấp với chi phí lớn về dung lượng. (Nó không hoạt động trong một cửa sổ hoặc màn hình nhỏ.)

• Khi các mục có cấu trúc chặt chẽ và bạn muốn trình bày chúng trong một bảng nhưng chúng được
sắp xếp theo thứ bậc, hãy xem xét mộtBàn cây. Theo nghĩa đen, nó kết hợp một cái cây với một
cái bàn, và nó đúng như tên gọi của nó.

Đầu tiên là ba mẫu đặt chi tiết mục bên cạnh, bên trong hoặc trên một trang khác với chính
danh sách:

1.Bộ chọn hai bảng

2.Xem chi tiết một cửa sổ
3.Liệt kê khảm

Một vài mẫu tiếp theo bao gồm các cách hiển thị danh sách thuộc nhiều loại khác nhau—danh sách dựa trên hình ảnh
(Lưới hình thu nhỏVàbăng chuyền), những cái bàn (sọc hàng), danh sách dài (phân trang,Chuyển đến Mục,
bảng chữ cái cuộn) và phân cấp (Xếp tầng danh sáchVàBàn cây). Nếu bạn đang sử dụng một bảng hoặc
Bàn cây, xem xét làm cho nó mộtBảng có thể sắp xếp(xem Chương 7).

4.Lưới hình thu nhỏ

5.băng chuyền

6.sọc hàng
7.phân trang
số 8.Chuyển đến Mục

9.bảng chữ cái cuộn

10.Xếp tầng danh sách

11.Bàn cây
Cuối cùng,Hàng vật phẩm mớicho phép người dùng thêm các mục vào danh sách tuy nhiên danh sách đó có thể được hiển thị.

12.Hàng vật phẩm mới

198Chương 5: Danh sách các thứ

Tùy chọn hệ thống Mac OS

Đặt hai bảng cạnh nhau trên giao diện. Trong cái đầu tiên, hiển thị danh sách các mục mà người dùng
có thể chọn theo ý muốn; trong cái thứ hai, hiển thị nội dung của mục đã chọn.

Bạn có một danh sách các mục để hiển thị. Mỗi mục có nội dung thú vị được liên kết với nó, chẳng hạn như văn
bản của email, bài viết dài, hình ảnh có kích thước đầy đủ, các mục được chứa (nếu danh sách là một tập hợp các
danh mục hoặc thư mục) hoặc chi tiết về kích thước của tệp hoặc ngày.

Bạn muốn người dùng xem cấu trúc tổng thể của danh sách và luôn xem danh sách đó, nhưng
bạn cũng muốn họ có thể duyệt qua các mục một cách dễ dàng và nhanh chóng. Mọi người sẽ
không cần phải xem chi tiết hoặc nội dung của nhiều mục cùng một lúc.

Về mặt vật lý, màn hình bạn đang làm việc đủ lớn để hiển thị hai bảng riêng biệt cùng một lúc. Màn
hình điện thoại di động rất nhỏ không thể đối phó với mô hình này, nhưng nhiều thiết bị di động lớn
hơn thì có thể.

Đây là một quy ước đã học, nhưng nó là một quy ước cực kỳ phổ biến và mạnh mẽ. Mọi người nhanh
chóng biết rằng họ phải chọn một mục trong một bảng để xem nội dung của nó trong bảng kia. Họ có
thể tìm hiểu nó từ các ứng dụng email của họ hoặc từ Windows Explorer hoặc từ các trang web; bất
kể trường hợp nào, họ áp dụng khái niệm này cho các ứng dụng khác tương tự.
 các mẫu199

Khi cả hai bảng hiển thị cạnh nhau, người dùng có thể nhanh chóng chuyển sự chú ý
của họ qua lại, bây giờ xem cấu trúc tổng thể của danh sách (“Tôi có bao nhiêu email
chưa đọc nữa?”), và bây giờ là chi tiết của một đối tượng ( “Email này nói gì?”). Sự tích
hợp chặt chẽ này có một số lợi thế so với các cấu trúc vật lý khác, chẳng hạn như hai
cửa sổ hoặcXem chi tiết một cửa sổ:
• Nó làm giảm nỗ lực thể chất. Mắt của người dùng không phải di chuyển một khoảng cách xa
giữa các bảng và anh ta có thể thay đổi lựa chọn bằng một lần nhấp chuột hoặc nhấn phím
thay vì điều hướng trước tiên giữa các cửa sổ hoặc trang (có thể mất thêm một lần nhấp
chuột).

• Nó làm giảm tải nhận thức thị giác. Khi một cửa sổ bật lên trên cùng hoặc khi nội dung của
trang bị thay đổi hoàn toàn (như xảy ra vớiXem chi tiết một cửa sổ), người dùng đột nhiên
phải chú ý nhiều hơn đến những gì anh ấy đang xem; khi cửa sổ hầu như ổn định, như
trong mộtBộ chọn hai bảng, người dùng có thể tập trung vào khu vực nhỏ hơn đã thay đổi.
Không có "chuyển đổi ngữ cảnh" chính trên trang.

• Nó làm giảm gánh nặng bộ nhớ của người dùng. Hãy nghĩ lại về ví dụ về email: khi người dùng chỉ
xem nội dung của một email, không có gì trên màn hình để nhắc anh ta về vị trí của tin nhắn đó
trong ngữ cảnh hộp thư đến của anh ta. Nếu anh ấy muốn biết, anh ấy phải nhớ hoặc điều
hướng trở lại danh sách. Nhưng nếu danh sách đã hiện trên màn hình, anh ta chỉ cần nhìn chứ
không cần nhớ. Do đó, danh sách này đóng vai trò là biển chỉ dẫn “Bạn đang ở đây” (xem Chương
3 để biết giải thích về biển chỉ dẫn).

• Nó nhanh hơn tải một trang mới cho mỗi mục, như có thể xảy ra vớimột cửa sổ
Xem chi tiết.

Đặt danh sách có thể chọn ở trên cùng hoặc bảng điều khiển bên trái và bảng chi tiết bên dưới hoặc ở bên phải.
Điều này tận dụng luồng trực quan mà hầu hết người dùng đọc ngôn ngữ từ trái sang phải sẽ mong đợi (vì vậy hãy
thử đảo ngược nó đối với người đọc ngôn ngữ từ phải sang trái).

Khi người dùng chọn một mục, ngay lập tức hiển thị nội dung hoặc chi tiết của mục đó trong bảng thứ hai.
Lựa chọn nên được thực hiện với một nhấp chuột duy nhất. Tuy nhiên, khi bạn đang ở đó, hãy cung cấp cho
người dùng cách thay đổi lựa chọn của họ từ bàn phím, đặc biệt là bằng các phím mũi tên—điều này giúp
giảm cả nỗ lực thể chất và thời gian cần thiết để duyệt, đồng thời góp phần vào khả năng sử dụng chỉ bằng
bàn phím (xemChỉ bàn phímtrong Chương 1).

Làm cho mục đã chọn trở nên rõ ràng. Hầu hết các bộ công cụ GUI đều có một cách cụ thể để hiển thị
lựa chọn (ví dụ: đảo ngược nền trước và nền sau của mục danh sách đã chọn). Nếu điều đó trông
không đẹp mắt hoặc nếu bạn không sử dụng bộ công cụ GUI với tính năng này, hãy thử làm cho mục
đã chọn có màu và độ sáng khác với mục không được chọn—nhằm giúp mục đó nổi bật.
200Chương 5: Danh sách các thứ

Danh sách có thể lựa chọn sẽ trông như thế nào? Nó phụ thuộc—vào cấu trúc vốn có của nội dung, hoặc có
lẽ vào nhiệm vụ được thực hiện. Chẳng hạn, hầu hết các trình xem hệ thống tệp hiển thị phân cấp thư mục,
vì đó là cách hệ thống tệp được cấu trúc. Phần mềm chỉnh sửa hoạt hình và video sử dụng các mốc thời gian
tương tác. Trình tạo GUI có thể chỉ cần sử dụng chính khung vẽ bố cục; các đối tượng đã chọn trên đó, sau
đó hiển thị các thuộc tính của chúng trong trình chỉnh sửa thuộc tính bên cạnh khung vẽ.

MỘTBộ chọn hai bảngcó ngữ nghĩa giống hệt với các tab: một khu vực dành cho bộ chọn và một khu vực bên cạnh nó dành
cho nội dung của đối tượng được chọn. Tương tự như vậy, mộtLiệt kê khảmgiống như mộtđàn phong cầm
(Chương 4), vàXem chi tiết một cửa sổgiống như mộtTrang thực đơn(Chương 3).

Khi khái niệm chọn và hiển thị được mở rộng qua nhiều bảng điều khiển để hỗ trợ điều
hướng thông qua kiến trúc thông tin phân cấp, bạn sẽ nhận đượcXếp tầng danh sáchmẫu.

Nhiều ứng dụng email sử dụng mẫu này để hiển thị danh sách email bên cạnh thư hiện được chọn
(xem Hình 5-2). Những danh sách như vậy được hưởng lợi từ việc rộng gần bằng toàn bộ cửa sổ, do
đó, nên đặt danh sách ở trên cùng của bảng điều khiển thứ hai, chứ không phải bên trái của nó.
(Ngoài ra, ví dụ này cho thấy việc sử dụng bảng chọn thứ ba ở bên trái cho phép người dùng chọn
hộp thư nào để làm việc.)

Mac Mail trên máy tính để bàn

Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu201

Giống như nhiều người khácTrình quản lý ảnh, Picasa (Hình 5-3) liệt kê các danh mục và thư mục hình ảnh
khác nhau trongBộ chọn hai bảng. Kết quả là một danh sách thứ hai, của hình ảnh. Khi người dùng chọn một
hình ảnh, toàn bộ cửa sổ sẽ được thay thế; nhìn thấyXem chi tiết một cửa sổ.

Picasa

http://quince.infragistics.com/Patterns/Two-Panel%20Selector.aspx http://

www.welie.com/patterns/showPattern.php?patternID=overview-detail
202Chương 5: Danh sách các thứ

Thư Mac trên iPhone

Hiển thị danh sách hoặc menu các mục trong một cửa sổ. Khi người dùng chọn một mục từ danh
sách, hiển thị chi tiết hoặc nội dung của mục đó trong cửa sổ, thay thế danh sách.

Bạn có một danh sách các mục để hiển thị. Mỗi mục có nội dung thú vị được liên kết với nó, chẳng hạn như nội
dung của email, bài báo dài, hình ảnh có kích thước đầy đủ hoặc chi tiết về kích thước hoặc ngày tháng của tệp.

Bạn có rất ít không gian để làm việc—không đủ cho mộtBộ chọn hai bảnghoặc mộtLiệt kê Inlay.
Ví dụ: thiết kế có thể dành cho màn hình di động rất nhỏ hoặc cho thanh bên hoặc tiện
ích con của trang web độc lập.
Ngoài ra, các mục và nội dung trong danh sách có thể lớn. Bạn có thể cần toàn bộ màn hình hoặc cửa
sổ để hiển thị danh sách và một lần nữa để hiển thị nội dung của một mục. Các diễn đàn trực tuyến có
xu hướng hoạt động theo cách này, yêu cầu toàn bộ chiều rộng của trang để liệt kê các chủ đề hội
thoại và một trang cuộn riêng biệt để hiển thị chính các hội thoại đó.
 các mẫu203

Trong một không gian rất hạn chế, đây có thể là lựa chọn hợp lý duy nhất để trình bày chi tiết danh sách và
mục. Nó cung cấp cho mỗi chế độ xem toàn bộ không gian có sẵn để “trải rộng” trên trang.

GiốngTrang thực đơnTuy nhiên, trong Chương 3, mô hình này có ưu điểm là đơn giản. Danh sách các
mục (hoặc liên kết) rất dễ hiểu: để xem thêm một mục, bạn nhấp hoặc nhấn vào mục đó và do đó “đi
sâu xuống” một cấp. Sau đó, bạn có thể quay lại danh sách hoặc menu chính để chuyển sang mục
khác.

Tạo danh sách bằng cách sử dụng bất kỳ bố cục hoặc định dạng nào bạn thấy phù hợp nhất—tên văn bản đơn
giản, "các hàng béo" nhiều dòng với định dạng văn bản, cây hoặc đường viền vàLưới hình thu nhỏtất cả đều hoạt
động tốt, cũng như các định dạng khác. Cuộn theo chiều dọc nếu cần để vừa với không gian có sẵn.

Khi người dùng nhấp, nhấn hoặc chọn một trong các mục trong danh sách, hãy thay thế hiển thị danh
sách bằng hiển thị chi tiết hoặc nội dung của mục đó. Trên đó, đặt nút Quay lại hoặc Hủy để đưa
người dùng trở lại màn hình danh sách (trừ khi nền tảng cung cấp các nút phần cứng cho mục đích
đó).

Màn hình mục có thể cung cấp các khả năng điều hướng bổ sung, chẳng hạn như đi sâu hơn vào chi
tiết mục, bước xuống một mục có trong mục đó (như trong hệ thống phân cấp) hoặc đi "ngang" tới
mục trước đó hoặc mục tiếp theo trong danh sách ( như được thảo luận trong đoạn tiếp theo). Trong
mỗi trường hợp, hãy thay thế màn hình trước đó bằng màn hình mới và đảm bảo rằng người dùng có
thể dễ dàng quay lại màn hình trước đó.

Một nhược điểm của mẫu này là để chuyển từ mục này sang mục khác, người dùng phải “gắn kết” giữa
trang danh sách và trang mục. Phải mất rất nhiều lần nhấp hoặc chạm để xem nhiều hơn một vài mục và
người dùng chắc chắn không thể lướt nhanh giữa chúng (như vớiBộ chọn hai bảng) hoặc so sánh chúng một
cách dễ dàng (như vớiLiệt kê khảm). Bạn có thể giảm thiểu sự cố này bằng cách sử dụng các liên kết Quay lại
và Tiếp theo để kết nối người dùng trực tiếp với các mục trước đó và tiếp theo trong danh sách—xem phần
Kim tự thápmẫu trong Chương 3.

Có rất nhiều ví dụ về thiết kế di động, như trong Hình 5-4. Đối chiếu phiên bản di động này của ứng dụng
thư khách với phiên bản máy tính để bàn của nó được hiển thị trongBộ chọn hai bảngmẫu. Ví dụ, cácXem chi
tiết một cửa sổphương pháp tiếp cận yêu cầu nhiều văn bản hơn được hiển thị trong danh sách, do đó, người
dùng có đủ ngữ cảnh để xác định thư và phân loại chúng.

Bạn có thể tìmXem chi tiết một cửa sổtrong các ứng dụng kích thước đầy đủ và các trang web. Các diễn đàn và cộng
đồng có xu hướng sử dụng nó rất nhiều—các chủ đề được liệt kê trên một trang và các chủ đề thảo luận nằm trên
các trang riêng của chúng. Ravelry chứng minh cách tiếp cận này, cũng như khoảng sáu triệu diễn đàn trực tuyến
khác (xem Hình 5-5).
204Chương 5: Danh sách các thứ

Diễn đàn Ravelry

Ứng dụng máy tính để bàn Picasa, mộtTrình quản lý ảnh,sử dụng mộtBộ chọn hai bảngbên cạnh một
Lưới hình thu nhỏcho giao diện duyệt của nó (xem Hình 5-6). Nhưng một khi người dùng nhấp vào một bức ảnh,

Picasa sẽ thay thế toàn bộ nội dung của cửa sổ (ngoại trừ thanh công cụ dưới cùng) bằng một bố cục mới—một bố
cục hiển thị chính bức ảnh đó trongTrung tâm sân khấu, với một bộ công cụ bên cạnh.
 các mẫu205

Picasa

http://quince.infragistics.com/Patterns/One-Window%20Drilldown.aspx
206Chương 5: Danh sách các thứ

Danh mục mở rộng của Kayak

Hiển thị danh sách các mục dưới dạng các hàng trong một cột. Khi người dùng chọn một mục, hãy mở
thông tin chi tiết của mục đó tại chỗ, trong chính danh sách đó. Cho phép các mục được mở và đóng độc lập
với nhau.

Bạn có một danh sách các mục để hiển thị. Mỗi mục có nội dung thú vị được liên kết với nó, chẳng hạn như
nội dung của email, bài báo dài, hình ảnh có kích thước đầy đủ hoặc chi tiết về kích thước hoặc ngày tháng
của tệp. Chi tiết mục không chiếm nhiều dung lượng, nhưng chúng cũng không nhỏ đến mức bạn có thể
đưa tất cả chúng vào danh sách.

Bạn muốn người dùng xem cấu trúc tổng thể của danh sách và luôn xem danh sách đó, nhưng
bạn cũng muốn họ duyệt qua các mục một cách dễ dàng và nhanh chóng. Người dùng có thể
muốn xem hai hoặc nhiều nội dung mục cùng một lúc để so sánh.

Danh sách các mục có cấu trúc cột, định hướng theo chiều dọc.
 các mẫu207

MỘTLiệt kê khảmhiển thị chi tiết của một mục trong ngữ cảnh của chính danh sách đó. Người dùng có
thể nhìn thấy các mục xung quanh, điều này có thể giúp hiểu và sử dụng nội dung mục đó.

Ngoài ra, người dùng có thể xem chi tiết của nhiều mục cùng một lúc. Điều này là không thể trongBộ chọn
hai bảng,Xem chi tiết một cửa sổ, cửa sổ di chuột qua hoặc hầu hết các cách khác để hiển thị chi tiết mục. Nếu
các trường hợp sử dụng của bạn yêu cầu so sánh thường xuyên hai hoặc nhiều mục, thì đây có thể là tùy
chọn tốt nhất.

Vì mộtLiệt kê khảmđược chứa gọn gàng trong một cột dọc, nó có thể được kết hợp tốt với mộtBộ chọn
hai bảngđể trình bày một hệ thống phân cấp ngăn chặn ba cấp độ. Ví dụ, xem xét một ứng dụng email
hoặc trình đọc RSS—các tin nhắn hoặc bài viết có thể được xem trong mộtLiệt kê khảm, trong khi các
bộ chứa mục (hộp thư, nhóm, bộ lọc, v.v.) được hiển thị bên cạnh mục đó trong
MộtBộ chọn hai bảngkết cấu.

Hiển thị các mục danh sách trong một cột. Khi người dùng click vào một thì mở item tại chỗ sẽ
hiện thông tin chi tiết của item đó. Một cử chỉ tương tự sẽ đóng mục sao lưu lại.

Khi một mục được mở, hãy phóng to không gian của mục đó xuống dưới, đẩy các mục tiếp
theo xuống dưới trang. Các mục khác làm tương tự khi mở. Một khu vực cuộn nên được sử
dụng để chứa cấu trúc thẳng đứng luôn thay đổi này, vì nó thực sự có thể rất cao!

Để đóng bảng chi tiết, hãy sử dụng một điều khiển chỉ rõ mục đích của nó (ví dụ: “Đóng” hoặc “X”).
Một số triển khai củaLiệt kê khảmchỉ đặt điều khiển đó ở cuối bảng điều khiển chi tiết, nhưng người
dùng có thể cần nó ở trên cùng nếu bảng điều khiển dài và họ không muốn di chuyển xuống toàn bộ.
Đặt một bộ điều khiển đóng gần với bộ điều khiển “mở” ban đầu (hoặc thay thế cái này bằng cái kia).
Điều này ít nhất đảm bảo rằng con trỏ của người dùng sẽ không di chuyển quá xa nếu cô ấy muốn mở
một mục, nhìn lướt qua mục đó, đóng mục đó và tiếp tục.

sử dụng mộtchuyển đổi hoạt hìnhkhi mục mở và đóng, để giữ cho người dùng được định hướng và tập
trung sự chú ý vào mục mới được mở.

Nếu ứng dụng của bạn cho phép người dùng chỉnh sửa các mục, bạn có thể sử dụng mộtLiệt kê khảmđể mở trình
chỉnh sửa thay vì chi tiết mục (hoặc bổ sung cho chúng).

Một danh sách sử dụngLiệt kê khảmhoạt động theo cách tương tự như mộtđàn phong cầm: mọi thứ nằm trong một
cột duy nhất, với các bảng mở và đóngtại chỗbên trong nó. Tương tự như vậy, mộtBộ chọn hai bảng
hoạt động giống như một tập hợp các tab vàXem chi tiết một cửa sổgiống như mộtTrang thực đơn(Chương 3).

Google Reader (Hình 5-8) sử dụng mộtLiệt kê khảmtrong bối cảnh của mộtBộ chọn hai bảng. Nó có một hệ
thống phân cấp đa cấp của các vùng chứa để trình bày; các thùng chứa được hiển thị trong bộ chọn cây ở
bên trái, nhưng danh sách các bài viết chiếmTrung tâm sân khấuvà sau đó người dùng có thể mở chúng tại
chỗ để đọc chúng.
208Chương 5: Danh sách các thứ

người đọc Google

 các mẫu209

Thay vì buộc người dùng phải di chuyển qua lại từ danh sách các bài đánh giá sách đến nội dung thực tế của
mỗi bài đánh giá, trang web dành cho thiết bị di động của Amazon cho phép người dùng đọc chúng theo
cáchLiệt kê khảm. Danh sách các mục ở bên trái cám dỗ người dùng bằng các đoạn giới thiệu ngắn từ mỗi bài
đánh giá và khi người dùng đủ hứng thú để tiếp tục đọc, cô ấy có thể nhấn vào tiêu đề để đọc toàn bộ (Hình
5-9). Sự tồn tại của các điều khiển cộng và trừ báo hiệu cho người dùng rằng các mục này sẽ mở rộng.

Amazon đánh giá trên iPhone

http://www.patternry.com/p=inline-expand/

Bill Scott và Theresa Neil đã xác định kỹ thuật này trong cuốn sách của họ,Thiết kế giao diện
web (O'Reilly,http://oreilly.com/catalog/9780596516253/).Liệt kê khảmlà một trong một tập
hợp các kỹ thuật inlay bao gồm Dialog Inlays và Detail Inlays.

Cácđàn phong cầmmẫu tồn tại trong nhiều thư viện mẫu, bao gồm cả mẫu này. Phần lớn lời khuyên
thiết kế dành chođàn phong cầmcó thể áp dụng tốt như nhau choLiệt kê khảm. (Thực sự không có sự
khác biệt lớn về mặt thực tế giữa chúng.)
210Chương 5: Danh sách các thứ

Danh sách sản phẩm của Hanna Andersson

Sắp xếp danh sách các mục trực quan thú vị thành một lưới “bội số nhỏ” gồm các hình ảnh thu nhỏ. Cho
phép người dùng chọn một hoặc nhiều hình thu nhỏ để xem hoặc quản lý các mục đó.

Các mục trong danh sách có các biểu diễn trực quan nhỏ giúp nhận dạng chúng một cách duy nhất: hình
ảnh, biểu trưng, ảnh chụp màn hình, ảnh thu nhỏ, v.v. Chúng có xu hướng giống nhau về kích thước và
kiểu dáng. Danh sách này có thể dài và có thể được chia thànhPhần có tiêu đề(Chương 4).

Bạn muốn hiển thị một chút siêu dữ liệu (thông tin về mục) với mỗi mục, chẳng hạn như tên và
ngày của mục đó, nhưng bạn không cần hiển thị nhiều thông tin đó—hình ảnh sẽ chiếm phần
lớn không gian dành cho mục.
 các mẫu211

Người dùng sẽ muốn có cái nhìn tổng quan về toàn bộ danh sách và họ có thể cần quét nhanh danh sách
đó để tìm một mục quan tâm cụ thể. Người dùng cũng có thể cần chọn một hoặc nhiều mục cùng một lúc
để di chuyển, xóa hoặc xem.

MỘTLưới hình thu nhỏlà một trình bày dày đặc, hấp dẫn của số lượng lớn các mặt hàng. Có quan hệ với
Lưới đẳng thức(Chương 4), mẫu này tạo ra một hệ thống phân cấp trực quan hiển thị các mục trong danh sách

ngang hàng và một lưới mạnh có xu hướng thu hút sự chú ý vào phần đó của trang.

Việc hiển thị các mục danh sách ở dạng văn bản có thể dễ dàng hơn, nhưng đôi khi hình ảnh có thể
được nhận dạng và phân biệt dễ dàng hơn văn bản.

Hình thu nhỏ gần như hình vuông tạo ra các mục tiêu dễ dàng cho các đầu ngón tay (trên màn hình cảm
ứng) và cho cả các thiết bị trỏ gián tiếp. Mẫu này hoạt động tốt trên các thiết bị di động có màn hình cảm
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

ứng có độ phân giải tương đối cao, chẳng hạn như iPhone.

Sắp xếp các hình thu nhỏ của mục thành lưới 2D. Chia tỷ lệ các hình thu nhỏ sao cho chúng có
cùng kích thước để giữ cho lưới gọn gàng. Đặt siêu dữ liệu văn bản gần với hình thu nhỏ, nhưng
ở dạng chữ in nhỏ để duy trì sự nổi bật về mặt hình ảnh của hình thu nhỏ.

Một sốLưới hình thu nhỏtrông đẹp hơn nhiều khi tất cả các hình thu nhỏ đều có chiều rộng và chiều cao
tương tự nhau. Nếu bạn đang làm việc với đồ họa có các kích cỡ hoặc tỷ lệ khung hình khác nhau (tỷ lệ
giữa chiều rộng và chiều cao) hoặc nếu chúng lớn, thì cần phải thực hiện một số xử lý hình ảnh để tạo
hình thu nhỏ. Cố gắng tìm một kích thước và tỷ lệ khung hình phù hợp với tất cả chúng, ngay cả khi
một số hình ảnh sẽ được cắt để phù hợp với nó. (Giảm kích thước hình ảnh thì dễ; cắt xén phù hợp thì
không. Hãy cẩn thận để bảo toàn tính toàn vẹn của hình ảnh bằng cách chọn phần hình ảnh có liên
quan nhất để hiển thị, khi có thể.)

Một ngoại lệ là nếu bạn đang xử lý hình ảnh có kích thước và tỷ lệ là thông tin hữu ích cho
người xem. Chẳng hạn, một bộ ảnh cá nhân sẽ chứa một số ảnh ở định dạng ngang và một
số ở định dạng dọc (dọc). Không cần phải cắt những ảnh này để phù hợp với hình thu nhỏ
được lý tưởng hóa—người dùng sẽ muốn xem ảnh nào là ảnh nào!

Mặt khác, một bộ sưu tập hình thu nhỏ gồm các sản phẩm (chẳng hạn như giày hoặc áo sơ mi)
phải có cùng chiều cao và chiều rộng, với các sản phẩm được trình bày nhất quán trong các ảnh
đó.
212Chương 5: Danh sách các thứ

Mac OS Finder hiển thị nhiều loại hình thu nhỏ khác nhau cho danh sách thư mục tệp (xem Hình 5-11). Khi
một tệp là một hình ảnh, một phiên bản thu nhỏ của hình ảnh đó sẽ được hiển thị; đối với các thư mục, một
thư mục đơn giản; đối với các tệp không có hình ảnh có sẵn, chỉ loại tệp (ví dụ: “DOC”) trên một biểu tượng
chung. Lưới hình thu nhỏ hoàn toàn không đồng nhất, do đó, nó trông không rõ ràng như các lưới khác
trong mẫu này, nhưng các biến thể về kích thước và kiểu truyền đạt thông tin hữu ích cho người dùng.

Trình tìm hệ điều hành Mac

Kho lưu trữ thiết kế của AIGA (Hình 5-12) và YouTube (Hình 5-13) là haiTrình quản lý ảnh
tương ứng không hiển thị thông tin văn bản và nhiều thông tin văn bản.
 các mẫu213

Kho lưu trữ thiết kế AIGA

YouTube
214Chương 5: Danh sách các thứ

Zappos (Hình 5-14) và Hanna Andersson (Hình 5-10, ở trên cùng của mẫu) thể hiện thiết kế độc
đáoLưới hình thu nhỏcho phòng trưng bày sản phẩm. Tính đồng nhất ở đây rất đẹp—những điểm
tương đồng và khác biệt giữa các sản phẩm hiển thị với độ rõ nét đáng kinh ngạc và nhịp điệu
hình ảnh mạnh mẽ tồn tại trên trang.

Zappos

Thiết bị di động cầnLưới hình thu nhỏtrong nhiều ngữ cảnh: để hiển thị chính các ứng dụng, tính năng
và hình ảnh. Lưu ý kích thước tương đối của các hình thu nhỏ trong Hình 5-15; các ví dụ về màn hình
chính của Google Hình ảnh và iPhone chỉ đủ lớn để chạm vào dễ dàng bằng đầu ngón tay của con
người. Ví dụ về Facebook thoải mái hơn, với nhiều không gian hơn xung quanh mỗi mục.
 các mẫu215

Lưới hình thu nhỏ trên iPhone: Facebook, Google Images và màn hình chính

http://ui-patterns.com/patterns/Thumbnail

Marriott

Sắp xếp danh sách các mục trực quan thú vị thành một dải ngang hoặc vòng cung và cho phép người
dùng cuộn hoặc vuốt hình thu nhỏ của hình ảnh qua lại để xem chúng. Phóng to mục trung tâm, nếu
thích hợp.
216Chương 5: Danh sách các thứ

Các mục trong danh sách có các biểu diễn trực quan giúp nhận dạng chúng một cách duy nhất: hình ảnh, biểu
trưng, ảnh chụp màn hình, ảnh thu nhỏ, v.v. Chúng có xu hướng giống nhau về kích thước và kiểu dáng. danh
sách làphẳng (tức là không được chia thành các loại hoặc vùng chứa).

Bạn muốn hiển thị một chút siêu dữ liệu (thông tin về mục) với mỗi mục, chẳng hạn như tên và
ngày của mục đó, nhưng bạn không cần hiển thị nhiều thông tin đó—hình ảnh sẽ chiếm phần
lớn không gian dành cho mục.

Mỗi mục có khả năng quan tâm. Người dùng sẽ duyệt các mục một cách tình cờ; họ sẽ không thường
tìm kiếm một mục cụ thể hoặc cần có cái nhìn tổng thể về toàn bộ danh sách cùng một lúc. Nếu ai đó
tìm kiếm một mặt hàng cụ thể, anh ta sẽ không ngại di chuyển qua nhiều mặt hàng trước khi tìm thấy
mặt hàng mà mình đang tìm kiếm. Bạn có thể đặt các món có món hấp dẫn nhất trước hoặc theo thứ
tự thời gian.

Bạn không có đủ không gian theo chiều dọc cho mộtLưới hình thu nhỏ, và bạn cũng có thể không có nhiều
không gian theo chiều ngang, nhưng bạn cần làm cho danh sách này trông thú vị và hấp dẫn.

MỘTbăng chuyềncung cấp một giao diện hấp dẫn để duyệt các mục trực quan, khuyến khích người dùng
kiểm tra các mục đang xem và xem những gì tiếp theo. Người dùng không thể dễ dàng chuyển đến một
điểm nhất định nằm sâu trong danh sách, vì vậy anh ta phải cuộn qua mọi thứ—do đó, mẫu này khuyến
khích việc duyệt tìm và sự ngẫu nhiên.

băng chuyềnnhỏ gọn theo chiều dọc, vì vậy chúng có thể là một giải pháp tốt hơn so vớiLưới hình thu nhỏcho

một không gian nhỏ. Theo chiều ngang, chúng có thể nhỏ gọn hoặc trải rộng.

Nếu một triển khai cụ thể tập trung sự chú ý vào một mục hoặc lựa chọn trung tâm, chẳng hạn như bằng cách
phóng to mục đó, mẫu này sẽ mang lại “tiêu điểm cộng với ngữ cảnh”—người dùng có được chế độ xem chi tiết về
một mục, đồng thời nhìn thấy ngay những mục xung quanh mục đó. Xem Chương 7 để thảo luận thêm về nguyên
tắc này.

Đầu tiên, tạo hình thu nhỏ cho từng mục được hiển thị trongbăng chuyền. xemLưới hình thu nhỏmẫu
cho các vấn đề liên quan đến kích thước và tỷ lệ hình thu nhỏ (hãy nhớ rằngbăng chuyền
áp đặt các hạn chế thậm chí còn nghiêm ngặt hơn—hình thu nhỏ có kích thước hoặc tỷ lệ khung hình khác nhau có
xu hướng trông khó xử hơn trongbăng chuyềnhơn trongLưới hình thu nhỏ). Đặt siêu dữ liệu văn bản gần với hình thu
nhỏ, nhưng ở dạng chữ in nhỏ để duy trì sự nổi bật về mặt hình ảnh của hình thu nhỏ.

Trong tiện ích cuộn ngang, hãy sắp xếp các hình thu nhỏ theo chiều ngang, ngẫu nhiên hoặc theo thứ
tự dễ hiểu đối với người dùng (chẳng hạn như theo ngày). Hiển thị một số ít trong số chúng—ít hơn
10—và giấu phần còn lại ở hai bên. Đặt các mũi tên lớn ở bên trái và bên phải để phân trang quabăng
chuyền; mỗi lần nhấp vào một mũi tên sẽ di chuyển nhiều mục. Tạo hiệu ứng cho thao tác cuộn này để
tăng thêm sự thú vị về mặt hình ảnh.
 các mẫu217

Nếu người dùng muốn di chuyển nhanh qua một danh sách dài, như thể họ đang tìm kiếm điều gì đó
cụ thể, hãy đặt một thanh cuộn bên dướibăng chuyềnngoài các mũi tên. Bạn có thể thấy rằng người
dùng làm điều này rất nhiều; nếu vậy, hãy xem xét tái cơ cấu danh sách thành một danh sách dọc
thông thường hơn và thêm khả năng “tìm”.

Bạn có thể chọn phóng to mục trung tâm trongbăng chuyềnđể thu hút sự chú ý vào nó. Điều này mang lại
chobăng chuyềnngữ nghĩa của một lựa chọn—mục được phóng to rõ ràng là mục được chọn và khi đó, bạn
có thể thực hiện các thao tác động dựa trên lựa chọn đó, chẳng hạn như hiển thị chi tiết văn bản về mục đó
hoặc cung cấp các điều khiển video nếu các mục đó là hình thu nhỏ của video.

Một sốbăng chuyềnthẳng; một số cong hoặc tròn. Chúng thường sử dụng thủ thuật phối
cảnh 3D, trong đó các mục co lại và bị che khuất một phần khi chúng trôi ra xa trung
tâm hơn.
Trong không gian thiết kế di động,cuộn phimmẫu (Chương 10) là một biến thể trên mộtbăng
chuyền. Mỗi lần chỉ có một mục được hiển thị trên màn hình nhỏ và người dùng vuốt hoặc cuộn
qua lại để xem các mục khác.

Nhiều trang web sử dụng cơ bản, tuyến tínhbăng chuyềnđể duyệt sản phẩm. Amazon và Google
Books hiển thị bìa sách theo cách này (xem Hình 5-17); lưu ý số lượng siêu dữ liệu văn bản khác
nhau và ý nghĩa đối với thiết kế. Bao nhiêu thông tin nên được cung cấp với mỗi cuốn sách? Bìa
sách nên được đóng gói chặt chẽ như thế nào?

Amazon và Google Sách

218Chương 5: Danh sách các thứ

Apple và Flickr (Hình 5-18 và 5-19) cung cấp thanh cuộn ngang cùng với
băng chuyền. Chúng có thể chứa rất nhiều mục, vì vậy cần có thanh cuộn để tiến hành nhanh qua chúng. Lưu
ý rằng Applebăng chuyềnsử dụng mộtThanh cuộn được chú thích(Chương 3) để giúp người dùng tìm danh mục
sản phẩm. Khía cạnh ngang của danh sách này giúp trình bày tên sản phẩm một cách duyên dáng, nhưng
nó sẽ không mở rộng ra ngoài một số ít danh mục—việc trình bày một danh sách được phân loại trong một
danh sách là điều khá bất thường.băng chuyền. Danh sách phẳng thường hoạt động tốt hơn.

Băng chuyền sản phẩm Apple

Công cụ tổ chức Flickr

Bao gồm dòng chảy(Hình 5-20) thực chất là một phương tiệnbăng chuyềnphóng to mục trung tâm, đã chọn. So
sánh nó với một đường congbăng chuyềntrong ứng dụng Android (Hình 5-21); chúng tương tự nhau về hành
vi, nhưng rất khác nhau về kiểu dáng trực quan.

Cover Flow trong iTunes

 các mẫu219

Sherpa dành cho Android (hình ảnh được cung cấp bởi http://www.androidtapp.com/sherpa-discover-your-
thế giới/sherpa-gần-ăn-ăn-trên-đu quay/)

CácThời báo New Yorktrình bày một số bài viết nổi bật của nó trong mộtbăng chuyền(xem Hình 5-22).
Đây là những loại bài viết có thể cám dỗ người dùng xem từng bài và lướt qua một cách chậm rãi; nó
sẽ không hoạt động cho tất cả cáclần'vô số bài báo hàng ngày, vì mọi người chủ yếu lướt qua các tiêu
đề và chọn lọc các bài báo quan tâm. Các tính năng là khác nhau, tuy nhiên.

Các bài viết nổi bật của New York Times

http://developer.yahoo.com/ypotypes/selection/carousel.html

http://ui-potypes.com/potypes/Carousel

http://welie.com/patterns/showPattern.php?patternID=carrousel
220Chương 5: Danh sách các thứ

JetBlue

Sử dụng hai sắc thái tương tự để tô màu xen kẽ nền của các hàng trong bảng.

Giao diện của bạn trình bày dữ liệu trong một bảng nhiều cột lớn, nhưng các hàng của bảng rất khó
phân tách trực quan. Người dùng sẽ cần tra cứu các mục dữ liệu cụ thể trong bảng.

Các khối màu nhẹ nhàng xác định và mô tả thông tin chứa bên trong chúng, ngay cả khi bạn
không thể sử dụng khoảng trắng để phân tách dữ liệu thành “khối”. Những người vẽ bản đồ và
thiết kế đồ họa đã biết đến kỹ thuật khối màu này từ lâu. (Hãy nhớ rằng nền màu cũng có hiệu
quả để xác định các phần của trang và trình bày rõ ràng cấu trúc phân cấp trực quan. Xem
Chương 4 để biết thêm thông tin.)
 các mẫu221

Khi ai đó nhìn vào một bảng dữ liệu lớn với một màu nền duy nhất, cô ấy sẽ có xu hướng xem
các cột là các đối tượng nhất quán do ở gần—các mục nhập bảng trong một cột gần nhau hơn
so với các mục nhập khác trong các hàng của chúng. Nhưng bạn muốn người xem đọc bảng
“theo hàng” cũng như theo cột. Bằng cách tô màu các hàng liền kề khác nhau, bạn cũng biến các
hàng thành các đối tượng trực quan mạch lạc. (Điều này tận dụng các nguyên tắc Gestalt củaliên
tụcVàKhép kín;một lần nữa, xem Chương 4.)

Đặc biệt,sọc hànggiúp người dùng:

• Đi theo một hàng từ trái sang phải và ngược lại mà không nhầm lẫn giữa các hàng

• Xem “dấu chân” của chính bảng đó, tách biệt khỏi trang chứa bảng đó
Tuy nhiên,sọc hànggiới thiệu nhiều tiếng ồn trực quan hơn vào trang. Một số người dùng trong một số
ngữ cảnh có thể thấy rằng nó làm họ chậm lại hoặc khiến bảng khó sử dụng hơn.

Hai nghiên cứu vềsọc hàng, còn được biết làsọc ngựa vằn,chỉ ra rằng nó có một lợi ích nhỏ nhưng
đáng chú ý đối với tốc độ tra cứu và độ chính xác—trong một số điều kiện. Các bảng mà tra cứu
được cải thiện khá lớn, với nhiều hàng và một số cột cách đều nhau; một bảng nhỏ hơn cho thấy
không có lợi ích theo cách này hay cách khác. Các nhà nghiên cứu cũng lưu ý rằng khi được hỏi
về nó, người dùng cho biết họ thíchsọc hàng! Xem hai bài viết tại các URL sau để biết các cuộc
thảo luận về các nghiên cứu này và để biết các liên kết đến nghiên cứu ban đầu do Formulate
Information Design thực hiện:
http://www.alistapart.com/articles/zebrastripingdoesithelp/ http://
www.alistapart.com/articles/zebrastripingmoredataforthecase/

Chọn một cặp màu yên tĩnh, độ bão hòa thấp có giá trị tương tự nhau nhưng không giống hệt
nhau. (Nói cách khác, một cái cần tối hơn cái kia một chút.) Các lựa chọn tốt là màu xanh nhạt và
trắng, màu be và trắng hoặc hai sắc thái xám tương tự—giả sử văn bản ở trên chúng là màu tối.
Nói chung, một trong các màu là màu nền của trang của bạn.

Xen kẽ màu từ hàng này sang hàng khác. Nếu các hàng mỏng, bạn cũng có thể thử nghiệm nhóm các
hàng—ba hàng đầu tiên có màu trắng, ba hàng tiếp theo có màu xanh dương, v.v.—nhưng nghiên
cứu đã mô tả một vài đoạn cho thấy rằng người dùng thích cách kẻ sọc theo từng dòng.
222Chương 5: Danh sách các thứ

Mẫu này hầu như loại bỏ sự cần thiết của các đường ngang giữa các hàng (mặc dù bạn có thể sử dụng
chúng nếu chúng rất mỏng và không rõ ràng). Nếu các cột của bạn thẳng hàng với nhau, thì bạn không cần
các đường thẳng đứng giữa chúng, cũng không cần đường viền đậm xung quanh bảng—cảm giác gần gũi
về mặt hình ảnh của người xem sẽ phát huy và màu sắc của hàng sẽ xác định các cạnh của bảng cho bạn .
Tuy nhiên, nếu tính năng phân chia hàng không hoạt động tốt đối với người dùng của bạn, thì bạn có thể
thử các đường kẻ ngang rất mỏng thay vì chúng có tác dụng tương tự là buộc mắt phải nhìn thấy các nhóm
ngang thay vì các nhóm dọc.

Ví dụ JetBlue ở trên cùng của mẫu (Hình 5-23) hiển thị một số dòng trên mỗi hàng. Bản thân dữ
liệu là nhiều dòng và được định dạng cẩn thận; một số phân tách hàng khác với khoảng trắng là
cần thiết ở đây. Các quy tắc ngang nhẹ cũng có thể hoạt động, nhưngsọc hànglàm cho các hình
dạng mạch lạc ra khỏi các hàng.

Sọc một hàng phổ biến hơn. iTunes sử dụng nó rất hiệu quả, như trong Hình 5-24.

itunes

Bảng tính sổ cái Excel được hiển thị trong Hình 5-25 cho phép người dùng thay đổi kiểu
đường lưới vàsọc hànglà một trong những khả năng. Trang tính này giúp bạn dễ dàng đi
theo các dòng từ trái sang phải và ngược lại.
 các mẫu223

Sổ cái excel, có sọc

Nhưng hãy xem điều gì sẽ xảy ra khi nền hàng màu xám bị loại bỏ, như trong Hình 5-26.
Các cột đột nhiên trở nên mạnh mẽ hơn về mặt trực quan và mỗi hàng khó đọc hơn từ trái
sang phải. Tuy nhiên, một số nhà thiết kế thấy thiết kế này sạch sẽ và dễ chịu hơn. Không có
câu trả lời hoàn toàn chính xác về việc có nên sử dụngsọc hànghay không.

Sổ cái Excel, không có sọc

224Chương 5: Danh sách các thứ

Kỹ thuật này ở nhiều nơi còn được gọi là “màu sắc hàng xen kẽ” hoặc “sọc vằn”.
Mô tả rất nhiều trên Web:
http://ui-patterns.com/patterns/AlternatingRowColors http://www.welie.com/

patterns/showPattern.php?patternID=zebra-table http://

quince.infragistics.com/Patterns/Alternating%20Row% 20Colors.aspx

Kiểm soát phân trang Songza

Chia một danh sách rất dài thành các trang và tải từng trang một. Cung cấp các điều khiển để người dùng điều
hướng danh sách—các trang tiếp theo, trước đó, đầu tiên và cuối cùng.

Bạn đang hiển thị một danh sách có thể rất, rất dài. Hầu hết người dùng sẽ tìm kiếm một mục cụ thể hoặc
duyệt qua đầu danh sách để tìm các mục có liên quan (ví dụ: với kết quả tìm kiếm); trong mọi trường hợp,
họ sẽ không thực sự muốn xem toàn bộ danh sách.

Công nghệ bạn đang sử dụng không hỗ trợ tải toàn bộ danh sách vào một trang hoặc
vùng cuộn vì bất kỳ lý do nào sau đây:
• Tải toàn bộ danh sách sẽ mất quá nhiều thời gian và bạn không muốn người dùng
phải chờ đợi. Đây có thể là trường hợp kết nối Internet chậm hoặc máy chủ phụ trợ
chậm.
• Hiển thị danh sách sẽ mất quá nhiều thời gian.

• Danh sách này thực sự là “không đáy” và thực hiện mộtDanh sách vô hạnhoặc danh sách cuộn
liên tục (cả hai đều xử lý danh sách không đáy) không khả thi vì một số lý do.

phân trangchia danh sách thành nhiều phần mà người dùng có thể dễ dàng tiếp nhận mà không bị
choáng ngợp. Hơn nữa, nó đặt quyền lựa chọn để xem thêm vào tay người dùng—bạn có muốn tải
thêm các mục từ danh sách hay trang các mục này đã đủ cho bạn chưa?
 các mẫu225

Mẫu này cũng có ưu điểm là rất phổ biến trên Web, đặc biệt (mặc dù không chỉ dành riêng)
cho các kết quả tìm kiếm. Nó rất dễ thực hiện và có thể được dựng sẵn trong một số hệ
thống.

Trước tiên, bạn cần quyết định có bao nhiêu mục trong mỗi trang. Căn cứ vào dung lượng mà
mỗi mục chiếm, kích thước màn hình mà người dùng có thể có (đừng quên xem xét các nền tảng
di động), thời gian cần thiết để tải hoặc hiển thị các mục và khả năng người dùng sẽ tìm thấy
một hoặc nhiều mục mong muốn trong trang đầu tiên.

Điều này khá quan trọng: trang đầu tiên là đủ! Khả năng cao là hầu hết người dùng sẽ không
xem hết trang đầu tiên của các mục, vì vậy nếu họ không thể tìm thấy thứ họ đang tìm trong
trang đầu tiên đó, họ có thể nản lòng. (Nếu bạn đang xử lý công cụ tìm kiếm, hãy đảm bảo rằng
công cụ đó trả về kết quả chất lượng cao ở đầu trang đầu tiên đó.)

Trên các trang mà người dùng có thể nán lại, chẳng hạn như danh sách sản phẩm hoặc video, hãy cân
nhắc cho phép người dùng đặt số lượng mục trên mỗi trang. Một số người khó chịu khi phải lật đi lật
lại trang để xem tất cả các mục quan tâm.

Tiếp theo, bạn sẽ cần quyết định cách trình bày các điều khiển phân trang. Chúng thường được
tìm thấy ở cuối trang, nhưng một số thiết kế cũng có chúng ở trên cùng—nếu người dùng thực
sự cần chuyển đến trang tiếp theo của các mục, thì không cần phải bắt anh ta cuộn xuống hết
trang .

Xem xét các yếu tố này trong kiểm soát phân trang:

• Liên kết Trước và Tiếp theo, có mũi tên hoặc hình tam giác để nhấn mạnh. Tắt liên kết Trước
đó khi người dùng ở trang đầu tiên và liên kết Tiếp theo khi người dùng ở trang cuối cùng
(nếu có trang cuối cùng đã biết).

• Một liên kết đến trang đầu tiên. Điều này phải luôn được nhìn thấy; hãy nhớ rằng trang đầu
tiên phải chứa các mục có liên quan nhất.

• Một chuỗi các liên kết được đánh số đến các trang. Tất nhiên, đừng liên kết trang mà người dùng đang truy cập; thay
vào đó, hãy hiển thị nó bằng màu tương phản và kích thước loại để cung cấp cho người dùng manh mối điều hướng
“Bạn đang ở đây”.

• Dấu chấm lửng để cắt bỏ các phần của trình tự nếu có quá nhiều trang để hiển thị một cách hợp lý
trong điều khiển—ví dụ: hơn 20 trang. Một lần nữa, hãy giữ lại trang đầu tiên và trang cuối cùng
nếu danh sách không phải là “không đáy”. Giữ các trang ngay trước và sau trang hiện tại của
người dùng. Bỏ qua phần còn lại.

• Tùy chọn tổng số trang (nếu biết). Bạn có thể thực hiện điều này theo nhiều cách, chẳng hạn
như hiển thị văn bản như “Trang 2 trên 45” hoặc chỉ hiển thị trang cuối cùng dưới dạng liên
kết được đánh số ở cuối điều khiển phân trang. Xem các ví dụ cho một số ý tưởng.
226Chương 5: Danh sách các thứ

Digg và Google đều làm rất tốt việc bao gồm tất cả các yếu tố và tín hiệu từ danh sách trước. Ảnh
chụp màn hình trong Hình 5-28 cho thấy các trạng thái kiểm soát phân trang thú vị nhất: trang
đầu tiên và trang cuối cùng chỉ dành cho một số ít mục và trang đầu tiên, trang giữa và cuối
cùng dành cho số lượng mục rất lớn. Lưu ý rằng Digg sử dụng dấu chấm lửng để quản lý số
lượng lớn và Google chỉ cần bỏ qua phần đầu và phần cuối của phạm vi. Digg biết chính xác có
bao nhiêu trang của các mục, trong khi danh sách của Google đôi khi không có đáy. (Ví dụ cuối
cùng của Google cho thấy trang cuối cùng của tìm kiếm không có đáy—nó chỉ trả về 21 trang kết
quả.)

Ví dụ về Digg và Google

Hình 5-29 hiển thị một bộ sưu tập các ví dụ từ khắp nơi trên Web. Lưu ý những liên kết nào dễ phân
tích trực quan hơn—Liên kết nào là liên kết nào? Tôi nên bấm vào đâu tiếp theo?—và cái nào cung cấp
cho bạn đầy đủ thông tin về vị trí của bạn và tổng số trang. Cũng lưu ý kích thước của các mục tiêu
nhấp chuột. Người dùng phải chính xác đến mức nào với con chuột hoặc đầu ngón tay của mình?
 các mẫu227

Ngược chiều kim đồng hồ từ trên xuống: Kayak, Drupal.org, Flickr, Target, Last.fm, Mothering.com,
Amazon, eBay, YouTube và Hulu

http://www.welie.com/patterns/showPattern.php?patternID=paging

http://ui-patterns.com/patterns/Pagination

http://www.patternry.com/p=search-pagination/

http://quince.infragistics.com/Patterns/Paging.aspx

Yahoo! thư viện mẫu có hai phiên bản củaphân trangmẫu, một cho tìm kiếm và một
cho các loại mục khác:
http://developer.yahoo.com/ypatterns/navigation/pagination/item.html

http://developer.yahoo.com/ypatterns/navigation/pagination/search.html
228Chương 5: Danh sách các thứ

“Chí”

Hộp thoại phông chữ trên Mac OS

Khi người dùng nhập tên của một mục vào bảng hoặc cây, hãy chuyển thẳng đến mục đó và
chọn mục đó.

Giao diện sử dụng danh sách cuộn, bảng, thả xuống, hộp tổ hợp hoặc cây để trình bày một danh sách
dài các mục. Các mục này được sắp xếp theo thứ tự bảng chữ cái hoặc số. Người dùng muốn chọn
một mục cụ thể một cách nhanh chóng và chính xác, và tốt nhất là bằng bàn phím.

Mẫu này thường được sử dụng trong công cụ tìm tệp, danh sách tên dài và hộp thả xuống để chọn tiểu
bang hoặc quốc gia. Bạn cũng có thể sử dụng nó cho các số—chẳng hạn như số năm hoặc số tiền hoặc
thậm chí thời gian theo lịch, chẳng hạn như tháng hoặc ngày trong tuần.

Mọi người không giỏi quét danh sách dài các từ hoặc số cho một mục cụ thể. Nhưng
máy tính thì có. Hãy để họ làm những gì họ giỏi!
Một điều thú vị khác về kỹ thuật này là nó cho phép người dùng giữ tay trên bàn phím. Khi cô ấy
di chuyển qua một biểu mẫu hoặc hộp thoại, cô ấy có thể thấy thật tuyệt khi chọn từ danh sách
chỉ bằng cách nhập một vài ký tự đầu tiên của mục cô ấy muốn—hệ thống sau đó chọn mục đó
cho cô ấy và cô ấy có thể tiếp tục sang mục tiếp theo điều. Không cần cuộn hoặc nhấp chuột; tay
người dùng không bao giờ phải di chuyển từ bàn phím sang chuột.

Khi người dùng nhập chữ cái hoặc số đầu tiên của mục mà họ đang tìm kiếm, hãy chuyển đến
mục đầu tiên khớp với những gì người dùng đã nhập: tự động cuộn danh sách để mục đó hiển
thị và chọn mục đó.
 các mẫu229

Khi người dùng nhập liên tiếp nhiều ký tự hơn, hãy tiếp tục thay đổi lựa chọn thành kết quả khớp chính xác đầu
tiên cho toàn bộ chuỗi do người dùng nhập. Nếu không có kết quả phù hợp, hãy ở lại kết quả phù hợp gần nhất và
không cuộn trở lại đầu danh sách. Bạn có thể muốn phát ra tiếng bíp cho người dùng để nói với họ rằng không có
kết quả phù hợp—một số ứng dụng phù hợp, một số thì không.

một biến thể củaChuyển đến Mụcđược sử dụng bởi cơ sở tìm kiếm gia tăng của GNU Emacs (xem Hình
5-31). Sau khi người dùng vào chế độ i-search thông qua Ctrl-S, mỗi ký tự được nhập sẽ đưa người
dùng đến phiên bản đầu tiên của chuỗi tích lũy đó trong tài liệu. Không có vấn đề gì khi tài liệu ban
đầu không được sắp xếp.

Emac

Sau khi tìm thấy một lần xuất hiện của chuỗi, người dùng có thể tìm thấy những lần xuất hiện tiếp
theo bằng cách nhấn Ctrl-S liên tục. Theo một số cách, tìm kiếm gia tăng này thuận tiện hơn và chắc
chắn là nhanh hơn—so với các hộp thoại “Tìm” trên máy tính thông thường, không cập nhật liên tục
khi bạn nhập chuỗi tìm kiếm.

Hơn nữa, Emacs có thể đánh dấu tất cả các trường hợp khác của chuỗi đó trong tài liệu ngoài việc cuộn đến
trường hợp đầu tiên. Điều này cung cấp cho người dùng nhiều thông tin theo ngữ cảnh bổ sung về tìm kiếm
mà cô ấy đang tiến hành. Nó có phải là một chuỗi chung hay không? Chúng tập trung lại với nhau hay rải
rác?
230Chương 5: Danh sách các thứ

About.com

Hiển thị các chữ cái trong bảng chữ cái được sắp xếp dọc theo thanh cuộn của danh sách được sắp xếp theo thứ tự bảng chữ cái.

Người dùng sẽ tìm kiếm các mục rất cụ thể trong một danh sách dài, thường được hiển thị dưới dạng danh
sách cuộn, bảng hoặc cây. Bạn muốn làm cho việc tìm kiếm vật phẩm trở nên dễ dàng và nhanh chóng nhất
có thể.

Bảng chữ cái cuộn không phổ biến, nhưng việc sử dụng chúng là dễ hiểu. Chúng cung cấp một bản đồ
tương tác cho nội dung danh sách, theo cách tương tự như mộtThanh cuộn được chú thích(Chương 3). Chúng
có quan hệ mật thiết vớiChuyển đến Mục—cả hai đều cho phép chuyển ngay đến một điểm trong danh sách
có thứ tự.

Mẫu này có thể phát sinh từ sách vật lý (chẳng hạn như từ điển) và sổ ghi chép (chẳng hạn như
sổ địa chỉ) sử dụng các tab để đánh dấu các điểm trong bảng chữ cái.
 các mẫu231

Đặt một danh sách dài được sắp xếp theo thứ tự bảng chữ cái vào một vùng được cuộn. Dọc theo thanh cuộn, hiển thị các
chữ cái trong bảng chữ cái; khi người dùng nhấp vào một chữ cái, hãy cuộn danh sách đến điểm đó (xem Hình 5-32, ở trên
cùng của mẫu).

Có nhiều ví dụ hoạt động của các danh sách được sắp xếp theo thứ tự bảng chữ cái hoạt động theo cách
này, nhưng không có lý do gì khiến một cách sắp xếp khác—ví dụ như theo số hoặc theo ngày—cũng không
thể hoạt động tốt. Cân nhắc mở rộng mô hình này ra ngoài bảng chữ cái!

IPhone cung cấp những gì có lẽ là ví dụ nổi tiếng nhất của mô hình này. Hình 5-33 hiển thị ứng
dụng Danh bạ tích hợp sẵn.

danh sách liên lạc iPhone

232Chương 5: Danh sách các thứ

Hộp thoại phông chữ Mac OS

Thể hiện một hệ thống phân cấp bằng cách hiển thị danh sách các mục có thể lựa chọn trong mỗi cấp độ phân cấp. Việc lựa chọn

bất kỳ mục nào sẽ hiển thị phần tử con của mục đó trong danh sách tiếp theo.

Các mục danh sách được sắp xếp theo thứ bậc. Hệ thống phân cấp có thể sâu và có thể có nhiều mục ở mỗi
cấp. Một cây (đường viền) sẽ hoạt động, nhưng người dùng sẽ phải cuộn lên và cuộn xuống rất nhiều để
xem tất cả các mục và anh ta sẽ không có được cái nhìn tổng quan về các mục ở các cấp cao hơn trong hệ
thống phân cấp.

Hệ thống phân cấp có thể là một hệ thống theo nghĩa đen, chẳng hạn như hệ thống tệp hoặc hệ thống khái niệm—mẫu
này thường được sử dụng để cho phép người dùng điều hướng và chọn các mục trong các danh mục hoặc thực hiện một
loạt các lựa chọn phụ thuộc lẫn nhau, như với các phông chữ trong ví dụ trong Hình 5-34 ở trên cùng của mô hình.
 các mẫu233

Bằng cách trải rộng cấu trúc phân cấp trên một số danh sách cuộn, bạn sẽ hiển thị nhiều thứ hơn cùng một lúc. Nó
đơn giản mà. Khả năng hiển thị rất hữu ích khi bạn đang xử lý các cấu trúc thông tin phức tạp. Ngoài ra, việc sắp
xếp các mục trong danh sách sẽ sắp xếp chúng một cách độc đáo—người dùng có thể dễ dàng theo dõi xem mình
đang xử lý ở cấp độ nào hơn so với khi sử dụng định dạng phác thảo, vì các cấp độ phân cấp nằm trong các danh
sách có vị trí cố định, đẹp mắt, có thể dự đoán được.

Đặt cấp độ đầu tiên của hệ thống phân cấp trong danh sách ngoài cùng bên trái (nên sử dụng ngữ nghĩa lựa chọn
đơn). Khi người dùng chọn một mục trong đó, hãy hiển thị mục con của mục đó trong danh sách tiếp theo bên
phải. Làm tương tự với các mục con trong danh sách thứ hai này; hiển thị phần tử con của mục đã chọn trong
danh sách thứ ba. Và như thế.

Sau khi người dùng tiếp cận các mục không có mục con—các mục “lá”, trái ngược với “nhánh”—bạn có thể muốn
hiển thị chi tiết của mục được chọn cuối cùng ở ngoài cùng bên phải. Một tệp hình ảnh thường hiển thị một hình
thu nhỏ; thay vào đó, bạn có thể cung cấp một giao diện người dùng để chỉnh sửa một mục, đọc nội dung của mục
đó hoặc bất kỳ thứ gì phù hợp với ứng dụng cụ thể của bạn.

Một điều thú vị về mẫu này là bạn có thể dễ dàng liên kết các nút với từng danh sách: xóa mục hiện tại, di chuyển lên, di
chuyển xuống, v.v. Nhiều bộ công cụ sẽ cho phép bạn thực hiện điều này trong các điều khiển dạng cây thông qua thao
tác trực tiếp, nhưng đối với những bộ công cụ không có các điều khiển dạng cây tích hợp sẵn, đây là một giải pháp thay
thế khả thi.

Ảnh chụp màn hình Mac OS Finder được hiển thị trong Hình 5-35 là một ví dụ cực đoan, với bảy cấp
độ. Nhưng nó cho thấy rằng mẫu có tỷ lệ tốt, cho phép người dùng đi sâu vào hệ thống phân cấp hệ
thống tệp sâu trong khi vẫn định hướng. (Cảnh báo: điều này có thể gây nhầm lẫn cho những người
không quen thuộc với mẫu này và khái niệm về hệ thống phân cấp.)

Trình tìm hệ điều hành Mac

NeXTSTEP ban đầu sử dụng kỹ thuật này trong Trình xem tệp của riêng mình, vào khoảng năm 1990
hoặc lâu hơn. Ví dụ trong Hình 5-36 là từhttp://www120.pair.com/mccarthy/nextstep/intro.htmld/
Workspace.html.
234Chương 5: Danh sách các thứ

Trình xem tệp NeXTSTEP

http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx

Trình tìm hệ điều hành Mac

 các mẫu235

Đặt các trường mục trong các cột giống như bảng, nhưng sử dụng cấu trúc đường viền thụt vào trong
cột đầu tiên để minh họa cấu trúc cây.

Các mục trong danh sách có cấu trúc cao, với các thuộc tính cụ thể mà người dùng quan tâm. Bạn có
thể hiển thị chúng trong danh sách hoặc bảng nhiều cột. Nhưng các mục chủ yếu được sắp xếp theo
thứ bậc, vì vậy bạn cũng muốn có một cái cây để hiển thị chúng hầu hết thời gian.

Người dùng của bạn tương đối tinh vi về cách sử dụng giao diện; đây không phải là một mẫu dễ hiểu
đối với những người dùng máy tính ngây thơ (và điều tương tự cũng có thể nói về hầu hết các chế độ
xem phân cấp, bao gồm cả cây vàXếp tầng danh sách).

Kết hợp hai cách tiếp cận xem dữ liệu vào một chế độ xem sẽ mang lại cho bạn những điều tốt nhất của cả
hai thế giới, với chi phí là một số phức tạp về hình ảnh và lập trình. Bạn có thể hiển thị thứ bậc của các mục,
cộng với ma trận dữ liệu bổ sung hoặc thuộc tính mục, trong một cấu trúc thống nhất.

Các ví dụ cho thấy những gì bạn cần làm: đặt cây (thực sự là một đường viền) vào cột đầu tiên và
các thuộc tính vật phẩm vào các cột tiếp theo. Các hàng—một mục trên mỗi hàng thường có thể
chọn được. Đương nhiên, điều này có thể được kết hợp vớiBảng có thể sắp xếpđể tạo ra một cấu
trúc tương tác dễ duyệt hơn. Việc sắp xếp theo các cột sẽ làm gián đoạn thứ tự của cây, vì vậy,
bạn sẽ cần cung cấp thêm một nút hoặc một số khả năng chi trả khác để sắp xếp lại bảng theo
thứ tự mà cây yêu cầu.

Kỹ thuật này dường như đã tìm thấy một ngôi nhà trong các ứng dụng email và người đọc tin tức, nơi các
chuỗi thảo luận hình thành các cấu trúc giống như cây.

Trình duyệt Firefox đã từng sử dụng giao diện trông đặc biệtBàn câytrong một trong các hộp thoại của nó. Dấu
phân cách—các đường ngang—giúp nhóm các mục trong các danh mục khác nhau một cách trực quan, đây không
phải là một ý tưởng tồi (xem Hình 5-38).
236Chương 5: Danh sách các thứ

Firefox Bookmarks Manager, từ phiên bản đầu tiên của trình duyệt

http://quince.infragistics.com/Patterns/Tree-Table.aspx

Microsoft Outlook
 các mẫu237

Sử dụng hàng cuối cùng hoặc hàng đầu tiên trong danh sách hoặc bảng để tạo một mục mới tại chỗ.

Giao diện chứa một bảng, danh sách, dạng xem dạng cây hoặc bất kỳ bản trình bày theo chiều dọc nào khác của
một tập hợp các mục (một mục trên mỗi hàng). Tại một số điểm, người dùng cần thêm các mục mới vào đó.
Nhưng bạn không có nhiều chỗ trống trên giao diện người dùng cho các nút hoặc tùy chọn bổ sung và bạn muốn
tạo mục thật hiệu quả và dễ dàng cho người dùng.

Bằng cách cho phép người dùng nhập trực tiếp vào phần cuối (hoặc phần đầu) của bảng, bạn đặt hành
động tạo vào cùng một vị trí mà mục cuối cùng sẽ “sống”. Về mặt khái niệm, nó mạch lạc hơn so với việc
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

đưa nó vào một số phần khác của giao diện người dùng. Ngoài ra, nó làm cho giao diện trở nên thanh lịch
hơn so với việc có một giao diện người dùng hoàn toàn khác để tạo vật phẩm—nó sử dụng ít diện tích màn
hình hơn, nó giảm lượng điều hướng cần thực hiện (do đó loại bỏ việc “nhảy” sang một cửa sổ khác), và đó
là ít công việc hơn cho người dùng của bạn.

Cung cấp cho người dùng một cách dễ dàng và rõ ràng để bắt đầu một đối tượng mới từ hàng trống
đầu tiên của bảng. Chẳng hạn, một cú nhấp chuột vào hàng đó có thể bắt đầu chỉnh sửa, hoặc hàng
có thể chứa nút ấn “New Anything”, hoặc nó có thể chứa một mục giả như được minh họa ở trên cùng
của mẫu trong Hình 5-39.

Tại thời điểm đó, giao diện người dùng sẽ tạo mục mới và đặt mục đó vào hàng đó. Khi đó, mỗi cột trong
bảng (nếu là bảng nhiều cột) sẽ có thể chỉnh sửa được, do đó cho phép người dùng thiết lập các giá trị của
mục đó. Các ô có thể chứa các trường văn bản hoặc danh sách thả xuống hoặc bất kỳ thứ gì khác cần thiết
để đặt giá trị nhanh chóng và chính xác. Như với bất kỳ đầu vào nào của người dùng giống như biểu mẫu,
Mặc định tốt(Chương 8) giúp tiết kiệm công việc của người dùng bằng cách điền trước các giá trị đó; người
dùng không phải chỉnh sửa mọi cột.

Tuy nhiên, vẫn còn một số kết thúc lỏng lẻo để làm sạch. Điều gì xảy ra nếu người dùng từ bỏ mục
mới trước khi kết thúc? Bạn có thể thiết lập một mục hợp lệ ngay từ đầu—nếu người dùng từ bỏ các
chỉnh sửa bất kỳ lúc nào, mục đó sẽ tồn tại cho đến khi người dùng quay lại và xóa mục đó. Lại,Mặc
định tốttrợ giúp bằng cách điền trước các giá trị hợp lệ nếu có nhiều trường.

Tùy thuộc vào cách nó được triển khai, mẫu này có thể giốngDấu nhắc đầu vào(Chương 8). Trong cả hai
trường hợp, một giá trị giả được thiết lập để người dùng chỉnh sửa thành giá trị thực và giá trị giả đó
được diễn đạt dưới dạng "lời nhắc" cho người dùng biết phải làm gì.
Các mẫu bảng tính có sẵn của Excel, chẳng hạn như mẫu được hiển thị trong Hình 5-40 để lập ngân sách,
hãy đánh dấuHàng vật phẩm mớirất rõ ràng bằng cách đặt một hộp màu xanh xung quanh toàn bộ hàng.
Giao diện phác thảo PowerPoint được hiển thị trong Hình 5-41 cho phép tạo các trang trình bày mới bằng
cách nhập vào hàng dưới cùng, nhưng giao diện tinh tế hơn và khó nhận thấy. (Tôi đã tìm kiếm tính năng
này trước khi tìm thấy nó; trước đó tôi chưa bao giờ biết rằng nó tồn tại.)

Mục nhập mới trong sổ cái Excel

Trang trình bày mới trong bản trình chiếu PowerPoint

http://quince.infragistics.com/Patterns/New-Item%20Row.aspx http://

www.welie.com/patterns/showPattern.php?patternID=list-entry-view
Chương này dành cho “động từ” trong giao diện. Chúng tôi đã dành rất nhiều trang để nói về cấu trúc tổng
thể và dòng chảy, bố cục trực quan và “danh từ”—chẳng hạn như cửa sổ, văn bản, liên kết và các thành
phần tĩnh trong trang. Chương 7 thậm chí còn dành nhiều trang hơn cho danh từ và Chương 8 xử lý các
công cụ và điều khiển truyền thống (và một số phi truyền thống): những thứ cho phép người dùng cung cấp
thông tin và thiết lập trạng thái, nhưng điều đó không thực sựLÀMnhiều.

Vì vậy, bây giờ hãy nói về các nút và menu.

Nghe có vẻ thú vị phải không? Chắc là không. Các giao diện máy tính để bàn đã sử dụng các thanh
menu từ thời Macintosh đầu tiên và các nút thậm chí còn lâu hơn nữa. Những gì chúng tôi nghĩ là
“nút” chỉ là hình ảnh hiển thị trực quan của thiết bị vật lý có GUI đã có từ lâu.

Đúng là có rất nhiều lịch sử ở đây và có nhiều phương pháp hay nhất để làm theo. Các hướng dẫn về phong
cách nền tảng tiêu chuẩn, chẳng hạn như hướng dẫn dành cho Windows và Macintosh, nói chung sẽ giúp
bạn tiến gần đến một giao diện người dùng khả thi. Hầu hết người dùng phụ thuộc vào các quy ước đã học
để đàm phán các menu và tìm các nút, do đó, bạn phải tuân theo các quy ước đó, ngay cả khi họ cảm thấy
hạn chế hoặc vô nghĩa.

Các chức năng phổ biến như cắt, sao chép và dán cũng mang nhiều hành trang lịch sử—nếu nó có thể được phát
minh lại ngay bây giờ, nó có thể sẽ hoạt động khác đi—nhưng ngay cả những người dùng máy tính để bàn có kinh
nghiệm vừa phải cũng đã học được cách thức hoạt động của nó. Điều này cũng đúng với các menu bật lên (menu
ngữ cảnh), mà một số người dùng dường như tìm kiếm ở khắp mọi nơi và những người dùng khác không bao giờ
nghĩ đến việc tìm kiếm. Tính năng kéo và thả không bị ràng buộc bởi lịch sử, nhưng nó hoàn toàn phải hoạt động
theo cách người dùng mong đợi bằng trực giác, nếu không ảo tưởng về thao tác trực tiếp sẽ bị phá vỡ.

Điều đó đang được nói, bạn có thể làm nhiều điều để làm cho giao diện của bạn bớt buồn tẻ và dễ sử dụng
hơn. Mục tiêu của bạn phải là cung cấp các hành động phù hợp, gắn nhãn rõ ràng cho chúng, giúp chúng
dễ tìm và hỗ trợ các chuỗi hành động. Có một vài cách sáng tạo để làm điều đó.
240Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Trước tiên, tôi sẽ liệt kê các cách phổ biến mà hành động được hiển thị cho người dùng:

nút
Các nút được đặt trực tiếp trên giao diện mà không yêu cầu người dùng thực hiện bất kỳ
hành động nào để nhìn thấy chúng và thường được nhóm theo ngữ nghĩa. (XemNhóm nút
mẫu.) Chúng lớn, dễ đọc, rõ ràng và cực kỳ dễ sử dụng đối với cả những người dùng máy tính
thiếu kinh nghiệm nhất. Nhưng chúng chiếm nhiều không gian trên giao diện, không giống như
các thanh menu và menu bật lên. Trên các trang đích, chẳng hạn như trang chủ của công ty và
trang khởi động sản phẩm, lời kêu gọi hành động thường được thể hiện dưới dạng các nút đơn,
lớn, bắt mắt—điều này hoàn toàn phù hợp với mục đích của chúng, đó là thu hút sự chú ý và nói:
“Hãy nhấp vào tôi!”

thanh menu
Thanh menu là tiêu chuẩn trên hầu hết các ứng dụng máy tính để bàn. Chúng thường hiển thị một tập hợp
đầy đủ các hành động của ứng dụng, được tổ chức theo cách gần như có thể dự đoán được (chẳng hạn như
Tệp, Chỉnh sửa hoặc Xem). Một số hành động hoạt động trên toàn bộ ứng dụng và một số hành động chỉ
hoạt động trên các mục được chọn riêng lẻ. Thanh menu thường trùng lặp chức năng được tìm thấy trong
menu ngữ cảnh và thanh công cụ vì chúngcó thể truy cập-trình đọc màn hình có thể đọc chúng, người dùng
có thể tiếp cận chúng thông qua bộ tăng tốc bàn phím, v.v. (Chỉ riêng khả năng truy cập đã làm cho các
thanh menu trở nên không thể thiếu trong nhiều sản phẩm.) Các thanh menu xuất hiện trong một số ứng
dụng web, đặc biệt là phần mềm năng suất, chương trình vẽ và các sản phẩm khác mô phỏng các ứng dụng
dành cho máy tính để bàn.

Menu bật lên

Còn được gọi là menu ngữ cảnh, menu bật lên được hiển thị bằng cách nhấp chuột phải hoặc một số
cử chỉ tương tự trên bảng hoặc mục. Chúng thường liệt kê các hành động phổ biến, theo ngữ cảnh cụ
thể, không phải tất cả các hành động có thể có trên giao diện. Giữ chúng ngắn.

Menu thả xuống

Người dùng nâng các menu này bằng cách nhấp vào điều khiển thả xuống, chẳng hạn như hộp tổ hợp. Tuy
nhiên, các điều khiển thả xuống nhằm mục đích chọn các lựa chọn trên biểu mẫu chứ không phải để thực
hiện các hành động. Tránh sử dụng chúng cho các hành động.

Thanh công cụ

Thanh công cụ chính tắc là một hàng dài và mảnh gồm các nút mang tính biểu tượng. Thường thì chúng
cũng có các loại nút hoặc điều khiển khác, chẳng hạn như trường văn bản hoặcBộ chọn thả xuống
(xem Chương 8). Các thanh công cụ mang tính biểu tượng hoạt động tốt nhất khi các hành động được mô tả
có kết xuất trực quan rõ ràng; khi các hành động thực sự cần được mô tả bằng lời, hãy thử các điều khiển
khác, chẳng hạn như hộp tổ hợp hoặc nút có nhãn văn bản. Các biểu tượng mật mã là một nguồn cổ điển
gây nhầm lẫn và không sử dụng được.

liên kết

Các nút 9 không cần viền. Nhờ có Web, mọi người đều hiểu rằng văn bản có màu (đặc biệt là văn bản màu
xanh lam) thường biểu thị một liên kết có thể nhấp được. Trong khu vực giao diện người dùng nơi các hành
động được mong đợi nhưng bạn không cần thu hút sự chú ý hoặc làm lộn xộn trang, bạn có thể
 241

sử dụng văn bản "liên kết" có thể nhấp đơn giản cho các hành động thay vì các nút. Khi người
dùng cuộn chuột qua văn bản, hãy thay đổi con trỏ và gạch dưới văn bản để củng cố ấn tượng về
khả năng nhấp.

bảng hành động

Đây thực chất là những menu mà người dùng không cần đăng; chúng luôn hiển thị trên giao
diện chính. Chúng là một sự thay thế tốt cho các thanh công cụ khi các hành động được mô tả
bằng lời nói tốt hơn là bằng hình ảnh. xembảng hành độngmẫu.

công cụ di chuột

Nếu bạn \muốn hiển thị hai hoặc nhiều hành động cho mỗi mục trên một giao diện nhưng bạn
không muốn làm lộn xộn trang với nhiều nút lặp lại, bạn có thể ẩn các nút đó cho đến khi chuột
di chuyển qua mục đó. (Điều này rất tốt cho giao diện điều khiển bằng chuột, nhưng nó không
hoạt động tốt cho màn hình cảm ứng.) Xem phầnCông cụ di chuộtmẫu để biết thêm.

Sau đó, có những hành động vô hình, không có bất kỳ nhãn nào để thông báo những gì họ làm. Người dùng cần biết
(hoặc đoán) rằng họ đang ở đó, trừ khi bạn đặt hướng dẫn bằng văn bản trên giao diện người dùng. Do đó, chúng hoàn
toàn không giúp ích gì cho việc khám phá vì người dùng không thể đọc qua chúng để tìm ra những hành động có thể thực
hiện được. Với các nút, liên kết và menu, các thao tác giao diện người dùng có sẵn để kiểm tra, vì vậy người dùng học hỏi
từ những thao tác đó. Trong các thử nghiệm khả năng sử dụng, tôi đã thấy nhiều người dùng nhìn vào một sản phẩm mới
và đi xuống thanh menu một cách có phương pháp, từng mục một, chỉ để tìm hiểu những gì nó có thể làm.

Điều đó đang được nói, hầu như bạn luôn cần sử dụng một hoặc nhiều hành động vô hình sau đây. Ví
dụ, mọi người thường mong đợi có thể nhấp đúp vào các mục. Tuy nhiên, bàn phím (hoặc bàn phím
tương đương) đôi khi là phương tiện truy cập duy nhất cho người dùng khiếm thị và những người
không thể sử dụng chuột. Ngoài ra, người dùng chuyên gia của một số hệ điều hành và ứng dụng
thích làm việc bằng cách nhập lệnh vào trình bao và/hoặc bằng cách sử dụng các thao tác bàn phím
của nó.

Nhấp đúp chuột vào các mục

Người dùng có xu hướng xem thao tác nhấp đúp là “mở mục này” hoặc “làm bất cứ điều gì mặc
định với mục này”, tùy thuộc vào ngữ cảnh. Ví dụ, trong một trình soạn thảo đồ họa, bấm đúp
vào một phần tử thường có nghĩa là mở một trang thuộc tính hoặc trình soạn thảo chuyên dụng
cho nó. Nhấp đúp vào biểu tượng của ứng dụng trong hầu hết các hệ điều hành sẽ khởi chạy
ứng dụng đó. Nhấp đúp vào một đoạn văn bản có thể chỉnh sửa nó tại chỗ.

Hành động bàn phím

Các phím tắt, chẳng hạn như Ctrl-S nổi tiếng để lưu, nên được thiết kế thành hầu hết các ứng
dụng trên máy tính để bàn để có thể truy cập và sử dụng hiệu quả. Các nền tảng giao diện người
dùng chính, bao gồm Windows, Mac và một số môi trường Linux, mỗi nền tảng đều có hướng
dẫn kiểu mô tả các phím tắt tiêu chuẩn—và tất cả chúng đều rất giống nhau. Ngoài ra, các menu
và điều khiển thường có các phím truy cập được gạch chân, cho phép người dùng tiếp cận các
điều khiển đó mà không cần nhấp chuột hoặc tab. (Nhấn phím Alt, rồi nhấn phím tương ứng với
chữ cái được gạch dưới, để thực hiện các thao tác này.)
242Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Kéo và thả
Kéo và thả các mục trên một giao diện thường có nghĩa là “di chuyển cái này đến đây” hoặc “làm
cái này sang cái kia”. Nói cách khác, ai đó có thể kéo tệp vào biểu tượng ứng dụng để nói: “Mở
tệp này trong ứng dụng đó”. Hoặc cô ấy có thể kéo tệp đó từ một nơi trong công cụ tìm tệp đến
một nơi khác, do đó di chuyển hoặc sao chép mục đó. Thao tác kéo và thả phụ thuộc vào ngữ
cảnh, nhưng nó hầu như luôn dẫn đến một trong hai hành động này.

Các lệnh đã nhập

Giao diện dòng lệnh thường cho phép truy cập dạng tự do vào tất cả các hành động
trong hệ thống phần mềm, cho dù đó là hệ điều hành hay ứng dụng. Tôi coi những loại
hành động này là “vô hình” vì hầu hết các giao diện dòng lệnh (CLI) không dễ dàng tiết
lộ các lệnh có sẵn. Chúng không dễ khám phá lắm, mặc dù chúng khá mạnh khi bạn
tìm hiểu những gì có sẵn—có thể thực hiện được nhiều việc chỉ với một lệnh được xây
dựng tốt. Như vậy, CLI là tốt nhất cho người dùng cam kết học phần mềm rất tốt.

Một số thành ngữ ứng dụng cho phép bạn tự do thiết kế các nút và điều khiển không theo tiêu chuẩn. Trình
chỉnh sửa trực quan, trình phát đa phương tiện, ứng dụng chủ yếu dành cho chuyên gia, nhắn tin nhanh,
trò chơi và bất kỳ thứ gì được cho là vui nhộn và thú vị, tất cả đều có những người dùng đủ tò mò để tìm ra
cách sử dụng các thành phần giao diện khác thường nhưng được thiết kế tốt.

Bạn có thể sáng tạo hơn ở đâu? Xem xét các mục trong danh sách đầu tiên trong phần
trước; các nút và menu hiển thị dễ sử dụng hơn các hành động ẩn, chẳng hạn như phím tắt.
Khái quát hóa từ đó, các hành động có thể là:

• Các biểu tượng có thể nhấp

• Văn bản có thể nhấp nhưng trông không giống nút

• Thứ gì đó phản ứng khi con trỏ chuột lăn qua nó

• Một số đối tượng có vẻ như có thể bị người dùng thao tác
• Thứ gì đó được đặt trên hầu hết mọi phần bất động sản trên màn hình

Nhưng bạn có thể đạt được bao nhiêu sự sáng tạo trước khi ứng dụng trở nên quá khó
để tìm ra?
Đối với một ví dụ thực tế, chúng ta sẽ xem xét ứng dụng GarageBand, được hiển thị trong Hình 6-1. Có rất
nhiều thứ đang diễn ra trong giao diện này. Một số đối tượng rõ ràng là các nút, chẳng hạn như điều khiển
trình phát—tua lại, phát, tua nhanh, v.v.—và các mũi tên trên thanh cuộn. Bạn cũng sẽ tìm thấy một số
thanh trượt và nút bấm.
 Đẩy lùi ranh giới243

Ban nhạc tại gia

Nhưng hãy nhìn kỹ hơn về phía ngoài cùng bên phải của cửa sổ, giữa đường màu đỏ và mép vân
gỗ. Trước mắt bạn, những phần nào của giao diện trông có thể nhấp được? Tại sao? Nếu muốn,
bạn có thể nhìn vào Hình 6-2 và gian lận. (Và nếu bạn đã biết GarageBand, hãy đồng ý với tôi.)

Cũng có thể kéo dọc theo trục ngang. Mũi tên

màu tím này xác định phần cuối của bài hát.

Có thể kéo dọc theo trục ngang. Khi bạn Hiển thị menu các giá trị cho lưới dòng thời gian:
nhấp vào "phát", âm nhạc sẽ bắt đầu ở vị trí nốt 1/2, nốt 1/4, nốt 1/8, v.v.
của thanh màu đỏ.

“Các vùng” có thể lựa chọn của mỗi bản nhạc, cũng có thể
được chọn nhiều lần, kéo và di chuyển từ hàng này sang
hàng khác.

Các “quả cầu” có thể di chuyển đóng vai trò như các điểm điều khiển

âm lượng: tăng lên để làm cho âm lượng to hơn, giảm xuống để làm

cho âm thanh nhỏ hơn, từ bên này sang bên kia để điều chỉnh độ dốc

của đường kẻ.

Nút “khóa đầu phát”, bất kể nút đó làm gì.

Thay đổi kích thước cửa sổ khi được kéo.

Bấm để di chuyển thanh trượt

xuống hết cỡ hoặc lên hết cỡ.

hành động GarageBand

244Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Hình 6-2 cho thấy những đối tượng nào trên giao diện thực hiện các hành động. Bạn rõ ràng không
thể biết tất cả những gì họ làm, vì cuốn sách này không cung cấp cho bạn lợi ích của mẹo công cụ, con
trỏ cuộn qua hoặc thử nghiệm. Nhưng bạn có nhận ra rằng một số đối tượng này có thể được nhấp
hoặc thao tác không? Tôi đoán bạn đã làm.

Làm sao? Bạn có thể biết rằng các giao diện trông như thế này cung cấp rất nhiều chức năng thông qua
thao tác trực tiếp, vì vậy bạn có cơ sở tốt để cho rằng mọi tính năng trực quan thú vị đều có tác dụng. Bạn
có thể biết rằng các thanh trượt, chẳng hạn như thanh trượt âm lượng ở dưới cùng, đôi khi có "nút nhảy" ở
cuối—và bạn có thể đã nhận ra chính thanh trượt âm lượng đó từ iTunes. Bạn có thể đoán rằng các biểu
tượng vuông nhỏ có xu hướng là các nút, thường dành cho các hành động liên quan đến bản trình bày;
Word và PowerPoint sử dụng rất nhiều trong số họ. Bạn có thể đã nhìn thấy một đường thẳng đứng có hình
tam giác ngược ở trên cùng trong một số ngữ cảnh khác—có thể di chuyển được, có thể không. Nhưng
không phải hình tam giác này có vẻ như có thể di chuyển được sao?

Khi một đối tượng có vẻ như có thể cho phép bạn thực hiện điều gì đó, chẳng hạn như nhấp vào đối tượng đó hoặc kéo
đối tượng đó, chúng tôi nói rằng đối tượng đó “có đủ khả năng” thực hiện hành động đó. Các nút có cạnh nâng truyền
thống đủ khả năng đẩy; một ngón tay cái trượt cho phép kéo; một trường văn bản cho phép gõ; một từ gạch chân màu
xanh dành cho nhấp chuột. Và bất cứ thứ gì phản ứng với con trỏ chuột đều mang lại điều gì đó, mặc dù bạn không nhất
thiết phải biết đó là gì!

Hình 6-2 chỉ rakhả năng chi trảtrong giao diện GarageBand. Đây là một khái niệm quan trọng. Trong các giao diện
phần mềm, người dùng không nhận được nhiều manh mối về cảm giác về những gì có thể được điều chỉnh hoặc
xử lý: hình ảnh cung cấp hầu hết các manh mối và thao tác cuộn chuột sẽ thực hiện phần còn lại. Sử dụng chúng
để giao tiếp khả năng chi trả tốt.

Dưới đây là một số lời khuyên thiết kế cụ thể:

• Tuân thủ các quy ước bất cứ khi nào có thể. Sử dụng lại các khái niệm và điều khiển giao diện người dùng mà
mọi người đã biết, chẳng hạn như thanh trượt âm lượng trong ví dụ.

• Sử dụng bóng đổ và đổ bóng giả 3D để làm cho mọi thứ trông “nổi lên”.

• Khi con trỏ chuột di chuyển qua các mục có thể nhấp hoặc kéo, hãy biến con trỏ thành
một thứ khác, chẳng hạn như ngón tay hoặc bàn tay.

• Sử dụng mẹo công cụ hoặc một số văn bản mô tả khác để cho người dùng biết các đối tượng bên dưới con trỏ
chuột làm gì. Nếu bạn không cần chúng, điều đó thật tuyệt—bạn có một thiết kế tự mô tả—nhưng dù sao thì
nhiều người dùng vẫn mong đợi các mẹo về công cụ.
 các mẫu245

Các mẫu đầu tiên trong chương này nói về ba trong số nhiều cách để trình bày các hành động. Khi bạn thấy
mình đặt các hành động theo phản xạ trên thanh menu hoặc menu bật lên của ứng dụng, hãy dừng lại một
chút và cân nhắc sử dụng một trong những thao tác này để thay thế.

1.Nhóm nút
2.Công cụ di chuột

3.bảng hành động

Nút “Hoàn thành” nổi bậtcải thiện nút quan trọng nhất trên nhiều trang web và hộp thoại.Mục
menu thông minhlà một kỹ thuật để cải thiện một số hành động bạn đưa vào menu; đây là
một mẫu rất chung chung, hữu ích cho nhiều loại menu (hoặc các nút hoặc liên kết).

4.Nút “Hoàn thành” nổi bật

5.Mục menu thông minh

Chúng tôi muốn nếu tất cả các hành động do người dùng thực hiện trong một ứng dụng có thể được hoàn thành
ngay lập tức, nhưng điều đó không thực tế.Xem trướchiển thị cho người dùng điều gì sẽ xảy ra trước khi một hành
động tốn nhiều thời gian được thực hiện.Chỉ báo tiến độlà một kỹ thuật nổi tiếng để cho người dùng biết điều gì
đang xảy ra trong khi tiến hành thao tác, trong khiKhả năng hủy bỏđề cập đến khả năng dừng hoạt động của giao
diện người dùng khi người dùng yêu cầu.

6.Xem trước

7.Chỉ báo tiến độ

số 8.Khả năng hủy bỏ

Ba mẫu cuối cùng—Hoàn tác đa cấp,Lịch sử lệnh, Vàmacro—tất cả đều giải quyết các chuỗi hành
động. Ba mẫu lồng vào nhau này hữu ích nhất trong các ứng dụng phức tạp, đặc biệt là
những ứng dụng mà người dùng cam kết tìm hiểu kỹ phần mềm và sử dụng phần mềm
một cách rộng rãi. (Đó là lý do tại sao các ví dụ đến từ các phần mềm phức tạp như Linux,
Photoshop, Word và MATLAB.) Hãy lưu ý rằng các mẫu này không dễ thực hiện. Chúng yêu
cầu ứng dụng mô hình hóa các hành động của người dùng dưới dạng các hoạt động rời rạc,
có thể mô tả và đôi khi có thể đảo ngược và mô hình như vậy rất khó để trang bị thêm vào
kiến trúc phần mềm hiện có. Mẫu Lệnh trong sách kinh điểnmẫu thiết kế (Addison-Wesley
Professional) là một nơi tốt để tìm lời khuyên triển khai.

Và điều đó gần với chi tiết triển khai của cuốn sách này. Bây giờ chúng ta sẽ trở lại lĩnh
vực thiết kế giao diện.
9.Hoàn tác đa cấp
10.Lịch sử lệnh
11.macro
246Chương 6: Làm mọi việc: Hành động và mệnh lệnh

2 1

3 4
Tiêu đề màn hình chính của Google Tài liệu, với bốn nhóm nút được làm nổi bật

Trình bày các hành động liên quan dưới dạng một nhóm nhỏ các nút, được căn chỉnh và có cách xử lý
đồ họa tương tự. Tạo nhiều nhóm nếu có nhiều hơn ba hoặc bốn hành động.

Có nhiều hành động để hiển thị trên giao diện. Bạn muốn chắc chắn rằng tất cả chúng đều có thể nhìn thấy
mọi lúc, nhưng bạn cần sắp xếp chúng một cách trực quan để chúng không bị lộn xộn hoặc khó sắp xếp.
Một số trong những hành động này tương tự nhau—ví dụ: chúng có tác dụng tương tự hoặc bổ sung cho
nhau hoặc chúng hoạt động với ngữ nghĩa tương tự nhau—và do đó chúng có thể được tập hợp thành các
nhóm từ hai đến năm.

Nhóm nútcó thể được sử dụng cho các hoạt động trên toàn ứng dụng (chẳng hạn như Mở hoặc Tùy chọn), các hành

động cụ thể của mục (Lưu, Chỉnh sửa, Xóa) hoặc bất kỳ phạm vi nào khác. Tuy nhiên, các hành động có phạm vi
khác nhau không nên được nhóm lại với nhau.

Nhóm nútgiúp làm cho một giao diện tự mô tả. Các cụm nút được xác định rõ ràng dễ dàng chọn
ra khỏi một bố cục phức tạp và vì chúng rất dễ thấy nên chúng thông báo ngay lập tức về tính
khả dụng của những hành động đó. Họ thông báo, “Đây là những hành động bạn phải thực hiện
trong bối cảnh này.”

Các nguyên tắc Gestalt được thảo luận trong Chương 4 được áp dụng ở đây. Những gợi ý gần gũi về sự liên quan;
nếu tất cả các nút ở cùng nhau, chúng có thể làm những việc tương tự. Sự tương đồng về hình ảnh cũng vậy;
chẳng hạn, nếu bạn làm cho tất cả các nút có cùng kích thước, thì chúng trông giống như chúng thuộc về nhau.
Ngược lại, các nhóm nút được phân tách bằng dấu cách—hoặc có hình dạng khác nhau—có nghĩa là các nhóm
hành động không liên quan.
 các mẫu247

Định cỡ và căn chỉnh phù hợp giúpNhóm núttạo thành một hình dạng trực quan tổng hợp lớn hơn (đây
là nguyên tắc củaKhép kín).

Tạo một nhóm trong số các nút được đề cập. Gắn nhãn chúng bằng các động từ hoặc cụm động từ ngắn nhưng rõ
ràng và không sử dụng biệt ngữ trừ khi người dùng mong đợi điều đó. Không trộn lẫn các nút ảnh hưởng đến
những thứ khác nhau hoặc có phạm vi khác nhau; tách chúng thành các nhóm khác nhau.

Tất cả các nút trong nhóm phải có cùng cách xử lý đồ họa: đường viền, màu sắc, chiều cao và/
hoặc chiều rộng, kiểu biểu tượng, hiệu ứng động, v.v. Bạn có thể xếp chúng thành một cột hoặc
sắp xếp chúng thành một hàng nếu chúng không quá rộng.

(Tuy nhiên, hãy xử lý chúng theo cách khác nếu một hành động là hành động “chính”, chẳng hạn như nút
Gửi trên biểu mẫu web. Hành động chính là hành động mà bạn muốn hầu hết người dùng thực hiện hoặc
hầu hết người dùng sẽ mong muốn thực hiện. Hãy cho nút đó được xử lý đồ họa mạnh hơn để làm cho nó
nổi bật giữa các nút khác.)

Nếu tất cả các nút trong một nhóm tác động lên cùng một đối tượng hoặc nhiều đối tượng, hãy đặtNhóm nútbên
trái hoặc bên phải của các đối tượng đó. Thay vào đó, bạn có thể đặt chúng bên dưới các đối tượng, nhưng người
dùng thường có một "điểm mù" ở dưới cùng của các thành phần giao diện người dùng phức tạp như danh sách
nhiều cột và cây—các nút có thể hoàn toàn không được nhìn thấy. Để làm cho chúng dễ nhìn hơn, hãy giữ cho
phần còn lại của giao diện sạch sẽ và gọn gàng. Nếu bạn có một thiết kế cụ thể hoạt động tốt hơn với các nút ở
dưới cùng, hãy kiểm tra khả năng sử dụng và tìm hiểu. Nếu có đủ nút và nếu chúng có biểu tượng, bạn cũng có
thể đặt chúng trên thanh công cụ hoặc dải giống như thanh công cụ ở đầu trang.

Bằng cách sử dụngNhóm nút, bạn đang cố gắng tránh một đống nút và liên kết lộn xộn, hoặc có lẽ là một
danh sách hành động dài và khó hiểu mà không có sự khác biệt rõ ràng nào cả. Với mẫu này, bạn tạo một
hệ thống phân cấp hành động trực quan thu nhỏ: người dùng có thể nhìn thấy trong nháy mắt có gì liên
quanVàđiều gì là quan trọng.

Các công cụ tiêu chuẩn dành cho trình soạn thảo WYSIWYG thường được nhóm theo chức năng. Hai ví
dụ trong Hình 6-4, từ Word và Flash Builder, cho thấy một số công cụ phổ biến trong các nhóm thực
sự hỗ trợ nhận dạng.

Như thể hiện trong Hình 6-5, iTunes đặtNhóm nútở bốn góc của cửa sổ chính, cùng với các
nút tiêu đề tiêu chuẩn (chẳng hạn như đóng và thu nhỏ). Khi người dùng duyệt qua Cửa
hàng Âm nhạc, thậm chí nhiều tác vụ hơn sẽ được chứa trong bảng thứ ba giống như trang
web (không hiển thị)—các liên kết tạo thành nhiều tác vụ ở đó—và một nút cho mỗi bài hát
trong bảng.
248Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Microsoft Word và Adobe Flash Builder

Có không ít hơn 13 nút trên giao diện này và tôi thậm chí còn chưa tính đến bốn nút trên thanh
cuộn hoặc ba tiêu đề bảng có thể nhấp được. Có rất nhiều việc phải làm ở đây, nhưng nhờ tổ
chức hình ảnh và ngữ nghĩa cẩn thận, giao diện không bao giờ quá tải.

tiêu đề chuẩn Thay thế

nút thanh lượt xem Tìm kiếm

Người chơi
điều khiển

danh sách phát

hành động

itunes

http://quince.infragistics.com/Patterns/Button%20Groups.aspx
 các mẫu249

Twitter

Đặt các nút và các hành động khác bên cạnh các mục mà chúng tác động, nhưng ẩn chúng cho đến
khi người dùng di con trỏ qua chúng.

Có nhiều hành động để hiển thị trên giao diện. Hầu hết thời gian bạn muốn có một giao diện sạch sẽ, gọn
gàng, nhưng bạn phải đặt các thao tác đó ở đâu đó, tốt nhất là trên hoặc bên cạnh các mục mà chúng thao
tác. Bạn đã phân bổ không gian để hiển thị những hành động đó, nhưng chúng chỉ khiến mọi thứ trở nên
quá đông đúc và bận rộn nếu tất cả chúng luôn hiển thị.

Công cụ di chuộtthường được sử dụng trong giao diện danh sách, trong đó nhiều mục nhỏ—ảnh, tin
nhắn, kết quả tìm kiếm, v.v.—được hiển thị trong một cột hoặc danh sách. Người dùng có thể thực
hiện một số hành động trên mỗi cái.

Bạn không có ý định sử dụng giao diện bằng đầu ngón tay, vì với thiết bị bàn di chuột, bạn chắc chắn rằng hầu hết tất cả
người dùng sẽ tương tác với giao diện người dùng của bạn thông qua chuột. (Nếu giao diện người dùng của bạn là một
trang web, hãy xem xét cẩn thận xem nó có hoạt động khác trên bàn di chuột so với nền tảng máy tính để bàn hoặc máy
tính xách tay hay không.)

Công cụ di chuộttiết lộ bản thân chính xác khi nào và ở đâu họ cần. Mặt khác, chúng ở ngoài tầm
nhìn, cho phép giao diện người dùng sạch sẽ và gọn gàng. Chúng xuất hiện khi người dùng yêu
cầu chúng và bằng cách xuất hiện để đáp lại cử chỉ của người dùng, chúng thu hút sự chú ý về
mình.
250Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Menu bật lên (nhấp chuột phải), menu kéo xuống và thanh menu cũng đáp ứng các tiêu chí này,
nhưng chúng không đủ khả năng khám phá đối với một số loại giao diện—chúng được sử dụng tốt
nhất trên các ứng dụng máy tính để bàn truyền thống, không phải giao diện dựa trên web . (Và đôi khi
chúng cũng không phải là lựa chọn tốt nhất trên các ứng dụng truyền thống.)Công cụ di chuộtdễ dàng
khám phá hơn vì cử chỉ tạo ra chúng—di chuột qua—rất đơn giản và tự nhiên.

Không may thay,Công cụ di chuộthiện không hoạt động tốt trên các thiết bị cảm ứng. Di chuột bằng chuột là
một hành động dễ dàng, tự nhiên dẫn đến khám phá; nhưng trên bàn di chuột, cách duy nhất người dùng
có thể nhìn thấyCông cụ di chuộtlà nếu cô ấy thực sự chạm vào khu vực di chuột, đó là một hành động cam
kết hơn. Nó không giúp ích gì nhiều cho việc khám phá cả.

Thiết kế từng mục hoặc khu vực di chuột có đủ không gian để hiển thị tất cả các hành động khả
dụng. Ẩn những cái làm lộn xộn giao diện quá nhiều và chỉ hiển thị chúng khi người dùng di con
trỏ chuột qua khu vực được đề cập.

Trả lời nhanh khi di chuột và không sử dụngchuyển đổi hoạt hình—chỉ cần hiển thị các công cụ
ngay lập tức và ẩn chúng ngay lập tức khi người dùng di chuyển con trỏ ra xa. Tương tự
như vậy, không bao giờ phóng to vùng di chuột hoặc sắp xếp lại trang khi người dùng di
chuột qua nó. Ý tưởng là làm cho hành động di chuột nhẹ và nhanh nhất có thể để người
dùng có thể dễ dàng tiếp cận các công cụ cần thiết.

Nếu vùng di chuột là một mục trong danh sách, bạn có thể đánh dấu mục đó bằng cách thay đổi màu nền hoặc vẽ
đường viền xung quanh mục đó. Hành động hiển thị các công cụ sẽ thu hút sự chú ý của người dùng vào khu vực
đó, nhưng việc làm nổi bật mục đó sẽ còn làm được nhiều hơn thế.

Coi nhưCông cụ di chuộtthay thế cho trình đơn thả xuống, trình đơn bật lên,bảng hành động, MộtLiệt kê
khảmvới các nút trong đó hoặc một tập hợp các nút được lặp lại trong mỗi mục.

Grooveshark sử dụngCông cụ di chuộtđể hiển thị các hành động trên mỗi bài hát (xem Hình 6-7).
Các lựa chọn thay thế sẽ là hiển thị tất cả các công cụ mọi lúc—bận, nhưng không tệ—hoặc di
chuyển các công cụ lên thanh công cụ trên cùng, nơi chúng sẽ chỉ hoạt động trên các bài hát
được chọn trong danh sách. Điều đó khá phức tạp đối với nhà thiết kế, lập trình viên và đặc biệt
là người dùng: cô ấy sẽ phải tìm ra cách chọn một bài hát, sau đó tạo kết nối logic và không gian
giữa (các) bài hát đã chọn và các công cụ ở đầu trang. bàn. Ngược lại, cácCông cụ di chuộtở ngay
đó và tự giải thích.
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu251

rãnh

lợi ích củaCông cụ di chuộtmẫu là một giao diện rõ ràng hơn, nhưng một nhược điểm là người dùng không
thể thấy ngay các hành động khả dụng. Trang kết quả tìm kiếm của Zillow, được hiển thị trong Hình 6-8, cho
thấy một sự thỏa hiệp có thể xảy ra: các công cụ sẽ bị “xám đi” một cách bình thường và hiển thị chúng rõ
hơn khi con chuột di chuyển qua mục đó.

zillow
252Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Một số triển khai củaCông cụ di chuộtsử dụng lớp phủ nhẹ để hiển thị các nút hoặc điều khiển chẳng hạn như
thanh trượt. Điều này tương tự nhưTrình chọn thả xuốngtrong Chương 8, sự khác biệt duy nhất là ý định của
bạn sử dụng nó cho các hành động chứ không phải cài đặt. Trong Hình 6-9, trình phát YouTube sử dụng di
chuột để hiển thị thanh trượt âm lượng.

trình phát YouTube

http://patternry.com/p=hover-reveal-tools/ http://www.flickr.com/photos/

designingwebinterfaces/tags/hoverrevealtools/

iPhoto

Thay vì sử dụng các menu, hãy trình bày một nhóm các hành động có liên quan trên bảng giao diện người dùng được tổ
chức phong phú và luôn hiển thị.
 các mẫu253

Bạn có một danh sách các mục và một tập hợp các hành động có thể được thực hiện trên từng mục—quá
nhiều để hiển thị tất cả các hành động cho từng mục và quá nhiều để hiển thịCông cụ di chuột.Bạn có thể đặt
chúng vào một menu, nhưng bạn có thể hoàn toàn không có thanh menu hoặc bạn muốn làm cho các hành
động dễ khám phá hơn là trên các thanh menu. Tương tự cho menu bật lên; họ chỉ không đủ nhìn thấy.
Người dùng của bạn thậm chí có thể không nhận ra các menu bật lên tồn tại.

Hoặc có thể tập hợp các hành động khả thi của bạn quá phức tạp đối với một menu. Menu tốt nhất là hiển
thị một tập hợp các hành động phẳng (vì menu kéo bên phải hoặc menu xếp tầng, một số người dùng khó
thao tác) trong một bản trình bày rất đơn giản, tuyến tính, một dòng cho mỗi mục. Nếu các hành động của
bạn cần được nhóm lại và đặc biệt là nếu các nhóm đó không khớp với tên menu chuẩn cấp cao nhất—
chẳng hạn như Tệp, Chỉnh sửa, Xem, Công cụ, v.v.—bạn có thể muốn có một bản trình bày khác hoàn toàn.

Mẫu này có thể chiếm nhiều không gian màn hình nên thường không phải là lựa chọn tốt cho các thiết bị
nhỏ.

Có ba lý do chính để sử dụngBảng hành độngthay vì các menu hoặc các nút trên mỗi mục: khả
năng hiển thị, không gian có sẵn và quyền tự do trình bày.

Bằng cách đặt các hành động trên giao diện người dùng chính và không ẩn chúng trong menu truyền
thống, bạn làm cho những hành động đó hiển thị đầy đủ với người dùng. Thật sự,Bảng hành độnglàmenu
theo nghĩa chung; chúng chỉ không được tìm thấy trong thanh menu, danh sách thả xuống hoặc cửa sổ bật
lên. Người dùng không phải làm bất cứ điều gì để xem những gì trên mộtbảng hành động—nó ở ngay trước
mặt họ—vì vậy giao diện của bạn dễ khám phá hơn. Điều này đặc biệt tốt cho những người dùng chưa quen
với mô hình tài liệu truyền thống và các thanh menu của nó.

Có rất nhiều cách để cấu trúc các đối tượng trên một giao diện: danh sách, lưới hoặc bảng, hệ thống phân
cấp và bất kỳ cấu trúc tùy chỉnh nào bạn có thể nghĩ ra. NhưngNhóm nútvà các menu truyền thống chỉ cung
cấp cho bạn một danh sách (và không phải là một danh sách dài). MỘTbảng hành độnglà dạng tự do—nó cho
phép bạn tự do sắp xếp các động từ một cách trực quan như bạn có đối với danh từ. Sử dụng nó một cách
rộng rãi!

Dành một khối không gian trên giao diện chobảng hành động. Đặt nó bên dưới hoặc bên cạnh mục tiêu
của hành động. Đích thường là một danh sách, bảng hoặc cây các mục có thể chọn, nhưng nó cũng có
thể là một tài liệu trongTrung tâm sân khấu(Chương 4). Hãy nhớ rằng sự gần gũi là quan trọng. Nếu bạn
đặtbảng hành độngquá xa với bất cứ thứ gì nó hoạt động, người dùng có thể không nắm bắt được mối
quan hệ giữa chúng.
254Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Bảng điều khiển có thể là một hình chữ nhật đơn giản trên trang. Nó có thể là một trong nhiều bảng điều khiển lát gạch
trên trang, có lẽ là mộtBảng điều khiển di động(xem Chương 4), một “ngăn kéo” trong Mac OS X, hoặc thậm chí là một cửa sổ
riêng biệt. Nếu nó có thể đóng được, hãy làm cho nó thật dễ dàng để mở lại, đặc biệt nếu những hành động đó chỉ xuất
hiện trênbảng hành độngvà không bị trùng lặp trên một menu!

Rất có thể bạn sẽ cần thể hiện các hành động khác nhau vào những thời điểm khác nhau. Vì vậy, nội
dung của bảng hành động có thể phụ thuộc vào trạng thái của ứng dụng (ví dụ: có tài liệu nào đang
mở chưa?), vào các mục được chọn trong danh sách nào đó ở đâu đó hoặc các yếu tố khác. để chobảng
hành độngnăng động. Những thay đổi sẽ thu hút sự chú ý của người dùng, đó là điều tốt.

Tiếp theo, bạn cần quyết định cách cấu trúc các hành động bạn cần trình bày. Dưới đây là một số cách bạn
có thể làm điều đó:

• Danh sách đơn giản

• Danh sách nhiều cột

• Danh sách được phân loại, chẳng hạn như ví dụ PowerPoint trước đó

• Bảng hoặc lưới

• Cây
• Bất kỳ sự kết hợp nào của những thứ này trong một bảng điều khiển

Nếu bạn phân loại các hành động, hãy cân nhắc sử dụng phương pháp tập trung vào nhiệm vụ. Nhóm
chúng theo những gì mọi người định làm. Tuy nhiên, hãy cố gắng trình bày chúng một cách tuyến tính. Hãy
tưởng tượng đọc to các hành động cho một người không thể nhìn thấy màn hình—bạn có thể tiếp tục thực
hiện chúng một cách hợp lý, với điểm bắt đầu và điểm kết thúc rõ ràng không? Tất nhiên, đó là cách người
dùng khiếm thị sẽ “nghe thấy” giao diện.

Đối với nhãn của mỗi hành động, bạn có thể sử dụng văn bản, biểu tượng hoặc cả hai, tùy thuộc vào điều gì truyền đạt bản chất của hành

động một cách tốt nhất. Trên thực tế, nếu bạn sử dụng hầu hết các biểu tượng, bạn sẽ kết thúc với…một thanh công cụ truyền thống! (Hoặc

bảng màu, nếu giao diện người dùng của bạn là ứng dụng kiểu trình tạo trực quan.)

nhãn văn bản trên mộtbảng hành độngcó thể dài hơn trên menu hoặc nút. Ví dụ, bạn có thể sử dụng các nhãn nhiều
dòng—không cần phải quá tỉ mỉ với các từ ở đây. Chỉ cần nhớ rằng các nhãn dài hơn, nhiều mô tả hơn sẽ tốt hơn
cho những người dùng lần đầu hoặc những người dùng không thường xuyên, những người cần tìm hiểu (hoặc
được nhắc nhở) tác dụng của những hành động này. Không gian thừa dành cho các nhãn dài có thể không được
đánh giá cao trong các giao diện hiệu suất cao được hầu hết người dùng có kinh nghiệm sử dụng. Nếu có quá
nhiều từ, ngay cả những người dùng lần đầu cũng sẽ lóa mắt.
 các mẫu255

Ví dụ trong Hình 6-10 là từ iPhoto. KhácTrình quản lý ảnh, chẳng hạn như Picasa (Hình 6-11), hãy sử dụng các
bảng tương tự để chứa các tác vụ trên mỗi hình ảnh. So sánh độ phức tạp của Picasabảng hành độngvới cái
tương đối đơn giản trong iPhoto; cả hai đều phù hợp với đối tượng và nhu cầu cụ thể của họ (iPhoto dành
cho người dùng mới làm quen, Picasa dành cho người dùng có kinh nghiệm hơn).

Picasa

Ảnh chụp màn hình của Windows Finder trong Windows XP (xem Hình 6-12) hiển thị một thư mục ảnh
với mộtbảng hành độngđính kèm với nó. Microsoft gọi tính năng này là Ngăn tác vụ. Bảng điều khiển
bao gồm các bảng con có thể đóng được (xemTấm có thể gập lạimẫu trong Chương 4), mỗi mẫu chứa
một số hành động liên quan có thể quản lý được.

Lưu ý rằng hai phần đầu tiên, Tác vụ ảnh và Tác vụ tệp và thư mục, hoàn toàn hướng đến tác vụ: chúng
được diễn đạt dưới dạng động từ (Xem, Đặt hàng, In và Sao chép) và chúng đoán trước các hành động mà
người dùng thường muốn thực hiện. Nhưng phần thứ ba trong bảng điều khiển này, Các địa điểm khác,
thay vào đó là một danh sách các đối tượng.
256Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Trình tìm Windows

Các tài nguyên web khác thường gọi mẫu này là Ngăn tác vụ, bao gồm mẫu này từ
Infragistics:
http://quince.infragistics.com/Patterns/Task%20Pane.aspx
 các mẫu257

songza

Đặt nút kết thúc giao dịch ở cuối luồng trực quan; làm cho nó lớn và được dán
nhãn tốt.

Bất cứ khi nào bạn cần đặt một nút như Xong, Gửi, OK hoặc Tiếp tục trên giao diện của mình, bạn nên
sử dụng mẫu này. Tổng quát hơn, hãy sử dụng nút nổi bật trực quan cho bước cuối cùng của bất kỳ
giao dịch nào—chẳng hạn như mua hàng trực tuyến—hoặc để cam kết một nhóm cài đặt.

Một bước cuối cùng rõ ràng, được hiểu rõ mang đến cho người dùng của bạn cảm giác gần gũi. Chắc chắn
rằng giao dịch sẽ được thực hiện khi nút đó được nhấp vào; đừng để chúng treo lơ lửng, tự hỏi liệu công
việc của chúng có hiệu quả hay không.

Làm cho bước cuối cùng trở nên rõ ràng là ý nghĩa thực sự của mô hình này. Làm tốt nó dựa trên các
khái niệm bố cục trong Chương 4—phân cấp trực quan, luồng trực quan, nhóm và căn chỉnh.

Tạo một nút thực sự trông giống như một nút chứ không phải một liên kết; hoặc sử dụng các tiêu
chuẩn nền tảng cho các nút bấm hoặc sử dụng đồ họa nút kích thước lớn hoặc trung bình với màu
đậm và đường viền được xác định rõ. Điều này sẽ giúp nút nổi bật trên trang và không bị lạc giữa
những thứ khác.
258Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Khi gắn nhãn cho nút, hãy ưu tiên nhãn văn bản hơn biểu tượng. Chúng dễ hiểu hơn đối với các
hành động như thế này, đặc biệt là vì hầu hết người dùng sẽ tìm kiếm nút có nhãn “Xong” hoặc
“Gửi”. Văn bản trong nhãn đó có thể là một động từ hoặc một cụm động từ ngắn mô tả điều gì
sẽ xảy ra trong các điều khoản của người dùng—“Gửi”, “Mua” hoặc “Thay đổi bản ghi” (ví dụ) cụ
thể hơn “Hoàn thành” và đôi khi có thể giao tiếp hiệu quả hơn.

Đặt nút ở nơi người dùng có nhiều khả năng tìm thấy nó nhất. Theo dõi dòng nhiệm vụ xuyên
suốt trang hoặc biểu mẫu hoặc hộp thoại và đặt nút ngay sau bước cuối cùng. Thông thường, nó
sẽ ở dưới cùng và/hoặc bên phải của trang. Bố cục trang của bạn có thể có một vị trí tiêu chuẩn
cho chúng (xemKhung trực quanmẫu trong Chương 4), hoặc tiêu chuẩn nền tảng có thể quy định
nó; nếu vậy, sử dụng nơi tiêu chuẩn.

Trong mọi trường hợp, hãy đảm bảo nút nằm gần trường văn bản hoặc điều khiển cuối cùng. Nếu nó quá xa,
người dùng có thể không tìm thấy nó ngay sau khi hoàn thành công việc của mình và cô ấy có thể tìm kiếm các khả
năng chi trả khác trong hành trình tìm kiếm “việc cần làm tiếp theo”. Trên Web, cuối cùng người dùng có thể từ bỏ
trang (và có thể là mua hàng) mà không nhận ra điều đó.

Hình 6-14 cho thấy một biểu mẫu web điển hình. Bạn có thể thấy các nút hành động mà không cần
đọc nhãn, chỉ nhờ vào thiết kế trực quan:

• Màu xanh nổi bật. Đó là một màu bão hòa, tương phản với nền trắng và
phản ánh màu xanh lam của dòng tiêu đề. (Nút màu trắng hoặc xám nhạt
có viền đen sẽ hòa vào biểu mẫu.)
• Đồ họa được sử dụng cho mỗi nút trông giống như một nút. Đó là hình tròn
hoặc hình “viên thuốc”, với bóng đổ rất nhỏ, làm cho nó nổi bật khỏi nền. Các
nút cũng lớn.
• Cả hai nút được đặt trực tiếp dưới phần thân của biểu mẫu. Cả luồng tác vụ (người dùng
sẽ làm việc từ trên xuống dưới) và luồng trực quan đều khiến mắt người dùng dừng lại
ở nút đó.

• Mỗi nút được đặt cách nhau bởi khoảng trắng ở bên trái, bên phải và bên dưới.
 các mẫu259
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

OneHourCourses.com

JetBlue, Kayak và Southwest (xem Hình 6-15) sử dụng các nút mạnh trên giao diện tìm kiếm chuyến
bay trên trang chủ của họ. Những điều này làm theo tất cả các hướng dẫn choCác nút “Xong” nổi bật, và
một lần nữa, bạn có thể nhìn thấy chúng ngay lập tức. Mặt khác, nút tương ứng của American Airlines
bị mất hình thức—nó quá nhỏ, quá xa so với phần cuối của biểu mẫu, quá gần với đường viền của
biểu mẫu và quá giống với các thành phần khác trong biểu mẫu để nổi bật tốt (xem Hình 6-16). Hơn
nữa, nhãn “GO” không phải là nhiệm vụ như “Tìm kiếm” hoặc “Tìm chuyến bay”.
260Chương 6: Làm mọi việc: Hành động và mệnh lệnh

JetBlue, Kayak và Tây Nam

hãng hàng không Mỹ

 các mẫu261

Một số thư viện mẫu khác xác định các mẫu có liên quan rất chặt chẽ, chẳng hạn như Hành động
chính và Nút hành động. Luke Wroblewski, trong cuốn sách của ôngThiết kế biểu mẫu web (Rosenfeld
Media), thảo luận về các hành động chính so với hành động phụ ở các dạng như được mô tả trong
mẫu này.

http://www.welie.com/patterns/showPattern.php?patternID=action-button

http://patternry.com/p=primary-secondary-actions/

http://quince.infragistics.com/Patterns/Primary%20Action.html

thư Mac

Thay đổi nhãn menu linh hoạt để hiển thị chính xác những gì chúng sẽ làm khi được gọi.

Giao diện người dùng của bạn có các mục menu hoạt động trên các tài liệu hoặc mục cụ thể, chẳng hạn như Đóng hoặc
hoạt động hơi khác trong các ngữ cảnh khác nhau, chẳng hạn như Hoàn tác.

Các mục trình đơn nói chính xác những gì chúng sẽ làm giúp giao diện người dùng trở nên dễ hiểu. Người
dùng không phải dừng lại và tìm ra đối tượng nào sẽ bị ảnh hưởng. Cô ấy cũng ít có khả năng vô tình làm
điều gì đó mà cô ấy không có ý định, chẳng hạn như xóa “Chương 8” thay vì “Chú thích cuối trang 3”. Do đó
nó khuyến khích thăm dò an toàn.
262Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Mỗi khi người dùng thay đổi đối tượng đã chọn (hoặc tài liệu hiện tại, thao tác không thể hoàn
tác cuối cùng, v.v.), hãy thay đổi các mục menu hoạt động trên đó để bao gồm các chi tiết cụ thể
của hành động. Rõ ràng, nếu không có đối tượng nào được chọn, bạn nên vô hiệu hóa mục
menu, do đó củng cố kết nối giữa mục và đối tượng của nó.

Ngẫu nhiên, mẫu này cũng có thể hoạt động đối với nhãn nút hoặc liên kết hoặc bất kỳ thứ gì khác là "động từ"
trong ngữ cảnh của giao diện người dùng.

Nếu có nhiều đối tượng được chọn thì sao? Phần mềm hiện có không có nhiều hướng dẫn,
mẫu này chủ yếu áp dụng cho các tài liệu và thao tác hoàn tác—nhưng bạn có thể viết ở
dạng số nhiều, như trong “Xóa các đối tượng đã chọn”.

Hình 6-18 hiển thị một menu từ thanh menu của Illustrator. Bộ lọc cuối cùng mà người dùng áp
dụng trong trường hợp này là bộ lọc “Drop Shadow”. Menu ghi nhớ điều đó, vì vậy nó thay đổi
hai mục đầu tiên thành (1) áp dụng lại cùng một bộ lọc và (2) sửa đổi bộ lọc trước khi áp dụng lại.
(“Drop Shadow…” hiển thị hộp thoại để sửa đổi nó.) Có rất nhiều bộ lọc mà người dùngcó thểđã
áp dụng rằng nó khá hữu ích để được nhắc về cái cuối cùng. Và tổ hợp phím tăng tốc thuận tiện
cho việc áp dụng lặp đi lặp lại cùng một bộ lọc!

minh họa

Hai ví dụ trước là từ các thanh menu của ứng dụng, nhưng mẫu này cũng có thể được sử dụng hiệu quả
trong các công cụ theo từng mục, chẳng hạn như menu thả xuống trong Gmail (xem Hình 6-19). Mục menu
“Thêm [người] vào danh sách Liên hệ” rõ ràng và dễ hiểu hơn nhiều so với mục thay thế chung chung,
chẳng hạn như “Thêm người gửi vào danh sách Liên hệ”.
 các mẫu263

trình đơn Gmail

Hộp thoại in PowerPoint

Hiển thị cho người dùng bản xem trước hoặc bản tóm tắt về những gì sẽ xảy ra khi họ thực hiện một hành động.
264Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Người dùng sắp thực hiện một hành động “nặng nhọc”, chẳng hạn như mở một tệp
lớn, in tài liệu dài 10 trang, gửi một biểu mẫu mất thời gian để điền hoặc cam kết mua
hàng qua Web. Người dùng muốn có một số đảm bảo rằng anh ta đang làm đúng. Làm
không đúng cách sẽ tốn thời gian hoặc tốn kém.
Ngoài ra, người dùng có thể sắp thực hiện một số thay đổi trực quan với kết quả khó dự
đoán, chẳng hạn như áp dụng bộ lọc cho ảnh. Anh ta muốn biết trước liệu hiệu quả có được
mong muốn hay không.

Bản xem trước giúp ngăn ngừa lỗi. Người dùng có thể đã mắc lỗi đánh máy hoặc anh ta có thể đã
hiểu sai điều gì đó dẫn đến hành động được đề cập (chẳng hạn như mua nhầm mặt hàng trực tuyến).
Bằng cách cho anh ấy xem một bản tóm tắt hoặc mô tả trực quan về những gì sắp xảy ra, bạn cho
anh ấy cơ hội rút lui hoặc sửa chữa bất kỳ sai lầm nào.

Bản xem trước cũng có thể giúp ứng dụng trở nên tự mô tả hơn. Nếu ai đó chưa bao giờ sử dụng một hành
động nhất định trước đây hoặc không biết hành động đó sẽ làm gì trong một số trường hợp nhất định, bản
xem trước sẽ giải thích hành động đó tốt hơn so với tài liệu—người dùng tìm hiểu về hành động đó chính
xác khi nào và ở đâu họ cần.

Ngay trước khi người dùng thực hiện một hành động, hiển thị bất kỳ thông tin nào cung cấp cho anh ta bức
tranh rõ ràng nhất về những gì sắp xảy ra. Nếu đó là bản xem trước khi in, hãy hiển thị trang sẽ trông như
thế nào trên khổ giấy đã chọn; nếu đó là một hoạt động hình ảnh, hãy hiển thị cận cảnh hình ảnh sẽ trông
như thế nào; nếu đó là một giao dịch, hãy hiển thị bản tóm tắt mọi thứ mà hệ thống biết về giao dịch đó. Chỉ
ra những gì quan trọng—không hơn, không kém.

Cung cấp cho người dùng cách thực hiện hành động ngay từ trang xem trước. Không cần phải yêu cầu
người dùng đóng bản xem trước hoặc điều hướng ở nơi khác.

Tương tự như vậy, cung cấp cho người dùng một cách để rút lui. Nếu anh ta có thể cứu vãn giao dịch bằng
cách sửa thông tin đã nhập trước đó, hãy cho anh ta cơ hội để làm điều đó, với các nút “Thay đổi” bên cạnh
thông tin có thể thay đổi. Trong một số trình hướng dẫn và các quy trình tuyến tính khác, đây có thể chỉ là
vấn đề điều hướng lùi lại một vài bước.

Picasa cho phép người dùng áp dụng một trong nhiều bộ lọc cho ảnh (xem Hình 6-21). Mỗi bộ lọc có một
hình thu nhỏ xem trước được liên kết với nó—những gì bạn thấy thực sự là những gì bạn nhận được! Người
dùng có thể cần thử nghiệm với nhiều bộ lọc tương tự trước khi tìm thấy bộ lọc có tác dụng mong muốn và
anh ta muốn quay vòng nhanh. Đây là một tình huống xem trước cổ điển. (Photoshop và các ứng dụng xử lý
hình ảnh khác sử dụng các bản xem trước tương tự.)
 các mẫu265

Picasa

Các nhà tùy chỉnh và xây dựng sản phẩm trực tuyến thường sử dụng Bản xem trước để hiển thị những gì
người dùng đã tạo cho đến nay. Thẻ Starbucks có thể tùy chỉnh trong Hình 6-22 là một ví dụ điển hình:
trong bước xem xét này, người dùng có cơ hội quay lại và thay đổi mọi thứ, hoặc tiếp tục với việc tạo thẻ,
hoặc yêu cầu trợ giúp hoặc từ bỏ toàn bộ giao dịch.

Tùy chỉnh thẻ Starbucks

266Chương 6: Làm mọi việc: Hành động và mệnh lệnh

http://quince.infragistics.com/Patterns/Preview.aspx

http://ui-patterns.com/patterns/LivePreview

Quyển sáchThiết kế giao diện webcủa Bill Scott và Theresa Neil (O'Reilly,http://oreilly. com/
catalog/9780596516253/)cũng mô tả một \\. (Xem trước trực tiếp khác với Xem trước ở chỗ nó
hiển thị các thay đổi ngay khi chúng được thực hiện.)

Hộp thoại Sao chép Mac OS

Cho người dùng biết mức độ tiến bộ đã được thực hiện cho đến nay đối với một hoạt động tốn thời gian.

Một thao tác tốn thời gian sẽ làm gián đoạn giao diện người dùng hoặc chạy trong nền lâu hơn
hai giây hoặc lâu hơn.

Người dùng mất kiên nhẫn khi giao diện người dùng chỉ nằm đó. Ngay cả khi bạn thay đổi con trỏ chuột thành đồng hồ
hoặc đồng hồ cát (trong mọi trường hợp, bạn nên làm như vậy nếu phần còn lại của giao diện người dùng bị khóa), bạn
không muốn bắt người dùng đợi trong một khoảng thời gian không xác định.

Các thử nghiệm cho thấy rằng nếu người dùng nhìn thấy một dấu hiệu cho thấy điều gì đó đang
diễn ra, họ sẽ kiên nhẫn hơn nhiều, ngay cả khi họ phải đợi lâu hơn so với khi không cóChỉ báo
tiến độ. Có thể đó là vì họ biết rằng “hệ thống đang suy nghĩ” và nó không bị treo hoặc chờ họ
làm điều gì đó.

Hiển thị một chỉ báo hoạt hình về mức độ tiến bộ đã được thực hiện. Bằng lời nói hoặc bằng hình ảnh (hoặc
cả hai), hãy nói với người dùng:

• Chuyện gì đang xảy ra

• Tỷ lệ hoạt động đã hoàn thành
 các mẫu267

• Bao nhiêu thời gian còn lại

• Làm thế nào để ngăn chặn nó

Đối với ước tính thời gian, đôi khi sai cũng không sao, miễn là ước tính của bạn nhanh chóng hội tụ về
một điều gì đó chính xác. Nhưng đôi khi giao diện người dùng không thể biết nó đi được bao xa.
Trong trường hợp đó, hãy hiển thị nội dung hoạt ảnh không phổ biến về tỷ lệ phần trăm. Hãy nghĩ về
các vòng lặp hình ảnh của trình duyệt tiếp tục cuộn trong khi tải trang.

Hầu hết các hộp công cụ GUI cung cấp tiện ích con hoặc hộp thoại triển khai mẫu này. Tuy nhiên, hãy cẩn thận với
các sự cố phân luồng phức tạp tiềm tàng—cácChỉ báo tiến độphải được cập nhật một cách nhất quán trong khi hoạt
động tự nó diễn ra tự do. Nếu có thể, hãy giữ cho phần còn lại của giao diện người dùng luôn hoạt động. Không
khóa giao diện người dùng trong khiChỉ báo tiến độcó thể nhìn thấy.

Nếu có thể hủy hoạt động đang được theo dõi tiến độ, hãy cung cấp nút hủy hoặc khả
năng chi trả tương tự trên hoặc gầnChỉ báo tiến độ; đó là nơi người dùng có thể tìm kiếm
nó. xemKhả năng hủy bỏmẫu (tiếp theo) để biết thêm thông tin.

Khi người dùng Flickr tải lên nhiều tệp hình ảnh (có thể mất một lúc), Flickr sẽ hiển thị nhiều thông tin và
phong phú.Chỉ báo tiến độ(xem Hình 6-24). Nó hiển thị kích thước, tiến trình và trạng thái của từng tệp cùng
với thanh tiến trình tổng thể ở dưới cùng. Khi toàn bộ quá trình tải lên hoàn tất, nó sẽ mạnh dạn cho bạn
biết và hướng dẫn bạn đến hoạt động hợp lý tiếp theo. (Một điểm nhấn thú vị khác là chính tiêu đề trang
cung cấp cho bạn phần trăm hoàn thành.)

Chỉ báo tiến độ tải lên nhiều Flickr

268Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Giao diện của Grooveshark mất một chút thời gian để tải. Của nóChỉ báo tiến độlà một đường viền hay
thay đổi và có thương hiệu của một con cá mập đầu búa, dần dần lấp đầy từ trái sang phải khi tải mã
trang (xem Hình 6-25).

rãnh

http://quince.infragistics.com/Patterns/Progress%20Indicator.aspx http://

www.welie.com/patterns/showPattern.php?patternID=processing-page Quyển

sáchThiết kế giao diện webcũng mô tả mộtChỉ báo tiến độmẫu.

 các mẫu269

firefox

Cung cấp một cách để hủy ngay lập tức một thao tác tốn thời gian mà không có tác dụng phụ.

Một thao tác tốn thời gian sẽ làm gián đoạn giao diện người dùng hoặc chạy trong nền lâu hơn hai
giây hoặc lâu hơn—chẳng hạn như khi bạn in một tệp, truy vấn cơ sở dữ liệu hoặc tải một tệp lớn.
Ngoài ra, người dùng đang tham gia vào một hoạt động theo nghĩa đen hoặc rõ ràng sẽ tắt hầu hết
các tương tác khác với hệ thống, chẳng hạn như khi làm việc với hộp thoại phương thức.

Người dùng thay đổi suy nghĩ của họ. Khi một thao tác tốn nhiều thời gian bắt đầu, người dùng có thể
muốn dừng nó, đặc biệt nếu mộtChỉ báo tiến độnói với cô ấy rằng sẽ mất một lúc. Hoặc người dùng có thể đã
bắt đầu nó một cách tình cờ ngay từ đầu.Khả năng hủy bỏchắc chắn sẽ giúp ngăn ngừa và khôi phục lỗi—
người dùng có thể hủy bỏ thứ gì đó mà cô ấy biết sẽ không thành công, chẳng hạn như tải một trang từ
máy chủ web mà cô ấy nhận ra là không hoạt động.

Trong mọi trường hợp, người dùng sẽ cảm thấy tốt hơn khi khám phá giao diện và thử mọi thứ
nếu họ biết rằng mọi thứ đều có thể hủy được. Nó khuyến khíchthăm dò an toàn(xem Chương 1),
từ đó làm cho giao diện trở nên dễ học và thú vị hơn.

Trước tiên, hãy tìm hiểu xem có cách nào tăng tốc hoạt động tốn thời gian để nó có vẻ tức thời không.
Nó thậm chí không cần phải thực sự nhanh; nếu người dùng cảm nhận nó ngay lập tức, điều đó đủ
tốt. Trên Web hoặc ứng dụng nối mạng, điều này có thể có nghĩa là tải trước dữ liệu hoặc mã—gửi dữ
liệu hoặc mã tới ứng dụng khách trước khi được yêu cầu—hoặc gửi dữ liệu theo từng phần, hiển thị
cho người dùng khi dữ liệu đến. Hãy nhớ rằng, mọi người chỉ có thể đọc quá nhanh . Bạn cũng có thể
sử dụng thời gian tải để cho phép người dùng đọc trang dữ liệu đầu tiên, sau đó là trang khác, v.v.
270Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Nhưng nếu bạn thực sự cầnKhả năng hủy bỏ, đây là cách thực hiện. Đặt nút Hủy trực tiếp trên giao
diện, bên cạnhChỉ báo tiến độ(mà bạn đang sử dụng, phải không?) hoặc bất cứ nơi nào kết quả của
hoạt động sẽ xuất hiện. Dán nhãn nó bằng từDừng lạihoặcHủy bỏ,và/hoặc đặt một biểu tượng dừng
được quốc tế công nhận trên đó: hình bát giác màu đỏ hoặc hình tròn màu đỏ có thanh ngang hoặc
chữ “X”.

Khi người dùng nhấp hoặc nhấn nút Hủy, thao tác sẽ bị hủy ngay lập tức. Nếu bạn đợi quá lâu—
hơn một hoặc hai giây—người dùng có thể nghi ngờ rằng thao tác hủy thực sự hoạt động (hoặc
bạn có thể ngăn cản anh ta sử dụng nó, vì anh ta cũng có thể đợi thao tác kết thúc). Cho người
dùng biết rằng quá trình hủy đã hoạt động—tạm dừng quá trìnhChỉ báo tiến độvà hiển thị thông
báo trạng thái trên giao diện chẳng hạn.

Nhiều hoạt động song song là một thách thức. Làm thế nào để người dùng hủy một cái cụ thể chứ không
phải cái khác? Nhãn của nút Hủy hoặc mẹo công cụ có thể cho biết chính xác nội dung nào bị hủy khi người
dùng nhấp vào (xem phầnMục menu thông minhmẫu cho một khái niệm tương tự). Nếu các hành động được
trình bày dưới dạng một danh sách hoặc một tập hợp các bảng, bạn có thể cân nhắc cung cấp một nút Hủy
riêng cho mỗi hành động để tránh sự mơ hồ.

Hộp thoại cài đặt Adobe AIR, như trong Hình 6-27, là một ví dụ đơn giản, rút gọn
củaKhả năng hủy bỏ.

Hộp thoại cài đặt Adobe AIR

Khi các thao tác sao chép tập tin dài xếp chồng lên nhau trong Mac OS, mỗi thao tác có thể bị hủy riêng biệt, mặc dù tất cả
chúng đều được hiển thị trong cùng một hộp thoại (xem Hình 6-28). Điều này có ý nghĩa—không có thao tác sao chép nào
phụ thuộc vào bất kỳ thao tác nào khác và do đó, bất kỳ thao tác nào cũng có thể bị hủy mà không ảnh hưởng đến các
thao tác khác.
 các mẫu271

Hộp thoại Sao chép Mac OS, với bốn thao tác sao chép

photoshop

Cung cấp một cách để dễ dàng đảo ngược một loạt các hành động được thực hiện bởi người dùng.
272Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Bạn đang xây dựng một giao diện người dùng có tính tương tác cao phức tạp hơn điều hướng đơn giản
hoặc điền vào biểu mẫu. Điều này bao gồm trình đọc thư, phần mềm cơ sở dữ liệu, công cụ soạn thảo, phần
mềm đồ họa và môi trường lập trình.

Khả năng hoàn tác một chuỗi dài các thao tác cho phép người dùng cảm thấy rằng giao diện này an toàn để
khám phá. Trong khi tìm hiểu giao diện, họ có thể thử nghiệm giao diện đó, tự tin rằng họ không thực hiện
các thay đổi không thể thay đổi—ngay cả khi họ vô tình làm điều gì đó “xấu”. Điều này đúng với người dùng
ở mọi cấp độ kỹ năng, không chỉ người mới bắt đầu.*

Khi người dùng biết rõ về giao diện, họ có thể di chuyển qua nó với sự tự tin rằng những sai lầm
không phải là vĩnh viễn. Nếu ngón tay của cô ấy bị trượt và cô ấy nhấn nhầm mục menu, thì không
cần phải khôi phục phức tạp và căng thẳng; cô ấy không phải hoàn nguyên các tệp đã lưu, tắt và bắt
đầu lại hoặc yêu cầu quản trị viên hệ thống khôi phục tệp sao lưu. Điều này giúp người dùng tránh
lãng phí thời gian và đôi khi bị đau khổ về tinh thần.

Hoàn tác đa cấpcũng cho phép người dùng chuyên gia khám phá các đường dẫn công việc một cách nhanh chóng và

dễ dàng. Chẳng hạn, một người dùng Photoshop có thể thực hiện một loạt thao tác lọc trên một hình ảnh, nghiên
cứu kết quả để xem liệu cô ấy có thích nó không, rồi hoàn tác trở lại điểm xuất phát của cô ấy. Sau đó, cô ấy có thể
thử một loạt bộ lọc khác, có thể lưu nó và hoàn tác lại. Cô ấy có thể làm điều này mà không cần
Hoàn tác đa cấp, nhưng sẽ mất nhiều thời gian hơn (để đóng và tải lại hình ảnh). Khi người
dùng làm việc sáng tạo, tốc độ và tính dễ sử dụng rất quan trọng để duy trì trải nghiệm
dòng chảy. Xem Chương 1 để biết thêm thông tin, đặc biệt làthăm dò an toànVà
xây dựng gia tănghoa văn.

Phần mềm được xây dựng trên giao diện người dùng của bạn trước tiên cần có một mô hình mạnh mẽ về hành động là gì—hành động đó

được gọi là gì, đối tượng nào được liên kết với hành động đó và cách đảo ngược hành động đó. Sau đó, bạn có thể xây dựng một giao diện

trên đó.

Quyết định những hoạt động cần phải được hoàn tác. Bất kỳ hành động nào có thể thay đổi tệp hoặc cơ sở dữ liệu—bất kỳ
hành động nào có thể là vĩnh viễn—đều không thể hoàn tác được, trong khi các trạng thái tạm thời hoặc liên quan đến
chế độ xem thường không thể hoàn tác. Cụ thể, những loại thay đổi này dự kiến sẽ không thể hoàn tác được trong hầu
hết các ứng dụng:

• Nhập văn bản cho tài liệu hoặc bảng tính

• Giao dịch cơ sở dữ liệu

* Alan Cooper và Robert Reimann dành hẳn một chương cho khái niệm hoàn tác trong cuốn sách của họGiới thiệu về Face 2.0:
Yếu tố cần thiết của thiết kế tương tác (Willey).
 các mẫu273

• Sửa đổi hình ảnh hoặc sơn canvas

• Thay đổi bố cục—vị trí, kích thước, thứ tự xếp chồng hoặc nhóm—trong các ứng dụng đồ họa

• Thao tác với tệp, chẳng hạn như xóa hoặc sửa đổi tệp

• Tạo, xóa hoặc sắp xếp lại các đối tượng như email hoặc cột bảng tính

• Mọi thao tác cắt, sao chép hoặc dán

Các loại thay đổi sau đây thường không thể hoàn tác. Ngay cả khi bạn nghĩ rằng bạn muốn vượt lên trên
nhiệm vụ và khiến chúng không thể hoàn tác được, hãy cân nhắc rằng bạn có thể khiến người dùng khó
chịu hoàn toàn bằng cách làm lộn xộn “ngăn xếp hoàn tác” với các thao tác hoàn tác vô dụng.

• Lựa chọn văn bản hoặc đối tượng

• Điều hướng giữa các cửa sổ hoặc trang

• Vị trí con trỏ chuột và con trỏ văn bản

• Vị trí thanh cuộn
• Vị trí và kích thước cửa sổ hoặc bảng điều khiển

• Các thay đổi được thực hiện trong hộp thoại không được cam kết hoặc theo chế độ

Một số hoạt động là trên đường biên giới. Ví dụ, điền vào biểu mẫu đôi khi không thể hoàn tác
được và đôi khi không. Tuy nhiên, nếu việc lập thẻ ra khỏi trường đã thay đổi sẽ tự động thực
hiện thay đổi đó, thì có lẽ nên hủy thao tác đó.

(Một số loại hoạt động không thể hoàn tác, nhưng thông thường bản chất của ứng dụng làm cho điều đó
trở nên rõ ràng đối với người dùng có bất kỳ kinh nghiệm nào. Không thể hoàn tác bao gồm bước mua của
giao dịch thương mại điện tử, đăng thông báo lên diễn đàn hoặc phòng trò chuyện hoặc gửi email—nhiều
đến mức đôi khi chúng tôi muốn việc đó không thể hoàn tác được!)

Trong mọi trường hợp, hãy đảm bảo rằng các thao tác không thể hoàn tác có ý nghĩa đối với người
dùng. Đảm bảo xác định và đặt tên cho chúng theo cách người dùng nghĩ về các thao tác chứ không
phải cách máy tính nghĩ về chúng. Ví dụ, bạn có thể hoàn tác một khối văn bản đã nhập theo khối từ
chứ không phải từng chữ cái.

Mỗi hoạt động đi trên đỉnh ngăn xếp khi nó được thực hiện. Mỗi thao tác hoàn tác đảo ngược thao tác ở
trên cùng trước, sau đó đến thao tác ở dưới nó, sau đó là thao tác tiếp theo, v.v. Làm lại cũng hoạt động
theo cách sao lưu ngăn xếp.
274Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Ngăn xếp phải dài ít nhất 10 đến 12 mục để hữu ích nhất và lâu hơn nếu bạn có thể quản lý nó. Quan sát lâu
dài hoặc kiểm tra khả năng sử dụng có thể cho bạn biết giới hạn khả dụng của bạn là bao nhiêu.
(Constantine và Lockwood khẳng định rằng việc có nhiều hơn một tá vật phẩm thường là không cần thiết, vì
“người dùng hiếm khi có thể sử dụng hiệu quả nhiều cấp độ hơn”.*Người dùng chuyên nghiệp của phần
mềm mạnh mẽ có thể cho bạn biết khác đi. Như mọi khi, hãy biết người dùng của bạn.)

Cuối cùng, quyết định cách hiển thị ngăn xếp hoàn tác cho người dùng. Hầu hết các ứng dụng dành cho máy tính để bàn
đều đặt các mục Hoàn tác/Làm lại trên menu Chỉnh sửa. Ngoài ra, Hoàn tác thường được kết nối với Ctrl-Z hoặc tương
đương. Các ứng dụng hoạt động tốt nhất sử dụngMục menu thông minhđể techo người dùng biết chính xác thao tác nào sẽ
thực hiện tiếp theo trên ngăn xếp hoàn tác.

Nhưng hãy xem ảnh chụp màn hình ở trên cùng của mẫu này (Hình 6-29) để có cách trình bày khác, trực
quan hơn. Photoshop hiển thị một danh sách cuộn gồm các thao tác không thể hoàn tác—bao gồm cả
những thao tác đã được hoàn tác (hai thao tác được hiển thị bằng màu xám). Nó cho phép người dùng chọn
điểm trong ngăn xếp mà cô ấy muốn hoàn nguyên. Lịch sử lệnh trực quan như thế này có thể khá hữu ích,
thậm chí chỉ là lời nhắc nhở về những gì bạn đã làm gần đây. xemLịch sử lệnhmẫu để biết thêm thông tin.

Hình 6-30 cho thấy một cách trình bày điển hình hơn vềHoàn tác đa cấp. Trong trường hợp này, người
dùng đã nhập một số văn bản và sau đó chèn một bảng. Việc hoàn tác đầu tiên loại bỏ bảng. Sau khi
hoàn tất, thao tác hoàn tác sau—hành động tiếp theo trong ngăn xếp hoàn tác—đại diện cho văn bản
đã nhập và việc gọi lại Hoàn tác sẽ xóa văn bản đó. Trong khi đó, người dùng có cơ hội “hoàn tác việc
hoàn tác” bằng mục menu Làm lại. Nếu chúng ta ở đầu ngăn xếp (như trong ảnh chụp màn hình đầu
tiên), sẽ không có Làm lại và mục menu đó bị quá tải với tác vụ Lặp lại.

Gây nhầm lẫn? Bạn đặt cược. Hầu hết người dùng sẽ không bao giờ phát triển một bức tranh tinh thần rõ
ràng về các thuật toán đang được sử dụng ở đây; hầu hết mọi người không biết "ngăn xếp" là gì, chưa nói
đến cách nó được sử dụng cùng với Lặp lại và Làm lại. Đó là lý do tại saoMục menu thông minhlà hoàn toàn
quan trọng đối với khả năng sử dụng ở đây. Chúng giải thích chính xác điều gì sẽ xảy ra, giúp giảm gánh
nặng nhận thức cho người dùng.

* Larry Constantine và Lucy Lockwood, “Tương tác có hướng dẫn: Tự dạy các giao diện sáng tạo,” http://
foruse.com/articles/instructive.htm.
 các mẫu275

Phần mềm soạn thảo văn bản

http://patternry.com/p=undo/ http://

quince.infragistics.com/Patterns/Undo.aspx

Lịch sử lệnh của MATLAB, hiển thị ở phía dưới bên trái

Khi người dùng thực hiện các hành động, hãy giữ một bản ghi rõ ràng về những hành động đó—những gì đã được thực hiện cho

cái gì và khi nào.

276Chương 6: Làm mọi việc: Hành động và mệnh lệnh

Người dùng thực hiện các chuỗi hành động dài và phức tạp, bằng GUI hoặc dòng lệnh. Hầu hết
người dùng đều khá có kinh nghiệm hoặc nếu không thì ít nhất họ cũng muốn có một giao diện
hiệu quả hỗ trợ công việc lâu dài và định kỳ. Trình chỉnh sửa đồ họa và môi trường lập trình
thường là những ứng cử viên sáng giá.

Đôi khi người dùng cần ghi nhớ hoặc xem lại những gì mình đã làm trong quá trình làm việc với phần
mềm. Chẳng hạn, anh ta có thể muốn làm bất kỳ điều gì sau đây:

• Lặp lại hành động hoặc mệnh lệnh đã làm trước đó mà trẻ không nhớ rõ
• Nhớ lại thứ tự thực hiện một số hành động
• Lặp lại một chuỗi các thao tác, ban đầu được thực hiện với một đối tượng, trên một đối tượng khác

• Ghi nhật ký các hành động của anh ấy, vì lý do pháp lý hoặc an ninh

• Chuyển đổi một chuỗi lệnh tương tác thành tập lệnh hoặc macro (xem phầnmacromẫu
trong chương này)

Máy tính rất giỏi trong việc ghi lại chính xác các bước đã thực hiện; mọi người không. Hãy tận
dụng điều đó.

Giữ một danh sách đang chạy các hành động được thực hiện bởi người dùng. Nếu giao diện được điều khiển từ
một dòng lệnh, bạn sẽ dễ dàng—chỉ cần ghi lại mọi thứ đã nhập ở đó. Nếu có thể, hãy theo dõi lịch sử giữa các
phiên để người dùng có thể thấy những gì đã được thực hiện cách đây một tuần hoặc lâu hơn.

Nếu đó là giao diện đồ họa hoặc kết hợp giữa giao diện đồ họa và dòng lệnh, mọi thứ sẽ phức tạp hơn một chút.
Tìm cách diễn đạt từng hành động theo một cách nhất quán, ngắn gọn, thường là bằng từ ngữ (mặc dù không có
lý do gì không thể thực hiện được bằng hình ảnh). Đảm bảo rằng bạn xác định những điều này với mức độ chi tiết
phù hợp—nếu một hành động được thực hiện đồng loạt cho 17 đối tượng, hãy ghi lại hành động đó dưới dạng
một hành động chứ không phải 17.

Những lệnh nào nên được ghi lại và những gì không nên? xemHoàn tác đa cấpmẫu để thảo
luận kỹ lưỡng về những lệnh nào nên “được tính”. Nếu một lệnh không thể hoàn tác được,
nó cũng sẽ được ghi lại trong lịch sử.

Cuối cùng, hiển thị lịch sử cho người dùng. Màn hình đó phải là tùy chọn trong hầu hết các phần mềm, vì nó
gần như chắc chắn sẽ đóng vai trò hỗ trợ trong công việc của người dùng, chứ không phải vai chính. Danh
sách các lệnh—cũ nhất đến mới nhất—có xu hướng hoạt động tốt. Nếu muốn, bạn có thể đánh dấu thời
gian hiển thị lịch sử bằng cách nào đó. MATLAB, được hiển thị trước đó trong Hình 6-31, đặt ngày và giờ vào
lịch sử bất cứ khi nào chương trình khởi động lại.
 các mẫu277

Unix và nhiều biến thể của nó sử dụng các chương trình shell, chẳng hạn như tcsh và bash,
để theo dõi lịch sử lệnh của chính chúng trong các tệp. Người dùng có thể gọi nó bằng lệnh
“history”, như trong Hình 6-32. Lịch sử cũng có thể truy cập thông qua các cấu trúc dòng
lệnh khác nhau, chẳng hạn như !! (sử dụng lại lệnh cuối cùng), !3 (sử dụng lại lệnh đã đưa ra
ba lệnh trước đó) và Ctrl-P, bạn có thể lặp lại lệnh này để hiển thị từng lệnh trước đó một
lần.

vỏ Unix

Ngăn xếp hoàn tác của Photoshop, cũng được thấy trongHoàn tác đa cấpmẫu, thực sự là một lịch sử lệnh. Bạn có thể
sử dụng nó để hoàn tác các hành động bạn đã thực hiện, nhưng bạn không cần phải làm vậy; bạn cũng có thể chỉ
nhìn vào nó và cuộn qua nó, xem lại những gì bạn đã làm. Nó sử dụng các biểu tượng để xác định các lớp hành
động khác nhau, điều này không bình thường nhưng rất hay khi sử dụng (xem Hình 6-33).

Photoshop, một lần nữa

278Chương 6: Làm mọi việc: Hành động và mệnh lệnh

photoshop

Macro là các hành động đơn lẻ bao gồm các hành động khác, nhỏ hơn. Người dùng có thể tạo chúng bằng
cách tập hợp các chuỗi hành động Sử dụng khi:

Người dùng có thể muốn lặp lại chuỗi hành động hoặc lệnh dài. Ví dụ, họ có thể muốn lặp lại
danh sách các tệp, hình ảnh, bản ghi cơ sở dữ liệu hoặc các đối tượng khác, thực hiện những
thao tác giống nhau đối với từng đối tượng. Bạn có thể đã thực hiệnHoàn tác đa cấphoặc
Lịch sử lệnh.

Không ai muốn thực hiện đi thực hiện lại cùng một nhóm nhiệm vụ tương tác lặp đi
lặp lại! Đây chính xác là những gì máy tính được cho là giỏi. Chương 1 đã mô tả một
mẫu hành vi người dùng được gọi làSắp xếp hợp lý; macro chính xác là loại cơ chế có
thể hỗ trợ tốt điều đó.
Macro rõ ràng giúp người dùng làm việc nhanh hơn. Nhưng bằng cách giảm số lượng mệnh
lệnh hoặc cử chỉ cần thiết để hoàn thành công việc, chúng cũng giảm khả năng trượt ngón tay,
sơ suất và các lỗi tương tự.

Bạn cũng có thể nhớ lại khái niệm “dòng chảy” cũng đã được thảo luận trong Chương 1. Khi một chuỗi
hành động dài có thể được nén thành một lệnh hoặc phím tắt duy nhất, trải nghiệm dòng chảy được
nâng cao—người dùng có thể hoàn thành nhiều việc hơn với ít nỗ lực hơn và thời gian, và cô ấy có thể
theo dõi các mục tiêu lớn hơn của mình mà không bị sa lầy vào các chi tiết.
 các mẫu279

Cung cấp một cách để người dùng “ghi lại” một chuỗi các hành động và dễ dàng “phát
lại” chúng bất kỳ lúc nào. Việc phát lại phải dễ dàng như đưa ra một lệnh, nhấn một nút
hoặc kéo và thả một đối tượng.

Người dùng sẽ có thể đặt tên cho macro theo lựa chọn của mình. Hãy để cô ấy xem lại trình tự hành động
bằng cách nào đó, để cô ấy có thể kiểm tra công việc của mình hoặc xem lại trình tự đã quên để xem nó đã
làm gì (như trongLịch sử lệnhmẫu). Làm cho một macro có thể tham chiếu đến một macro khác để chúng có
thể xây dựng lẫn nhau.

Người dùng chắc chắn sẽ muốn lưu macro từ ngày này sang ngày khác, vì vậy hãy đảm bảo rằng họ kiên trì—lưu
chúng vào tệp hoặc cơ sở dữ liệu. Trình bày chúng trong một danh sách có thể tìm kiếm, có thể sắp xếp và thậm
chí có thể phân loại, tùy thuộc vào nhu cầu của người dùng của bạn.

Bản thân macro có thể được phát lại theo đúng nghĩa đen, để giữ cho mọi thứ đơn giản; hoặc, nếu nó
tác động lên một đối tượng có thể thay đổi từ lời gọi này sang lời gọi khác, bạn có thể cho phép chuỗi
được tham số hóa (ví dụ: sử dụng trình giữ chỗ hoặc biến thay vì đối tượng bằng chữ). Macro cũng có
thể hành động trên nhiều thứ cùng một lúc.

Cách trình bày tên của macro (hoặc các điều khiển khởi chạy chúng) phụ thuộc nhiều vào
bản chất của ứng dụng, nhưng hãy cân nhắc việc đặt chúng bằng các hành động tích hợp
thay vì biến chúng thành công dân hạng hai.

Khả năng ghi lại các chuỗi này—cộng với khả năng tạo macro dựa trên macro khác tạo ra khả năng cho
người dùng phát minh ra một ngữ pháp ngôn ngữ hoặc hình ảnh hoàn toàn mới, một ngữ pháp được tinh
chỉnh phù hợp với môi trường và thói quen làm việc của riêng họ. Đây là một khả năng rất mạnh mẽ. Trên
thực tế, đó là lập trình; nhưng nếu người dùng của bạn không nghĩ mình là lập trình viên, đừng gọi nó như
vậy, nếu không bạn sẽ khiến họ sợ hãi. (“Tôi không biết cách lập trình bất cứ thứ gì; tôi không thể làm được
điều này.”)

Microsoft Excel cho phép macro được ghi lại, đặt tên, lưu trữ cùng với tài liệu và thậm chí
được gán cho phím tắt. Người dùng cũng có thể chọn chạy macro từ một nút trên thanh
công cụ hoặc điều khiển ActiveX trong chính tài liệu (có nghĩa là macro có thể được sử dụng
làm lệnh gọi lại cho các nút, trường văn bản, v.v.).

Các macro Excel được hiển thị trong Hình 6-35 và 6-36 được viết bằng Visual Basic và người dùng có thể
chỉnh sửa chúng bằng tay nếu muốn. Đây là khi nó trở thành lập trình. Bởi vì Visual Basic cung cấp khả năng
truy cập vào rất nhiều chức năng có mục đích chung—hầu hết chức năng này không liên quan trực tiếp đến
các hoạt động của bảng tính—macro có thể là một rủi ro bảo mật nghiêm trọng đối với Office
280Chương 6: Làm mọi việc: Hành động và mệnh lệnh

các ứng dụng. Bằng cách hạn chế nghiêm ngặt chức năng có sẵn cho macro và bằng cách giới hạn số cách người
dùng có thể chạy macro (ví dụ: chỉ bằng cách nhấp vào các nút trên thanh công cụ), bạn có thể đánh đổi sức mạnh
để lấy sự an toàn.

(Lưu ý rằng không phải tất cả các phiên bản Excel đều cho phép macro Visual Basic khi viết bài này.)

Ghi macro Excel

Macro Excel, được viết bằng Visual Basic

Đồ họa thông tin—bao gồm bản đồ, bảng biểu và đồ thị—truyền đạt kiến thức bằng mắt
hơn là bằng lời nói. Khi hoàn thành tốt, họ để mọi người sử dụng đôi mắt và khối óc của
mình để tự rút ra kết luận; họ thể hiện, hơn là nói.

Đây là những loại giao diện yêu thích của tôi. Tuy nhiên, các công cụ kém hoặc thiết kế không phù hợp có
thể hạn chế rất nhiều những gì bạn có thể làm với chúng và nhiều giao diện giàu thông tin không hoạt
động tốt như chúng có thể.

Các mẫu trong chương này sẽ giúp bạn tận dụng tốt nhất các công cụ bạn có, đồng thời giới thiệu cho
bạn một số đổi mới hữu ích và thú vị trong đồ họa thông tin tương tác. Những ý tưởng được mô tả
trong phần giới thiệu này có thể giúp bạn sắp xếp những khía cạnh thiết kế nào là quan trọng nhất
đối với bạn trong một giao diện nhất định.

đồ họa thông tinđơn giản có nghĩa là dữ liệu được trình bày trực quan, với mục tiêu truyền đạt kiến
thức cho người dùng. Tôi bao gồm các bảng và chế độ xem dạng cây trong phần mô tả đó vì chúng
vốn đã trực quan, mặc dù chúng được xây dựng chủ yếu từ văn bản thay vì các đường kẻ và đa giác.
Các đồ họa thông tin tĩnh quen thuộc khác bao gồm bản đồ, sơ đồ, sơ đồ thanh và sơ đồ của các đối
tượng trong thế giới thực.

Nhưng chúng ta đang làm việc với máy tính, không phải giấy. Bạn có thể làm cho hầu hết mọi thiết kế tĩnh
tốt trở nên tốt hơn với tính tương tác. Các công cụ tương tác cho phép người dùng ẩn và hiển thị thông tin
khi họ cần, đồng thời đặt người dùng vào “ghế điều khiển” khi họ chọn cách xem và khám phá thông tin đó.

Ngay cả hành động đơn thuần thao tác và sắp xếp lại dữ liệu trong đồ họa tương tác cũng có giá trị—người
dùng trở thành người tham gia vào quá trình khám phá, chứ không chỉ là người quan sát thụ động. Điều
này có thể là vô giá. Người dùng có thể không tạo ra biểu đồ hoặc bảng được thiết kế tốt nhất thế giới,
nhưng quá trình thao tác với biểu đồ hoặc bảng đó khiến cô ấy đối mặt với các khía cạnh của dữ liệu mà cô
ấy có thể chưa bao giờ nhận thấy trên giấy.
282Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Cuối cùng, mục tiêu của người dùng khi sử dụng đồ họa thông tin là để học một cái gì đó. Nhưng người
thiết kế cần phải hiểuGìngười dùng cần tìm hiểu. Người dùng có thể đang tìm kiếm thứ gì đó rất cụ thể,
chẳng hạn như một con phố cụ thể trên bản đồ, trong trường hợp đó, cô ấy cần có khả năng tìm thấy nó—ví
dụ: bằng cách tìm kiếm trực tiếp hoặc bằng cách lọc thông tin không liên quan. Cô ấy chỉ cần có được một
“bức tranh toàn cảnh” trong phạm vi cần thiết để đạt được điểm dữ liệu cụ thể đó. Khả năng tìm kiếm, lọc và
tập trung vào các chi tiết là rất quan trọng.

Mặt khác, cô ấy có thể đang cố gắng học một cái gì đó ít cụ thể hơn. Cô ấy có thể nhìn vào bản đồ để
nắm bắt sơ đồ của một thành phố hơn là để tìm một địa chỉ cụ thể. Hoặc cô ấy có thể là một nhà khoa
học đang hình dung một quá trình sinh hóa, cố gắng hiểu cách thức hoạt động của nó. Bây giờ tổng
quan là quan trọng; cô ấy cần xem các bộ phận kết nối với nhau như thế nào với tổng thể. Cô ấy có
thể muốn phóng to, thu nhỏ lại, thỉnh thoảng xem chi tiết và so sánh chế độ xem dữ liệu này với chế
độ xem dữ liệu khác.

Đồ họa thông tin tương tác tốt cung cấp cho người dùng câu trả lời cho những câu hỏi sau:

• Dữ liệu này được tổ chức như thế nào?

• Cái gì liên quan đến cái gì?

• Tôi có thể khám phá dữ liệu này như thế nào?

• Tôi có thể sắp xếp lại dữ liệu này để xem nó theo cách khác không?

• Làm cách nào tôi có thể chỉ xem dữ liệu mà tôi cần?

• Các giá trị dữ liệu cụ thể là gì?

Trong các phần này, hãy nhớ rằng thuật ngữđồ họa thông tinlà một chiếc ô rất lớn. Nó bao gồm các
sơ đồ, biểu đồ, bản đồ, bảng biểu, cây cối, mốc thời gian và sơ đồ các loại; dữ liệu có thể lớn và nhiều
lớp, hoặc nhỏ và tập trung. Nhiều kỹ thuật trong số này áp dụng tốt một cách đáng ngạc nhiên cho
các loại hình đồ họa mà bạn không ngờ tới.

Trước khi tự mô tả các mẫu, hãy tạo tiền đề bằng cách nói về một số câu hỏi được
đặt ra trong danh sách trước.

Điều đầu tiên người dùng nhìn thấy trong bất kỳ hình ảnh hóa thông tin nào là hình dạng bạn đã chọn cho
dữ liệu. Lý tưởng nhất là bản thân dữ liệu có cấu trúc cố hữu gợi ý hình dạng này cho bạn. Bảng 7-1 cho
thấy nhiều mô hình tổ chức khác nhau. Cái nào trong số này phù hợp với dữ liệu của bạn nhất?
 Khái niệm cơ bản về đồ họa thông tin283

Mô hình tổ chức
Người mẫu Biểu đồ đồ họa phổ biến

tuyến tính Danh sách, cốt truyện đơn biến

dạng bảng Bảng tính, danh sách nhiều cột,Bảng có thể sắp xếp,
Bảng xuyên tâm,Đồ thị đa Y, các ô đa biến khác

Thứ bậc Cây,Xếp tầng danh sách,Bàn cây,sơ đồ cây,Bảng xuyên

tâm, đồ thị có hướng
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Mạng kết nối Đồ thị có hướng, lưu đồ,Bảng xuyên tâm

Địa lý (hoặc không gian) Bản đồ, sơ đồ, biểu đồ phân tán

văn bản Đám mây từ, đồ thị có hướng

Khác Các loại đồ thị khác nhau, chẳng hạn như đồ thị tọa độ song song, sơ

đồ cây, vân vân.

Hãy thử những điều này dựa trên dữ liệu bạn đang cố gắng hiển thị. Nếu hai hoặc nhiều hơn có thể phù hợp, hãy xem xét
cái nào phát huy khía cạnh nào của dữ liệu của bạn. Ví dụ: nếu dữ liệu của bạn có thể ở cả dạng địa lý và dạng bảng, thì
việc chỉ hiển thị dữ liệu dưới dạng bảng có thể che khuất bản chất địa lý của nó—người xem có thể bỏ lỡ các tính năng
hoặc mối quan hệ thú vị trong dữ liệu nếu dữ liệu đó cũng không được hiển thị dưới dạng bản đồ.

Mô hình tổ chức bạn chọn cho người dùng biết rất nhiều về hình dạng của dữ liệu. Một phần của
thông điệp này hoạt động ở cấp độ tiềm thức; mọi người nhận ra cây, bảng và bản đồ và họ
ngay lập tức đưa ra một số giả định về dữ liệu cơ bản trước khi họ bắt đầu suy nghĩ một cách có
ý thức về nó. Nhưng nó không chỉ là hình dạng mà làm điều này. Giao diện của các yếu tố dữ liệu
riêng lẻ cũng hoạt động ở cấp độ tiềm thức trong tâm trí người dùng: những thứ trông giống
nhau phải được liên kết với nhau.

Nếu bạn đã đọc Chương 4, điều đó nghe có vẻ quen thuộc—bạn đã biết về các nguyên tắc
Gestalt. (Nếu bạn đọc trước cuốn sách, đây có thể là thời điểm tốt để quay lại và đọc phần giới
thiệu của Chương 4.) Hầu hết các nguyên tắc đó, đặc biệt làsự giống nhauVà liên tục,cũng sẽ đi
vào chơi ở đây. Tôi sẽ cho bạn biết thêm một chút về cách chúng hoạt động.
284Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Một số tính năng trực quan hoạt độnggiả vờ:chúng truyền đạt thông tin trước khi người xem
chú ý có ý thức. Hãy nhìn vào Hình 7-1 và tìm các đối tượng màu xanh lam.

Tìm các đối tượng màu xanh

Tôi đoán rằng bạn có thể làm điều đó khá nhanh. Bây giờ hãy nhìn vào Hình 7-2 và làm tương tự.

Tìm lại các đồ vật màu xanh

Bạn đã làm điều đó khá nhanh, phải không? Trên thực tế, có bao nhiêu vật thể màu đỏ không quan
trọng; lượng thời gian bạn cần để tìm những cái màu xanh là không đổi! Bạn có thể nghĩ rằng nó phải
tuyến tính với tổng số đối tượng—thứ tự-Nthời gian, về mặt thuật toánnhưng không phải vậy. Màu
sắc hoạt động ở cấp độ nhận thức nguyên thủy. Hệ thống thị giác của bạn làm công việc khó khăn cho
bạn và dường như nó hoạt động theo kiểu “song song ồ ạt”.

Mặt khác, văn bản đơn điệu trực quan buộc bạn phải đọc các giá trị và suy nghĩ về chúng.
Hình 7-3 hiển thị chính xác cùng một vấn đề với các con số thay vì màu sắc. Làm thế nào
nhanh chóng bạn có thể tìm thấy những con số lớn hơn một?
 Khái niệm cơ bản về đồ họa thông tin285

Tìm các giá trị lớn hơn một

Khi xử lý văn bản như thế này, “thời gian tìm kiếm” của bạn thực sự tuyến tính với số lượng mục.
Nhưng điều gì sẽ xảy ra nếu chúng ta vẫn sử dụng văn bản, nhưng làm cho các số mục tiêu lớn hơn
các số khác, như trong Hình 7-4?

Tìm lại các giá trị lớn hơn một

Bây giờ chúng ta trở lại thời gian cố định một lần nữa. Trên thực tế, kích thước là
một biến cố định trước khác. Thực tế là các số lớn hơn nhô vào lề bên phải của
chúng cũng giúp bạn tìm thấy chúng.
Hình 7-5 cho thấy nhiều biến cố chú ý đã biết.
286Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Màu sắc Vị trí và căn chỉnh

độ sáng màu Định hướng

Độ bão hòa màu Kích cỡ

Kết cấu Hình dạng

Tám biến sở hữu

Khái niệm này có ý nghĩa sâu sắc đối với đồ họa thông tin dựa trên văn bản, giống như bảng số được
hiển thị trước đó trong Hình 7-3. Nếu bạn muốn một số điểm dữ liệu nổi bật so với những điểm khác,
bạn phải làm cho chúng trông khác biệt bằng cách thay đổi màu sắc, kích thước hoặc một số biến cố
định khác. Tổng quát hơn, bạn có thể sử dụng các biến này để phân biệt các lớp hoặc kích thước dữ
liệu trên bất kỳ loại đồ họa thông tin nào. Điều này đôi khi được gọi làmã hóa.

Khi bạn phải vẽ một tập dữ liệu đa chiều, bạn có thể sử dụng một số biến trực quan khác nhau
để mã hóa tất cả các chiều đó trong một màn hình tĩnh duy nhất. Xem xét đồ thị phân tán trong
Hình 7-6. Vị trí được sử dụng dọc theo trục x và y; màu sắc mã hóa một biến thứ ba. Hình dạng
của các điểm đánh dấu phân tán có thể mã hóa biến thứ tư, nhưng trong trường hợp này, hình
dạng là dư thừa với màu sắc. Mã hóa dự phòng giúp người dùng phân tách ba nhóm dữ liệu một
cách trực quan.

Tất cả điều này có liên quan đến một khái niệm thiết kế đồ họa chung được gọi làxếp lớp.Khi bạn nhìn vào
đồ họa được thiết kế tốt thuộc bất kỳ loại nào, bạn sẽ cảm nhận được các loại thông tin khác nhau trên
trang. Các yếu tố ưu tiên chẳng hạn như màu sắc khiến một số trong số chúng “bật” ra khỏi trang và sự
giống nhau khiến bạn thấy những yếu tố đó được kết nối với nhau, như thể mỗi yếu tố nằm trên một lớp
trong suốt trên hình ảnh cơ sở. Đó là một cách cực kỳ hiệu quả để phân đoạn dữ liệu—từng lớp đơn giản
hơn so với toàn bộ đồ họa và người xem có thể nghiên cứu lần lượt từng lớp, nhưng các mối quan hệ giữa
toàn bộ được giữ nguyên và nhấn mạnh.
 Khái niệm cơ bản về đồ họa thông tin287

Mã hóa ba biến trong biểu đồ phân tán

Cuộc điều tra đầu tiên của người dùng về đồ họa dữ liệu tương tác có thể đang duyệt—chỉ cần nhìn
xung quanh để xem có gì ở đó. Anh ấy cũng có thể điều hướng qua nó để tìm một số thứ cụ thể mà
anh ấy đang tìm kiếm. Lọc và tìm kiếm cũng có thể phục vụ mục đích đó, nhưng điều hướng qua
“không gian ảo” của tập dữ liệu thường tốt hơn.Bộ nhớ không gian(Chương 1) bắt đầu và người dùng có
thể thấy các điểm ưa thích trong ngữ cảnh với phần còn lại của dữ liệu.

Có một câu thần chú nổi tiếng trong lĩnh vực trực quan hóa thông tin: “Tập trung cộng với ngữ cảnh”. Một
hình ảnh trực quan tốt sẽ cho phép người dùng tập trung vào một điểm ưa thích, đồng thời hiển thị đủ nội
dung xung quanh điểm ưa thích đó để mang lại cho người dùng cảm giác về vị trí của nó trong bức tranh
lớn.

Dưới đây là một số kỹ thuật phổ biến để điều hướng và duyệt:

Cuộn và xoay
Nếu toàn bộ màn hình dữ liệu không vừa với màn hình cùng một lúc, bạn có thể đặt nó trong một cửa
sổ cuộn, giúp người dùng truy cập dễ dàng và quen thuộc vào các phần ngoài màn hình. Thanh cuộn
quen thuộc với hầu hết mọi người và rất dễ sử dụng. Tuy nhiên, một số màn hình quá lớn hoặc kích
thước của chúng không xác định (do đó làm cho thanh cuộn không chính xác) hoặc chúng có dữ liệu
ngoài cửa sổ hiển thị cần được truy xuất hoặc tính toán lại (do đó làm cho thanh cuộn phản hồi quá
chậm). Thay vì sử dụng thanh cuộn trong những trường hợp đó, hãy thử đặt
288Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

lên các nút mà người dùng phải nhấp để truy xuất màn hình dữ liệu tiếp theo. Thay vào đó,
các ứng dụng khác thực hiện thao tác xoay, trong đó đồ họa thông tin được con trỏ "tóm
lấy" và kéo cho đến khi tìm thấy điểm ưa thích, như trong Google Maps.

Chúng phù hợp với các tình huống khác nhau, nhưng ý tưởng cơ bản là giống nhau: để di chuyển phần nhìn
thấy được của đồ họa một cách tương tác. Thỉnh thoảngTổng quan Cộng với Chi tiếtcó thể giúp người dùng luôn
định hướng. Một khung nhìn nhỏ của toàn bộ đồ họa có thể được hiển thị với một hình chữ nhật chỉ báo hiển
thị “khung nhìn” có thể nhìn thấy được; người dùng có thể xoay bằng cách kéo hình chữ nhật đó, ngoài việc
sử dụng thanh cuộn hoặc bất kỳ cách nào khác thì đã xong.

Phóng
Thu phóng thay đổitỉ lệcủa phần đang được xem, trong khi thao tác cuộn sẽ thay đổi vị trí. Khi
bạn trình bày một bản đồ hoặc biểu đồ dày đặc dữ liệu, hãy cân nhắc cung cấp cho người dùng
khả năng phóng to các điểm ưa thích. Điều đó có nghĩa là bạn không phải đóng gói mọi chi tiết
dữ liệu đơn lẻ vào chế độ xem đầy đủ—nếu bạn có nhiều nhãn hoặc các tính năng rất nhỏ (đặc
biệt là trên bản đồ), thì điều đó có thể là không thể. Khi người dùng phóng to, các tính năng đó
có thể xuất hiện khi có đủ dung lượng.

Hầu hết các tính năng thu phóng được kích hoạt bằng một lần nhấp chuột hoặc nhấn nút và
toàn bộ khu vực xem sẽ thay đổi tỷ lệ cùng một lúc. Nhưng đó không phải là cách duy nhất để
phóng to. Một số ứng dụng tạo ra các biến dạng phi tuyến tính của đồ họa thông tin khi người
dùng di chuyển con trỏ chuột qua đồ họa: bất kỳ thứ gì bên dưới con trỏ đều được phóng to,
nhưng những thứ ở xa con trỏ vẫn giữ nguyên tỷ lệ. xemThu phóng cục bộmẫu để biết thêm thông
tin.

Mở và đóng các điểm quan tâm

Chế độ xem dạng cây thường cho phép người dùng mở và đóng các mục chính theo ý muốn, vì vậy họ
có thể kiểm tra nội dung của các mục đó. Một số sơ đồ và đồ thị có cấu trúc phân cấp cũng cung cấp
cho người dùng cơ hội mở và đóng các phần của sơ đồ “tại chỗ” mà không cần phải mở một cửa sổ
mới hoặc chuyển đến một màn hình mới. Với các cơ chế này, người dùng có thể khám phá các mối
quan hệ ngăn chặn hoặc cha/con một cách dễ dàng mà không cần rời khỏi cửa sổ đó. CácXếp tầng danh
sáchmẫu (Chương 5) mô tả một cách hiệu quả khác để khám phá hệ thống phân cấp; nó hoạt động
hoàn toàn khi mở và đóng các mục bằng một cú nhấp chuột.

Đi sâu vào các điểm quan tâm

Một số đồ họa thông tin chỉ trình bày một "mức cao nhất" của thông tin. Người dùng có thể nhấp
hoặc nhấp đúp vào bản đồ để xem thông tin về thành phố mà cô ấy vừa nhấp vào hoặc cô ấy có
thể nhấp vào các điểm chính trong sơ đồ để xem các biểu đồ con. Việc "đi sâu vào" này có thể sử
dụng lại cùng một cửa sổ, sử dụng một bảng điều khiển riêng trên cùng một cửa sổ hoặc hiển
thị một cửa sổ mới. Kỹ thuật này tương tự như mở và đóng các điểm ưa thích, ngoại trừ việc xem
diễn ra tách biệt với đồ họa và không được tích hợp vào nó.

Nếu bạn cũng cung cấp phương tiện tìm kiếm cho đồ họa thông tin tương tác, hãy cân nhắc việc liên
kết kết quả tìm kiếm với bất kỳ kỹ thuật nào đã nói ở trên đang được sử dụng. Nói cách khác, khi
người dùng tìm kiếm thành phố Sydney trên bản đồ, hãy hiển thị bản đồ phóng to và/hoặc xoay đến
điểm đó. Do đó, người dùng tìm kiếm nhận được một số lợi ích của bộ nhớ ngữ cảnh và không gian.
 Khái niệm cơ bản về đồ họa thông tin289

Đôi khi chỉ cần sắp xếp lại một hình ảnh thông tin có thể tiết lộ các mối quan hệ bất
ngờ. Hãy xem Hình 7-7, lấy từ biểu đồ tử vong trực tuyến của Viện Ung thư Quốc gia.
Nó cho thấy số người chết vì ung thư phổi ở bang Texas. Các vùng đô thị lớn ở Texas
được sắp xếp theo thứ tự bảng chữ cái—không phải là thứ tự mặc định không hợp lý
nếu bạn định tra cứu các thành phố cụ thể, nhưng như đã trình bày, dữ liệu không
khiến bạn đặt ra nhiều câu hỏi thú vị. Chẳng hạn, không rõ tại sao Abilene, Alice,
Amarillo và Austin đều có số giống nhau; nó có thể chỉ là cơ hội.

Dữ liệu ung thư theo thành phố, được sắp xếp theo thứ tự bảng chữ cái

Nhưng biểu đồ này cho phép bạn sắp xếp lại dữ liệu theo thứ tự giảm dần về số lượng, như trong
Hình 7-8. Đột nhiên đồ thị trở nên thú vị hơn nhiều. Galveston được xếp hạng đầu tiên, tại sao lại như
vậy, khi người hàng xóm của nó, Houston, bị tụt hạng xa hơn? Galveston có gì đặc biệt? (Được rồi, bạn
cần biết điều gì đó về địa lý Texas để đặt những câu hỏi này, nhưng bạn hiểu ý tôi rồi.) Tương tự như
vậy, tại sao lại có sự khác biệt giữa hai nước láng giềng Dallas và Fort Worth? Và rõ ràng là các thành
phố El Paso, Brownsville và Laredo ở phía nam giáp Mexico có ít bệnh ung thư phổi hơn so với phần
còn lại của Texas; tại sao có thể như vậy? Bạn không thể trả lời những câu hỏi này với bộ dữ liệu này,
nhưng ít nhất bạn có thể hỏi chúng.
290Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Cùng một biểu đồ, được sắp xếp theo số

Những người có thể tương tác với đồ họa dữ liệu theo cách này có nhiều cơ hội hơn để học hỏi từ đồ
họa. Sắp xếp và sắp xếp lại đặt các điểm dữ liệu khác nhau cạnh nhau, do đó cho phép người dùng
thực hiện các kiểu so sánh khác nhau—việc so sánh các lân cận dễ dàng hơn nhiều so với các điểm
phân tán rộng rãi. Và người dùng có xu hướng tập trung vào các điểm cực hạn của thang đo, như tôi
đã làm trong ví dụ trước.

Làm thế nào khác bạn có thể áp dụng khái niệm này? CácBảng có thể sắp xếpmẫu nói về một cách
rõ ràng: khi bạn có một bảng nhiều cột, người dùng có thể muốn sắp xếp các hàng theo lựa
chọn cột của họ. Mô hình này là khá phổ biến. (Nhiều triển khai bảng cũng cho phép tự sắp xếp
lại các cột bằng cách kéo.) Cây có thể cho phép sắp xếp lại thứ tự các nút con của chúng. Sơ đồ
và đồ thị được kết nối có thể cho phép định vị lại không gian các phần tử của chúng, trong khi
vẫn giữ được kết nối của chúng. Sử dụng trí tưởng tượng của bạn!

Xem xét các phương pháp phân loại và sắp xếp lại:

• Theo bảng chữ cái

• Bằng số
• Theo ngày hoặc giờ

• Theo vị trí thực tế

• Theo danh mục hoặc thẻ

• Theo mức độ phổ biến—được sử dụng nhiều so với ít sử dụng

 Khái niệm cơ bản về đồ họa thông tin291

• Sắp xếp do người dùng thiết kế

• Hoàn toàn ngẫu nhiên (bạn không bao giờ biết những gì bạn có thể nhìn thấy)

Để có một ví dụ tinh tế, hãy xem Hình 7-9. Biểu đồ thanh hiển thị nhiều giá trị dữ liệu trên mỗi
thanh (được gọi làxếp chồng lên nhaubiểu đồ thanh) cũng có thể được sắp xếp lại—các đoạn
thanh gần đường cơ sở nhất là dễ đánh giá và so sánh nhất, vì vậy bạn có thể muốn cho phép
người dùng xác định biến nào nằm cạnh đường cơ sở.

Biến màu xanh nhạt trong ví dụ này có thể có cùng chiều cao từ thanh này sang thanh khác. Liệu nó khác nhau, và
làm thế nào? Những thanh màu xanh nhạt nào cao nhất? Bạn thực sự không thể biết cho đến khi bạn di chuyển
chuỗi dữ liệu đó đến đường cơ sở—sự biến đổi đó tạo thành các đường cơ sở của tất cả các hình chữ nhật màu
xanh lam đó. Giờ đây, việc so sánh trực quan trở nên dễ dàng: thanh 6 và 12 màu xanh nhạt là cao nhất và biến thể
có vẻ tương quan lỏng lẻo với chiều cao tổng thể của thanh.

Sắp xếp lại biểu đồ thanh xếp chồng lên nhau

Đôi khi bạn không muốn xem toàn bộ tập dữ liệu cùng một lúc. Bạn có thể bắt đầu với toàn bộ
và thu hẹp nó thành những gì bạn cần—lọc—hoặc bạn có thể xây dựng một tập hợp con dữ liệu
thông qua tìm kiếm hoặc truy vấn. Hầu hết người dùng thậm chí sẽ không phân biệt giữa lọc và
truy vấn (mặc dù có sự khác biệt lớn so với quan điểm của cơ sở dữ liệu). Mục đích của người
dùng là như nhau: tập trung vào bất kỳ phần nào của dữ liệu được quan tâm và loại bỏ phần còn
lại.

Các kỹ thuật truy vấn và lọc đơn giản nhất cung cấp cho người dùng lựa chọn xem khía cạnh nào của dữ
liệu. Các hộp kiểm và các điều khiển bằng một cú nhấp chuột khác sẽ bật và tắt các phần của đồ họa tương
tác. Một bảng có thể hiển thị một số cột chứ không phải các cột khác, theo lựa chọn của người dùng; bản đồ
có thể chỉ hiển thị các điểm ưa thích (ví dụ: nhà hàng) do người dùng chọn. CácTruy vấn độngmẫu, có thể
mang lại sự tương tác rất phong phú, là phần mở rộng hợp lý của các điều khiển bộ lọc đơn giản như các
điều khiển này.

Đôi khi, chỉ cần làm nổi bật một tập hợp con của dữ liệu, thay vì ẩn hoặc xóa phần còn lại, là đủ. Bằng cách
đó, người dùng có thể thấy tập hợp con đó trong ngữ cảnh với phần còn lại của dữ liệu. Về mặt tương tác,
bạn có thể thực hiện việc này bằng các điều khiển đơn giản, như đã mô tả trước đó. CácQuét dữ liệu
mẫu mô tả một biến thể của đánh dấu dữ liệu; nó làm nổi bật cùng một dữ liệu trong một số đồ họa
dữ liệu cùng một lúc.
292Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Nhìn vào Hình 7-10. Bản đồ đường trượt tuyết tương tác này có thể hiển thị bốn loại đường mòn, được mã hóa
bằng ký hiệu, cộng với các tính năng khác như thang máy trượt tuyết và nhà nghỉ bằng gỗ. Khi mọi thứ được “bật”
lên cùng một lúc, nó đông đúc đến mức khó đọc được gì! Nhưng người dùng có thể nhấp vào các ký hiệu đường
mòn, như được hiển thị, để bật và tắt các “lớp” dữ liệu. Ảnh chụp màn hình bên trái không hiển thị đường mòn
được đánh dấu; cái bên phải chuyển sang đường mòn được xếp hạng kim cương đen chỉ bằng một cú nhấp chuột.

Bản đồ trượt tuyết tương tác

Các cơ chế tìm kiếm rất khác nhau giữa các loại đồ họa này với loại đồ họa khác. Tất nhiên, một cái bàn hoặc
cái cây phải cho phép tìm kiếm văn bản; một bản đồ sẽ cung cấp các tìm kiếm về địa chỉ và các vị trí thực tế
khác; biểu đồ và sơ đồ số có thể cho phép người dùng tìm kiếm các giá trị hoặc phạm vi giá trị dữ liệu cụ
thể. Người dùng của bạn quan tâm đến việc tìm kiếm trên cái gì?

Khi quá trình tìm kiếm hoàn tất và thu được kết quả, bạn có thể thiết lập giao diện để hiển
thị kết quả theo ngữ cảnh, trên đồ họa—ví dụ: bạn có thể cuộn bảng hoặc bản đồ sao cho
mục được tìm kiếm nằm ở giữa khung nhìn. Xem kết quả trong ngữ cảnh với phần còn lại
của dữ liệu giúp người dùng hiểu kết quả tốt hơn. CácChuyển đến Mụctrong Chương 5 là một
cách phổ biến để tìm kiếm và cuộn trong một bước.

Các giao diện lọc và truy vấn tốt nhất là:

Tương tác cao
Họ phản hồi nhanh nhất có thể với việc tìm kiếm và lọc của người dùng. (Tuy nhiên, đừng phản ứng
với các lần nhấn phím riêng lẻ nếu nó làm chậm đáng kể quá trình gõ của người dùng.)
 Khái niệm cơ bản về đồ họa thông tin293

lặp đi lặp lại

Chúng cho phép người dùng tinh chỉnh tìm kiếm, truy vấn hoặc bộ lọc cho đến khi cô ấy nhận được kết quả mong
muốn. Họ cũng có thể kết hợp các thao tác này: người dùng có thể thực hiện tìm kiếm, nhận được một màn hình
đầy kết quả và sau đó lọc các kết quả đó theo những gì cô ấy muốn.

theo ngữ cảnh

Chúng hiển thị kết quả theo ngữ cảnh với dữ liệu xung quanh, để giúp người dùng dễ dàng hiểu vị trí
của họ trong không gian dữ liệu. Điều này cũng đúng với các loại tìm kiếm khác, khi nó xảy ra; chẳng
hạn, các phương tiện tìm kiếm văn bản tốt nhất hiển thị các cụm từ tìm kiếm được nhúng trong các
câu.

Tổ hợp
Chúng không chỉ đơn giản là bật và tắt toàn bộ bộ dữ liệu và cho phép người dùng chỉ định các
kết hợp sắc thái của các điều kiện để hiển thị dữ liệu. Chẳng hạn, đồ họa thông tin này có thể
hiển thị cho tôi tất cả các mục mà các điều kiện X, Y và Z là đúng, nhưng A và B là sai, trong phạm
vi thời gian M–N không? Sự phức tạp như vậy cho phép người dùng kiểm tra các giả thuyết về dữ
liệu và khám phá tập dữ liệu theo những cách sáng tạo.

Một số kỹ thuật phổ biến giúp người xem nhận được các giá trị cụ thể từ đồ họa thông tin.
Biết đối tượng của bạn—nếu họ chỉ quan tâm đến việc hiểu dữ liệu định tính, thì bạn không
cần phải dành nhiều thời gian hoặc pixel để gắn nhãn cho mọi thứ nhỏ nhặt. Nhưng một số
số hoặc văn bản thực tế thường là cần thiết.

Vì tất cả các kỹ thuật này đều liên quan đến văn bản, đừng quên các nguyên tắc thiết kế đồ họa giúp
văn bản trông đẹp mắt: phông chữ dễ đọc, cỡ chữ phù hợp (không quá to, không quá nhỏ), phân tách
hình ảnh phù hợp giữa các mục văn bản không liên quan, căn chỉnh các mục liên quan , không có hộp
có viền dày và không có dữ liệu bị che khuất không cần thiết.

nhãn
Nhiều đồ họa thông tin đặt nhãn trực tiếp trên đồ họa, chẳng hạn như tên thị trấn trên bản đồ.
Nhãn cũng có thể xác định giá trị của các ký hiệu trên biểu đồ phân tán, thanh trên biểu đồ
thanh và những thứ khác thường có thể buộc người dùng phụ thuộc vào trục hoặc chú giải.
Nhãn dễ sử dụng hơn. Chúng truyền đạt các giá trị dữ liệu một cách chính xác và rõ ràng (khi
được đặt chính xác) và chúng nằm trong hoặc bên cạnh điểm dữ liệu quan tâm—không phải di
chuyển qua lại giữa điểm dữ liệu và chú giải. Nhược điểm là chúng làm lộn xộn đồ họa khi sử
dụng quá mức, vì vậy hãy cẩn thận.

truyền thuyết

Khi bạn sử dụng màu sắc, kết cấu, kiểu đường kẻ, ký hiệu hoặc kích thước trên đồ họa
thông tin để biểu thị giá trị (hoặc danh mục hoặc phạm vi giá trị), chú giải sẽ hiển thị cho
người dùng cái gì biểu thị cái gì. Bạn nên đặt chú giải trên cùng một trang với chính đồ họa
để mắt người dùng không cần phải di chuyển xa giữa dữ liệu và chú giải.
294Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Rìu, thước kẻ, tỷ lệ và mốc thời gian

Bất cứ khi nào vị trí đại diện cho dữ liệu, giống như trên sơ đồ và bản đồ (nhưng không phải trên
hầu hết các sơ đồ), chúng sẽ cho người dùng biết những giá trị mà các vị trí đó đại diện. Chúng là
các đường hoặc đường cong tham chiếu trên đó các giá trị tham chiếu được đánh dấu. Người
dùng phải vẽ một đường tưởng tượng từ điểm quan tâm đến trục và có thể nội suy để tìm đúng
số. Đây là gánh nặng đối với người dùng hơn là ghi nhãn trực tiếp. Nhưng việc ghi nhãn sẽ làm
lộn xộn mọi thứ khi dữ liệu dày đặc và nhiều người dùng không cần lấy các giá trị chính xác từ đồ
họa; họ chỉ muốn có một cảm nhận tổng quát hơn về các giá trị liên quan. Đối với những tình
huống đó, trục là phù hợp.

chú giải dữ liệu

Chương này mô tả cácchú giải dữ liệumẫu. Datatips, là mẹo công cụ hiển thị giá trị dữ
liệu khi người dùng di chuột qua một điểm ưa thích, có lợi thế về khoảng cách vật lý
của nhãn mà không bị lộn xộn. Tuy nhiên, chúng chỉ hoạt động trong đồ họa tương
tác.

Tiêu điểm dữ liệu

Giốngchú giải dữ liệu, một tiêu điểm dữ liệu làm nổi bật dữ liệu khi người dùng di chuột qua một
điểm ưa thích. Nhưng thay vì hiển thị giá trị của điểm cụ thể, nó hiển thị một “lát” dữ liệu trong
ngữ cảnh với phần còn lại của đồ họa thông tin, thường bằng cách làm mờ phần còn lại của dữ
liệu. xemTiêu điểm dữ liệumẫu.

chải dữ liệu
Một kỹ thuật gọi làquét dữ liệucho phép người dùng chọn một tập hợp con dữ liệu trong đồ họa
thông tin và xem dữ liệu đó phù hợp như thế nào với các ngữ cảnh khác. Bạn sử dụng điều này
với hai hoặc nhiều đồ họa thông tin; chẳng hạn, việc chọn một số giá trị ngoại lệ trong biểu đồ
phân tán sẽ làm nổi bật các điểm dữ liệu đó trong một bảng hiển thị cùng một dữ liệu. Để biết
thêm thông tin, hãy xemQuét dữ liệumẫu trong chương này.

Vì cuốn sách này nói về phần mềm tương tác nên hầu hết các mẫu này mô tả các cách
tương tác với dữ liệu: di chuyển qua dữ liệu; sắp xếp, chọn, chèn hoặc thay đổi các mục; và
thăm dò các giá trị hoặc tập hợp giá trị cụ thể. Một vài trong số chúng chỉ xử lý đồ họa tĩnh:
các nhà thiết kế thông tin đã biết vềĐồ thị đa YVàbội số nhỏtrong một thời gian, nhưng chúng
dịch tốt sang thế giới phần mềm.
 các mẫu295

Và đừng quên các mẫu ở những nơi khác trong cuốn sách này. Từ Chương 2, nhớ lạiChế độ xem
thay thế, có thể giúp bạn cấu trúc đồ họa tương tác. Chương 3 ưu đãiThanh cuộn được chú thíchVà
chuyển đổi hoạt hình, giúp người dùng luôn được định hướng trong không gian dữ liệu lớn và
phức tạp. Nếu đồ họa của bạn là một bảng, bạn cũng có thể sử dụng một số mẫu trong
Chương 5, chẳng hạn nhưsọc hàng,bảng chữ cái cuộn, VàChuyển đến Mục.

Nhóm mẫu đầu tiên có thể được áp dụng cho hầu hết các loại đồ họa tương tác, bất kể cấu trúc
cơ bản của dữ liệu. (Một số khó học và khó sử dụng hơn những cái khác, vì vậy đừng ném chúng
vào mọi đồ họa dữ liệu mà bạn tạo—Quét dữ liệuVàThu phóng cục bộđặc biệt, là “công cụ quyền
lực”, tốt nhất cho người dùng máy tính tinh vi.) Sáu công cụ tương tác này cho phép người dùng
tập trungtrên các phần nhất định của tập dữ liệu trong khi vẫn duy trìbối cảnh của toàn bộ đồ
họa.

1.Tổng quan Cộng với Chi tiết

2.chú giải dữ liệu

3.Tiêu điểm dữ liệu

4.Truy vấn động

5.Quét dữ liệu
6.Thu phóng cục bộ

Các mẫu còn lại là các cách để xây dựng đồ họa dữ liệu phức tạp cho dữ liệu đa chiều—
dữ liệu có nhiều thuộc tính hoặc biến. Chúng khuyến khích người dùng đặt các loại câu
hỏi khác nhau về dữ liệu và thực hiện các loại so sánh khác nhau giữa các yếu tố dữ
liệu.
7.Bảng có thể sắp xếp

số 8.Bảng xuyên tâm

9.Đồ thị đa Y
10.bội số nhỏ
11.sơ đồ cây
296Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Sơ đồ cộng đồng Perl (http://labs.linkfluence.net/fpw09/map/)

Đặt tổng quan về đồ họa bên cạnh “chế độ xem chi tiết” được phóng to. Khi người dùng kéo một khung
nhìn xung quanh tổng quan, hãy hiển thị phần đồ họa đó trong chế độ xem chi tiết.

Bạn đang hiển thị một tập dữ liệu lớn trong một đồ họa thông tin lớn—đặc biệt là một hình ảnh
hoặc bản đồ. Bạn muốn người dùng tập trung vào “bức tranh lớn”, nhưng bạn cũng muốn họ
thu nhỏ các chi tiết nhỏ. Người dùng sẽ duyệt qua dữ liệu, kiểm tra các khu vực nhỏ hoặc tìm
kiếm các điểm ưa thích. Tổng quan cấp cao là cần thiết để tìm những điểm ưa thích đó, nhưng
người dùng không cần xem tất cả chi tiết có sẵn cho tất cả các điểm dữ liệu cùng một lúc—
phóng to một phần nhỏ là đủ để có được chi tiết tốt.

Đó là một cách lâu đời để xử lý sự phức tạp: trình bày chế độ xem cấp cao về những gì đang diễn ra và cho
phép người dùng phóng to từ chế độ xem đó vào các chi tiết khi họ cần, giữ cho cả hai cấp hiển thị trên
cùng một trang để lặp lại nhanh chóng.

Edward Tufte sử dụng các thuật ngữđọc vi môVàđọc vĩ môđể mô tả một khái niệm tương tự
cho bản đồ in, sơ đồ và đồ họa thông tin tĩnh khác. Người dùng luôn có cấu trúc lớn trước
mặt, đồng thời có thể xem xét các chi tiết nhỏ theo ý muốn: “Tốc độ hình dung được cô
đọng, chậm lại và được cá nhân hóa.” Tương tự, người dùng củaTổng quan Cộng với Chi tiếtcó
thể cuộn nội dung một cách có phương pháp, nhảy xung quanh, so sánh, đối chiếu, di
chuyển nhanh hoặc di chuyển chậm.

Cuối cùng, phần tổng quan có thể đóng vai trò là dấu hiệu “Bạn đang ở đây”. Một người dùng có thể biết ngay vị trí
của mình trong bối cảnh của toàn bộ tập dữ liệu bằng cách tìm kiếm chế độ xem trên phần tổng quan.
 các mẫu297

Hiển thị tổng quan về tập dữ liệu mọi lúc. Nó có thể là một bảng điều khiển bên trong, như
trong ví dụ ở đầu mẫu (xem Hình 7-11 ở đầu mẫu). Nó cũng có thể là một bảng điều khiển bên
cạnh chế độ xem chi tiết hoặc thậm chí là một cửa sổ khác, trong trường hợp ứng dụng đa cửa
sổ như Photoshop.

Trên tổng quan đó, đặt một khung nhìn. Chúng thường là các hộp màu đỏ theo quy ước, nhưng chúng không nhất
thiết phải như vậy—chúng chỉ cần được nhìn thấy trong nháy mắt, vì vậy hãy xem xét các màu khác được sử dụng
trong bảng tổng quan. Nếu đồ họa thường tối, hãy làm cho nó sáng; nếu đồ họa sáng, hãy làm cho nó tối. Làm cho
khung nhìn có thể kéo được bằng con trỏ để người dùng có thể lấy và trượt nó xung quanh phần tổng quan.

Chế độ xem chi tiết hiển thị “hình chiếu” được phóng to của những gì bên trong khung nhìn. Cả
hai nên được đồng bộ hóa. Nếu chế độ xem di chuyển, chế độ xem chi tiết sẽ thay đổi tương
ứng; nếu khung nhìn được làm nhỏ hơn, độ phóng đại sẽ tăng lên. Tương tự như vậy, nếu chế
độ xem chi tiết có thanh cuộn hoặc một số khả năng xoay khác, chế độ xem sẽ di chuyển cùng
với nó. Phản hồi của cái này với cái kia phải ngay lập tức, trong vòng một phần mười giây (thời
gian phản hồi tiêu chuẩn cho thao tác trực tiếp).

Photoshop đặt canvas hình ảnh ("chế độ xem chi tiết") ở bên trái và tổng quan ở bên phải.
Cửa sổ Bộ điều hướng hiển thị toàn bộ hình ảnh, với hộp màu đỏ hiển thị kích thước và vị trí
cuộn của cửa sổ canvas của hình ảnh (xem Hình 7-12).

photoshop
298Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Google Finance sử dụng bảng tổng quan tương tác để cho phép người dùng điều chỉnh khoảng thời
gian hiển thị trên biểu đồ. Lưu ý các tay nắm ở các cạnh của khung nhìn và các nhãn năm cho người
dùng biết thang thời gian mà tổng quan sử dụng (xem Hình 7-13).

tài chính Google

CácThời báo New Yorkcũng sử dụng dòng thời gian để thúc đẩy đồ họa thông tin về thay đổi môi trường
(xem Hình 7-14). Người dùng chọn các sự kiện trên dòng thời gian để xem thông tin chi tiết về chúng. MỘT
Kim tự thápmẫu điều hướng cũng hoạt động ở đây: người dùng có thể chuyển sang mục tiếp theo bằng cách
nhấp vào nút Tiếp theo ở phía trên bên phải.

Tính năng tương tác của New York Times (http://www.nytimes.com/interactive/2010/04/22/

khoa học/trái đất/20100422_environment_timeline.html)
 các mẫu299

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,226,17,0,0,247

http://quince.infragistics.com/Patterns/Overview%20Plus%20Detail.aspx

Có thể tìm thấy khái niệm rộng về “tổng quan và chi tiết” trong nhiều cuốn sách về trực quan hóa
thông tin, bao gồm cả những cuốn của Edward Tufte, đã đề cập trước đó.

Bản đồ trực tiếp Cuộc phiêu lưu của SPOT

Khi con chuột lăn qua một điểm ưa thích trên đồ họa, hãy đặt các giá trị dữ liệu cho điểm đó vào một
mẹo công cụ hoặc một số cửa sổ nổi khác.

Bạn đang hiển thị tổng quan về tập dữ liệu, ở hầu hết mọi dạng. Nhiều dữ liệu hơn được “ẩn đằng sau” các
điểm cụ thể trên đồ họa đó, chẳng hạn như tên đường phố trên bản đồ hoặc giá trị của các thanh trong
biểu đồ thanh. Người dùng có thể “chỉ vào” các địa điểm yêu thích bằng con trỏ chuột hoặc màn hình cảm
ứng.
300Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Nhìn vào các giá trị dữ liệu cụ thể là một nhiệm vụ phổ biến trong đồ họa giàu dữ liệu. Người dùng sẽ muốn
phần tổng quan, nhưng họ cũng có thể tìm kiếm các sự kiện cụ thể không có trong phần tổng quan.
chú giải dữ liệucho phép bạn trình bày các khối dữ liệu phụ thuộc vào ngữ cảnh, được nhắm mục tiêu
và chúng đặt dữ liệu đó ngay tại nơi tập trung sự chú ý của người dùng: con trỏ chuột. Nếu phần tổng
quan được sắp xếp hợp lý, người dùng sẽ dễ dàng tra cứu những gì họ cần và bạn sẽ không cần phải
đưa tất cả vào biểu đồ.chú giải dữ liệucó thể thay thế cho nhãn.

Ngoài ra, một số người có thể chỉ tò mò. Còn gì nữa đây? Tôi có thể tìm hiểu những gì?chú giải dữ liệu
cung cấp một hình thức tương tác dễ dàng, bổ ích. Chúng nhanh (không tải trang!), nhẹ
và cung cấp những cái nhìn thoáng qua hấp dẫn về một tập dữ liệu vô hình.
Nếu bạn thấy mình đang cố gắng sử dụng mộtchú giải dữ liệuđể hiển thị phần mở rộng của dữ liệu mà nó
đang di chuột qua, thay vì các giá trị dữ liệu, hãy cân nhắc sử dụngThu phóng cục bộmẫu thay thế.

Sử dụng cửa sổ giống như mẹo công cụ để hiển thị dữ liệu được liên kết với điểm đó. Nó không nhất thiết phải là
một “mẹo công cụ” về mặt kỹ thuật—tất cả những gì quan trọng là nó xuất hiện ở vị trí của con trỏ, nó được xếp
lớp trên đồ họa và nó chỉ là tạm thời. Người dùng sẽ có được ý tưởng khá nhanh chóng.

Bên trong cửa sổ đó, định dạng dữ liệu một cách thích hợp. Mật độ dày hơn thường tốt hơn, vì
cửa sổ mẹo công cụ dự kiến sẽ nhỏ; đừng để cửa sổ quá lớn đến mức nó che khuất quá nhiều
đồ họa trong khi nó hiển thị. Và đặt nó tốt. Nếu có một cách để định vị nó theo chương trình sao
cho nó chứa ít nội dung nhất có thể, hãy thử cách đó.

Bạn thậm chí có thể muốn định dạngchú giải dữ liệukhác nhau tùy thuộc vào tình hình. Ví dụ, một bản
đồ tương tác có thể cho phép người dùng chuyển đổi giữa xem tên địa điểm và xem tọa độ kinh độ/vĩ
độ. Nếu bạn có một vài bộ dữ liệu được vẽ dưới dạng các đường riêng biệt trên một biểu đồ,chú giải
dữ liệucó thể được gắn nhãn khác nhau cho mỗi dòng hoặc có các loại dữ liệu khác nhau trong đó.

Nhiềuchú giải dữ liệucung cấp các liên kết mà người dùng có thể nhấp vào. Điều này cho phép người
dùng "đi sâu" vào các phần dữ liệu có thể không hiển thị trên biểu đồ thông tin chính. Các
chú giải dữ liệutự mô tả rất hay—nó không chỉ cung cấp thông tin mà còn cung cấp liên kết và
hướng dẫn để tìm hiểu chi tiết.

Một cách khác để hiển thị động dữ liệu ẩn là đặt trước một số bảng điều khiển trên hoặc bên cạnh đồ
họa dưới dạng cửa sổ dữ liệu tĩnh. Khi người dùng cuộn qua các điểm khác nhau trên đồ họa, dữ liệu
được liên kết với các điểm đó sẽ xuất hiện trong cửa sổ dữ liệu. Đó là ý tưởng tương tự, nhưng sử
dụng không gian dành riêng thay vì tạm thờichú giải dữ liệu. Người dùng phải chuyển sự chú ý của
mình từ con trỏ sang bảng điều khiển đó, nhưng bạn không bao giờ gặp vấn đề với phần còn lại của
đồ họa bị ẩn. Hơn nữa, nếu cửa sổ dữ liệu đó có thể giữ lại dữ liệu của nó, người dùng có thể xem nó
trong khi làm việc khác với chuột.
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu301

Trong đồ họa thông tin tương tác đương đại,chú giải dữ liệuthường làm việc cùng với mộtTiêu
điểm dữ liệucơ chế. Đèn chiếu hiển thị một lát cắt qua dữ liệu—ví dụ: một đường hoặc tập
hợp các điểm phân tán—trong khichú giải dữ liệuhiển thị điểm dữ liệu cụ thể bên dưới con trỏ
chuột.

Tính năng Phát hiện tội phạm ở San Francisco sử dụng cả haichú giải dữ liệu(xem Hình 7-16) và mộtTiêu điểm dữ liệu.
Tất cả các vụ trộm cắp đều được đánh dấu trên bản đồ (thông qua đèn chiếu), nhưng mộtchú giải dữ liệu
mô tả sự cố cụ thể mà người dùng đang trỏ đến. Cũng lưu ý liên kết đến dữ liệu thô
về tội phạm này.

San Francisco Crimespotting (http://sanfrancisco.crimespotting.org/)

Một số tập dữ liệu dày đặc hoặc có nhiều văn bản đến mức chúng không thể dễ dàng được gắn nhãn. Biểu
đồ từ dự án Many Eyes của IBM, được minh họa trong Hình 7-17, phụ thuộc vàochú giải dữ liệuđể giao tiếp các
nhãn quan trọng cho người dùng. Cácchú giải dữ liệucung cấp nhiều không gian để thể hiện văn bản và số
lượng quan tâm—nhiều hơn nhãn có thể. Nó cũng cho người dùng biết rằng việc nhấp vào phần này của
biểu đồ sẽ làm nổi bật dữ liệu có liên quan—một lần nữa,Tiêu điểm dữ liệutrong hành động.
302Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Biểu đồ Nhiều Mắt (http://manyeyes.alphaworks.ibm.com/manyeyes/visualizations/us-

chính phủ-chi phí-1962-2004)

Rất nhiều đồ họa thông tin địa lý được xây dựng trên Google Maps nên nó xứng đáng được đề
cập cụ thể. API của nó làm cho nó khá dễ dàng để tạochú giải dữ liệuchuyên biệt cho các nhu cầu
của ứng dụng, chẳng hạn như ví dụ về Cuộc phiêu lưu của SPOT ở trên cùng của mẫu (Hình 7-15)
và trong ví dụ ở Hình 7-18.

Bản đồ Kích thích California (http://www.recovery.ca.gov/html/funding/stimulus%20map/

quậnmap.jsp)
 các mẫu303

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,237,17,0,0,258

http://quince.infragistics.com/Patterns/Data%20Tips.aspx
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Trình khám phá dữ liệu công cộng của Google

Khi con chuột lăn qua một vùng quan tâm trên đồ họa, hãy đánh dấu phần dữ liệu đó và làm mờ phần
còn lại.

Đồ họa chứa nhiều thông tin đến mức nó có xu hướng che khuất cấu trúc của chính nó.
Người xem có thể khó chọn ra các mối quan hệ và theo dõi các kết nối giữa các dữ liệu vì sự
phong phú tuyệt đối của nó.

Bản thân dữ liệu có cấu trúc phức tạp—nó có thể có một số biến độc lập và các “lát cắt”
phức tạp của dữ liệu phụ thuộc như đường, vùng, tập hợp điểm rải rác hoặc hệ thống kết
nối. (Nếu dữ liệu cuộn qua chỉ là một điểm hoặc một hình dạng đơn giản, một
chú giải dữ liệulà một giải pháp tốt hơn so với mộtTiêu điểm dữ liệu. Tuy nhiên, chúng thường được sử dụng

kết hợp với nhau.)

MỘTTiêu điểm dữ liệugỡ rối các luồng dữ liệu với nhau. Đó là một cách mà bạn có thể cung cấp “tiêu điểm
cộng với bối cảnh” trên một đồ họa thông tin phức hợp: người dùng loại bỏ một số sự lộn xộn trực quan
trên đồ họa bằng cách làm dịu phần lớn đồ họa đó, chỉ tập trung vào phần dữ liệu quan tâm. Tuy nhiên,
phần còn lại của dữ liệu vẫn ở đó để cung cấp ngữ cảnh.
304Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Nó cũng cho phép khám phá động bằng cách cho phép người dùng lướt nhanh từ phần dữ liệu này sang
phần dữ liệu khác. Cô ấy có thể nhìn thấy cả sự khác biệt lớn và sự khác biệt rất nhỏ theo cách đó—miễn là
Tiêu điểm dữ liệuchuyển đổi nhanh chóng và mượt mà (không nhấp nháy) từ lát dữ liệu này sang lát dữ liệu
khác khi chuột di chuyển, thậm chí có thể nhìn thấy những khác biệt rất nhỏ.

Cuối cùng,Tiêu điểm dữ liệucó thể thú vị và hấp dẫn để sử dụng.

Đầu tiên, hãy thiết kế đồ họa thông tin để ban đầu nó không phụ thuộc vào mộtTiêu điểm dữ liệu. Cố
gắng giữ cho các lát dữ liệu có thể nhìn thấy và mạch lạc để người dùng có thể theo dõi những gì
đang diễn ra mà không cần tương tác với đồ họa. (Rốt cuộc, ai đó có thể in nó.)

Để tạo hiệu ứng tiêu điểm, hãy làm cho dữ liệu được tiêu điểm có màu sáng hoặc màu bão hòa, trong
khi dữ liệu khác mờ dần thành màu tối hơn hoặc xám hơn. Làm cho phản ứng rất nhanh khi tái đầu tư
để mang lại cho người dùng cảm giác tức thì và mượt mà.

Bên cạnh việc kích hoạt tiêu điểm khi con chuột cuộn qua các thành phần dữ liệu, bạn cũng có thể đặt “điểm
nóng” vào chú thích và các tham chiếu khác đến dữ liệu.

Hãy xem xét một “chế độ tiêu điểm.” Trong này, cácTiêu điểm dữ liệuchờ di chuột ban đầu lâu hơn
trước khi tự bật. Khi ở chế độ đó, chuyển động chuột của người dùng sẽ gây ra những thay đổi
ngay lập tức đối với đèn chiếu. Điều này có nghĩa là hiệu ứng ánh đèn sân khấu sẽ không vô tình
được kích hoạt khi người dùng vô tình lăn chuột qua đồ họa. Ví dụ về Crimespotting (hiển thị
trong Hình 7-20) thực hiện điều này.

Một thay thế cho cử chỉ cuộn chuột là nhấp chuột đơn giản hoặc chạm ngón tay. Tính năng này
không có tính năng rollover tức thì, nhưng nó hoạt động trên bàn di chuột và không bị kích hoạt
ngẫu nhiên. Tuy nhiên, bạn có thể muốn dành cú nhấp chuột cho một hành động khác, chẳng
hạn như đi sâu vào dữ liệu.

Sử dụngchú giải dữ liệuđể mô tả các điểm dữ liệu cụ thể, mô tả phần dữ liệu được tô sáng và
đưa ra hướng dẫn khi cần thiết.

Dự án San Francisco Crimespotting đặt mộtTiêu điểm dữ liệuvề các loại tội phạm khác nhau được tìm
thấy trong khu vực địa lý này. Khi người dùng di chuột qua một thành phần dữ liệu đơn lẻ—một báo
cáo tội phạm—hoặc qua phần chú giải mô tả các loại tội phạm (được hiển thị trong Hình 7-20), tất cả
các báo cáo thuộc loại đó sẽ được đánh dấu bằng các vòng tròn sáng. Phần còn lại của đồ họa được
làm tối theo kiểu hộp đèn.
 các mẫu305

Điều tra tội phạm San Francisco

CácBưu điện Washington'Đồ họa tương tác “Tuyệt mật” của bản thân nó có vẻ ổn, nhưng biểu đồ
phức tạp và có thể khó theo dõi đối với người xem thụ động (xem Hình 7-21). CácTiêu điểm dữ liệu
cho phép người dùng dễ dàng xem thông tin được liên kết với một cơ quan cụ thể.
306Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Tính năng tương tác của Washington Post (http://projects.washingtonpost.com/top-secret-

mỹ/)

Đôi khi một hình ảnh không thể dễ dàng hiển thị tất cả các dữ liệu có sẵn. CácBảng xuyên tâmđồ họa từ
Tạp chí Phố Wall,trong Hình 7-22, sử dụng nhiều công cụ tương tác để cho phép người dùng khám
phá các kết nối dữ liệu theo dõi giữa các trang web. Nhấp vào một ô sẽ hiển thị các mối quan hệ cụ
thể; cuộn qua các ô không được nhấp sẽ hiển thị "bóng ma" của các đường quan hệ. Lệnh “Hiển thị tất
cả” tạo ra một đồ họa trông thú vị, nhưng không cung cấp cho người dùng nhiều thông tin có thể
hành động—các chế độ xem tương tác hạn chế thú vị hơn nhiều!
 các mẫu307

Tính năng tương tác của Wall Street Journal

308Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Trình khám phá dữ liệu công cộng của Google

Cung cấp các cách để lọc tập dữ liệu ngay lập tức và tương tác. Sử dụng các điều khiển tiêu chuẩn dễ sử
dụng, chẳng hạn như thanh trượt và hộp kiểm, để xác định phần hoặc lớp nào của tập dữ liệu sẽ được hiển
thị. Khi người dùng điều chỉnh các điều khiển đó, hãy hiển thị kết quả ngay lập tức trên màn hình dữ liệu.

Bạn đang hiển thị cho người dùng một tập dữ liệu lớn, đa biến, có hình dạng bất kỳ, với bất kỳ bản trình bày
nào. Người dùng cần lọc ra một số dữ liệu để hoàn thành bất kỳ mục tiêu nào trong số một số mục tiêu để
loại bỏ các phần không liên quan của tập dữ liệu, để xem điểm dữ liệu nào đáp ứng các tiêu chí nhất định,
để hiểu mối quan hệ giữa các thuộc tính dữ liệu khác nhau hoặc đơn giản là để khám phá tập dữ liệu và
xem những gì ở đó.

Bản thân tập dữ liệu có một tập hợp thuộc tính cố định và có thể dự đoán được (hoặc tham số, biến,
thứ nguyên, bất kỳ thuật ngữ nào bạn thích) mà người dùng quan tâm. Chúng thường ở dạng số và
có giới hạn phạm vi; chúng cũng có thể là các chuỗi, ngày tháng, danh mục hoặc kiểu liệt kê có thể
sắp xếp được (tập hợp các số đại diện cho các giá trị không phải là số). Hoặc chúng có thể là các vùng
dữ liệu hiển thị trên chính màn hình thông tin có thể được chọn tương tác.

Truy vấn độngcũng có thể áp dụng cho kết quả tìm kiếm. Tìm kiếm theo khía cạnh có thể sử dụng giao diện truy vấn động

để cho phép người dùng khám phá cơ sở dữ liệu phong phú về các mục, chẳng hạn như sản phẩm, hình ảnh hoặc văn
bản.
 các mẫu309

Đầu tiên,Truy vấn độngdễ học. Người dùng không cần ngôn ngữ truy vấn phức tạp; các điều khiển dễ hiểu
được sử dụng để diễn đạt các biểu thức Boolean thông thường, chẳng hạn như “giá > $70 VÀ giá < $100”.
Chúng thiếu khả năng diễn đạt đầy đủ của một ngôn ngữ truy vấn—chỉ có thể thực hiện các truy vấn đơn
giản mà không làm cho giao diện người dùng trở nên quá phức tạp—nhưng trong hầu hết các trường hợp,
như vậy là đủ. Đó là một cuộc gọi phán xét mà bạn phải thực hiện.

Thứ hai, phản hồi ngay lập tức khuyến khích khám phá tập dữ liệu không giới hạn. Chẳng hạn, khi
người dùng di chuyển ngón tay cái của thanh trượt, cô ấy sẽ thấy hợp đồng hoặc mở rộng dữ liệu hiển
thị. Khi cô ấy thêm hoặc xóa các tập hợp con khác nhau của dữ liệu, cô ấy sẽ thấy chúng đi đến đâu và
chúng thay đổi cách hiển thị như thế nào. Cô ấy có thể tạo ra các biểu thức truy vấn dài và phức tạp
dần dần, bằng cách điều chỉnh điều khiển này, rồi điều khiển kia, rồi điều khiển khác. Do đó, một
“phiên hỏi đáp” liên tục và tương tác được thực hiện giữa người dùng và dữ liệu. Phản hồi ngay lập
tức rút ngắn vòng lặp lặp lại để việc khám phá trở nên thú vị và trạng thái dòng chảy có thể
có thể nhìn thấy được. (Xem Chương 1,xây dựng gia tăng.)

Thứ ba—và điều này phức tạp hơn một chút—sự hiện diện của các điều khiển truy vấn động được gắn nhãn
sẽ làm rõ các thuộc tính có thể truy vấn ngay từ đầu là gì. Ví dụ: nếu một trong các thuộc tính dữ liệu là một
số nằm trong khoảng từ 0 đến 100, thì người dùng có thể biết điều đó chỉ bằng cách nhìn thấy một thanh
trượt có 0 ở một đầu và 100 ở đầu kia.

Cách tốt nhất để thiết kế một truy vấn động tùy thuộc vào cách hiển thị dữ liệu của bạn, các loại truy vấn mà bạn
cho là nên thực hiện và khả năng của bộ công cụ của bạn. Như đã đề cập, hầu hết các chương trình ánh xạ các
thuộc tính dữ liệu tới các điều khiển thông thường nằm bên cạnh phần hiển thị dữ liệu. Điều này cho phép truy vấn
nhiều biến cùng một lúc, không chỉ những biến được mã hóa bởi các tính năng không gian trên màn hình. Ngoài
ra, hầu hết mọi người đều biết cách sử dụng thanh trượt và nút.

Các chương trình khác cung cấp lựa chọn tương tác trực tiếp trên màn hình thông tin. Thông thường, người
dùng vẽ một hộp xung quanh vùng quan tâm và dữ liệu trong vùng đó sẽ bị xóa (hoặc được giữ lại trong khi
phần còn lại của dữ liệu bị xóa). Đây là thao tác trực tiếp nhất, nhưng nó có nhược điểm là bị ràng buộc với
việc hiển thị dữ liệu theo không gian. Nếu bạn không thể vẽ một hộp xung quanh nó—hoặc nói cách khác là
chọn các điểm ưa thích—bạn không thể truy vấn về nó! xemQuét dữ liệumô hình cho những ưu và nhược
điểm của một kỹ thuật rất giống nhau.

Sau đó, quay lại điều khiển: việc chọn các điều khiển cho các truy vấn động cũng tương tự như hành động
chọn các điều khiển cho bất kỳ loại biểu mẫu nào—các lựa chọn phát sinh từ loại dữ liệu, loại truy vấn sẽ
được thực hiện và các điều khiển có sẵn. Một số lựa chọn phổ biến bao gồm:

• Thanh trượt để chỉ định một số duy nhất trong một phạm vi.

• Thanh trượt đôi hoặc cặp thanh trượt để chỉ định một tập hợp con của một phạm vi: “Hiển thị
các điểm dữ liệu lớn hơn số này nhưng nhỏ hơn số kia.”
310Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

• Nút radio hoặc hộp thả xuống (kết hợp) để chọn một giá trị trong số nhiều giá trị có thể. Bạn cũng
có thể sử dụng chúng để chọn toàn bộ biến hoặc tập dữ liệu. Trong cả hai trường hợp, “Tất cả”
thường được sử dụng như một siêu giá trị bổ sung.

• Các hộp kiểm hoặc chuyển đổi để chọn một tập hợp con giá trị, biến hoặc lớp dữ liệu tùy ý.

• Các trường văn bản để nhập các giá trị đơn lẻ, có thể được sử dụng trong mộtĐiền vào chỗ trốngngữ cảnh
(xem Chương 8). Hãy nhớ rằng các trường văn bản để lại nhiều lỗi và lỗi chính tả hơn so với thanh
trượt và nút, nhưng tốt hơn cho các giá trị chính xác.

Ví dụ trong Hình 7-24 cho thấy một bộ sáu bộ lọc cho sơ đồ cây (xemsơ đồ câymẫu trong chương
này). Các hộp kiểm, bộ lọc 1 và 2, sàng lọc toàn bộ dải dữ liệu bằng hai truy vấn soạn trước rất
đơn giản: mục này có sẵn không và mục này có hình ảnh không?

Các bộ lọc còn lại sử dụng thanh trượt đôi. Mỗi cái có hai “ngón tay cái” thanh trượt có thể di chuyển độc lập cho
phép người dùng xác định một phạm vi. Thanh trượt Giá đặt phạm vi từ khoảng 80 đô la đến khoảng 1.000 đô la
(phải thừa nhận là không thực tế lắm) và khi người dùng di chuyển đến một trong hai đầu của phạm vi, toàn bộ sơ
đồ cây sẽ dịch chuyển và thay đổi để phản ánh phạm vi giá mới. Điều này cũng đúng với các thanh trượt khác.

Bảng điều chỉnh sơ đồ cây Hive Group

 các mẫu311

Dự án Phát hiện tội phạm ở San Francisco (xem Hình 7-25) cung cấp một tập hợp các nút chuyển đổi đơn
giản, dễ hiểu để hiển thị dữ liệu tội phạm cho các thời điểm khác nhau trong ngày—tối, sáng, đi lại, đổi ca,
v.v. Người dùng cũng có thể chọn thời gian cụ thể trong ngày bằng điều khiển giống như đồng hồ. Để thu
hẹp ngày theo lịch, một biểu đồ thanh dài (bản thân nó là màn hình hiển thị dữ liệu) cho phép lựa chọn
phạm vi thông qua một thanh trượt kép, bên cạnh trình đơn thả xuống lịch tiêu chuẩn.

Điều tra tội phạm San Francisco

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,231,17,0,0,252

http://www.infovis-wiki.net/index.php?title=Dynamic_query

Cả tên và khái niệm choTruy vấn độngbắt nguồn từ đầu những năm 1990 với một số bài báo
chuyên đề của Christopher Ahlberg, Christopher Williamson và Ben Shneiderman. Bạn có
thể tìm thấy một số giấy tờ này trực tuyến, bao gồm những điều sau đây:

http://hcil.cs.umd.edu/trs/91-11/91-11.html

http://hcil.cs.umd.edu/trs/93-01/93-01.html
312Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

nền tảng BBN

Cho phép người dùng chọn các mục dữ liệu trong một chế độ xem; hiển thị cùng một dữ liệu được chọn đồng thời trong một dạng

xem khác.

Bạn có thể hiển thị hai hoặc nhiều đồ họa thông tin cùng một lúc. Bạn có thể có hai biểu đồ đường và một biểu đồ
phân tán, hoặc một biểu đồ phân tán và một bảng, hoặc một sơ đồ và một cái cây, hoặc một bản đồ và một dòng
thời gian, bất kỳ thứ gì—miễn là mỗi biểu đồ hiển thị cùng một tập dữ liệu.

Quét dữ liệucung cấp một hình thức khám phá dữ liệu tương tác rất phong phú. Đầu tiên, người dùng có thể
chọn các điểm dữ liệu bằng cách sử dụng chính đồ họa thông tin làm “bộ chọn”. Đôi khi việc tìm các điểm ưa
thích bằng mắt thường dễ dàng hơn bằng các phương tiện ít trực tiếp hơn, chẳng hạn nhưTruy vấn động—ví
dụ: có thể nhìn thấy và thao tác ngay lập tức các giá trị ngoại lệ trên một biểu đồ, trong khi việc tìm ra cách
xác định chúng bằng số có thể mất vài giây (hoặc lâu hơn). “Tôi có muốn tất cả các điểm có X > 200 và Y > 5,6
không? tôi không thể nói; chỉ cần để tôi vẽ một hộp xung quanh nhóm điểm đó.

Thứ hai, bằng cách xem đồng thời các điểm dữ liệu được chọn hoặc “được chải” trong (các) đồ
họa khác, người dùng có thể quan sát các điểm đó trong ít nhất một bối cảnh đồ họa khác. Đó có
thể là vô giá. Để sử dụng lại ví dụ ngoại lệ, người dùng có thể muốn biết vị trí của những ngoại lệ
đó trong một không gian dữ liệu khác, được lập chỉ mục bởi các biến khác nhau—và bằng cách
biết được điều đó, cô ấy có thể hiểu rõ hơn ngay lập tức về hiện tượng tạo ra dữ liệu.
 các mẫu313

Một nguyên tắc lớn hơn ở đây làphối hợphoặcquan điểm được liên kết.Nhiều chế độ xem trên cùng một dữ liệu có
thể được liên kết hoặc đồng bộ hóa để các thao tác nhất định—thu phóng, xoay, chọn, v.v.—được thực hiện cho
một chế độ xem được hiển thị đồng thời trong các chế độ xem khác. Sự phối hợp củng cố ý tưởng rằng các khung
nhìn chỉ đơn giản là những góc nhìn khác nhau trên cùng một dữ liệu. Một lần nữa, người dùng tập trung vào
cùng một dữ liệu trong các ngữ cảnh khác nhau, điều này có thể dẫn đến thông tin chi tiết.

Đầu tiên, người dùng sẽ chọn hoặc “chải” dữ liệu như thế nào? Đó cũng là vấn đề mà bạn gặp phải với bất kỳ bộ
sưu tập đối tượng có thể lựa chọn nào: người dùng có thể muốn một hoặc nhiều đối tượng, liền kề hoặc riêng biệt,
được chọn tất cả cùng một lúc hoặc tăng dần. Hãy xem xét những ý tưởng này:

• Vẽ một hộp dây cao su xung quanh các điểm dữ liệu (điều này rất phổ biến)

• Lựa chọn duy nhất bằng cách nhấp chuột

• Chọn một phạm vi (nếu điều đó hợp lý) bằng cách nhấn phím Shift, như người ta thường làm với danh sách

• Cộng trừ điểm bằng Ctrl-click, cũng giống như danh sách
• Vẽ một hình dạng “lasso” tùy ý xung quanh các điểm dữ liệu

• Đảo ngược lựa chọn thông qua mục menu, nút hoặc phím

Nếu bạn chỉ sử dụng hộp dây cao su, hãy cân nhắc để hộp trên màn hình sau cử chỉ lựa chọn. Một số
hệ thống, chẳng hạn như Cornerstone, cho phép thay đổi kích thước tương tác của hộp đánh răng.
Trên thực tế, người dùng có thể hưởng lợi từ bất kỳ phương pháp mở rộng hoặc giảm tập hợp các
điểm được chải một cách tương tác nào, bởi vì họ có thể thấy các điểm mới được chải “sáng lên” ngay
lập tức trong các chế độ xem khác, điều này tạo ra nhiều khả năng hiểu biết hơn.

Như bạn có thể thấy, điều quan trọng là các chế độ xem khác phản ứng ngay lập tức vớiQuét dữ liệu. Hãy
chắc chắn rằng hệ thống có thể xử lý một vòng quay nhanh.

Nếu các điểm dữ liệu được chải xuất hiện với các đặc điểm hình ảnh giống nhau trong tất cả các chế độ xem
dữ liệu, bao gồm cả đồ họa nơi quá trình chải xảy ra, thì người dùng có thể dễ dàng tìm thấy chúng hơn và
nhận ra chúng là đang được chải. Chúng cũng tạo thành một lớp nhận thức duy nhất (xem phần “Biến số ưu
tiên: Cái gì liên quan đến cái gì?” trên trang 283). Sắc độ màu là biến số ưu tiên được sử dụng thường xuyên
nhất để đánh răng, có thể là do bạn có thể dễ dàng nhìn thấy màu sáng ngay cả khi sự chú ý của bạn đang
tập trung ở nơi khác.

Ảnh chụp màn hình hiển thị trong cả Hình 7-26 và 7-27 được lấy từ Cornerstone, một gói thống kê và
đồ thị. Ba cửa sổ trong Hình 7-27 biểu diễn một biểu đồ phân tán, biểu đồ tần số phần dư của một
trong các biến được biểu thị và một bảng dữ liệu thô. Tất cả các quan điểm đủ khả năng đánh răng;
bạn có thể thấy hộp đánh dấu xung quanh hai trong số các cột của biểu đồ. Cả hai biểu đồ hiển thị dữ
liệu được chải màu đỏ, trong khi bảng hiển thị dữ liệu màu xám. Nếu bạn “chải” một mẫu ô tô trong
bảng, bạn sẽ thấy dấu chấm đại diện cho mẫu xe đó xuất hiện màu đỏ ở ô trên cùng, cộng với một dải
màu đỏ trong biểu đồ.
314Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

BBN Cornerstone, một lần nữa

Bản đồ cho vay tốt đểQuét dữ liệu, bởi vì dữ liệu được hiển thị trong ngữ cảnh địa lý cũng thường có
thể được tổ chức và hiển thị theo những cách khác. Ba ví dụ sau đây hiển thị dựa trên bản đồQuét dữ
liệu: hình ảnh trong một dòng giống như cuộn phim (từ Flickr, Hình 7-28), vị trí theo dõi GPS theo thứ
tự thời gian (từ SPOT Adventures, Hình 7-29) và đăng ký Foursquare của một người đi từ sự kiện xã
hội này sang sự kiện xã hội khác, cũng như theo thứ tự thời gian (từ Weeplaces, Hình 7-30). Trong cả
ba ví dụ, việc lựa chọn các mục trong chế độ xem tuyến tính sẽ khiến các mục đó “sáng lên” trong chế
độ xem bản đồ. Flickr và SPOT cũng làm ngược lại—họ cho phép người dùng tự chọn các mục trên
bản đồ để chúng sáng lên trong chế độ xem tuyến tính.

Bản đồ Flickr (http://www.flickr.com/map/)

 các mẫu315

Bản đồ trực tiếp Cuộc phiêu lưu của SPOT

Weeplaces (http://weeplaces.com)

http://quince.infragistics.com/Patterns/Data%20Brushing.aspx

Mẫu này, được gọi là bội số được liên kết, là sự tổng quát hóa củaQuét dữ liệu: http://

patternbrowser.org/code/pattern/pattern_anzeigen.php?4,225,17,0,0,246
316Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Lịch DateLens

Hiển thị tất cả dữ liệu trong một trang dày đặc, với các mục dữ liệu quy mô nhỏ. Bất cứ nơi nào con chuột di
chuyển, bóp méo trang để làm cho các mục dữ liệu lớn và có thể đọc được.

Bạn đang hiển thị một tập dữ liệu lớn bằng cách sử dụng bất kỳ biểu mẫu tổ chức nào—đồ thị, bản đồ,
mạng hoặc thậm chí cả bảng—trên màn hình lớn hoặc nhỏ. Người dùng có thể “chỉ vào” các địa điểm yêu
thích bằng con trỏ chuột hoặc màn hình cảm ứng.

Người dùng sẽ duyệt qua dữ liệu hoặc tìm kiếm các điểm ưa thích trong cơ cấu tổ chức đó
(ví dụ: tìm ngày trong lịch). Tổng quan cấp cao là cần thiết để tìm những điểm ưa thích đó,
nhưng người dùng không cần xem tất cả chi tiết có sẵn cho tất cả các điểm dữ liệu cùng
một lúc—phóng to là đủ để có được chi tiết tốt.

Một số hình thứcThu phóng cục bộ, đặc biệt là ống kính mắt cá, chỉ thích hợp nếu người dùng của bạn
sẵn sàng tìm hiểu kỹ thuật tương tác mới để đạt được thành thạo với một ứng dụng cụ thể. sử dụng
Thu phóng cục bộcó thể đòi hỏi sự kiên nhẫn.

Tính năng thu phóng thông thường hoạt động tốt đối với hầu hết đồ họa thông tin mật độ cao, nhưng nó làm mất
đi ngữ cảnh: chế độ xem được thu phóng hoàn toàn không còn hiển thị tổng quan về toàn bộ tập dữ liệu.
Thu phóng cục bộtập trung vào chi tiết cục bộ trong khi vẫn giữ được ngữ cảnh. Người dùng vẫn ở trong cùng một

không gian khái niệm.

 các mẫu317

Một chi phí có thể có củaThu phóng cục bộ, tuy nhiên, là sự biến dạng của không gian khái niệm
đó. Lưu ý cách đưa vào mắt cá—một loại thu phóng cục bộ duy trì tính liên tục tô pô giữa vùng
được phóng to và phần còn lại của chế độ xem—làm thay đổi cảnh quan trong Hình 7-31. Đột
nhiên, tổng quan trông không giống như trước đây: các mốc đã di chuyển và các mối quan hệ
không gian đã thay đổi (“Trước đây nó nằm ở giữa phía bên phải của màn hình, nhưng giờ
không còn ở đó nữa”).

các loại khácThu phóng cục bộkhông giới thiệu sự biến dạng mà thay vào đó ẩn các phần của tổng
quan. Chẳng hạn, với kính lúp ảo, người dùng có thể nhìn thấy khu vực được phóng to và một phần
của bối cảnh lớn hơn, nhưng không nhìn thấy những gì bị ẩn bởi “khung” kính lúp.

CácTổng quan Cộng với Chi tiếtmô hình là một sự thay thế khả thi choThu phóng cục bộ. Nó cũng cung cấp
cả chi tiết (tiêu điểm) và tổng quan đầy đủ (bối cảnh) trong cùng một trang, nhưng nó tách hai cấp độ
tỷ lệ thành hai chế độ xem cạnh nhau, thay vì tích hợp chúng vào một chế độ xem méo mó. Nếu như
Thu phóng cục bộquá khó thực hiện hoặc quá khó để người dùng tương tác,
Quay lạiTổng quan Cộng với Chi tiết.

Cácchú giải dữ liệumô hình là một thay thế khả thi khác. Một lần nữa, bạn nhận được cả tổng quan và
chi tiết, nhưng thông tin hiển thị không thực sự là “thu phóng” nhiều như mô tả dữ liệu tại thời điểm
đó. Và mộtchú giải dữ liệulà một mục phù du được xếp lớp trên cùng của đồ họa, trong khi
Thu phóng cục bộcó thể là một phần không thể thiếu của đồ họa và do đó có thể được in và
chụp màn hình.

Lấp đầy tất cả không gian có sẵn bằng toàn bộ tập dữ liệu, được vẽ rất nhỏ. Kéo dài nó để lấp đầy cửa sổ một cách
linh hoạt (xem phầnbố trí chất lỏngmẫu trong Chương 4). Loại bỏ chi tiết khi cần thiết. Nếu văn bản là một yếu tố
quan trọng, hãy sử dụng các phông chữ nhỏ nếu có thể; nếu văn bản vẫn không vừa, hãy sử dụng các biểu diễn
trực quan trừu tượng chẳng hạn như hình chữ nhật liền khối hoặc đường thẳng gần đúng với văn bản.

Cung cấp chế độ thu phóng cục bộ. Khi người dùng bật nó lên và di chuyển con trỏ xung quanh,
hãy phóng to khu vực nhỏ ngay dưới con trỏ.

Hình ảnh phóng to thực sự trông như thế nào tùy thuộc vào loại đồ họa thông tin mà bạn sử dụng—
nó không nhất thiết phải theo nghĩa đen, giống như kính lúp trên một trang. DateLens, trong Hình
7-31, sử dụng cả phóng to và nén theo chiều ngang và chiều dọc. Nhưng TableLens, trong Hình 7-32,
chỉ sử dụng tính năng mở rộng và nén theo chiều dọc vì các điểm dữ liệu quan tâm là toàn bộ hàng
chứ không phải một ô trong một hàng. Tuy nhiên, một bản đồ hoặc hình ảnh cần kiểm soát chặt chẽ
cả hai hướng để duy trì tỷ lệ của nó. Nói cách khác, đừng kéo dài hoặc bóp méo bản đồ. Đó là khó
khăn hơn để đọc theo cách đó.

Các ống kính thu phóng cục bộ có thể khó điều khiển vì người dùng có thể đang nhắm vào các mục tiêu rất nhỏ.
Chúng trông không nhỏ—chúng được phóng to dưới ống kính!—nhưng người dùng thực sự di chuyển con trỏ qua
không gian tổng quan chứ không phải không gian được phóng to. Một chuyển động nhỏ trở thành một bước nhảy
lớn. Vì vậy, khi các điểm dữ liệu rời rạc, chẳng hạn như các ô của bảng hoặc các nút mạng, bạn có thể cân nhắc
chuyển trực tiếp từ tiêu điểm này sang tiêu điểm khác.
318Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Cần lưu ý rằng chế độ xem mắt cá là một "thao tác nâng cao" trong trực quan hóa dữ liệu. Chế
độ xem mắt cá làm biến dạng khu vực ngay lập tức xung quanh chế độ thu phóng để đạt được
tính liên tục tô pô với phần còn lại của đồ họa. (DateLens là mắt cá, nhưng các ví dụ khác trong
mẫu này thì không.) Ví dụ, sự biến dạng này có thể gây khó chịu cho người dùng di chuyển nó
nhiều.

DateLens, được hiển thị trong Hình 7-31 ở trên cùng của mẫu, là một ứng dụng lịch hoạt động
trên cả máy tính để bàn và thiết bị di động. (Đó là thử nghiệm và hỗ trợ cho nó đã ngừng hoạt
động vào khoảng năm 2004.) Nó hiển thị tổng quan về lịch của bạn—mỗi hàng là một tuần—với
các khối màu xanh chứa các cuộc hẹn của bạn. Để biết chi tiết, bấm vào một ô. Ô đó sau đó mở
rộng, sử dụng mộtchuyển đổi hoạt hình(Chương 3), để hiển thị lịch trình trong ngày. Trong thiết kế
này, toàn bộ đồ họa được nén để dành chỗ cho ngày được đặt tiêu điểm, ngoại trừ hàng và cột
chứa ô đó. (Điều đó thực sự cung cấp thông tin hữu ích về lịch trình của tuần và về các cuộc hẹn
vào thứ Năm của các tuần khác.)

Inxight TableLens cho phép người dùng mở số lượng hàng tùy ý và di chuyển “cửa sổ”
đó lên và xuống bảng. Hình 7-32 hiển thị bốn hàng phóng to. Lưu ý rằng phần mở rộng
duy nhất ở đây là theo hướng thẳng đứng.

Bảng InxightỐng kính

Dock Mac OS thực hiện một phiên bản đơn giản củaThu phóng cục bộ(Hình 7-33), cũng như Google
Images (Hình 7-34).
 các mẫu319

đế cắm hệ điều hành Mac

Google Hình ảnh

Các thấu kính bản đồ của Cartifact—những thấu kính theo nghĩa đen, nhưng rất đẹp—cho phép
người dùng đặt cả mức độ phóng đại và kiểu vẽ bên trong thấu kính (xem Hình 7-35). Những điều này
loại bỏ phần lớn nhu cầu của người dùng để tiếp tục phóng to bản đồ để biết chi tiết, sau đó quay lại
để xem ngữ cảnh, sau đó quay lại để biết thêm chi tiết. Các kiểu vẽ thay thế (trên không, Cartifact, lịch
sử và 3D xiên) cho phép người dùng xem một khu vực theo nhiều cách bổ sung mà không ảnh hưởng
đến toàn bộ bản đồ.
320Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Ống kính bản đồ hiện vật (http://cartifact.com/webmaps/)

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,222,17,0,0,243

http://quince.infragistics.com/Patterns/Local%20Zooming.aspx

Tiêu đề bảng có thể sắp xếp iTunes

Hiển thị dữ liệu trong bảng và cho phép người dùng sắp xếp các hàng của bảng theo giá trị ô
trong cột đã chọn.

Giao diện hiển thị thông tin đa biến mà người dùng có thể muốn khám phá, sắp xếp lại,
tùy chỉnh, tìm kiếm thông qua một mục hoặc đơn giản là hiểu trên cơ sở các biến khác
nhau đó.
 các mẫu321

Cung cấp cho người dùng khả năng thay đổi thứ tự sắp xếp của bảng có tác dụng mạnh mẽ. Đầu tiên, nó
tạo điều kiện cho việc khám phá. Giờ đây, người dùng có thể học những điều từ dữ liệu mà cô ấy có thể
không bao giờ có thể làm được. Có bao nhiêu loại này? Tỷ lệ của cái này với cái kia là bao nhiêu? Có phải chỉ
có một trong số này? Đầu tiên hay cuối cùng là gì? Đột nhiên, việc tìm kiếm các mục cụ thể cũng trở nên dễ
dàng hơn; người dùng chỉ cần nhớ một thuộc tính của mục được đề cập (ví dụ: ngày chỉnh sửa cuối cùng
của nó), sắp xếp thuộc tính đó và tra cứu giá trị mà cô ấy nhớ.

Hơn nữa, nếu thứ tự sắp xếp được giữ lại từ lần gọi phần mềm này sang lần gọi khác của phần mềm, thì đây là cách để
người dùng tùy chỉnh giao diện người dùng một cách hiệu quả cho các kiểu sử dụng ưa thích của họ. Một số người dùng
muốn bảng được sắp xếp đầu tiên đến cuối cùng, một số cuối cùng đến đầu tiên và một số theo một biến mà không ai
khác cho là thú vị. Thật tốt khi cung cấp cho người dùng loại kiểm soát đó.

Cuối cùng, khái niệm tiêu đề có thể nhấp đã quen thuộc với nhiều người dùng hiện nay và họ có thể mong đợi nó
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

ngay cả khi bạn không cung cấp.

Chọn các cột (nghĩa là các biến) một cách cẩn thận. Người dùng muốn sắp xếp hoặc tìm kiếm điều gì?
Ngược lại thì saokhôngcần phải được hiển thị trong bảng này? Điều gì có thể được ẩn cho đến khi
người dùng yêu cầu thêm chi tiết về một mục cụ thể?

Các tiêu đề bảng phải có một số khả năng trực quan có thể được nhấp vào. Nhiều loại có đường viền
vát, dạng nút hoặc văn bản được gạch chân màu xanh lam. Bạn nên sử dụng mũi tên lên hoặc xuống
để hiển thị sắp xếp theo thứ tự tăng dần hay giảm dần. (Và sự hiện diện của một mũi tên cho biết cột
nào được sắp xếp lần cuối—một tác dụng phụ ngẫu nhiên!) Cân nhắc sử dụng các hiệu ứng di chuột
qua, chẳng hạn như đánh dấu hoặc thay đổi con trỏ, trên các tiêu đề để củng cố ấn tượng về khả
năng nhấp chuột.

Sử dụng thuật toán sắp xếp ổn định. Điều này có nghĩa là nếu người dùng sắp xếp trước theo tên và sau đó theo
ngày, thì danh sách kết quả sẽ hiển thị các nhóm được sắp xếp theo thứ tự của các mục có cùng ngày mà mỗi mục
được sắp xếp theo tên trong nhóm. Nói cách khác, thứ tự sắp xếp hiện tại sẽ được giữ lại trong lần sắp xếp tiếp
theo ở mức độ có thể—tinh tế, nhưng rất hữu ích.

Nếu công nghệ UI của bạn cho phép, bạn có thể cho phép người dùng sắp xếp lại các cột bằng cách kéo và
thả.

TableLens của Inxight là một bảng có các hàng được nén thành các thanh nhỏ, độ dài của các thanh này
biểu thị giá trị của các ô trong bảng. (Người dùng có thể nhấp vào các hàng cụ thể để xem các hàng trong
bảng trông bình thường, nhưng đó không phải là điều tôi muốn nói ở đây.) Một trong những điều tuyệt vời
về cách trực quan hóa này là khả năng sắp xếp trên bất kỳ cột nào—khi dữ liệu có tính tương quan cao, như
trong ví dụ này, người dùng có thể thấy mối tương quan đó trước mắt cô ấy.
322Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Bộ dữ liệu thể hiện trong Hình 7-37 bao gồm những ngôi nhà được rao bán ở Hạt Santa Clara,
California. Trong ảnh chụp màn hình này, người dùng đã nhấp vào tiêu đề cột Phòng ngủ, do đó
sắp xếp theo biến đó: càng nhiều phòng ngủ, thanh màu xanh lam càng dài. Trước đây, bảng
sắp xếp ổn định đã được sắp xếp theo Foot vuông (đại diện cho kích thước của ngôi nhà), vì vậy
bạn sẽ thấy một mẫu "răng cưa" thứ cấp ở đó; ví dụ, tất cả các ngôi nhà có bốn phòng ngủ đều
được sắp xếp theo kích thước. Biến số Baths gần như phản ánh thuộc tính Square Foot và Price
cũng vậy, biểu thị mối tương quan sơ bộ. Và nó có ý nghĩa trực quan—nhà càng có nhiều phòng
ngủ thì càng có nhiều phòng tắm và càng có khả năng lớn hơn.

Bạn có thể tưởng tượng những câu hỏi khác có thể được trả lời bằng loại đồ họa tương tác này. Mã zip có
tương quan với giá không? Làm thế nào mạnh mẽ là mối tương quan giữa giá cả và mét vuông? Các nhà
môi giới nhất định chỉ hoạt động ở một số thành phố nhất định? Có bao nhiêu nhà môi giới? Và như thế.

Bảng InxightỐng kính

http://ui-patterns.com/patterns/SortByColumn http://www.welie.com/patterns/

showPattern.php?patternID=table-sorter http://quince.infragistics.com/Patterns/

Sortable%20Table. aspx http://patternbrowser.org/code/pattern/

pattern_anzeigen.php?4,233,17,0,0,254
 các mẫu323

Phân tích mua xe (http://mkweb.bcgsc.ca/circos/intro/General_data/)

Hiển thị bảng hoặc danh sách các mục dưới dạng hình tròn thay vì cột. Vẽ các kết nối giữa các mục
thông qua phần bên trong của vòng tròn.

Bạn có một danh sách dài hoặc bảng các mục và bạn cần chỉ ra các mối quan hệ tùy ý giữa
chúng: luồng, kết nối, mối quan hệ, điểm tương đồng và thậm chí cả giá trị số (được mã hóa
theo độ dày của kết nối).

Một bản trình bày hình tròn cho phép các đường kết nối dạng tự do được hiển thị dễ dàng hơn nhiều so với
một dòng hoặc cột các phần tử sẽ cho phép. Các kết nối như vậy có khoảng cách di chuyển ngắn hơn, thẳng
hơn khi được vẽ giữa các điểm trên một cung so với các điểm trên một đường thẳng,
324Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

và người xem thường có thể nhìn thấy các mẫu trong dữ liệu dễ dàng hơn. (Điều này không phải lúc nào cũng
đúng. Nếu có thể, hãy thử các loại trực quan hóa kết nối khác nhau để xem liệu nó có đúng với các tập dữ liệu cụ
thể của bạn hay không.)

Ngay cả khi không có kết nối để vẽ, một số loại dữ liệu dạng bảng có thể dễ nhìn hơn khi
được vẽ dưới dạng hình tròn—ví dụ: tập dữ liệu rất dài có cả các tính năng quy mô lớn và
quy mô nhỏ. Các tính năng quy mô lớn có thể bao gồm các nhóm và cụm, cấp trên của hệ
thống phân cấp hoặc nhãn cho số lượng lớn các mục. Xem các ví dụ để minh họa.

Từ trang web của Circos, người tạo ra các thiết kế bảng xuyên tâm, đưa ra lời giải thích sau:

Trong vòng tròn, độ phân giải thay đổi tuyến tính, tăng theo vị trí xuyên tâm. Điều này làm cho
tâm của vòng tròn trở nên lý tưởng để hiển thị số liệu thống kê tóm tắt hoặc chỉ ra các điểm ưa
thích (tức là dữ liệu có độ phân giải thấp) mà sau đó người đọc có thể theo dõi bên ngoài để
khám phá dữ liệu chi tiết hơn (tức là dữ liệu có độ phân giải cao).*

Cuối cùng, đồ họa thông tin xuyên tâm có thể đẹp. Khi được vẽ một cách khéo léo, những kiểu
trực quan hóa này rất mới mẻ, hấp dẫn và lôi cuốn.

Bẻ cong bảng tuyến tính hoặc danh sách thành một vòng tròn và đặt các nhãn văn bản xung
quanh bên ngoài vòng tròn (nếu bạn cần). Một sốBàn xuyên tâmđặt trục x trên một nửa hình tròn
và trục y trên nửa còn lại; điều này hữu ích nếu bảng dữ liệu của bạn đang cố gắng hiển thị các
kết nối giữa hai bộ mục một chiều.

Nếu bảng ban đầu hiển thị nhiều cột dữ liệu phụ thuộc—số, thanh, chữ tượng hình, biểu đồ phân tán,
v.v.—hãy sắp xếp chúng bên trong hoặc bên ngoài vòng tròn, tùy thuộc vào tỷ lệ trực quan và mối liên
hệ lẫn nhau của các tính năng này. Quy mô lớn, tính năng hội tụ nên đi vào bên trong; các tính năng
quy mô nhỏ, chi tiết, khác biệt nên ra bên ngoài, nơi chúng có nhiều không gian hơn.

Nếu các mục trong bảng được phân loại, bạn có thể mã hóa các danh mục đó thành các nhóm được phân tách
bằng khoảng trống hoặc bằng các màu khác nhau hoặc dưới dạng các cung song song với hình tròn (bên trong
hoặc bên ngoài trục dữ liệu).

Bên trong vòng tròn, vẽ mối quan hệ giữa các mục. Những mối quan hệ đó có thể có hình
dạng của các đường hoặc vòng cung dạng tự do giữa các ô của bảng. Màu và độ dày của
đường có thể mã hóa các biến bổ sung về các mối quan hệ, chẳng hạn như nguồn hoặc
đích (màu) và âm lượng hoặc cường độ (độ dày). Đôi khi những mối quan hệ này cần phải
được vẽ dày đến mức khó phân biệt chúng với nhau. Dưới đây là một số cách để giải quyết
vấn đề đó:

* http://mkweb.bcgsc.ca/circos/intro/circular_approach/
 các mẫu325

• Loại bỏ các dòng thừa; chỉ vẽ những gì bạn muốn người xem tập trung vào.

• Sử dụng các thuật toán vẽ có thể nhóm các đường lại với nhau và sắp xếp chúng một cách
trực quan.

• Nếu đồ họa có tính tương tác, hãy sử dụng các kỹ thuật nhưTiêu điểm dữ liệuVàTruy vấn động
để cho phép người dùng xem các tập hợp con đã chọn của các dòng.

Bạn có thể cần phải giải thích làm thế nào để giải thích mộtBảng xuyên tâm.Những đồ họa này có thể rất hữu
ích đối với người xem kiên nhẫn và có hiểu biết, nhưng ý nghĩa của chúng có thể không rõ ràng ngay lập tức
đối với người xem ngây thơ hoặc không có động lực để dành thời gian nghiên cứu kỹ đồ họa. Nếu người
dùng của bạn có khả năng tiếp tục mà không hiểuBảng xuyên tâm, hãy xem xét việc đơn giản hóa nó hoặc sử
dụng một kết xuất thay thế dễ dàng hơn.

SolidSX Software Explorer là một ứng dụng vẽBàn xuyên tâmcủa các gói phần mềm. Hình
7-39 cho thấy các phụ thuộc, lệnh gọi và mối quan hệ phân cấp giữa các thành phần mã
trong thư viện. Lưu ý các cung chứa xung quanh bên ngoài vòng tròn (hiển thị phân cấp
tĩnh) và các đường biểu đồ cuộc gọi bên trong vòng tròn, được vẽ cẩn thận để rõ ràng.

Trình khám phá phần mềm SolidSX (http://www.solidsourceit.com/products/SolidSX-source-code-

phụ thuộc-analysis.html)
326Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Từ Dự án Eigenfactor và Moritz Stefaner đã đưa ra một sơ đồ tao nhã về các kiểu trích dẫn giữa
các ngành khoa học, được minh họa trong Hình 7-40. Có nhiều kết nối, nhưng chúng được vẽ tốt
đến mức người xem có thể theo dõi chúng với một mức độ thành công nhất định. Biểu đồ cho
thấy lĩnh vực khoa học nào có tính nội bộ hơn những lĩnh vực khác (ví dụ: kinh tế học) và lĩnh vực
nào được kết nối tốt hơn.

Các mẫu trích dẫn khoa học của Eigenfactor (http://well-forming.eigenfactor.org/radial.html)

Sơ đồ di truyền trong Hình 7-41 chứng minh rằng định dạng cong có thể hiệu quả trong
việc minh họa các mẫu dữ liệu khác với các kết nối. Biểu đồ có thể đã được "mở" thành định
dạng biểu đồ dải ngang, nhưng phiên bản này nhỏ gọn hơn và dễ đọc hơn so với biểu đồ
tuyến tính dài và mảnh. Lưu ý rằng các biểu đồ đường ở bên trong bảng là một tính năng có
tỷ lệ lớn hơn so với các mảnh nhỏ nhiều màu xung quanh bên ngoài vòng tròn, vì vậy chúng
được hiển thị phù hợp bên trong vòng tròn.
 các mẫu327

Biểu đồ gen của vi khuẩn (http://www.plosone.org/article/info:doi/10.1371/journal.

pone.0011748)

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,217,17,0,0,238 Để

biết thêm nhiều ví dụ, hãy truy cập trang web Circos và Visual Complexity: http://

mkweb.bcgsc.ca/circos/ http://visualcomplexity.com/
328Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Đồ họa của Thời báo New York

Xếp chồng nhiều đường biểu đồ trong một bảng điều khiển; hãy để tất cả chúng chia sẻ cùng một trục x.

Bạn trình bày hai hoặc nhiều biểu đồ, thường là biểu đồ đường đơn giản, biểu đồ thanh hoặc biểu đồ vùng
(hoặc bất kỳ sự kết hợp nào của chúng). Tất cả dữ liệu trong các biểu đồ đó đều chia sẻ cùng một trục x,
thường là dòng thời gian, nhưng nếu không, chúng mô tả những thứ khác nhau, có thể với các đơn vị hoặc
tỷ lệ khác nhau trên trục y. Bạn muốn khuyến khích người xem tìm mối quan hệ “dọc” giữa các bộ dữ liệu
được hiển thị—mối tương quan, điểm tương đồng, điểm khác biệt bất ngờ, v.v.

Trước tiên, việc căn chỉnh các biểu đồ dọc theo trục x cho người xem biết rằng các bộ dữ liệu này có
liên quan với nhau, sau đó cho phép họ so sánh dữ liệu song song. Trong Hình 7-42, sự gần nhau của
hai đồ thị làm cho có thể nhìn thấy các mối tương quan trong hình dạng của các đường cong; bạn có
thể thấy rằng các đỉnh ở biểu đồ dưới cùng thường thẳng hàng với các đặc điểm thú vị trong biểu đồ
trên cùng và các đường lưới cho phép quan sát chính xác. Chẳng hạn, đường lưới dọc giữa năm 1990
và 1991 tạo ra các đỉnh ở cả hai đường cong.

Bạn có thể làm điều này bằng cách chồng một biểu đồ này lên biểu đồ kia. Nhưng bằng cách hiển thị
từng biểu đồ riêng lẻ, với trục y riêng, bạn cho phép mỗi biểu đồ được xem theo giá trị riêng của nó
mà không bị ảnh hưởng trực quan từ biểu đồ kia.
 các mẫu329

Ngoài ra, các bộ dữ liệu này có các giá trị Y rất khác nhau: một nằm trong khoảng từ 0 đến gần 150,
trong khi các bộ khác nằm trong khoảng từ −30 đến +20! Dù sao đi nữa, bạn không thể đặt chúng
trên cùng một trục y mà không có trục đầu tiên trông giống như một đường thẳng. Bạn cần vẽ một
trục y khác dọc theo phía bên trái, sau đó bạn cần chọn tỷ lệ không làm cho biểu đồ trông quá kỳ
quặc. Mặc dù vậy, tính năng xếp chồng trực tiếp khuyến khích người xem nghĩ rằng các bộ dữ liệu sử
dụng cùng một thang đo Y và so sánh chúng trên cơ sở đó—“táo với táo” thay vì “táo với cam”. Nếu
không phải như vậy, việc đặt chồng lên chúng có thể gây hiểu nhầm.

Chồng một biểu đồ lên trên biểu đồ kia. Sử dụng một trục x cho cả hai nhưng tách các trục y thành các
không gian dọc khác nhau. Nếu các trục y cần chồng lên nhau một chút, thì chúng có thể, nhưng hãy cố
gắng giữ cho các biểu đồ không giao thoa trực quan với nhau.

Đôi khi bạn hoàn toàn không cần trục y; có thể việc cho phép người dùng tìm các giá trị chính xác là không quan trọng
(hoặc có thể bản thân biểu đồ chứa các giá trị chính xác, chẳng hạn như biểu đồ thanh được gắn nhãn). Trong trường hợp
đó, chỉ cần di chuyển các đường cong của đồ thị lên và xuống cho đến khi chúng không ảnh hưởng lẫn nhau.

Gắn nhãn cho mỗi biểu đồ để nhận dạng của nó rõ ràng. Sử dụng các đường lưới dọc nếu có thể; họ
cho phép người xem theo dõi giá trị X từ tập dữ liệu này sang tập dữ liệu khác để so sánh dễ dàng
hơn. Chúng cũng cho phép khám phá giá trị chính xác cho một điểm dữ liệu quan tâm (hoặc một
điểm gần với điểm đó) mà không cần người dùng lấy thước kẻ và bút chì ra.

Google Xu hướng cho phép người dùng so sánh tần suất sử dụng của các cụm từ tìm kiếm khác nhau. Ví dụ trong
Hình 7-43 cho thấy hai thuật ngữ liên quan đến thể thao có thể so sánh được về số lượng, vì vậy chúng dễ dàng so
sánh trong một biểu đồ đơn giản. Nhưng Google Xu hướng vượt xa điều đó. Khối lượng tìm kiếm tương đối được
minh họa trên biểu đồ trên cùng, trong khi biểu đồ dưới cùng hiển thị khối lượng tham khảo tin tức. Các chỉ số và
tỷ lệ của chúng khác nhau, do đó, Xu hướng sử dụng hai trục y riêng biệt.

xu hướng Google
330Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Ví dụ trong Hình 7-44 cho thấy một đồ thị đa Y tương tác được xây dựng trong MATLAB. Bạn có thể thao tác
với ba trục y của dấu vết dữ liệu, được mã hóa màu ở bên trái, bằng chuột, bạn có thể kéo dấu vết lên và
xuống biểu đồ, “kéo dài” chúng theo chiều dọc bằng cách trượt các đầu trục màu và thậm chí thay đổi hiển
thị phạm vi trục bằng cách chỉnh sửa các giới hạn trục y tại chỗ. Đây là lý do tại sao điều đó lại thú vị: bạn có
thể nhận thấy rằng các dấu vết trông giống nhau, như thể chúng có tương quan với nhau theo cách nào đó
—chẳng hạn, cả ba dấu vết đều giảm giá trị ngay sau đường thẳng đứng có nhãn 1180. Nhưng chúng giống
nhau đến mức nào? Di chuyển chúng và xem.

biểu đồ MATLAB

Đôi mắt của bạn rất, rất giỏi trong việc phân biệt mối quan hệ giữa các đồ họa dữ liệu. Bằng cách xếp chồng
và chồng các dấu vết biểu đồ có tỷ lệ khác nhau được hiển thị trong Hình 7-45, người dùng có thể thu được
thông tin chi tiết có giá trị về bất kỳ hiện tượng nào đã tạo ra dữ liệu này.

Biểu đồ MATLAB, một lần nữa

 các mẫu331

Đồ họa thông tin trong màn hình đa chữ Y không cần phải là đồ thị truyền thống. Biểu đồ
thời tiết trong Hình 7-46 sử dụng một loạt biểu đồ để minh họa các điều kiện thời tiết dự
kiến; chúng được căn chỉnh theo cùng một trục x dựa trên thời gian mà biểu đồ sử dụng.
(Biểu đồ này gợi ý về mẫu tiếp theo,bội số nhỏ.)

Biểu đồ thời tiết từ The Weather Channel

http://quince.infragistics.com/Patterns/Multi-Y%20Graph.aspx

Bản đồ nhiệt khí hậu, từ ấn phẩm của Đại học Oregon

332Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Tạo nhiều hình ảnh nhỏ của dữ liệu bằng cách sử dụng hai hoặc ba chiều dữ liệu. Xếp
chúng trên trang theo một hoặc hai chiều dữ liệu bổ sung, theo trình tự truyện tranh
đơn lẻ hoặc theo ma trận 2D.

Bạn cần hiển thị một tập dữ liệu lớn có nhiều hơn hai chiều hoặc các biến độc lập. Thật
dễ dàng để hiển thị một “lát” dữ liệu dưới dạng ảnh—chẳng hạn như biểu đồ, bảng,
bản đồ hoặc hình ảnh—nhưng bạn thấy khó hiển thị nhiều thứ nguyên hơn thế. Người
dùng có thể buộc phải xem từng ô một, lật qua lật lại giữa các ô để thấy sự khác biệt.

Khi đang sử dụngbội số nhỏ, bạn cần có sẵn một khu vực hiển thị khá lớn. Các thiết bị di động
hiếm khi làm tốt điều này, trừ khi mỗi bức ảnh riêng lẻ đều rất nhỏ. Sử dụng mẫu này khi hầu
hết người dùng sẽ nhìn thấy chúng trên màn hình lớn hoặc trên giấy in.

Điều đó đang được nói,tia sánglà một loại cụ thể củabội số nhỏcó thể rất hiệu quả ở quy mô nhỏ, chẳng hạn
như trong văn bản đang chạy hoặc trong một cột của các ô trong bảng. Về cơ bản, chúng là các biểu đồ thu
nhỏ, được loại bỏ tất cả các nhãn và trục, được tạo để hiển thị hình dạng hoặc đường bao của một tập dữ
liệu đơn giản.

bội số nhỏgiàu dữ liệu—chúng hiển thị nhiều thông tin cùng một lúc nhưng theo cách dễ hiểu. Mỗi
hình ảnh cá nhân kể một câu chuyện. Nhưng khi bạn đặt tất cả chúng lại với nhau, và chứng minh mỗi
bức tranhthay đổitừ cái này sang cái khác, một câu chuyện thậm chí còn lớn hơn được kể.

Như Edward Tufte đã viết trong cuốn sách kinh điển của mình,Thông tin hình dung (Graphics Press),
“Thiết kế đa dạng nhỏ, đa biến và dữ liệu phong phú, trả lời trực tiếp bằng cách thực thi trực quan so
sánh các thay đổi, về sự khác biệt giữa các đối tượng, về phạm vi của các lựa chọn thay thế.” (Tufte đặt
tên và phổ biếnbội số nhỏtrong những cuốn sách nổi tiếng của ông về hình dung.)

Hãy suy nghĩ về nó theo cách này. Nếu bạn có thể mã hóa một số kích thước trong từng ảnh riêng lẻ,
nhưng bạn cần mã hóa một kích thước bổ sung không vừa với ảnh, thì bạn có thể làm như thế nào?

Trình bày tuần tự

Thể hiện kích thước đó thay đổi theo thời gian. Bạn có thể phát chúng như một bộ phim, sử dụng các
nút Quay lại/Tiếp theo để chuyển từng trang một, v.v.

trình bày 3D
Đặt các hình ảnh dọc theo trục không gian thứ ba, trục z.

bội số nhỏ
Sử dụng lại các trục x và y ở quy mô lớn hơn.
 các mẫu333

Việc đặt các bức ảnh cạnh nhau cho phép người dùng lướt qua từ bức này sang bức khác một cách tự do và
nhanh chóng. Cô ấy không cần phải nhớ những gì đã được chiếu ở màn hình trước đó, như yêu cầu của một
bài thuyết trình nối tiếp (mặc dù một bộ phim có thểrấthiệu quả trong việc hiển thị sự khác biệt nhỏ giữa
các khung hình). Cô ấy cũng không phải giải mã hoặc xoay một cốt truyện 3D phức tạp, như yêu cầu nếu
bạn đặt các hình ảnh 2D dọc theo trục thứ ba. Các bản trình bày tuần tự và 3D đôi khi hoạt động rất tốt,
nhưng không phải lúc nào cũng vậy và chúng thường không hoạt động trong môi trường không tương tác.

Chọn để đại diện cho một hoặc hai thứ nguyên dữ liệu bổ sung. Chỉ với một, bạn có thể bố trí các hình
ảnh theo chiều dọc, chiều ngang hoặc thậm chí được ngắt dòng, giống như một đoạn truyện tranh—
từ điểm bắt đầu, người dùng có thể đọc từ đầu đến cuối. Với hai chiều dữ liệu, bạn nên sử dụng bảng
hoặc ma trận 2D—biểu thị một chiều dữ liệu dưới dạng cột và chiều kia dưới dạng hàng.

Cho dù bạn sử dụng một hay hai chiều, hãy gắn nhãnbội số nhỏvới chú thích rõ ràng
riêng lẻ nếu cần, hoặc dọc theo các cạnh của màn hình. Đảm bảo người dùng hiểu
thứ nguyên dữ liệu nào thay đổi theo bội số và liệu bạn đang mã hóa một hay hai
thứ nguyên dữ liệu.
Mỗi hình ảnh phải giống với các hình ảnh khác: cùng kích thước và/hoặc hình dạng, cùng tỷ lệ
trục (nếu bạn đang sử dụng biểu đồ) và cùng loại nội dung. Khi bạn sử dụngbội số nhỏ, bạn đang
cố gắng làm nổi bật sự khác biệt có ý nghĩa giữa những thứ được hiển thị. Cố gắng loại bỏ
những khác biệt về hình ảnh không có ý nghĩa gì.

Tất nhiên, bạn không nên sử dụng quá nhiềubội số nhỏtrên một trang. Nếu một trong các thứ nguyên
dữ liệu có phạm vi từ 1 đến 100, có thể bạn không muốn có 100 hàng hoặc cột có bội số nhỏ, vậy bạn
sẽ làm gì? Bạn có thểthùng rác100 giá trị đó vào, giả sử, năm thùng chứa 20 giá trị mỗi thùng. Hoặc
bạn có thể sử dụng một kỹ thuật gọi làván lợp,tương tự như tạo thùng nhưng cho phép chồng chéo
đáng kể giữa các thùng. (Điều đó có nghĩa là một số điểm dữ liệu sẽ xuất hiện nhiều lần, nhưng đó có
thể là một điều tốt cho những người dùng đang cố gắng phân biệt các mẫu trong dữ liệu; chỉ cần đảm
bảo rằng nó được dán nhãn rõ ràng để họ biết điều gì đang xảy ra.)

Một số ô nhỏ bội số với hai kích thước được mã hóa bổ sung được gọi làô lưới mắt cáohoặc biểu đồ
lưới mắt cáo.William Cleveland, một chuyên gia nổi tiếng về biểu đồ thống kê, sử dụng thuật ngữ này
và các gói phần mềm S-PLUS và R cũng vậy.

Biểu đồ khí hậu Bắc Mỹ, ở trên cùng của mẫu trong Hình 7-47, cho thấy nhiều biến số được mã hóa.
Tất nhiên, bên dưới mỗi bức tranh nhỏ là một bản đồ địa lý 2D và phủ lên trên đó là một “biểu đồ”
được mã hóa màu của một số chỉ số khí hậu, chẳng hạn như nhiệt độ. Với bất kỳ hình ảnh nào, bạn có
thể thấy các hình dạng thú vị trong dữ liệu màu; chúng có thể khiến người xem đặt câu hỏi về lý do tại
sao các đốm màu xuất hiện trên một số phần nhất định của lục địa.
334Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Cácbội số nhỏtoàn bộ hiển thị mã hóa hai biến bổ sung: mỗi cột là một tháng trong năm
và mỗi hàng đại diện cho một chỉ số khí hậu. Đôi mắt của bạn có thể đã theo dõi những
thay đổi trên các hàng, lưu ý những thay đổi trong năm và việc so sánh lên xuống các
cột cũng rất dễ dàng.
Ví dụ minh họa trong Hình 7-48 sử dụng lưới để mã hóa hai biến độc lập sắc tộc/tôn giáo và
thu nhập—vào dữ liệu địa lý theo từng tiểu bang. Biến phụ thuộc, được mã hóa bằng màu
sắc, là mức hỗ trợ ước tính của cộng đồng đối với các chứng từ trường học (màu cam thể
hiện sự ủng hộ, màu xanh lá cây phản đối). Hình ảnh thu được rất phong phú và nhiều sắc
thái, kể vô số câu chuyện về thái độ của người Mỹ đối với chủ đề này.

Biểu đồ bội số nhỏ về địa lý và nhân khẩu học (http://www.stat.columbia.edu/~cook/

movabletype/archives/2009/07/hard_sell_for_b.html)
 các mẫu335

Biểu đồ lưới mắt cáo hai chiều trừu tượng hơn, còn được gọi làcảnh sáttrong William
Cleveland Trực quan hóa dữ liệu,được thể hiện trong Hình 7-49. Được tạo bằng gói phần
mềm R, ví dụ này hiển thị một đại lượng được đo theo bốn chiều: vĩ độ, kinh độ, độ sâu và
độ lớn. Các giá trị dọc theo chiều sâu và kích thước cường độ chồng lên nhau — đây là kỹ
thuật ván lợp đã đề cập trước đó.

Đồ thị dạng lưới của dữ liệu động đất (http://www.sph.umich.edu/~nichols/biostat_bbag-

March2001.pdf)

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,298,17,0,0,319

http://quince.infragistics.com/Patterns/Small%20Multiples.aspx

Xem thêm các tác phẩm của Edward Tufte và William Cleveland được liệt kê trước đó.
336Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Bản đồ Thị trường SmartMoney (http://www.smartmoney.com/map-of-the-market/)

Thể hiện dữ liệu đa chiều và/hoặc phân cấp dưới dạng hình chữ nhật có nhiều kích cỡ khác nhau. Bạn có thể lồng
các hình chữ nhật đó để hiển thị cấu trúc phân cấp và tô màu hoặc gắn nhãn cho chúng để hiển thị các biến bổ
sung.

Dữ liệu của bạn có dạng cây (phân cấp). Ngoài ra, nó có thể là đa biến—mỗi mục có một số
thuộc tính, chẳng hạn như kích thước và loại, cho phép các mục được nhóm theo các thuộc tính
đó. Người dùng muốn xem tổng quan về nhiều điểm dữ liệu—có thể là hàng trăm hoặc hàng
nghìn—và họ đang sử dụng màn hình đủ lớn để chứa một màn hình lớn.

Người dùng của bạn nên kiên nhẫn và đủ động lực để học cách sử dụng một giao diện khác thường.
sơ đồ câykhông phải lúc nào cũng dễ đọc, đặc biệt đối với những người chưa từng xem chúng trước
đây. Hơn nữa, chúng hoạt động tốt hơn trên màn hình so với trên giấy, bởi vìchú giải dữ liệu,
Truy vấn độngvà các cơ chế tương tác khác có thể giúp người dùng hiểu dữ liệu.
 các mẫu337

sơ đồ câymã hóa nhiều thuộc tính dữ liệu thành một sơ đồ dày đặc duy nhất. Bằng cách tận dụng lợi
thế của vị trí, kích thước, ngăn chặn, màu sắc và/hoặc giá trị và ghi nhãn, sơ đồ cây chứa nhiều thông
tin vào một không gian khuyến khích hệ thống thị giác của con người tìm kiếm các xu hướng, mối
quan hệ giữa các biến và các điểm quan tâm cụ thể .

Hãy xem sơ đồ cây SmartMoney trong Hình 7-50, biểu thị hiệu suất trong 52 tuần qua của hơn 500 cổ
phiếu được giao dịch công khai. Kích thước phần minh họa quy mô tương đối của các khu vực thị
trường khác nhau và của các công ty trong các lĩnh vực đó - các khối màu đồng nhất là các công ty
riêng lẻ. Bạn có thể thấy ngay rằng trong năm qua, những cổ phiếu tăng giá mạnh có màu xanh lá cây
tươi sáng là từ danh mục Công nghệ và Tiêu dùng theo chu kỳ, còn những cổ phiếu giảm giá có màu
đỏ là trong danh mục Tài chính và Năng lượng.

Sơ đồ cây này giúp bạn dễ dàng có được cái nhìn tổng quan tức thì và phát hiện ra các điểm khác biệt. Nó
khuyến khích bạn nhìn thấy mối quan hệ giữa kích thước và màu sắc, kích thước và vị trí, vị trí và màu sắc—
tất cả đều mang đến cho bạn những hiểu biết khác nhau về thị trường. Bạn sẽ mất mãi mãi để có được cái
nhìn sâu sắc đó từ một bảng giá cổ phiếu dài.

Bước quan trọng trong việc thiết kế sơ đồ cây là quyết định thuộc tính dữ liệu nào được mã hóa bởi
biến trực quan nào:

Kích thước hình chữ nhật

Thông thường, giá trị này mã hóa một giá trị số, chẳng hạn như kích thước, giá hoặc tỷ lệ phần trăm.
Làm cho diện tích của mỗi hình chữ nhật tỷ lệ thuận với số đó. Nếu số có phạm vi quá lớn, bạn sẽ nhận
được một số hình chữ nhật cực lớn và một số hình chữ nhật siêu nhỏ, trong trường hợp đó, bạn có thể
cho phép người dùng phóng to chúng để xem kỹ hơn hoặc lọc ra những hình lớn để cho phép người
dùng phóng to chúng. những cái nhỏ tăng quy mô.Truy vấn động(trước đó trong chương này) thường
được sử dụng cho điều đó. Xem lại Hình 7-24 để biết ví dụ vềTruy vấn độngđược sử dụng kết hợp với sơ
đồ cây.

Nhóm và làm tổ
Nếu dữ liệu của bạn vốn đã được phân cấp, chẳng hạn như cây phân loại hoặc hệ thống tệp, thì
bạn nên nhóm và lồng các hình chữ nhật cho phù hợp. Nếu không, hãy xem liệu các mục dữ liệu
có được phân nhóm hoặc phân loại tự nhiên có ý nghĩa đối với người dùng hay không. Họ có một
số phân loại có thể? Bạn có thể cân nhắc cung cấp cho người dùng lựa chọn về cách nhóm
chúng. Họ không có phân loại rõ ràng ở tất cả? Sau đó, bạn có thể lấy một thuộc tính số, chẳng
hạn như giá, và phân loại nó thành các danh mục ($0 đến $5, $5 đến $10, v.v.). Hoặc bạn hoàn
toàn không thể nhóm các mục dữ liệu. Nhưng hãy xem xét liệu một số loại đồ họa thông tin khác
có thể phù hợp hơn hay không; nhóm là một trong những thế mạnh của treemap.
338Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Màu sắc

Bạn có thể sử dụng màu để thể hiện một giá trị số hoặc theo thứ tự khác, như trong ví
dụ về SmartMoney trong Hình 7-50 hoặc cách phân loại khác. Đối với một giá trị số, hãy
chọn hai màu cho “điểm cuối” của phạm vi giá trị có thể, chẳng hạn như đỏ và lục,
trắng và lam, vàng và đỏ, v.v.; các sắc thái màu giữa các điểm cuối đó đại diện cho các
giá trị ở giữa. Đối với phân loại, hãy sử dụng một màu sắc khác nhau để đại diện cho
từng loại. (Tuy nhiên, nếu các sắc thái quá giống nhau, người xem có thể cho rằng một
thứ tự không có.)

Chức vụ
Vị trí của hình chữ nhật trong sơ đồ cây được quyết định một phần bởi vị trí của nó trong hệ
thống phân cấp hoặc phân loại. Nhưng trong một danh mục, bạn vẫn có thể tự do quyết định vị
trí của một hình chữ nhật nhất định. Một số sơ đồ cây đặt các hình chữ nhật lớn nhất ở phía trên
bên trái của một danh mục, sau đó lấp đầy phần còn lại của danh mục sao cho các hình chữ nhật
nhỏ nhất ở phía dưới bên phải. Điều này thiết lập một nhịp điệu đẹp trên trang và nó giúp người
dùng so sánh trực quan số lượng hình chữ nhật nhỏ hoặc lớn trong mỗi danh mục chính. Trong
trường hợp này, vị trí không mã hóa một biến khác; thay vào đó, nó dư thừa với kích thước và
nhóm. Nhưng các triển khai sơ đồ cây khác thực hiện mã hóa một thứ tự—ví dụ: theo độ tuổi
hoặc theo thứ tự bảng chữ cái theo tên. Nó phụ thuộc vào số lượng biến bạn muốn mã hóa cùng
một lúc.

Hầu hết các sơ đồ cây cho phép người dùng đi sâu vào các mục dữ liệu thực tế. Ví dụ: cuộn chuột
thường tạo ra các mẹo công cụ lớn mô tả mục đầy đủ (xem phầnchú giải dữ liệumẫu trong chương
này). Bạn thường sẽ phải trượt một số văn bản để phù hợp với các mô tả vào các khối sơ đồ cây,
vì vậy đây là một việc nên làm. Hơn nữa, một cú nhấp chuột đơn hoặc nhấp đúp thường đưa
người dùng đến một số trang hoặc cửa sổ khác về mục đó.

Đối với việc triển khai, việc viết mã để sắp xếp sơ đồ cây theo cách dễ chịu không phải là chuyện nhỏ. May
mắn thay, có nhiều thuật toán để vẽ sơ đồ cây. Một số là trong các bài báo học thuật; một số nằm trong
phần mềm mã nguồn mở hoặc phần mềm miễn phí; và những thứ khác có trong sản phẩm. Các thuật toán
khác nhau thay đổi tùy theo cách chúng chọn tỷ lệ khung hình của hình chữ nhật (nghĩa là tỷ lệ giữa chiều
rộng và chiều cao; càng vuông càng tốt), cách chúng lấp đầy khoảng trống cho một danh mục nhất định và
độ ổn định của chúng đối với các thay đổi dữ liệu.

Bạn có thể cần phải giải thích làm thế nào để giải thích mộtSơ đồ cây.Những đồ họa này có thể rất hữu ích
đối với người xem kiên nhẫn và có hiểu biết, nhưng ý nghĩa của chúng không rõ ràng ngay lập tức đối với
người xem ngây thơ hoặc không có động lực để dành thời gian nghiên cứu kỹ đồ họa. Nếu người dùng của
bạn có khả năng tiếp tục mà không hiểusơ đồ cây, hãy xem xét việc đơn giản hóa nó hoặc sử dụng một kết
xuất thay thế dễ dàng hơn.
 các mẫu339

Bản đồ tin tức hiện không còn tồn tại đã minh họa “bối cảnh tin tức” như Google News đã mô tả (xem
Hình 7-51). Tại bất kỳ thời điểm nào, Bản đồ tin tức có thể thu thập các tiêu đề hàng đầu của Google
và vẽ một sơ đồ hình cây trong đó các khối lớn nhất đại diện cho những câu chuyện được đưa tin
nhiều nhất. Các mã hóa ở đây là:

• Kích thước khối: “độ phổ biến” của tin tức; có bao nhiêu hãng tin đưa tin về câu chuyện này

• Sắc độ màu: chủ đề

• Nhóm cấp cao nhất: cũng là chủ đề

• Giá trị màu (độ đậm/nhạt): tuổi

Vì kích thước văn bản của tiêu đề tỷ lệ thuận với kích thước khối, do đó tỷ lệ thuận với mức độ
phổ biến, nên bạn sẽ ngay lập tức bị thu hút bởi các mục tin tức lớn nhất. (Bạn đã đọc gì đầu
tiên? Có lẽ là dòng tiêu đề “Cảnh báo sai”, sau đó là “Vui lòng làm việc miễn phí!”?) Do đó, sơ đồ
cây là một hệ thống phân cấp trực quan được xây dựng tự động.

bản đồ tin tức

340Chương 7: Hiển thị dữ liệu phức tạp: Cây, biểu đồ và đồ họa thông tin khác

Từ Hive Group xuất hiện một bộ sưu tập nhỏ các hình ảnh sơ đồ cây tương tự: các mặt hàng
có sẵn để mua từ Amazon, dữ liệu dân số thế giới, v.v. Hình 7-52 hiển thị danh sách các bài
viết được quảng bá gần đây qua Digg.

Một số mã hóa—kích thước khối, sắc độ màu, nhóm—được người dùng thiết lập thông qua thanh ở trên
cùng (“Nhóm theo,” “Đại diện cho kích thước,” “Đại diện cho màu sắc”). Loại khả năng tùy chỉnh đó thực sự
tiện dụng trong loại ứng dụng này. Xét cho cùng, có nhiều thuộc tính dữ liệu được liên kết với mỗi bài báo—
quá nhiều để có thể mã hóa bằng ba hoặc bốn biến trực quan có sẵn. Các nhà thiết kế sơ đồ cây không biết
mỗi người dùng sẽ quan tâm đến thuộc tính nào nhất. Họ đã đưa ra một dự đoán mặc định tốt và đưa vào
một giao diện người dùng đơn giản, dễ học để cho phép người dùng làm việc của riêng họ.

Hive Group trực quan hóa các bài báo Digg (http://www.hivegroup.com/gallery/)

http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,215,17,0,0,236

http://quince.infragistics.com/Patterns/Treemap.aspx

Ben Shneiderman đã phát minh ra sơ đồ cây vào năm 1990, ông và các đồng nghiệp của
mình tại Đại học Maryland đã cải tiến kỹ thuật này được một thời gian. Có thể tìm thấy lịch
sử của sơ đồ cây, cùng với nhiều liên kết đến các bài báo và triển khai tạihttp://
www.cs.umd.edu/hcil/treemap-history/.
Sớm hay muộn, phần mềm bạn thiết kế có thể sẽ yêu cầu người dùng trả lời một số loại câu
hỏi. Nó thậm chí có thể xảy ra trong vài phút đầu tiên tương tác. Phần mềm này nên được
cài đặt ở đâu? Tên đăng nhập của bạn là gì? Những từ nào bạn muốn tìm kiếm?

Những loại tương tác này là một trong những loại dễ thiết kế nhất. Mọi người đều biết cách sử dụng các trường
văn bản, hộp kiểm và hộp tổ hợp. Các điều khiển đầu vào này thường là các thành phần giao diện đầu tiên mà các
nhà thiết kế mới làm quen sử dụng khi họ xây dựng GUI và trang web đầu tiên của mình.

Tuy nhiên, không mất nhiều thời gian để thiết lập một tương tác khó xử. Đây là một câu hỏi mẫu khác: bạn
muốn có bản tin thời tiết cho địa điểm nào? Người dùng có thể thắc mắc, tôi có chỉ định vị trí theo thành
phố, quốc gia, mã bưu chính hay không? Viết tắt có ổn không? Nếu tôi viết sai chính tả thì sao? Điều gì sẽ
xảy ra nếu tôi yêu cầu một thành phố mà nó không biết? Không có bản đồ để lựa chọn sao? Và tại sao nó
không thể nhớ vị trí tôi đã cung cấp cho nó ngày hôm qua?

Chương này thảo luận về các cách để giải quyết những vấn đề này. Các mẫu, kỹ thuật và điều khiển được mô tả ở
đây chủ yếu áp dụng cho thiết kế biểu mẫu—ahình thứcchỉ đơn giản là một loạt các cặp câu hỏi/câu trả lời. Tuy
nhiên, chúng cũng sẽ hữu ích trong các ngữ cảnh khác, chẳng hạn như đối với các điều khiển đơn lẻ trên trang
web hoặc trên thanh công cụ của ứng dụng. Thiết kế đầu vào và thiết kế biểu mẫu là những kỹ năng cốt lõi của
nhà thiết kế tương tác, vì bạn có thể sử dụng chúng trong mọi thể loại và trên mọi nền tảng.

Đầu tiên, một số nguyên tắc cần nhớ khi thiết kế đầu vào và biểu mẫu:

Đảm bảo rằng người dùng hiểu những gì được yêu cầu và tại sao
Điều này hoàn toàn phụ thuộc vào ngữ cảnh và bất kỳ sự khái quát hóa nào ở đây đều có nguy cơ nghe có vẻ nhạt
nhẽo, nhưng dù sao thì chúng ta hãy thử xem. Bạn nên viết nhãn bằng những từ mà người dùng mục tiêu của bạn
hiểu—ngôn ngữ đơn giản dành cho người mới sử dụng hoặc người dùng không thường xuyên và biệt ngữ hoặc từ
vựng chuyên ngành được lựa chọn cẩn thận dành cho chuyên gia tên miền. Nếu bạn thiết kế một biểu mẫu dài hoặc
tẻ nhạt, hãy giải thích lý do tại sao bạn cần tất cả thông tin bạn đang yêu cầu, chia nhỏ nó thành các phần mô tả
Phần có tiêu đềvà đưa ra một số đảm bảo rằng thông tin nhạy cảm sẽ
342Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

được xử lý cẩn thận. Nếu bạn đang đặt một nút trên thanh công cụ (hoặc ở một nơi nào đó quá
chật chội đối với nhãn) và chức năng của nút không rõ ràng ngay lập tức, hãy sử dụng mẹo công
cụ mô tả hoặc loại trợ giúp khác theo ngữ cảnh để cho người dùng biết nút đó là gì. làm.

Nếu bạn có thể, hãy tránh đặt câu hỏi

Yêu cầu người dùng trả lời một câu hỏi, đặc biệt nếu nó xuất hiện ở giữa một số nhiệm vụ khác,
là một chút áp đặt. Có thể bạn đang yêu cầu anh ấy ngừng suy nghĩ và giải quyết một việc mà
anh ấy không ngờ tới. Ngay cả trong những trường hợp tốt nhất, việc nhập vào các trường văn
bản không phải là ý tưởng thú vị của hầu hết mọi người. Bạn có thể "điền trước" một điều khiển
đầu vào với thông tin đã biết hoặc có thể đoán được không, vìtự động hoàn thành
mô hình khuyến nghị? bạn có thể cung cấpMặc định tốtloại bỏ gánh nặng lựa chọn từ
hầu hết người dùng của bạn? Bạn có thể tránh yêu cầu thông tin hoàn toàn?

Có một ngoại lệ rõ ràng đối với nguyên tắc này: bảo mật. Đôi khi, chúng tôi sử dụng các điều
khiển đầu vào trong ngữ cảnh thử thách/phản hồi, chẳng hạn như yêu cầu mật khẩu hoặc số thẻ
tín dụng. Rõ ràng là bạn không muốn phá vỡ các cơ chế bảo mật này bằng cách tình cờ điền
trước thông tin nhạy cảm.

Kiến thức “trong thế giới” thường chính xác hơn kiến thức “trong đầu”
Bạn không thể mong đợi con người nhớ lại danh sách mọi thứ một cách hoàn hảo. Nếu bạn yêu cầu người
dùng đưa ra lựa chọn từ một tập hợp các mục được quy định, hãy cố gắng cung cấp danh sách đó cho họ để
họ có thể đọc qua. Trình đơn thả xuống, hộp tổ hợp, danh sách và các điều khiển khác như vậy đưa ra tất cả
các lựa chọn để người dùng xem xét.

(Rõ ràng, người dùng có thể nhớ tên, ngày sinh, địa chỉ, tiểu bang hoặc quốc gia, số điện thoại và các
thông tin cá nhân phổ biến khác của mình—và anh ta có thể nhập những thông tin đó rất dễ dàng và
chính xác. Không cần phải có “kiến thức trên đời” trong những thứ này trường hợp; các trường văn
bản hoạt động tốt và dễ sử dụng hơn so với trình đơn thả xuống.)

Tương tự, nếu bạn yêu cầu đầu vào cần được định dạng theo một cách cụ thể, bạn có thể muốn cung cấp cho người
dùng manh mối về cách định dạng đầu vào. Ngay cả khi người dùng đã sử dụng giao diện người dùng của bạn
trước đây, họ có thể không nhớ những gì được yêu cầu—một lời nhắc nhở nhẹ nhàng có thể được hoan nghênh.
Mặc định tốt,Định dạng có cấu trúc, VàGợi ý đầu vàotất cả đều phục vụ mục đích này.tự động hoàn thành

tiến thêm một bước bằng cách cho người dùng biết đầu vào nào hợp lệ hoặc bằng cách nhắc người dùng
những gì anh ta đã nhập vào lần trước.

Phản ứng nhạy cảm với lỗi lầm và tha thứ khi có thể
Chấp nhận nhiều định dạng cho ngày tháng, địa chỉ, số điện thoại, số thẻ tín dụng, v.v., theo
định dạng tha thứmẫu. Nếu người dùng nhập thông tin mà biểu mẫu từ chối, hãy hiển thị
thông báo lỗi ngay khi rõ ràng rằng người dùng đã mắc lỗi (bạn có thể cần đợi cho đến khi
nhiều trường biểu mẫu được điền vào trước khi quyết định chắc chắn điều đó). Trên biểu
mẫu, hãy chỉ ra một cách lịch sự trường nhập liệu nào có vấn đề, tại sao và cách người dùng
có thể khắc phục vấn đề đó. Xem các mẫu được gọi làMáy đo độ mạnh mật khẩuVà
Thông báo lỗi cùng trang.
 Khái niệm cơ bản về thiết kế biểu mẫu343

Cẩn thận với bản dịch theo nghĩa đen từ mô hình lập trình cơ bản
Nhiều biểu mẫu được xây dựng để chỉnh sửa các bản ghi cơ sở dữ liệu hoặc để chỉnh sửa các đối tượng bằng ngôn
ngữ lập trình hướng đối tượng. Đưa ra một cấu trúc dữ liệu như thế này để điền vào, thật dễ dàng để thiết kế một
biểu mẫu để thực hiện điều đó. Mỗi phần tử cấu trúc có (1) một nhãn và (2) một điều khiển (hoặc một nhóm các điều
khiển hoạt động cùng nhau). Sắp xếp chúng theo thứ tự hợp lý nào đó, sắp xếp chúng từ trên xuống dưới, và bạn đã
hoàn thành, phải không?

Không hoàn toàn. Loại thiết kế biểu mẫu hướng đến triển khai này hoạt động hiệu quả, nhưng nó có
thể mang lại cho bạn một giao diện tiện dụng và buồn tẻ—hoặc một giao diện khó. Chẳng hạn, nếu
các thành phần cấu trúc không khớp với đầu vào mà người dùng mong muốn cung cấp thì sao? Và nếu
cấu trúc dài 30 phần tử thì sao? Đối với một số ngữ cảnh, chẳng hạn như trang thuộc tính trong môi
trường lập trình, việc hiển thị mọi thứ theo cách nó được triển khai là phù hợp—đó là một phần của
vấn đề. Nhưng đối với mọi thứ khác, bản trình bày trang nhã hơn và lấy người dùng làm trung tâm sẽ
tốt hơn.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Vì vậy, đây là thách thức: bạn có thể khai thác sự phụ thuộc giữa các thành phần cấu trúc, cấu trúc đồ
họa quen thuộc (chẳng hạn như nhãn địa chỉ), các giả định không được nêu rõ hoặc kiến thức về
người dùng có được từ các tương tác trước đó để làm cho biểu mẫu bớt phiền phức hơn không? Bạn
có thể biến vấn đề thành một vấn đề được xử lý bằng thao tác trực tiếp, chẳng hạn như kéo và thả mọi
thứ xung quanh không? Sáng tạo!

Khả năng sử dụng-kiểm tra nó

Vì một số lý do, khi có liên quan đến các biểu mẫu đầu vào, các nhà thiết kế và người dùng đặc biệt dễ dàng
đưa ra các giả định hoàn toàn khác nhau về thuật ngữ, các câu trả lời có thể có, tính xâm nhập và các vấn đề
về ngữ cảnh sử dụng khác. Cuốn sách này đã nói điều đó trước đây và sẽ nói lại điều đó: hãy thực hiện một
số kiểm tra khả năng sử dụng, ngay cả khi bạn khá chắc chắn rằng thiết kế của mình là tốt. Điều này sẽ cung
cấp cho bạn bằng chứng thực nghiệm về những gì hiệu quả và những gì không phù hợp với tình huống cụ
thể của bạn.

Lựa chọn điều khiển của bạn sẽ ảnh hưởng đến kỳ vọng của người dùng về những gì được yêu cầu, vì vậy hãy chọn một cách khôn ngoan

Hộp radio gợi ý một trong nhiều lựa chọn, trong khi trường văn bản một dòng gợi ý câu trả
lời ngắn, có kết thúc mở. Dù cố ý hay không, mọi người sẽ sử dụng hình thức vật lý của một
điều khiển—loại, kích thước, v.v.—để tìm ra những gì đang được yêu cầu và họ sẽ đặt kỳ
vọng của mình cho phù hợp. Nếu bạn sử dụng trường văn bản để yêu cầu một số, người
dùng có thể tin rằng bất kỳ số nào cũng được; nếu họ nhập “12” và sau đó bạn làm họ ngạc
nhiên với hộp thoại báo lỗi có nội dung “Số bạn nhập phải nằm trong khoảng từ 1 đến 10,”
thì bạn đã giật tấm thảm ra khỏi người họ. Một thanh trượt hoặc hộp quay sẽ tốt hơn.

Phần sau đây cung cấp cho bạn một bảng các điều khiển có thể có cho các loại đầu vào khác
nhau. Bạn hoặc các kỹ sư làm việc cùng bạn sẽ cần quyết định ngữ nghĩa của từng câu hỏi. Là nó
nhị phân? Một ngày hoặc thời gian? Một trong nhiều? Nhiều-trong-nhiều? Kết thúc mở nhưng
yêu cầu xác thực? Tra cứu tại đây, sau đó chọn một điều khiển dựa trên các ràng buộc thiết kế cụ
thể của bạn.
344Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Các phần tiếp theo mô tả các điều khiển và mẫu cho các loại thông tin bạn có thể yêu cầu từ người dùng,
chẳng hạn như số hoặc lựa chọn từ danh sách. Nó không phải là một bộ hoàn chỉnh; trên thực tế, bạn có
thể nghĩ ra nhiều cách khác. Tuy nhiên, các loại được hiển thị ở đây là phổ biến và các điều khiển được liệt
kê là một trong những lựa chọn tốt nhất của bạn về tính rõ ràng và khả năng sử dụng.

Hãy xem xét các yếu tố này khi chọn trong số các biện pháp kiểm soát có thể có đối với một loại thông tin
nhất định:

không gian có sẵn

Một số điều khiển chiếm nhiều diện tích màn hình; những cái khác nhỏ hơn, nhưng có thể khó sử
dụng hơn những cái lớn hơn. Các biểu mẫu ngắn trên các trang web có thể dành không gian màn hình
đó cho các nút radio hoặc danh sách minh họa, trong khi các ứng dụng phức tạp có thể cần đóng gói
càng nhiều nội dung càng tốt vào các không gian nhỏ. Thanh công cụ và trang thuộc tính kiểu bảng
đặc biệt hạn chế, vì chúng thường chỉ cho phép một dòng văn bản có chiều cao và thường cũng không
nhiều chiều rộng.

Mức độ phức tạp của người dùng đối với việc sử dụng máy tính nói chung
Các trường văn bản phải quen thuộc với hầu hết tất cả người dùng của bất kỳ thứ gì bạn thiết kế, nhưng
không phải ai cũng cảm thấy thoải mái khi sử dụng thanh trượt hai ngón tay cái. Đối với vấn đề đó, nhiều
người dùng máy tính không thường xuyên cũng không biết cách xử lý hộp danh sách nhiều lựa chọn.

Sự tinh vi của người dùng đối với kiến thức miền

Trường văn bản có thể ổn nếu người dùng của bạn biết rằng, chẳng hạn như chỉ các số 1–10 và 20–30 là hợp lệ.
Những người mới bắt đầu sẽ vấp ngã, nhưng nếu họ là một phần rất nhỏ trong cơ sở người dùng của bạn (và nếu
ngữ cảnh đã được học dễ dàng), có thể điều đó không sao—một trường văn bản nhỏ có thể tốt hơn là sử dụng một
tập hợp lớn các điều khiển được liên kết với nhau.

Kỳ vọng từ các ứng dụng khác

Chẳng hạn, các điều khiển Đậm/Nghiêng/Gạch chân được gọi là các nút biểu tượng; thay
vào đó, sẽ thật kỳ lạ nếu xem chúng là các nút radio.

công nghệ có sẵn

Khi viết bài này, HTML chỉ cung cấp một tập hợp con rất nhỏ các điều khiển được sử dụng phổ biến
trên máy tính để bàn: trường văn bản, hộp radio và hộp kiểm, danh sách cuộn và trình đơn thả xuống
đơn giản. Bộ công cụ GUI nguồn mở và thương mại cung cấp các bộ điều khiển phong phú hơn. Các
dịch vụ của họ khác nhau, nhưng nhiều trong số chúng có thể mở rộng thông qua lập trình, cho phép
bạn tạo các điều khiển tùy chỉnh cho các tình huống cụ thể.
 Lựa chọn kiểm soát345

Các phần sau đây tóm tắt các tùy chọn điều khiển khác nhau cho bốn tình huống nhập phổ
biến: danh sách các mục, văn bản, số và ngày hoặc giờ. Mỗi lựa chọn được minh họa bằng
một ví dụ điển hình, lấy từ giao diện Windows 2000. (Hãy nhớ rằng những ví dụ này không
nhất thiết phải là kết xuất tốt nhất có thể của các điều khiển này! Bạn có quyền tự do khi
quyết định cách vẽ chúng, đặc biệt là trên Web. Xem phần giới thiệu của Chương 9 để thảo
luận thêm.)

Một loạt các điều khiển quen thuộc cho phép người dùng chọn các mục hoặc tùy chọn từ danh
sách. Lựa chọn kiểm soát của bạn tùy thuộc vào số mục hoặc tùy chọn được chọn (một hoặc
nhiều) và số mục có khả năng có thể chọn (hai, một số ít hoặc nhiều).

Dưới đây là các điều khiển để chọn một trong hai tùy chọn (lựa chọn nhị phân).

• Ưu điểm: đơn giản; tiêu thụ không gian thấp

• Nhược điểm: chỉ có thể diễn đạt một lựa chọn, vì vậy
nghịch đảo của nó vẫn được ngụ ý và không được nêu
ra; điều này có thể dẫn đến sự nhầm lẫn về ý nghĩa của
nó khi nó tắt

• Ưu điểm: cả hai lựa chọn đều được nêu và hiển thị

• Nhược điểm: tiêu thụ không gian cao hơn

• Ưu điểm: cả hai lựa chọn đều được nêu; mức tiêu thụ không
gian thấp và có thể dự đoán được; dễ dàng mở rộng sau này
thành nhiều hơn hai lựa chọn

• Nhược điểm: chỉ có một lựa chọn được hiển thị tại một thời điểm; đòi hỏi

một chút khéo léo

• Ưu điểm: tương tự như đối với hộp kiểm; khi mang tính biểu tượng, mức

tiêu thụ không gian rất thấp

• Nhược điểm: giống như đối với hộp kiểm; ngoài ra, không phải là tiêu

chuẩn như một hộp kiểm cho các lựa chọn văn bản
346Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Các điều khiển sau đây là để chọn một trong cácNmặt hàng, ở đâuNnhỏ.

• Ưu điểm: tất cả các lựa chọn luôn hiển thị

• Nhược điểm: tiêu tốn nhiều không gian

• Ưu điểm: tiêu thụ không gian thấp

• Nhược điểm: chỉ có một lựa chọn được hiển thị tại một thời
điểm, trừ khi menu đang mở; đòi hỏi một chút khéo léo

• Ưu điểm: tiêu thụ không gian thấp; tất cả các lựa chọn đều có thể
nhìn thấy

• Nhược điểm: các biểu tượng có thể khó hiểu, cần có

mẹo công cụ để hiểu; người dùng có thể không
biết họ loại trừ lẫn nhau

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; có thể được giữ
nhỏ như ba mặt hàng
• Nhược điểm: tiêu thụ không gian cao hơn so với danh sách thả
xuống hoặc spinner

• Ưu điểm: tiêu thụ không gian thấp

• Nhược điểm: chỉ có một lựa chọn được hiển thị tại một thời
điểm; đòi hỏi nhiều sự khéo léo; không quen thuộc với người
dùng máy tính ngây thơ; danh sách thả xuống thường là lựa
chọn tốt hơn
 Lựa chọn kiểm soát347

Các điều khiển này là để chọn một trong cácNmặt hàng, ở đâuNlà lớn.

• Ưu điểm: tiêu thụ không gian thấp

• Nhược điểm: chỉ có một lựa chọn được hiển thị
tại một thời điểm, trừ khi menu đang mở; đòi
hỏi rất nhiều kỹ năng để cuộn qua các mục
trên menu thả xuống

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; có thể

được giữ nhỏ nếu cần thiết

• Nhược điểm: tiêu thụ dung lượng cao hơn so với

danh sách thả xuống

danh sách xếp tầng

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; tổ chức giúp

khả năng tìm thấy trong một số trường hợp

• Nhược điểm: có thể không quen thuộc với người

dùng máy tính ngây thơ; tiêu thụ không gian
cao; đòi hỏi sự khéo léo cao

• Ưu điểm: phù hợp để duyệt các lựa chọn

có sẵn
• Nhược điểm: có thể không quen thuộc với một số
người dùng; khó thiết kế; thường là một cửa sổ
riêng biệt, do đó, nó ít tức thì hơn các điều
khiển được đặt trực tiếp trên trang
348Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Dưới đây là các điều khiển để chọn nhiềuNmục, theo thứ tự bất kỳ.

• Ưu điểm: tất cả các lựa chọn đều được nêu và hiển thị

• Nhược điểm: tiêu tốn nhiều không gian

• Ưu điểm: tiêu thụ không gian thấp; tất cả các lựa chọn đều có

thể nhìn thấy

• Nhược điểm: các biểu tượng có thể khó hiểu,

cần có mẹo công cụ để hiểu; có thể trông
loại trừ lẫn nhau

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; có thể được

giữ nhỏ nếu cần thiết

• Nhược điểm: không phải tất cả các lựa chọn đều hiển thị
mà không cần cuộn; mức tiêu thụ không gian cao
(nhưng có giới hạn); người dùng có thể không nhận ra
đó là nhiều lựa chọn

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; có thể để

nhỏ nếu cần; khả năng chi trả cho sự lựa chọn là rõ
ràng

• Nhược điểm: không phải tất cả các lựa chọn đều hiển thị
mà không cần cuộn; mức tiêu thụ không gian cao
(nhưng có giới hạn)

xếp tầng
Danh sách

• Ưu điểm: có thể nhìn thấy nhiều lựa chọn; tổ chức giúp khả
năng tìm thấy trong một số trường hợp

• Nhược điểm: có thể không quen thuộc với người

dùng máy tính ngây thơ; đòi hỏi sự khéo léo cao;
trông giống như cây lựa chọn đơn
 Lựa chọn kiểm soát349

• Ưu điểm: phù hợp để duyệt các lựa chọn có sẵn

• Nhược điểm: có thể không quen thuộc với một số
người dùng; khó thiết kế; thường là một cửa sổ
riêng biệt, do đó, nó ít tức thì hơn các điều khiển
được đặt trực tiếp trên trang

Trình tạo danh sách

• Ưu điểm: bộ được chọn dễ xem; lựa chọn có thể

là một danh sách có thứ tự nếu muốn; dễ
dàng xử lý một danh sách nguồn lớn
• Nhược điểm: tiêu tốn dung lượng rất cao do có hai
danh sách; không dễ dàng xử lý một tập hợp lớn
các đối tượng được chọn

Sử dụng các điều khiển này để xây dựng danh sách không có thứ tự các mục do người dùng nhập.

• Ưu điểm: hành động “thêm” có thể nhìn thấy và rõ ràng

• Nhược điểm: tiêu thụ không gian cao hơn; lộn xộn thị giác

Hàng vật phẩm mới

• Ưu điểm: tiêu thụ không gian thấp hơn; chỉnh sửa được thực hiện
tại chỗ

• Nhược điểm: hành động “thêm” không rõ ràng như một nút
bấm
350Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

• Ưu điểm: trang nhã và tiết kiệm không gian; kéo

và thả hiệu quả và trực quan
• Nhược điểm: hành động “thêm” không hiển thị nên người dùng có thể
không biết danh sách là mục tiêu thả

Các điều khiển này rất hữu ích để xây dựng một danh sách các mục được sắp xếp theo thứ tự.

• Ưu điểm: hành động sắp xếp lại có thể nhìn thấy

• Nhược điểm: tiêu thụ không gian cao hơn

• Ưu điểm: trang nhã và tiết kiệm không gian; kéo

và thả hiệu quả và trực quan
• Nhược điểm: các thao tác sắp xếp lại không hiển thị nên
người dùng có thể không biết chúng có sẵn

Thu thập văn bản đầu vào từ người dùng là một trong những tác vụ biểu mẫu cơ bản nhất.
Các điều khiển thường được chọn theo số dòng được nhập, các dòng có phải là lựa chọn
được xác định trước hay không và văn bản có bao gồm định dạng hay không.

Điều khiển sau đây dùng để nhập một dòng văn bản.
Translated from English to Vietnamese - www.onlinedoctranslator.com

Lựa chọn kiểm soát351

Các điều khiển này hữu ích để nhập một dòng văn bản hoặc mộtNsự lựa chọn.

• Ưu điểm: sử dụng nhanh hơn hộp thoại riêng;

thân thuộc
• Nhược điểm: số lượng mặt hàng hạn chế có thể phù hợp
với trình đơn thả xuống

Trình chọn thả xuống

• Ưu điểm: cho phép khởi chạy hộp thoại bộ chọn

chuyên dụng, ví dụ: trình tìm tệp hoặc trình đơn
thả xuống
• Nhược điểm: không quen thuộc như hộp tổ hợp đối với một
số người dùng; hộp thoại không phải là ngay lập tức

Điều khiển này dùng để nhập nhiều dòng văn bản chưa được định dạng.

Các điều khiển này dùng để nhập nhiều dòng văn bản được định dạng.

• Ưu điểm: người dùng có kỹ năng có thể tránh thanh

công cụ bằng cách nhập trực tiếp các thẻ

• Nhược điểm: không thực sự là WYSIWYG

352Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

• Ưu điểm: tức thì, vì văn bản được chỉnh sửa

đóng vai trò xem trước
• Nhược điểm: bắt buộc phải sử dụng thanh công
cụ nên không phải lúc nào cũng chỉ dùng bàn
phím

Vì các số thường phải tuân theo các quy tắc định dạng phức tạp hơn nên việc nhập số trên biểu
mẫu phức tạp hơn một chút so với nhập văn bản cơ bản. Việc lựa chọn các tùy chọn đầu vào tùy
thuộc vào loại số bạn nhập và phạm vi cho phép của nó.

Sau đây là các điều khiển để nhập số thuộc bất kỳ loại hoặc định dạng nào.

định dạng tha thứ

• Ưu điểm: trang nhã; cho phép nhiều định dạng hoặc kiểu dữ liệu
khác nhau
• Nhược điểm: định dạng dự kiến không rõ ràng từ biểu mẫu của
điều khiển, do đó có thể gây nhầm lẫn tạm thời; yêu cầu xác
thực phụ trợ cẩn thận

Định dạng có cấu trúc

• Ưu điểm: định dạng mong muốn rõ ràng từ biểu mẫu của điều khiển

• Nhược điểm: tiêu thụ không gian có thể cao hơn; phức tạp hơn về thị
giác; không cho phép bất kỳ sai lệch nào so với định dạng đã chỉ
định, ngay cả khi người dùng cần làm như vậy; có thể khó khăn hơn
cho các công nghệ hỗ trợ hơn là một lĩnh vực duy nhất

• Ưu điểm: người dùng có thể đến một giá trị thông qua nhấp chuột mà
không cần chạm vào bàn phím; cũng có thể gõ trực tiếp nếu muốn

• Nhược điểm: không quen thuộc với mọi người dùng; bạn có
thể cần giữ nút đủ lâu để đạt được giá trị mong muốn; đòi
hỏi sự khéo léo để sử dụng các nút nhỏ
 Lựa chọn kiểm soát353

Sử dụng các điều khiển này để nhập số từ một phạm vi giới hạn.

• Ưu điểm: ẩn dụ rõ ràng; vị trí của giá trị trong phạm vi

được hiển thị trực quan; người dùng không thể nhập
một số ngoài phạm vi
• Nhược điểm: tiêu thụ không gian cao; truy cập bàn
phím rõ ràng; đánh dấu nhãn có thể làm cho nó rất
đông đúc

• Ưu điểm: các giá trị bị giới hạn trong phạm vi khi

các nút được sử dụng; tiêu thụ không gian thấp;
hỗ trợ cả truy cập chỉ bằng bàn phím và chỉ bằng
chuột
• Nhược điểm: không quen thuộc với mọi người dùng; đòi hỏi sự khéo
léo để sử dụng các nút nhỏ; cần xác nhận; không thể nhìn thấy
trực quan giá trị trong phạm vi

Gợi ý đầu vào Dấu nhắc đầu vào

• Ưu điểm: quen thuộc với mọi người; tiêu thụ không gian
thấp; truy cập bàn phím
• Nhược điểm: yêu cầu xác nhận; không có ràng buộc về
những gì có thể được nhập, vì vậy bạn phải giao tiếp
phạm vi bằng một số phương tiện khác

Trình chọn thả xuống

• Ưu điểm: cho phép nhập cả dạng số và dạng trực

quan
• Nhược điểm: phức tạp; mức tiêu thụ không gian cao
khi cả hai phần tử đều có trên trang; yêu cầu xác thực
trường văn bản khi người dùng nhập giá trị
354Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Các điều khiển này dùng để nhập một dải con từ một dải lớn hơn.

• Ưu điểm: tiêu thụ không gian thấp hơn so với hai thanh trượt

• Nhược điểm: không quen thuộc với hầu hết người dùng; không có quyền truy cập bàn

phím trừ khi bạn cũng sử dụng các trường văn bản

• Ưu điểm: ít đáng sợ hơn thanh trượt kép

• Nhược điểm: tiêu thụ không gian rất cao; không có quyền truy cập bàn phím
trừ khi các trường văn bản cũng được sử dụng

điền vào-
khoảng trống

• Ưu điểm: các giá trị bị giới hạn trong phạm vi khi các
nút được sử dụng; tiêu thụ không gian thấp; hỗ trợ cả
truy cập chỉ bằng bàn phím và chuột
• Nhược điểm: không quen thuộc với mọi người dùng; đòi hỏi sự khéo léo để
sử dụng các nút nhỏ; cần xác nhận; không thể nhìn thấy trực quan giá trị
trong phạm vi

Gợi ý đầu vào Dấu nhắc đầu vào Điền vào chỗ trống

• Ưu điểm: quen thuộc với mọi người; tiêu thụ không gian thấp hơn
nhiều so với thanh trượt
• Nhược điểm: yêu cầu xác nhận; không có ràng buộc về những gì
có thể được nhập, vì vậy bạn cần truyền đạt phạm vi bằng một
số phương tiện khác
 Lựa chọn kiểm soát355

Do các định dạng tiềm ẩn và các vấn đề quốc tế hóa, ngày và giờ có thể là một mục khó chấp
nhận từ người dùng. Các tùy chọn nhập ngày tháng hoặc thời gian bao gồm các tùy chọn sau.

định dạng tha thứ

• Ưu điểm: trực quan đơn giản; cho phép nhiều định

dạng hoặc loại dữ liệu; truy cập bàn phím
• Nhược điểm: định dạng dự kiến không rõ ràng từ biểu
mẫu của điều khiển, do đó có thể gây nhầm lẫn ngắn
gọn; yêu cầu xác thực phụ trợ cẩn thận

Định dạng có cấu trúc

• Ưu điểm: định dạng mong muốn rõ ràng từ biểu mẫu của điều khiển

• Nhược điểm: tiêu thụ không gian có thể cao hơn; lộn
xộn thị giác hơn; không cho phép sai lệch so với định
dạng đã chỉ định, ngay cả khi người dùng muốn làm
như vậy; trình đọc màn hình có thể khó hơn một
trường duy nhất

• Ưu điểm: ẩn dụ rõ ràng; đầu vào bị hạn chế ở các

giá trị cho phép
• Nhược điểm: tiêu thụ không gian cao; có thể không cung cấp quyền
truy cập chỉ bằng bàn phím

Trình chọn thả xuống

• Ưu điểm: kết hợp ưu điểm của trường văn bản và

điều khiển lịch; tiêu thụ không gian thấp
• Nhược điểm: tương tác phức tạp; đòi hỏi sự khéo léo để chọn
các giá trị từ trình đơn thả xuống
356Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Như bạn có thể đoán nếu bạn đọc qua các bảng điều khiển trong phần trước, hầu hết các mẫu này
mô tả các điều khiển—cụ thể là cách bạn có thể kết hợp các điều khiển với các điều khiển và văn bản
khác theo cách giúp chúng dễ sử dụng hơn. Một số mẫu xác định mối quan hệ cấu trúc giữa các phần
tử, chẳng hạn nhưTrình chọn thả xuốngVàĐiền vào chỗ trống. Những người khác, chẳng hạn nhưMặc định
tốtVàtự động hoàn thành, thảo luận về giá trị của các điều khiển và cách các giá trị đó thay đổi.

Một số lượng lớn các mẫu này xử lý chủ yếu với các trường văn bản:định dạng tha thứ,
Định dạng có cấu trúc,Điền vào chỗ trống,Gợi ý đầu vào,Dấu nhắc nhập liệu, Máy đo độ mạnh mật khẩu, Và
tự động hoàn thành. Điều đó không đáng ngạc nhiên. Các trường văn bản phổ biến như bụi bẩn, nhưng
chúng không giúp người dùng dễ dàng tìm ra những gì nên có trong đó. Chúng dễ sử dụng nhất khi được
trình bày trong ngữ cảnh làm cho việc sử dụng chúng trở nên rõ ràng. Các mẫu cung cấp cho bạn nhiều
cách để tạo bối cảnh đó.

1.định dạng tha thứ

2.Định dạng có cấu trúc

3.Điền vào chỗ trống

4.Gợi ý đầu vào

5.Dấu nhắc đầu vào

6.Máy đo độ mạnh mật khẩu

7.tự động hoàn thành

Hai mẫu tiếp theo xử lý các điều khiển khác với trường văn bản.Trình chọn thả xuốngmô tả cách tạo
điều khiển tùy chỉnh vàTrình tạo danh sách, được tham chiếu trong bảng điều khiển được hiển thị
trước đó, mô tả tổ hợp các điều khiển thường được phát minh lại cho phép người dùng tạo danh
sách các mục.

số 8.Trình chọn thả xuống

9.Trình tạo danh sách

Bạn nên thiết kế các mẫu còn lại thành nguyên mẫu. Chúng áp dụng tốt như nhau cho các trường văn bản, trình
đơn thả xuống, nút radio, danh sách và các điều khiển có trạng thái khác, nhưng bạn nên sử dụng chúng một cách
nhất quán trong một biểu mẫu (hoặc trong hộp thoại hoặc thậm chí toàn bộ ứng dụng).

10.Mặc định tốt

11.Thông báo lỗi cùng trang
Các mẫu từ các chương khác cũng áp dụng cho thiết kế biểu mẫu. Từ Chương 4,Căn Phải/Tráithảo luận về
một cách để sắp xếp các nhãn bên cạnh các điều khiển. Nhãn cũng có thể được đặt phía trên các trường của
biểu mẫu (với chi phí không gian theo chiều dọc, nhưng có nhiều khoảng trống theo chiều ngang cho các
nhãn dài) hoặc căn trái dọc theo cạnh trái của biểu mẫu. Sự lựa chọn có thể ảnh hưởng đến tốc độ hoàn
thành biểu mẫu.
 các mẫu357

Chương 3 và 4 cũng cung cấp cho bạn một số khả năng thiết kế quy mô lớn hơn. MỘThình thức gác cổng—
bất kỳ biểu mẫu nào đứng giữa người dùng và mục tiêu trước mắt của họ, chẳng hạn như biểu mẫu đăng
ký hoặc mua hàng—nên có trongTrung tâm sân khấu, với rất ít phiền nhiễu trên trang. Ngoài ra, bạn có thể làm
cho nó mộtBảng điều khiển phương thức, xếp lớp trên trang.

Nếu bạn có một biểu mẫu dài bao gồm các chủ đề khác nhau, bạn có thể cân nhắc chia nó thành
Phần có tiêu đềhoặc thậm chí các trang riêng biệt. (Các tab có xu hướng hoạt động kém dưới dạng cơ chế
nhóm các biểu mẫu.) Nếu bạn chia một biểu mẫu thành một chuỗi các trang, hãy sử dụngThuật sĩVàBản đồ
trình tựcác mẫu để hiển thị cho người dùng biết họ đang ở đâu và họ sẽ đi đâu.

Cuối cùng, các biểu mẫu nên sử dụng mộtNút “Hoàn thành” nổi bật(Chương 6) cho hành động hoàn thành hoặc đệ
trình. Nếu bạn có các hành động phụ, chẳng hạn như đặt lại biểu mẫu hoặc liên kết trợ giúp, hãy làm cho chúng ít
nổi bật hơn.

Weather.com

Cho phép người dùng nhập văn bản ở nhiều định dạng và cú pháp khác nhau, đồng thời giúp ứng dụng diễn giải nội dung
đó một cách thông minh.

Giao diện người dùng của bạn yêu cầu dữ liệu mà người dùng có thể nhập với sự kết hợp không thể đoán trước của
khoảng trắng, dấu gạch ngang, chữ viết tắt hoặc chữ viết hoa. Tổng quát hơn, giao diện người dùng có thể chấp nhận các
loại đầu vào khác nhau từ người dùng—ý nghĩa, định dạng hoặc cú pháp khác nhau. Nhưng bạn muốn giữ giao diện trực
quan đơn giản.

Người dùng chỉ muốn hoàn thành công việc chứ không nghĩ về định dạng “đúng” và giao diện người dùng
phức tạp. Máy tính rất giỏi trong việc tìm ra cách xử lý các loại đầu vào khác nhau (dù sao cũng đến một
mức độ nào đó). Đó là một sự kết hợp hoàn hảo: hãy để người dùng nhập bất cứ thứ gì anh ta cần và nếu
nó hợp lý, hãy để phần mềm làm đúng với nó.
358Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Điều này có thể giúp đơn giản hóa giao diện người dùng rất nhiều, giúp dễ dàng tìm ra hơn nhiều. Nó thậm
chí có thể loại bỏ yêu cầu cho mộtGợi ý đầu vàohoặcDấu nhắc đầu vào, mặc dù chúng thường được nhìn thấy
cùng nhau, như trong ví dụ ở Hình 8-1.

bạn có thể xem xétĐịnh dạng có cấu trúcthay thế, nhưng mẫu đó hoạt động tốt nhất khi định dạng đầu
vào hoàn toàn có thể dự đoán được (và thường là dạng số, chẳng hạn như số điện thoại).

Điểm hấp dẫn (bạn biết là sẽ có): nó biến vấn đề thiết kế giao diện người dùng thành vấn đề lập trình.
Bạn phải suy nghĩ về loại văn bản mà người dùng có khả năng nhập vào. Có thể bạn yêu cầu ngày
hoặc giờ và chỉ có định dạng thay đổi—đó là một trường hợp dễ dàng. Hoặc có thể bạn yêu cầu cụm
từ tìm kiếm và biến thể là phần mềmlàmvới dữ liệu. Điều đó khó hơn. Phần mềm có thể phân biệt
trường hợp này với trường hợp khác không? Làm sao?

Mỗi ứng dụng sử dụng mẫu này khác nhau. Chỉ cần đảm bảo phản hồi của phần mềm đối với các định dạng đầu
vào khác nhau phù hợp với những gì người dùng mong đợi. Kiểm tra, kiểm tra và kiểm tra lại với người dùng thực.

CácThời báo New Yorksử dụngđịnh dạng tha thứtrong một số tính năng cần thông tin từ người
dùng. Hình 8-2 cho thấy các ví dụ từ tìm kiếm bất động sản và từ tính năng báo giá tài chính
của nó.

Hai trường văn bản trong trang web của New York Times

Một nơi nên sử dụng mẫu này, nhưng thường thì không, là khi người dùng yêu cầu số thẻ
tín dụng. Miễn là 16 chữ số được nhập, tại sao biểu mẫu phải quan tâm liệu người dùng có
phân tách chúng bằng dấu cách hay dấu gạch ngang hay không có gì cả? Không khó để loại
bỏ các ký tự tách biệt. Ví dụ, PayPal không chấp nhận khoảng trống trong số thẻ tín dụng
(xem Hình 8-3).
 các mẫu359

PayPal

Hình 8-4 là công cụ thiết lập cuộc họp của Outlook. Xem các trường “Thời gian bắt đầu:” và “Thời gian kết
thúc:” ở cuối ảnh chụp màn hình—bạn không cần phải cung cấp ngày được xác định đầy đủ, chẳng hạn như
ngày trong các trường văn bản hiện tại. Nếu hôm nay là ngày 24 tháng 4 và bạn muốn thiết lập một cuộc
họp vào ngày 29 tháng 4, bạn có thể nhập bất kỳ cụm từ nào sau đây:

• Thứ năm tới • 29/4/2004 • 29/4

• tiếp theo • 29/4/2004 • Năm ngày

• thu • 29/4 • 5 ngày

Và cứ thế—có lẽ cũng có những định dạng được chấp nhận khác. Sau đó, ngày được chỉ định sẽ được
“phản hồi lại” cho người dùng ở định dạng phù hợp với ngôn ngữ và vị trí của người dùng.

Microsoft Outlook

http://ui-patterns.com/patterns/ForgivingFormat http://

quince.infragistics.com/Patterns/Forgiving%20Format.aspx
360Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Màn hình cài đặt photoshop

Thay vì sử dụng một trường văn bản, hãy sử dụng một tập hợp các trường văn bản phản ánh cấu trúc của dữ liệu
được yêu cầu.

Giao diện của bạn yêu cầu một kiểu nhập văn bản cụ thể từ người dùng, được định dạng theo một cách
nhất định. Định dạng đó quen thuộc và được xác định rõ ràng và bạn không mong đợi bất kỳ người dùng
nào cần đi chệch khỏi định dạng mà bạn mong đợi. Ví dụ bao gồm thông tin thẻ tín dụng, số điện thoại địa
phương và chuỗi hoặc số giấy phép.

Nói chung, không nên sử dụng mẫu này cho bất kỳ dữ liệu nào có định dạng ưa thích có thể khác nhau tùy
theo người dùng. Đặc biệt xem xét điều gì có thể xảy ra nếu giao diện của bạn được sử dụng ở các quốc gia
khác. Tên, địa chỉ, mã bưu chính và số điện thoại đều có các định dạng tiêu chuẩn khác nhau ở những nơi
khác nhau. Cân nhắc sử dụngđịnh dạng tha thứtrong những trường hợp đó.

Cấu trúc của các trường văn bản cung cấp cho người dùng manh mối về loại đầu vào nào đang
được yêu cầu. Ví dụ, cô ấy có thể lập bản đồ trong đầu sáu trường văn bản trong Hình 8-5 với số
sáu khối được ghi trên vỏ đĩa CD Photoshop của cô ấy và kết luận rằng đó là số giấy phép mà cô
ấy cần nhập vào. Kỳ vọng rất rõ ràng. Cô ấy có lẽ cũng nhận ra rằng cô ấy không cần phải nhập
bất kỳ dấu cách hoặc dấu gạch nối nào để tách sáu phần.

Mẫu này thường được triển khai dưới dạng một tập hợp các trường văn bản nhỏ thay vì một trường
lớn. Điều đó một mình có thể làm giảm lỗi nhập dữ liệu. Ai đó sẽ dễ dàng kiểm tra kỹ một số chuỗi
ngắn (từ hai đến năm ký tự hoặc hơn) so với một chuỗi dài, đặc biệt là khi có liên quan đến các số.
Tương tự như vậy, việc phiên âm hoặc ghi nhớ một số dài sẽ dễ dàng hơn khi nó được chia thành
nhiều phần. Đó là cách bộ não con người hoạt động.

Tương phản mô hình này vớiđịnh dạng tha thứ, có giải pháp ngược lại: nó cho phép bạn nhập dữ liệu ở bất kỳ
định dạng nào mà không cần cung cấp bằng chứng cấu trúc về những gì được yêu cầu. (Bạn có thể sử dụng
các manh mối khác để thay thế, nhưGợi ý đầu vào.)Định dạng có cấu trúctốt hơn cho các định dạng rất dễ đoán,
định dạng tha thứcho đầu vào kết thúc mở.
 các mẫu361

Thiết kế một tập hợp các trường văn bản phản ánh định dạng được yêu cầu. Giữ cho các trường văn bản ngắn, làm đầu
mối cho độ dài của thông tin đầu vào.

Sau khi người dùng đã nhập tất cả các chữ số hoặc ký tự trong trường văn bản đầu tiên, hãy xác nhận điều đó cho
cô ấy bằng cách tự động di chuyển tiêu điểm nhập liệu sang trường tiếp theo. Tất nhiên, cô ấy vẫn có thể quay lại
và chỉnh sửa lại cái đầu tiên, nhưng bây giờ cô ấy biết có bao nhiêu chữ số được yêu cầu ở đó.

Bạn cũng có thể dùngLời nhắc đầu vàođể cung cấp cho người dùng thêm manh mối về những gì được mong đợi. Trên thực
tế, các trường định dạng có cấu trúc cho ngày tháng thường sử dụngLời nhắc đầu vào, chẳng hạn như “dd/mm/yyyy”.

Ở mức đơn giản nhất,Định dạng có cấu trúctheo nghĩa đen có thể có hình dạng của dữ liệu, hoàn chỉnh với khoảng
trắng, dấu gạch nối và dấu ngoặc đơn, như được minh họa trong bảng sau.

Số điện thoại (504) 555-1212

Số thẻ tín dụng 1021 1234 5678 0000

Ngày 25/12/2004

số ISBN 0-1950-1919-9

Đối với đầu vào ngày, LiveJournal sử dụngĐịnh dạng có cấu trúckết hợp với sổ xuống để
chọn tháng (xem Hình 8-6). Nó mặc định là ngày và giờ hiện tại.

Tạp chí trực tiếp

http://ui-patterns.com/patterns/StructuredFormat http://

quince.infragistics.com/Patterns/Structured%20Format.aspx
362Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Thời báo New York

Sắp xếp một hoặc nhiều trường dưới dạng một câu hoặc cụm từ văn xuôi, với các trường là “khoảng
trống” để người dùng điền vào.

Bạn cần yêu cầu người dùng nhập dữ liệu, thường là văn bản một dòng, số hoặc lựa chọn từ danh
sách thả xuống. Bạn đã cố viết nó ra dưới dạng một tập hợp các cặp nhãn/điều khiển, nhưng kiểu khai
báo điển hình của nhãn (chẳng hạn như “Tên:” và “Địa chỉ:”) không đủ rõ ràng để người dùng hiểu
điều gì đang xảy ra. Tuy nhiên, bạn có thể mô tả bằng lời hành động sẽ được thực hiện sau khi mọi
thứ đã được điền, trong một câu hoặc cụm từ ở thể chủ động.

Điền vào chỗ trốnggiúp làm cho giao diện tự giải thích. Rốt cuộc, tất cả chúng ta đều biết cách hoàn thành
một câu. (Cụm động từ hoặc cụm danh từ cũng sẽ thực hiện thủ thuật này.) Nhìn thấy đầu vào hoặc
“khoảng trống” trong ngữ cảnh mô tả bằng lời nói giúp người dùng hiểu điều gì đang diễn ra và điều gì
đang được yêu cầu ở anh ta.

Viết câu hoặc cụm từ bằng tất cả các kỹ năng tạo từ của bạn. Sử dụng điều khiển thay cho lời nói.

Nếu bạn định nhúng các điều khiển vào giữa cụm từ thay vì ở cuối, mẫu này hoạt động tốt nhất với
các trường văn bản, danh sách thả xuống và hộp tổ hợp—nói cách khác, các điều khiển có cùng hệ số
dạng (chiều rộng và chiều cao) làm từ ngữ trong câu. Ngoài ra, hãy đảm bảo rằng đường cơ sở của
văn bản câu thẳng hàng với đường cơ sở của văn bản trong các điều khiển, nếu không nó sẽ trông
cẩu thả. Kích thước các điều khiển sao cho chúng vừa đủ dài để chứa các lựa chọn của người dùng và
duy trì khoảng cách giữa các từ thích hợp giữa chúng và các từ xung quanh.
 các mẫu363

Điều này đặc biệt hữu ích để xác định các điều kiện, như người ta có thể làm khi tìm kiếm các
mục hoặc lọc chúng khỏi màn hình. Các ví dụ về Excel và eBay trong Hình 8-8 và 8-9 minh họa
điểm này. Robert Reimann và Alan Cooper mô tả mẫu này như một cách lý tưởng để xử lý các
truy vấn; thuật ngữ của họ cho nó làđầu ra ngôn ngữ tự nhiên.*

Tuy nhiên, có một vấn đề lớn trong mô hình này: nó trở nên rất khóbản địa hóa giao diện (chuyển đổi
nó sang một ngôn ngữ khác), vì khả năng hiểu bây giờ phụ thuộc vào trật tự từ trong ngôn ngữ tự
nhiên. Đối với một số sản phẩm hoặc trang web quốc tế, đó là điều không dễ hiểu. Bạn có thể phải
sắp xếp lại giao diện người dùng để làm cho nó hoạt động ở một ngôn ngữ khác; ít nhất, hãy làm việc
với một dịch giả có năng lực để đảm bảo giao diện người dùng có thể được bản địa hóa.

Hộp thoại định dạng ô Excel được hiển thị trong Hình 8-8 cho phép bạn chọn các cụm từ trong “câu”
này từ các hộp thả xuống. Khi các cụm từ thay đổi, các trường văn bản tiếp theo—hiển thị 0,7 và 0,9
trong ví dụ này—có thể được thay thế bằng các điều khiển khác, chẳng hạn như một trường văn bản
duy nhất cho “lớn hơn”.

Excel

Khi người dùng tìm kiếm các mặt hàng trên eBay, họ có thể sử dụng một biểu mẫu dài để lọc kết quả
tìm kiếm theo các tiêu chí khác nhau. Biểu mẫu được hiển thị trong Hình 8-9 có một số ví dụ về
Điền vào chỗ trống.

* Xem cuốn sách của họGiới thiệu về Face 2.0: Yếu tố cần thiết của thiết kế tương tác (Wiley), trang 205.
364Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Biểu mẫu bộ lọc tìm kiếm của eBay

http://ui-patterns.com/patterns/FillInTheBlanks

Trang đăng ký Twitter

Bên cạnh hoặc bên dưới trường văn bản trống, hãy đặt một cụm từ hoặc ví dụ giải thích những gì được yêu
cầu.
 các mẫu365

Giao diện trình bày một trường văn bản, nhưng loại đầu vào mà nó yêu cầu không rõ ràng đối với tất cả người
dùng. Bạn không muốn đặt nhiều hơn một vài từ vào nhãn của trường văn bản.

Một trường văn bản giải thích những gì diễn ra trong đó giúp người dùng không phải đoán. Gợi ý
cung cấp ngữ cảnh mà bản thân nhãn có thể không cung cấp. Nếu bạn tách gợi ý khỏi nhãn chính
một cách trực quan, những người dùng biết phải làm gì có thể ít nhiều bỏ qua gợi ý và tiếp tục tập
trung vào nhãn và điều khiển.

Viết một ví dụ ngắn hoặc câu giải thích và đặt nó bên dưới hoặc bên cạnh trường văn bản. Gợi ý
có thể luôn hiển thị hoặc có thể xuất hiện khi trường văn bản nhận được tiêu điểm đầu vào.

Giữ cho văn bản trong gợi ý nhỏ và không dễ thấy, mặc dù có thể đọc được; cân nhắc sử dụng phông
chữ nhỏ hơn hai điểm so với phông chữ trên nhãn. (Sự khác biệt một điểm sẽ trông giống như nhầm
lẫn hơn là thay đổi cỡ chữ dự định.) Ngoài ra, hãy giữ cho gợi ý ngắn gọn. Ngoài một hoặc hai câu,
nhiều người dùng sẽ dán mắt vào và họ sẽ bỏ qua văn bản hoàn toàn.

Mẫu này thường được sử dụng kết hợp vớiđịnh dạng tha thứ, như được minh họa bằng ví dụ Word
trong Hình 8-11, hoặcĐịnh dạng có cấu trúc. Các giải pháp thay thế bao gồmDấu nhắc đầu vào
(trong đó một gợi ý ngắn đi vào chính điều khiển), mẹo công cụ hiển thị mô tả khi di
chuột vàMặc định tốt(đặt một giá trị hợp lệ thực tế vào điều khiển). lợi thế củaGợi ý đầu
vàolà nó để trống phần điều khiển—người dùng buộc phải xem xét câu hỏi và đưa ra
câu trả lời, điều này đôi khi tốt hơn là để người dùng không nghĩ gì cả.

Các hộp thoại in được sử dụng bởi một số ứng dụng Microsoft Office cung cấp mộtGợi ý đầu
vàobên dưới mộtđịnh dạng tha thứtrường văn bản—nó lấy số trang, phạm vi trang hoặc cả hai
(Hình 8-11). Gợi ý rất hữu ích cho bất kỳ ai chưa bao giờ phải sử dụng tùy chọn “Trang”,
nhưng những người dùng đã hiểu nó không cần tập trung vào văn bản; họ có thể đi thẳng
đến trường nhập liệu.
366Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Hộp thoại in Microsoft Word

Mô tả dài hơn có thể được sử dụng trongGợi ý đầu vàokhi cần thiết. Các ví dụ từ trang đăng ký của Gmail,
được hiển thị trong Hình 8-12, có độ dài tùy ý mà bạn muốn đặt bên cạnh trường văn bản—người dùng có
thể nhấp vào liên kết để biết thêm thông tin. Nhưng hầu hết người dùng sẽ không bao giờ nhấp vào liên kết
khi họ điền vào biểu mẫu, đặc biệt nếu họ đang cố gắng hoàn thành nhanh chóng và không có mối quan
tâm lớn nào về quyền riêng tư, vì vậy đừng phụ thuộc vào các trang được liên kết để truyền tải thông tin
quan trọng.

Trang đăng ký Gmail

Địa điểm BloggerGợi ý đầu vàoở ngoài cùng bên phải của biểu mẫu, với các quy tắc nằm ngang giúp căn chỉnh các
điều khiển với các gợi ý của chúng (xem Hình 8-13). Đây là một cách duyên dáng để cấu trúc một trang đầy đủ
củaGợi ý đầu vào.
 các mẫu367

Trang đăng ký Blogger

Một số biểu mẫu hiển thị mộtGợi ý đầu vàokhi người dùng đặt tiêu điểm đầu vào vào chính trường văn bản (xem
Hình 8-14). Điều này thật tuyệt vì các gợi ý ẩn không làm lộn xộn giao diện hoặc thêm nhiễu hình ảnh; tuy nhiên,
người dùng hoàn toàn không nhìn thấy chúng cho đến khi anh ta nhấp vào (hoặc tab vào) trường văn bản. Nếu
bạn sử dụng những thứ này, hãy lưu ý rằng bạn phải chừa khoảng trống cho chúng trong giao diện, giống như
cách bạn làm vớiCông cụ di chuột(Chương 6). Twitter, được hiển thị đầu tiên trong ví dụ này, sử dụng cả hai loại.
368Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Các trang đăng ký Twitter, Yahoo! và Hotmail, tất cả đều có Gợi ý đầu vào động

http://quince.infragistics.com/Patterns/Input%20Hints.aspx
 các mẫu369

Yahoo! trang đăng ký

Điền trước một trường văn bản hoặc trình đơn thả xuống bằng lời nhắc cho người dùng biết phải làm gì hoặc nhập gì.

Giao diện người dùng trình bày trường văn bản, hộp thả xuống hoặc hộp tổ hợp để nhập liệu. Thông thường, bạn sẽ sử
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

dụng một giá trị mặc định tốt, nhưng trong trường hợp này thì bạn không thể—có lẽ không có giá trị mặc định hợp lý, như
trong Yahoo! dạng trong Hình 8-15.

Nó giúp làm cho giao diện người dùng trở nên dễ hiểu. GiốngGợi ý đầu vào,MỘTDấu nhắc đầu vàolà một cách lén lút
cung cấp thông tin trợ giúp cho các điều khiển mà mục đích hoặc định dạng có thể không rõ ràng ngay lập tức.

Với mộtGợi ý đầu vào, ai đó quét nhanh giao diện người dùng có thể dễ dàng bỏ qua gợi ý (hoặc bỏ lỡ
hoàn toàn). Đôi khi đây là kết quả mong muốn của bạn. Nhưng mộtDấu nhắc đầu vàonằm ngay nơi
người dùng sẽ gõ, vì vậy không thể bỏ qua. Ưu điểm ở đây là người dùng không phải đoán xem cô ấy
có phải đối phó với điều khiển này hay không—bản thân điều khiển cho cô ấy biết rằng cô ấy làm vậy.
(Hãy nhớ rằng người dùng không điền vào các biểu mẫu cho vui—họ sẽ làm ít nhất có thể để hoàn
thành và rời khỏi đó.) Một câu hỏi hoặc mệnh lệnh “Điền cho tôi vào!” có khả năng được chú ý.

Một tác dụng phụ thú vị của mẫu này là người dùng thậm chí có thể không buồn đọc
nhãn ở đầu trường văn bản. Xem lại Hình 8-15. Nhãn “Tên” bây giờ hoàn toàn không
cần thiết, xét về ý nghĩa của biểu mẫu. Bởi vì mắt của người dùng sẽ bị thu hút đầu tiên
vào các trường văn bản, lời nhắc “Tên” và “Họ” có thể sẽ được đọc trước nhãn “Tên”!
Điều đó đang được nói, không xóa nhãn—lời nhắc đó sẽ biến mất sau khi người dùng
nhập vào nó và trong lần đọc biểu mẫu này tiếp theo, cô ấy có thể không nhớ điều
khiển yêu cầu điều gì.
Nếu bạn rất cẩn thận để triển khai mẫu này một cách chính xác, bạn có thể loại bỏ nhãn
hoàn toàn. Lời nhắc phải được đặt lại khi người dùng xóa giá trị và thông tin được yêu cầu
phải rất quen thuộc với người dùng (chẳng hạn như tên hoặc email).
370Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Chọn một chuỗi lời nhắc thích hợp, có thể bắt đầu bằng một trong những từ sau:

• Đối với danh sách thả xuống, hãy sử dụngChọn, Chọn,hoặcNhặt.

• Đối với trường văn bản, hãy sử dụngKiểuhoặcĐi vào.

Kết thúc nó bằng một danh từ mô tả đầu vào là gì, chẳng hạn như “Chọn trạng thái”, “Nhập tin
nhắn của bạn vào đây” hoặc “Nhập tên bệnh nhân”. Đặt cụm từ này vào điều khiển nơi thường
có giá trị. (Bản thân lời nhắc không nên là một giá trị có thể chọn trong danh sách thả xuống;
nếu người dùng chọn nó, sẽ không rõ phần mềm sẽ làm gì với nó.)

Vì mục đích của bài tập là nói cho người dùng biết họ phải làm gì trước khi tiếp tục,
đừng để thao tác tiếp tục cho đến khi họ hoàn thành! Miễn là lời nhắc vẫn chưa được
chạm vào trong điều khiển, hãy tắt nút (hoặc thiết bị khác) cho phép người dùng hoàn
thành phần thao tác này. Bằng cách đó, bạn sẽ không phải gửi thông báo lỗi cho người
dùng.
Đối với các trường văn bản, hãy đặt lời nhắc trở lại trường ngay sau khi người dùng xóa phản hồi đã
nhập.

Sử dụngMặc định tốtthay vì mộtDấu nhắc đầu vàokhi bạn có thể đoán rất chính xác về
giá trị mà người dùng sẽ đưa vào. Ví dụ: địa chỉ email của người dùng có thể đã
được nhập ở một nơi khác và quốc gia gốc thường có thể được các trang web phát
hiện.

Hình 8-16 và 8-17 là hai ví dụ về các dạng phụ thuộc vàoDấu nhắc đầu vào, trong trường hợp không có
nhãn thực tế. Cả hai đều yêu cầu những câu trả lời rất đơn giản, dễ hiểu mà người dùng có thể nhập
hoặc chọn mà không cần suy nghĩ nhiều về chúng. Cả hai đặtDấu nhắc đầu vàoquay lại trường nếu
không có giá trị do người dùng nhập, như được hiển thị trong ảnh chụp màn hình thứ hai trong mỗi ví
dụ. (Apple sau đó chuyển trường sang màu vàng để củng cố rằng giá trị là bắt buộc để hoàn thành
biểu mẫu; đây là một biến thể nhẹ nhàng củaThông báo lỗi cùng trang.)

Ví dụ về Văn hóa ẩm thực thể hiện cái nhìn trực quan nổi bật có thể đạt được bằng sự kết
hợp khéo léo giữa kiểu chữ, thiết kế biểu tượng vàDấu nhắc đầu vào.

Hình thức mua hàng của Apple

 các mẫu371

CulinaryCulture.com

http://quince.infragistics.com/Patterns/Input%20Prompt.aspx

http://ui-patterns.com/patterns/InputPrompt

Trang đăng ký Gmail

Cung cấp cho người dùng phản hồi ngay lập tức về tính hợp lệ và độ mạnh của mật khẩu mới trong khi nó
đang được nhập.
372Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Giao diện người dùng yêu cầu người dùng chọn một mật khẩu mới. Điều này là khá phổ biến cho đăng ký trang
web. Trang web hoặc hệ thống của bạn quan tâm đến việc có mật khẩu mạnh và bạn muốn chủ động giúp người
dùng chọn những mật khẩu tốt.

Mật khẩu mạnh bảo vệ cả người dùng cá nhân và toàn bộ trang web, đặc biệt khi trang
web xử lý thông tin nhạy cảm và/hoặc tương tác xã hội. Mật khẩu yếu không được phép
vì chúng cho phép đột nhập.
MỘTMáy đo độ mạnh mật khẩuđưa ra phản hồi ngay lập tức cho người dùng về mật khẩu mới của mình,
nó có đủ mạnh hay không? Anh ta có cần tạo một cái mới không, và nếu có thì với những đặc điểm
nào (số, chữ in hoa, v.v.)? Nếu hệ thống của bạn định từ chối mật khẩu yếu, tốt nhất bạn nên thực
hiện ngay lập tức, không phải sau khi người dùng đã gửi biểu mẫu đăng ký.

Trong khi người dùng nhập mật khẩu mới của mình hoặc sau khi tiêu điểm bàn phím rời khỏi trường văn bản, hãy
hiển thị ước tính độ mạnh của mật khẩu bên cạnh trường văn bản. Ở mức tối thiểu, hiển thị nhãn văn bản và/hoặc
đồ họa cho biết mật khẩu yếu, trung bình hoặc mạnh và từ ngữ đặc biệt để mô tả mật khẩu quá ngắn hoặc không
hợp lệ. Màu sắc hữu ích: màu đỏ là không thể chấp nhận được, xanh lá cây hoặc xanh dương là tốt và một số màu
khác (thường là màu vàng) ở giữa.

Nếu có thể, hãy hiển thị văn bản bổ sung với lời khuyên cụ thể về cách tạo mật khẩu
yếu tốt hơn—độ dài tối thiểu tám ký tự (ví dụ) hoặc bao gồm số hoặc chữ in hoa. Người
dùng có thể bực bội nếu anh ta liên tục không tạo được mật khẩu hợp lệ, vì vậy hãy
giúp anh ta thành công.
Ngoài ra, biểu mẫu chứa trường mật khẩu nên sử dụngGợi ý đầu vàohoặc văn bản khác để giải thích
điều này trước. Một lời nhắc ngắn về phỏng đoán mật khẩu tốt có thể hữu ích cho những người dùng
cần lời nhắc và nếu hệ thống của bạn thực sự từ chối mật khẩu yếu, bạn nên cảnh báo người dùng về
điều đó trước khi họ hoàn thành biểu mẫu! Nhiều hệ thống yêu cầu số lượng ký tự tối thiểu cho một
mật khẩu hợp lệ, chẳng hạn như sáu hoặc tám.

(Hãy nhớ rằng, không bao giờ thực sự hiển thị mật khẩu và không đưa ra đề xuất về mật khẩu thay thế. Gợi
ý chung là tất cả những gì bạn thực sự có thể đưa ra.)

Giải thích về bảo mật mật khẩu nằm ngoài phạm vi của mẫu giao diện người dùng. Tuy nhiên, có
những tài liệu tham khảo trực tuyến và bản in tuyệt vời cho chủ đề này, tuy nhiên, nếu bạn cần hiểu
sâu hơn về nó.
 các mẫu373

của người viết blogMáy đo độ mạnh mật khẩu, được minh họa trong Hình 8-19, hiển thị năm
trạng thái, một trong số đó (“Quá ngắn”) cho người dùng biết cụ thể cách sửa mật khẩu—
bắt buộc phải có tám ký tự. Liên kết màu xanh hiển thị một cửa sổ mô tả cách tạo mật khẩu
mạnh và có mộtGợi ý đầu vào(không hiển thị) ở phía bên phải cho người dùng biết về tối
thiểu tám ký tự.

Năm trạng thái của Blogger

MSN chỉ hiển thị ba trạng thái (xem Hình 8-20). Nó cũng sử dụng mộtGợi ý đầu vàođể mô tả mức
tối thiểu—“Tối thiểu sáu ký tự không có khoảng trắng”—và cung cấp liên kết đến phần giải thích
chi tiết hơn. Đồng hồ này có trọng lượng nặng hơn so với của Blogger.
374Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Ba trạng thái của MSN

Yahoo! cung cấp lời khuyên cụ thể, chi tiết về mật khẩu ở hai dạng khác nhauGợi ý đầu vàoxuất hiện khi
trường mật khẩu nhận được tiêu điểm đầu vào (xem Hình 8-21).

Yahoo!

http://ui-patterns.com/patterns/PasswordStrengthMeter

Mã để kiểm tra mật khẩu có sẵn cho JavaScript và các ngôn ngữ khác. Tìm kiếm trực tuyến không chỉ
cho thuật ngữmáy đo độ mạnh mật khẩunhưng cũngmáy đo mật khẩu, kiểm tra mật khẩu, và các
biến thể khác.
 các mẫu375

amazon

Khi người dùng nhập vào một trường văn bản, dự đoán các câu trả lời có thể có, hiển thị danh sách có thể
lựa chọn của chúng và tự động hoàn thành mục nhập khi thích hợp.

Người dùng nhập nội dung nào đó có thể dự đoán được, chẳng hạn như URL, tên hoặc địa chỉ của chính
người dùng, ngày hôm nay hoặc tên tệp. Bạn có thể đoán hợp lý xem cô ấy đang cố gắng nhập nội dung gì
—chẳng hạn như có thể có một lịch sử đã lưu về những nội dung mà người dùng này đã nhập trước đó
hoặc có thể cô ấy đang chọn từ một tập hợp các giá trị có sẵn, chẳng hạn như danh sách tên tệp trong một
danh mục.

Hộp tìm kiếm, trường URL trình duyệt, trường email, biểu mẫu web phổ biến (chẳng hạn như đăng ký hoặc
mua trang web), trình soạn thảo văn bản và dòng lệnh dường như dễ sử dụng hơn nhiều khi
được hỗ trợ bởitự động hoàn thành.

tự động hoàn thànhtiết kiệm thời gian, năng lượng, gánh nặng nhận thức và căng thẳng cổ tay cho người dùng. Nó biến nỗ lực

đánh máy tốn nhiều công sức thành một danh sách lựa chọn đơn giản (hoặc ít hơn, nếu việc hoàn thành đơn lẻ có thể được cung

cấp một cách đáng tin cậy). Do đó, bạn có thể tiết kiệm cho người dùng của mình vô số giây làm việc và góp phần mang lại sức

khỏe tốt cho hàng nghìn cổ tay.

Khi các mục đã nhập dài và khó nhập (hoặc khó nhớ), chẳng hạn như URL hoặc địa chỉ
email,tự động hoàn thànhlà khá có giá trị. Nó làm giảm gánh nặng bộ nhớ của người dùng
bằng cách cung cấp “kiến thức trên thế giới” ở dạng danh sách thả xuống. Một lợi ích bổ
sung có thể là ngăn ngừa lỗi: chuỗi phải được nhập càng dài hoặc lạ, tỷ lệ người dùng mắc
lỗi đánh máy càng cao. Các mục nhập tự động hoàn thành không có vấn đề như vậy.
376Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Đối với thiết bị di động, nó thậm chí còn có giá trị hơn. Gõ văn bản trên một thiết bị nhỏ không có gì thú vị;
nếu người dùng cần nhập một chuỗi ký tự dài, thích hợptự động hoàn thànhcó thể tiết kiệm cho cô ấy rất
nhiều thời gian và sự thất vọng. Một lần nữa, địa chỉ email và URL là những ứng cử viên xuất sắc, để hỗ trợ
việc sử dụng web và email di động.

tự động hoàn thànhcũng phổ biến trong trình soạn thảo văn bản và giao diện người dùng dòng lệnh. Khi người dùng

nhập lệnh hoặc cụm từ, ứng dụng hoặc trình bao có thể đưa ra các đề xuất để hoàn thành. Trình chỉnh sửa mã và
trình bao hệ điều hành rất phù hợp cho việc này, vì ngôn ngữ được sử dụng bị hạn chế và có thể dự đoán được
(trái ngược với ngôn ngữ của con người, chẳng hạn như tiếng Anh); do đó, việc đoán những gì người dùng cố gắng
nhập sẽ dễ dàng hơn.

Cuối cùng, các danh sách tự động hoàn thành có thể đóng vai trò là bản đồ hoặc hướng dẫn đến thế giới nội dung
rộng lớn. Các công cụ tìm kiếm và hộp tìm kiếm trên toàn trang web thực hiện tốt việc này—khi người dùng nhập
phần đầu của một cụm từ, mộttự động hoàn thànhtrình đơn thả xuống hiển thị các phần hoàn thành có khả năng
mà người khác đã nhập (hoặc đề cập đến nội dung có sẵn). Do đó, những chỉnh sửa nhỏ và hướng dẫn nhẹ nhàng
được cung cấp cho người dùng tò mò hoặc không chắc chắn, đồng thời đưa ra cách điều hướng một góc nhỏ của
bối cảnh tinh thần công cộng.

Với mỗi ký tự bổ sung mà người dùng nhập, phần mềm sẽ lặng lẽ tạo một danh sách các cách hoàn thành
có thể có đối với chuỗi đã nhập một phần đó. Nếu người dùng nhập một trong số các giá trị hợp lệ có thể
có, hãy sử dụng tập hợp các giá trị hợp lệ đó. Nếu các giá trị có thể được mở rộng, một trong số các giá trị
này có thể cung cấp các lần hoàn thành:

• Các mục trước do người dùng này nhập, được lưu trữ trong cơ chế lịch sử hoặc tùy chọn

• Các cụm từ phổ biến mà nhiều người dùng đã sử dụng trước đây, được cung cấp dưới dạng “từ điển” tích
hợp sẵn cho ứng dụng

• Các kết quả phù hợp có thể được rút ra từ nội dung đang được tìm kiếm hoặc sử dụng, như đối với hộp tìm kiếm trên
toàn trang web

• Các tạo phẩm khác phù hợp với ngữ cảnh, chẳng hạn như danh sách liên hệ toàn công ty cho email
nội bộ

Từ đây, bạn có thể tiếp cận thiết kế tương tác củatự động hoàn thànhtrong hai cách. Một là hiển thị cho
người dùng một danh sách các khả năng hoàn thành có thể theo yêu cầu—ví dụ: bằng cách nhấn
phím Tab—và để anh ta chọn một cách rõ ràng bằng cách chọn từ danh sách đó. Nhiều trình soạn
thảo mã thực hiện việc này (xem Hình 8-26 trong phần Ví dụ). Nó có thể được sử dụng tốt hơn khi
người dùng nhận ra những gì anh ta muốn khi nhìn thấy nó, nhưng có thể không nhớ cách nhập nó
nếu không có sự trợ giúp. “Kiến thức trên thế giới tốt hơn kiến thức trong đầu.”

Một cách khác là đợi cho đến khi chỉ còn một phần hoàn thành hợp lý, sau đó đặt nó trước mặt người dùng
mà không cần nhắc. Word thực hiện điều này với một mẹo công cụ; nhiều biểu mẫu thực hiện điều đó bằng
cách điền vào phần còn lại của mục nhập nhưng với lựa chọn được bật, do đó, một lần nhấn phím khác sẽ
xóa phần tự động hoàn thành. Dù bằng cách nào, người dùng có quyền lựa chọn về việc có giữ lạitự động
hoàn thànhhoặc không—và mặc định là không giữ nó.
 các mẫu377

Bạn có thể sử dụng đồng thời cả hai phương pháp, như trong Hình 8-26.

Đảm bảo rằngtự động hoàn thànhkhông gây khó chịu cho người dùng. Nếu bạn đoán sai, người dùng
sẽ không thích nó—sau đó anh ta phải xóatự động hoàn thànhvà nhập lại những gì anh ấy muốn nói
ngay từ đầu, tránh cótự động hoàn thànhchọn hoàn thành sai một lần nữa. Những chi tiết tương tác
này có thể giúp ngăn ngừa kích ứng:

• Luôn cung cấp cho người dùng lựa chọn hoàn thành hoặc không hoàn thành; mặc định là “không”.

• Không can thiệp vào việc đánh máy thông thường. Nếu người dùng có ý định gõ một chuỗi nhất
định và cứ tiếp tục gõ mặc dù đã cố gắngtự động hoàn thành, hãy đảm bảo rằng kết quả là nội dung
mà người dùng dự định nhập.

• Nếu người dùng tiếp tục từ chối một sốtự động hoàn thànhở một nơi, không tiếp tục cung cấp nó. Hãy để
nó đi tại một số điểm.

• Đoán đúng.
Đây là một cách có thể để thực hiệntự động hoàn thànhmột cách rẻ mạt. Bạn có thể biến trường văn bản
thành hộp tổ hợp (là sự kết hợp giữa trường văn bản có thể nhập và trình đơn thả xuống). Mỗi khi người
dùng nhập một giá trị duy nhất vào trường văn bản, hãy tạo một mục thả xuống mới cho giá trị đó. Bây giờ,
nếu bộ công cụ GUI của bạn cho phép nhập trước trong các hộp tổ hợp (cũng như nhiều hộp khác), các mục
thả xuống sẽ tự động được sử dụng để hoàn thành bất kỳ thứ gì người dùng nhập. Tham khảo lại Hình 8-22
ở đầu mẫu để biết ví dụ điển hình; hầu hết các trình duyệt web hiện giữ các trang web được truy cập gần
đây nhất trong hộp tổ hợp nơi người dùng nhập URL.

Tất nhiên, nhiều ứng dụng email khách sử dụngtự động hoàn thànhđể giúp người dùng điền vào các
trường Đến: và CC:. Chúng thường dựa trên sổ địa chỉ, danh sách liên hệ hoặc danh sách các địa chỉ
mà bạn đã trao đổi email. Ví dụ từ Mac Mail, được hiển thị trong Hình 8-23, hiển thị một lần hoàn
thành duy nhất được đề xuất khi nhập chữ cáic;văn bản đã hoàn thành sẽ tự động được tô sáng, do
đó, một lần nhấn phím có thể loại bỏ nó. Do đó, bạn có thể gõ thẳng “thông qua” phần hoàn thành
nếu nó sai.

thư Mac

Danh sách thả xuống củatự động hoàn thànhkhả năng có thể có nhiều hình thức. Hình 8-24 cho thấy
một số ví dụ về định dạng danh sách thả xuống.
378Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Ngược chiều kim đồng hồ từ trên cùng bên trái: Chrome, Firefox, Kayak, Google, Safari cho iPhone và
Mac OS Spotlight

Dopplr, được hiển thị trong Hình 8-25, không hiển thị toàn bộ danh sách dài các lần hoàn thành. Thay vào
đó, nó chỉ đơn giản cho người dùng biết rằng có 40 khả năng hoàn thành (ví dụ) và đặt chúng sau một liên
kết.
 các mẫu379

Dopplr

Cuối cùng, các trình soạn thảo mã như Visual Studio đầu tư rất phức tạptự động hoàn thànhcơ
chế (xem Hình 8-26). Tất nhiên, IntelliSense của Visual Studio hoàn thành các từ khóa có sẵn
của ngôn ngữ lập trình, nhưng nó cũng dựa trên các hàm, lớp và tên biến do người dùng
xác định. Nó thậm chí có thể hiển thị các đối số cho các chức năng mà bạn gọi (trong ảnh
chụp màn hình bên tay phải). Hơn nữa, cả hai cách tiếp cận “chọn từ danh sách” và “hoàn
thành một lần phù hợp” đều được hỗ trợ và bạn có thể gọitự động hoàn thành
theo yêu cầu bằng cách nhấn Ctrl-space bar.

tự động hoàn thànhtrong Visual Studio do đó đóng vai trò là công cụ hỗ trợ đánh máy, hỗ trợ bộ nhớ và trình
duyệt các chức năng và lớp phù hợp với ngữ cảnh. Nó rất hữu ích.

Visual Studio

http://developer.yahoo.com/ypatterns/selection/autocomplete.html

http://ui-patterns.com/patterns/Autocomplete

http://patternry.com/p=autocomplete/ http://www.welie.com/patterns/

showPattern.php?patternID=autocomplete (Lưu ý rằng hầu hết các thư viện

khác gọi mẫu này là "Tự động điền.")

380Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Phần mềm soạn thảo văn bản

Mở rộng khái niệm menu bằng cách sử dụng bảng điều khiển thả xuống hoặc bật lên để chứa giao diện người
dùng lựa chọn giá trị phức tạp hơn.

Người dùng cần cung cấp đầu vào là lựa chọn từ một tập hợp (chẳng hạn như trong ví dụ màu ở Hình 8-27),
ngày hoặc giờ, số hoặc bất kỳ thứ gì khác ngoài văn bản tự do được nhập trên bàn phím. Bạn muốn cung
cấp một giao diện người dùng hỗ trợ lựa chọn đó—ví dụ: một kết xuất trực quan đẹp mắt của các lựa chọn
hoặc các công cụ tương tác—nhưng bạn không muốn sử dụng không gian trên trang chính cho việc đó;
một không gian nhỏ hiển thị giá trị hiện tại là tất cả những gì bạn muốn.

Hầu hết người dùng đều rất quen thuộc với điều khiển danh sách thả xuống (được gọi là “hộp tổ hợp” khi
được sử dụng với trường văn bản nhập tự do). Nhiều ứng dụng mở rộng thành công khái niệm này sang
danh sách thả xuống không phải là danh sách đơn giản, chẳng hạn như cây, lưới 2D và bố cục tùy ý. Người
dùng dường như hiểu chúng mà không gặp vấn đề gì, miễn là các nút điều khiển có các nút mũi tên xuống
để cho biết rằng chúng sẽ mở khi được nhấp.

Bộ chọn thả xuốnggói gọn các giao diện người dùng phức tạp trong một không gian nhỏ, vì vậy chúng là một giải

pháp tốt cho nhiều tình huống. Thanh công cụ, biểu mẫu, hộp thoại và tất cả các loại trang web đều sử dụng
chúng ngay bây giờ. Trang mà người dùng nhìn thấy vẫn đơn giản và trang nhã, đồng thời giao diện người dùng
bộ chọn chỉ hiển thị khi người dùng yêu cầu—một cách thích hợp để che giấu sự phức tạp cho đến khi cần đến.
 các mẫu381

ChoTrình chọn thả xuốngtrạng thái "đã đóng" của điều khiển, hãy hiển thị giá trị hiện tại của điều khiển trong
một nút hoặc trường văn bản. Ở bên phải của nó, đặt một mũi tên xuống. Điều này có thể nằm trong nút
riêng của nó hoặc không, khi bạn thấy phù hợp; thử nghiệm và xem những gì có vẻ tốt và có ý nghĩa với
người dùng của bạn. Một lần nhấp vào mũi tên (hoặc toàn bộ điều khiển) sẽ hiển thị bảng chọn và lần nhấp
thứ hai sẽ đóng lại.

Thiết kế bảng chọn cho lựa chọn mà người dùng cần thực hiện. Làm cho nó tương đối nhỏ và gọn;
cách tổ chức trực quan của nó phải là một định dạng quen thuộc, chẳng hạn như danh sách, bảng,
cây kiểu phác thảo hoặc định dạng chuyên biệt như lịch hoặc máy tính (xem các ví dụ trong phần tiếp
theo). Xem Chương 5 để thảo luận về trình bày danh sách.

Việc cuộn bảng điều khiển sẽ ổn nếu người dùng hiểu rằng đó là lựa chọn từ một tập hợp lớn, chẳng hạn như tệp
từ hệ thống tệp, nhưng hãy nhớ rằng việc cuộn một trong những bảng điều khiển bật lên này không dễ dàng đối
với những người không có kỹ năng hoàn hảo!

Đến lượt mình, các liên kết hoặc nút trên bảng điều khiển có thể hiển thị giao diện người dùng phụ—ví dụ:
hộp thoại trình chọn màu, hộp thoại tìm tệp hoặc trang trợ giúp—giúp người dùng chọn một giá trị. Các
thiết bị này thường là hộp thoại phương thức. Trên thực tế, nếu bạn định sử dụng một trong các hộp thoại
phương thức này làm cách chính để người dùng chọn một giá trị (giả sử bằng cách khởi chạy giá trị đó từ
một nút), bạn có thể sử dụng mộtTrình chọn thả xuốngthay vì đi thẳng đến hộp thoại phương thức. Bảng điều
khiển bật lên có thể chứa các mục phổ biến nhất hoặc được chọn gần đây. Bằng cách làm cho các mục được
chọn thường xuyên trở nên dễ chọn, bạn sẽ giảm tổng thời gian (hoặc số lần nhấp) mà một người dùng
trung bình cần để chọn các giá trị.

Sử dụng các thanh công cụ nhỏ gọn, giàu tính tương tác của PhotoshopBộ chọn thả xuốngmột cách nặng nề. Hai ví
dụ, Brush và Opacity, được hiển thị trong Hình 8-28. Bộ chọn Bút vẽ là một danh sách có thể lựa chọn với một vòng
xoắn—nó có các điều khiển bổ sung như thanh trượt, trường văn bản và nút kéo sang phải (nút hình tròn) để có
nhiều lựa chọn hơn. Bộ chọn Độ mờ là một thanh trượt đơn giản và trường văn bản phía trên nó lặp lại giá trị của
nó.

Photoshop thả xuống

382Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

CácLưới hình thu nhỏmẫu (Chương 5) thường được sử dụng trongBộ chọn thả xuốngthay
cho một menu dựa trên văn bản. Các ví dụ từ PowerPoint (Hình 8-29) và iWeb (Hình
8-30) thể hiện hai kiểuLưới hình thu nhỏ.

Microsoft Powerpoint

Trình chọn thả xuống “Chủ đề” iWeb

 các mẫu383

http://quince.infragistics.com/Patterns/Drop%20Down%20Chooser.aspx

Bạn cũng có thể tìm kiếm trực tuyến các loại cụ thể củaBộ chọn thả xuống, chẳng hạn như bộ chọn màu, bộ
chọn ngày hoặc lịch, bộ chọn phông chữ hoặc thanh trượt số.

Một hộp thoại từ Microsoft Outlook

Hiển thị cả danh sách “nguồn” và “đích” trên cùng một trang; cho phép người dùng di chuyển các mục
giữa chúng, thông qua các nút hoặc kéo và thả.

Bạn đang yêu cầu người dùng tạo danh sách các mục bằng cách chọn chúng từ một danh sách khác. Chẳng hạn,
danh sách nguồn có thể dài—quá dài để dễ dàng hiển thị dưới dạng một tập hợp các hộp kiểm.

Chìa khóa của mẫu này là hiển thị cả hai danh sách trên cùng một trang. Ví dụ, người dùng có thể
xem nội dung là gì—cô ấy không cần phải chuyển đến và từ hộp thoại bộ chọn phương thức.

Một thay thế đơn giản hơn đểTrình tạo danh sáchcó thể là một danh sách các mục hộp kiểm. Cả hai đều giải quyết
vấn đề “chọn một tập hợp con”. Nhưng nếu bạn có một danh sách nguồn rất lớn (chẳng hạn như toàn bộ hệ thống
tệp), danh sách các hộp kiểm sẽ không chia tỷ lệ—người dùng không thể dễ dàng nhìn thấy những gì đã được
kiểm tra và do đó có thể không hiểu rõ những gì cô ấy đã chọn . Cô ấy phải tiếp tục cuộn lên và xuống để xem tất
cả.
384Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Đặt danh sách nguồn và danh sách đích cạnh nhau, từ trái sang phải hoặc từ trên xuống dưới.
Giữa hai danh sách, hãy đặt các nút Thêm và Xóa (trừ khi người dùng của bạn thấy thao tác kéo
và thả là hiển nhiên, không cần giải thích). Bạn có thể gắn nhãn các nút bằng từ, mũi tên hoặc cả
hai.

Mẫu này cũng cung cấp chỗ cho các nút khác. Nếu danh sách đích được sắp xếp theo thứ tự, hãy sử
dụng các nút Di chuyển lên và Di chuyển xuống, như trong Hình 8-31. (Họ cũng có thể có các biểu
tượng mũi tên, thay vì hoặc thêm vào các từ.)

Tùy thuộc vào loại mục mà bạn xử lý, bạn có thể di chuyển các mục theo nghĩa đen từ nguồn
đến đích—để danh sách nguồn “mất” mục—hoặc duy trì danh sách nguồn không thay đổi. Danh
sách các tệp trong hệ thống tệp không nên thay đổi; người dùng sẽ thấy kỳ lạ nếu điều đó xảy
ra, vì họ xem danh sách như vậy là một mô hình của hệ thống tệp cơ bản và các tệp không thực
sự bị xóa. Nhưng danh sách “Các trường khả dụng” trong ví dụ Outlook ở Hình 8-31 không làm
mất các mục. Đó là một cuộc gọi phán xét.

Cung cấp cho danh sách ngữ nghĩa nhiều lựa chọn thay vì một lựa chọn, để người dùng có thể di chuyển số lượng lớn các
mục từ danh sách này sang danh sách khác.

Hầu hết các triển khai hiện đại của mẫu này đều phụ thuộc vào thao tác kéo và thả để di chuyển các mục
giữa các khu vực; nếu những mục đó là trực quan, tất cả đều tốt hơn. Flickr, được minh họa trong Hình 8-32,
thể hiện một cách tiếp cận hiện đại hơn đối vớiTrình tạo danh sách: bạn có thể kéo các mục từ một danh sách
hình ảnh nguồn có khả năng dài vào một nhóm “lô” để thực hiện thao tác trên tất cả các hình ảnh theo lô
cùng một lúc. Văn bản lớn cho người dùng biết phải làm gì vào những thời điểm quan trọng trong quá trình
tương tác, chẳng hạn như bắt đầu một lô mới hoặc xóa hình ảnh khỏi lô.

Flickr

http://www.welie.com/patterns/showPattern.php?patternID=parts-selector
 các mẫu385

Chèo xuồng

Bất cứ khi nào thích hợp, hãy điền trước các trường biểu mẫu với dự đoán tốt nhất của bạn về các giá trị mà người dùng
muốn.

Giao diện người dùng của bạn hỏi người dùng bất kỳ câu hỏi nào yêu cầu đầu vào dạng biểu mẫu (chẳng hạn như
trường văn bản hoặc nút radio) và bạn muốn giảm số lượng công việc mà người dùng phải thực hiện. Có lẽ hầu
hết người dùng sẽ trả lời theo một cách nhất định hoặc người dùng đã cung cấp đủ thông tin theo ngữ cảnh để
giao diện người dùng đưa ra dự đoán chính xác. Đối với các câu hỏi kỹ thuật hoặc bán liên quan, có thể anh ta
không thể biết hoặc không quan tâm đến câu trả lời và “bất cứ điều gì hệ thống quyết định” đều ổn.

Nhưng việc cung cấp giá trị mặc định không phải lúc nào cũng khôn ngoan khi các câu trả lời có thể nhạy cảm
hoặc mang tính chính trị, chẳng hạn như mật khẩu, giới tính hoặc quyền công dân. Việc đưa ra các giả định như
vậy hoặc điền trước các trường với dữ liệu mà bạn nên cẩn thận có thể khiến người dùng khó chịu hoặc tức giận.
(Và vì tình yêu của tất cả những gì tốt đẹp trên thế giới, đừng bỏ chọn hộp kiểm “Vui lòng gửi cho tôi email quảng
cáo” được chọn theo mặc định!)
386Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Bằng cách cung cấp các câu trả lời mặc định hợp lý cho các câu hỏi, bạn tiết kiệm được công việc cho người dùng.
Nó thực sự đơn giản. Bạn dành cho người dùng nỗ lực suy nghĩ hoặc gõ câu trả lời. Việc điền vào biểu mẫu không
bao giờ thú vị, nhưng nếu có câu trả lời mặc định được cung cấp sẽ giảm một nửa thời gian người dùng phải mất
để điền vào biểu mẫu, anh ta sẽ rất biết ơn.

Ngay cả khi mặc định không phải là điều người dùng muốn, thì ít nhất bạn đã đưa ra một ví dụ về loại câu trả lời
được yêu cầu. Chỉ điều đó thôi cũng có thể giúp anh ấy tiết kiệm được vài giây suy nghĩ—hoặc tệ hơn là một thông
báo lỗi.

Đôi khi bạn có thể gặp phải một hậu quả không mong muốn củaMặc định tốt. Nếu người dùng có thể
bỏ qua một trường, câu hỏi đó có thể không “đăng ký” với anh ta trong tâm trí. Anh ta có thể quên
rằng nó đã được hỏi; anh ta có thể không hiểu hàm ý của câu hỏi hoặc của giá trị mặc định. Hành
động nhập câu trả lời, chọn giá trị hoặc nhấp vào nút buộc người dùng phải giải quyết vấn đề một
cách có ý thức và điều đó có thể quan trọng nếu bạn muốn người dùng tìm hiểu ứng dụng một cách
hiệu quả.

Điền trước các trường văn bản, hộp tổ hợp và các điều khiển khác với giá trị mặc định hợp lý.
Bạn có thể làm điều này khi bạn hiển thị trang cho người dùng lần đầu tiên hoặc bạn có thể sử
dụng thông tin mà người dùng cung cấp sớm trong ứng dụng để đặt động các giá trị mặc định
sau này. (Ví dụ: nếu ai đó cung cấp mã zip của Hoa Kỳ, bạn có thể suy ra tiểu bang, quốc gia và
thành phố chỉ từ số đó.)

Đừng chọn một giá trị mặc định chỉ vì bạn cho rằng mình không nên để trống bất kỳ điều khiển nào.
Chỉ làm như vậy khi bạn chắc chắn một cách hợp lý rằng hầu hết người dùng sẽ không thay đổi nó—
nếu không, bạn sẽ tạo thêm công việc cho mọi người. Biết người dùng của bạn!

Các giao diện thỉnh thoảng sử dụng như trình cài đặt phần mềm xứng đáng được lưu ý đặc biệt. Bạn nên
yêu cầu người dùng cung cấp một số thông tin kỹ thuật, chẳng hạn như vị trí cài đặt, trong trường hợp họ
muốn tùy chỉnh nó. Nhưng 90% người dùng có thể sẽ không. Và họ cũng sẽ không quan tâm bạn cài đặt nó
ở đâu - điều đó không quan trọng đối với họ. Vì vậy, việc cung cấp một vị trí mặc định là hoàn toàn hợp lý.
 các mẫu387

Kayak (Hình 8-33) cung cấp các giá trị mặc định khi người dùng bắt đầu tìm kiếm các chuyến bay. Hầu
hết đều khá hợp lý: chuyến bay hạng phổ thông khứ hồi với một khách du lịch là phổ biến và thành
phố “Từ” có thể được lấy từ vị trí địa lý của người dùng hoặc các tìm kiếm trước đó của người dùng.
(Tuy nhiên, ngày khởi hành và ngày đến dường như tùy ý.) Hiệu quả của việc có tất cả các giá trị mặc
định này là người dùng dành ít thời gian hơn để suy nghĩ về các phần đó của biểu mẫu và cô ấy có
được đường dẫn nhanh hơn đến mục tiêu trước mắt của mình—kết quả tìm kiếm.

Khi khung hình ảnh được thay đổi kích thước trong Photoshop, hộp thoại như trong Hình 8-34 xuất hiện.
Ảnh gốc là 476×306, như được hiển thị. Các kích thước này trở thành Chiều rộng và Chiều cao mặc định, rất
thuận tiện cho một số trường hợp sử dụng. Nếu tôi muốn đặt một khung mỏng xung quanh hình ảnh, tôi
có thể bắt đầu với các kích thước hiện có và tăng chúng lên chỉ hai pixel cho mỗi kích thước; nếu tôi muốn
làm cho canvas hình ảnh rộng hơn nhưng không cao hơn, tôi chỉ cần thay đổi trường Chiều rộng; hoặc tôi
chỉ cần nhấp vào OK ngay bây giờ và không có gì thay đổi.

Một hộp thoại từ Photoshop

http://patternry.com/p=good-defaults/ http://ui-

potypes.com/potypes/GoodDefaults
388Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Hộp đăng ký Netflix

Đặt thông báo lỗi biểu mẫu trực tiếp trên trang có biểu mẫu; đánh dấu đầu trang bằng
thông báo lỗi và nếu có thể, hãy đặt các chỉ báo bên cạnh các điều khiển ban đầu.

Người dùng có thể nhập thông tin biểu mẫu mà bằng cách nào đó không được chấp nhận. Chẳng
hạn, họ có thể bỏ qua các trường bắt buộc, nhập số không thể phân tích cú pháp hoặc nhập địa chỉ
email không hợp lệ. Bạn muốn khuyến khích họ thử lại. Bạn muốn chỉ ra lỗi chính tả trước khi chúng
trở thành vấn đề và giúp người dùng đang bối rối hiểu những gì được yêu cầu.

Theo truyền thống, các ứng dụng đã thông báo lỗi cho người dùng thông qua các hộp
thoại phương thức. Những thông báo đó có thể rất hữu ích, chỉ ra vấn đề là gì và bạn
có thể khắc phục nó như thế nào. Vấn đề là bạn phải nhấp vào hộp thoại phương thức
để sửa lỗi. Và khi hộp thoại biến mất, bạn không thể đọc thông báo lỗi nữa! (Có lẽ bạn
phải ghi nhớ tin nhắn.)
Sau đó, khi các biểu mẫu web xuất hiện, các thông báo lỗi thường được báo cáo trên một trang
được tải riêng, hiển thị sau khi bạn nhấp vào nút Gửi. Một lần nữa, bạn có thể đọc tin nhắn,
nhưng bạn phải nhấp vào nút Quay lại để khắc phục sự cố; một khi bạn làm điều đó, tin nhắn đã
biến mất. Sau đó, bạn cần quét biểu mẫu để tìm trường có lỗi, việc này tốn nhiều công sức và dễ
bị lỗi.

Hầu hết các biểu mẫu web hiện đặt thông báo lỗi trên chính biểu mẫu đó. Bằng cách giữ cả thông báo và
điều khiển cùng nhau trên cùng một trang, bạn cho phép người dùng đọc thông báo và thực hiện các chỉnh
sửa biểu mẫu một cách dễ dàng mà không phải nhảy lung tung hoặc ghi nhớ dễ bị lỗi.
 các mẫu389

Thậm chí tốt hơn, một số biểu mẫu web đặt các thông báo lỗi về mặt vật lý bên cạnh các điều
khiển nơi xảy ra lỗi. Giờ đây, người dùng có thể nhìn thoáng qua nơi xảy ra sự cố—không cần
phải tìm kiếm trường vi phạm chỉ dựa trên tên của nó—và hướng dẫn khắc phục sự cố ở ngay tại
đó, dễ dàng nhìn thấy.

Đầu tiên, thiết kế biểu mẫu để ngăn chặn một số loại lỗi. Sử dụng trình đơn thả xuống thay vì trường văn bản mở,
nếu các lựa chọn bị hạn chế và không dễ nhập. Đối với các trường văn bản, cung cấpGợi ý đầu vào,
Lời nhắc đầu vào,định dạng tha thứ,tự động hoàn thành,VàMặc định tốtđể hỗ trợ nhập văn bản.
Đánh dấu rõ ràng tất cả các trường bắt buộc là bắt buộc (có dấu hoa thị) và không yêu cầu quá nhiều
trường bắt buộc ngay từ đầu.

Khi xảy ra lỗi, bạn nên hiển thị một số loại thông báo lỗi ở đầu biểu mẫu, ngay cả khi bạn đặt các
thông báo chi tiết bên cạnh các điều khiển. Đầu tiên là điều đầu tiên mọi người nhìn thấy. (Điều
này cũng tốt cho người dùng khiếm thị—phần đầu của biểu mẫu được đọc cho họ nghe trước, vì
vậy họ biết ngay rằng biểu mẫu có lỗi.) Đặt một hình ảnh thu hút sự chú ý ở đó và sử dụng văn
bản mạnh hơn văn bản nội dung: làm cho nó có màu đỏ và đậm chẳng hạn.

Bây giờ hãy đánh dấu các trường biểu mẫu gây ra lỗi. Đặt các thông báo cụ thể bên cạnh chúng, nếu bạn có thể—
điều này sẽ cần thêm khoảng trống bên cạnh, bên trên hoặc bên dưới các trường—nhưng ít nhất, hãy sử dụng
màu sắc và/hoặc hình ảnh nhỏ để đánh dấu trường, như minh họa trong Hình 8-35 .Người dùng thường liên kết
màu đỏ với các lỗi trong ngữ cảnh này. Sử dụng nó một cách tự do, nhưng vì rất nhiều người bị mù màu đối với
màu đỏ, nên hãy sử dụng các tín hiệu khác: ngôn ngữ, văn bản in đậm (không lớn) và đồ họa.

Nếu bạn đang thiết kế cho Web hoặc một số hệ thống máy khách/máy chủ khác, hãy cố gắng thực
hiện càng nhiều xác thực càng tốt ở phía máy khách. Nó nhanh hơn nhiều. Đặt các thông báo lỗi trên
trang đã được tải, nếu có thể, để tránh phải chờ tải trang.

Hướng dẫn viết thông báo lỗi nằm ngoài phạm vi của mẫu này, nhưng đây là một số hướng
dẫn nhanh:

• Làm cho chúng ngắn gọn, nhưng đủ chi tiết để giải thích cả lĩnh vực đó là gì và điều gì đã sai:
“Bạn chưa cung cấp cho chúng tôi địa chỉ của bạn” so với “Không đủ thông tin”.

• Sử dụng ngôn ngữ thông thường, không phải ngôn ngữ máy tính: “Đó có phải là một chữ cái trong mã zip của bạn
không?” so với "Lỗi xác thực số."

• Hãy lịch sự: “Xin lỗi, nhưng đã xảy ra lỗi! Vui lòng nhấp vào 'Tiếp tục' một lần nữa” thay vì “Lỗi JavaScript
693” hoặc “Biểu mẫu này không chứa dữ liệu.”

Các trang đăng ký của Twitter và Mint (Hình 8-36 và 8-37, tương ứng) hiển thị thông báo lỗi hoặc
thông báo “OK”. Điều này có thể giúp cho các hình thức ngắn.
390Chương 8: Nhận thông tin đầu vào từ người dùng: Biểu mẫu và điều khiển

Trang đăng ký Twitter

Trang đăng ký đúc tiền

Yahoo! sử dụng sự hài hước trong một số thông báo lỗi của nó, trong khi những thông báo khác thì thẳng thắn (xem Hình 8-38).

Yahoo! trang đăng ký

 các mẫu391

Khi bạn thêm một mặt hàng chưa được chỉ định đầy đủ vào giỏ hàng của mình tại trang web của
Hanna Andersson, nó sẽ sử dụng một thông báo nhẹ nhàng để nhắc bạn điền thông tin còn thiếu,
như trong Hình 8-39. (CácDấu nhắc đầu vàothực tế, khiến bạn dễ dàng bỏ qua trường này trên biểu
mẫu.) Sau khi bạn thêm nó, cùng một khoảng trống có thể được sử dụng cho một thông báo quan
tâm bổ sung. Cũng lưu ý rằng khi biểu mẫu phát hiện có đủ thông tin, biểu mẫu sẽ đặt nút Bắt đầu
thanh toán trên biểu mẫu.

Phiếu mua hàng của Hanna Andersson

http://ui-patterns.com/patterns/InputFeedback http://www.welie.com/

patterns/showPattern.php?patternID=input-error

Hai mẫu này được đặt tên là “Phản hồi đầu vào” và “Thông báo lỗi đầu vào”. Bạn có thể
tìm kiếm các biến thể tương tự trên tên mẫu.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Trong năm 2009 và 2010, mạng xã hội trở thành xu hướng chủ đạo. Các công ty, sản phẩm và tổ chức
phi lợi nhuận vội vã thiết lập sự hiện diện trên Facebook, Twitter và các kho phương tiện truyền thông
như Flickr và YouTube. Nếu họ đã có blog, các luồng tin nhắn nhỏ trên Twitter và Facebook đã mang
đến cho những blog đó những đối tượng mới. Các tổ chức phát hiện ra rằng nếu họ xuất bản một
dòng nội dung hấp dẫn đều đặn, khách hàng và những người có ảnh hưởng sẽ chú ý đến họ—và nếu
một phần nội dung “lan truyền”, thương hiệu của tổ chức đó sẽ lan rộng. Miễn phí!

Vâng, không thực sự miễn phí.

Các tổ chức đã nỗ lực rất nhiều để thiết lập sự hiện diện thành công trên mạng xã hội. Có người phải
dành nhiều thời gian để viết và phổ biến nội dung; người khác cần dành thời gian đọc các cuộc trò
chuyện có liên quan trên Web và phản hồi chúng một cách tế nhị. Bất động sản trang chủ có giá trị có
thể hỗ trợ các nỗ lực truyền thông xã hội này và các trang trên các trang khác (chẳng hạn như
Facebook hoặc YouTube) phải được thiết kế và chăm sóc. Và ai đó cần đưa ra một chiến lược tổng thể:
nỗ lực được dành cho đâu, khi nào và cho chủ đề gì?

Một số phương pháp hay nhất đang nổi lên có thể cung cấp thông tin cho những nỗ lực đó. Phương tiện truyền thông xã
hội vẫn là một lĩnh vực non trẻ và các đề xuất cụ thể sẽ thay đổi nhanh chóng qua các tháng và năm. Giống như phần còn
lại của cuốn sách này, các nguyên tắc và mẫu của chương này không phải là những quy tắc khó và nhanh, mặc dù lý tưởng
là chúng sẽ tồn tại lâu hơn các trang web và công nghệ phổ biến nhất của năm 2010.

Chương này sẽ tập trung vào một khía cạnh của tương tác xã hội trực tuyến: cách sử dụng các hình thức
truyền thông xã hội khác nhau để quảng bá thương hiệu, chia sẻ ý tưởng, phổ biến video hoặc biểu hiện
nghệ thuật khác và hỗ trợ doanh nghiệp cụ thể của bạn. Chìa khóa là để có được người theo dõi—những
người tự nguyện lắng nghe những gì bạn nói. Các thương hiệu tạo ra trải nghiệm tuyệt vời cho những
người theo dõi họ có được lượng khán giả khổng lồ từ những nỗ lực truyền thông xã hội của họ. (Ở đây,
chúng tôi sẽ duy trì phạm vi của chương này đủ rộng để bao gồm các “thương hiệu” mang tính cá nhân, phi
lợi nhuận, dựa trên nghệ thuật, có nguyên nhân hoặc chỉ để giải trí.)
394Chương 9: Sử dụng mạng xã hội

Việc sử dụng phương tiện truyền thông xã hội cá nhân thay đổi đáng kể từ người này sang người khác. Có
thể có những cách thực hành tốt nhất để cá nhân sử dụng mạng xã hội—trên thực tế, đó có thể là một cuộc
trò chuyện rất thú vị giữa các học viên. Nhưng cuốn sách này được viết cho các nhà thiết kế trang web và
phần mềm, vì vậy trọng tâm sẽ là những gì các nhà thiết kế đó cần.

Một chủ đề khác mà chương này sẽ không đề cập đến là thiết kế của các cộng đồng trực tuyến. Bản thân đó là một
nghệ thuật, và các mô hình cũng như cách thực hành tốt nhất của nó hơi khác so với những mô hình được mô tả
trong chương này. Khi viết bài này, một số tổ chức và thương hiệu đã xây dựng thành công các cộng đồng trực
tuyến xung quanh thương hiệu của họ, nhưng không có nhiều bằng chứng cho thấy họ thực sự giúp ích cho
thương hiệu. (Nếu thương hiệulàmột cộng đồng trực tuyến, chẳng hạn như Stack Overflow hoặc Ravelry, đó là một
câu chuyện khác; họ có thể khá thành công. Trong mọi trường hợp, chương này không đề cập đến chúng.)

Cuối cùng, nhiều trang web đã xuất hiện sử dụng tương tác xã hội theo những cách sáng tạo.
Delicious, Yelp, Foursquare và những người khác đều đã tạo ra các sản phẩm từ trí tuệ tập thể,
qua trung gian trực tuyến. Tôi hy vọng rằng nhiều loại trang web này sẽ phát sinh trong những
năm tới. Erin Malone và Christian Crumlish đã khéo léo viết về một số cách thu thập và tập trung
ý kiến này trong cuốn sách của họThiết kế giao diện xã hội (O'Reilly,http://oreilly.com/catalog/
9780596154936/).Chương này bổ sung cho cuốn sách đó.

Những nguyên tắc và khuôn mẫu nào bạn nên cân nhắc khi giúp phát triển chiến lược sử dụng mạng
xã hội?

Chủ đề đầu tiên quá rõ ràng và cơ bản đến mức tôi đã cho nó con số không. Đó là điều bạn cần
làm trước khi tạo bất kỳ sự hiện diện nào trên mạng xã hội:

0. Lắng nghe.

Tìm hiểu nơi mọi người đang nói về thương hiệu, sản phẩm, tổ chức của bạn—hoặc đối thủ cạnh
tranh. Ngoài ra, hãy đi xa hơn nữa: những chủ đề rộng nào liên quan đến mục đích hoặc sứ mệnh của
thương hiệu của bạn và mọi người đang nói gì về những chủ đề đó? Nếu tổ chức của bạn có điều gì đó
tích cực để đóng góp, hãy tham gia vào những cuộc trò chuyện đó.

• Tìm các đoạn hội thoại trực tuyến và đọc chúng. Sử dụng các công cụ để giúp bạn giám sát chúng
nếu cần, đặc biệt nếu bạn đang làm việc cho một thương hiệu nổi tiếng với sự hiện diện trực
tuyến mạnh mẽ.

• Đảm bảo rằng tổ chức biết những gì đang được nói về nó, ngay cả khi các bình
luận là tiêu cực.
• Ở những nơi có uy tín với lượng độc giả lớn, chẳng hạn như một số blog nổi
tiếng, hãy nhờ ai đó từ tổ chức của bạn đăng ký và tham gia vào các cuộc trò
chuyện. Làm rõ rằng người đó chính thức đại diện cho tổ chức.
 Khái niệm cơ bản về truyền thông xã hội395

• Khi bạn tham gia, hãy trả lời các câu hỏi, cung cấp thông tin, nhẹ nhàng sửa chữa những nhận thức
sai lầm và thừa nhận những bất bình.

• Thể hiện sự hiện diện có trách nhiệm, trang nghiêm; đừng quá nói nhiều, và đừng quá phòng
thủ. Và giữ lại các quảng cáo chiêu hàng.

Bây giờ chúng ta sẽ nói về các khía cạnh tích cực, sáng tạo của việc sử dụng mạng xã hội. Làm cách nào để bạn xây
dựng sự hiện diện hiệu quả trên mạng xã hội mà mọi người thích theo dõi?

Sáu nguyên tắc sau đây ít nhiều được sắp xếp theo mức độ quan trọng. Ví dụ, nếu bạn
không viết nội dung mà mọi người thích đọc (nguyên tắc 1), thì chẳng ích gì khi bỏ ra công
sức phổ biến nội dung đó hoặc làm cho nội dung đó dễ tìm thấy. Một số đề xuất này sẽ phù
hợp với tình huống của bạn và một số thì không. Đặc biệt, Nguyên tắc 5 và 6 không phổ
biến vì chúng đòi hỏi nhiều nỗ lực.

1. Sản xuất những thứ tốt.

Viết, thiết kế, ghi lại hoặc tạo ra các mặt hàng mà mọi người thích tiêu thụ. Sản xuất chúng
thường xuyên và đủ thường xuyên để giữ cho mọi người quan tâm. Thiết lập các cuộc trò chuyện
xung quanh các mục đó để khiến chúng trở nên hấp dẫn hơn—chẳng hạn như mời nhận xét trên
Facebook—và tự mình tham gia vào các cuộc trò chuyện đó.

• Tạo ra mộtTổng hợp biên tậpđại diện tốt cho tổ chức của bạn. Tạo nội dung gốc thu hút
những người khác nhau, sử dụng hỗn hợp độ dài, phong cách và loại phương tiện (văn
bản, hình ảnh, video, podcast).

• Liên kết đến nội dung của người khác. Sử dụngĐăng lại và bình luậnđể bổ sung cho tài liệu ban
đầu của bạn và ghi công cho các trang đáng giá khác trên Web.

• Đang cóTiếng nói cá nhântrong hỗn hợp của bạn có thể hấp dẫn hơn một tiếng nói chung
chung của công ty.

• Sử dụngNgười bắt đầu cuộc trò chuyệnđể nhắc những người theo dõi phản hồi. Khi ai đó tham gia vào
cuộc trò chuyện với bạn, nhiều khả năng cô ấy sẽ quay lại.

2. Đẩy những thứ hay đó ra cho độc giả.

Truy cập bất cứ nơi nào họ dành thời gian: email, Facebook, Twitter, nguồn cấp dữ liệu RSS, Digg hoặc bất cứ
nơi nào bạn phát hiện ra độc giả của mình đang trực tuyến. Với sự cho phép của độc giả của bạn, đưa nội
dung của bạn vào trang cá nhân của họDòng tin tức(Chương 2)—luồng tin tức và cập nhật hàng ngày mà họ
nhận được qua các dịch vụ đó. (Nói cách khác, hãy biến họ thành những người theo dõi.)

• Sử dụng nhiều kênh hoặc dịch vụ truyền thông xã hội để tiếp cận càng nhiều độc giả
càng tốt. Gặp họ ở đâu; đừng mong đợi họ tham gia một dịch vụ mới chỉ để nhận
thông tin cập nhật của bạn.

• Đừng áp đảo những người theo dõi bạn với quá nhiều nội dung. Sử dụng các dịch vụ khác nhau
một cách khôn ngoan, theo các quy ước được phát triển cho từng dịch vụ. phát triển một
Chiến lược thời gianđể phát hành nội dung.

• Đặtđường liên kết mạng xã hộitrên trang chủ của bạn để hướng người đọc đến các kênh truyền thông xã hội
của bạn; giúp họ dễ dàng trở thành người theo dõi.
396Chương 9: Sử dụng mạng xã hội

• Nếu tổ chức của bạn sản xuất nhiều nội dung và có nhiều đối tượng khác nhau cho các
sản phẩm hoặc chủ đề khác nhau, hãy cân nhắc sử dụngLuồng chuyên biệtthay vì một
dòng nội dung rất bận rộn.

• Sử dụngKim tự tháp Nano đảo ngượcđể viết cập nhật trạng thái, tóm tắt và tiêu đề. Những điều
này thu hút nhiều độc giả hơn khi chúng được viết một cách khéo léo và “lôi kéo” mọi người
đọc thêm nội dung của bạn.

3. Hãy để độc giả quyết định nội dung nào là tốt.

Cung cấp cho người đọc cách chia sẻ nội dung của bạn với những người theo dõi của họ và cho phép người
đọc gửi các mục một cách riêng tư để thắt chặt mối quan hệ. Thu thập phản hồi thông qua hệ thống bỏ
phiếu, tiện ích tán thành/không tán thành và các hệ thống khác. Lưu ý những mục nào có cuộc trò chuyện
tích cực về chúng, vì đây là một tín hiệu khác về tính “tốt”.

• Cung cấp cơ chế để mọi người bình luận về các mục bạn đăng, nhưng phải chọn lọc. Các mục tin tức hoặc bài
đăng trên blog có mức độ quan tâm thấp không thu hút nhiều bình luận và các khu vực bình luận trống
không thu hút sự chú ý. Tuy nhiên, những trang sống động có thể thu hút nhiều độc giả hơn.

• Đặt mộtứng dụng chia sẻbên cạnh bài đăng của bạn để mọi người có thể dễ dàng chia sẻ chúng
với những người theo dõi trên mạng xã hội của họ. Đây là một cơ chế rất mạnh mẽ; nó phổ
biến nội dung của bạn tới nhiều người hơn, thu hút những người chia sẻ và cung cấp cho
bạn dữ liệu về mục nào phổ biến nhất.

• Các nút “Gửi email này” cho phép người đọc gửi các mục một cách riêng tư đến các mối quan
hệ xã hội gần gũi hơn của họ. Người nhận có thể sẽ đọc các bài báo được gửi qua email, vì
ai đó mà họ biết đã giới thiệu cụ thể bài báo đó cho họ; trường hợp nàyĐề nghị cá nhân
(Chương 1) là mạnh mẽ.

• Khi bạn đăng các mục như mô tả sản phẩm hoặc công thức nấu ăn—những mục mà các bài
đánh giá tiêu cực sẽ không ảnh hưởng xấu đến tổ chức của bạn—hãy cân nhắc để mọi
người đánh giá hoặc xếp hạng các mục này. Trí tuệ tập thể của họ có thể xác định cái xấu và
cái tốt cho những độc giả khác. (Tuy nhiên, bạn có thể gặp rắc rối nếu yêu cầu mọi người
đánh giá các hạng mục mà tổ chức của bạn trực tiếp sản xuất và đầu tư vào.)

• Cho phép người xem “bình chọn” nội dung họ yêu thích. Bạn có thể thực hiện việc này bằng
điều khiển “Thích”, dấu sao, biểu tượng thích hoặc một số cơ chế khác. Để biết thêm chi tiết,
hãy xem mẫu “Bỏ phiếu để Quảng cáo” trong Yahoo! thư viện mẫu hoặc trongThiết kế giao
diện xã hội.

4. Làm cho những thứ tốt có thể tìm thấy được.

Tổ chức tốt trang chủ của bạn; thường xuyên đưa nội dung mới vào đó và sử dụng thanh bên để hiển thị các
mục được xem nhiều nhất, danh sách hay nhất và các chế độ xem khác vào thư viện mục nội dung của bạn.
Hiển thị các mục có liên quan cho những người dùng nhấp qua và cung cấp các mục và cuộc hội thoại đã lưu
trữ. Đặt nội dung của bạn ở nơi mà các công cụ tìm kiếm có thể tìm thấy, bởi vì về lâu dài, đó là cách mà hầu
hết mọi người sẽ tiếp cận nội dung đó.
 Khái niệm cơ bản về truyền thông xã hội397

• Đặt mộthộp tin tứctrên trang chủ của bạn để hiển thị các bài báo, mục tin tức, bài đăng trên
blog, video, v.v. gần đây nhất của bạn. Đây thường là những “đối tượng xã hội”, được phổ
biến qua mạng xã hội và được công chúng bình luận.

• Nếu bạn thu thập dữ liệu về số lần một mục được chia sẻ, gửi email, xếp hạng hoặc nhận
xét, bạn có thể tạo mộtBảng xếp hạng nội dungđể giới thiệu các mặt hàng phổ biến nhất.

• Cân nhắc tạo danh sách “tốt nhất” cho blog, thư viện video hoặc bộ sưu tập nội dung lớn
khác của bạn. Điều này cung cấp cho người mới một nơi thuận tiện để bắt đầu. Đảm
bảo ai đó quản lý nó một cách thành thạo để nó vừa chính xác vừa mới mẻ.

• Khi người đọc nhấp chuột vào bài đăng trên blog, mục tin tức, v.v., hãy hiển thị cho anh ta
một tập hợp các liên kết đến nội dung liên quan. Có lẽ người đọc quan tâm đến chủ đề này;
anh ấy có muốn đọc thêm tài liệu về cùng chủ đề không? Giữ cho anh ấy đọc và nhấp qua
các trang trên trang web của bạn.

• Kiểm tra xem tài liệu của bạn có hiển thị trên các công cụ tìm kiếm không. Đảm bảo tiêu đề và siêu dữ liệu
khác xác định rõ các mục nội dung. Ngoài ra, hãy kiểm tra xem hộp tìm kiếm trên trang web của bạn có
tìm đúng nội dung không.

• Duy trì danh tính truyền thông xã hội ổn định, nổi tiếng. Một người dùng Facebook ngẫu nhiên có thể tìm
đúng trang Facebook thông qua tìm kiếm tên tổ chức của bạn không? Hay cô ấy phải truy cập trang
web thực tế của bạn và làm theođường liên kết mạng xã hộiđể đến đó? (Điều đó cũng có thể xảy ra, tất
nhiên, nhưng việc tìm kiếm trong một trang web truyền thông xã hội sẽ tốn ít công sức hơn cho người
dùng.)

5. Kết hợp những điều tốt đẹp của độc giả với những điều tốt đẹp của bạn.

Xuất bản các bài báo do khách viết, bài đăng trên blog, bài đánh giá và video nghiệp dư. Tổ chức các
cuộc thi ảnh và khoe những bức ảnh đoạt giải—tất nhiên là có ghi công. Hầu hết các tổ chức không
bao giờ đạt đến điểm này, điều đó không sao cả; nó không phù hợp với mọi công ty hoặc tổ chức phi
lợi nhuận. Nhưng khi những người theo dõi bạn vừa nhiệt tình vừa tài năng, hãy hợp tác với họ!

6. Nuôi dưỡng cộng đồng.

Một lần nữa, điều này không phù hợp với mọi tổ chức, nhưng một số tổ chức đã xây dựng toàn bộ
cộng đồng trực tuyến xung quanh một ý tưởng hoặc hoạt động được nhiều người yêu thích—làm
vườn, trò chơi, âm nhạc, công nghệ, v.v. Không có nhiều bằng chứng cho thấy cộng đồng thực sự giúp
xây dựng thương hiệu hoặc tăng thị phần, vì vậy đừng tin vào điều đó. những gì nàyCó thểlàm là cung
cấp cho mọi người một nơi trực tuyến để đến, nơi họ có thể đặt câu hỏi, hình thành tình bạn, chia sẻ ý
tưởng, giúp đỡ lẫn nhau, trút bầu tâm sự, ngớ ngẩn và chia sẻ những điều mà họ (không phải bạn)
đánh giá là thú vị.
398Chương 9: Sử dụng mạng xã hội

Cân nhắc sử dụng các mẫu sau để sản xuất nội dung xã hội:
1.Tổng hợp biên tập

2.Tiếng nói cá nhân

3.Đăng lại và bình luận

4.Người bắt đầu cuộc trò chuyện

5.Kim tự tháp Nano đảo ngược

Khi bạn thiết kế các cơ chế về thời gian, địa điểm và cách phổ biến nội dung, hãy sử dụng những cơ chế sau:

6.Chiến lược thời gian

7.Luồng chuyên biệt

số 8.đường liên kết mạng xã hội

9.ứng dụng chia sẻ

10.hộp tin tức

11.Bảng xếp hạng nội dung

12.trò chuyện gần đây

Các chủ đề được Epicurious đề cập trên Facebook

 các mẫu399

Xuất bản một loạt bài báo hoặc liên kết thông thường bao gồm hỗn hợp tin tức, phần quan tâm
của con người, ảnh, video, thông báo dịch vụ công cộng và các loại nội dung khác. Hầu hết thời
gian, hãy tránh tự quảng cáo trực tiếp.

Bạn muốn tăng sự công nhận tên tuổi, thiện chí đối với tổ chức của mình, kết nối với khách
hàng và có thể là bán hàng. Bạn muốn người đọc theo dõi và thưởng thức nội dung bạn
xuất bản và bạn có tài nguyên để tìm hoặc sản xuất nội dung đó.

Một loạt các chủ đề và loại phương tiện truyền thông sẽ thu hút nhiều nhóm người hơn là một nhóm sở
thích hẹp hơn. Một số người trong số đó có thể tìm hiểu về các chủ đề mà nếu không thì họ sẽ không biết,
đơn giản chỉ vì bạn đã đưa chủ đề đó vào luồng của họ.

Một điểm cơ bản hơn là bản thân mỗi tác phẩm cần phải thú vị. Bạn muốn những người theo dõi đọc những phần
bạn viết, theo các liên kết bạn đăng, xem video của bạn và mong chờ các bài đăng trong tương lai của bạn. Tốt hơn
nữa, bạn muốn những người theo dõi mình đăng lại các mục đó cho những người theo dõi riêng của họ và có mối
quan hệ thân thiết—điều này giúp tên tuổi của bạn được nhiều người biết đến hơn theo kiểu lan truyền. Sau đó,
một số người trong số họ có thể chọn theo dõi bạn.

Chọn một tập hợp các chủ đề vừa liên quan đến nhiệm vụ của bạn vừa thú vị với nhiều người. Trong số các
tổ chức được nghiên cứu cho chương này, những chủ đề đó bao gồm thực phẩm, thể thao, thiên nhiên, du
lịch, công nghệ xanh, chính trị, nuôi dạy con cái, cứu trợ thiên tai, công nghệ cao và khoa học. Mọi người
đam mê những chủ đề này. Bạn có thể đề cập đến những chủ đề nào gợi lên niềm đam mê và sự quan tâm
cao độ?

Phát triển một hỗn hợp phù hợp với tổ chức của bạn. Tất cả những người sử dụng mạng xã hội thành công
đều có sự pha trộn độc đáo giữa các loại nội dung và chủ đề, mặc dù sự đa dạng và “sự thú vị” là chung cho
tất cả mọi người.

Nội dung dài bằng văn bản có thể được đăng lên blog của bạn. Sau đó, bài đăng trên blog đó có thể được liên kết
từ các trang tiểu blog hoặc dạng tiểu blog ngắn hơn, chẳng hạn như Twitter. (Hầu hết các tổ chức không phổ biến
tất cả các bài đăng trên blog của họ tới các kênh khác này.) Các mục ngắn, tạm thời có thể được đăng trực tiếp lên
các tiểu blog.

Khuyến khích những người theo dõi bình luận về những điều bạn đăng. Điều này có nhiều khả năng xảy ra
trên các mạng xã hội như Facebook hoặc các trang tiểu blog như Twitter. Đôi khi mọi người để lại nhận xét
trên các bài đăng trên blog, nhưng khi viết bài này, các cuộc trò chuyện không diễn ra trên blog khi có các
lựa chọn thay thế tốt hơn.
400Chương 9: Sử dụng mạng xã hội

Đừng quá tải các kênh truyền thông xã hội với quá nhiều nội dung! xemChiến lược thời gian
để biết thêm thông tin về số lượng và thời gian.
Tránh tiếp thị công khai hầu hết thời gian. Tất nhiên, theo nghĩa rộng hơn, tất cả chỉ là tiếp thị; nhưng độc
giả biết khi nào họ đang bị thuyết phục bán hàng và họ không thích điều đó. Họ có thể đã không đăng ký
các bản cập nhật của bạn để bị quảng cáo làm cho mê mẩn. Vì vậy, hầu hết thời gian hãy đăng nội dung
mang tính thông tin hoặc giải trí và giới hạn quảng cáo ở những mặt hàng rất cụ thể và hữu ích—mã giảm
giá, sản phẩm mới hoặc lời nhắc về các sự kiện giảm giá phổ biến. Hãy tự hỏi bản thân trước khi đăng: nếu
những người theo dõi của bạn không thấy điều này, liệu một số người trong số họ có buồn vì đã bỏ lỡ nó
không?

Dưới đây là một số loại nội dung mà bạn có thể xem xét:

• Những bài báo thời sự

• Phỏng vấn các chuyên gia về chủ đề

• Những trích dẫn ngắn gọn, xúc tích và một câu lót

• Đánh giá sản phẩm

• Các bài luận hoặc video về những gì xảy ra “hậu trường” tại tổ chức của bạn
• Công thức nấu ăn và hướng dẫn cách làm

• Thông báo dịch vụ công cộng

• Những cách mà mọi người có thể giúp đỡ với các tổ chức từ thiện hoặc các nỗ lực vị tha khác

• Hài hước

• Ý kiến
• Thư bạn đọc
• Truyện ngắn, có thật hoặc hư cấu

• Biểu diễn âm nhạc hoặc nghệ thuật, thường là trên video

• Trình chiếu
• Podcast
• Câu hỏi nhằm khơi gợi phản ứng của người đọc; xemNgười bắt đầu cuộc trò chuyệnmẫu

• Bình luận thường xuyên từ các nhân viên nổi tiếng; xemTiếng nói cá nhânmẫu
• Bài đăng trên blog của người khác; xemĐăng lại và bình luậnmẫu

Hãy nhớ rằng tài liệu bạn cung cấp trong luồng xã hội của mình sẽ được những người theo dõi của bạn sử
dụng cho mục đích riêng của họ: hình thành hoặc hỗ trợ danh tính trực tuyến (“Tôi quan tâm đến chủ đề
này”), chuyển thông tin đến các mối quan hệ thân thiết của họ, giải trí cho vòng kết nối lớn hơn của họ của
bạn bè, gián tiếp nêu ý kiến, hoặc chỉ kết nối. Những người theo dõi của bạn có sẵn sàng làm điều đó với nội
dung bạn sản xuất không? Nó hài hước, gây tranh cãi, đẹp đẽ, trung thực hay xác thực?
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu401

Starbucks xuất bản nội dung mà khách hàng của họ sẽ quan tâm: các chủ đề bao gồm cà phê, trà, các
sản phẩm đặc biệt của cửa hàng, âm nhạc, nỗ lực vị tha và các chủ đề khác. Một số là bài viết dựa trên
văn bản, một số là video clip và một số được đăng lại từ các nguồn khác. Hình 9-2 hiển thị trang
Facebook của Starbucks.

Các blog của công ty cần đạt được sự cân bằng tinh tế giữa trọng tâm và sự đa dạng của các chủ đề.
Như thể hiện trong Hình 9-3, blog của Whole Foods đề cập đến nhiều chủ đề liên quan đến thực phẩm
tự nhiên, trong khi blog của Google, phản ánh sự đa dạng của các sản phẩm và dịch vụ của Google,
bao gồm nhiều chủ đề hơn.

Trang Facebook của Starbucks

402Chương 9: Sử dụng mạng xã hội

Các tiêu đề từ blog Whole Foods và Google

Nguồn cấp dữ liệu Twitter của Tony Hsieh

 các mẫu403

Khuyến khích các cá nhân sử dụng tiếng nói của chính họ, tách biệt với các luồng truyền thông
xã hội do chính tổ chức xuất bản. Hãy để họ xuất bản blog và viết bài đăng trên blog của khách;
khuyến khích họ sử dụng Twitter và các kênh xã hội khác.

Bạn có những nhà vô địch truyền thông xã hội trong tổ chức của mình—những người sẵn sàng
đưa mình ra khỏi đó, với tư cách là cá nhân và người đại diện. Đây có thể là chuyên gia tên miền,
kỹ sư, người tiếp thị hoặc thậm chí là CEO. Bạn không phản đối việc có nhiều tiếng nói trên
mạng xã hội, ngoài một tiếng nói chính thức của tổ chức.

Một tiếng nói cá nhân nhân cách hóa thương hiệu của bạn. Độc giả thường kết nối tốt hơn với một cá nhân
con người, với một cái tên và khuôn mặt, hơn là với một thương hiệu hoặc tổ chức.

Hãy để nhân viên của bạn viết nội dung xã hội với tư cách là chính họ, với tên của họ trên bài đăng của họ. Sử dụng
các giai thoại cá nhân, kinh nghiệm, ký ức, đánh giá về sản phẩm trong quá trình sử dụng thực tế và các chủ đề
khác giúp nhân cách hóa tác giả.

Cân nhắc xem có nên xuất bản hướng dẫn về việc tham gia mạng xã hội của nhân viên hay không, ngoài
quy định rõ ràng “không xuất bản bất cứ điều gì khiến chúng tôi bị kiện”. Một số công ty, chẳng hạn như
SAP và Oracle, đưa các hướng dẫn của họ lên Web để làm ví dụ.

Giám đốc điều hành của Zappos thường xuyên đăng tweet và tính đến thời điểm bài viết này có 1,7 triệu người
theo dõi (xem Hình 9-4 ở trên cùng của mẫu). Những dòng tweet kỳ quặc, hài hước, rất cá nhân của Tony Hsieh thu
hút rất nhiều sự chú ý mà không bao giờ là quảng cáo công khai cho thương hiệu. Zappos cũng khuyến khích các
nhân viên khác của mình sử dụng Twitter và trang web của công ty dành một trang cho các dòng tweet được gửi
bởi nhân viên của công ty (xem Hình 9-5).
404Chương 9: Sử dụng mạng xã hội

Tweet của nhân viên Zappos

Một số người dẫn chương trình và phóng viên nổi tiếng của CNN sử dụng Twitter, bao gồm Wolf
Blitzer, Anderson Cooper và Ed Henry (xem Hình 9-6). Những bài đăng này có xu hướng cá tính và gần
gũi hơn nhiều so với các tweet “chính thức” của CNN. Để biết danh sách đầy đủ, hãy xem danh sách
Twitter của CNN có tên @CNN/neo và phóng viên.
 các mẫu405

Nguồn cấp dữ liệu Twitter cá nhân cho các neo của CNN

Các công ty công nghệ lớn Google và IBM khuyến khích nhân viên của họ tạo các blog công khai, sau
đó các blog này sẽ được liệt kê nổi bật trên các trang web của công ty; xem Hình 9-7. (Trên thực tế,
nhân viên là sự hiện diện trên mạng xã hội duy nhất mà IBM có.)
406Chương 9: Sử dụng mạng xã hội

Một số blog nhân viên của IBM và Google

Đăng lại có thể trộn được của một video lan truyền trên YouTube
 các mẫu407

Thay vì luôn tạo nội dung của riêng bạn, hãy tìm các tác phẩm trên các trang web khác mà bạn có thể liên
kết đến, trích dẫn hoặc đăng lại. Thêm bình luận của riêng bạn, hoặc mời độc giả của bạn bình luận.

Bạn thấy vai trò của sự hiện diện trên mạng xã hội của mình một phần là vai trò của công cụ tổng hợp: bạn
tìm thấy những nội dung hay mà bạn biết khán giả của mình sẽ thích và bạn đăng nội dung đó cho họ. Bạn
đóng vai trò là một biên tập viên và nhà lãnh đạo tư tưởng được độc giả của bạn tin tưởng.

Không phải tất cả các tổ chức sẽ tìm thấy mô hình này phù hợp. Một số có thể chỉ muốn
xuất bản nội dung mà họ tự tạo.

Nếu sự hiện diện của bạn được coi là một trang web truy cập để tìm nội dung hay, bạn sẽ có được nhiều người theo dõi hơn. Sau đó, những

người theo dõi này sẽ thấy logo hoặc tên của bạn bất cứ khi nào nội dung được đăng lại của bạn xuất hiện trong luồng của họ.

Bạn không cần phải tạo nội dung mỗi khi muốn giới thiệu thứ gì đó cho người theo dõi. Viết nội dung
mới, nguyên bản rất khó và hơn thế nữa khi bạn phải làm việc đó hàng tuần hoặc hơn (bạn nên làm
như vậy để duy trì sự mới mẻ). Để đổi lấy thời gian bạn dành cho việc tìm kiếm các mục có thể đăng
lại, bạn có thể tập hợp một luồng bài đăng ổn định mà độc giả của bạn quan tâm.

Nếu nội dung bạn sản xuất có xu hướng chỉ thuộc một loại, chẳng hạn như bài tiểu luận hoặc ảnh, thì việc bao gồm các liên kết

đến nội dung của người khác sẽ giúp bạn tiến gần hơn đến nội dung mong muốn.Tổng hợp biên tập.

Đăng lại và liên kết hướng sự chú ý xứng đáng đến các trang web và mọi người khác. Trên Web,
không có tổ chức nào bị cô lập; luôn có những người viết blog, người đánh giá, diễn đàn và tổ
chức khác giải quyết các chủ đề tương tự. Bằng cách đăng lại tác phẩm của họ và ghi công khi
đến hạn, bạn khiến họ chú ý, xác thực chúng và giúp họ tăng lượng độc giả. Và sự tương hỗ xã
hội có thể bắt đầu—họ có thể làm điều tương tự với bạn!

Bạn trở thành một phần của cuộc trò chuyện lớn hơn xung quanh các sự kiện và chủ đề quan tâm. Chẳng hạn,
bằng cách tìm một câu chuyện hoặc video ít người biết đến và hiển thị nó cho độc giả của bạn, bạn mời độc giả của
mình tiếp tục cuộc trò chuyện xung quanh nó, trong bài đăng lại của bạn hoặc trong ngữ cảnh của người đăng
ban đầu. (Độc giả của bạn, ngược lại, có thể tự đăng lại nó cho những người theo dõi của họ.)

Tìm nội dung thu hút người theo dõi của bạn. Sử dụng đánh giá của bạn một cách cẩn thận: nó có đáp ứng các
tiêu chuẩn cao giống như bạn sử dụng cho nội dung của riêng bạn không? Đó có phải là thứ mà những người theo
dõi của bạn sẽ đánh giá cao đủ để đăng lại cho những người theo dõi của họ không? Có phải nó đã được đăng lại
rộng rãi trên Web nên bạn sẽ trông có vẻ lỗi thời nếu đăng lại nó? (Và đó là một trò lừa đảo hay huyền thoại đô thị?
Hãy kiểm tra trước!)

Đảm bảo rằng những người theo dõi có thể biết bài viết được đăng lại nói về điều gì. Liệu tiêu đề hoặc
tóm tắt của nó mô tả nó đủ tốt để thu hút độc giả quan tâm? Nếu không, bạn có trách nhiệm tạo tiêu
đề hoặc tóm tắt cho nó.
408Chương 9: Sử dụng mạng xã hội

Cung cấp cho những người theo dõi của bạn một lý do tại sao bạn nghĩ rằng điều này đáng để đăng
lại. Nếu bạn đang viết blog, bạn có đủ không gian để trích dẫn các phần của văn bản nguồn và viết
bình luận. Bạn cũng nên cung cấp URL đầy đủ cho tài liệu gốc. (Trong Twitter, hãy sử dụng cơ chế rút
ngắn URL để thay thế.)

Facebook có cơ chế đăng liên kết tích hợp để ghi lại tiêu đề, tóm tắt và hình ảnh thu nhỏ của
điểm đến—tất cả nội dung thực tế. Sử dụng thông điệp để tóm tắt vừa đủ để thu hút sự chú
ý của người đọc, và có thể viết một bài bình luận chỉ dài một hoặc hai câu.

Nếu bạn sử dụng Twitter, bạn sẽ biết về việc chuyển tiếp tin nhắn. Trước khi Twitter cung cấp một cơ chế
thực tế cho nó, người dùng Twitter đã phát triển các phong tục riêng của họ để chuyển tiếp tin nhắn và ghi
công. Nếu các tweet ngắn hơn đáng kể so với độ dài tối đa, thì điều đó sẽ tạo điều kiện cho những người
đăng lại tin nhắn thêm bình luận siêu ngắn của riêng họ vào một tin nhắn lại (“Câu chuyện đầy cảm hứng.”
“Điều này có hiệu quả không?” “Bạn nghĩ sao?” “Thật mỉa mai.” ). Nhưng tin nhắn lại tích hợp không cho
phép điều đó, thật không may. Nói như vậy, rất nhiều tin nhắn lại có giá trị riêng vì chúng chỉ mang tính
chất cung cấp thông tin; chẳng hạn, ai đó có thể tuyên truyền một tweet về một sự kiện sắp tới và không có
bình luận nào được mong đợi.

Cuối cùng, hãy cho những người theo dõi của bạn cơ hội nhận xét về các tác phẩm mà bạn đăng lại.
Facebook bình luận là một nơi rõ ràng; bình luận trên blog là khác. Khi người dùng bình luận, hãy
tương tác với họ và giúp tiếp tục cuộc trò chuyện. Có thể có một cuộc trò chuyện đang diễn ra ở bất
cứ nơi nào nội dung được đăng ban đầu. Tuy nhiên, những người theo dõi bạn tạo thành một nhóm
người duy nhất! Cuộc trò chuyện của họ có thể có chất lượng hoàn toàn khác.

Nhiều công ty sử dụng các trang Facebook của họ để đăng lại nội dung của người khác để những người theo dõi
họ có thể nhìn thấy những thứ mà họ không thể tự mình tìm thấy. Trong các ví dụ ở Hình 9-9, REI đăng lại các mục
để tiếp tục thực hiện sứ mệnh quảng bá hoạt động ngoài trời và bán thiết bị hoạt động ngoài trời. (Cũng lưu ý việc
sử dụng các câu hỏi nhưNgười bắt đầu cuộc trò chuyện.)

Việc sử dụng Repost và Comment của REI

 các mẫu409

Hình 9-10 cho thấy hai cách mà blog của Hội chữ thập đỏ Hoa Kỳ đăng lại và bình luận về
nội dung của các trang khác. Một cách lịch sự, blogger này muốn cảm ơn người đã thu hút
sự chú ý của cô ấy đến hình ảnh động đất.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Việc sử dụng Đăng lại và Nhận xét của Hội Chữ thập đỏ Hoa Kỳ

Việc chuyển tiếp tin nhắn trên Twitter có thể được thực hiện bằng cơ chế tích hợp sẵn của Twitter hoặc “bằng tay”.
Trong Hình 9-11, Tim O'Reilly sử dụng cả hai.

Hai cách để chuyển tiếp tin nhắn

410Chương 9: Sử dụng mạng xã hội

Tim Gunn đặt câu hỏi cho người hâm mộ

Đặt câu hỏi, câu đố hoặc chủ đề để thảo luận. Hãy để những người theo dõi của bạn đăng câu
trả lời và tiếp tục trò chuyện với bạn và với nhau.

Bạn muốn mọi người phản hồi lại bạn và những độc giả khác để bạn có thể thu hút họ. Đối
tượng truyền thông xã hội của bạn có khả năng thực hiện các cuộc thảo luận sâu sắc trong kênh
bạn đang sử dụng và bạn sẵn sàng kiểm duyệt các cuộc trò chuyện đó nếu cần.

Nếu bạn mời độc giả tham gia, đặc biệt là về một chủ đề mà họ quan tâm, họ thường sẽ làm như vậy!

Sau khi ai đó đăng câu trả lời cho người bắt đầu cuộc trò chuyện của bạn, anh ta có thể quay lại và xem các
câu trả lời bổ sung (hoặc gửi câu trả lời qua email cho anh ta, trong một số hệ thống).

Bạn cũng có thể nhận được nhiều độc giả hoặc người theo dõi hơn chỉ vì phần bắt đầu cuộc trò chuyện của bạn mang tính
giải trí. Do đó, bạn nhận được nhiều tiếp xúc hơn cho kênh truyền thông xã hội của mình.
 các mẫu411

Trong trường hợp tốt nhất, nhận xét của độc giả trở thành nội dung thú vị theo cách riêng của
họ. Mọi người nói chuyện với nhau, tranh luận với nhau, đồng ý với nhau, đi đúng hướng và do
đó tạo nên một chủ đề đối thoại đáng đọc.

Về mặt khái niệm, mô hình này có một số trùng lặp với ý tưởng về các giải pháp vấn đề “cung cấp dịch vụ cộng
đồng”. Chẳng hạn, một blogger có thể hỏi độc giả của mình câu trả lời cho một câu hỏi thực tế hoặc những câu
chuyện về cách họ giải quyết vấn đề mà cô ấy đang gặp phải.

Hiểu những chủ đề nào có thể khiến khán giả của bạn phấn khích. Yêu cầu họ chia sẻ ý kiến, phỏng đoán và câu
chuyện của họ bằng cách đặt câu hỏi. Một số câu hỏi có thể có câu trả lời đơn giản để người dùng dễ dàng nhập
nhanh; những người khác có thể gợi lên những câu trả lời dài và chu đáo. Chọn các chủ đề sẽ khiến độc giả của
bạn trao đổi với nhau—nhưng hãy cân nhắc liệu một chủ đề gây tranh cãi có thể trở thành ngọn lửa chiến tranh
không mong muốn hoặc phản ánh không tốt về trang web hoặc thương hiệu của bạn hay không.

Khi viết bài này, Facebook dường như là nơi bắt đầu cuộc trò chuyện hiệu quả nhất. Các câu hỏi
ngắn, đôi khi có liên kết hoặc ảnh đi kèm, gợi lên câu trả lời từ những người theo dõi đã đọc cập
nhật của bạn trên nguồn cấp tin tức của họ và Facebook đặc biệt giỏi trong việc khuyến khích
các câu trả lời nhanh. (Twitter cũng vậy.)

Một số blog dường như có lợi cho các cuộc trò chuyện dài trong phần bình luận; những người khác thì
không, có lẽ bởi vì độc giả của họ đã không thiết lập một truyền thống bình luận rộng rãi. Nhưng
những blog có lượng độc giả tích cực có thể đặt câu hỏi cho những độc giả đó ở cuối bài đăng — và
độc giả trả lời.

Whole Foods và REI là hai thương hiệu sử dụng Facebook để bắt đầu các cuộc trò chuyện với công
chúng. Thực phẩm và ngoài trời là những chủ đề mà nhiều người cảm thấy hứng thú; những người
tham gia vào các cuộc hội thoại được minh họa trong Hình 9-13 và 9-14 có lẽ đang phản ứng với điều
đó nhiều hơn là với bản thân thương hiệu. Trong ví dụ về Whole Foods, mọi người vui vẻ chia sẻ thông
tin mà những độc giả khác thấy có giá trị.
412Chương 9: Sử dụng mạng xã hội

Một trong những người bắt đầu cuộc trò chuyện của Whole Foods

Người bắt đầu cuộc trò chuyện của REI

 các mẫu413

Các blog như Boing Boing có những độc giả nói nhiều. Trong Hình 9-15, một trong những
người viết blog đặt câu hỏi mở cho độc giả.

Bắt đầu cuộc trò chuyện của Boing Boing

Tweet ngắn nhưng nhiều thông tin

Viết các cập nhật trạng thái và tiêu đề ngắn gọn, dày đặc. Một vài từ đầu tiên là quan trọng nhất;
họ nên thu hút sự quan tâm của đúng độc giả và truyền tải nhiều thông tin nhất.

Bạn đăng cập nhật lên Twitter, Facebook hoặc các kênh tiểu blog khác hoặc bạn viết tiêu đề cho
các bài đăng và bài viết trên blog.

Mọi người đọc lướt qua các cập nhật và tiêu đề một cách nhanh chóng để xác định điều gì đáng để họ
chú ý. Tận dụng tối đa khoảng không gian và thời gian ít ỏi mà bạn có.

Các tweet dài, cập nhật trạng thái, v.v. không thể được trích dẫn hoặc đăng lại hiệu quả như các tweet ngắn.
Bạn muốn những người theo dõi đăng lại các cập nhật của bạn và đưa tên của bạn ra khỏi đó trước nhiều
người hơn.
414Chương 9: Sử dụng mạng xã hội

Theo truyền thống, các nhà báo in đã sử dụng “kim tự tháp ngược” để đưa tin. Thông
tin quan trọng nhất được tải trước vào câu đầu tiên và đoạn văn của một câu chuyện.
Tiếp theo là thông tin thứ cấp và cứ tiếp tục như vậy cho đến khi thông tin ít quan trọng
nhất kết thúc ở cuối. Vì nhiều độc giả sẽ không đi xa hơn vài câu đầu tiên, bạn nên cung
cấp cho họ bản chất của câu chuyện ngay từ đầu.
Giới hạn ký tự quá thấp của Twitter buộc chúng tôi phải học cách viết ở định dạng rất ngắn. Mỗi từ đều có
giá trị; mọi ký tự đều có giá trị. Vì vậy, hãy sử dụng biểu mẫu kim tự tháp — những điểm quan trọng nhất ở
phía trước — nhưng hãy thu nhỏ thông điệp của bạn xuống kích thước của một tweet hoặc cập nhật trạng
thái! Dưới đây là một số cách để viết chúng tốt:

• Chọn những từ thể hiện chính xác chủ đề và phạm vi của những gì bạn đang nói. Sử dụng các từ cụ
thể, không chung chung; làm cho mỗi từ mang trọng lượng của nó. Để giúp bạn tập trung suy
nghĩ, hãy xem xét liệu mọi người có hiểu bạn không nếu dòng tweet hoặc dòng tiêu đề của bạn
hoàn toàn nằm ngoài ngữ cảnh (chẳng hạn như thể đó là một kết quả tìm kiếm).

• Loại bỏ những từ không có trọng lượng, đặc biệt là những từ nối nhưcácVà có,
nhưng đừng bí ẩn đến mức bạn không thể hiểu được.
• Sử dụng chữ viết tắt một cách tiết kiệm; không giống như một tin nhắn văn bản được viết bởi một đứa trẻ 10 tuổi.

• Tạo một điểm duy nhất. Nếu bạn cần đưa ra hai điểm hoặc mô tả hai liên kết, hãy sử dụng hai tweet
hoặc thông báo trạng thái.

• Nếu bạn dùng một từ dài, hãy cố gắng tìm từ thay thế ngắn hơn. Nhưng nếu từ dài hơn có
đặc điểm và tính cụ thể, bạn có thể chọn giữ nó để thu hút sự chú ý.

• Đối với cách diễn đạt, hãy cân nhắc sử dụng một trong tám loại tiêu đề được mô tả trong
Robert Bly'sSổ tay Copywriter (Bìa mềm Holt). Đó là: trực tiếp, gián tiếp, tin tức, cách thực
hiện, câu hỏi, mệnh lệnh, lý do tại sao và lời chứng thực. Để có bản tóm tắt trực tuyến tốt về
các loại này, cùng với các ví dụ, hãy xem bản tóm tắt của Copyblogger tạihttp://www.
copyblogger.com/how-to-write-headlines-that-work/.

• Hãy kiên nhẫn khi bạn viết. Nội dung ngắn đòi hỏi nhiều suy nghĩ và lặp đi lặp lại hơn bạn
mong đợi.

Các dòng tweet trong Hình 9-17 kể những câu chuyện siêu ngắn. Bạn không thể không đọc chúng.
 các mẫu415

truyện siêu ngắn

Các tiêu đề tin tức trong Hình 9-18 được thiết kế để cám dỗ người đọc nhấp vào liên
kết.

Tiêu đề tin tức được thiết kế để cám dỗ người đọc nhấp qua liên kết

Như thể hiện trong Hình 9-19, Hội Chữ thập đỏ Hoa Kỳ sử dụng các thông báo trạng thái và liên kết trên
Facebook để truyền tải thông tin và thuyết phục người đọc tìm hiểu thêm (liên kết không được hiển thị).

Các thông điệp và liên kết trạng thái trên Facebook của Hội Chữ thập đỏ Hoa Kỳ
416Chương 9: Sử dụng mạng xã hội

Thời gian truyền thông xã hội có thể cho một tổ chức

Điều chỉnh các bài đăng trên mạng xã hội của bạn theo mong đợi của các kênh bạn sử dụng; một số kênh
yêu cầu đăng bài thường xuyên hơn, một số ít hơn. Đăng chéo những phần hay nhất và cân nhắc thời điểm
bạn đăng bài trong ngày hoặc trong tuần.

Bất cứ ai sử dụng phương tiện truyền thông xã hội nên phát triển và tuân theo mộtChiến lược thời gian.

Lạm dụng một kênh truyền thông xã hội có thể khiến những người theo dõi bạn choáng ngợp với quá nhiều tin đồn.
Những người theo dõi có thể bỏ rơi bạn hoặc hình thành ấn tượng tiêu cực về tổ chức của bạn. Đừng chọc tức mọi người.

Mặt khác, việc sử dụng quá mức một kênh là một chi phí cơ hội: tên của bạn sẽ không xuất hiện trước
những người theo dõi thường xuyên nhất có thể.

Người dùng Twitter và Facebook nói riêng có kỳ vọng về tần suất họ nhận được thông tin từ các thực
thể không phải là bạn bè (chẳng hạn như các trang của công ty) trong luồng tin tức cá nhân của họ.
Bản thân cơ chế của các kênh quyết định một số điều này; chẳng hạn, các tweet ngắn hơn và được sử
dụng nhanh hơn so với các bản cập nhật của Facebook. Những kỳ vọng này có thể thay đổi khi công
nghệ trưởng thành và thay đổi.
 các mẫu417

Điều quan trọng nhất là hiểu được kỳ vọng của người dùng về các kênh này. Nếu bạn đăng quá
thường xuyên, các cập nhật của bạn sẽ làm lộn xộn luồng tin tức cá nhân của những người theo dõi
đến mức gây khó chịu và họ có thể hủy đăng ký theo dõi bạn.

Tuy nhiên, lời khuyên ở đây chỉ là một điểm khởi đầu. Bạn nên xem số lượng người theo dõi thay đổi khi bạn sử
dụng phương tiện truyền thông xã hội, lắng nghe phản hồi của người theo dõi và sẵn sàng điều chỉnh chiến lược
thời gian của bạn một cách nhanh chóng nếu người theo dõi rời đi.

Khi viết bài này, đây là một số tần suất đăng bài mà tôi đã quan sát được.
trang Facebookcó xu hướng chỉ được cập nhật một lần mỗi ngày hoặc ít hơn. Hầu hết các trang hoạt động và thành công
mà tôi nghiên cứu đều có tỷ lệ đăng bài khoảng hai ngày một lần, mặc dù một số trang có hai bài mỗi ngày (chẳng hạn
như Wired) và những trang khác thì ít hơn nhiều. Các trường hợp ngoại lệ đôi khi được thực hiện đối với các sự kiện nhạy
cảm về thời gian, các nỗ lực tiếp cận tập trung và các cuộc khủng hoảng như động đất lớn, những người theo dõi sẽ chấp
nhận các đợt đăng bài thường xuyên trong thời gian ngắn nếu nguyên nhân là chính đáng. Số dặm của bạn có thể thay
đổi.

bài đăng trên Twittercó thể thường xuyên hơn nhiều so với cập nhật Facebook. Các tổ chức mà tôi
nghiên cứu đã đăng trung bình từ 3 đến 15 tweet mỗi ngày. Ngoài ra, những bài đăng này thường
được thực hiện từ trưa đến 8 giờ tối theo Giờ chuẩn miền Đông, với tỷ lệ thấp hơn vào cuối tuần. Điều
này rất quan trọng vì các tweet sẽ xuất hiện khi hầu hết mọi người đang trực tuyến và lắng nghe—
Người dùng Twitter (không giống như người dùng Facebook) có xu hướng không cuộn ngược thời
gian để tìm tài liệu thú vị. Lưu ý rằng nhiều tweet từ một số tổ chức là câu trả lời trực tiếp cho các cá
nhân; những thứ đó có thể tăng số lượng một cách nhanh chóng.

Đối với các tổ chức sử dụng nhiều kênh truyền thông xã hội,bài đăng trên blognằm trong khoảng từ
0,5 đến 2,5 bài đăng mỗi ngày. Đây là nơi diễn ra các bài viết dài: tiểu luận, truyện, phỏng vấn và các
nội dung khác dài hơn một hoặc hai câu. Đôi khi những blog này “cung cấp” các nỗ lực của Facebook
và Twitter—các mục blog được chọn (thường không phải tất cả chúng) được đăng lại dưới dạng liên
kết trong các phương tiện khác này, cùng với mô tả một câu. Các cuộc trò chuyện sôi nổi về các bài
đăng trên blog có nhiều khả năng diễn ra trên Facebook hoặc Twitter hơn là trên chính blog đó.

E-mailnên không thường xuyên. Nếu bạn gửi email nhiều hơn một lần trong vài ngày, bạn có thể bị một số
người theo dõi của bạn dán nhãn là thư rác.

Tôi không tìm thấy bằng chứng nào về chiến lược định thời gian cho các kho phương tiện truyền thông như Flickr và
YouTube. Điều này có thể là do họ thường không “đẩy” nội dung vào các luồng tin tức cá nhân của người theo dõi như
những người khác vẫn làm.
418Chương 9: Sử dụng mạng xã hội

Biểu đồ trong Hình 9-21 cho thấy các chiến lược định thời điểm của một số công ty và tổ
chức có sự hiện diện mạnh mẽ trên mạng xã hội. Dữ liệu được thu thập trong hai tháng đầu
năm 2010, vào tháng Giêng và tháng Hai. Các con số đại diện cho số lượng bài đăng trung
bình mỗi ngày trên ba kênh truyền thông xã hội: Twitter, Facebook và blog chính của tổ
chức. (Không phải tất cả các trang web này đều có blog chính.) Rõ ràng, số lượng Twitter
cao hơn những trang khác, phản ánh bản chất phù du hơn của nó.

Hai công ty cuối cùng, American Red Cross và Partners in Health, là các tổ chức từ thiện.
Trong khoảng thời gian tôi thu thập dữ liệu, hai tổ chức này đã tiến hành các nỗ lực gây quỹ
và đưa tin chuyên sâu liên quan đến trận động đất ở Haiti. Việc sử dụng Facebook của họ
tăng vọt vào tháng 1, sau đó giảm dần trở lại mức bình thường hơn vào tháng 2; điều này
xuất hiện ở mức trung bình khi số lượng Facebook tăng nhẹ.

Twitter Facebook Blog

Dell 3 0,3 0,6
thực phẩm nguyên chất 14 1 1.4
Cô-ca Cô-la 10,5 0,5 0,6
bò húc 5.3 0,5
Starbucks 10 0,2 0,6
REI 3 1
volkswagen 2 0,5
tổ chức thập đỏ của Mỹ 3 1.3 1
Đối tác Y tế 2.7 2,5 2.4

16
14
12
10
số 8
6 Twitter

4 Facebook

2 Blog
0

Tỷ lệ đăng bài thực tế cho chín trang web

 các mẫu419

Blog có dây, chuyên biệt theo chủ đề

Chia luồng nội dung của bạn thành nhiều kênh khác nhau, mỗi kênh có lượng độc giả khác nhau
và “cảm nhận” khác nhau. Sử dụng nhiều danh tính Twitter, trang Facebook, blog, v.v. để hướng
các mục này đến đúng đối tượng.

Tổ chức của bạn tạo ra một số lượng lớn các cập nhật trạng thái, bài báo, bài đăng trên blog hoặc các mục
khác được phân phối trên mạng xã hội. Bạn có thể dễ dàng phân loại chúng theo chủ đề hoặc một số yếu tố
khác (chẳng hạn như tần suất hoặc tác giả). Bạn có lượng độc giả lớn, nhưng nhiều độc giả chỉ quan tâm
đến một hoặc hai trong số các danh mục này chứ không phải tất cả.
420Chương 9: Sử dụng mạng xã hội

Nếu bạn đổ tất cả các cập nhật của tổ chức vào một luồng lớn, thì luồng đó có thể áp đảo những
người theo dõi. Chẳng hạn, một trang Facebook không nên được cập nhật nhiều lần mỗi ngày, vì sợ
rằng người đọc của nó sẽ hủy đăng ký vì quá nhiều cập nhật.

Với một số luồng hoặc trang riêng biệt để theo dõi, mọi người có thể dễ dàng chọn trong số các chủ
đề bạn cung cấp, do đó điều chỉnh trải nghiệm của riêng họ.

Phân loại các cập nhật của bạn theo nhu cầu của những người theo dõi bạn. Hãy xem xét các cách sau đây
để phân khúc độc giả và xem liệu có cách nào phù hợp với bạn không. (Tất nhiên, không phải tất cả đều phù
hợp với tổ chức của bạn.)

Theo sản phẩm

Chẳng hạn, bạn có bán các sản phẩm khác nhau cho các loại khách hàng khác nhau không? Nhu
cầu và quan điểm chung của người dùng sản phẩm là gì? Ví dụ: người dùng điện thoại thông
minh sẽ có một nhóm nhu cầu; người dùng hệ thống máy tính để bàn, hoàn toàn khác.

Theo chủ đề

Nếu bạn xuất bản nhiều bài báo hoặc ý kiến, làm thế nào để bạn phân khúc thị trường
của mình theo chủ đề?

Theo vai trò nghề nghiệp

Xem ví dụ của Google trong Hình 9-25; một số blog của nó nhắm đến đối tượng chung, một số dành
cho người quản lý và một số dành cho nhà phát triển.

Theo phong cách sử dụng mạng xã hội

Tần suất những người theo dõi bạn đọc luồng tin tức của họ là bao nhiêu? Một số người thực tế sống
trên Twitter; họ có thể có khả năng chịu đựng cao đối với những cuộc trò chuyện. Những người khác
sẽ chỉ muốn cập nhật không thường xuyên và những cập nhật đó tốt hơn nên đáng đọc. CNN có một
số nguồn cấp tin tức hoạt động với cácChiến lược thời gianđể phục vụ những thị trường khác nhau này;
xem ví dụ trong Hình 9-23.

Trong các dịch vụ truyền thông xã hội mà bạn đã chọn sử dụng, hãy tạo các kênh hoặc luồng khác
nhau. Mỗi kênh phải được dán nhãn rõ ràng với tên và biểu trưng của tổ chức của bạn và được gắn
nhãn hiệu trực quan một cách thích hợp—chắc chắn luồng này là một phần chính thức trong chiến
lược truyền thông xã hội của tổ chức.

Hướng mọi người đến các luồng đó tại các điểm phù hợp. Đặt liên kết tới chúng trên trang nhất của bạn
hoặc từ sự hiện diện chính của bạn trên các dịch vụ truyền thông xã hội. Ví dụ: nếu tổ chức của bạn có trang
Facebook chính, hãy liên kết đến trangLuồng chuyên biệttừ trang đó. Nếu bạn dành nỗ lực để xây dựng
chúng, bạn cũng có thể nói với mọi người về chúng.

Cân nhắc sử dụng nội dung được chọn từLuồng chuyên biệt—không phải tất cả, tất nhiên—trong blog
chính, trang Facebook hoặc nguồn cấp dữ liệu Twitter của bạn. tham khảo cácLuồng chuyên biệttừ nội
dung đó để độc giả quan tâm có thể tìm thấy nó và đăng ký.
 các mẫu421

Các bản cập nhật là công việc kinh doanh của CNN và nó tạo ra rất nhiều bản cập nhật. CNN có một nguồn cấp dữ
liệu Twitter chính mà nó cập nhật vài giờ một lần với các câu chuyện tin tức được quan tâm chung, nhưng tại thời
điểm viết bài này, “cnnbrk” (dành cho tin tức nóng hổi) có số lượng người theo dõi gần như gấp ba lần.
“cnnireport” là dòng Twitter chính thứ ba của CNN và trang CNN hướng người đọc đến cả ba. Tuy nhiên, đối với
người dùng Twitter có kỹ năng và năng động, thậm chí còn có nhiều luồng hơn nữa! Giải trí, thời tiết, công nghệ,
tiền bạc, tin tức quốc tế và các chủ đề khác đều có nguồn cấp dữ liệu Twitter CNN chuyên biệt của riêng chúng,
mặc dù chúng không dễ tìm. Hình 9-23 hiển thị một số nguồn cấp dữ liệu Twitter của CNN.

Một số nguồn cấp dữ liệu Twitter của CNN

Tương tự như vậy, Wired chia nhiều cập nhật của mình thành các nguồn cấp dữ liệu Twitter chuyên biệt theo chủ
đề. Nhiều người trong số này chủ yếu liên kết tweet với các bài đăng trong các blog tương ứng của Wired—xem
Hình 9-22, hiển thị một số blog đó. Một điều thú vị mà Wired thực hiện là đăng một danh sách dài các nguồn cấp
dữ liệu Twitter chuyên biệt trong hình nền của nó, như thể hiện trong Hình 9-24. (Mặc dù chúng không phải là các
liên kết có thể nhấp được, nhưng chúng vẫn truyền tải thông tin.)
422Chương 9: Sử dụng mạng xã hội

Nguồn cấp dữ liệu Twitter chính của Wired, với các Luồng chuyên biệt được liệt kê ở lề trái

Google đã xây dựng nhiều sản phẩm, mỗi sản phẩm đều có đối tượng riêng (người đọc thông thường, nhà
phát triển, chuyên gia tên miền, v.v.). Nó cũng phục vụ nhiều khu vực trên thế giới và thu hút sự quan tâm
trên toàn thế giới trong nhiều khía cạnh hoạt động của nó. Do đó, Google gửi các bản cập nhật của mình
thông qua một tập hợp đa dạng các blog của công ty (xem Hình 9-25). Blog chính của nó xuất bản các câu
chuyện về sở thích chung, nhưng đôi khi nó chạy các mục được đăng chéo từ một blog cụ thể hơn.

Một số blog của Google

Microsoft có rất nhiều luồng nội dung xã hội trên Facebook, Twitter, YouTube, Flickr,
MySpace, Delicious, diễn đàn và blog. Một số được liệt kê trong Hình 9-26. Chúng nhắm đến
khách hàng cho những sản phẩm cụ thể, những vai trò cụ thể; một số rất chuyên biệt, và
một số nói chung với lượng khán giả rất lớn. (Tín dụng cho bảng này thuộc về
EngagementDB, tạihttp://www.engagementdb.com/Company/77.)
 các mẫu423

Một phần hồ sơ về sự hiện diện xã hội của Microsoft

Mười cách để theo Huffington Post

424Chương 9: Sử dụng mạng xã hội

Trên trang chủ của trang web của bạn, hãy đặt một nhóm các liên kết đến sự hiện diện của phương tiện truyền thông xã hội của bạn.

Bạn đang nỗ lực hỗ trợ một hoặc nhiều kênh truyền thông xã hội—blog, Facebook, Twitter,
Delicious, v.v.—và bạn muốn hướng mọi người đến các kênh đó. Nếu chúng là các dịch vụ
độc lập, chẳng hạn như Facebook, bạn sẽ không phiền khi khách truy cập vào các trang web
đó thay vì ở lại trang web của riêng bạn.

Nếu bạn đã đầu tư vào các kênh truyền thông xã hội khác nhau, bạn cũng có thể nói với mọi người về
chúng. Khách truy cập vào trang chủ của bạn có thể thấy những liên kết đó khá hữu ích, đặc biệt nếu họ
đang đặc biệt tìm kiếm sự hiện diện trên mạng xã hội của bạn.

Các tiện ích cho phép khách truy cập theo dõi bạn cung cấp cho họ một cách thuận tiện để đưa các cập nhật của bạn vào
luồng tin tức cá nhân của họ. Điều đó có giá trị đối với bạn và đối với họ, đồng thời nó cho khách truy cập thấy rằng bạn
thông thái với các công nghệ xã hội mới nhất.

Tạo một khu vực nhỏ chứa các liên kết được gắn nhãn rõ ràng đến các trang truyền thông xã hội và kho lưu trữ
công cộng: Facebook, Twitter, YouTube, Flickr, Delicious, blog của bạn, v.v. Nguồn cấp dữ liệu RSS cũng thường
được tìm thấy ở đây. Một số trang web đăng ký email của họ vào phần này.

Các biểu tượng thương hiệu sẽ nổi bật hơn các liên kết thông thường—bạn có thể muốn điều này để dễ tìm
thấy. Tuy nhiên, chúng không phù hợp với một số thiết kế và các liên kết văn bản đơn giản trong “lời mời
bằng văn bản” có thể được làm mới. Xem các ví dụ về Slate, Whole Foods và Copyblogger sắp tới.

Một nhược điểm của mộtđường liên kết mạng xã hộilà nó có thể đưa khách truy cập của bạn đến một
trang web khác và họ có thể ở lại đó thay vì tiếp tục đọc trang web của riêng bạn. Đặc biệt, các trang
mạng xã hội có “thời gian dừng” lâu—một khi ai đó vào đó, cô ấy có xu hướng ở lại một lúc và không
quay lại. (Nhiều trang web dựa trên tin tức có sự hiện diện xã hội mạnh mẽ, chẳng hạn như CNN và
Wired, không cóđường liên kết mạng xã hộitrên trang chủ của họ.) Một cách để tránh vấn đề này là thay
đổi các liên kết trongđường liên kết mạng xã hộiphần thành các nút. Ví dụ, một nút Facebook có thể hiển
thị một tiện ích để biến người dùng thành một người hâm mộ thay vì đưa anh ta đến chính Facebook.
 các mẫu425

Một số trang web có nhiều hơn một dòng Twitter hoặc trang Facebook để phản ánh các khía cạnh
khác nhau của tổ chức của họ; xemLuồng chuyên biệtmô hình để thảo luận thêm. Những luồng đó có
thể hiển thị ở đây. Ví dụ về Thế vận hội Vancouver trong Hình 9-28 cho thấy một cách để giải quyết
vấn đề này.

Cân nhắc thêm "móc nối" để thu hút sự quan tâm của người xem. Chẳng hạn, Copyblogger sử dụng
Liên kết xã hộitiện ích để cho người xem biết rằng 48.206 người theo dõi họ trên Twitter. Điều đó thật
tuyệt vời—nó cụ thể một cách hấp dẫn, nó sử dụng áp lực nhẹ nhàng từ bạn bè để thuyết phục bạn
làm theo họ và nó mang lại nụ cười trên khuôn mặt bạn. Tương tự, Mashable cho biết có bao nhiêu
người cùng nhau theo dõi họ, được tổng hợp trên một số dịch vụ (Twitter, Facebook, RSS, v.v.).

Hình 9-28 cho thấyđường liên kết mạng xã hộiwidget trên các trang chủ khác nhau.

Tiện ích Liên kết xã hội trên trang chủ của (ngược chiều kim đồng hồ từ phía trên bên trái) Mashable,
Hội Chữ thập đỏ Hoa Kỳ, Thế vận hội Vancouver, Levi's, Whole Foods, Copyblogger và Slate

Trong các ví dụ được hiển thị trong Hình 9-29, Microsoft và Ford sử dụng không gian lớn hơn có sẵn trên các trang
bên trong của trang web của họ. Chúng hiển thị các mẫu có thể nhấp được về hoạt động xã hội mới nhất tại mỗi
dịch vụ mà chúng liệt kê. Những ví dụ trực tiếp này có thể làm cho sự hiện diện xã hội trở nên hấp dẫn hơn đối với
những người quan tâm đến chủ đề này. (Tất nhiên, nhược điểm của cách xử lý như vậy là lượng không gian mà nó
tiêu tốn.)
426Chương 9: Sử dụng mạng xã hội

Trang sản phẩm liên quan đến Microsoft Windows và một trong các trang thông cáo báo chí của Ford

Tiện ích chia sẻ cuối bài viết của Slate

Bên cạnh các bài viết, video và các phần nội dung khác của bạn, hãy đặt một bộ điều khiển cho phép người xem dễ dàng
chia sẻ nội dung đó với các mối quan hệ thân thiết và những người theo dõi trên mạng xã hội của họ. Chúng thường liên
kết đến các trang truyền thông xã hội như Facebook và Twitter.
 các mẫu427

Tiện ích chia sẻđược sử dụng gần như ở khắp mọi nơi bây giờ. Nếu bạn đăng nội dung gốc dưới bất kỳ hình thức

nào, bạn nên có một trong số những nội dung này, ngay cả khi nó thô sơ.

Nó thuận tiện cho những người xem thực sự muốn chia sẻ tác phẩm thú vị này mà bạn đã viết.
Nó giúp họ làmĐăng lại và bình luận, hỗ trợ danh tiếng xã hội của chính họ.

Sau đó, người xem của bạn sẽ phổ biến nội dung của bạn cho bạn thông qua các liên hệ xã hội của riêng họ.
Một bài báo được giới thiệu bởi một người liên hệ cá nhân—đặc biệt là một mối quan hệ thân thiết, chẳng
hạn như một thành viên trong gia đình hoặc bạn thân—có nhiều khả năng được đọc hơn một bài báo được
tìm thấy ngẫu nhiên trên Web. xemKhuyến nghị cá nhânmẫu ở Chương 1.

Một số công cụ chia sẻ cho phép bạn theo dõi những gì được chia sẻ, do đó cung cấp cho bạn dữ liệu về bài
đăng nào của bạn được phổ biến rộng rãi. Sau đó, bạn có thể sử dụng dữ liệu đó để phân tích và hiển thị
Bảng xếp hạng nội dungcho các mục được chia sẻ nhiều nhất.

Bạn có thể xây dựng của riêng bạnứng dụng chia sẻhoặc bạn có thể sử dụng trang web của bên thứ ba chẳng hạn
như ShareThis để tạo một trang web. Điền vào đó các kênh chia sẻ mà bạn nghĩ sẽ được những người theo dõi của
bạn sử dụng nhiều nhất, nhưng đừng làm lộn xộn nó với quá nhiều mục. (Ít nhất hãy tìm những con số về mức độ
phổ biến tương đối của các trang mạng xã hội và trang đánh dấu trang; bạn phải luôn bao gồm những trang lớn
nhất. Facebook và email có mức sử dụng cao nhất tính đến thời điểm viết bài này, trong khi Twitter thấp hơn
nhưng tăng nhanh.)

Bạn có thể cân nhắc đưa các dịch vụ sau vàoứng dụng chia sẻ:
• Các trang mạng xã hội như Facebook và MySpace
• Các cơ chế tiểu blog như Twitter
• Các trang đánh dấu trang công cộng như Digg hoặc Delicious

• Email vẫn được nhiều người dùng Internet ưa chuộng

• Chia sẻ qua tin nhắn SMS

• Các công cụ không chia sẻ khác, chẳng hạn như in, nhận xét hoặc biểu tượng thích/không thích

Nếu bạn có không gian, bạn cũng có thể hiển thị bộ đếm cho từng dịch vụ chia sẻ: có bao nhiêu người
đã chia sẻ một phần nội dung cụ thể qua kênh này? Điều này mang đến cho người đọc cảm giác ngay
lập tức về mức độ “hot” của nội dung này. (Nếu các con số luôn ở mức thấp, bạn có thể không muốn
hiển thị chúng.)

đặtứng dụng chia sẻrất gần với nội dung được chia sẻ. Trên cùng và dưới cùng của một bài viết là
những vị trí truyền thống để đặt phần này và một số bài viết đặt nó như một phần phụ trong bài
viết (với văn bản chạy xung quanh nó). Bạn đang cố gắng giữ widget trong tầm nhìn của
428Chương 9: Sử dụng mạng xã hội

ai đó đang đọc nội dung. Ngoài ra, trước khi bạn đặtứng dụng chia sẻvào thanh công cụ thả xuống hoặc
cố định, hãy nghĩ về khả năng truy cập—người sử dụng trình đọc màn hình sẽ sử dụng tính năng này
như thế nào? Còn những người không điều khiển chuột tốt thì sao? Họ có thể thấy dễ dàng hơn với
một khu vực ngay trên trang.

Nếu bạn cung cấp kiểm soát chia sẻ trên Facebook, hãy đảm bảo rằng trang HTML của bạn được cấu
trúc chính xác để các công cụ liên kết của Facebook hiển thị tốt. Xác minh rằng Facebook chọn chính
xác tiêu đề, tóm tắt và hình thu nhỏ. (Kiểm tra các cơ chế chia sẻ xã hội khác.)

Nhiều trang web tạo ra nhiềuTiện ích chia sẻcho các bối cảnh khác nhau, như trong Hình 9-31.
Chẳng hạn, một tiện ích chứa ba dịch vụ hàng đầu có thể xuất hiện gần đầu nội dung, trong khi
một tiện ích đầy đủ hơn có thể xuất hiện ở cuối. Điều này làm phức tạp thiết kế, nhưng nó có thể
hoạt động tốt nếu bạn có nhiều dịch vụ để hiển thị và không có nhiều không gian ở trên cùng.

Chia sẻ tiện ích từ Wired, Boing Boing, Technorati và Pandora

Cửa sổ bật lên và thả xuống để hiển thị “đuôi dài” của các dịch vụ xã hội là một cách phổ biến để triển
khai tiết lộ dần dần—người dùng không nhìn thấy nhiều dịch vụ chia sẻ khác cho đến khi cô ấy nhấp
vào một nút—nhưng một lần nữa, các chức năng này lại ẩn đi và không thể truy cập như các mục
được hiển thị trực tiếp trên trang.

Mashable, được minh họa trong Hình 9-32, sử dụng ba chiến lược khác nhau:ứng dụng chia sẻbên cạnh
một đoạn tin tức trên trang nhất, một tiện ích được mở rộng một chút trên trang chứa bài viết (hiện
tiện ích này có tính năng Email và nút Chia sẻ) và một cửa sổ bật lên hiển thị khi người đọc nhấp vào
nút Chia sẻ.
 các mẫu429
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Tiện ích chia sẻ của Mashable

http://www.designingsocialinterfaces.com/patterns/Share_This
430Chương 9: Sử dụng mạng xã hội

Hộp tin tức của Hội Chữ thập đỏ Hoa Kỳ

Trên trang nhất của trang web của bạn, hãy hiển thị các mục tin tức, bài đăng trên blog, video và nội
dung nhạy cảm về thời gian mới nhất của bạn. Mỗi mục nên thu hút người xem bằng tiêu đề dễ đọc,
tóm tắt, liên kết để đọc thêm và có thể là hình thu nhỏ.

Tổ chức của bạn thường xuyên sản xuất các mục tin tức, nội dung gốc về các chủ đề thú vị đối với
khách truy cập trang web của bạn hoặc “đối tượng xã hội” thu thập nhận xét và thảo luận. Bạn muốn
khuyến khích khách truy cập đọc những mục đó.

MỘThộp tin tứccung cấp cho khách truy cập của bạn nội dung có thể thu hút sự chú ý của họ. Nếu không có
nó, một người truy cập có thể đến trang web của bạn, nhìn thoáng qua nó, không thấy gì thú vị và rời đi mà
không nán lại. Với nó, họ có thể ở lại một thời gian và tìm hiểu về tổ chức của bạn.

Nó cũng có nhiều thông tin. Khách truy cập vào trang web của bạn có thể đến với mục đích tìm hiểu về các tin tức
hoặc sự kiện gần đây, vì vậy hãy cung cấp cho họ.
 các mẫu431

Trang web của bạn sẽ được cập nhật nội dung mới một cách thường xuyên. Việc thường xuyên làm mới nội
dung trên trang nhất được coi là phương pháp hay nhất. Khách truy cập có thể thấy mọi thứ đang diễn ra ở
đây—trang web của bạn không phải là một thị trấn ma và thậm chí họ có thể muốn quay lại sau để xem
điều gì khác xảy ra.

Khi khách truy cập nhấp vào liên kết tin tức, “trang nhảy” có thể có tất cả các loại tính năng khác: liên kết đến các
câu chuyện liên quan, các bài đăng trên blog khác, mộtứng dụng chia sẻ, bình luận của độc giả và những thứ khác
mà bạn không có chỗ trên trang nhất. Tất cả những điều này thu hút khách truy cập và giữ họ trên trang web của
bạn, tìm hiểu thêm và tương tác nhiều hơn.

Các chủ đề, từ ngữ và hình ảnh bạn chọn để hiển thị tronghộp tin tứctất cả đều góp phần tạo nên ấn
tượng đầu tiên về tổ chức của bạn. Khách truy cập sẽ gián tiếp tìm hiểu về tổ chức của bạn từ phạm vi
chủ đề được đề cập, giọng điệu được sử dụng trong văn bản và các tín hiệu khác.

đặthộp tin tứctrên trang chủ của bạn; nó không nhất thiết phải nằm trong màn hình đầu tiên (mặc
dù nhiều trang web đặt nó ở đó khi họ không cần toàn bộ trang chủ để giải thích đề xuất giá trị
của trang web). Làm cáihộp tin tứcđủ lớn để chứa một số mục tin tức, mỗi mục có một khoảng
trống rộng rãi—ít nhất là vài dòng văn bản. Bạn có thể muốn chiahộp tin tứcthành các phần phụ
cho các nguồn hoặc loại phương tiện khác nhau (chẳng hạn như ảnh hoặc video). Một số trang
web tạo một tiểu mục để hiển thị các mục bổ sung, nhỏ hơn—thường chỉ là các tiêu đề được liên
kết—ngoài các liên kết lớn hơn tới các bài viết nổi bật.

Mỗi mục nên có:

• Một tiêu đề, cũng là một liên kết đến bài viết chính.

• Mô tả ngắn “bán” bài viết cho người đọc.

• Một liên kết “more” tới bài viết chính. Điều này sẽ trông giống như một liên kết, với gạch chân, chữ V,
màu sắc hoặc các dấu hiệu trực quan rõ ràng khác.

Họ có thể tùy ý có:

• Một hình thu nhỏ. Hấp dẫn nhấthộp tin tứcthường có những thứ này.
• Ngày nội dung được phát hành.
• Nguồn của mục—blog, trang tin tức, thông cáo báo chí, YouTube, v.v. Nếu liên kết của bạn đưa người
xem đến một trang web khác, thì thật lịch sự khi nói với họ như vậy.

• MỘTứng dụng chia sẻvà một liên kết đến ý kiến độc giả. Chúng thường được tìm
thấy trên trang đích, nơi có thể đọc toàn bộ bài viết.
Mỗi từ đều có giá trị trong các tiêu đề và tóm tắt này. Sử dụngKim tự tháp Nano đảo ngượcmẫu để viết các tiêu
đề và loại bỏ tất cả thông tin không liên quan (chẳng hạn như dòng tên hoặc vị trí) trong phần tóm tắt. Nếu
có thể, hãy nhờ ai đó viết tóm tắt theo yêu cầu; không sử dụng dòng đầu tiên của bài báo. Giọng điệu và
giọng điệu bạn sử dụng trong những đoạn văn bản này giúp xác định tổ chức của bạn, vì vậy hãy đảm bảo
rằng chúng phản ánh chính xác các giá trị của tổ chức: trang trọng, có thẩm quyền, hài hước, trẻ trung, ngớ
ngẩn, mỉa mai, v.v.
432Chương 9: Sử dụng mạng xã hội

Nếu bạn lấy nội dung từ các kho phương tiện như Flickr, chúng có thể có các tiện ích mà bạn có
thể cài đặt trực tiếp trên trang của mình. Đảm bảo chúng không làm trang chủ của bạn bị chậm
hoặc hỏng.

Red Bull tài trợ cho các vận động viên ở nhiều môn thể thao khác nhau. Mặc dù sản phẩm của nó là một thức uống, nó
hộp tin tứccó đầy đủ các mục tin tức về các vận động viên và sự kiện, như trong Hình 9-34. Ấn
tượng chung về hình ảnh và từ ngữ là hành động và tốc độ. Chú ý nhịp điệu của bố cục,
cách viết ngắn gọn nhưng hiệu quả và sự rõ ràng của các liên kết đến bài viết và video.

Hộp tin tức của Red Bull

Whole Foods tìm kiếm một đối tượng rất khác và “cảm giác” đầy cảm xúc, nhưnghộp tin tứctương tự
như Red Bull về sự rõ ràng và nhịp điệu của nó (xem Hình 9-35).
 các mẫu433

Hộp tin tức của Whole Foods

của Fordhộp tin tứcchứa các mục có kích thước và mức độ nhấn mạnh khác nhau (xem Hình 9-36). Hệ thống
phân cấp trực quan hiển thị rõ ràng bài viết nào Ford muốn bạn xem trước; các hình ảnh và văn bản lớn thu
hút ánh nhìn của bạn lên trên và sang trái trước tiên, nhưng kích thước nhỏ hơn của tiêu đề “Tiêu đề mới
nhất” cho phép chứa nhiều nội dung hơn vào không gian có sẵn.

Hộp tin tức của Ford

434Chương 9: Sử dụng mạng xã hội

Nhưng hãy chắc chắn rằng bạn không đặt tiêu đề và tóm tắt quá ngắn hoặc khó hiểu.
Các mục tin tức trong Câu lạc bộ Sierrahộp tin tứckhông giải thích đủ rõ ràng để lôi kéo
ai đó nhấp qua (xem Hình 9-37).

Hộp tin tức của Câu lạc bộ Sierra

Từ Tạp chí Phố Wall

Hiển thị danh sách các bài báo, bài đăng trên blog, video hoặc các nội dung khác phổ biến nhất. Sử dụng các số liệu dựa trên phương tiện

truyền thông xã hội như được chia sẻ nhiều nhất, được gửi qua email nhiều nhất và được viết blog nhiều nhất.
 các mẫu435

Trang web của bạn tạo ra một lượng lớn nội dung, được tạo bởi tổ chức của bạn hoặc bởi những
người tham gia khác. Bạn có thể đã có nguyên tắc tổ chức cho tất cả nội dung đó (ví dụ:
Dòng tin tức; xem Chương 2), nhưng bạn cũng muốn độc giả xem những gì độc giả khác thấy thú
vị. Bạn có đủ người đọc và người chia sẻ để các nhà lãnh đạo rõ ràng có thể xuất hiện trong nội
dung bạn xuất bản.

Đây là một cách cung cấp nguồn lực cộng đồng cho “danh sách top 10” cho trang web của bạn. Các số liệu để chia
sẻ và gửi email cho thấy độc giả thích gì—hoặc ít nhất là những gì độc giả đó nghĩ những người theo dõi họ sẽ
thích. Nếu độc giả có khiếu thẩm mỹ xuất sắc, họ sẽ lấy những phần chất lượng tốt nhất từ nội dung của bạn; nếu
không, ít nhất họ sẽ tìm thấy những thứ kỳ quặc nhất hoặc ấn tượng nhất. (Bạn có thể không đồng ý với sở thích
của họ!) Dù bằng cách nào, những độc giả khác của bạn có thể sẽ quan tâm đến những thứ tương tự.

Thu thập dữ liệu về những mục nào đã được chia sẻ, gửi qua email, v.v. Nếu bạn chưa có, hãy
đảm bảo mộtứng dụng chia sẻcủa một số loại được hiển thị bên cạnh mỗi phần nội dung để người
đọc có thể dễ dàng chia sẻ mọi thứ ngay từ đầu.

Hiển thị danh sách các mặt hàng phổ biến nhất cho ngày đó (hoặc tuần, nếu tốc độ trang web của bạn
chậm hơn). Các mục trong danh sách phải là liên kết đến bài viết gốc. Các trang web theo dõi nhiều danh
sách như vậy—được gửi qua email, viết blog, v.v.—thường đặt chúng lại với nhau thànhTab mô-đun(xem
Chương 4).

Bảng xếp hạng nội dungthường được hiển thị dưới dạng các thanh bên nhỏ trên trang chủ và các trang
nội bộ. Hầu hết các trang web chủ yếu trình bày nội dung theo một số ưu tiên khác, chẳng hạn như sự
mới mẻ hoặc lựa chọn biên tập; bảng xếp hạng thường không thuộc vềTrung tâm sân khấu(xem Chương
4).

CácThời báo New Yorkcó một nguyên mẫuBảng xếp hạng nội dungmà bạn có thể đã thấy (xem Hình
9-39). Nó chứa bốn bảng xếp hạng được gắn thẻ với nhau, một trong số đó hiển thị cụm từ tìm kiếm
chứ không phải bài viết. Khi bạn đọc một bài viết trong một phần cụ thể, chẳng hạn như Kinh doanh,
bảng xếp hạng sẽ thay đổi để hiển thị các bài viết phổ biến nhất trong phần đó.

Engadget sử dụng một bảng xếp hạng bắt mắt, được minh họa trong Hình 9-40, để hiển thị các bài đăng
được bình luận nhiều nhất. So sánh màn hình rất sáng này với bảng xếp hạng có nội dung trung tính hơn
trong Hình 9-41. Cũng lưu ý các tên tab khác nhau phản ánh các tiêu chí khác nhau mà các trang web này sử
dụng để xác định các bài báo “hấp dẫn nhất”—mặc dù chúng tôi không thể biết Mashable (ở trên cùng bên
phải) sử dụng tiêu chí nào.
436Chương 9: Sử dụng mạng xã hội

Bảng xếp hạng nội dung trên trang web của New York Times

tham gia
 các mẫu437

Bảng xếp hạng nội dung từ Technology Review, Mashable (trên cùng bên phải) và Wired (dưới cùng)
438Chương 9: Sử dụng mạng xã hội

Cuộc trò chuyện gần đây trên hai blog: Boing Boing và Kitchen Table Math

Hiển thị các nhận xét, tweet, đóng góp mới nhất của người đọc hoặc hoạt động cộng đồng khác trong thanh
bên.

Bạn muốn khuyến khích sự tham gia một cách rõ ràng—mọi người đọc tác phẩm của bạn hoặc theo dõi bạn cũng
không sao, nhưng bạn muốn họ thực sự thực hiện bước tiếp theo đó và đóng góp.

Bạn có rất nhiều hoạt động xã hội đang diễn ra xung quanh nội dung bạn xuất bản và các nhận
xét có chất lượng đủ cao để bạn thấy thoải mái khi hiển thị các đoạn trích của chúng trên trang
chủ của mình.
 các mẫu439

Người đọc biết rằng trang web của bạn không phải là một “thị trấn ma”. Họ có thể thấy rằng có những người khác
ở đây, tích cực tham gia vào các cuộc trò chuyện. Điều này hấp dẫn mọi người và có thể khuyến khích họ đóng góp
những suy nghĩ của riêng mình.

Người đọc có thể bị lôi cuốn vào các cuộc trò chuyện nếu họ được xem các đoạn hội thoại—
ví dụ: họ có thể muốn trả lời một nhận xét cụ thể.

Tạo một tiện ích hiển thị danh sách các hoạt động mới nhất theo thứ tự thời gian đảo ngược. Nó không cần
phải được đặt trong màn hình đầu tiên; thường thì những thứ này ở một nơi không dễ thấy trên trang chủ
(hoặc trang nội bộ).

Quyết định những hoạt động xã hội mà bạn muốn thể hiện. Nhận xét có lẽ là điều phổ biến nhất để hiển thị
và chúng thú vị đối với những người đọc khác; các tweet về một chủ đề nhất định cũng vậy. Bạn cũng có thể
hiển thị các hoạt động yêu thích hoặc bỏ phiếu (chẳng hạn như Bỏ phiếu để thăng hạng trong thư viện mẫu
Yahoo!) hoặc chia sẻ, nhưng hãy đảm bảo rằng những hoạt động này không lấn át các nhận xét, điều này sẽ
hấp dẫn hơn.

Trong danh sách các cuộc trò chuyện gần đây, hiển thị những mẩu thông tin này:

• Hoạt động đó là gì và một đoạn nhỏ của hoạt động đó nếu thích hợp

• Tên độc giả khởi xướng hoạt động này

• Tiêu đề của nội dung bị ảnh hưởng và liên kết tới nội dung đó

• Có thể là dấu thời gian hoặc thời gian tương đối (ví dụ: “10 phút trước”)

Một số phần mềm blog, bao gồm Blogger và WordPress, giúp thực hiện việc này rất dễ dàng. Hầu như
không có chi phí nào cho nó, ngoài không gian màn hình mà mộttrò chuyện gần đâychiếm diện tích.

Như bạn có thể thấy trong Hình 9-43, một số trang có các loại đóng góp công khai khác nhau. Yelp hiển thị
các bài đánh giá (“Danh sách mới”) và cuộc trò chuyện ngoài luồng ở hai phần khác nhau. MyStarbucksIdea
hiển thị những ý tưởng mới nhất được đăng bởi độc giả, nhưng chỉ với tiêu đề. Technology Review là một
trang tin tức truyền thống hơn, vàtrò chuyện gần đâyphần được đánh giá thấp hơn so với các blog được hiển
thị trong Hình 9-42. Lưu ý rằng nếu không có trích dẫn trực tiếp, MyStarbucksIdea và Technology Review sẽ
ít mang tính cá nhân hơn, trang trọng hơn so với Yelp hoặc các ví dụ về blog được hiển thị trong Hình 9-42.
(Đây có thể là chính xác những gì bạn muốn, tất nhiên.)

Yahoo! Tin tức, thể hiện trong Hình 9-44, cập nhậttrò chuyện gần đâytiện ích bất cứ khi nào ai đó “bật lên” một
bài báo, điều này xảy ra rất, rất thường xuyên. Nó chắc chắn cho thấy hoạt động, nhưng vì bạn không nhìn
thấy những từ thực tế của mọi người nên nó gần như không hấp dẫn.
Cuộc trò chuyện gần đây tại Yelp, MyStarbucksIdea và Đánh giá công nghệ

Ù lên tại Yahoo! Tin tức

Nếu bạn đã từng thiết kế bất cứ thứ gì cho Web, bạn đã là một nhà thiết kế di
động. Chúc mừng!
Đó là thực tế của một thế giới đầy iPhone, các loại điện thoại thông minh khác, trình đọc sách điện tử,
máy tính bảng và toàn bộ các quốc gia nơi mọi người truy cập Internet chủ yếu thông qua điện thoại
của họ. Tất cả những người dùng này sẽ thấy các trang web của bạn thông qua các trình duyệt nhỏ,
chậm, kỳ quặc và khó tương tác. Họ sẽ sử dụng trang web của bạn trong các điều kiện môi trường và
tư duy—hoàn toàn khác với những gì họ sẽ trải nghiệm nếu họ ngồi yên lặng tại một chiếc bàn làm
việc thoải mái, trước một màn hình lớn.

Ngay cả khi bạn không chọn trở thành một chuyên gia về thiết kế di động, bạn vẫn có thể xử lý thiết kế di
động một cách có ý thức và chu đáo. Một khoản đầu tư tương đối nhỏ về kiến thức, công việc thiết kế và
thời gian có thể giúp ích rất nhiều cho việc cải thiện trải nghiệm di động của các trang web bạn thiết kế.

Đối với nhiều trang web, bạn nên tạo một phiên bản riêng biệt của trang web nhắm đến người dùng
di động (hoặc ít nhất là người dùng màn hình nhỏ). Bạn sẽ trình bày một phiên bản thu nhỏ, tập trung
vào trang web của mình để đáp ứng nhu cầu của những người dùng đang di chuyển xung quanh.
Trong chương này, chúng ta sẽ không đi sâu vào các chi tiết kỹ thuật của phát hiện nền tảng và cách
trình bày thiết kế chính xác cho tình huống của người dùng (ví dụ: các biểu định kiểu CSS khác nhau)—
nhưng kiến thức thì có sẵn và khá dễ tìm.

Các trang web khác sẽ muốn cung cấp tất cả chức năng của họ thông qua trang web dành cho thiết bị di động, nhưng tất
cả chức năng đó sẽ được điều chỉnh cho phù hợp với màn hình nhỏ và các hạn chế khác trên thiết bị di động. Một lần nữa,
nhiều người chỉ xem Internet thông qua thiết bị di động của họ và họ sẽ muốn có tất cả các tính năng của trang web của
bạn. Bạn có thể chọn thực hiện hai thiết kế riêng biệt và song song, một dành cho thiết bị di động và một dành cho máy
tính để bàn.
442Chương 10: Di động

Nếu bạn tạo các công cụ và ứng dụng cho màn hình lớn, thay vì trang web, chương này có thể không áp dụng cho
bạn chút nào. Bạn và tổ chức của bạn có thể muốn đánh giá xem các công cụ của bạn (hoặc một số tập hợp con
của chúng) có thể được tạo lại dưới dạng ứng dụng trên thiết bị di động và vẫn hữu ích hay không. Biết người
dùng của bạn—hiểu nhu cầu, nhiệm vụ và bối cảnh sử dụng của họ. Tạo ứng dụng dành cho thiết bị di động là
một khoản đầu tư không cần thiết, nhưng nó có thể xứng đáng với bạn.

Khi bạn thiết kế cho nền tảng di động, bạn phải đối mặt với những thách thức mà bạn không gặp phải khi
người dùng của bạn có thể được cho là đang ngồi yên lặng trước màn hình lớn và bàn phím.

Kích thước màn hình nhỏ

Các thiết bị di động không cung cấp nhiều không gian để trình bày thông tin hoặc lựa chọn.
Đáng buồn thay, bạn không có thanh bên, menu tiêu đề dài, hình ảnh lớn không có tác dụng gì
hoặc danh sách liên kết dài. Bạn cần loại bỏ thiết kế của mình xuống bản chất của nó, loại bỏ tất
cả những thứ thừa mà bạn có thể. Để lại các chức năng quan trọng nhất trên trang nhất và loại
bỏ phần còn lại hoặc chôn chúng sâu hơn trong trang web.

Độ rộng màn hình thay đổi

Thật khó để tạo một thiết kế hoạt động tốt trên ba màn hình khác nhau có chiều rộng 128 pixel, chiều
rộng 320 pixel và chiều rộng hơn 600 pixel—và cũng có thể có một số màn hình ở giữa. Cuộn xuống
một trang dành cho thiết bị di động không quá khó (đó là lý do tại sao chiều rộng được đề cập đặc biệt
chứ không phải chiều cao), nhưng một thiết kế cần sử dụng chiều rộng màn hình có sẵn một cách
thông minh. Một số trang web cuối cùng tạo ra các phiên bản khác nhau—với đồ họa logo khác nhau,
các tùy chọn điều hướng khác nhau, v.v.—cho các thiết bị có bàn phím nhỏ nhất và một phiên bản
khác cho loại thiết bị cảm ứng cỡ iPhone (rộng khoảng 320 pixel).

Để có một cuộc thảo luận tuyệt vời về thiết kế và các vấn đề kỹ thuật liên quan đến chiều rộng màn hình, hãy
xem bài viết mobiForge sau đây. Việc tìm kiếm các bài báo gần đây hơn cũng có thể giúp ích cho bạn.

http://mobiforge.com/designing/story/efficiency-design-multiple-screen-sizes

Những màn hình cảm ứng

Khi viết bài này, hầu hết truy cập web di động đến từ các thiết bị có màn hình cảm ứng. Các thiết
bị bàn phím rõ ràng cũng nên được phục vụ, vì chúng chiếm phần lớn các thiết bị di động hiện
có, nhưng bạn có thể muốn thiết kế thiên về trải nghiệm màn hình cảm ứng. Các liên kết trên
thiết bị bàn phím có thể được điều hướng bằng các phím khá dễ dàng, miễn là bạn tuân thủ các
nguyên tắc thiết kế tổng thể tốt (nội dung hạn chế, bố cục tuyến tính, v.v.).

Thật khó để chạm chính xác vào các mục tiêu nhỏ bằng ngón tay. Làm cho các liên kết và nút của bạn
đủ lớn để dễ dàng truy cập; ở mức tối thiểu, làm cho các mục tiêu trúng đích quan trọng cách mỗi bên
ít nhất 1 cm và đặt một khoảng trống giữa chúng. Tất nhiên, điều này làm giảm không gian có sẵn cho
các nội dung khác.
 Những thách thức của thiết kế di động443

Khó gõ văn bản

Không ai thích gõ văn bản trên màn hình cảm ứng hoặc bàn phím. Bạn nên thiết kế các đường dẫn tương tác thông
qua trang web hoặc công cụ của mình theo cách mà việc gõ là không cần thiết hoặc rất hạn chế. Sử dụngtự động
hoàn thành(Chương 8) trong các trường văn bản bất cứ khi nào có thể, chẳng hạn, và điền trước các trường biểu mẫu

bất cứ khi nào bạn có thể làm như vậy một cách đáng tin cậy. Tuy nhiên, hãy nhớ rằng các số dễ hơn nhiều so với
văn bản trong một số ngữ cảnh.

Môi trường vật chất đầy thách thức

Mọi người sử dụng điện thoại và các thiết bị khác ở mọi nơi: ngoài trời nắng chói chang, trong rạp
chiếu phim tối tăm, trong phòng hội nghị, ô tô, xe buýt, xe lửa, máy bay, cửa hàng, phòng tắm và trên
giường. Hãy nghĩ về sự khác biệt về ánh sáng xung quanh, để bắt đầu với—văn bản màu xám trang
nhã trên nền màu xám có thể không hoạt động tốt dưới ánh nắng mặt trời trực tiếp. Cũng nghĩ về sự
khác biệt về tiếng ồn xung quanh: giả sử rằng một số người dùng sẽ không nghe thấy thiết bị và
những người khác có thể thấy tiếng ồn đột ngột chói tai và không phù hợp.

Cuối cùng, hãy nghĩ về chuyển động. Văn bản nhỏ khó đọc khi thiết bị (hoặc người dùng) đang di chuyển. Và
một mục tiêu nhỏ bị bắn trúng trên thiết bị màn hình cảm ứng sẽ khó sử dụng trong những trường hợp tốt
nhất, nhưng điều đó gần như không thể thực hiện được trên một chiếc xe buýt lắc lư và lắc lư! Một lần nữa,
hãy thiết kế cho “những ngón tay béo” và thiết kế sao cho dễ dàng sửa chữa những sai lầm.

Ảnh hưởng xã hội và sự chú ý hạn chế

Hầu hết thời gian, người dùng thiết bị di động sẽ không dành nhiều thời gian và sự chú ý trên trang
web hoặc ứng dụng của bạn. Họ sẽ xem xét thiết kế của bạn trong khi làm những việc khác—đi bộ, lái
xe, nói chuyện với người khác, ngồi trong cuộc họp hoặc (Chúa cấm) lái xe. Đôi khi, người dùng di
động sẽ tập trung toàn bộ sự chú ý vào thiết bị, chẳng hạn như khi chơi trò chơi, nhưng anh ta sẽ
không làm điều đó thường xuyên như một người ngồi trước bàn phím. Do đó, hãy thiết kế cho những
người dùng bị phân tâm: làm cho các chuỗi nhiệm vụ trở nên dễ dàng, nhanh chóng và dễ dàng truy
cập lại. Và làm cho mọi thứ tự giải thích.

Một giả định khác mà bạn có thể đưa ra là rất nhiều người dùng di động sẽ tham gia vào các cuộc trò
chuyện hoặc các tình huống xã hội khác. Họ có thể di chuyển xung quanh thiết bị để cho mọi người
xem nội dung nào đó trên màn hình. Họ có thể có người nhìn qua vai của họ. Họ có thể cần phải tắt
âm thanh đột ngột nếu việc sử dụng một thiết bị ồn ào là không chấp nhận được về mặt xã hội—hoặc
họ có thể bật nó lên để cho người khác nghe thấy điều gì đó. Thiết kế của bạn có hoạt động tốt trong
những tình huống này không? Nó có thể hỗ trợ tương tác xã hội duyên dáng?

trong cuốn sách của mìnhThiết kế và Phát triển Di động (O'Reilly,http://oreilly.com/catalog/ 9780596155452/),Brian
Fling kể một sự thật phũ phàng: “Những sản phẩm di động tuyệt vời được tạo ra, không bao giờ được chuyển. Bắt
đầu bằng cách hiểu người dùng của bạn và những lợi ích mà phương tiện mang lại.”

Nếu bạn chỉ đơn giản là cố gắng lấy nội dung thông thường của một trang web và nhồi nhét nó vào một trang web 320×Cửa sổ

480, dừng lại. Hãy lùi lại một bước và nhìn vào bức tranh toàn cảnh.
444Chương 10: Di động

Một người sử dụng thiết bị di động có thể chỉ muốn sử dụng trang web (hoặc ứng dụng) của bạn theo
những cách cụ thể; cô ấy sẽ không có cùng phạm vi nhu cầu mà người dùng của toàn bộ trang web sẽ
có. Thiết kế cho các bối cảnh sử dụng như sau:

• “Tôi cần biết sự thật này ngay bây giờ, nhanh chóng.”

• “Tôi có vài phút rảnh rỗi, vì vậy hãy giải trí cho tôi.” (Xemvi phạmmẫu trong
Chương 1.)
• “Kết nối xã hội với tôi.”
• “Nếu có điều gì tôi cần biết ngay bây giờ, hãy nói cho tôi biết.”

• “Điều gì liên quan đến nơi tôi đang ở hiện tại?”

Đừng ngại loại bỏ tất cả những thứ khác—nội dung bổ sung, tính năng bắt mắt, thanh bên, trích dẫn kéo,
quảng cáo, hình ảnh, bản đồ trang web, liên kết xã hội, v.v. Tập trung chặt chẽ vào một vài nhiệm vụ mà
người dùng di động sẽ cần từ trang web của bạn, sử dụng nhãn hiệu tối thiểu và bỏ qua phần còn lại.

Trên thực tế, hãy đảm bảo rằng ngay cả trên trang chủ (đối với trang web) hoặc trang làm việc đầu tiên của
ứng dụng, nội dung có liên quan sẽ xuất hiện ở vị trí cao trên màn hình. Điều đó có nghĩa là loại bỏ “hiệu
ứng bánh lớp” của logo, quảng cáo, tab và tiêu đề xếp chồng lên nhau trên màn hình. Xem Hình 10-1 để biết
một ví dụ tồi; phần nội dung duy nhất mà người dùng thực sự quan tâm là điểm số ở cuối màn hình! (Nếu
người dùng xoay điện thoại sang một bên, điểm thậm chí sẽ không hiển thị trong màn hình đầu tiên.)

NBA.com, nơi thông tin duy nhất mà người dùng quan tâm nằm ở dưới cùng
 Những thách thức của thiết kế di động445

Khi đã giảm trang web xuống dạng tối thiểu, bạn nên đảm bảo rằng người dùng thực sự cần trang web không
dành cho thiết bị di động đầy đủ có thể có được trang web đó. Đặt một liên kết đến toàn bộ trang web ở một nơi
rõ ràng. Hãy nhớ rằng nhiều người trên thế giới chỉ có thể truy cập web qua điện thoại của họ, vì vậy bạn không
thể tin tưởng vào việc họ chỉ truy cập toàn bộ trang web trên màn hình lớn của họ—họ có thể không có.

Ngoài ra, bạn có thể tạo hai thiết kế “riêng biệt và song song” đã đề cập trước đó, trong đó tất cả các
chức năng và thông tin của trang web được trình bày trong trang web dành cho thiết bị di động (có
nghĩa là người dùng không bao giờ phải truy cập trang web không dành cho thiết bị di động đầy đủ).
Bạn vẫn có thể cần phải loại bỏ trang chủ hoặc màn hình chính. Thay vì có một hệ thống phân cấp
điều hướng phẳng và rộng, trong đó trang chủ có hàng trăm liên kết trực tiếp đến các trang khác, bạn
có thể cần tổ chức lại trang web để hệ thống phân cấp hẹp hơn và sâu hơn. Điều này cho phép bạn
đặt ít tùy chọn hơn trên trang chủ, nghĩa là ít lộn xộn hơn trên màn hình nhỏ. (Tất nhiên, bạn sẽ phải
cân đối điều đó với thời gian người dùng cần để chuyển từ trang này sang trang khác!)

Thiết bị di động cung cấp các tính năng tuyệt vời mà bạn không có trên máy tính để bàn. Vị trí,
camera, tích hợp giọng nói, đầu vào bằng cử chỉ, phản hồi xúc giác như va chạm và rung, cùng
các tính năng khác có thể khả dụng với bạn. Một số thiết bị đa nhiệm để ứng dụng của bạn có
thể chạy ẩn trong khi người dùng đang làm việc khác; bạn có thể sử dụng nó?

Điều này quay trở lại vấn đề chiều rộng. Nhiều thiết bị đơn giản là không cung cấp cho bạn đủ pixel theo chiều
rộng để thực hiện bất kỳ bố cục cạnh nhau thú vị nào. Thay vì ép buộc vấn đề, chỉ cần chấp nhận rằng bằng cách
này hay cách khác, nội dung của bạn cuối cùng sẽ được trình bày theo chiều dọc. Sắp xếp thứ tự nội dung của
trang web dành cho thiết bị di động sao cho nó “dễ đọc” khi được trình bày theo cách này. xem
Ngăn xếp dọcmẫu trong chương này.

(Một số tác giả đã chỉ ra rằng việc tuyến tính hóa nội dung này cũng làm cho nội dung của trang web dành cho
thiết bị di động dễ tiếp cận hơn với trình đọc màn hình và các loại thiết bị khác. Đây là một điểm không cần thiết.
Trên thực tế, trang web chính của bạn có thể được tuyến tính hóa theo cách này không? cảm giác nếu bạn đọc nội
dung theo thứ tự HTML của nó, không có kiểu dáng hoặc bố cục CSS?)

Khi bạn đã quyết định những tác vụ mà người dùng di động điển hình của bạn sẽ muốn thực hiện và bạn đã thu
hẹp trang web chỉ còn nội dung có liên quan nhất, hãy cố gắng thực hiện những tác vụ đó dễ dàng nhất có thể
bằng cách làm theo các phương pháp phỏng đoán sau:

• Loại bỏ gõ,hoặc giảm xuống càng ít ký tự càng tốt.

• Sử dụng như làvài lần tải trangcàng tốt và không làm tăng các trang có byte không cần thiết. Thời
gian tải xuống có thể rất chậm; hầu hết các nơi trên thế giới vẫn nằm ngoài tầm với của các cơ sở
Internet không dây băng thông cao.
446Chương 10: Di động

• Giảm cuộnvà kéo sang một bên, trừ khi nó loại bỏ việc tải trang và nhập. Nói cách
khác, hãy ưu tiên một trang dọc dài hơn nhiều trang nhỏ nếu bạn phải trình bày
nhiều nội dung.
• Giảm thiểusố vòingười dùng cần đạt được thông tin mong muốn hoặc hoàn thành một nhiệm vụ.
Chạm vào các mục tiêu trúng đích lớn—hoặc sử dụng các nút phần cứng—tốt hơn là gõ bằng
một cú sút xa, nhưng dù sao hãy cố gắng giảm bớt chúng.

Để biết thêm thông tin về nguyên tắc thiết kế di động và phân tích các kiểm tra khả năng sử dụng di động được
thực hiện trên các trang web khác nhau, hãy xem nghiên cứu của Nielsen Norman Group “Khả năng sử dụng của
trang web di động” tạihttp://www.nngroup.com/reports/mobile.

Cuốn sách của Dan SafferThiết kế giao diện cử chỉ (O'Reilly,http://oreilly.com/catalog/

9780596518394/)thảo luận về các cử chỉ phổ biến được sử dụng trong màn hình cảm ứng, trong số
các chủ đề khác liên quan đến thiết bị di động.

Cuối cùng, thư viện mẫu Design For Mobile, tạihttp://patterns.design4mobile.com,chứa nhiều
mẫu hay ngoài những mẫu được tìm thấy trong cuốn sách này.

Dưới đây là một số phiên bản di động của trang chủ quản lý để đáp ứng hầu hết các ràng buộc về
thiết kế được liệt kê trong phần trước, trong khi vẫn giữ được thương hiệu và cá tính của từng trang
web. Hình 10-2 cho thấy các ví dụ về từng loại.

JetBlue.com
Nếu ai đó đang truy cập trang web của JetBlue từ thiết bị di động, thì thật tốt khi đặt cược rằng
anh ta thực sự đang đi trên JetBlue vào ngày hôm đó! Chẳng hạn, anh ta có thể đang cố lấy
thông tin về chuyến bay của mình. Đó chính xác là những gì trang web di động JetBlue cung cấp.
Các mục đầu tiên hữu ích nhất đối với khách du lịch: thông tin chuyến bay, đăng ký và cảnh báo,
cùng với các tùy chọn khác để đặt chuyến bay và giải trí trên chuyến bay. Trang này đơn giản và
tuyến tính, đồng thời các mục dễ đọc và dễ nhấn.

RuthsChris.com
Người dùng di động truy cập các trang web nhà hàng có thể muốn xem địa điểm, xem thực đơn hoặc
đặt chỗ trước. Trang web đơn giản này thực hiện các nhiệm vụ đó một cách có phong cách. (Trang web
sẽ tốt hơn nữa nếu trình duyệt của thiết bị biết vị trí hiện tại để người dùng có thể yêu cầu trang web
“tìm nhà hàng gần tôi nhất”.)

Boston.com
Trang web tin tức này có thiết kế gọn gàng và chứa đựng thông tin hữu ích trong một không gian nhỏ:
thời tiết, tỷ số bóng chày, tiêu đề chính và khoảng 20 từ đầu tiên của mỗi bài báo. Trang web đáp ứng
nhu cầu của người dùng di động để lấp đầy một phút ở đây và một phút ở “thời gian tìm thấy”. Toàn
bộ khu vực của mỗi bản tóm tắt bài viết có thể được khai thác, làm cho các bản tóm tắt dễ dàng điều
hướng.
 Những thách thức của thiết kế di động447

Độ trung thực.com

Những người theo dõi thị trường tài chính một cách bắt buộc sẽ tìm thấy dữ liệu hiện tại về ba
chỉ số thị trường lớn của Hoa Kỳ ở đầu trang dành cho thiết bị di động, cùng với cách tìm kiếm
báo giá cụ thể và liên kết điều hướng đến các chủ đề kịp thời khác (chẳng hạn như tin tức, danh
sách theo dõi và danh mục đầu tư cá nhân). Thông tin hữu ích được hiển thị ngay trên trang chủ
và dễ dàng có sẵn bộ dữ liệu sâu hơn nhiều từ các lựa chọn đã cho.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Các ví dụ hay về trang web dành cho thiết bị di động: JetBlue, Ruth's Chris, Boston.com và Fidelity
448Chương 10: Di động

Trong phần giới thiệu, chúng tôi đã nói về nhu cầu cấu trúc nội dung theo cột dọc để có tính
linh hoạt tối đa. CácNgăn xếp dọcmô hình đi vào chi tiết hơn.

1.Ngăn xếp dọc

Một ứng dụng di động cần một cách để hiển thị cấu trúc điều hướng cấp cao nhất của nó. Thanh
công cụ cố định trên đầu hoặc cuối mỗi trang ứng dụng là một cách tiêu chuẩn để tổ chức giao
diện trên thiết bị di động; tab và menu toàn trang là hai cách phổ biến khác. Ít rõ ràng hơn,
nhưng đáng nói, làcuộn phimVàCông cụ cảm ứnghoa văn.

2.cuộn phim

3.Công cụ cảm ứng

Các trang web dành cho thiết bị di động thường sử dụngĐiều hướng dưới cùngmẫu cho các menu toàn cầu của họ,
ưu tiên sử dụng không gian có giá trị ở đầu trang cho nội dung phù hợp hơn ngay lập tức.

4.Điều hướng dưới cùng

Danh sách ở khắp mọi nơi trong thế giới di động—danh sách ứng dụng, hình ảnh, tin nhắn, danh bạ,
hành động, cài đặt, mọi thứ! Cả trang web và ứng dụng phải trình bày các danh sách được thiết kế
đẹp mắt và có thể sử dụng được. Danh sách văn bản thông thường thường đầy đủ, vàbăng chuyền
VàLưới hình thu nhỏhoạt động đẹp mắt trong các thiết kế di động. (Xem Chương 5 để biết các mẫu đó và thảo
luận thêm về thiết kế danh sách.) Cân nhắc sử dụng mộtDanh sách hình thu nhỏ và văn bảnđồng thời, bởi vì
chúng thường đơn giản hơnbăng chuyềnVàLưới hình thu nhỏ. Đôi khi mộtDanh sách vô hạn
phù hợp với nhu cầu thiết kế di động.

5.Danh sách hình thu nhỏ và văn bản

6.Danh sách vô hạn

Các mẫu còn lại là một nhóm các chủ đề liên quan đến thiết kế di động.

7.Biên giới hào phóng

số 8.Nút xóa văn bản

9.Đang tải các chỉ báo

10.Ứng dụng được kết nối phong phú

11.Hợp lý hóa thương hiệu

 các mẫu449

Bố cục dọc của Google Tin tức

Sắp xếp nội dung của trang dành cho thiết bị di động theo cột dọc, sử dụng ít hoặc không sử dụng
các yếu tố cạnh nhau. Để các thành phần văn bản ngắt dòng và để trang cuộn xuống cuối hầu hết các
màn hình thiết bị.

Hầu hết các trang web dành cho thiết bị di động phải hoạt động trên các thiết bị có kích thước khác nhau nên sử
dụng mẫu này, đặc biệt nếu chúng chứa nội dung và biểu mẫu dựa trên văn bản. (Nội dung hấp dẫn, chẳng hạn
như trò chơi hoặc video toàn màn hình, thường sẽ không sử dụng điều này vì nó thường không cuộn giống như
trang dựa trên văn bản.)

Khi chuyển từ trang này sang trang khác tốn kém—như trường hợp của các trang web, cần thời gian
để tải xuống—mô hình này có thể áp dụng. Mặt khác, một ứng dụng nằm trên thiết bị có thể chuyển
từ trang này sang trang khác gần như ngay lập tức vì không cần phải tải xuống nội dung. Đối với
những điều này, sẽ hợp lý hơn nếu cấu trúc nội dung thành các màn hình đơn lẻ để người dùng
không bao giờ phải cuộn theo chiều dọc—họ có thể chỉ cần chạm hoặc vuốt. Nhưng việc cuộn dọc
một trang dài sẽ tốt hơn so với việc chờ tải xuống vô tận.
450Chương 10: Di động

Các thiết bị có chiều rộng khác nhau. Không phải lúc nào bạn cũng đoán trước được chiều rộng thực tính bằng
pixel, trừ khi bạn phát hiện chiều rộng màn hình trong thời gian chạy hoặc xây dựng ứng dụng cho các thiết bị cụ
thể. (Bạn có thể tạo các thiết kế được tối ưu hóa cho các thiết bị đơn lẻ hoặc độ rộng tiêu chuẩn dành riêng cho
thiết bị, nhưng không phải ai cũng có tài nguyên để làm như vậy.)

Thiết kế có chiều rộng cố định quá lớn đối với thiết bị vật lý có thể cuộn sang một bên hoặc được thu phóng,
nhưng những thiết kế này không bao giờ khả dụng bằng những thiết kế cho phép người dùng chỉ cần cuộn xuống.

Kích thước phông chữ cũng có thể thay đổi mà bạn không biết, và như trongbố trí chất lỏngmô hình, một
Ngăn xếp dọcvới các phần tử văn bản được ngắt dòng sẽ điều chỉnh một cách duyên dáng khi điều này xảy ra.

Bố trí nội dung của trang trong một cột dọc cuộn. Đặt các mục quan trọng nhất ở trên cùng và các
mục ít quan trọng hơn ở dưới để hầu hết người dùng có thể nhìn thấy những nội dung quan trọng.

Nội dung hữu ích—tức là từ quan điểm của người dùng—sẽ hiển thị trong 100 pixel đầu tiên (hoặc ít hơn) của nội
dung nàyNgăn xếp dọc. Phần trên cùng của màn hình này là bất động sản quý giá. Đừng lãng phí nó với các biểu
trưng, quảng cáo hoặc thanh công cụ dài vô tận, tất cả được xếp chồng lên nhau thành một “chiếc bánh nhiều
lớp” đẩy tất cả nội dung hữu ích ra khỏi cuối trang! Điều đó gây khó chịu cho người dùng.

Đặt các nhãn biểu mẫu phía trên các điều khiển của chúng, không phải bên cạnh chúng, để tiết kiệm không gian theo chiều ngang.

Bạn sẽ cần tất cả không gian có thể để hiển thị các trường văn bản và các điều khiển lựa chọn với độ rộng phù hợp.

Chỉ đặt các nút cạnh nhau nếu bạn thực sự chắc chắn rằng tổng chiều rộng của chúng sẽ không bao giờ
rộng hơn màn hình hiển thị. Nếu các nút chứa văn bản dài có thể được bản địa hóa hoặc phóng to phông
chữ, hãy quên nó đi.

Hình ảnh thu nhỏ có thể nằm vừa vặn bên cạnh văn bản khá dễ dàng và điều này thường được thực
hiện trong danh sách các bài báo, danh bạ, sách, v.v.—xem phầnDanh sách hình thu nhỏ và văn bảnmẫu.
Đảm bảo thiết kế xuống cấp tốt khi chiều rộng màn hình giảm xuống 128 pixel (hoặc bất kỳ mức tối
thiểu thực tế nào xảy ra khi bạn tạo thiết kế của mình).

Các trang web cho ESPN, cácBưu điện Washington,và REI (Hình 10-4) thể hiện ba phong
cách sử dụngNgăn xếp dọc. ESPN chỉ đặt nội dung có liên quan tức thời nhất trên trang chủ,
ưu tiên đặt phần còn lại sau các mục menu ở cuối trang. Các Bưu điện Washingtonđặt tất cả
ra khỏi đó; ngăn xếp trong hình chỉ là một phần nhỏ của toàn bộ trang! REI chỉ hiển thị một
menu gồm tất cả các địa điểm và cách mua sắm có sẵn, không có quảng cáo hoặc lời giới
thiệu trên trang chủ của nó.
Translated from English to Vietnamese - www.onlinedoctranslator.com

các mẫu451

Ngăn xếp dọc trên các trang web dành cho thiết bị di động của ESPN, Washington Post và REI
452Chương 10: Di động

Ứng dụng thời tiết trên iPhone

Sắp xếp các trang cấp cao nhất cạnh nhau và cho phép người dùng vuốt qua lại để xem
từng trang một.

Bạn có các trang nội dung song song về mặt khái niệm, chẳng hạn như thời tiết ở các thành phố khác
nhau hoặc tỷ số trong các môn thể thao khác nhau. Người dùng sẽ không phiền khi lướt qua các
trang này, lướt qua một số trang trước khi đến trang họ đang tìm kiếm, bởi vì tất cả chúng đều có khả
năng thú vị.

Mẫu này đôi khi có thể là giải pháp thay thế khả thi cho các lược đồ điều hướng khác dành cho ứng dụng dành cho thiết bị di động,

chẳng hạn như thanh công cụ, tab hoặc menu toàn trang.

Mỗi mục được hiển thị có thể chiếm toàn bộ màn hình; không cần sử dụng không gian cho các tab
hoặc điều hướng khác.

Vì người dùng không thể chuyển thẳng đến màn hình mong muốn—anh ta phải vuốt qua các màn hình
khác để đến đó—mẫu này khuyến khích duyệt tìm và sự ngẫu nhiên.

Vuốt dường như là một cử chỉ rất hài lòng đối với một số người dùng.
 các mẫu453

Một bất lợi của mô hình này là nó không mở rộng quy mô rất tốt; bạn không thể sử dụng quá nhiều trang
cấp cao nhất hoặc người dùng có thể khó chịu khi phải vuốt quá nhiều lần để đến trang mong muốn. Một
bất lợi khác là thiếu minh bạch. Người dùng mới, lần đầu tiên nhìn thấy ứng dụng của bạn, không thể dễ
dàng nhận ra rằng thao tác vuốt là cách anh ta chuyển từ trang này sang trang khác.

Về cơ bản, mộtcuộn phimgiống như mộtbăng chuyền(xem Chương 5) để biết các trang chính của ứng dụng di
động. Một sự khác biệt là mộtbăng chuyềnthường hiển thị siêu dữ liệu—thông tin về mục hoặc trang—và
ngữ cảnh, chẳng hạn như các đoạn của trang trước và trang tiếp theo. Ứng dụng di động sử dụngcuộn phim
với tư cách là một thiết bị tổ chức cấp cao nhất thường không làm điều đó.

Nếu bạn muốn cung cấp cho người dùng manh mối rằng có nhiều trang cấp cao nhất tồn tại và họ có thể vuốt
giữa các trang đó, hãy sử dụng chỉ báo dấu chấm như ứng dụng Thời tiết sử dụng ở cuối màn hình.

Ứng dụng Thời tiết tích hợp sẵn của iPhone (hiển thị trong Hình 10-5, ở trên cùng của mẫu) sử
dụng mộtcuộn phimđể hiển thị thời tiết ở các vị trí địa lý khác nhau mà người dùng chọn.

Tương tự như vậy, ứng dụng iPhone của ESPN cấu trúc các trang chính của nó dưới dạngcuộn phim. Người
dùng vuốt qua lại giữa tỷ số bóng đá, bóng chày, bóng rổ và các môn thể thao khác (xem Hình 10-6).

ứng dụng ESPN

454Chương 10: Di động

Các công cụ cảm ứng trên trình xem ảnh iPhone

Chỉ hiển thị các công cụ khi chạm hoặc nhấn phím và đặt chúng trong một lớp phủ động,
nhỏ phía trên nội dung.

Bạn đang thiết kế trải nghiệm phong phú hoặc toàn màn hình, chẳng hạn như video, ảnh, trò
chơi, bản đồ hoặc sách. Để quản lý trải nghiệm đó, đôi khi người dùng sẽ cần các công cụ điều
hướng điều khiển, công cụ trình phát đa phương tiện, thông tin về nội dung, v.v. Các công cụ
yêu cầu không gian đáng kể, nhưng đôi khi chỉ cần thiết.

Nội dung được phép chi phối trải nghiệm hầu hết thời gian. Người dùng không bị phân tâm bởi các
điều khiển chiếm không gian và sự chú ý khỏi nội dung. Hãy nhớ rằng trong bối cảnh di động, không
gian và sự chú ý thậm chí còn là những tài nguyên quý giá hơn bình thường.

Người dùng kiểm soát trải nghiệm bằng cách chọn thời điểm hiển thị các công cụ.
 các mẫu455

Hiển thị nội dung chưa trang trí bằng toàn màn hình. Khi người dùng chạm vào màn hình của thiết bị hoặc nhấn
một phím hoặc phím chức năng cụ thể, hãy hiển thị các công cụ.

Nhiều ứng dụng chỉ hiển thịCông cụ cảm ứngkhi người dùng chạm vào một vùng nhất định trên màn
hình. Bằng cách này, người dùng không vô tình làm hiển thị các công cụ chỉ bằng cách xử lý thiết bị
thông thường. Ngoài ra, bạn có thể hiển thị các công cụ khác nhau khi chạm vào các vùng khác nhau
của màn hình—ví dụ: trình đọc sách Stanza thực hiện việc này. Xem ví dụ trong Hình 10-9.

Hiển thị các công cụ trong một khu vực nhỏ, trong mờ dường như nổi phía trên nội dung. Độ trong mờ làm
cho các công cụ trông phù du (đúng như bản chất của chúng).

Xóa công cụ sau vài giây không sử dụng hoặc ngay lập tức nếu người dùng chạm vào
màn hình bên ngoài giới hạn của công cụ. Có thể khó chịu khi đợi các công cụ tự biến
mất.

Trình phát video trên iPhone hiển thịCông cụ cảm ứngkhi người dùng chạm vào khu vực được chỉ định
của màn hình (xem Hình 10-8). Chúng lại biến mất sau khoảng năm giây không sử dụng.

Công cụ cảm ứng YouTube dành cho iPhone

Stanza, một trong nhiều trình đọc sách điện tử trên điện thoại thông minh và các thiết bị màn hình cảm ứng
khác, cũng sử dụngCông cụ cảm ứng. Hầu hết thời gian, toàn màn hình được sử dụng để hiển thị văn bản
sách. Nhưng khi người dùng chạm vào giữa màn hình, thông tin bổ sung và các điều khiển sẽ xuất hiện—
tên sách, tác giả, chương và trang, cài đặt, tìm kiếm, chế độ xem và một menu gồm nhiều công cụ khác. Để
giải thích điều này và các cử chỉ lật trang, người đọc lần đầu sẽ được xem một hộp thoại giải thích. Xem
Hình 10-9.
456Chương 10: Di động

Trình đọc sách Stanza: trang mặc định, với Công cụ cảm ứng và hộp thoại giải thích

Điều hướng dưới cùng của Amazon

 các mẫu457

Đặt điều hướng chung ở cuối trang, bên dưới màn hình đầu tiên.

Trang web dành cho thiết bị di động cần hiển thị một số liên kết điều hướng toàn cầu, nhưng những liên kết này đại diện cho các đường dẫn

có mức độ ưu tiên thấp thông qua giao diện dành cho nhiều người dùng.

Ưu tiên cao nhất của bạn trên trang nhất của trang web là hiển thị nội dung mới, thú vị.

Đầu trang chủ di động là bất động sản quý giá. Nhìn chung, bạn chỉ nên đặt hai hoặc ba liên
kết điều hướng quan trọng nhất ở đó—nếu có—và dành phần còn lại của trang nhất cho
nội dung sẽ thu hút hầu hết người dùng.

Người dùng đang tìm kiếm các liên kết điều hướng có thể dễ dàng cuộn xuống cuối trang, ngay cả khi các liên kết
đó nằm dưới màn hình đầu tiên.

Tạo một tập hợp các mục menu được sắp xếp theo chiều dọc ở cuối trang. Làm cho chúng dễ dàng chạm
bằng ngón tay trên màn hình cảm ứng—kéo dài chúng trên toàn bộ chiều rộng của trang dành cho thiết bị
di động và làm cho văn bản lớn và dễ đọc.

Mô hình này có liên quan mật thiết vớiSơ đồ trang webtrong Chương 3. Trong một ứng dụng dành cho
thiết bị di động, có thể bạn không cố gắng đưa toàn bộ sơ đồ trang web vào chân trang—bạn chỉ có
chỗ cho một vài liên kết được lựa chọn tốt. Nhưng ý tưởng cũng tương tự: thay vì chiếm quá nhiều
không gian trên đầu trang để điều hướng, bạn có thể đẩy nó xuống cuối trang, nơi bất động sản ít có
giá trị hơn.

NPR đặt một chân trang mở rộng ở cuối mỗi trang của nó (xem Hình 10-11). Nó bao gồm các liên kết điều
hướng tiêu chuẩn, hộp tìm kiếm, trang web có kích thước đầy đủ, liên kết để tải xuống ứng dụng và kiểm
soát kích thước phông chữ.

Amazon sử dụng một cách đơn giản hơn, ngắn hơnĐiều hướng dưới cùnghệ thống. Xem ảnh chụp màn hình trong
Hình 10-10 ở đầu mẫu.

Ngược lại, Google sử dụng chân trang giống trang web hơn trên nhiều thuộc tính di động của mình (xem
Hình 10-12). Những liên kết này nhỏ hơn và trông giống nhãn hiệu hơn, nhưng chúng khó chạm vào hơn
bằng những đầu ngón tay vụng về.
458Chương 10: Di động

Điều hướng dưới cùng của NPR Chân trang Google Hình ảnh
 các mẫu459

Cửa hàng ứng dụng iPhone

Trình bày một danh sách các mục có thể lựa chọn, với mỗi mục chứa một hình ảnh thu nhỏ, một số văn bản
và có thể cả văn bản nhỏ hơn. Nếu thích hợp, hãy sử dụng màu đậm, biểu tượng và các điểm khác biệt trực
quan khác.

Bạn cần hiển thị danh sách các bài báo, mục blog, video, ứng dụng hoặc nội dung phức tạp khác.
Nhiều hoặc tất cả trong số này có hình ảnh liên quan. Bạn muốn mời người dùng nhấp vào các
mục này và xem chúng.

Hình ảnh thu nhỏ cải thiện danh sách chỉ có văn bản vì chúng trông hấp dẫn, giúp xác định các mục và
thiết lập chiều cao rộng rãi cho các mục trong danh sách.
460Chương 10: Di động

Điều kiện đọc trên thiết bị di động hiếm khi lý tưởng. Bằng cách thêm hình ảnh đầy màu sắc, bạn có thể cải
thiện sự khác biệt trực quan giữa các mục, giúp mọi người quét và phân tích danh sách một cách nhanh
chóng.

Nhiều trang web tin tức và blog đã hội tụ về mẫu thiết kế này như một cách để hiển thị liên kết đến
bài viết của họ. Chúng trông hấp dẫn hơn và “hoàn chỉnh” hơn so với các trang web tương tự chỉ liệt
kê các tiêu đề bài viết hoặc các đoạn văn bản.

Đặt hình ảnh thu nhỏ bên cạnh văn bản của mục. Hầu hết các trang web và ứng dụng đặt hình thu
nhỏ ở bên trái.

Ngoài hình thu nhỏ của ảnh, bạn có thể bao gồm các điểm đánh dấu trực quan khác, chẳng hạn như xếp hạng năm sao

hoặc biểu tượng thể hiện sự hiện diện xã hội của mọi người.

Đừng ngại sử dụng màu sắc tươi sáng hoặc bão hòa. Bạn có thể sẽ không thiết kế quá nhiều
kích thích thị giác trong bối cảnh máy tính để bàn, nhưng trong bối cảnh di động, nó hoạt động.
Ngay cả khi màu sắc có vẻ sặc sỡ, đừng lo—màn hình nhỏ có thể xử lý màu mạnh tốt hơn màn
hình lớn!

Nhiều trang web tin tức sử dụng mẫu này để hiển thị bài viết của họ. Yahoo! News và Boston.com đưa ra những ví
dụ điển hình. Các trang web báo chí quan tâm đặc biệt như Mashable cũng sử dụngDanh sách hình thu nhỏ và văn bản
hiệu quả cho các bài viết nổi bật của họ. Xem Hình 10-14.

Yahoo! Tin tức, Boston.com và Mashable

Video và các phương tiện khác phù hợp với mô hình này một cách tự nhiên. Như được hiển thị trong Hình
10-15, YouTube, IMDb và Kobo hiển thị hình thu nhỏ đại diện cho video, phim và sách của họ. Lưu ý các ngôi
sao xếp hạng trên danh sách YouTube và Kobo (và trên cửa hàng ứng dụng iPhone, trong Hình 10-13 ở đầu
mẫu). Những thứ này giúp người dùng quét danh sách và chọn ra các mục có nhiều sao hơn.
 các mẫu461

IMDb cũng hiển thị xếp hạng của người dùng, nhưng nó tránh các ngôi sao để ủng hộ văn bản thuần túy và nó
không thu hút sự chú ý—nó chỉ hòa hợp với phần còn lại của văn bản. Cũng lưu ý rằng màu sắc nhẹ nhàng và
trang nhã của trình đọc sách Kobo trông đẹp nhưng không giúp phân biệt các mặt hàng mạnh mẽ như màu sắc
đậm hơn được sử dụng bởi YouTube hoặc cửa hàng ứng dụng.

Ứng dụng YouTube, IMDb và Kobo

Cuối cùng, nhiều ứng dụng hiển thịDanh sách hình thu nhỏ và văn bảncác loại mục đa dạng khác: chim
(từ iBird Explorer), sản phẩm (ứng dụng Google iPhone) và các mục menu trong một kiến trúc thông
tin phức tạp (Cổng thông tin Khoa học và Khám phá Không gian của Buzz Aldrin); xem Hình 10-16.

iBird, Google và Buzz Aldrin

462Chương 10: Di động

ứng dụng Thư trên iPhone

Ở dưới cùng của một danh sách dài, hãy đặt một nút tải và nối thêm các mục khác vào danh sách.

Bạn cần hiển thị danh sách dài các email, kết quả tìm kiếm, kho lưu trữ các bài báo hoặc bài đăng trên
blog hoặc bất kỳ thứ gì khác có hiệu quả “không đáy”.

Người dùng có khả năng tìm thấy các mục mong muốn ở gần trên cùng, nhưng đôi khi họ cần tìm kiếm
thêm.

Quá trình tải ban đầu của một hoặc hai mục diễn ra nhanh chóng và người dùng không gặp khó khăn khi
chờ tải trang ban đầu rất lâu trước khi cô ấy thấy bất kỳ điều gì hữu ích.

Mỗi lần tải tiếp theo một đoạn mục mới cũng diễn ra nhanh chóng và nó nằm dưới sự kiểm soát của người dùng -
người dùng quyết định khi nào (và liệu) cô ấy có cần tải thêm mục hay không.

Vì các mục mới chỉ được thêm vào trang hiện tại, nên người dùng không bao giờ phải dịch chuyển ngữ cảnh bằng
cách chuyển đến một trang mới để xem các mục mới, giống như với kết quả tìm kiếm được phân trang.

Khi trang hoặc danh sách ban đầu được gửi đến thiết bị di động, hãy cắt ngắn danh sách ở độ dài hợp
lý. Độ dài đó sẽ thay đổi rất nhiều theo kích thước mục, thời gian tải xuống và mục tiêu của người
dùng—cô ấy có đọc mọi thứ (như với Facebook) hay chỉ quét một số lượng lớn các mục để tìm thứ cô
ấy muốn (như với kết quả tìm kiếm)?

Ở dưới cùng của trang được cuộn, đặt một nút cho phép người dùng tải và hiển thị nhiều mục
hơn. Hãy cho người dùng biết bao nhiêu nữa sẽ được tải.
 các mẫu463

Ngoài ra, bạn có thể không sử dụng nút nào cả. Sau khi người dùng đã tải và có thể xem đoạn đầu
tiên của các mục, âm thầm bắt đầu tải đoạn tiếp theo. Nối chúng vào danh sách hiển thị khi chúng sẵn
sàng và người dùng đã cuộn xuống cuối danh sách gốc. (Đây là manh mối của bạn mà người dùng có
thể muốn xem thêm. Nếu người dùng không cuộn xuống, đừng bận tâm đến việc lấy thêm mục.)

Trong công nghệ phần mềm, cách tiếp cận nổi tiếng này để quản lý danh sách có độ dài không xác định
thường được gọi làlười tải.

Một số ứng dụng iPhone sử dụngDanh sách vô hạn, bao gồm Mail (Hình 10-17), cũng như iTunes và
các ứng dụng của bên thứ ba như Facebook (Hình 10-18). Nút iTunes chỉ tải thêm 10 mục, đây có
vẻ là một con số quá nhỏ đối với một người nghe nhạc háo hức, nhưng ứng dụng Thư tải nhiều
tin nhắn mới trên màn hình; nó dường như cân bằng thời gian và số lượng tải xuống khá tốt.
Ứng dụng Facebook, giống như trang Facebook kích thước đầy đủ, tải lên một số trang cập nhật
đầu tiên và sau đó cho phép người dùng tải thêm.

Facebook và iTunes

Bạn cũng có thể làm điều này với một trang web. Gmail Buzz tải một số bản cập nhật trên màn hình
và sau đó cung cấp nút “Tải thêm”; Mashable cũng vậy (xem Hình 10-19).
464Chương 10: Di động

Buzz và Mashable

Trang web di động của Best Western

 các mẫu465

Trên các thiết bị có màn hình cảm ứng, hãy đặt lề lớn và khoảng trắng xung quanh các nút, liên kết và bất kỳ
điều khiển có thể chạm nào khác.

Bạn cần sử dụng các nút có nhãn văn bản hoặc danh sách các mục hoặc liên kết dựa trên văn bản thông thường—
nói tóm lại là bất kỳ mục tiêu cảm ứng nào chưa lớn trên màn hình.

Các mục tiêu cảm ứng phải đủ lớn để những ngón tay vụng về có thể chạm thành công. Đặc biệt,
chúng cần phải đủ cao, đây là thách thức đối với các nút và liên kết chỉ bao gồm văn bản.

Bao quanh từng mục tiêu cảm ứng với đủ lề trong, đường viền và khoảng trắng xung
quanh để tạo mục tiêu chạm đủ lớn cho các đầu ngón tay.
Một mẹo là làm cho khoảng trắng xung quanh mục tiêu có thể chạm được ngay lập tức. Nút sẽ trông
có cùng kích thước, do đó phù hợp với thiết kế hình ảnh của bạn như mong đợi, nhưng bạn có được
một vài pixel độ nhạy theo mỗi hướng xung quanh nút. Dan Saffer, trongThiết kế giao diện cử chỉ,sử
dụng thuật ngữmẹo tảng băng trôiđối với các điều khiển như thế này—chúng lớn hơn vẻ ngoài của
chúng.

Chính xác làm thế nào lớn để thực hiện các mục tiêu này là một câu hỏi rất hay. Lý tưởng nhất là bạn muốn có một
kích thước đủ lớn trên thiết bị vật lý để hầu hết mọi người có thể thao tác được—nhiều người trong số họ sẽ có
ngón tay lớn. Một số người khác sẽ không có quyền kiểm soát tuyệt vời trên đầu ngón tay của họ. Tuy nhiên,
những người khác sẽ sử dụng thiết bị di động của họ trong những điều kiện khó khăn: ánh sáng yếu, xe cộ đang di
chuyển, ít được chú ý đến phụ tùng.

Vì vậy, cuối cùng, bạn nên đặt mục tiêu của mình lớn đến mức nào? Nó phụ thuộc vào người mà bạn yêu cầu. Không có sự
đồng thuận về kích thước mục tiêu tối thiểu, nhưng các tài liệu tham khảo khác nhau đưa ra những tuyên bố sau:

• 3/4×3/4 inch, cách nhau 1/8 inch (http://www.sapdesignguild.org/resources/

TSDesignGL/Index.htm)
• 9,6 mm (http://portal.acm.org/citation.cfm?id=1152260)

• 1×1 cm vuông (Thư viện dành cho nhà phát triển C++ phiên bản thứ 5 của Nokia S60 phiên bản 5 v2.1, trong số những thư viện khác)

• 44×44 pixel trên iPhone (Nguyên tắc giao diện con người của iPhone)

Và có nhiều hơn nữa. Xem cuộc thảo luận của Luke Wroblewski tạihttp://www.lukew.com/ff/
entry. asp?1085để biết thêm thông tin.
466Chương 10: Di động

Ứng dụng IMDb dành cho iPhone đáng tin cậy đặt nhiều khoảng trống xung quanh các mục tiêu
cảm ứng của nó. Toàn bộ ứng dụng mang lại cảm giác thoải mái, không gò bó, như trong Hình
10-21.

Màn hình từ ứng dụng IMDb

Ứng dụng Epicurious cũng tương tự, mặc dù kiểu dáng trực quan của nó khá khác biệt. Các nút cho
các thao tác chính—“tìm công thức,” “xem công thức”—khá lớn và đặc biệt, như thể hiện trong Hình
10-22.

Màn hình từ ứng dụng Epicurious

 các mẫu467

Hộp URL trong Safari

Xóa một trường văn bản bằng một lần nhấn nút.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Bất cứ khi nào cần một trường văn bản trong giao diện di động, hãy cân nhắc sử dụngNút xóa văn bản.
Nó đặc biệt có giá trị đối với các trường chứa chuỗi văn bản dài, chẳng hạn như chuỗi tìm kiếm, URL
và văn bản nhiều dòng.

Việc xóa các chuỗi văn bản dài theo từng chữ cái diễn ra chậm và dễ bị lỗi. Đừng ép buộc người dùng của bạn làm
điều này.

Một số nền tảng di động không có khả năng cắt, sao chép và dán. Một thao tác cắt có thể đủ để xóa văn bản
—việc chọn tất cả nội dung của trường văn bản cũng vậy—nhưng ngay cả khi những nội dung đó tồn tại thì
việc chạm vào một mục tiêu để xóa trường sẽ dễ dàng hơn.

Đặt một nút “X” hoặc “Xóa” đơn giản vào trường văn bản. Một nút bên cạnh trường văn bản cũng có thể hoạt động, mặc
dù bạn muốn kiểm tra khả năng sử dụng nút đó để tìm hiểu xem người dùng có nhìn thấy nút đó hay không, thay vào đó,
họ có thể thấy nút đó dưới dạng nút “Đi” hoặc “Tìm kiếm”.

Nếu nền tảng cung cấp nút “Xóa” dưới dạng tính năng tích hợp sẵn cho các trường văn bản, hãy sử dụng nút đó.
Tôi đã chứng kiến người dùng vật lộn để xóa các trường văn bản khi tính năng này không được cung cấp, trên các
phiên bản đầu tiên của Android—thật khó chịu khi chứng kiến mọi người xóa từng chữ cái một trường tìm kiếm
dài. Tôi cũng đã xem mọi người sử dụng các ứng dụng iPhone không sử dụng nút xóa tiêu chuẩn của nó; những
người dùng này rất kỳ vọng rằng nút “X” sẽ xuất hiện trong trường văn bản và không hài lòng khi nút này không
được cung cấp.
468Chương 10: Di động

Không có nhiều ví dụ khác nhau về mẫu này để hiển thị khi viết bài này. Hình 10-24 cho thấy các
trang web của hai công cụ tìm kiếm lớn chèn mộtNút xóa văn bảnvào các trường tìm kiếm của họ.

Xóa các nút được sử dụng bởi Google và Bing

Ứng dụng Chứng khoán iPhone đang chờ dữ liệu biểu đồ

Trong khi một trang hoặc phần trang đang tải, hãy hiển thị chỉ báo tiến trình ở vị trí của nó (hoặc
nơi người dùng chạm hoặc nhấp vào).
 các mẫu469

Người dùng phải đợi nội dung tải, đặc biệt là trong một trang thay đổi linh hoạt để đáp ứng với
tương tác của người dùng.

Tải nội dung mới có thể chậm và không ổn định qua kết nối di động.

Bạn phải luôn hiển thị càng nhiều trang được tải một phần càng tốt để người dùng thực sự có
thể thấy điều gì đó hữu ích.

Nói chung, các chỉ báo tiến độ làm cho thời gian tải xuất hiện nhanh hơn đối với người dùng. Cô
ấy yên tâm rằng điều gì đó đang thực sự xảy ra để đáp lại một cử chỉ, đặc biệt là khi dấu hiệu đó
xuất hiện ở nơi cử chỉ đó xảy ra.

Hiển thị nhiều trang nhất có thể được tải nhanh, nhưng nếu một phần của trang mất nhiều thời gian,
chẳng hạn như hình ảnh hoặc video, hãy hiển thị chỉ báo tiến trình hoạt hình nhẹ nơi đồ họa sẽ xuất
hiện. (Nền tảng di động có thể cung cấp chỉ báo mặc định.)

Khi người dùng bắt đầu một hành động khiến một phần của trang được tải lại—hoặc tải
toàn bộ trang mới—hiển thị chỉ báo tiến trìnhtại chỗtrên trang.

Trang web di động của Flickr sử dụng các chỉ số tải rất khéo léo. Khi người dùng chạm vào một hình thu nhỏ
của ảnh để xem toàn bộ hình ảnh, hình thu nhỏ đó sẽ được bao phủ bởi một logo Flickr di chuyển cho đến
khi hình ảnh mới sẵn sàng hiển thị (xem Hình 10-26).

Chỉ báo tải động của Flickr

Khi iPhone cài đặt một ứng dụng mới, biểu tượng của ứng dụng hiển thị một thanh tiến trình thu nhỏ theo đúng
nghĩa đen để cho biết nó đã tải xuống được bao xa (xem Hình 10-27). Nó dễ thương, và ý nghĩa của nó thì không
lẫn vào đâu được.
470Chương 10: Di động

Thanh tiến trình cài đặt ứng dụng của iPhone

Ứng dụng Freedom Trail cho iPhone

Bên trong ứng dụng dành cho thiết bị di động của bạn, hãy đặt các liên kết trực tiếp đến các ứng dụng khác, chẳng hạn như trình quay số điện thoại,

bản đồ hoặc trình duyệt. “Điền trước” chúng bằng dữ liệu từ ngữ cảnh hiện tại của người dùng.
 các mẫu471

Ứng dụng dành cho thiết bị di động hiển thị dữ liệu “có thể kết nối” theo những cách rõ ràng, chẳng hạn như số điện thoại
và siêu liên kết.

Tinh tế hơn, ứng dụng của bạn có thể cung cấp các cách để chụp ảnh (thông qua camera của thiết bị), âm thanh hoặc
video. Nó thậm chí có thể nhận thức được các quy ước mạng xã hội, chẳng hạn như tên người dùng Facebook hoặc
Twitter. Trong mọi trường hợp, ứng dụng của bạn có thể hướng người dùng đến một ứng dụng khác để thực hiện các
chức năng dựa trên thiết bị này.

Người dùng chỉ có thể xem một ứng dụng dành cho thiết bị di động tại một thời điểm, ngay cả khi nhiều ứng dụng đang được sử

dụng cùng một lúc và thật khó chịu khi chuyển đổi giữa chúng bằng tay.

Các thiết bị di động thường có đủ ngữ cảnh và chức năng khả dụng để cung cấp các đường dẫn thông minh
giữa các ứng dụng.

Theo văn bản này, các thiết bị di động không có cách nào tốt để xáo trộn tùy ý một lượng nhỏ thông tin từ
ứng dụng này sang ứng dụng khác. Trên máy tính để bàn, bạn có thể nhập dễ dàng hoặc sử dụng sao chép
và dán hoặc thậm chí sử dụng hệ thống tệp. Bạn không có các tùy chọn đó trên nền tảng di động. Vì vậy,
bạn cần hỗ trợ di chuyển dữ liệu đó một cách tự động.

Trong ứng dụng của bạn, hãy theo dõi dữ liệu có thể được liên kết chặt chẽ với các ứng dụng hoặc dịch vụ
khác. Khi người dùng nhấn hoặc chọn dữ liệu đó hoặc sử dụng khả năng chi trả đặc biệt mà bạn cung cấp,
hãy mở một ứng dụng khác và xử lý dữ liệu ở đó.

Dưới đây là một số ví dụ. Xem xét tất cả các cách mà dữ liệu trong ứng dụng của bạn có thể kết nối trực tiếp với
các chức năng di động khác.

• Các số điện thoại kết nối với trình quay số.

• Địa chỉ kết nối với bản đồ hoặc với ứng dụng danh bạ.

• Ngày kết nối với lịch.

• Địa chỉ email kết nối với ứng dụng email.
• Siêu liên kết kết nối với trình duyệt.

• Nhạc và video kết nối với trình phát đa phương tiện.

Ngoài ra, bạn có thể thực hiện những việc như chụp ảnh hoặc sử dụng bản đồ, hoàn toàn trong
ngữ cảnh của ứng dụng của bạn.

Bạn có thể thực hiện một số thao tác này trên máy tính để bàn, nhưng bản chất khu vườn có tường bao
quanh của nhiều thiết bị di động giúp khởi chạy ứng dụng “đúng” cho một số loại dữ liệu nhất định dễ dàng
hơn. Bạn không cần phải quyết định sử dụng trình đọc email nào, địa chỉ hay hệ thống quản lý liên hệ nào,
v.v. Ngoài ra, nhiều thiết bị di động cung cấp trình quay số điện thoại, máy ảnh và dịch vụ vị trí địa lý.
472Chương 10: Di động

Ứng dụng Freedom Trail dành cho iPhone, được hiển thị trong Hình 10-28, minh họa rõ ràng các
liên kết của nó với các ứng dụng khác. Người dùng chọn theo dõi họ để biết thêm thông tin hay
chỉ ở trong ứng dụng; tính minh bạch này rất hữu ích và mới mẻ.

Ứng dụng Facebook dành cho iPhone kết nối với máy ảnh trên thiết bị (xem Hình 10-29). Sự tích
hợp là gần gũi; người dùng có thể chụp ảnh và đăng ngay lên Facebook mà dường như không
bao giờ rời khỏi ứng dụng Facebook. Facebook cũng có thể tiếp cận những bức ảnh có sẵn trên
iPhone.

Tích hợp Facebook với máy ảnh

Ứng dụng bản đồ của iPhone (Hình 10-30) kết nối với ứng dụng danh bạ để thêm địa chỉ của một người vào
thông tin liên hệ của họ, cũng như gửi email và MMS để chia sẻ vị trí. (Tất nhiên, nhiều ứng dụng khác, cả
ứng dụng di động và các ứng dụng khác, cũng có các tính năng “Gửi email này” hoặc “Chia sẻ ứng dụng
này”. Xem phầnứng dụng chia sẻví dụ như mẫu trong Chương 9.)
 các mẫu473

Ứng dụng bản đồ iPhone kết nối với danh bạ, thư và MMS

Trang web dành cho thiết bị di động của Walmart so với trang web đầy đủ của nó
474Chương 10: Di động

Sử dụng biểu trưng, màu sắc và các thành phần thương hiệu khác của tổ chức bạn trên trang web hoặc ứng dụng dành cho thiết bị di động

nhưng giữ cho chúng ở kích thước nhỏ trên màn hình và tải nhanh.

Tất cả các ứng dụng hoặc trang web dành cho thiết bị di động được liên kết với một công ty hoặc tổ chức nên sử dụng điều này.

Người dùng cần có khả năng xác định ứng dụng hoặc trang web của bạn là của bạn. Trong thử nghiệm khả năng
sử dụng, mọi người phản ứng tốt với thương hiệu quen thuộc, đáng tin cậy, đặc biệt khi thương hiệu đã được biết
đến bên ngoài bối cảnh di động.

Màn hình di động không có nhiều không gian dành cho các thành phần không phải là nội dung thực tế.

Kết nối mạng di động có thể chậm và hình ảnh nặng tải xuống không đủ nhanh.

Tạo một phiên bản nhỏ của logo của bạn, không cao hơn khoảng 50 pixel để nó chiếm ít không gian
theo chiều dọc nhất có thể. Nếu bạn đang tạo các thiết kế khác nhau cho các kích thước màn hình
hoặc nền tảng khác nhau, hãy cân nhắc tạo các phiên bản logo khác nhau cho từng loại.

Áp dụng màu sắc và họ phông chữ thương hiệu của bạn trong thiết kế di động. Một giao diện văn bản cơ bản có
thể hoạt động đủ tốt, nhưng trông sẽ không chuyên nghiệp hoặc bóng bẩy.

Tránh sử dụng hình ảnh quá lớn và phức tạp làm yếu tố phong cách. Thời gian tải xuống cũng quan trọng
trong bối cảnh di động cũng như trên máy tính để bàn (và thường là hơn thế). Nếu bạn đang làm việc trong
HTML, hãy phụ thuộc vào biểu định kiểu khi có thể, thay vì hình ảnh thủ công.

Độ tương phản mạnh và văn bản lớn, dễ đọc sẽ giúp mọi người sử dụng trang web dành cho thiết bị di động của bạn khi
điều kiện kém (ánh sáng chói, chuyển động, mất tập trung). Ngay cả khi thương hiệu của bạn yêu cầu sự tinh tế về hình
ảnh và văn bản nhỏ, trang nhã, hãy làm những gì cần làm vì lợi ích của khả năng sử dụng—điều chỉnh giao diện thương
hiệu cho phù hợp với nền tảng.

Có rất nhiều ví dụ điển hình về mẫu này trên web di động. Quay trở lại ví dụ đầu tiên được đưa ra
trong chương này, JetBlue cắt giảm thương hiệu của mình thành một giao diện bóng bẩy và dễ nhận
biết, nhưng hoạt động tốt ngay cả trên một thiết bị di động nhỏ (xem Hình 10-32).
 các mẫu475

Thương hiệu di động của JetBlue

Trang di động của Fandango cũng có cách tiếp cận tối giản (xem Hình 10-33). Giống như JetBlue,
Fandango sử dụng logo và phong cách bóng bẩy, nhưng trang web tải nhanh và có thể được sử dụng
trên màn hình nhỏ. Không có hình ảnh, quảng cáo hoặc video ngốn băng thông nào được tải lên thiết
bị di động.

Thương hiệu di động của Fandango

476Chương 10: Di động

Whole Foods duy trì giao diện thương hiệu rất nhất quán trên các trang web toàn trang và trên thiết bị di động. Nhưng
trang web dành cho thiết bị di động của nó tiêu tốn nhiều không gian trong màn hình đầu tiên hơn mức cần thiết với điều
hướng trên cùng và nó tải xuống một số hình ảnh lớn, khiến nó chậm hơn mức có thể (xem Hình 10-34).

Thương hiệu di động của Whole Foods

Trang web di động của Chipotle cho biết cáchkhôngđể xây dựng thương hiệu di động (xem Hình 10-35). Thương hiệu đủ
mạnh trên trang web chính, nhưng không có thương hiệu nào xuất hiện trên trang web dành cho thiết bị di động ngoại
trừ một phiên bản logo quá nhỏ! Trang web chỉ sử dụng phông chữ và màu sắc trung tính. (Công bằng mà nói, trang web
cung cấp ứng dụng iPhone có thương hiệu mạnh hơn, nhưng không có khả năng một khách hàng không thường xuyên sẽ
bận tâm đến rắc rối khi tải xuống ứng dụng đó nếu trang web đáp ứng nhu cầu của họ.)

Thương hiệu di động của Chipotle (hoặc thiếu nó)

Năm 2002, một nhóm nghiên cứu đã phát hiện ra một điều thú vị. Dự án uy tín web Stanford*bắt đầu tìm
hiểu điều gì khiến mọi người tin tưởng hoặc không tin tưởng vào các trang web và phần lớn những gì họ
tìm thấy đều có ý nghĩa trực quan: danh tiếng công ty, dịch vụ khách hàng, tài trợ và quảng cáo, tất cả đều
giúp người dùng quyết định xem một trang web có đáng tin cậy hay không.

Nhưng yếu tố quan trọng nhất - số một trong danh sách của họ - là hình thức của trang web. Người
dùng không tin tưởng các trang web có vẻ nghiệp dư. Các trang web đã nỗ lực tạo ra giao diện đẹp
mắt, được thiết kế chuyên nghiệp đã thu hút người dùng nhiều hơn, ngay cả khi những người dùng
đó có ít lý do khác để tin tưởng trang web.

Đây là một điểm dữ liệu khác. Donald Norman, một trong những bậc thầy nổi tiếng nhất về thiết kế tương tác, đã
kết luận rằng “tác động tích cực giúp tăng cường khả năng sáng tạo, tư duy theo chiều rộng trong khi tác động
tiêu cực tập trung vào nhận thức, tăng cường khả năng xử lý theo chiều sâu và giảm thiểu sự phân tâm.” Anh ấy
nói thêm: “Tác động tích cực khiến mọi người trở nên khoan dung hơn với những khó khăn nhỏ và linh hoạt, sáng
tạo hơn trong việc tìm ra giải pháp.”†Các giao diện thực sự trở nên hữu ích hơn khi mọi người thích sử dụng chúng.

Tìm kiếm vấn đề tốt.

Trong nhiều chương bây giờ, chúng ta đã nói về cấu trúc, hình thức và hành vi của một ứng dụng; bây giờ
chúng ta sẽ tập trung nhiều hơn vào “lớp da” hoặc “giao diện” của nó. Chương 4 thảo luận về một số khái
niệm cơ bản về thiết kế đồ họa. Chương đó đề cập đến hệ thống phân cấp thị giác, luồng thị giác, tiêu điểm
và các nguyên tắc Gestalt củasự gần gũi, sự tương đồng, sự liên tục,VàKhép kín.Những chủ đề này tạo
thành nền tảng của tổ chức trang và không nên thay đổi.

* Nhìn thấyhttp://credibility.stanford.edu.

† Xem Donald Norman, “Cảm xúc và Thiết kế: Những thứ Hấp dẫn Hoạt động Tốt hơn,” tạihttp://jnd.org/dn.mss/emo-
tion_design_attract_things_work_better.html.Xem thêm cuốn sách của anh ấy về chủ đề này,Thiết kế cảm xúc: Tại sao chúng ta yêu
(hoặc ghét) mọi thứ hàng ngày (Sách cơ bản).
478Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Nhưng có nhiều thứ cho một ngôi nhà đẹp hơn là cách bố trí phòng của nó. Khi bạn trả tiền cho một ngôi nhà mới
được thiết kế đẹp mắt, bạn cũng mong đợi những tấm thảm đẹp, màu sơn, kết cấu tường và các phương pháp xử
lý bề mặt khác. Nếu không có chúng, một ngôi nhà có thể hoạt động hoàn hảo nhưng không hấp dẫn. Hoàn thành
công việc có nghĩa là chú ý đến chi tiết, phù hợp và hoàn thành.

Các chi tiết đẹp mắt không nhất thiết ảnh hưởng đến hiệu quả mà mọi người hoàn thành các nhiệm vụ trong ngôi
nhà hoặc giao diện (mặc dù nghiên cứu chỉ ra rằng đôi khi điều đó xảy ra). Nhưng chắc chắn chúng có ảnh hưởng
đến việc mọi người có thích thú hay không. Đổi lại, điều đó ảnh hưởng đến các hành vi khác—chẳng hạn như thời
gian người dùng nán lại và khám phá, liệu họ có chọn quay lại đó hay không và liệu họ có giới thiệu nó cho người
khác hay không.

Bạn thậm chí có thể nghĩ về nó như một vấn đề đạo đức. Bạn muốn người dùng của mình có trải nghiệm gì?
Bạn có muốn cung cấp cho họ một ứng dụng toàn màu xám khiến họ cảm thấy nhàm chán hay một ứng
dụng chứa đầy quảng cáo hào nhoáng khiến họ khó chịu không? Bạn có muốn đưa cho họ thứ gì đó mà họ
thích xem, có thể hàng giờ liền không?

Tất nhiên, không chỉ phong cách hình ảnh ảnh hưởng đến phản ứng cảm xúc của người dùng (ảnh hưởng).
Chương 1 bắt đầu thảo luận về những cân nhắc khác, chẳng hạn như mức độ bạn dự đoán thói quen sử
dụng của người dùng. Phần mềm có thể làm mọi người ngạc nhiên với thiết kế chu đáo. Bố cục được đóng
gói chặt chẽ gợi lên một phản ứng tình cảm khác với bố cục mở, thưa thớt. Ngôn ngữ và giọng điệu đóng
một vai trò quan trọng trong phản hồi này, cũng như chất lượng của chính phần mềm—nó có “hoạt động
bình thường” không và nó có nhanh và nhạy không?

Một giao diện được thiết kế tốt sẽ tính đến tất cả các yếu tố này. Khi nội dung, ý nghĩa và hành vi
tương tác đều phù hợp với phong cách hình ảnh của bạn, bạn có thể gợi lên một phản ứng cảm
xúc đã chọn rất hiệu quả.

Với các sản phẩm và trang web, các yếu tố phong cách thường được thiết kế để hỗ trợxây dựng thương
hiệu. Thiết kế của bất kỳ sản phẩm phần mềm hoặc trang web nào thể hiện điều gì đó về tổ chức đã tạo ra
nó (ngay cả khi đó là một nhóm các nhà phát triển nguồn mở gắn bó lỏng lẻo). Nó có thể nói điều gì đó
trung lập hoặc nó có thể gửi một thông điệp tập trung: “Bạn có thể tin tưởng chúng tôi”, “Chúng tôi rất
tuyệt”, “Chúng tôi xây dựng những điều thú vị”. Bản sắc thương hiệu không chỉ bao gồm logo và dòng thẻ.
Nó chạy xuyên suốt các thiết kế sản phẩm, trang web và tài liệu quảng cáo của tổ chức—trên thực tế, cách
phối màu, phông chữ, biểu tượng và từ vựng được chọn của thương hiệu xuất hiện ở mọi nơi. Khi được lên
kế hoạch tốt, một bản sắc thương hiệu hoàn chỉnh sẽ mạch lạc và có chủ ý.
 Nội dung giống nhau, phong cách khác nhau479

Bản sắc thương hiệu rất quan trọng vì nó thiết lập sự quen thuộc và đặt kỳ vọng cho trải nghiệm của
ai đó với các sản phẩm của một tổ chức. Cuối cùng, một thương hiệu tốt sẽ khiến mọi người cảm thấy
tốt hơn khi sử dụng những sản phẩm đó. Hãy xem Apple đã làm gì với lòng trung thành với thương
hiệu: nhiều người yêu thích các sản phẩm của Apple và tìm kiếm chúng.

Trong mọi trường hợp, cho dù chúng có nhằm mục đích hỗ trợ một thương hiệu hay không, các yếu
tố phong cách sẽ đưa ra tuyên bố về sản phẩm của bạn. Họ giao tiếp các thuộc tính như độ tin cậy, sự
phấn khích, vui tươi, năng lượng, sự bình tĩnh, sức mạnh, căng thẳng và niềm vui. Bạn muốn giao tiếp
điều gì?

Chương này thảo luận về các khái niệm thiết kế trực quan hơn, lần này tập trung ít hơn vào cấu trúc hình thức và
tập trung nhiều hơn vào các thuộc tính dựa trên cảm xúc này. Chương này sẽ không giúp bạn trở thành một nghệ
sĩ—điều đó đòi hỏi sự thực hành và nghiên cứu nghiêm túc. Nhưng các mẫu nắm bắt một số kỹ thuật thường thấy
trên các đồ tạo tác được thiết kế tốt và giải thích lý do tại sao chúng hoạt động.
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Để khám phá cách các phong cách gợi lên các phản ứng nội tạng và cảm xúc khác nhau, chúng ta có thể thử áp
dụng các phong cách hình ảnh khác nhau cho nội dung giống hệt nhau. Nội dung thực tế thậm chí không quan
trọng đến thế—chúng tôi đang tìm kiếm những phản ứng tức thì, hợp lý ở đây, chứ không phải những ấn tượng
thu được từ việc đọc và tương tác với nội dung.

Trang web CSS Zen Garden (http://csszengarden.com)cung cấp cho chúng tôi chính xác tình huống đó.
Được phát minh để giới thiệu thiết kế web dựa trên CSS, trang web này cung cấp một trang HTML duy nhất
cho tất cả những người tham gia—mọi người đều nhận được cùng một nội dung, các thẻ HTML giống nhau
và cùng một danh sách các liên kết. Sau đó, những người tham gia tạo các tệp CSS duy nhất để xác định các
thiết kế trực quan mới cho trang và đóng góp chúng cho trang web. Khách truy cập có thể duyệt qua tất cả
các thiết kế CSS đã đóng góp. Đó là một cách thú vị để dành một hoặc ba giờ, đặc biệt nếu bạn đang tự học
về thiết kế trực quan và cố gắng hiểu những gì bạn thích và không thích.

Hình 11-1 đến 11-8 trình bày một ví dụ về các thiết kế này. Trong mỗi trường hợp, nội dung cơ bản là
như nhau; chỉ có thiết kế đã thay đổi. Hãy dành một chút thời gian để kiểm tra từng người. Khi bạn
nhìn vào từng thiết kế, phản ứng trực tiếp, tức thì của bạn là gì? Những từ nào đến với tâm trí mô tả
trang? Nó có thu hút bạn, đẩy lùi bạn, khiến bạn lo lắng hay làm bạn thích thú không?
480Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

thiết kế 1
 Nội dung giống nhau, phong cách khác nhau481

thiết kế 2
482Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

thiết kế 3
 Nội dung giống nhau, phong cách khác nhau483

thiết kế 4
484Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

thiết kế 5
 Nội dung giống nhau, phong cách khác nhau485

thiết kế 6
486Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

thiết kế 7
 Nội dung giống nhau, phong cách khác nhau487

thiết kế 8
488Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Khi bạn xem các ví dụ về Zen Garden, bạn có thể đã quan sát cách chúng đạt được những ấn
tượng khác nhau như vậy—bảng màu của một trang có thể khiến bạn cười hoặc co rúm lại
chẳng hạn. Sử dụng những ví dụ này như một tiêu chuẩn, chúng ta có thể nói về một số nguyên
tắc của thiết kế trực quan tốt.

Bạn có thể nhớ lại rằng chúng ta đã đề cập đến một số nguyên tắc thiết kế hình ảnh trong Chương 4 và 7.
Các chương này khám phá cách hệ thống thị giác của con người phản ứngnhận thứcvào một số đầu vào
nhất định. Chẳng hạn, thời gian để ai đó nhấp vào một hình vuông màu cam trong một trường các hình
vuông màu xanh lam, không phụ thuộc vào ý thức thẩm mỹ hoặc kỳ vọng về văn hóa của người dùng.

Nhưng bây giờ chúng ta đang nói vềtình cảm và nội tạngphản ứng—liệu một hình vuông màu cam có tạo
thêm sức căng cho thiết kế, độ sáng, sự cân bằng hay không gì cả? Câu trả lời phụ thuộc vào rất nhiều yếu
tố nên thực sự rất khó để có được câu trả lời “đúng” nếu không thực hành nhiều. Các khía cạnh nhận thức
của những lựa chọn thiết kế này chắc chắn đóng một phần; Đối với những người mới bắt đầu, bạn có thể
làm cho một trang trở nên khó đọc hoặc dễ đọc (một hiệu ứng nhận thức). Nhưng mỗi người là duy nhất.
Mỗi người có một lịch sử kinh nghiệm, hiệp hội và sở thích khác nhau; và mỗi người là một phần của nền
văn hóa áp đặt ý nghĩa riêng của nó về màu sắc, kiểu chữ và hình ảnh.

Hơn nữa, bối cảnh của thiết kế ảnh hưởng đến phản ứng của người dùng. Người dùng xem thiết kế của bạn là một
phần của thể loại (chẳng hạn như ứng dụng văn phòng, trò chơi hoặc trang web thương mại điện tử) và họ sẽ có
những kỳ vọng nhất định về những gì phù hợp, sáo mòn hoặc nguyên bản, buồn tẻ hoặc thú vị. Xây dựng thương
hiệu cũng đặt ra kỳ vọng. Vì vậy, đây là vấn đề: ngay khi bạn học một “quy tắc” để gợi lên phản ứng cảm xúc bằng
cách sử dụng nguyên tắc thiết kế, bạn có thể tìm thấy hàng triệu trường hợp ngoại lệ.

Điều đó đang được nói, nếu bạn biết rõ khán giả của mình, các phản ứng nội tạng và cảm xúc có thể
dự đoán được một cách đáng ngạc nhiên. Ví dụ, hầu hết độc giả của cuốn sách này có thể nghĩ rằng ví
dụ CSS đầu tiên là một thiết kế êm dịu, nhẹ nhàng, nhưng ví dụ thứ hai thì ồn ào và căng thẳng hơn.
Tại sao vậy?

Câu trả lời nằm ở sự kết hợp của nhiều yếu tố phối hợp với nhau: màu sắc, kiểu chữ, độ
rộng, góc độ và hình dạng, họa tiết trực quan lặp lại, kết cấu, hình ảnh và tham chiếu văn
hóa.

Màu sắc là ngay lập tức. Đó là một trong những điều đầu tiên bạn cảm nhận được về một thiết kế, cùng với các
dạng và hình dạng cơ bản. Tuy nhiên, việc áp dụng màu sắc vào nghệ thuật và thiết kế là vô cùng tinh tế mà các
họa sĩ bậc thầy đã nghiên cứu nó trong nhiều thế kỷ. Chúng ta chỉ có thể làm trầy xước bề mặt ở đây.

Khi nghĩ ra bảng màu cho giao diện, trước tiên hãy loại trừ bất kỳ thứ gì khiến văn
bản khó đọc:
• Luôn đặt nền trước tối trên nền sáng và ngược lại—để kiểm tra, hãy đưa thiết kế vào một công cụ
hình ảnh chẳng hạn như Photoshop và khử bão hòa (làm cho nó có thang độ xám).
 Khái niệm cơ bản về thiết kế trực quan489

• Đừng bao giờ sử dụng màu đỏ so với màu xanh lá cây làm điểm phân biệt màu quan trọng, vì
nhiều người mù màu sẽ không thể thấy sự khác biệt. Theo thống kê, 10% nam giới mắc một số
dạng mù màu, khoảng 1% nữ giới cũng vậy.

• Không bao giờ đặt chữ nhỏ, xanh dương sáng trên nền đỏ tươi hoặc cam hoặc ngược lại,
vì mắt người rất nhanh bị mỏi khi đọc văn bản được viết bằng các màu bổ sung (các
màu ở các phía đối diện của bánh xe màu).

Ngoài ra, đây là một số quy tắc rất gần đúng cho việc sử dụng màu sắc:
Ấm so với mát
Đỏ, cam, vàng, nâu và be được coi là những màu “ấm”. Xanh dương, xanh lục, tím, xám (với số
lượng lớn) và trắng được coi là “mát mẻ”. CSS Zen Garden màu vàng trong Thiết kế 6 (Hình 11-6)
tạo cảm giác “nóng” một cách sống động, mặc dù bề mặt kim loại màu xám lạnh được sử dụng
phía sau nội dung. Các trang web và giao diện cần thể hiện sự tôn trọng và bảo thủ thường sử
dụng các màu chủ yếu là màu lạnh (đặc biệt là màu xanh lam). Tuy nhiên, các màu ấm và lạnh có
thể kết hợp rất hiệu quả để đạt được một cái nhìn cân bằng—và chúng thường làm như vậy,
trong các bức tranh và thiết kế áp phích cổ điển.

Nền tối so với nền sáng

Các trang có nền sáng—trắng, be và xám nhạt—cảm thấy rất khác so với những trang có
nền rất tối. Ánh sáng là điển hình hơn của giao diện máy tính (và các trang in); các trang tối
có thể cảm thấy sắc nét hơn, ảm đạm hơn hoặc tràn đầy năng lượng hơn, tùy thuộc vào các
khía cạnh thiết kế khác.

Độ tương phản cao so với thấp

Cho dù nền tối hay sáng, các thành phần trên nền đó có thể có độ tương phản cao hoặc
thấp so với nền đó. Độ tương phản mạnh gợi lên sự căng thẳng, sức mạnh và sự táo bạo;
độ tương phản thấp sẽ nhẹ nhàng và thư giãn hơn.

Bão hòa so với không bão hòa

Màu sắc có độ bão hòa cao hoặc thuần khiết—chẳng hạn như màu vàng, đỏ và xanh lá cây rực rỡ gợi lên
năng lượng, sự sống động, độ sáng và sự ấm áp. Họ táo bạo; họ có tính cách. Nhưng khi sử dụng quá mức,
chúng có thể làm mỏi mắt, vì vậy hầu hết các thiết kế giao diện người dùng đều sử dụng chúng một cách tiết
kiệm; họ thường chỉ chọn một hoặc hai. Màu bị tắt, tối hoặc sáng (âmhoặc sắc thái,tương ứng), chiếm phần
lớn trong hầu hết các bảng màu. Thiết kế Zen Garden xanh lục và xanh lam loại bỏ hai màu bão hòa bằng
cách sử dụng các đường viền màu trắng, văn bản màu trắng và các quầng sáng tối để phân tách màu xanh
lục và xanh lam. (Mặc dù vậy, có lẽ bạn sẽ không muốn nhìn chằm chằm vào màu xanh lục đó cả ngày trong
một ứng dụng dành cho máy tính để bàn.)

Sự kết hợp của sắc thái

Khi bạn bắt đầu kết hợp màu sắc, các hiệu ứng thú vị sẽ xảy ra. Hai màu bão hòa có thể gợi lên
nhiều năng lượng, chuyển động hoặc phong phú hơn so với một mình. Một trang kết hợp một
màu bão hòa với một tập hợp các màu bị tắt sẽ hướng sự chú ý đến màu bão hòa và thiết lập các
“lớp” màu—các lớp sáng hơn và mạnh hơn xuất hiện gần người xem hơn, trong khi các màu xám
hơn và nhạt hơn lùi lại. Kích thước mạnh mẽ có thể làm cho một thiết kế ấn tượng. Các thiết kế
phẳng hơn, với nhiều màu sắc nhạt hơn hoặc nhạt hơn, sẽ dịu hơn. xemÍt sắc thái, nhiều giá trịmô
hình để thảo luận thêm.
490Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Bằng cách chọn một phông chữ (được gọi đúng làkiểu chữ)đối với một đoạn văn bản, bạn quyết định văn
bản đó được “nói” bằng giọng điệu nào. Giọng nói đó có thể to hay nhỏ, thân thiện hay trang trọng, thông
tục hay uy quyền, sành điệu hay lỗi thời.

Đối với màu sắc, khả năng đọc—phần nhận thức—được đặt lên hàng đầu khi chọn loại. Văn bản nhỏ—hay còn gọi
là “văn bản nội dung” trong bản in và trên các trang web—đòi hỏi sự lựa chọn cẩn thận. Những cân nhắc sau đây
đối với văn bản nội dung cũng áp dụng cho “phông chữ nhãn” trong GUI, được sử dụng để chú thích các trường
văn bản và các điều khiển khác:

• Trên màn hình máy tính, phông chữ sans-serif thường hoạt động tốt hơn ở kích thước điểm rất nhỏ, không
giống như bản in, trong đó phông chữ có chân có xu hướng dễ đọc hơn dưới dạng văn bản nội dung. Pixel
không đủ lớn để hiển thị tốt các serif nhỏ. (Tuy nhiên, một số phông chữ có chân, chẳng hạn như Georgia,
trông vẫn ổn.)

• Tránh các phông chữ in nghiêng, chữ thảo hoặc trang trí khác; chúng không thể đọc được ở kích thước
nhỏ.

• Phông chữ có tính hình học cao có xu hướng khó đọc ở kích thước điểm nhỏ, vì các chữ cái
hình tròn (e, c, d, o,v.v.) rất khó phân biệt. Futura, Univers và một số phông chữ giữa thế kỷ
20 khác giống như thế này.

• Viết hoa toàn bộ quá khó đọc đối với văn bản nội dung, mặc dù nó hoạt động tốt đối với tiêu đề và
văn bản ngắn. Chữ in hoa có xu hướng trông giống nhau và người đọc khó phân biệt.

• Đặt số lượng lớn văn bản trong một cột có chiều rộng trung bình khi có thể—giả sử trung bình
khoảng 10 đến 12 từ tiếng Anh. Không căn phải các cột văn bản hẹp hơn; hãy để nó là "đúng
rách rưới."

Bây giờ cho các khía cạnh nội tạng và cảm xúc. Các phông chữ có giọng điệu đặc biệt—chúng có các
đặc điểm đồ họa, kết cấu và màu sắc khác nhau trên trang. Ví dụ: một số phông chữ đậm và tối, trong
khi những phông chữ khác thoáng hơn—hãy xem độ dày của các nét và kích thước tương đối của các
nét chữ để tìm manh mối và sử dụng "kiểm tra nheo mắt" nếu bạn cần một cái nhìn khách quan và
mới mẻ về phông chữ . Một số phông chữ có các chữ cái hẹp hơn các phông chữ khác và một số họ
phông chữ có các phiên bản "cô đọng" để làm cho chúng thậm chí còn hẹp hơn. Khoảng cách giữa các
dòng văn bản (phần đầu) có thể xa hoặc gần, làm cho khối văn bản trông thoáng hơn hoặc chắc chắn
hơn.

Serifs và đường cong thêm một kích thước khác cho màu sắc và kết cấu của phông chữ. Serif bổ sung một
mức tỷ lệ nhỏ hơn nhiều so với bản thân dạng chữ và điều đó bổ sung thêm sự tinh tế cho kết cấu của
phông chữ—các phông chữ sans-serif dày trông có vẻ cùn, mạnh hoặc thậm chí thô khi so sánh (đặc biệt là
Helvetica). Các đường cong và góc được sử dụng trong mỗi dạng chữ, bao gồm cả những đường tạo thành
serifs, kết hợp để tạo thành một kết cấu tổng thể. So sánh một kiểu chữ cổ điển như Goudy Old Style với
một phông chữ có chân cổ điển khác như Didot; chúng trông rất khác nhau trên trang. Xem Hình 11-9.
 Khái niệm cơ bản về thiết kế trực quan491

Tám phông chữ, như được hiển thị trên Mac OS X; nhận thấy các kích cỡ, mật độ, kết cấu và
thủ tục

Mặc dù không phải lúc nào cũng dễ dàng giải thích tại sao, một số phông chữ nói với giọng trang trọng,
trong khi những phông chữ khác nói với giọng bình thường. Comic Sans và các phông chữ vui tươi khác
chắc chắn là trang trọng, nhưng Georgia cũng vậy, khi so sánh với Didot hoặc Baskerville. Các từ viết hoa và
viết hoa nói trang trọng hơn chữ thường; in nghiêng nói một cách không chính thức. Trong các thiết kế CSS
Zen Garden được hiển thị trước đó, Thiết kế 8 (Hình 11-8) sử dụng phông chữ sans-serif viết hoa toàn bộ để
nói bằng một giọng điệu nhẹ nhàng và cởi mở. Trong khi đó, Thiết kế 5 (Hình 11-5), sử dụng tiếng Georgia,
nói với giọng ấm áp và thân mật.
492Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Các khía cạnh văn hóa cũng phát huy tác dụng ở đây. Các phông chữ kiểu cũ, thường có chân, có xu hướng trông
—chờ đã—lỗi thời, mặc dù bất kỳ thứ gì được đặt trong Futura (một phông chữ sans-serif) vẫn trông giống như nó
đến từ sách giáo khoa khoa học năm 1963. Verdana đã được sử dụng rất nhiều trên Web đến nỗi giờ đây nó trở
thành tiêu chuẩn cho phương tiện đó. Và Chicago sẽ luôn là phông chữ gốc của Mac, bất kể nó được sử dụng
trong ngữ cảnh nào.

Một số thiết kế CSS Zen Garden sử dụng nhiều khoảng trắng, trong khi những thiết kế khác tập hợp các
thành phần trang lại với nhau. Sự rộng rãi trên một trang mang lại ấn tượng về sự thoáng đãng, cởi mở, yên
tĩnh, tĩnh lặng, tự do hay trang nghiêm và trang nghiêm, tùy thuộc vào các yếu tố thiết kế khác.

Thiết kế đông đúc có thể gợi lên sự cấp bách hoặc căng thẳng trong một số trường hợp. Tại sao? Bởi
vì văn bản và các thành phần đồ họa khác cần được “thở”—khi chúng va chạm vào nhau hoặc vào các
cạnh hoặc đường viền của trang, chúng sẽ gây căng thẳng cho thị giác. Đôi mắt của chúng tôi muốn
nhìn thấy lợi nhuận xung quanh mọi thứ. Chúng tôi hơi bối rối với các thiết kế chẳng hạn như CSS Zen
Garden Design 2 (Hình 11-2), thiết kế này đặt các tiêu đề ngay trên văn bản. Tương tự như vậy, bố cục
nhỏ gọn của Thiết kế 6 (Hình 11-6) bằng cách nào đó góp phần tạo nên cảm giác bận rộn, công
nghiệp của trang, mặc dù nó không có xung đột như Thiết kế 2.

Tuy nhiên, không phải tất cả các thiết kế đông đúc đều gợi lên sự căng thẳng đó. Một số bao hàm sự thân
thiện và thoải mái. Nếu bạn cung cấp đủ không gian cho văn bản và các thành phần khác và giảm khoảng
cách giữa các dòng (dẫn đầu) đến mức nhỏ nhất có thể đọc được một cách thoải mái, bạn có thể đạt được
giao diện thân thiện hơn và ít lạ mắt hơn. Thiết kế 5 (Hình 11-5) minh họa rõ điều này.

Một trang bao gồm các đường thẳng lên xuống và các góc vuông nhìn chung trông nhẹ nhàng và tĩnh lặng
hơn một trang chứa các đường chéo và hình dạng không phải hình chữ nhật. Tương tự như vậy, một trang
có nhiều góc khác nhau có nhiều chuyển động rõ ràng hơn một trang có một góc lặp lại duy nhất trên đó;
xem Thiết kế 7 (Hình 11-7) để biết một ví dụ ấn tượng. Thiết kế 6 sử dụng các góc để tạo cảm giác khó chịu
và hứng thú cho thị giác.

Các đường cong cũng có thể thêm chuyển động và sự sống động, nhưng không phải lúc nào cũng vậy. Một thiết
kế được làm bằng nhiều vòng tròn và cung tròn có thể làm dịu và yên tĩnh. Nhưng một đường cong lướt qua một
trang sẽ khiến toàn bộ thiết kế chuyển động và một vài đường cong được lựa chọn cẩn thận trong một thiết kế
hình chữ nhật khác sẽ tạo thêm sự tinh tế và thú vị. Thiết kế 8 (Hình 11-8) sử dụng một đường cong hình elip lớn
duy nhất để tạo hiệu ứng ấn tượng—nó tương phản mạnh với thiết kế thẳng đứng khác, vì vậy tác động của nó rất
cao.
 Khái niệm cơ bản về thiết kế trực quan493

Bất cứ nơi nào hai đường cong cắt nhau, hãy chú ý xem các tiếp tuyến hình học với những đường cong đó đang
làm gì. Các tiếp tuyến có vuông góc không? Điều đó dẫn đến một bố cục bình tĩnh hơn, tĩnh lặng hơn; nếu chúng
giao nhau ở một góc nhọn hơn, thiết kế có nhiều lực căng hơn và chuyển động rõ ràng hơn. (Một lần nữa, đây
không phải là những quy tắc khó và nhanh, nhưng chúng thường đúng.)

Khi sử dụng các góc, đường cong và hình dạng không phải hình chữ nhật, hãy nghĩ đến vị trí của các tiêu
điểm: tại các góc nhọn, nơi các đường giao nhau và nơi nhiều đường hội tụ chẳng hạn. Sử dụng các tiêu
điểm này để thu hút ánh nhìn của người xem đến nơi bạn muốn.

Kết cấu thêm sự phong phú cho một thiết kế trực quan. Như được mô tả trong phần “Kiểu chữ”, văn
bản tạo thành kết cấu riêng,*và bạn có thể kiểm soát giao diện của kết cấu đó bằng cách chọn phông
chữ tốt. Đối với nhiều trang và giao diện, phông chữ là yếu tố kết cấu quan trọng nhất.

Nhưng các loại kết cấu khác cũng đáng được chú ý. Các vùng trống, chẳng hạn như các dải không
gian trống dọc theo các cạnh của trang web, có thể trông đẹp hơn nhiều khi được lấp đầy bằng họa
tiết. Bạn cũng có thể sử dụng họa tiết để bao quanh các yếu tố thị giác mạnh mẽ và làm nổi bật
chúng, như đã thực hiện trong Thiết kế 6 và 7. Họa tiết tạo thêm sự thú vị về mặt thị giác và tùy thuộc
vào hình thức của chúng, chúng có thể thêm sự ấm áp, phong phú, phấn khích hoặc căng thẳng. Hoạ
tiết hiệu quả nhất trong thiết kế giao diện là những bàn cờ tinh tế, không sống động với màu sắc gây
nhức mắt. Họ sử dụng sự chuyển màu nhẹ nhàng và các chi tiết rất nhỏ. Khi trải rộng trên các khu vực
rộng lớn, tác động của chúng lớn hơn bạn nghĩ. Hình 11-10 cho thấy một số kết cấu lề trong thiết kế
CSS. Các chấm đơn pixel, các đường song song và lưới được vẽ tinh xảo là các kết cấu hình học đẹp
mắt; chúng dễ tạo và hiển thị, và họ thêm tinh tế cho một thiết kế. xem
đường chân tócmẫu.

Hãy cẩn thận khi sử dụng kết cấu đằng sau các từ trên màn hình máy tính—nó hiếm khi hoạt động. Tất cả ngoại
trừ các kết cấu nhỏ nhất đều cản trở khả năng đọc của văn bản nhỏ. Bạn có thể đặt chúng phía sau văn bản lớn,
nhưng hãy quan sát cách các cạnh của dạng chữ tương tác với các màu khác nhau trong kết cấu, vì điều đó có thể
làm biến dạng các chữ cái một cách trực quan. Hãy thử làm mờ một kết cấu thành một màu đồng nhất khi nó tiếp
cận một khối văn bản.

* Trên một ghi chú từ nguyên thú vị, các từ tiếng Anhvăn bản, kết cấu,Vàdệt maytất cả đều bắt nguồn từ cùng một gốc Latinh,xe
ôm,có nghĩa là "dệt." Đó không phải là gợi lên sao?
494Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Chi tiết về kết cấu trong bốn thiết kế CSS

Mỗi thiết kế CSS Zen Garden được sao chép ở đây đều sử dụng hình ảnh. Một số hình ảnh là hình ảnh;
những người khác là hình ảnh bán trừu tượng mang tính biểu tượng. Trong mọi trường hợp, hình ảnh tồn
tại hoàn toàn để thiết lập tâm trạng của thiết kế. Những thiết kế cụ thể này có thể đi xa đến mức cần thiết
để thiết lập tâm trạng đó, vì trong CSS Zen Garden, thiết kế quan trọng hơn nội dung.

Tình hình của bạn có lẽ là khác nhau. Trong hầu hết các trang web và ứng dụng, nội dung và tính dễ sử
dụng quan trọng hơn kiểu dáng. Bạn nên sử dụng các hình ảnh trang trí đơn thuần một cách tiết kiệm và
hết sức cẩn thận trên các GUI chức năng, vì chúng có xu hướng gây mất tập trung.

Nói như vậy, bạn nên xem xét các biểu tượng chức năng và hình ảnh trong thiết kế của mình chẳng hạn
như biểu tượng trên thanh công cụ và liên kết hình ảnh trang web—và xem liệu chúng có thể hiện cảm xúc
mà bạn muốn toàn bộ thiết kế thể hiện hay không. Sử dụng các tiêu chí tương tự được liệt kê ở đây: màu
sắc, kết cấu, góc, đường cong, khoảng cách, v.v. Cụ thể, cách phối màu, góc và đường cong phải nhất quán
trên một bộ biểu tượng. Tuy nhiên, đừng làm cho chúng trông quá giống nhau, nếu không người dùng sẽ
không dễ dàng nhận thấy sự khác biệt. Các biểu tượng lớn hơn thường “cảm thấy” tốt hơn các biểu tượng
nhỏ, một phần vì bạn có thể vẽ chúng rộng rãi hơn và một phần vì các vấn đề về không gian và đông đúc đã
được thảo luận trước đó.
 Khái niệm cơ bản về thiết kế trực quan495

Trở lại hình ảnh trang trí. Hình ảnh là công cụ phi thường để gợi lên phản ứng cảm xúc. Bạn đã
thấy bao nhiêu trang web hiển thị những khuôn mặt vui vẻ, tươi cười? Trẻ em thả diều? Doanh
nhân trông có năng lực trong bộ vest bảnh bao? Làm thế nào về những con đường uốn lượn qua
phong cảnh núi non tuyệt đẹp? Hoàng hôn hay bãi biển? Đồi cỏ lăn tăn dưới bầu trời xanh đầy
nắng?

Những loại hình ảnh này thu hút bản năng sâu thẳm nhất của con người chúng ta và tất cả chúng đều khiến người
xem phản ứng tích cực—miễn là bối cảnh phù hợp. Nếu bạn cố gắng đưa những hình ảnh mạnh mẽ như thế này
vào một ứng dụng tiện ích nhỏ khiêm tốn, người dùng có thể cười hoặc chỉ trích đó là tiếp thị quá mức cần thiết.
Đây là một khu vực nhạy cảm, vì vậy nếu bạn không chắc chắn điều gì đó hoạt động, hãy kiểm tra điều đó với
người dùng.

Một thiết kế có thể khiến bạn nhớ đến một điều gì đó mang tính văn hóa—một thương hiệu, bộ phim, phong cách
nghệ thuật, thời đại lịch sử, thể loại văn học hoặc trò đùa nội tâm. Một tham chiếu quen thuộc có thể gợi lên
những ký ức hoặc cảm xúc đủ mạnh để lấn át tất cả các yếu tố thiết kế khác này, mặc dù các thiết kế tốt nhất làm
cho các tham chiếu văn hóa hoạt động hài hòa với mọi thứ khác.

Thiết kế 7 có thể khiến bạn nhớ đến nghệ thuật đại chúng của những năm 1970. Đó gần như chắc chắn là
có chủ ý. Cảm giác của trang là trang trọng, sống động và vui tươi—hãy lưu ý các góc độ, màu sắc, kiểu chữ
và kết cấu denim. Phản ứng cảm xúc của hầu hết những người Mỹ trưởng thành có thể sẽ là “ngớ ngẩn”,
“hoài cổ”, “ngầu theo phong cách cổ điển” hoặc đại loại như thế. Mọi thứ trong thiết kế này hoạt động cùng
nhau để tạo ra một phản ứng ruột cụ thể. Một số thiết kế CSS Zen Garden khác không được hiển thị ở đây
sao chép phong cách của Bauhaus, art nouveau, Dadaism, truyện tranh và thậm chí cả áp phích tuyên
truyền của Cộng sản thời Xô Viết.

Rõ ràng, nếu bạn công khai đề cập đến văn hóa, hãy xem xét đối tượng của bạn. Một đứa trẻ 10 tuổi sẽ không có
được tài liệu tham khảo về nghệ thuật đại chúng của những năm 1970. Rất có thể một thanh niên ở Ấn Độ cũng sẽ
không như vậy. Nhưng nếu khán giả của bạn được xác định đủ rõ để bạn biết rằng một tài liệu tham khảo về văn
hóa sẽ quen thuộc với họ, thì đó có thể là một “móc nối” tốt để thu hút người xem về mặt cảm xúc với thiết kế của
bạn.

Các tham chiếu văn hóa hiếm khi được sử dụng trong các thiết kế ứng dụng chức năng, nhưng bạn có thể
thấy chúng trongDa và chủ đềcho các nền tảng và ứng dụng riêng lẻ. Bạn cũng có thể tìm thấy các tài liệu
tham khảo về văn hóa trong các ứng dụng như QuickBooks, trong đó một số trang được thiết kế trông
giống như séc và hóa đơn. Chúng thực sự vượt ra ngoài cách xử lý mang tính phong cách và trở thành một
phép ẩn dụ tương tác, nhưng phép ẩn dụ này vẫn hoàn toàn mang tính văn hóa—một người chưa bao giờ
nhìn thấy sổ séc sẽ không phản ứng giống như người đã từng xem.

Một thiết kế tốt có sự thống nhất: nó liên kết với nhau như một thực thể, với mỗi yếu tố hỗ trợ các yếu tố khác về
mặt cấu trúc và bản chất. Đó là một mục tiêu khó đạt được. Tôi không thể đưa cho bạn những quy tắc khó và
nhanh về cách thực hiện; nó cần kỹ năng và thực hành.
496Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Nhưng một điều góp phần rất lớn vào sự thống nhất thị giác là sự lặp lại của các yếu tố hoặc họa tiết
trực quan. Chúng ta đã nói về các góc và đường cong; bạn có thể sử dụng các đường chéo có cùng
góc hoặc các đường có độ cong tương tự như các yếu tố lặp lại trong một thiết kế. Các
điều trị gócmô hình nói về một cách phổ biến để làm điều này.

Cũng xem xét kiểu chữ. Chỉ sử dụng một phông chữ nội dung chính, mặc dù các phông chữ khác có thể hoạt động
rất hiệu quả trong các khu vực nhỏ như thanh bên hoặc liên kết điều hướng. (Sự tương phản của chúng với phông
chữ chính làm cho chúng nổi bật.) Nếu bạn có nhiều tiêu đề hoặc phần có tiêu đề, hãy sử dụng cùng một phông
chữ tiêu đề cho chúng. Bạn cũng có thể kéo các thành phần đồ họa nhỏ hơn—chẳng hạn như độ rộng và màu của
đường kẻ—ra khỏi phông chữ của bạn vào phần còn lại của thiết kế. xemBiên giới đó phông chữ Echomẫu.

Khi các nhóm văn bản hoặc điều khiển tương tự lặp lại dọc theo một dòng, sẽ tạo ra nhịp điệu trực quan.
Bạn có thể thấy điều này đặc biệt trong phần “Chọn thiết kế” của Thiết kế 3, 4 và 8. Chúng hiển thị từng cặp
tên/tác giả thiết kế trong một nhóm được xác định rõ, sau đó lặp lại nhóm đó dọc theo một cột. Bạn có thể
dễ dàng đạt được hiệu ứng tương tự với các trường biểu mẫu, nút bảng màu và các thành phần giao diện
người dùng khác.

Nhịp điệu như thế này có thể là công cụ thiết kế mạnh mẽ. Sử dụng chúng một cách thận trọng và áp dụng chúng
cho các nhóm có thể so sánh được—người dùng sẽ cho rằng sự giống nhau về hình thức có nghĩa là giống nhau về
chức năng. Chương 4 thảo luận về sự lặp lại phần tử như một phần của hệ thống phân cấp trực quan; xem
Lưới đẳng thứchoa văn ở đó. Sự lặp lại cũng nằm ở trung tâm của các mẫu bố cục khác, chẳng hạn như
BẰNGLưới hình thu nhỏ(Chương 5),Danh sách hình thu nhỏ và văn bản(Chương 10), vàbội số nhỏ
(Chương 7).

Những người bạn làm việc trên các trang web có thể đã quen thuộc với mọi thứ được thảo luận cho
đến nay. Mọi người mong đợi các trang web—và mở rộng ra là các ứng dụng web—có phong cách đồ
họa mạnh mẽ và hiếm khi bạn thấy chúng trông hoàn toàn đơn giản và trung lập.

Nhưng nếu bạn làm việc trên các ứng dụng dành cho máy tính để bàn thì sao? Nếu bạn cố gắng chỉ áp dụng
các nguyên tắc này cho giao diện của các điều khiển—cách vẽ các điều khiển—bạn có thể không có nhiều
lựa chọn. Các ứng dụng Java có thể chọn từ một số tùy chọn giao diện, hầu hết trong số đó là giao diện gốc
hoặc khá trung tính. Các ứng dụng Linux cũng có một số lựa chọn hay, chẳng hạn như các chủ đề ứng dụng
của GNOME. Tuy nhiên, các ứng dụng Windows hoặc Mac gốc thường sử dụng giao diện nền tảng tiêu
chuẩn, trừ khi bạn sẵn sàng làm việc chăm chỉ để phát triển một giao diện tùy chỉnh.

Với tình huống này, bạn có thể được tha thứ vì chỉ sử dụng các tiêu chuẩn giao diện của nền
tảng và tập trung sự chú ý vào thiết kế đồ họa của mình ở nơi khác.
 Điều này có ý nghĩa gì đối với các ứng dụng dành cho máy tính để bàn497

Nhưng một số ứng dụng giờ đây trông giống “web-ish” hoặc “designer-y” hơn trước đây và nhìn
chung chúng trông đẹp hơn cho ứng dụng đó. Microsoft Money 2000 là một trong những ứng dụng
chủ đạo đầu tiên phá vỡ khuôn mẫu. Các nhà thiết kế của nó đã chọn sử dụng hình nền ở lề trên
cùng, tô màu chuyển sắc, phông chữ tiêu đề khử răng cưa và cách phối màu khác thường. Các ứng
dụng khác đã làm những điều tương tự.

Ngay cả khi bạn sử dụng giao diện trung lập cho vật dụng thực tế của mình, thì vẫn có nhiều cách để
sáng tạo.

Tầng lớp
Hình ảnh không phô trương, tô màu chuyển sắc và kết cấu tinh tế hoặc các mẫu lặp lại
trong vùng nền lớn có thể làm sáng giao diện đến mức đáng kinh ngạc. Sử dụng chúng
trong hộp thoại hoặc nền trang; hình nền cây, bảng hoặc danh sách; hoặc nền hộp (kết
hợp với đường viền hộp). xemnền sâumẫu để biết thêm.

Màu sắc và phông chữ

Bạn cũng thường có thể kiểm soát bảng phối màu và phông chữ tổng thể trong giao diện người dùng
gốc. Chẳng hạn, bạn có thể vẽ tiêu đề bằng một phông chữ khác thường ở một số kích thước điểm lớn
hơn văn bản hộp thoại tiêu chuẩn và thậm chí có thể trên một dải màu nền tương phản. Cân nhắc sử
dụng những thứ này nếu bạn thiết kế bố cục trang vớiPhần có tiêu đề(Chương 4).

biên giới
Đường viền cung cấp một khả năng khác cho kiểu dáng sáng tạo. Một lần nữa, nếu bạn sử dụngPhần có tiêu đề

hoặc bất kỳ loại nhóm vật lý nào khác, bạn có thể thay đổi cách vẽ đường viền hộp.
Hộp đồng màu có chiều rộng hẹp hoạt động tốt nhất; viền vát nhìn rất sang
những năm 1990 bây giờ. Nhìn thấyđiều trị gócVàBiên Giới Đó Echo Phông Chữ.

Hình ảnh

Trong một số bộ công cụ giao diện người dùng, một số điều khiển nhất định cho phép bạn thay thế giao diện
tiêu chuẩn của chúng bằng hình ảnh tùy chỉnh trên cơ sở từng mục. Ví dụ, các nút thường cho phép điều này,
vì vậy các nút của bạn, bao gồm cả đường viền của chúng, có thể trông giống như bất kỳ thứ gì bạn muốn.
Các bảng, cây và danh sách đôi khi cho phép bạn xác định cách các mục của chúng được vẽ (trong Java
Swing, bạn có toàn quyền kiểm soát việc hiển thị mục và một số bộ công cụ khác ít nhất cho phép bạn sử
dụng các biểu tượng tùy chỉnh). Bạn cũng có thể đặt hình ảnh tĩnh trên bố cục giao diện người dùng, cho bạn
khả năng đặt hình ảnh có kích thước bất kỳ ở bất kỳ đâu.

Mối nguy hiểm lớn nhất ở đây là khả năng tiếp cận. Các hệ điều hành như Windows cho phép người dùng thay đổi chủ đề
màu sắc/phông chữ của màn hình nền và điều đó không chỉ để giải trí—người dùng khiếm thị sử dụng các chủ đề màn
hình nền với bảng phối màu có độ tương phản cao và phông chữ khổng lồ chỉ để họ có thể thấy những gì họ đang làm.
Đảm bảo rằng thiết kế của bạn phù hợp với những chủ đề có độ tương phản cao đó. Đó là điều đúng đắn để làm.*

* Và, tùy thuộc vào người mua phần mềm của bạn, đó cũng có thể là điều hợp pháp để làm. Ví dụ, chính phủ Hoa Kỳ yêu cầu tất cả các
phần mềm được sử dụng bởi các cơ quan liên bang đều có thể truy cập được đối với người khuyết tật. Nhìn thấyhttp://
www.section508.govđể biết thêm thông tin.
498Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Đồng thời, bạn có thể thay thế nhãn văn bản thông thường bằng hình ảnh chứa phông chữ khác thường, có
thể có quầng sáng, hiệu ứng đổ bóng hoặc nền phức tạp. Điều này là phổ biến trong các trang web. Nếu
bạn nhất quyết sử dụng hình ảnh cho văn bản, bạn cần cung cấp đủ thông tin về hình ảnh đó để trình đọc
màn hình chẳng hạn như JAWS có thể đọc to hình ảnh đó. (Bạn làm điều đó chính xác như thế nào phụ
thuộc hoàn toàn vào công nghệ giao diện người dùng mà bạn đang sử dụng.)

Một mối nguy hiểm khác là làm mệt mỏi người dùng của bạn. Nếu bạn thiết kế một ứng dụng nhằm mục đích sử
dụng ở kích thước đầy đủ hoặc trong một thời gian dài, hãy giảm bớt màu sắc bão hòa, văn bản lớn, độ tương
phản cao và họa tiết bắt mắt—làm cho thiết kế yên tĩnh, không ồn ào. Quan trọng hơn, nếu ứng dụng của bạn
được sử dụng trong các tình huống căng thẳng cao, chẳng hạn như bảng điều khiển cho máy móc hạng nặng, hãy
loại bỏ mọi thứ thừa có thể khiến người dùng mất tập trung vào nhiệm vụ. Ở đây, mối quan tâm về nhận thức
quan trọng hơn nhiều so với thẩm mỹ.

Tất cả các mẫu này (ngoại trừDa và chủ đề) dựa trên các khái niệm được mô tả trong phần giới
thiệu. Họ nói về những cách cụ thể để áp dụng những khái niệm đó;điều trị gócchẳng hạn, ghi lại
một loại họa tiết hình ảnh lặp đi lặp lại vàBiên giới đó phông chữ Echobắt người khác.nền sâuVà
đường chân tócchạm vào lựa chọn kết cấu và phông chữ được thảo luận trong
Trọng lượng phông chữ tương phản.

1.nền sâu
2.Ít sắc thái, nhiều giá trị
3.điều trị góc
4.Biên giới đó phông chữ Echo

5.đường chân tóc

6.Trọng lượng phông chữ tương phản

CácDa và chủ đềmô hình là khác nhau. Nó đề cập nhiều hơn đến siêu thiết kế—nó không nói gì về cách
bạn thiết kế giao diện cụ thể cho ứng dụng của mình, mà là cách bạn thiết kế ứng dụng của mình để
cho phép những người khác thay thế giao diện của bạn bằng thiết kế của riêng họ.

7.Da và chủ đề
 các mẫu499
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Trang tải Firefox

Đặt một hình ảnh hoặc chuyển màu vào nền của trang, nó lùi về phía sau các phần tử nền trước
một cách trực quan.

Bố cục trang của bạn có các yếu tố trực quan mạnh mẽ (chẳng hạn như khối văn bản, nhóm điều khiển hoặc
cửa sổ) và bố cục trang không quá dày đặc hoặc bận rộn. Bạn muốn trang trông đặc biệt và hấp dẫn; bạn có
thể có một chiến lược xây dựng thương hiệu trực quan trong tâm trí. Bạn muốn sử dụng thứ gì đó thú vị
hơn màu trắng hoặc xám phẳng cho nền trang.

Nền có tiêu điểm mềm, độ dốc màu và các dấu hiệu khoảng cách khác dường như lùi lại
phía sau nội dung được xác định rõ hơn ở phía trước chúng. Do đó, nội dung dường như
“nổi” trước nền. Giao diện giả 3D này tạo ra hiệu ứng hình/mặt đất mạnh mẽ—thu hút sự
chú ý của người xem vào nội dung.

Giải thích ưa thích sang một bên, nó chỉ có vẻ tốt.

500Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Sử dụng nền có một hoặc nhiều đặc điểm sau:

tập trung mềm

Giữ cho các đường kẻ mờ và tránh quá nhiều chi tiết nhỏ—các đường kẻ sắc nét cản trở khả năng đọc
nội dung phía trên nó, đặc biệt nếu nội dung đó là văn bản hoặc các biểu tượng nhỏ. (Bạn có thể loại
bỏ các đường sắc nét nếu chúng có độ tương phản thấp, nhưng ngay cả khi đó, văn bản sẽ không hoạt
động tốt trên chúng trừ khi văn bản tương phản mạnh với nền.)

Độ dốc màu
Màu sáng, bão hòa là được, nhưng một lần nữa, các đường cứng giữa chúng thì không. Cho
phép các màu pha trộn vào nhau. Trên thực tế, nếu bạn không có hình ảnh để sử dụng trong
nền, bạn có thể tạo một dải màu đơn giản trong công cụ vẽ yêu thích của mình—nó trông vẫn
đẹp hơn một màu đồng nhất. (Bạn cũng không cần lưu trữ hoặc tải xuống các gradient thuần túy
dưới dạng hình ảnh. Trên Web, bạn có thể tạo chúng bằng cách lặp lại các dải rộng một pixel,
theo chiều ngang hoặc chiều dọc. Trong các hệ thống nơi bạn có thể sử dụng mã để tạo các
vùng lớn về màu sắc, độ dốc thường dễ lập trình.)

tín hiệu độ sâu

Chi tiết mờ và độ dốc màu dọc là hai tính năng cho hệ thống thị giác của chúng ta biết về
khoảng cách. Để hiểu lý do tại sao, hãy tưởng tượng một bức ảnh chụp phong cảnh đồi núi
—thứ gì đó càng ở xa thì màu sắc càng mờ và mờ. Các tín hiệu độ sâu khác bao gồm độ dốc
kết cấu (các tính năng nhỏ dần khi chúng ở xa hơn) và các đường tỏa ra từ các điểm biến
mất.

Không có tiêu điểm mạnh

Nền không nên cạnh tranh với nội dung chính để thu hút sự chú ý của người dùng. Các tiêu điểm
khuếch tán (yếu) có thể hoạt động, nhưng hãy đảm bảo rằng chúng đóng góp vào bố cục cân
bằng trên toàn bộ trang, thay vì làm người xem mất tập trung khi nhìn thấy các phần của trang
mà họ nên xem thay vào đó. Xem Hình 11-12.

Tiêu điểm khuếch tán tiêu điểm mạnh

Khuếch tán so với tiêu điểm mạnh

Translated from English to Vietnamese - www.onlinedoctranslator.com

500Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Sử dụng nền có một hoặc nhiều đặc điểm sau:

tập trung mềm

Giữ cho các đường kẻ mờ và tránh quá nhiều chi tiết nhỏ—các đường kẻ sắc nét cản trở khả năng đọc
nội dung phía trên nó, đặc biệt nếu nội dung đó là văn bản hoặc các biểu tượng nhỏ. (Bạn có thể loại
bỏ các đường sắc nét nếu chúng có độ tương phản thấp, nhưng ngay cả khi đó, văn bản sẽ không hoạt
động tốt trên chúng trừ khi văn bản tương phản mạnh với nền.)

Độ dốc màu
Màu sáng, bão hòa là được, nhưng một lần nữa, các đường cứng giữa chúng thì không. Cho
phép các màu pha trộn vào nhau. Trên thực tế, nếu bạn không có hình ảnh để sử dụng trong
nền, bạn có thể tạo một dải màu đơn giản trong công cụ vẽ yêu thích của mình—nó trông vẫn
đẹp hơn một màu đồng nhất. (Bạn cũng không cần lưu trữ hoặc tải xuống các gradient thuần túy
dưới dạng hình ảnh. Trên Web, bạn có thể tạo chúng bằng cách lặp lại các dải rộng một pixel,
theo chiều ngang hoặc chiều dọc. Trong các hệ thống nơi bạn có thể sử dụng mã để tạo các
vùng lớn về màu sắc, độ dốc thường dễ lập trình.)

tín hiệu độ sâu

Chi tiết mờ và độ dốc màu dọc là hai tính năng cho hệ thống thị giác của chúng ta biết về
khoảng cách. Để hiểu lý do tại sao, hãy tưởng tượng một bức ảnh chụp phong cảnh đồi núi
—thứ gì đó càng ở xa thì màu sắc càng mờ và mờ. Các tín hiệu độ sâu khác bao gồm độ dốc
kết cấu (các tính năng nhỏ dần khi chúng ở xa hơn) và các đường tỏa ra từ các điểm biến
mất.

Không có tiêu điểm mạnh

Nền không nên cạnh tranh với nội dung chính để thu hút sự chú ý của người dùng. Các tiêu điểm
khuếch tán (yếu) có thể hoạt động, nhưng hãy đảm bảo rằng chúng đóng góp vào bố cục cân
bằng trên toàn bộ trang, thay vì làm người xem mất tập trung khi nhìn thấy các phần của trang
mà họ nên xem thay vào đó. Xem Hình 11-12.

Tiêu điểm khuếch tán tiêu điểm mạnh

Khuếch tán so với tiêu điểm mạnh

 các mẫu501

Khi bạn thiết kế một giao diện với mộtnền sâu, hãy xem điều gì sẽ xảy ra khi người dùng thay đổi kích
thước của trang. Nền sẽ chứa kích thước lớn hơn (hoặc nhỏ hơn) như thế nào? Nó sẽ thay đổi tỷ lệ cho
phù hợp hay cửa sổ sẽ chỉ cắt một hình ảnh chưa được chia tỷ lệ? Việc cắt bớt có lẽ ít gây khó chịu hơn
cho người dùng; đó là cách hầu hết các trang web hoạt động và cảm thấy ổn định hơn. Bên cạnh đó,
bạn không phải lo lắng về việc thay đổi tỷ lệ khung hình, vốn là vấn đề với nhiều hình ảnh.

Trong Hình 11-13, bốn hình nền Mac OS minh họa những khó khăn tương đối khi đọc văn
bản và biểu tượng trên nền phức tạp. Hai cái đầu tiên khiến việc phân biệt các thư mục và
lối tắt ứng dụng trở nên khá khó khăn; cái thứ ba dễ hơn và cái thứ tư là dễ nhất cho đến
nay. Lưu ý các đặc điểm của bốn nền này: độ tương phản cao so với văn bản thấp, tiêu điểm
cứng so với mềm và "độ nhiễu" chung.

Bốn hình nền Mac OS có khả năng đọc khác nhau

Một số trang web sử dụng nhiều kết cấu để tạo cho toàn bộ trang web một diện mạo đặc biệt.
Trong ví dụ từ Ecoki, được hiển thị trong Hình 11-14, kết cấu ở khắp mọi nơi; nhưng vì chúng nhẹ
và có độ tương phản thấp nên chúng không ảnh hưởng đến khả năng đọc của văn bản.
502Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

trang chủ Ecoki

Phiên bản của trang web Mercedes-Benz được hiển thị trong Hình 11-15 sử dụng hình ảnh làm
nền. Hình ảnh này có một số tiêu điểm rất mạnh—tất nhiên là những chiếc ô tô—và chúng là
những đặc điểm trung tâm của trang. Nhưng các phần bên ngoài của hình ảnh, mềm hơn nhiều,
lànền sâuđối với nội dung khác: hộp tìm kiếm, bốn hình ảnh nhỏ ở dưới cùng và dòng thẻ “Dẫn
động bốn bánh toàn thời gian 4MATIC”.

Khía cạnh thú vị nhất của hình này là dải tối hơn chạy xuống phía bên tay trái.
Trang web cần một thanh điều hướng với văn bản nhỏ, nhưng việc xếp lớp các
liên kết đó trực tiếp trên hình nền sẽ không hiệu quả—các từ có thể không đọc
được do chi tiết nhỏ và sẽ bị lạc trong bố cục. Nền kính khói mờ làm nổi bật các
liên kết màu trắng đó bằng cách tăng độ tương phản; nó cân bằng trang (mặt
khác là cân đối); nó không làm mờ hình nền đẹp; và nó thêm một cảm giác về
chiều sâu lớp.
 các mẫu503

Mercedes-Benz

cây bạc hà
504Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Chọn một, hai hoặc nhiều nhất là ba sắc độ màu chính để sử dụng trong giao diện. Tạo
bảng màu bằng cách chọn các loại giá trị (mức độ sáng) từ bên trong một số màu đó.

Bạn muốn một bảng màu tương đối bảo thủ cho một ứng dụng hoặc trang web. Bạn muốn tránh giao
diện lòe loẹt, có màu cầu vồng, kiểu “salad trái cây giận dữ”, nhưng bạn vẫn muốn giao diện có một số
đặc điểm.

Về màu sắc, đôi khi càng ít càng tốt. Quá nhiều sắc độ màu nằm rải rác khắp giao
diện, đặc biệt là khi chúng sáng và bão hòa, có thể khiến thiết kế trở nên ồn ào và
lộn xộn. Màu sắc cạnh tranh để thu hút sự chú ý của người dùng.
Nhưng khi bạn sử dụng nhiều biến thể tinh tế trên một màu duy nhất, bạn có thể tạo ra một thiết kế
có chiều sâu và kích thước. Hãy xem xét các màu xanh lam-lục, vàng-lục và cam được sử dụng trong ví
dụ ở Hình 11-16 và được tái tạo trong các dải màu ở Hình 11-17. Lưu ý cách các màu bão hòa hơn di
chuyển về phía trước, trong khi các màu nhạt hơn dường như lùi lại. (Các tông màu xám cũng sẽ có xu
hướng giảm đi, do đó sẽ tạo ra hiệu ứng bóng đổ trên trang Mint.)

Màu sắc sử dụng trong giao diện của Mint

Như đã đề cập trước đó, hãy chọn một, hai hoặc thậm chí ba màu chính. Bạn nhận được màu đen và trắng miễn
phí, nhưng màu xám được tính. Trên thực tế, màu xám hoạt động rất tốt ở nhiều giá trị và mức độ sáng; nó rất linh
hoạt, đặc biệt nếu bạn thêm một chút màu để làm cho nó có màu xanh hơn (mát) hoặc màu be hơn (ấm).
 các mẫu505

Trong các màu đó, hãy thay đổi giá trị màu để có dải màu sáng và tối. Bạn cũng có thể thay đổi
độ bão hòa cùng một lúc; điều này có thể tạo ra sự kết hợp màu sắc tinh tế hơn so với bạn sẽ
nhận được bằng cách chỉ thay đổi giá trị. Sử dụng bao nhiêu màu trong số này tùy thích để biên
dịch bảng màu cho ứng dụng.

Tất nhiên, bạn có thể sử dụng các màu khác trong giao diện ngoài các màu này; chỉ cần sử dụng chúng một cách
tiết kiệm. Các biểu tượng, quảng cáo và các tính năng khác chiếm không gian tương đối nhỏ không nhất thiết phải
phù hợp với bảng màu bị hạn chế này. Bạn cũng có thể chỉ muốn chọn một hoặc hai màu nhấn, chẳng hạn như sử
dụng màu đỏ hoặc lục lam để đánh dấu các điểm ưa thích. Trên thực tế, việc sử dụng một màu duy nhất cho “nền”
của giao diện người dùng thực sự nhấn mạnh những màu phụ này vì chúng không bị lạc trong biển màu.

Biểu đồ trong Hình 11-18 sử dụng hai màu xanh lam và hồng để hiển thị dữ liệu của nó. Màu xanh
tượng trưng cho tên con trai và màu hồng tượng trưng cho tên con gái. Trong các màu đó, giá trị màu
thể hiện mức độ phổ biến của các tên đó trong năm 2003. Màu thứ ba, màu xám đậm, hiển thị khung
xung quanh dữ liệu—các đường lưới, số và tiêu đề—và màu xanh đậm làm nổi bật tên đã chọn
( “Dale”).

Sự kết hợp màu sắc này rất hiệu quả, cả về nhận thức và thẩm mỹ. Màu sắc và giá trị có ý
nghĩa gì đó đối với dữ liệu và mã hóa rất dễ theo dõi, thậm chí bạn hầu như không cần chú
giải sau khi đã xem nó một lần. Về mặt thẩm mỹ, toàn bộ vật thể có sự phong phú nhiều lớp
mà không sặc sỡ như màu cầu vồng lẽ ra phải có. Và trong văn hóa Hoa Kỳ, mọi người hiểu
màu xanh nhạt và hồng là màu “trẻ thơ”, do đó, mối liên hệ về cảm xúc và văn hóa cũng ở
đó. Nhìn thấyhttp://babynamewizard.com.

Pháp sư tên bé

Hình 11-19 cho thấy hai trang web sử dụng màu rất hạn chế. Màu đầu tiên cân bằng màu nóng và
màu lạnh, trong khi màu thứ hai sử dụng một màu duy nhất cho hầu hết thiết kế, dành riêng màu
cam nóng để làm nổi bật các nút kêu gọi hành động.
506Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

OnlineMBARankings.com và AdLucent.com

http://quince.infragistics.com/Patterns/Few%20Hues.aspx
 các mẫu507

JetBlue

Thay vì sử dụng các góc vuông thông thường, hãy sử dụng các đường cong hoặc đường chéo cho một
số góc hộp của giao diện. Làm cho các xử lý góc này nhất quán trên giao diện.

Giao diện sử dụng các phần tử hình chữ nhật như hộp, nút, menu và tab.

Sự lặp lại của các họa tiết trực quan giúp thống nhất một thiết kế. Khi bạn nghĩ ra một họa tiết “góc” duy nhất và
sử dụng nó một cách nhất quán ở nhiều nơi, nó sẽ mang lại một cái nhìn đặc biệt cho toàn bộ thiết kế. Nó chắc
chắn ít nhàm chán hơn so với các góc vuông thông thường.

Nhiều trang web sử dụng các góc cong. Những người khác sử dụng các đường chéo và một số sử dụng các đường
cắt. Những gì bạn chọn phụ thuộc vào giao diện tổng thể của trang web của bạn. Bạn có logo, hình ảnh hoặc
phông chữ có các yếu tố trực quan bắt mắt không? Sử dụng một trong những yếu tố trực quan đó. Bạn đang tìm
kiếm thứ gì đó nhẹ nhàng (thường là những đường cong), sắc sảo hay tràn đầy năng lượng? Hãy thử một vài ý
tưởng khác nhau.
508Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Không phải tất cả các thành phần hình chữ nhật trong giao diện đều cần sử dụng cách xử lý góc—không sử dụng quá
nhiều là một điều tốt. Nhưng các hộp hoặc bảng nhóm thường được thực hiện và các tab cũng thường được thực hiện
theo cách này. Nếu bạn sử dụng các phương pháp xử lý góc trên một phần tử trong một nhóm lặp lại, hãy thực hiện tất cả
chúng để đảm bảo tính nhất quán.

Hơn nữa, không phải mọi góc trên một hộp nhất định đều cần sử dụng cách xử lý góc. Đôi khi hai góc đối
diện có được nó, chẳng hạn như phía trên bên phải và phía dưới bên trái. Đôi khi nó chỉ là một góc, thường
là phía trên bên trái hoặc phía trên bên phải.

Ở mọi nơi phần tử được lặp lại, đảm bảo rằng nó giống với những phần tử khác. Nói cách khác, các
góc cong nên sử dụng cùng một loại đường cong (mặc dù không nhất thiết phải có cùng bán kính).
Tất cả các góc phải là cùng một góc—ví dụ: không trộn mô típ góc 45 độ với góc 20 độ. Ngoài ra, góc
cong và góc phải có xu hướng kết hợp không tốt trên các trang web trực quan bận rộn. Sử dụngđiều
trị gócđiều này một cách cẩn thận.

Trang web JetBlue trong Hình 11-20 ở trên cùng của mẫu lặp lại các góc cong của nó trên khắp trang
web: trong thanh menu, hộp nội dung chính, tab và nút. Pandora, được hiển thị trong Hình 11-21,
cũng làm như vậy, ngay cả đối với cửa sổ bật lên "chú thích" có chứa lời bài hát.

http://quince.infragistics.com/Patterns/Corner%20Treatments.aspx

Pandora
 các mẫu509

Trang web của Bảo tàng Getty trong Hình 11-22 sử dụng các thanh trên đỉnh hộp nội dung của nó và
các đường cong ở các góc dưới cùng. (Các tab cũng sử dụng các góc cong, đây là điều phổ biến.)
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Getty.org

Một cuộc triển lãm trực tuyến MoMA từ năm 2002

510Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Khi vẽ đường viền và các đường khác, hãy sử dụng cùng màu, độ dày và đường cong được sử dụng bởi một trong
các phông chữ chính của thiết kế.

Thiết kế của bạn chứa phông chữ được chọn cẩn thận để tạo hiệu ứng hình ảnh, chẳng hạn như phông chữ được sử dụng
trong tiêu đề, tiêu đề hoặc biểu trưng.

Sự lặp lại của các họa tiết trực quan giúp thống nhất một thiết kế. Phông chữ và đường viền hoạt động ở các tỷ lệ
tương tự nhau trong một thiết kế—chỉ rộng vài pixel—và khi chúng củng cố lẫn nhau về mặt trực quan, hiệu ứng
của chúng sẽ được phóng đại. Khi chúng xung đột (đặc biệt nếu bạn sử dụng nhiều loại đường viền khác nhau),
đóng góp của chúng sẽ yếu đi.

Đầu tiên, chọn một phông chữ từ thiết kế của bạn. Phông tiêu đề và tiêu đề thường hoạt động tốt, cũng như các phông
chữ được sử dụng trong biểu trưng, nhưng đôi khi văn bản nội dung cũng hoạt động. Quan sát các thuộc tính chính thức
của nó: màu sắc, độ dày của đường chính, kết cấu, bán kính đường cong, góc và khoảng cách.

Bây giờ, hãy thử vẽ các đường viền và đường kẻ sử dụng một số thuộc tính tương tự. Màu phải giống với
phông chữ, mặc dù bạn có thể ăn gian về độ dày và làm cho các đường viền mỏng hơn một chút so với các
nét của phông chữ. Nếu phông chữ có các đường cong tròn rõ rệt, giống như nhiều phông chữ sans-serif
hiện đại, hãy thử sử dụng cùng bán kính đường cong đó trên các góc của đường viền.

Nếu đó là một phông chữ đặc biệt thú vị, hãy tự hỏi điều gì khiến nó trở nên thú vị. Xem liệu bạn có thể kéo những
yếu tố trực quan đó từ phông chữ vào phần còn lại của thiết kế hay không.

Tất nhiên, bạn không cần phải làm điều này với tất cả các đường viền trong giao diện của mình; chỉ một số ít
sẽ làm được, đặc biệt nếu các đường kẻ dày. Hãy cẩn thận để không làm cho đường viền quá dày hoặc thô.
Các đường viền dày tạo ra một tuyên bố mạnh mẽ và sau một thời điểm, chúng áp đảo bất cứ thứ gì bên
trong chúng. Chẳng hạn, hình ảnh thường có thể xử lý đường viền dày hơn văn bản nội dung nhẹ. Bạn có
thể sử dụng các đường đơn pixel một cách hiệu quả kết hợp với các đường viền đậm hơn.
 các mẫu511

Trong Hình 11-24, Mochimedia sử dụng “đường cong mập mạp” của logotype trên toàn bộ thiết kế. Đường
viền đậm màu đen phản ánh mạnh mẽ logo; các biểu tượng, tiêu đề, thanh menu trên cùng và chính nhân
vật hoạt hình cũng vậy.

Mochimedia

Nhiều trang web sử dụng các đường viền và đường phân cách rất mỏng phản ánh chất lượng hình ảnh của phông chữ nội dung.

Trong trang web của Good, được hiển thị trong Hình 11-25, các đường chấm chấm một pixel lặp lại phông chữ nội dung được đánh

dấu chân thanh tinh tế trong thanh bên. (Phông chữ sans-serif có thể được lặp lại tốt hơn bằng một đường liền nét.)
512Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

Chi tiết trang Good's

Trang web của Dakine từ vài năm trước đã trộn lẫn nó lên một chút. Trong Hình 11-26, nó sử dụng nhiều
yếu tố thiết kế khác nhau, nhưng các đường răng cưa màu trắng trên thực tế phản ánh phông chữ của logo.
Tất cả cùng nhau, chúng mang lại cảm giác chuyển động, căng thẳng và sắc sảo cho trang, đó chắc chắn là
điều mà các nhà thiết kế của nó theo đuổi—Dakine bán dụng cụ thể thao cho giới trẻ.

Đường chéo dày xung quanh hình ảnh Logo sử dụng đường chéo và góc vuông

góc vuông trong

góc

Đường dày với

đường chéo Còn nữa
đường chéo

dakine
 các mẫu513

Trang nhất của HermitageMuseum.org

Sử dụng các đường rộng một pixel trong đường viền, quy tắc ngang và họa tiết.

Bạn muốn có một cái nhìn tinh tế và phức tạp cho giao diện của mình.

Dưới đây là một số trong nhiều cách bạn có thể sử dụng đường chân tóc trong một giao diện:

• Phân định ranh giớiPhần có tiêu đềbằng cách gạch chân các tiêu đề

• Để phân tách các vùng nội dung khác nhau, bằng các quy tắc ngang hoặc dọc hoặc bằng các
đường viền kín

• Là hướng dẫn để dẫn dắt mắt qua bố cục

• Giữa các vùng có màu nền khác nhau để làm rõ ranh giới giữa chúng
514Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

• Trong kết cấu, chẳng hạn như lưới hoặc khối đường ngang

• Trong các biểu tượng, hình ảnh và đồ họa được vẽ

• Là đường viền xung quanh các điều khiển, chẳng hạn như các nút

Hairlines trông đặc biệt đẹp khi được đặt gần các phông chữ sans-serif rất mỏng. Hãy nhớ rằng một đường
màu xám trông mỏng hơn một đường màu đen, ngay cả khi cả hai đều rộng một pixel. Điều này cũng đúng
với các màu nhạt hơn khác, chẳng hạn như màu mòng két được sử dụng trong Hình 11-27 ở trên cùng của
mẫu này. Độ tương phản giữa đường kẻ và nền của nó càng ít thì nó càng mỏng và nhạt hơn.

Một cách khác để bạn có thể làm sáng đường chân tóc—và thêm họa tiết khác khi bạn đang thực hiện—là
tạo đường chấm chấm thay vì đường liền nét. Khi viết bài này, các đường chấm được vẽ tinh xảo đang trở
nên phổ biến trên Web, ngay cả khi được gạch chân cho các liên kết.

Một thủ thuật để tăng độ căng và góc cạnh trong một thiết kế là đẩy một đường viền ngang bằng với
phần dưới cùng của một dòng văn bản. Thiết kế 8 của các thiết kế CSS Zen Garden thực hiện chính xác
điều đó với tiêu đề và tiêu đề của nó (xem Hình 11-8, quay lại phần giới thiệu).

Trang web trong Hình 11-28 cho thấy các đường chân tóc được sử dụng ở nhiều nơi: như một lưới mờ
trong nền, như các quy tắc ngang và như các đường viền rất nhẹ xung quanh các hộp. Các đường
chân tóc kết hợp với kết cấu nền và kiểu chữ tuyệt vời để tạo ra một cái nhìn rất phong phú.

Colly.com
 các mẫu515

Tương tự như vậy, các đường chân tóc được sử dụng theo nhiều cách trong trang web của xưởng thiết kế được minh họa
trong Hình 11-29. Lưu ý cách sử dụng chúng trong logo, trong các đường phân cách chấm và trong họa tiết đường chéo
được sử dụng xung quanh hình thu nhỏ và ở cuối trang.

RibbonsOfRed.com
516Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

TED

Sử dụng ít nhất hai phông chữ tương phản—một phông chữ mỏng và nhẹ, phông chữ khác nặng hơn và tối hơn để phân
tách các cấp độ thông tin khác nhau và tăng thêm sự thú vị về mặt hình ảnh.

Văn bản tạo nên các thành phần quan trọng trên trang và bạn muốn tổ chức của trang thật rõ
ràng ngay từ cái nhìn đầu tiên. Bạn muốn trang trông ấn tượng.

Khi hai phông chữ khác nhau về trọng lượng, chúng sẽ tạo thành một sự tương phản trực quan mạnh mẽ và sống
động. Về mặt thẩm mỹ, độ tương phản góp phần tạo nên một cái nhìn ấn tượng và bắt mắt. Độ tương phản kiểu
chữ cao, bao gồm kích thước, kết cấu và màu sắc—nhưng đặc biệt là độ dày—đảm bảo rằng trang của bạn trông
sẽ không buồn tẻ.

Bạn có thể sử dụng độ tương phản này để cấu trúc văn bản trên trang. Ví dụ: các chữ cái trông nặng hơn có
thể tạo thành tiêu đề và tiêu đề, do đó giúp xây dựng hệ thống phân cấp trực quan. Dòng chữ in đậm trong
Hình 11-30 kéo mắt về phía nó. Do đó, trọng lượng phông chữ tương phản góp phần vào nhận thức nhận
thức của trang cũng như tính thẩm mỹ. (Xem Chương 4 để biết phần thảo luận về phân cấp thị giác.)

Mẫu này có nhiều ứng dụng khả thi. Cuốn sách này đã đề cập đến việc sử dụng văn bản in đậm
cho tiêu đề, nhưng các ứng dụng có thể bao gồm:

• Tạo các tiêu đề và tiêu đề phụ rất mạnh mẽ, giống tạp chí
• Tách nhãn khỏi dữ liệu trong danh sách hai cột
• Tách các liên kết điều hướng khỏi thông tin
• Cho biết lựa chọn, chẳng hạn như các liên kết hoặc mục danh sách đã chọn

• Nhấn mạnh các từ trong một cụm từ

• Tách từ này với từ khác trong logo

 các mẫu517

Nếu bạn đang sử dụng phông chữ lớn hơn văn bản nội dung, hãy đảm bảo độ tương phản đủ mạnh để được chú
ý. Khi họ phông chữ cung cấp một số trọng lượng, cũng như Helvetica Neue, hãy chọn những phông cách nhau ít
nhất một vài bước—nếu độ tương phản yếu, có vẻ như là ngẫu nhiên chứ không phải cố ý. (Điều tương tự cũng
xảy ra với các thuộc tính phông chữ khác. Nếu bạn tạo hai thành phần văn bản có kích thước khác nhau, hãy làm
cho chúng thực sự khác biệt; nếu bạn muốn kết hợp các họ phông chữ, hãy đảm bảo rằng chúng trông không quá
giống nhau!)

Trong Hình 11-31, một trang phim của National Film Board of Canada sử dụng ba cỡ chữ rất
khác nhau trong một bố cục hài hòa và cô đọng. Kịch tính và gay cấn của nó phản ánh mức độ
nghiêm túc của chủ đề phim.

Chi tiết về Waterlife.nfb.ca

Thiết kế vui tươi trong Hình 11-32 có hệ thống phân cấp trực quan phức tạp hơn, được hiển thị với nhiều
kiểu và kích cỡ phông chữ.Trọng lượng phông chữ tương phảnđược sử dụng để nhấn mạnh tiêu đề "QUÁ TRÌNH
LÀM VIỆC", các mũi tên, tiêu đề cột và các cụm từ cụ thể trong văn bản nội dung. Các cụm từ có trọng số
không chỉ có trọng lượng phông chữ nặng hơn; chúng cũng có màu trắng, trong khi phần văn bản xung
quanh có màu xám. Điều này mang lại cho các cụm từ độ tương phản cao hơn so với nền tối, do đó làm
tăng trọng lượng hình ảnh của chúng.
 Một trang từ KaleidoscopeApp.com

Cuối cùng, Hình 11-33 cho thấy một trong những sự khác biệt về kích thước kiểu ấn tượng nhất mà tôi từng
thấy trên Web. Vì chúng có màu tối nên các chữ cái tiêu đề lớn vẫn cân đối (đại loại là ) với phần nội dung.
Trong khối văn bản nội dung,Trọng lượng phông chữ tương phảnmột lần nữa được sử dụng cho các từ và cụm
từ được nhấn mạnh; tương tự như vậy đối với URL ở phía trên bên trái, đặt phông chữ nặng hơn bên cạnh
phông chữ nhẹ hơn.

JonBrousseau.com
 các mẫu519

Bốn chủ đề Firefox mẫu

Mở kiến trúc giao diện của ứng dụng của bạn để người dùng và bên thứ ba có thể thiết kế
đồ họa và phong cách của riêng họ.

Cơ sở người dùng của bạn bao gồm một lượng lớn những người biết rõ về giao diện của bạn. Đối với những
người đó, giao diện có yêu cầu nhận thức tương đối thấp—chẳng hạn, nó không được sử dụng trong các
tình huống căng thẳng cao—vì vậy không cần thiết phải làm cho tất cả các yếu tố trở nên dễ nhận biết.

Hơn nữa, những người dùng này thích mày mò. Họ coi trọng phong cách và họ có xu hướng đặt các tùy chọn phần
mềm phù hợp với sở thích của họ.

Khi mọi người sắp xếp lại và tùy chỉnh không gian cá nhân của họ, vật lý hoặc ảo, họ sẽ có cảm giác sở
hữu không gian đó. Đây là nhu cầu cơ bản của con người (mặc dù không phải tất cả mọi người đều
hành động theo nó; nhiều người hoàn toàn hài lòng với “cài đặt gốc” của phần mềm). Thay đổi tùy
chọn phông chữ và màu đơn giản là một cách phổ biến để tùy chỉnh môi trường phần mềm của ai đó,
nhưngDa và chủ đềvượt xa các cách phối màu và phông chữ.

Có bằng chứng trên Internet rằng người dùng thực sự thích chủ đề. Trên thực tế, chúng ta đang nói
về hai nhóm người dùng ở đây: những người tải xuống và sử dụng các chủ đề và những người không
chỉ sử dụng chúng mà còn thiết kế chúng. Những người thiết kế chúng coi chủ đề là cơ hội để sáng
tạo và đưa tác phẩm của họ ra mắt công chúng. Nhiều người là nghệ sĩ đồ họa. Những người này có
thể biết rất rõ về thiết kế giao diện người dùng của bạn.

Trong mọi trường hợp, có rất nhiều ứng dụng và dịch vụ web có giao diện hoặc chủ đề và số
lượng chủ đề do người dùng thiết kế là rất lớn. Số giờ người dành cho những công việc này là
minh chứng cho sức mạnh của sự thôi thúc sáng tạo. Đối với các nhà thiết kế, các ứng dụng có
thể thay đổi giao diện đáp ứng một nhu cầu cơ bản khác của con người: sự sáng tạo.
520Chương 11: Làm cho nó trông đẹp mắt: Phong cách trực quan và thẩm mỹ

(Sự khác biệt giữa giao diện và chủ đề trong ngữ cảnh này là mơ hồ. Một số ứng dụng hoặc trang web sử
dụng một và một số sử dụng trang kia. Khi viết bài này,chủ đềdường như là thuật ngữ được lựa chọn cho
khái niệm kiểu giao diện do người dùng thiết kế, trong khi thuật ngữdadường như áp dụng nhiều hơn cho
giao diện vật lý trên máy tính xách tay hoặc thiết bị di động. Đó không phải là trường hợp khi ấn bản đầu
tiên của cuốn sách này được viết.)

Chính xác cách thiết kế và triển khai một ứng dụng có thể thay đổi giao diện phụ thuộc hoàn toàn vào công nghệ giao
diện người dùng mà bạn sử dụng, vì vậy rất khó để khái quát hóa bất cứ điều gì ở đây.

Trước tiên, hãy nhớ rằng bất kỳ ứng dụng Windows gốc nào cũng có thể được thay đổi bằng giao diện hoặc
chủ đề. Một số trình duyệt phổ biến cũng có thể được "theo chủ đề", như thể hiện trong Hình 11-34.

Thứ hai, chủ đề cho các dịch vụ web chẳng hạn như WordPress (xem Hình 11-35) ảnh hưởng nhiều hơn là
chỉ phong cách đồ họa được hiển thị trên các trang blog. Chủ đề của chúng cũng xác định cách trình bày các
bài đăng trên blog, nội dung nào xuất hiện trong thanh bên và thậm chí cả thông tin nào được hiển thị hoặc
ẩn cho mỗi mục nhập. Thiết kế một kiến trúc giao diện người dùng để hỗ trợ điều này là một việc khó và
nằm ngoài phạm vi của cuốn sách này. Tôi khuyến khích bạn xem xét các ví dụ hiện có về các ứng dụng và
trang web theo chủ đề.

Một phản đối đôi khi được đưa ra về giao diện là chúng làm cho giao diện khó
sử dụng hơn. Điều đó đúng với nhiều giao diện được thiết kế tồi. Tuy nhiên, hãy
tự hỏi bản thân: điều đó quan trọng đến mức nào? Mỗi ứng dụng có phải hoàn
hảo về mặt nhận thức không? (Mặc định giao diện không hoàn hảo, mặc dù
chúng chắc chắn đã được kiểm tra khả năng sử dụng nhiều hơn so với giao
diện). khả năng sử dụng cơ bản là “đủ tốt” và sở thích thẩm mỹ cá nhân sẽ
chiếm ưu thế. Khi giao diện có sẵn, mọi người tự đưa ra lựa chọn đó, cho dù họ
có tự học về khả năng sử dụng hay không.
Ở một mức độ nào đó, bạn có thể—và nên, với tư cách là một phần trách nhiệm của nhà thiết kế—quyết
định cấp độ nào cho phép tạo chủ đề và giao diện. Bạn chỉ có thể cho phép thay đổi màu sắc, phông chữ và
hình nền. Bạn có thể cho phép tạo giao diện ở mức bitmap để duy trì bố cục trong khi thay đổi giao diện của
các điều khiển. Hoặc bạn có thể cho phép tùy chỉnh đầy đủ; tùy thuộc vào bạn để quyết định xem loại tự do
đó có khả năng làm cho giao diện khó sử dụng một cách tội phạm hay không.

Tôi sẽ suy đoán rằng thiết kế ứng dụng xuất sắc—chẳng hạn như chức năng được lựa chọn
tốt, mô hình tổ chức dễ hiểu, điều hướng phù hợp, bố cục trang tốt và tiện ích tiêu chuẩn—
có thể làm cho giao diện trở nên linh hoạt hơn trước các chủ đề xấu. Thiết kế nó tốt nhất có
thể, sau đó đưa nó ra ngoài để mọi người tùy chỉnh ở mức độ mà bạn cho là phù hợp. Xem
những gì xảy ra!
 các mẫu521

Hình 11-35 cho thấy bốn trong số nhiều chủ đề có sẵn cho các blog WordPress. Một số lượng lớn các
chủ đề cũng có sẵn cho các blog và hệ thống trang web khác, chẳng hạn như Blogger và Drupal. Hầu
hết các chủ đề như vậy đều được người dùng cuối tùy chỉnh thêm (đặc biệt là những người biết cách
chỉnh sửa HTML và CSS).

Bốn chủ đề WordPress

http://quince.infragistics.com/Patterns/Skins.aspx
Đây là những thư viện hoặc bộ sưu tập mẫu trực tuyến được dùng làm tài liệu tham khảo cho cuốn sách
này. Một số mẫu nổi tiếng dường như được sao chép trong một số thư viện, nhưng mỗi tác giả viết và minh
họa chúng theo cách khác nhau. Bạn có thể tìm thấy cái nhìn sâu sắc về một số mẫu của cuốn sách này
bằng cách đọc các đối tác của chúng trong các bộ sưu tập này.

Yahoo! Thư viện mẫu thiết kế: http://

developer.yahoo.com/ypatterns/
Các mẫu thiết kế giao diện người
dùng: http://ui-potypes.com

Hoa văn:
http://patternry.com

Mô hình trong thiết kế tương tác của Martijn van Welie:

http://welie.com/patterns

mộc qua:
http://quince.infragistics.com

Thiết kế các trang webtrang sách: http://

www.designofsites.com/design-patterns/

Thiết kế giao diện webtrang sách: http://

designingwebinterfaces.com/explore

Thiết kế giao diện xã hộitrang sách: http://

www.designingsocialinterfaces.com/potypes/Main_Page

Mẫu thiết kế giao diện (nhấn mạnh vào infographics):

http://patternbrowser.org

Design4Mobile:
http://design4mobile.com
524Người giới thiệu

Thư viện mẫu thiết kế giao diện người dùng Endeca (nhấn mạnh vào tìm kiếm):
http://patterns.endeca.com

Tìm kiếm của Peter Morville và các mẫu liên quan đến tìm kiếm: http://
www.flickr.com/photos/morville/collections/72157603785835882/

Usability.gov cung cấp một thư viện dựa trên bằng chứng duy nhất về các hướng dẫn và đề xuất thiết kế
giao diện. Mặc dù không phải là một thư viện mẫu, nhưng nó là một tài liệu tham khảo có giá trị: http://
usability.gov/guidelines/index.html

Các trang web sau đây không phải là bộ sưu tập mẫu, nhưng chúng chứa các bộ ví dụ thiết kế chung
đẹp mắt. Tôi sử dụng chúng khi tôi cần các ví dụ hoặc nguồn cảm hứng:

Thư viện GUIdebook:

http://www.guidebookgallery.org/

Chạm vào mẫu (không phải các loại “mẫu” được mô tả trong cuốn sách này):
http://patterntap.com/

Vandelay Design có nhiều trang chứa đầy các ví dụ thiết kế web đáng yêu, bao gồm thương mại điện tử, tổ
chức phi lợi nhuận, nhà thờ, tạp chí, danh mục thiết kế, điều hướng thú vị và trang web của công ty. Tôi chỉ
giới thiệu cho bạn một trong số chúng ở đây và bạn có thể tìm thấy danh sách đầy đủ trên trang này: http://
vandelaydesign.com/blog/galleries/corporate-websites/

Nếu bạn đang tìm hiểu sâu hơn những gì cuốn sách này có thể cung cấp, danh sách sau đây có thể cung cấp cho bạn một
số điểm khởi đầu tốt. Rõ ràng, có nhiều cuốn sách thiết kế tuyệt vời hơn những gì có thể được liệt kê ở đây; những điều
này tạo thành một danh sách “tốt nhất” mà bạn có thể sử dụng để phân nhánh và tìm thêm tài liệu tham khảo. Danh sách
bắt đầu với sách thiết kế giao diện người dùng chung, sau đó liệt kê một số sách về các chủ đề cụ thể, chẳng hạn như thiết
kế đồ họa, biểu mẫu, đồ họa thông tin, phương tiện truyền thông xã hội và tìm kiếm:

Thiết kế giao diện web: Nguyên tắc và mẫu cho tương tác phong phúbởi Bill Scott và
Theresa Neil (O'Reilly, 2009)

Thiết kế các trang web: Các mẫu để tạo các trang web chiến thắng,Ấn bản thứ hai, của Douglas
K. van Duyne, James A. Landay, và Jason I. Hong (Prentice Hall, 2006)

Thiết kế cho tương tác: Tạo các ứng dụng và thiết bị sáng tạo,Phiên bản thứ hai, của
Dan Saffer (New Riders Press, 2009)
Đừng khiến tôi phải suy nghĩ: Cách tiếp cận thông thường đối với khả năng sử dụng web,Phiên bản thứ hai, của
Steve Krug (New Riders Press, 2005)

Giới thiệu về Mặt 3: Bản chất của Thiết kế Tương táccủa Alan Cooper, Robert Reimann và
David Cronin (Wiley, 2007)

Các thiết kế của những thứ hàng ngàycủa Donald Norman (Sách cơ bản, 1998)
 Người giới thiệu525

Kiến trúc thông tin cho World Wide Web: Thiết kế trang web quy mô lớncủa Peter
Morville và Louis Rosenfeld (O'Reilly, 2006)
Nguyên tắc thiết kế phổ quát: 125 cách để nâng cao khả năng sử dụng, ảnh hưởng đến nhận thức,
tăng sức hấp dẫn, đưa ra quyết định thiết kế tốt hơn và dạy thông qua thiết kế,Phiên bản thứ hai,
của William Lidwell, Kritina Holden và Jill Butler (Nhà xuất bản Rockport, 2010)

Sách thiết kế của người không phải là nhà thiết kế,Phiên bản thứ ba, của Robin Williams (Peachpit Press, 2008)

Thiết kế cảm xúc: Tại sao chúng ta yêu (hoặc ghét) mọi thứ hàng ngàycủa Donald Norman (Sách
cơ bản, 2005)

Thiết kế biểu mẫu web: Điền vào chỗ trốngbởi Luke Wroblewski (Rosenfeld Media, 2008)

Biểu mẫu hoạt động: Thiết kế biểu mẫu web cho khả năng sử dụngbởi Caroline Jarrett (Morgan
Kaufmann, 2008)
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>

Thiết kế Phòng thủ cho Web: Cách cải thiện thông báo lỗi, trợ giúp, biểu mẫu và các vấn đề khủng
hoảng kháccủa Matthew Linderman và Jason Fried (New Riders Press, 2004)

Hiển thị trực quan thông tin định lượng,Phiên bản thứ hai, bởi Edward R. Tufte
(Graphics Press, 2001)
thông tin hình dungcủa Edward R. Tufte (Graphics Press, 1990)
Giải thích bằng hình ảnh: Hình ảnh và Số lượng, Bằng chứng và Tường thuậtcủa Edward R. Tufte
(Graphics Press, 1997)

Thiết kế bảng điều khiển thông tin: Giao tiếp trực quan hiệu quả của dữ liệubởi Stephen
Vài (O'Reilly, 2006)

Bây giờ bạn đã thấy: Các kỹ thuật trực quan hóa đơn giản để phân tích định lượngcủa Stephen Few
(Analytics Press, 2009)

Thiết kế giao diện xã hội: Nguyên tắc, mẫu và thực tiễn để cải thiện trải nghiệm
người dùngcủa Christian Crumlish và Erin Malone (O'Reilly và Yahoo! Press, 2009)
Thiết kế cho mạng xã hộicủa Joshua Porter (New Riders Press, 2008)

Mẫu tìm kiếm: Thiết kế để khám phácủa Peter Morville và Jeffery Callender (O'Reilly,
2010)

Và cuối cùng, đây là những cuốn sách mẫu cổ điển bắt đầu toàn bộ khái niệm:

Cách xây dựng vượt thời giancủa Christopher Alexander (Nhà xuất bản Đại học Oxford, 1979)

Ngôn ngữ mẫucủa Christopher Alexander, Sara Ishikawa, Murray Silverstein, Max
Jacobson, Ingrid Fiksdahl-King, và Shlomo Angel (Nhà xuất bản Đại học Oxford, 1977)

Các mẫu thiết kế: Các yếu tố của phần mềm hướng đối tượng có thể tái sử dụngcủa Erich Gamma,
Richard Helm, Ralph Johnson, và John M. Vlissides (Addison-Wesley Professional, 1994)
 Nút “Xong” nổi bật, 245, 257–261 Mục
menu thông minh, 245, 261–263 Mẫu nút
Trang web About.com
hành động, 261
Mẫu Tính năng, Tìm kiếm và Duyệt qua và,
Mẫu bảng điều khiển hành động
32, 33
khoảng, 252–256
mô hình đàn accordion
kết xuất phổ biến, 241
khoảng, 159–163
Công cụ di chuột mẫu và, 250
Mẫu Bảng điều khiển có thể thu gọn
hành động ghi nhãn, 254
và, 164 mẫu Lớp phủ danh sách và,
lý do sử dụng, 253 hành
207, 209 mẫu Thẻ mô-đun và, 156
động cấu trúc, 254 luồng
cân nhắc về điều hướng, 79 cân nhắc
hoạt động, 36
về bố cục trang, 136, 140 mẫu Phần
mù quảng cáo, 134
có tiêu đề và, 154 mẫu Bộ chọn hai
Trang web AdLucent.com, 506
bảng và 200 hành động và lệnh
Adobe AIR, 270
Cầu Adobe, 42, 43
khoảng, 245
Adobe CS5, 120
thực hành tốt nhất, 239
Pháo hoa Adobe, 89
cân nhắc về chức năng chung, 239 kết
Trình tạo Adobe Flash
xuất thông thường, 240–242
Mẫu Nhóm nút và mẫu 247, 248
sử dụng sáng tạo, ví dụ 242–244
Bảng màu Canvas Plus và 53
GarageBand, 242–244 vô hình,
Adobe Illustrator
241
Mẫu Chế độ xem thay thế và mẫu 65,
hành động dán nhãn, 254
66 Mục menu thông minh và 262
đảo chiều, 271–275
Adobe Photoshop
hành động cấu trúc, 254 mục tiêu giao
Mẫu Bảng màu Canvas Plus và, 50, 51, 53 màu
diện được đề xuất, 239 không thể hoàn
trong thiết kế trực quan và, 488
tác, 272
Mẫu Lịch sử lệnh và, 277 mẫu
các mẫu hành động và mệnh lệnh
Trình chọn thả xuống và, 381 mẫu
Bảng Hành động, 252–256
Mặc định tốt và, 387 mẫu Macro
Nhóm nút, 246–248
và, 278
Khả năng hủy, 245, 269–271 Lịch sử
Mẫu Bảng điều khiển có thể di chuyển và,
lệnh, 245, 275–277 Công cụ di
172 Mẫu Trợ giúp đa cấp và, 73 Mẫu Hoàn
chuột, 249–252
tác đa cấp và, 271, 272 Mẫu Tổng quan
Macro, 245, 278–280
cộng với chi tiết và, 297 Mẫu Lặp lại được
Hoàn tác đa cấp, 245, 271–275
sắp xếp hợp lý và, 19 Mẫu Định dạng có
Xem trước, 245, 263–266
cấu trúc và, 360
Chỉ báo tiến độ, 245, 266–268
528Mục lục

khả năng chi trả trong thiết kế giao diện, Apple iPad, 88
244 Ahlberg, Christopher, 311 điều hướng kết hợp, 80, 85
Trang web AIGA, 91, 92, 212, 213 Mẫu tự động hoàn thành
Aldrin, Buzz, 461 về, 356, 375–379
Alexander, Christopher, xix thiết kế biểu mẫu và, 342 thiết kế thiết bị di
Mô hình cuộn bảng chữ cái động và, 443 mẫu Kích hoạt Phản hồi và 184
khoảng, 230–231 mẫu Thông báo Lỗi Cùng Trang và, 389 Trang
đồ họa thông tin và, 295 web AutoTrader, 179, 181
màu hàng xen kẽ, 224 mẫu
Chế độ xem thay thế trục (đồ họa thông tin), 294, 328–331
khoảng, 30, 64–67
đồ họa thông tin và, 295 cung cấp các
công cụ để tạo ra mọi thứ, 29 hiển thị
Baby Name Wizard,
một thứ duy nhất, 27 Trang web
505 hình nền
Amazon
Mô hình Nền sâu và, 499–503 hình ảnh
Mẫu Tự động hoàn thành và, 375 Mẫu Điều
dưới dạng, 502
hướng dưới cùng và, 456, 457 Mẫu Băng
cân nhắc thiết kế trực quan, 497 vi
chuyền và, 217
khuẩn, biểu đồ gen, gói Nền tảng 327 BBN,
Mẫu Tính năng, Tìm kiếm và Duyệt qua và,
312–315 mẫu hành vi.Xem thêmhành vi của
31, 32, 33
con người
Liệt kê mẫu Inlay và, 209
Thay đổi ở giữa dòng, 12
Mẫu Lời khuyên của người khác và, 21 mẫu
lựa chọn hoãn lại, 12
Trình chỉnh sửa cài đặt và, 63 mẫu Công cụ
Thói Quen, 14–15
đăng nhập và, 116 mẫu Phần có tiêu đề và
Xây dựng gia tăng, 14 Hài
154 Trang web của American Airlines, 260
lòng tức thì, 10 Chỉ bàn
Trang web của Hội Chữ thập đỏ Hoa Kỳ
phím, 20
Vi phạm, 16, 35
Mẫu Fat Menus và, 109 Mẫu kim tự
Lời khuyên của người khác, 21
tháp Nano ngược và, 415 Mẫu hộp tin
Khuyến nghị cá nhân, 22 Ký ức
tức và, 430
tương lai, 18
Mẫu Đăng lại và Nhận xét và, mẫu
Thám hiểm an toàn, 9
409 Liên kết xã hội và, 425
Hài lòng, 11
Mẫu Chiến lược thời gian và mẫu
Bộ nhớ không gian, 17
Chuyển tiếp hoạt hình 418
Streamlined Repetition, 19
về, 86, 127–129
trang web Best Western, 464
Mẫu Công cụ Di chuột và, 250 đồ
trang web Bing, 468
họa thông tin và, 295 Mẫu Lớp phủ
Blitzer, Sói, 404
danh sách và 207 Mẫu Thu phóng
trang web blog
Cục bộ và 318 Mẫu Thanh cuộn
Nhập mẫu Gợi ý và 366, 367 Mẫu đo
Chú thích
độ mạnh mật khẩu và 373 Mẫu trò
khoảng, 86, 124–126
chuyện gần đây và 439
Mẫu cuộn theo thứ tự chữ cái và, 230
Mẫu giao diện và chủ đề và viết
Mẫu băng chuyền và, 218
blog 521
đồ họa thông tin và, 295
Mẫu Bảng xếp hạng nội dung và, mẫu
Apple Corporation
Hộp tin tức 434 và, 430
lòng trung thành với thương hiệu và,
Mẫu Trò chuyện gần đây và mẫu 438–440,
479 mẫu Băng chuyền và, 218 mẫu
439 Liên kết xã hội và mẫu Luồng chuyên
Nhắc đầu vào và, 370
biệt 424–426 và mẫu Chiến lược thời gian
419–423 và mẫu 417, 418
 Mục lục529

Bly, Robert, 414

Trang web BoingBoing
Bản đồ Kích thích California, mẫu
Mẫu Người bắt đầu cuộc trò chuyện và,
302 Khả năng hủy bỏ
413 Mẫu trò chuyện gần đây và 438–440
về, 245, 269–271
Mẫu Tiện ích chia sẻ và 428 dấu trang
Mẫu Chỉ báo Tiến trình và, mẫu
267 Canvas Plus Palette
Mô hình trạng thái được liên kết sâu và
khoảng, 29, 50–54
101 cân nhắc điều hướng, 84 đường viền
Mẫu Bảng điều khiển có thể di chuyển và,
168, 172 xem xét điều hướng, 83
Mẫu Borders That Echo Fonts và,
cung cấp các công cụ để tạo ra đồ vật,
510–512
mẫu 28 Card Stack, 157
Mẫu Hairlines và, 513
mô hình băng chuyền
kiểu chữ và, 510
khoảng, 215–219
cân nhắc thiết kế trực quan, mẫu
Mẫu Chế độ xem thay thế và, 65
497 Borders That Echo Fonts
Mẫu cuộn phim và, 453
về, 498, 510–512
liệt kê các cân nhắc hiển thị, 195 Nhiều
ứng dụng máy tính để bàn và, 497 họa
mẫu Không gian làm việc và, 70 thiết
tiết trực quan lặp đi lặp lại, 496 trang
kế thiết bị di động và 448 Trang web
web Boston.com
Cartifact, 319, 320
thiết kế thiết bị di động và mẫu Danh sách văn
Mẫu danh sách xếp tầng
bản và hình thu nhỏ 446, 447 và trang web 460
khoảng, 232–234
Boston Globe, 119
Mẫu Chế độ xem thay thế và, 65 thiết
Mẫu điều hướng dưới cùng, nhãn hiệu 448,
kế biểu mẫu và, 347, 348
457–458
danh sách cân nhắc về hiển thị, 197
Mẫu Điều hướng dưới cùng và, 457 Mẫu Người
cân nhắc về điều hướng, 288 mô hình
bắt đầu cuộc trò chuyện và, 411 tầm quan
tổ chức cho, 283 mẫu Bảng dạng cây
trọng của danh tính, 479
và 235 mẫu Bộ chọn hai bảng và 200
cộng đồng trực tuyến và, 394
nghiên cứu điển hình, 5
mẫu Tiếng nói cá nhân và, 403
quảng cáo, 393
Mô hình sân khấu trung tâm
Mẫu Liên kết xã hội và, 424 Mẫu Thương hiệu được
khoảng, 140, 145–148
sắp xếp hợp lý và, 474–476 phong cách trực quan và,
Mẫu Bảng điều khiển hành động và 253 Mẫu Bảng
478
điều khiển có thể thu gọn và 164, 165 Mẫu Bảng xếp
mẫu bánh mì
hạng nội dung và 435 Mẫu Tính năng, Tìm kiếm và
khoảng, 77, 86, 121–123 mẫu
Duyệt qua và 31 thiết kế biểu mẫu và 357
Escape Hatch và, 104
Mẫu Tính năng, Tìm kiếm và Duyệt và, 32
Mẫu truy vấn chi tiết một cửa sổ và, 204 Thay
Mẫu Bản đồ Trình tự và, 118
đổi trong mẫu giữa dòng, 12 Trang web
Mẫu Settings Editor và 61 mẫu Visual
Chipotle, 476
Framework và 143 trình duyệt.Nhìn
Công cụ dành cho nhà phát triển Chrome
thấyduyệt các trình duyệt web.Nhìn thấy
Mẫu đàn accordion và 162 Mẫu thanh
điều hướng Mẫu nhóm nút
cuộn được chú thích và 126 Mẫu tự
động hoàn thành và 378 Mẫu
khoảng, 246–248
Breadcrumbs và 123 Trang web Circos,
Mẫu Picture Manager và các nút
324, 327
40, 41
mẫu trích dẫn, 326
kết xuất phổ biến, 240
Xóa mô hình Điểm đầu vào
cân nhắc thiết kế biểu mẫu, mẫu Liên
về, 78, 87–89
kết xã hội 345–355 và, 424
cân nhắc điều hướng, 83, 84
530Mục lục
Cleveland, William, 335
CLI (giao diện dòng lệnh), 242 mẫu Bảng
điều khiển có thể đóng, 161
đóng cửa (nguyên tắc Gestalt)
về, 139
Mẫu Nhóm nút và, 247 xem xét bố cục
trang, 134, 136 Mẫu Nút “Hoàn thành”
nổi bật và, 257 Mẫu sọc hàng và, 221
Trang web CNET, 32
trang web CNN
Mẫu đàn accordion và mẫu 162 Chế
độ xem thay thế và mẫu 66, 67 Lưới
bằng và mẫu 150, 151 Giọng nói cá
nhân và mẫu 404, 405 Liên kết xã hội
và mẫu 424
Mẫu Luồng chuyên dụng và mẫu Bảng điều
khiển có thể thu gọn 420, 421
khoảng, 164–168
Mẫu đàn accordion và 160 mẫu Bảng
điều khiển hành động và 255 mẫu
Chuyển tiếp hoạt hình và 127 mẫu Bảng
màu Canvas Plus và 51 mẫu Bảng điều
khiển và 46
Mẫu Tab mô-đun và, 156 mẫu
Trợ giúp đa cấp và, 72 cân nhắc
về bố cục trang, 140 mẫu Trình
quản lý ảnh và, 40 mẫu Phần có
tiêu đề và, 154 trí thông minh
tập thể, 394
Trang web Colly.com, 514
màu sắc
hình nền và, 500
Mô hình Ít Sắc thái, Nhiều Giá trị và,
504–506
Mẫu Máy đo độ mạnh mật khẩu và, 372
Mẫu Thông báo lỗi cùng trang và, 389
Mẫu sơ đồ cây và, 338
trong thiết kế trực quan, 488–
489, kỹ thuật khối màu 497, mẫu
Lịch sử lệnh 220
về, 245, 275–277
Mẫu macro và, 278, 279 Mẫu
hoàn tác đa cấp và, 274 giao
diện dòng lệnh (CLI), 242 Mẫu lệnh,
245
Constantine, Larry, 274 Mẫu
bảng xếp hạng nội dung
khoảng, 434–437
cân nhắc điều hướng, 85
Chia sẻ mẫu Widget và 427 nguyên tắc
truyền thông xã hội và 397 tổ chức nội
dung.Nhìn thấytổ chức menu ngữ cảnh nội
dung
kết xuất phổ biến, 240
Mô hình Công cụ di chuột và, 250
liên tục (nguyên tắc Gestalt)
về, 139
cân nhắc về đồ họa thông tin, cân
nhắc về bố cục trang 283, 135
Mẫu Căn chỉnh Phải/Trái và, 174
Mẫu Sọc Hàng và, 221
Mẫu Trọng lượng phông chữ tương phản, 498,
516–518
điều khiển.Xem thêmhình thức và các mẫu điều khiển;
thiết kế mẫu
thu thập văn bản đầu vào, 350
để tạo danh sách có thứ tự, 350 để
tạo danh sách không có thứ tự, 349
cho ngày và giờ, 355
để nhập số, 352, 353 để nhập các
dãy con, 354 để chọn nhiều trong
số N mục, 348 để chọn một trong N
mục, 346, 347 để chọn một trong
hai tùy chọn, 345 Mẫu câu bắt đầu
hội thoại
khoảng, 410–413
Mẫu Kết hợp Biên tập và, 400 Mẫu Đăng
lại và Nhận xét và, 408 nguyên tắc truyền
thông xã hội và, 395 Cooper, Alan, 272,
363
Cooper, Anderson, 404
quan điểm phối hợp, được xác định, 313
coplot, được xác định, 335
trang web copyblogger
Mô hình kim tự tháp Nano ngược và, mô
hình 414 Liên kết xã hội và, 424, 425 mô
hình Xử lý góc
về, 498, 507–509
ứng dụng máy tính để bàn và,
497 họa tiết hình ảnh lặp lại, 496
băng chuyền Cover Flow, 218 trang
web Craigslist, 90, 92 dịch vụ cộng
đồng, 411, 435 Crumlish, Christian,
394 Csikszentmihalyi, Mihaly, 14
trang web CSS Zen Garden
góc và đường cong, 492 màu sắc
trong thiết kế trực quan, 489
tài liệu tham khảo văn hóa trong thiết kế trực quan, 495
 Mục lục531

Mẫu Hairlines và, 514 hình ảnh trong Mô hình trạng thái liên kết sâu
thiết kế trực quan, 494 rộng rãi và đông khoảng, 101–103
đúc, 492 kết cấu và nhịp điệu, 493, 494 cân nhắc điều hướng, 84
kiểu chữ trong thiết kế trực quan, 491 Mẫu Đề xuất cá nhân và, 22 hiển thị một
phong cách trực quan và, 479–487 điều duy nhất, 27
Mẫu lựa chọn hoãn lại
Trang web CulinaryCulture.com, 370, 371 tài liệu tham khoảng, 12
khảo về văn hóa trong thiết kế trực quan, 495 Prospective Memory pattern and, 19
Trang web ngon
trí tuệ tập thể và, 394 mẫu Trạng thái
liên kết sâu và, 101 mẫu Tiện ích chia sẻ
Trang web Dakine, 512
và, 427 mẫu Liên kết xã hội và, 424 mẫu
mẫu bảng điều khiển
Luồng chuyên biệt và, thư viện mẫu 422
khoảng, 46–49
Design For Mobile, xix, 446 ứng dụng
thông tin bổ sung, 49 mẫu
máy tính để bàn, thiết kế trực quan và,
Movable Panels và 168 mẫu
Data Brushing
496–498
về, 291, 294, 295, 312–315 mẫu
Chi tiết hoa văn khảm, 209 hoa
Truy vấn động và, 309 thứ
văn Cân bằng đường chéo
nguyên dữ liệu
về, 141, 176–178
biến ưu tiên và, 286 Mẫu bội số
cân nhắc về bố cục trang, 137 mẫu
nhỏ và, 332–335 Mẫu sơ đồ cây và,
Lớp phủ hộp thoại, 209 mẫu Lớp phủ
336–340
hộp thoại, 100 trang web Digg
các mẫu trình bày dữ liệu.Xem thêmthông tin
đồ họa
Mẫu Dòng tin tức và, 36 Mẫu
Data Brushing, 291, 294, 295, 312–315
phân trang và, 226 Mẫu Tiện ích
Data Spotlight, 294, 303–307
chia sẻ và, 427 nguyên tắc truyền
Datatips, 294, 299–303
thông xã hội và, 395 Mẫu sơ đồ
Truy vấn động, 291, 308–311 Thu phóng
cây và, 340
cục bộ, 288, 295, 316–320 Đồ thị đa trục,
quan sát trực tiếp, 5
283, 328–331 Tổng quan cộng với chi
Mẫu Điều hướng Thư mục, 94
tiết, 288, 296–299 Bảng xuyên tâm, 283,
khuyết tật, thiết kế trực quan và, 497
323–327
Trang web Dopplr, 378, 379
Bội Số Nhỏ, 332–335 Bảng Có Thể Sắp
nhấp đúp vào các mục, 241
Xếp, 283, 290, 320–322 Sơ Đồ Cây,
thao tác kéo và thả, 242 kỹ
283, 336–340
thuật truy sâu
Bàn Cây, 283
cân nhắc đồ họa thông tin, 288 mẫu
Mẫu tiêu điểm dữ liệu
Treemap và, 338
về, 294, 303–307
Mẫu trình chọn thả xuống
Mẫu Datatips và, mẫu 301
về, 356, 380–383
Bảng xuyên tâm và mẫu 325
thiết kế biểu mẫu và mẫu 353,
Datatips
355 Công cụ di chuột và 252
về, 294, 299–303
menu thả xuống
Mẫu bảng điều khiển và, 46 mẫu
kết xuất phổ biến, 240
Data Spotlight và, 303, 304 Mẫu
Mẫu Công cụ di chuột và mẫu 250
thu phóng cục bộ và 317 Lịch
Mục menu thông minh và 262 trang
DateLens, 316, 318
web Drupal.org
điều khiển ngày/giờ,
Mẫu Bố cục lỏng và, 188 Mẫu
mẫu Nền sâu 355
phân trang và, 227 Mẫu Giao diện
về, 498, 499–503
và Chủ đề và, 521 thời gian dừng,
ứng dụng máy tính để bàn và, 497
424
532Mục lục
chỉ báo động, 125 mẫu
Truy vấn động
về, 291, 308–311
Data Brushing pattern và, 312
Radial Table pattern và, 325
Treemap pattern và, 337
trang web ebay
Mẫu điền vào chỗ trống và, 363, 364
Mẫu phân trang và, 227
Trang web Ecoki, 502
Mô hình kết hợp biên tập
khoảng, 399–402
Mẫu Đăng lại và Nhận xét và, 407 nguyên
tắc truyền thông xã hội và, 395 Dự án
Eigenfactor, 326
Cơ sở tìm kiếm gia tăng của Emacs, 229
ứng dụng email
Mẫu tự động hoàn thành và mẫu Bảng xếp
hạng nội dung 375, 377 và mẫu Định dạng tha
thứ 434, 435 và mẫu 359
Mẫu Danh sách vô hạn và mẫu Gợi ý đầu
vào 462, 463, 464 và mẫu Trình tạo danh
sách 366, 368 và mẫu 383
Mẫu Hàng mục mới và, 236 mẫu Truy vấn chi
tiết một cửa sổ và, 202 mẫu Máy đo độ mạnh
mật khẩu và, 371 mẫu Ứng dụng được kết
nối phong phú và, 472,
473
Mẫu Widget chia sẻ và, 427 mẫu Mục
menu thông minh và, 261 mẫu Liên
kết xã hội và, 424 mẫu Chiến lược
thời gian và, 417 mẫu Bộ chọn hai
bảng và 200 trang web EMS, 30, 32
mã hóa
xác định, 286
ví dụ, 287
Mẫu bội số nhỏ và, 332 Mẫu
sơ đồ cây và, 337
Trang web Engadget, 435, 436
EngagementDB, 422
trang web sử thi
Biên tập Mẫu kết hợp và, 398 mẫu
Đường viền hào phóng và, 466
thông báo lỗi, 388–392
Mẫu Escape Hatch
về, 78, 104–106
cân nhắc thiết kế, 11
Mẫu Bảng điều khiển phương
thức và, 98 cân nhắc điều hướng,
84 mẫu Wizard và, 57
trang web ESPN
Mẫu cuộn phim và, 453 Mẫu ngăn
xếp dọc và, 450, 451 Excel
(Microsoft).Nhìn thấyMicrosoft Office
các ứng dụng
trang web Facebook
thông tin cơ bản, 393 mẫu Người bắt đầu
cuộc trò chuyện và, 411 mẫu Kết hợp biên
tập và, 398, 399, 401 mẫu Danh sách vô
hạn và, 463
Mô hình kim tự tháp Nano ngược và, 413,
415
Mẫu Luồng tin tức và, 34, 35, 38, 39, 68
mẫu Đề xuất cá nhân và, 23 mẫu Đăng lại
và Nhận xét và, 408 Mẫu Ứng dụng được
kết nối phong phú và, 471,
472
Cài đặt Mẫu trình chỉnh sửa và, 62 Mẫu Tiện
ích chia sẻ và, 426, 427, 428 Mẫu Liên kết xã
hội và, 424–426 nguyên tắc truyền thông xã
hội và, 395
Mẫu Luồng chuyên dụng và, 419–423,
420
Mẫu Lưới hình thu nhỏ và, 214 Mẫu
Chiến lược thời gian và, duyệt theo khía
cạnh 416–418, 122
Trang web Fandango, 475
Mẫu Fat Footer, mẫu
114 Fat Menus
khoảng, 106–109
cân nhắc điều hướng, mẫu Chân trang 81,
85 Sơ đồ trang web và mẫu Tính năng,
Tìm kiếm và Duyệt qua 110, 111
khoảng, 29, 31–33
hiển thị danh sách các sự
vật, 28 cơ chế phản hồi, 396
mẫu Ít Màu sắc, Nhiều Giá trị
về, 504–506
màu sắc trong thiết kế trực quan,
489 Vài, Stephen, 49
Trang web Fidelity.com, 447
mẫu Điền vào chỗ trống
về, 356, 362–364
Mẫu Truy vấn động và, thiết kế
biểu mẫu 310 và, 354
 Mục lục533

mô hình cuộn phim Máy đo độ mạnh mật khẩu, 342, 371–374

về, 448, 452–453 Thông báo lỗi cùng trang, 342, 388–392 Định
Mẫu băng chuyền và, 217 dạng có cấu trúc, thiết kế biểu mẫu 342, 356,
bộ lọc 360–361
Hỗ trợ Adobe Bridge, 42 điều hướng các yếu tố lựa chọn kiểm soát, 343, 344–355 biểu
và, 287–288 Mẫu Mục menu thông mẫu người gác cổng, 357
minh và 262 xem dữ liệu có chọn lọc, nguyên tắc của, 341–343
291–293 ống kính mắt cá, 316, 317 Mẫu nút “Xong” nổi bật và, 258 kiểm tra khả
năng sử dụng và, 343
Ví dụ về Fitbit, 45 Công thức Thiết kế Thông tin, 221
danh sách phẳng, 216 Trang web Foursquare
mô hình điều hướng phẳng, 83 trí tuệ tập thể và, 394 Data
trang web Flickr Brushing pattern và, 314 Trang
thông tin cơ bản, 393 giao diện web truyền thông FriendFeed, 35
duyệt web, 42, 43 Mẫu băng mô hình điều hướng được kết nối đầy đủ, 81
chuyền và 218 Mẫu quét dữ liệu
và 314 Mẫu trình tạo danh sách
và 384 Mẫu chỉ báo tải và 469
Gamma, Erich, xix
Mẫu hộp tin tức và 432
Ứng dụng GarageBand, 242–244 biểu
mẫu người gác cổng, 357
Mẫu Lời khuyên của Người khác và, 21
Mô hình Đường viền hào phóng, 465–466
Mẫu Phân trang và, 227
nguyên tắc Gestalt
Mẫu Trình quản lý Ảnh và, 44
về, 139
Mẫu Chỉ báo Tiến độ và, 267
Mẫu Nhóm nút và, 246 cân nhắc về đồ
Mẫu Kim tự tháp và, 95
họa thông tin, cân nhắc về bố cục trang
Mẫu Công cụ đăng nhập và 115 Mẫu
283–287, 134, 136 Mẫu Căn chỉnh Phải/
Chân trang Sơ đồ trang web và 114
Trái và, 174 Mẫu Sọc Hàng và, 221
Mẫu Liên kết xã hội và 424 Mẫu Luồng
chuyên biệt và 422 Mẫu Chiến lược thời
Trang web Bảo tàng Getty, 509
gian và 417 Fling, Brian, 443
điều hướng toàn cầu
xác định, 80
dòng chảy, trạng thái, 14, 278
Mẫu Fat Menus và 107 mẫu
phông chữ.Nhìn thấykiểu chữ trong thiết kế trực quan
Liquid Layout và 85 trang
Trang web của Ford
web Gmail
Mẫu Hộp tin tức và mẫu 433 Liên
Mẫu Danh sách vô hạn và mẫu Gợi ý đầu vào
kết xã hội và mẫu Định dạng tha
463, 464 và mẫu Máy đo độ mạnh mật khẩu
thứ 425, 426
366 và mẫu Công cụ đăng nhập 371 và mẫu
về, 356, 357–359
116
thiết kế biểu mẫu và mẫu Gợi ý đầu vào 352,
Mẫu Mục Menu Thông minh và, 262,
355 và mẫu Thông báo lỗi cùng trang 365 và
263 chủ đề ứng dụng Gnome., 496 Mẫu
mẫu Định dạng có cấu trúc 389 và mẫu kiểm
Mặc định Tốt
soát và biểu mẫu 360
về, 356, 385–387
mẫu Lựa chọn hoãn lại và, 13
Tự động hoàn thành, 356, 375–379
thiết kế mẫu và, 342
Bộ chọn thả xuống, 356, 380–383
Mẫu Gợi ý Nhập và, 365 Mẫu Dấu nhắc
Điền vào chỗ trống, 356, 362–364
Nhập và, 370 Mẫu Hàng Mục Mới và,
Định dạng bỏ qua, 356, 357–359 Mặc
237 Mẫu Thông báo Lỗi Cùng Trang và,
định tốt, 342, 356, 385–387 Gợi ý đầu
389 Mẫu Thuật sĩ và, 57
vào, 342 , 356, 364–368 Dấu nhắc
nhập, 356, 369–371
Trang web hay, 511, 512
Trình tạo danh sách, 356, 383–384
534Mục lục

trang web Google

Mẫu Tự động hoàn thành và 378
Mẫu thói quen, mẫu 14–
Mẫu Điều hướng Dưới cùng và 457
15 Hairlines
Mẫu Kết hợp Biên tập và 401, 402
về, 498, 513–515
Mẫu Phân trang và 226
kết cấu và nhịp điệu trong, 493
Mẫu Giọng nói cá nhân và mẫu Luồng
Hanks, Tom, 413
chuyên biệt 405, 406 và mẫu Nút xóa văn
Trang web của Hanna Andersson
bản 420, 422 và mẫu Danh sách văn bản và
Mẫu Thông báo lỗi cùng trang và, 391
hình thu nhỏ 468 và mẫu 461 Google
Mẫu Bản đồ trình tự và, 118
Analytics 48, 49
Mẫu lưới hình thu nhỏ và, 210, 214
sách Google
Helm, Richard, xix
Mẫu băng chuyền và 217 Mẫu trạng
Henry, Ed, 404
thái liên kết sâu và 102 Google Tài
Trang web HermitageMuseum.org, trang
liệu
web của 513 Hive Group
Mẫu Nhóm nút và, 246 mẫu Vùng trung
Mẫu Truy vấn động và, 310 Mẫu
tâm và, 147 mẫu Bố cục lỏng và, 188, 189
sơ đồ cây và, 340
mẫu Tiết lộ đáp ứng và, 181, 182 trình
Home Link pattern, 106
soạn thảo văn bản, 147
Hong, Jason I., xix
Trang web hotmail, 368
Google Tài chính, 298
Mẫu công cụ di chuột
Google Hình ảnh
khoảng, 249–252
Mẫu Điều hướng dưới cùng và, 458
Mẫu Bảng điều khiển hành động và,
Mẫu thu phóng cục bộ và, 318, 319
253 kết xuất phổ biến, 241
Mẫu lưới hình thu nhỏ và, 214 Google
Mẫu Gợi ý Nhập và, 367 Mẫu
Labs, 105
Trợ giúp Đa Cấp và, 72 Hsieh,
bản đồ Google
Tony, 402, 403
Mẫu Chế độ xem thay thế và, 64 mẫu Bảng
mô hình điều hướng trục và nan hoa, 80
điều khiển có thể thu gọn và, 163, 165 Mẫu
Trang web Huffington Post, 423
Datatips và, 302
Trang web Hulu, 150, 227
Mẫu Escape Hatch và, 105
hành vi của con người.Xem thêmmẫu hành vi
cân nhắc điều hướng, 288
khoảng, 8–9
Google Tin tức
kiến thức cơ bản về nghiên cứu người
Mẫu News Stream và, 36, 38
dùng cho, 4–6 động lực học hỏi và, 6–8
Mẫu Treemap và, 339
cách sử dụng công cụ và, 2–3, 7–8
Mẫu ngăn xếp dọc và, 449
Google Public Data Explorer
Mẫu Data Spotlight và mẫu 303
Truy vấn động và 308 Google IA (kiến trúc thông tin)
Reader xác định, 25
Liệt kê mẫu Inlay và, 207, 208 hiển thị danh sách, 192

mẫu News Stream và, 38, 39 iBird Explorer, 461

Google Trends, 329
Mô hình lưới của Equals
về, 140, 149–152
liệt kê các cân nhắc hiển thị, 195
họa tiết trực quan lặp lại và 496
mẫu Lưới hình thu nhỏ và 211 trang
web Grooveshark
Mẫu Công cụ di chuột và mẫu Chỉ báo
tiến trình 250, 251 và mẫu 268 Gunn,
Tim, 410
Tập đoàn IBM
Mẫu Grid of Equals và, 152 Dự án
nhiều mắt, 102, 103, 301, 302 Mẫu
giọng nói cá nhân và, 405, 406
iGoogle, 170, 171
Minh họa (Adobe)
Mẫu Chế độ xem thay thế và mẫu 65, 66
Mục menu thông minh và mẫu Trình
duyệt hình ảnh 262 mẫu 45

hình ảnh
làm nền, 502
cân nhắc thiết kế trực quan, trang web
494, 497 IMDb
Mẫu Đường viền hào phóng và, 466 mẫu Lời khuyên
của những người khác và, 21 mẫu Danh sách hình
thu nhỏ và văn bản và, 460,
461
Mô hình xây dựng gia tăng
về, 14
Mẫu Truy vấn động và, 309 mẫu
Hoàn tác đa cấp và 272 chỉ báo
năng động, 125
Mẫu Chỉ báo Đang tải và, 468–470
Mẫu Chỉ báo Tiến trình và, 245,
266–268
tĩnh, 125
Mẫu danh sách vô hạn
khoảng, 462–464
thiết kế thiết bị di động và,
448 mẫu Dòng tin tức và, 36
kiến trúc thông tin (IA)
xác định, 25
hiển thị danh sách, 192
đồ họa thông tin.Xem thêmdữ liệu
mẫu trình bày
về, 294
truy cập các giá trị cụ thể, 293–294 được
xác định, 281
cân nhắc thiết kế, 282 Nguyên
tắc Gestalt, 283–287 điều hướng
và duyệt, 287–288 mô hình tổ
chức, 282
biến ưu tiên, 283–287 tìm kiếm và lọc,
291–293 sắp xếp và sắp xếp lại dữ liệu,
289–291 mục tiêu của người dùng, 282
trực quan hóa thông tin
thông tin bổ sung, 299 câu thần chú
“tập trung cộng với bối cảnh”, 287
mô hình tổ chức, 282 đồ họa hướng
tâm và, 324
cơ sở hạ tầng, 256
điều hướng nội tuyến, 80
Mẫu Thông báo Lỗi Đầu vào, 391
Mẫu Phản hồi Đầu vào, 391 Mẫu
Gợi ý Nhập
về, 356, 364–368
Mẫu định dạng tha thứ và, 358
Mục lục535
thiết kế biểu mẫu và, 342, 353, 354 mẫu Dấu
nhắc Nhập liệu và, 369 mẫu Trợ giúp Đa Cấp
và, 72, 74 mẫu Máy đo Độ mạnh Mật khẩu và,
372,
373, 374
cung cấp các công cụ để tạo mọi thứ, 29
mẫu Thông báo lỗi cùng trang và 389 mẫu
Định dạng có cấu trúc và 360
Mẫu dấu nhắc đầu vào
về, 356, 369–371
Mẫu định dạng tha thứ và, 358
thiết kế mẫu và, 353, 354
Mẫu Gợi ý nhập và mẫu Trợ giúp đa
cấp 365 và mẫu Hàng mục mới 72,
74 và mẫu Thông báo lỗi cùng trang
237 và,
389, 391
Mẫu Định dạng có cấu trúc và
mẫu 361 Sự hài lòng tức thì
khoảng 10
Mẫu trợ giúp đa cấp và, 72 thiết kế
giao diện.Xem thêmmẫu cụ thể
truy cập các giá trị dữ liệu cụ thể, khả năng chi
trả 293–294, 244
kiến thức cơ bản về nghiên cứu người dùng,
4–6 cơ sở của, 1
cân nhắc về đồ họa thông tin, 282 cân
nhắc về điều hướng, 85
ảnh hưởng tích cực trong, 477
tiết lộ tiến bộ, 107, 164 khuyến
nghị, 244
sử dụng công cụ và, 2–3, 7–8 hiểu động
cơ học hỏi, 6–8 ngăn xếp hoàn tác, 273
phong cách trực quan và,
478 thành ngữ giao diện, xvi
Mô hình kim tự tháp Nano ngược
về, 413–415
Mẫu Hộp tin tức và, 431 nguyên tắc
truyền thông xã hội và, 396 Ống kính
Inxight Table
Mẫu Thu phóng Cục bộ và, 317, 318
Mẫu Bảng có thể sắp xếp và, 321, 322
iPad (Apple), 88
điện thoại Iphone
Mẫu cuộn theo thứ tự bảng chữ cái và, 231
mẫu Tự động hoàn thành và, 378 mẫu Dải
phim và, 452, 453 Mẫu Đường viền rộng
rãi và, 465, 466 Mẫu Danh sách vô hạn và,
462, 463
536Mục lục

điện thoại Iphone (tiếp tục)

Liệt kê mẫu Inlay và, 209

Trang web KaleidoscopeApp.com, trang
Đang tải mẫu Chỉ báo và, 468, 469,
web 518 Kayak
470
Mẫu tự động hoàn thành và, 378 Mẫu
Mẫu Truy vấn chi tiết một cửa sổ và, 202 mẫu
mặc định tốt và, 385, 387 Mẫu lớp phủ
Ứng dụng được kết nối phong phú và, 470,
danh sách và, 206
472, 473
Mẫu Bảng điều khiển phương thức và, 99
Mẫu Nút Xóa Văn bản và, 467 Mẫu Danh sách
Mẫu phân trang và, 227 Mẫu nút “Xong” nổi
Hình thu nhỏ và Văn bản và, 459,
bật và, 259,
460, 461
260
Mẫu Lưới hình thu nhỏ và mẫu 214
Responsive Disclosure pattern và 181
Phần có tiêu đề và mẫu Công cụ cảm
Keyboard Only pattern
ứng 154, 155 và ứng dụng iPhoto
khoảng 20
454, 455
Mẫu Trình quản lý ảnh và mẫu
Mẫu Bảng điều khiển hành động và giao
Bộ chọn hai bảng 40, 41 và 199
diện duyệt 252, 255, 42
phím tắt
itunes
kết xuất phổ biến, 241
Mẫu Nhóm nút và, 247, 248 Băng
Mẫu macro và, 278 Trang web
chuyền Cover Flow, 218
Kitchen Table Math, 438–440 Trang web
Mẫu Danh sách vô hạn và mẫu
Kobo, 460, 461
463 Row Striping và mẫu Công cụ
Krug, Steve, 11 tuổi
đăng nhập 222 và mẫu Bảng có
thể sắp xếp 117 và ứng dụng
iWeb 320
Mẫu Trình chọn thả xuống và, 382 nhãn
mẫu Tab Mô-đun và, 158 thiết kế biểu mẫu và, 356
cân nhắc đồ họa thông tin, 293 Mẫu
Căn chỉnh Phải/Trái và, 356 Landay,
James A., xix
Trang web JAQK, 141
Trang web Last.fm, 227
Trình đọc màn hình JAWS, 498
phân lớp, xác định, 286
trang web JetBlue
lưới bố cục, đã xác định,
Mẫu xử lý góc và, 507, 508 thiết kế thiết
143 lười tải, 463
bị di động và, 446, 447 Mẫu Nút “Xong”
huyền thoại (đồ họa thông tin), 293
nổi bật và, 259,
Trang web của Levi, 425
260
Hệ thống định vị Lexus, hiệu ứng hộp
Mẫu phân chia hàng và, 220, 222 mẫu Nhãn
đèn 184, 185, 98
hiệu được sắp xếp hợp lý và, 474, 475 mẫu
Mẫu Bội số được Liên kết, 315 chế độ
Phần có tiêu đề và, 152
xem được liên kết, đã xác định, 313
Mẫu Visual Framework và, 143, 144
mẫu Bố cục Chất lỏng
Johnson, Joshua, 152
về, 141, 186–190
Johnson, Ralph, xix
điều hướng chung và 85 Mẫu thu
Trang web JonBrousseau.com, 518
phóng cục bộ và 317 Mẫu ngăn
mẫu Chuyển đến Mục
xếp dọc và 450 Mẫu trình tạo
khoảng, 228–229
danh sách
Mẫu cuộn theo thứ tự chữ cái và,
về, 356, 383–384
230 đồ họa thông tin và, 295
thiết kế biểu mẫu và, 349
xem dữ liệu có chọn lọc, 292
danh sách hiển thị
về, 197
Mẫu Danh sách vô hạn và, 462–464

Mẫu Radial Table và, 323–327 đặc
điểm nổi bật, 192–194 chọn điều khiển
cho, 345–355 mẫu Danh sách hình thu
nhỏ và văn bản và,
459–461
liệt kê các mẫu hiển thị
Cuộn theo thứ tự chữ cái, 230–231
Carousel, 195, 215–219
Danh sách Xếp tầng, 197, 232–234
Chuyển đến Mục, 228–229
List Inlay, 194, 206–209 Hàng
vật phẩm mới, 237–238
Xem chi tiết một cửa sổ, 194, 202–205
Phân trang, 224–227
Sắp xếp hàng, 195, 220–224 Bảng
có thể sắp xếp, 197
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>
Lưới hình thu nhỏ, 195, 210–215
Bảng cây, 197, 235–236
Bộ chọn hai bảng, mẫu Lớp phủ
danh sách 198–201
khoảng, 206–209
Mẫu Công cụ di chuột và, 250 cân nhắc
hiển thị danh sách, 194 mẫu Dòng tin tức
và, 36 mẫu Truy vấn chi tiết một cửa sổ và,
202,
203
Mẫu Bộ chọn hai bảng và, trang web
200 LiveJournal, 361
Mẫu Xem trước trực tiếp, mẫu Chỉ
báo tải 266, mẫu Thu phóng cục bộ
468–470
về, 295, 316–320
Mẫu chú giải dữ liệu và, 300
cân nhắc điều hướng, 288
Lockwood, Lucy, 274
logo
có thể nhấp được trên các trang web, 105 mẫu Chỉ số
tải và, 469 mẫu Thương hiệu được sắp xếp hợp lý và,
474–476 Trang web của Los Angeles Times, 112
Trang web Lulu, 32
hệ điều hành Mac
Mẫu Bảng hành động và, 254 Mẫu Tự động
hoàn thành và, 377, 378 Mẫu Khả năng hủy
bỏ và, 270, 271 Mẫu Danh sách xếp tầng và,
197, 232, 233
Mục lục537
Mẫu Nền sâu và, 501 ứng dụng máy tính để
bàn và thiết kế trực quan, 496 mẫu Chuyển
đến Mục và, 228
Mẫu Bố cục chất lỏng và mẫu 186, 187 Thu
phóng cục bộ và mẫu Bảng điều khiển
phương thức 318, 319 và mẫu Tab mô-đun
99, 100 và mẫu Trợ giúp đa cấp 158 và mẫu
73 Chi tiết một cửa sổ và mẫu Chỉ báo tiến
trình 202 và mẫu , 266 Mẫu Kích hoạt
Responsive và, 184 Mẫu Căn chỉnh Phải/Trái
và, 173, 175 Mẫu Trình chỉnh sửa Cài đặt và,
59
Mẫu Mục Menu Thông minh và,
261 Mẫu Lưới Hình thu nhỏ và,
212 Mẫu Bảng Cây và, 234
Mẫu Bộ chọn hai bảng và, 198 kiểu
chữ trong thiết kế trực quan, 491
ứng dụng MacPaint, 53
bài đọc vĩ mô và vi mô, mẫu
296 Macro
về, 245, 278–280
Mẫu lặp lại được sắp xếp hợp lý và, 19
Malone, Erin, 394
Dự án Many Eyes (IBM), 102, 103, 301, 302 Mẫu
nhiều không gian làm việc
khoảng, 30, 68–70
Các thay đổi về mẫu Giữa dòng và,
12 mẫu Dòng tin tức và, 35
Mô hình Bộ nhớ Triển vọng và, 19 cung
cấp các công cụ để tạo ra mọi thứ, 28 hiển
thị một thứ duy nhất, 27
Trang web MapQuest
Mẫu Grid of Equals và 151 mẫu Tab Mô-đun
và 155 mẫu Chân trang Sơ đồ trang web và
114 bản đồ.Xem thêmBản đồ Google; Bản
đồ trình tự
mẫu; Mẫu sơ đồ cây Mẫu
chuyển tiếp hoạt hình và, 127 cân
nhắc điều hướng, 78
kỹ thuật pan-and-zoom và, 82 Trang
web của Marriott, 215
trang web có thể trộn
Mẫu Bảng xếp hạng nội dung và mẫu Danh sách
vô hạn 435, 437 và mẫu 463, 464
Mẫu Đăng lại và Nhận xét và, 406
Mẫu Tiện ích chia sẻ và, 428, 429 Mẫu
Liên kết xã hội và, 425
Mẫu Danh sách hình thu nhỏ và văn bản và, 460
538Mục lục
ứng dụng MATLAB
Mẫu Lịch sử Lệnh và, 275 mẫu
Bảng Di chuyển và, 172 mẫu Trợ
giúp Đa Cấp và, 73 Mẫu Đồ thị Đa
Y và, 330 mẫu Lời khuyên của
Người khác và, 21 thanh menu
kết xuất phổ biến, 240
Mẫu Công cụ di chuột và mẫu 250
Mục menu thông minh và mẫu 262
Trang menu
khoảng, 90–94
Liệt kê mẫu Inlay và, 207 mẫu điều
hướng cho, 80 mẫu One-Window
Drilldown và, 203 mẫu Settings Editor
và, 63
Mẫu Bộ chọn hai bảng và, 200 trang
web của Mercedes-Benz, mẫu 502, 503
Dấu ngắt vi mô
khoảng, 16
thiết kế thiết bị di động và, 444
mẫu News Stream và, 35
Microsoft Corporation
Mẫu Fat Menus và, 106 mẫu Định dạng
tha thứ và, 359 mẫu Trình tạo danh sách
và, 383 mẫu Liên kết xã hội và 425, 426
mẫu Luồng chuyên biệt và 422, 423
Microsoft Money 2000, 497
Các ứng dụng Microsoft Office
Mẫu đàn accordion và mẫu 159 Chế độ
xem thay thế và mẫu Thanh cuộn được
chú thích 65, 66 và mẫu Nhóm nút 125 và
mẫu Bộ chọn thả xuống 247, 248 và mẫu
Điền vào chỗ trống 380, 382 và mẫu Gợi ý
đầu vào 363 và mẫu , 365, 366
Mẫu macro và mẫu Thẻ mô-đun
279, 280 và mẫu Hoàn tác đa cấp
157 và mẫu Hàng mục mới 275 và
mẫu Xem trước 236, 238 và mẫu
263
Mẫu phân chia hàng và, 222
Mẫu thuật sĩ và, 58
Trang web Mini Cooper
Mẫu Cân bằng Đường chéo và, 178
bộ cấu hình sản phẩm, 119
Mẫu Bản đồ Trình tự và, 119
Trang web Mint.com
Mẫu Ít sắc độ, Nhiều giá trị và mẫu
Thông báo lỗi cùng trang 503, 504 và,
389, 390
Mẫu Công cụ đăng nhập và,
116 Mẫu thuật sĩ và, 57
Trang web MIT, 91, 92
thiết bị di động
thông tin thiết kế bổ sung, 446 Mẫu
tự động hoàn thành và, 376 phương
pháp thiết kế, 443–446 thách thức
thiết kế, 442–448
cân nhắc thiết kế, 441 ví dụ thiết
kế, 446–447 tổng quan về mẫu
thiết kế, 448 Mẫu Nhiều Không
gian làm việc và, 70 Mẫu Trang
Menu và, 90
cân nhắc điều hướng, 80 tổ
chức nội dung và 27 mẫu Lưới
hình thu nhỏ và 214 mẫu thiết
bị di động
Điều hướng dưới cùng, 448, 457–458
Dải phim, 448, 452–453
Biên giới hào phóng, 465–466
Danh sách vô hạn, 462–464
Đang tải các chỉ số, 468–470 Ứng dụng được
kết nối phong phú, 470–473 Thương hiệu
được sắp xếp hợp lý, 474–476 Nút xóa văn
bản, 467–468 Mẫu danh sách hình thu nhỏ và
văn bản và,
459–461
Touch Tools, 448, 454–456 Vertical
Stack, 445, 448, 449–451 Trang web
Mochimedia, 511
Mẫu bảng điều khiển phương thức
khoảng, 78, 97–100
Các thay đổi trong mẫu Midstream và,
12 mẫu Escape Hatch và, 104
thiết kế biểu mẫu và, 357
cân nhắc điều hướng, 83, 84, 105 Mô
hình kim tự tháp và, 96
Mẫu Tab mô-đun
khoảng, 156–159
Mẫu đàn accordion và, 160 mẫu Bảng
màu Canvas Plus và, 51 mẫu Bảng điều
khiển có thể thu gọn và 164 mẫu Bảng
xếp hạng nội dung và 435 mẫu Bảng di
động và 172 cân nhắc điều hướng, 79
cân nhắc về bố cục trang, 136, 140
mẫu Phần có Tiêu đề và, 154 mẫu
Visual Framework và 143 Trang web
Mothering.com, 227
động cơ học tập, 6–8

Mô hình tấm di động
khoảng, 168–173
Mẫu đàn accordion và, 160 mẫu Bảng
điều khiển hành động và, 254 mẫu Bảng
điều khiển có thể thu gọn và, 164 mẫu
Bảng điều khiển và, 46, 47 mẫu Thẻ mô-
đun và, 156 cân nhắc bố cục trang, 140
mẫu Bộ nhớ không gian và, 17 trang
web MSNBC, 124
Trang web MSN, 373, 374
Cá đối, Kevin, 177
Mẫu trợ giúp đa cấp
khoảng, 30, 71–76
Mẫu Lời khuyên của người khác và 22
động lực học hỏi của người dùng và 8
mô hình điều hướng đa cấp, 81 mẫu Hoàn
tác đa cấp
về, 245, 271–275
Mẫu Lịch sử Lệnh và, 276, 277 Mẫu
Macro và, 278
Mẫu Khám phá An toàn và,
10 Mẫu Đồ thị Đa Y
khoảng, 328–331
mô hình tổ chức cho, trang
web 283 Museum of Modern Art
Đường viền Đó Echo Mẫu Phông chữ và, 509
Mẫu Trang Menu và, 93
trang web MySpace
Chia sẻ mẫu Widget và, 427 Mẫu
Luồng chuyên biệt và 422 Mục
menu bị làm mờ một cách bí ẩn, 184
Trang web của Viện Ung thư Quốc gia, 289
Ủy ban Điện ảnh Quốc gia Canada, 517 đầu
ra ngôn ngữ tự nhiên, 363
dẫn đường
Mẫu Điều hướng dưới cùng và, 457–458 chi
phí nhận thức, 78
các kỹ thuật phổ biến, 287–288
manh mối về môi trường và, 78
bản đồ và, 78
chi phí thực hiện, 79
vô hiệu hóa đáp ứng, 184
biển báo và, 78
biển chỉ dẫn và, 77
tìm đường và, 78
cân nhắc thiết kế trang web, 85
Mục lục539
mô hình điều hướng
khoảng, 86
Chuyển tiếp Hoạt hình, 86, 127–129 Thanh
cuộn được chú thích, 77, 86, 124–126
Breadcrumbs, 77, 86, 121–123 Xóa điểm
vào, 78, 83, 84, 87–89 Trạng thái liên kết
sâu, 84, 101–103 Cửa thoát hiểm, 78, 84,
104–106
Menu béo, 81, 85, 106–109 Trang menu,
80, 90–94 Bảng điều khiển phương thức,
78, 83, 84, 97–100 Tổng quan cộng với chi
tiết, 78
Kim tự tháp, 82, 94–96
Bản đồ trình tự, 77, 78, 86, 118–120
Công cụ đăng nhập, 85, 115–117
Sơ đồ trang web Footer, 81, 85, 110–
114 mô hình điều hướng
điều hướng kết hợp, 80, 85
dấu trang, 84
cửa thoát hiểm, 84
phẳng, 83
kết nối đầy đủ, 81
điều hướng toàn cầu, 80, 85, 107
trục và nan hoa, 80
điều hướng nội tuyến, 80
bảng điều khiển phương thức, 83
đa cấp, 81
xoay và thu phóng, 82
kim tự tháp, 82
từng bước, 82
điều hướng tiện ích, 80, 115
Trang web NBA.com, 444
Neil, Theresa
Mẫu đàn accordion, 163
Lời mời phương tiện trống, 29
mẫu Bảng điều khiển, 49
Mẫu lớp phủ hộp thoại, 100 lớp phủ
danh sách, 209
Mẫu Live Preview, 266 Palette/bố
cục màn hình Canvas, 54 mẫu
chuyển tiếp, 129
các loại cấu trúc ứng dụng, 26
Mẫu thuật sĩ, 58
Trang web Netflix, 105, 388
Trang web Netvibes, 48
Trang web Newfangled.com, 147
Mẫu hàng vật phẩm mới
khoảng, 237–238
thiết kế biểu mẫu và, 349
540Mục lục
Mẫu hộp tin tức
khoảng, 430–434
Mẫu Trang Menu và, 91 cân
nhắc điều hướng, 85 mẫu Dòng
tin tức và, 35 nguyên tắc truyền
thông xã hội và, 397 ứng dụng
Bản đồ tin tức, 339 mẫu Dòng tin
tức
khoảng, 34–39
Mẫu Bảng xếp hạng nội dung và 435 Mẫu
Nhiều không gian làm việc và 68, 69 Mẫu
Đột phá vi mô và 16
hiển thị danh sách các sự vật, 28 nguyên
tắc truyền thông xã hội và, 395 mẫu
Chiến lược thời gian và, 417 trang web
của New York Times
Mô hình băng chuyền và, 219
Mẫu Bảng xếp hạng nội dung và mẫu 435,
436 Điền vào chỗ trống và mẫu 362 Định
dạng tha thứ và mẫu 358
Mẫu Đồ thị Multi-Y và, 328 Mẫu Tổng
quan cộng với Chi tiết và, 298 Mẫu Kim
tự tháp và, 95
NeXTSTEP File Viewer, 233, 234
Nielsen Norman Group, 446 Trang
web của Nike, 149, 150
Nokia (công ty), 465
Norman, Donald, 477
Trang web NPR, 457, 458
số, nhập theo mẫu, 352, 353
Trang web OneHourCourses.com, 259
mẫu Chế độ một lần, 51
Mẫu Drilldown một cửa sổ
khoảng, 202–205
Mẫu bảng điều khiển và, 46 cân nhắc hiển
thị danh sách, 194 mẫu Lớp phủ danh sách
và, 207 mẫu Luồng tin tức và, 36 mẫu Trình
quản lý ảnh và, 40–45 mẫu Trình chỉnh sửa
cài đặt và, 60 mẫu Bộ chọn hai bảng và, 199,
200,
201
cộng đồng trực tuyến
thương hiệu và, 394
Mẫu đường dẫn và, 123 nguyên tắc
truyền thông xã hội và, 397 trang web
OnlineMBARankings.com, 506 trang web
Oracle, 403
danh sách có thứ tự, xây dựng, 350
O'Reilly, Tim, 409
tổ chức nội dung.Xem thêmthông tin
đồ họa
khoảng, 25, 29–30
Mẫu Bảng xếp hạng nội dung và, 435 hỗ trợ
các nhiệm vụ đơn lẻ, 29
cân nhắc cấp cao, 26–29 cung
cấp công cụ cho, 28
hiển thị danh sách các thứ, 27 hiển
thị một thứ duy nhất, 27 cân nhắc
về mạng xã hội, 400 cân nhắc về
thiết kế sơ đồ cây, 337 mẫu nội
dung sắp xếp
Chế độ xem thay thế, 64–67
Bảng màu Canvas Plus, 50–54
Bảng điều khiển, 46–49
Tính năng, Tìm kiếm và Duyệt, 31–33 Nhiều
không gian làm việc, 68–70
Trợ giúp đa cấp, 71–76
Dòng tin tức, 34–39
Trình quản lý ảnh, 40–45
Trình chỉnh sửa cài đặt, 59–63
Pháp sư, 55–58
Mẫu Lời khuyên của Người khác, 21 Mẫu
Tổng quan Cộng với Mẫu Chi tiết
về, 78, 288, 296–299 Mẫu thanh cuộn
được chú thích và, 125 Mẫu thu
phóng cục bộ và, 317 Mẫu bản đồ
trình tự và, 118
Bố trí trang
khoảng, 140
màn hình động, 140
hiển thị các mối quan hệ thành phần, 134
luồng trực quan, 136–139
phân cấp trực quan, mẫu
bố cục trang 132–136
Đàn accordion, 136, 140, 159–163 Sân khấu ở
giữa, 140, 145–148 Bảng điều khiển có thể
gập lại, 140, 164–168 Cân bằng đường chéo,
137, 141, 176–178 Lưới bằng, 140, 149–152
Bố cục chất lỏng, 141, 186–190 Tab mô-đun,
136, 140, 156–159 Bảng điều khiển có thể di
chuyển, 140, 168–173 Tiết lộ đáp ứng, 140, 141,
179–182 Kích hoạt tính năng đáp ứng, 140, 141,
183–185 Căn chỉnh phải/trái , 137, 141, 173–175
Phần có tiêu đề, 140, 153–155
Khung trực quan, 140, 142–145
 Mục lục541

mẫu phân trang Mẫu Hành động Chính, 261 mẫu

khoảng, 224–227
hiển thị danh sách các thứ, 28 bố cục màn
hình Palette/Canvas, 54 mô hình điều hướng
xoay và thu phóng, 82 trang web Pandora
Mẫu Corner Treatments và, mẫu
Tiện ích chia sẻ 508 và trang web
428 Partners in Health, mẫu 418 Máy đo
độ mạnh mật khẩu
về, 356, 371–374
thiết kế mẫu và, 342 mẫu.
Xem thêmmẫu cụ thể
bộ sưu tập bổ sung, tổng
quan chung xix, gợi ý sử
dụng xviii, xxi
Trang web PayPal, trang web
cộng đồng 358, 359 Perl, mẫu Đề
xuất cá nhân 296
khoảng, 22
Chia sẻ mẫu Widget và 427 nguyên
tắc truyền thông xã hội và 396 mẫu
Tiếng nói Cá nhân
về, 403–406
Mẫu kết hợp biên tập và, 400 nguyên
tắc truyền thông xã hội và, 395 diện
mạo, 5
trình tự photostream, 95
ứng dụng Picasa
Mẫu đàn accordion và, 161 mẫu Bảng điều khiển
hành động và, 255 giao diện duyệt web, 42, 43
mẫu Truy vấn chi tiết một cửa sổ và, 204,
Bộ cấu hình Sản phẩm, 59 bộ cấu
hình sản phẩm
xác định, 59
Mẫu Bản đồ Trình tự và, 119
mẫu Chỉ báo Tiến độ
về, 245, 266–268
Mẫu hủy bỏ và, 269, 270 tiết lộ
lũy tiến, 107, 164 Mẫu nút “Xong”
nổi bật
về, 245, 257–261
thiết kế biểu mẫu và, 357
cân nhắc bố cục trang, 137
trang thuộc tính, 344
Mô hình bộ nhớ tiềm năng
khoảng, 18
Nhiều mẫu Không gian làm việc và, 69
độ gần (nguyên tắc Gestalt)
về, 139
Mẫu Bảng hành động và, 253 mẫu
Nhóm nút và, 246 cân nhắc về bố cục
trang, 134 mẫu Căn chỉnh Phải/Trái
và, 174 mẫu điều hướng kim tự tháp,
82 mẫu Kim tự tháp
khoảng, 94–96
cân nhắc điều hướng, 82 mẫu Truy vấn chi
tiết một cửa sổ và, 203 mẫu Tổng quan
cộng với chi tiết và, 298 mẫu Trình quản lý
ảnh và, 40, 41, 43

truy vấn.Nhìn thấyMẫu truy vấn động;

205
đang tìm kiếm
Mẫu xem trước và mẫu Bộ chọn
hai bảng 264, 265 và mẫu Trình
quản lý ảnh 201
khoảng, 29, 40–45 Mô hình bảng xuyên tâm
Mẫu Bảng điều khiển hành động và, 255 Mẫu khoảng, 323–327
truy vấn chi tiết một cửa sổ và, 204 Mẫu kim tự Data Spotlight pattern và, 306, 307
tháp và, 94, 95 diễn giải, 325
hiển thị danh sách các đối tượng, 28 mô hình tổ chức cho, 283 trang
mẫu Bộ chọn hai bảng và 201 menu web Ravelry, 203, 204 Trình soạn
bật lên thảo véc tơ Raven, 51, 52 sắp xếp lại
kết xuất phổ biến, 240 dữ liệu, 289–291 Mẫu trò chuyện gần
Mẫu Công cụ Hover và, 250 ảnh đây
hưởng tích cực, 477, 478 khoảng, 438–440
PowerPoint (Microsoft).Nhìn thấyMicrosoft Office cân nhắc điều hướng, 85
các ứng dụng Yahoo News! và, 439
biến cố định trước, 283–287, 313 Trang web Red Bull, 432
Mẫu xem trước, 245, 263–266 tài sản vào lại, 12
542Mục lục
Trang web Reimann, Robert,
272, 363 REI
Mẫu Người bắt đầu hội thoại và mẫu 411, 412
Đăng lại và Nhận xét và 408 Mẫu Chân trang
Sơ đồ trang web và 112
Mẫu ngăn xếp dọc và mẫu 450,
451 Đăng lại và Nhận xét
khoảng, 407–409
Mẫu Kết hợp biên tập và, 400 mẫu
Tiện ích chia sẻ và 427 nguyên tắc
truyền thông xã hội và 395 vô hiệu
hóa phản hồi, 184
Mẫu tiết lộ đáp ứng
về, 141, 179–182
cân nhắc bố cục trang, 140 Mẫu kích
hoạt đáp ứng và, 183 Mẫu bộ nhớ
không gian và, 17 Mẫu trình hướng
dẫn và, 57
Mẫu kích hoạt đáp ứng
về, 141, 183–185
cân nhắc về bố cục trang, 140 mẫu
Tiết lộ đáp ứng và, 180 mẫu Trình
hướng dẫn và, 56
Trang web RibbonsOfRed.com, mẫu 515 Ứng
dụng được kết nối phong phú, mẫu Căn chỉnh
trái/phải 470–473
về, 141, 173–175
thiết kế biểu mẫu và, 356
cân nhắc bố cục trang, mẫu
137 Row Striping
khoảng, 220–224
Mẫu bảng điều khiển và, 46, 47 đồ
họa thông tin và 295 cân nhắc hiển
thị danh sách, 195 nguồn cấp dữ
liệu RSS
Liệt kê mẫu Inlay và, 207 mẫu Dòng
tin tức và, 35, 38 mẫu Liên kết xã hội
và, 424, 425 nguyên tắc truyền
thông xã hội và, 395 thước kẻ (đồ
họa thông tin), 294 Trang web
RuthsChris.com, 446, 447
Mẫu thăm dò an toàn
khoảng, 9
Mẫu có thể hủy và, 269 Mẫu
Escape Hatch và, 104 Mẫu Nhiều
không gian làm việc và, 69 Mẫu
Hoàn tác đa cấp và, 272 Saffer,
Dan, 446, 465
Mẫu thông báo lỗi cùng trang
khoảng, 388–392
thiết kế biểu mẫu và, 342 mẫu Dấu
nhắc đầu vào và, 370 dự án Phát hiện
tội phạm ở San Francisco
Mẫu Data Spotlight và, 301, 304, 305
Mẫu Datatips và, 301
Mẫu truy vấn động và, 311
Sano, Darrell, 177
phông chữ sans-serif, 490, 514
Trang web SAP, 403
mô hình thỏa mãn
về, 11
động cơ học tập của người dùng,
7 thang đo (đồ họa thông tin), 294
Scott, Bill
Mẫu đàn accordion, 163
Lời mời phương tiện trống, 29
mẫu Bảng điều khiển, 49
Mẫu lớp phủ hộp thoại, 100 lớp phủ
danh sách, 209
Mẫu Live Preview, 266 Palette/bố
cục màn hình Canvas, 54 mẫu
chuyển tiếp, 129
Mô hình thuật sĩ, 58
Trang web Scribd, 117
kỹ thuật cuộn và xoay, 287
thanh cuộn, 124–126
đang tìm kiếm
Mẫu tự động hoàn thành và, điều
hướng 375 và, 287–288
xem dữ liệu có chọn lọc, cân
nhắc bảo mật 291–293
Mẫu macro và, 279 mẫu Máy đo
độ mạnh mật khẩu và,
371–374
Mẫu bản đồ trình tự
về, 77, 78, 86, 118–120 mẫu
Breadcrumbs và, 121 mẫu
Escape Hatch và, 104 thiết kế
biểu mẫu và, 357
Mẫu Visual Framework và, 143
Mẫu thuật sĩ và, 57
Mẫu Trình chỉnh sửa cài đặt
khoảng, 59–63
hỗ trợ các tác vụ đơn lẻ, 29 mẫu Bảng
điều khiển có thể di chuyển và 170 điều
hướng tiện ích và 80
Chia sẻ mẫu Widget
khoảng, 426–429
Mẫu Bảng xếp hạng nội dung và, 435
cân nhắc điều hướng, 85

mẫu Hộp tin tức và, 431 mẫu Dòng tin
tức và, 36 mẫu Trình quản lý ảnh và, 40,
41 mẫu Ứng dụng được kết nối phong
phú và, 472 hiển thị một thứ duy nhất, 27
các nguyên tắc truyền thông xã hội và, 396
Shneiderman, Ben, 311, 340 Trang web của Câu
lạc bộ Sierra, 434
biển báo, điều hướng và mẫu
Công cụ đăng nhập 78
khoảng, 115–117
cân nhắc điều hướng, 85 Mẫu bộ
nhớ không gian và, 17 biển chỉ
dẫn, đã xác định, 77
tương tự (nguyên tắc Gestalt)
về, 139
Mẫu Nhóm nút và, 246 cân nhắc về
đồ họa thông tin, 283 cân nhắc về bố
cục trang, 134
Simon, Herbert, 11
Sơ đồ trang web Mẫu chân trang
khoảng, 110–114
Mẫu đàn accordion và, 163 Mẫu điều
hướng dưới cùng, 457 Mẫu Menu
chất béo và, 107
cân nhắc điều hướng, mẫu 81,
85 Giao diện và Chủ đề
về, 498, 519–521
tài liệu tham khảo về văn hóa và,
495 giao diện so với chủ đề, trang web
520 Slate
Mẫu Fat Menus và, 108 Mẫu Tiện
ích chia sẻ và, 426 Mẫu Liên kết xã
hội và, 424, 425 Trang web
SlideShare, 98, 99
Mô hình bội số nhỏ
khoảng, 332–335
Mẫu Biểu đồ Multi-Y và 331 họa
tiết trực quan lặp lại và 496 mẫu
Mục menu thông minh
về, 245, 261–263
Mẫu hủy bỏ và, 270 Mẫu hoàn
tác đa cấp và, 274 Trang web
SmartMoney, 336, 337 Tạp chí
Smashing, 114
Tin nhắn SMS, 427
Mẫu liên kết xã hội
khoảng, 424–426
cân nhắc điều hướng, 85 Mẫu chân
trang Sơ đồ trang web và 111 nguyên
tắc truyền thông xã hội và 395
Mục lục543
truyền thông xã hội
thông tin cơ bản, 393 nguyên tắc sử
dụng cơ bản, 395–397 chiến lược sử
dụng cơ bản, 394–395 các phương
pháp hay nhất mới nổi, 393 mẫu
mạng xã hội
Bảng xếp hạng nội dung, 397, 434–437
Người bắt đầu cuộc trò chuyện, 395, 410–
413 Kết hợp biên tập, 395, 399–402
Kim tự tháp nano ngược, 396, 413–415
Hộp tin, 397, 430–434
Tiếng nói cá nhân, 395, 403–406 Trò
chuyện gần đây, 438–440 Đăng lại và bình
luận, 395, 407–409 Tiện ích chia sẻ, 396,
426–429 Liên kết xã hội, 395, 424–426
Luồng chuyên dụng, 396, 419–423 Chiến lược
thời gian, 395, 416–418 Ứng dụng SolidSX
Software Explorer, trang web 325 Songza
Mẫu phân trang và 224 mẫu Nút “Xong”
nổi bật và 257 mẫu Bảng có thể sắp
xếp
về, 197, 290, 320–322 cân nhắc
hiển thị danh sách, 195 mô hình tổ
chức cho, 283 mẫu Bảng Cây và,
235 dữ liệu sắp xếp, 289–291, 320–
322 Trang web SourceForge, 158 trang
web Southwest, 259, 260 biểu đồ thu
nhỏ, đã xác định, 332
Mẫu bộ nhớ không gian
khoảng, 17
Mẫu Movable Panels và, 169
điều hướng và, 287
Mẫu luồng chuyên biệt
khoảng, 419–423
Mẫu Liên kết xã hội và, 425 nguyên
tắc truyền thông xã hội và, 396 trang
web SPOT Adventures
Dữ liệu Mẫu chải và, 314, 315 Mẫu
Datatips và, 299, 302 hiệu ứng tiêu
điểm, 303–307
Mẫu Chế độ tải mùa xuân, 51 Dự án độ
tin cậy web của Stanford, 477 Trình đọc
sách Stanza, 456
trang web của Starbucks
Mẫu Cân bằng đường chéo và,
178 mẫu Editorial Mix và, 401
mẫu Fat Menus và, 107
Mẫu xem trước và, 265 Mẫu trò
chuyện gần đây và, 439, 440
544Mục lục

chỉ số tĩnh, 125 mô típ trực quan lặp đi lặp lại và, 496 hiển thị
Stefaner, Moritz, 326 danh sách sự vật, 28 dòng thời gian (đồ họa
Mô hình điều hướng theo từng bước, 82 thông tin), 294, 298 dấu thời gian
Mẫu Thương hiệu Hợp lý hóa, 474–476
Mẫu Lặp lại Hợp lý hóa Mẫu Trò chuyện gần đây và 439
khoảng, 19 trong URL, 103
Mẫu macro và mẫu Mô hình chiến lược thời gian
Định dạng có cấu trúc 278 khoảng, 416–418
về, 356, 360–361 Mẫu Kết hợp biên tập và, 400 nguyên
Tha thứ Mẫu định dạng và, 358 thiết kế tắc truyền thông xã hội và, 395 mẫu
biểu mẫu và, 342, 352, 355 Mẫu Gợi ý Luồng chuyên biệt và 420 mẫu Phần có
đầu vào và, 365 Trình chỉnh sửa Sumo tiêu đề
Paint, 51, 52 khoảng, 153–155
khảo sát, 5 Mẫu đàn accordion và, 160, 161 mẫu
Sân khấu trung tâm và, 146 mẫu Bảng
điều khiển có thể thu gọn và, 164 mẫu
Bảng điều khiển và, 46
mục lục, 90 Trang web mục
ứng dụng máy tính để bàn và,
tiêu, 121, 122, 227 Mẫu ngăn
497 mẫu Fat Menus và, 107 thiết
tác vụ, 256
kế biểu mẫu và, 341
Trang web đánh giá công nghệ
Mẫu Tab mô-đun và, 156 cân
Mẫu Bảng xếp hạng nội dung và, 437
nhắc về bố cục trang, 140 mẫu
Mẫu Trò chuyện gần đây và, 439, 440
Lưới hình thu nhỏ và, 210 mẫu
Trang web Technorati, 428
Visual Framework và 143 Mẫu
trang web TED
thuật sĩ và 56
giao diện duyệt web, 44
ứng dụng tkdiff, 125, 126
Tương phản giữa mẫu Trọng lượng phông chữ
Tognazzini, Bruce, 184
và mẫu 516 Visual Framework và 143, 144,
thanh công cụ
145
kết xuất phổ biến, 240
thử nghiệm, khả năng sử dụng, 343
Mẫu Trình chọn thả xuống và 380 mẹo
Văn bản Xóa mẫu Nút, 467–468 chủ
công cụ
đề so với giao diện, 520
Mẫu Thanh cuộn được Chú thích và,
Mẫu danh sách hình thu nhỏ và văn bản
125 Mẫu Datatips và, 300
khoảng, 459–461
đề xuất thiết kế cho, 244 mẫu Trợ
Mẫu Grid of Equals, 150 cân
giúp đa cấp và 72 màn hình cảm
nhắc hiển thị danh sách, 195
ứng
thiết kế thiết bị di động và 448
Mẫu datatips và, 299 thử
mẫu News Stream và 36 họa
thách thiết kế, 442
tiết trực quan lặp lại và 496
Mẫu Đường viền hào phóng và mẫu 465–466
mẫu Stack dọc và 450 mẫu
Công cụ di chuột và mẫu 250
Lưới hình thu nhỏ
Mẫu Touch Tools, 448, 454–456
khoảng, 210–215
Hệ thống định vị Toyota, 184
Mẫu Chế độ xem thay thế và, 65
mẫu Treemap
Mẫu băng chuyền và, 216
khoảng, 336–340
Mẫu Trình chọn thả xuống và, 382 mẫu
các bước thiết kế quan trọng, mẫu
Lưới bằng và, 150 cân nhắc hiển thị danh
Truy vấn động 337 và, phiên dịch
sách, 195 thiết kế thiết bị di động và, 448
310, 338
mẫu Truy vấn chi tiết một cửa sổ và, 203,
các mô hình tổ chức cho, 283
Tree Table pattern
204
khoảng, 235–236
Mẫu Trình quản lý Ảnh và, 40–45
Mẫu Chế độ xem thay thế và, 65
Mẫu Kim tự tháp và, 95

cân nhắc hiển thị danh sách, 197
mô hình tổ chức cho, 283 sơ đồ
lưới mắt cáo, 335
Tufte, Edward
Tổng quan Plus Mẫu chi tiết và, 296, 299
Mẫu bội số nhỏ và, 332, 335 Trang web
TurboTax, 182
Ứng dụng TweetDeck
khoảng, 69
Nhiều mẫu Không gian làm việc và, 68, 70
Twitter
thông tin cơ bản, 393 mẫu Bắt đầu
hội thoại và 411 mẫu Kết hợp biên
tập và 399
Mẫu Hover Tools và, 249 mẫu Gợi ý đầu
vào và, 364, 367, 368 Mẫu kim tự tháp
Đ.otải xuống từ Wow! Sách điện tử <www.wowebook.com>
Nano ngược và, 413,
414, 415
Mẫu Nhiều Không gian làm việc và mẫu
68 Dòng tin tức và mẫu 28, 34, 35 Đề xuất
cá nhân và mẫu 23 Giọng nói cá nhân và
mẫu 402, 403, 404,
405
Mẫu Đăng lại và Nhận xét và, 408, 409 Mẫu
Ứng dụng được kết nối phong phú và, 471
Mẫu Thông báo lỗi cùng trang và,
389, 390
Mẫu Widget chia sẻ và mẫu 426, 427 Công
cụ đăng nhập và mẫu 116 Liên kết xã hội
và nguyên tắc truyền thông xã hội 424–
426 và mẫu Luồng chuyên biệt 395 và
mẫu Chiến lược thời gian 419–423 và Bộ
chọn hai bảng 416–418 mẫu
khoảng, 198–201
Mẫu Tính năng, Tìm kiếm và Duyệt và, 31
Liệt kê mẫu Inlay và, 207
Mẫu Luồng tin tức và, 35, 36, 38 Mẫu
truy vấn một cửa sổ và, 202,
203, 204
Mẫu Trình quản lý ảnh và, 40–42 Mẫu
Bản đồ trình tự và, 118 Mẫu Trình
chỉnh sửa cài đặt và, 60 danh sách hiển
thị các thứ, 28
Mô hình thuật sĩ và,
56 kiểu chữ
biên giới và, 510
Mẫu Borders That Echo Fonts và,
510–512
Tương phản mẫu Trọng lượng phông chữ và,
516–518
cân nhắc thiết kế trực quan, 490–492, 497
Mục lục545
Trình tạo UIM/X, 161
hoàn tác ngăn xếp, 273
Đại học Maryland, 340 Đại học
Oregon, 331 danh sách không theo
thứ tự, xây dựng, 349 URL
Mẫu Tự động hoàn thành và, 375 Mẫu
Trạng thái được liên kết sâu và, 102
Mẫu Nút Xóa Văn bản và, 467 dấu thời
gian trong, 103
thử nghiệm khả năng sử dụng, 343
hành vi người dùng.Nhìn thấyđiều hướng tiện
ích mẫu hành vi, 80, 115
Tạp chí UX
Mẫu bảng điều khiển, 49
Bố cục màn hình Palette/Canvas,
54 Mẫu thuật sĩ, 58
Trang web Thế vận hội Vancouver, 425
van Duyne, Douglas K., xix van Welie,
Martijn, xix
động từ.Nhìn thấyhành động và lệnh
Mô hình ngăn xếp dọc
về, 448, 449–451
thiết kế thiết bị di động và, 445
khung nhìn, được xác định, 297
Ngôn ngữ Visual Basic, 279, 280 Trang
web Visual Complexity, 327 thiết kế
trực quan
góc và đường cong trong, 492 điều
cơ bản về, 488
thương hiệu và, 478
màu trong, 488–489
tài liệu tham khảo về văn hóa trong, 495 ứng
dụng máy tính để bàn và, 496–498 gợi lên
phản ứng, 479–487, 488 hình ảnh trong, 494,
497
tầm quan trọng của, 477
ảnh hưởng tích cực và, 478 họa tiết
hình ảnh lặp đi lặp lại, 495 sự rộng
rãi và đông đúc, 492 kết cấu và nhịp
điệu, 493
kiểu chữ trong, 490–492, 497
mẫu thiết kế trực quan
Biên Giới Mà Tiếng Vang Phông Chữ, 496, 497, 498,
510–512
Trọng lượng phông chữ tương phản, 498,
516–518 Xử lý góc, 496, 497, 498, 507–509
546Mục lục

mẫu thiết kế trực quan (tiếp tục)
Nền sâu, 497, 498, 499–503 Ít sắc thái,
Nhiều giá trị, 489, 504–506 Đường
chân tóc, 493, 498, 513–515
Giao diện và Chủ đề, mẫu 495, 498,
519–521 Visual Framework
khoảng, 140, 142–145
Mẫu nút “Xong” nổi bật và, 258 người
dùng khiếm thị, 497
Xưởng trực quan, 379
Vlissides, John, xix
Biểu mẫu để Quảng cáo, 396, 439
Mẫu Liên kết xã hội và, 424, 425 Mẫu
Thương hiệu được sắp xếp hợp lý và, 476
Williamson, Christopher, 311
Hệ điều hành Windows
Mẫu Bảng điều khiển hành động và,
255, 256 Mẫu Breadcrumbs và, 122
ứng dụng máy tính để bàn và thiết kế trực quan, 496,
497
Mẫu Cân bằng đường chéo và, 176
mẫu Thẻ mô-đun và 157 mẫu Trình
chỉnh sửa cài đặt và 60 mẫu Giao diện
và Chủ đề và 520 Trang web có dây

Mẫu Bảng xếp hạng nội dung và mẫu

437 Tiện ích chia sẻ và mẫu Liên kết xã
Trang web Tạp chí Phố Wall
hội 428 và mẫu 424
Mẫu Bảng xếp hạng Nội dung và, 434 Mẫu
Mẫu Luồng chuyên dụng và, 419, 421,
Bảng xuyên tâm và, 306, 307 Mẫu Chân
422
trang Sơ đồ trang web và, 113 Trang web
Mẫu chiến lược thời gian và
Walmart, 473
mẫu thuật sĩ 417
Trang web của Washington Post
khoảng, 55–58
Mẫu Data Spotlight và, 305, 306 Mẫu
Những thay đổi trong mẫu Midstream và,
ngăn xếp dọc và, 450, 451 tìm
12 mẫu thiết kế và, 357
đường, đã xác định, 78
cân nhắc về điều hướng, 82 cung cấp
Trang web Weather.com, 331, 357
công cụ để tạo mọi thứ, 29 mẫu Kích
Trang web Weather ngầm, 138 trình
hoạt đáp ứng và 183 mẫu Bản đồ trình
duyệt web
tự và 118 mẫu Trình chỉnh sửa cài đặt và
Mẫu Tự động hoàn thành và,
59 động lực học của người dùng và 8
378 Mẫu có thể hủy và, 269 Mẫu
Word (Microsoft).Nhìn thấyMicrosoft
Nền sâu và, 499 thiết kế biểu
Office
mẫu và, 347, 349
các ứng dụng
cân nhắc đồ họa thông tin,
dịch vụ web WordPress
287–288
Mẫu Trò chuyện gần đây và, 439 Mẫu Giao diện
Mẫu Nhiều Không gian làm việc và,
và Chủ đề và, 520, 521 không gian làm việc, đã
68, 70 Mẫu Trợ giúp Đa Cấp và, 72–
xác định, 69
76 Mẫu Giao diện và Chủ đề, 519
Wroblewski, Luke, 261, 465
Mẫu Nút Xóa Văn bản và, 467 Mẫu
Bảng Cây và, 236
Trang web WebMD, 109
các trang web.Xem thêmtrang web cụ thể Xerox sao, 180
Mẫu băng chuyền và, 217 biểu trưng trang
web có thể nhấp, 105 cách sử dụng góc cong
trong, 507 mẫu Liên kết xã hội và, 424–426
Yahoo! Mạng Nhà phát triển, 163
Dự án uy tín web Stanford, trang web 477 Địa
Yahoo! Tin tức
điểm cuối tuần, 314, 315
Mẫu Trò chuyện gần đây và mẫu Danh sách văn
bản và hình thu nhỏ 439, 440 và mẫu 460 Yahoo!
Welie.com, 45
thư viện mẫu
Trang web Whole Foods
về, xix
Mẫu Người bắt đầu cuộc trò chuyện và, 411, 412
mẫu phân trang, 227
Mẫu Kết hợp Biên tập và, 401, 402
kiểu chuyển tiếp, 128
Mẫu hộp tin tức và, 432, 433
Biểu mẫu để Quảng cáo, 396, 439
 Mục lục547

Yahoo! trang mạng
Mẫu bảng điều khiển và, 47 mẫu Gợi ý đầu vào
và, 368 mẫu Dấu nhắc đầu vào và, 369 mẫu
Bảng điều khiển có thể di chuyển và, 168, 172
mẫu Máy đo độ mạnh mật khẩu và, 374 mẫu
Thông báo lỗi cùng trang và, 390 mẫu Trình
chỉnh sửa cài đặt và, 62
Mẫu Luồng chuyên dụng và mẫu Danh sách hình
thu nhỏ và văn bản 422 và mẫu 460,
461
Mẫu Lưới hình thu nhỏ và dấu thời gian
212, 213 trong URL, 103
Mẫu Chiến lược thời gian và, 417
Mẫu Công cụ cảm ứng và, 455

Mẫu thuật sĩ và, 54, 57

Trang web Yelp
Trang web Zappos
trí tuệ tập thể và, 394 Mẫu Trò
Mẫu Giọng nói cá nhân và, 402, 403, 404
chuyện gần đây và, 439, 440 Trang
Mẫu lưới hình thu nhỏ và, 214
web YouTube
sọc ngựa vằn, 221, 224
thông tin cơ bản, 393 giao diện duyệt web,
Trang web Zillow, 251
42, 44 mẫu Bảng điều khiển có thể thu gọn
phóng to
và 166, 167 mẫu Công cụ Hover và 252
Dữ liệu Kiểu chải mẫu và, 313 Mẫu Thu
phóng cục bộ và, 316–320 cân nhắc
Mẫu Hộp tin tức và, 431 Mẫu phân
điều hướng, 288 Tổng quan cộng với
trang và, 227 Mẫu đăng lại và Nhận
Mẫu chi tiết và, 296
xét, 406 Mẫu Liên kết xã hội và, 424
Jenifer Tidwelllà một nhà văn và nhà tư vấn về thiết kế tương tác, kiến trúc thông tin và phân tích
trước khi thiết kế. Cô ấy đã thiết kế và xây dựng các ứng dụng và giao diện web phức tạp trong gần
hai thập kỷ. Các khách hàng và nhà tuyển dụng trước đây của cô bao gồm Google, The MathWorks,
các tổ chức phi lợi nhuận và các công ty khởi nghiệp. Cô ấy là một trong những nhà thiết kế đầu tiên
viết các mẫu cho thiết kế giao diện người dùng, vào cuối những năm 1990 khi khái niệm này lần đầu
tiên được áp dụng cho phần mềm. Cô sống gần Boston, Massachusetts, cùng chồng, con trai và một
con vẹt nhỏ.

Con vật trên trang bìa củaThiết kế giao diệnlà một con vịt tiếng phổ thông (Aix galericulata),
một trong những loài vịt đẹp nhất. Có nguồn gốc từ Trung Quốc, những con chim sặc sỡ
này có thể được tìm thấy ở đông nam nước Nga, miền bắc Trung Quốc, Nhật Bản, miền
nam nước Anh và Siberia. Những con đực có bộ lông đa dạng và nhiều màu sắc, được đặc
trưng bởi vương miện óng ánh, má màu hạt dẻ và một sọc trắng ở mắt kéo dài từ mỏ màu
đỏ đến sau đầu. Con cái có bề ngoài ít lòe loẹt hơn và có xu hướng có màu xám, trắng, nâu
và nâu lục, với cổ họng và cổ màu trắng.

Những con chim này sống trong khu vực rừng gần suối và hồ. Là loài ăn tạp, chúng có xu hướng
ăn kiêng theo mùa, ăn quả sồi và ngũ cốc vào mùa thu; côn trùng, ốc sên và thực vật thủy sinh
vào mùa xuân; và sâu sương, châu chấu, ếch, cá và động vật thân mềm trong những tháng mùa
hè.

Nghi thức giao phối của vịt Mandarin bắt đầu bằng một vũ điệu tán tỉnh công phu và phức tạp
bao gồm các động tác lắc lư, cử chỉ uống rượu bắt chước và rỉa lông. Các con đực đánh nhau để
giành con cái, nhưng cuối cùng con cái mới là người quyết định bạn đời của mình. Vịt con tiếng
phổ thông theo bản năng đi theo mẹ nổi tiếng là bảo vệ của chúng, chúng sẽ giả vờ bị thương
để đánh lạc hướng những kẻ săn mồi như rái cá, chó gấu trúc, chồn, mèo sào, cú đại bàng và
rắn cỏ.

Vịt uyên ương không phải là loài có nguy cơ tuyệt chủng, nhưng chúng được coi là có nguy cơ tuyệt chủng.
Những kẻ khai thác gỗ liên tục xâm phạm môi trường sống của chúng, và những kẻ săn trộm đánh cắp
những con đực vì bộ lông của chúng. Thịt của chúng được con người coi là không ngon và chúng thường
không bị săn bắt để làm thức ăn.

Ảnh bìa là từLịch sử tự nhiên của Johnson.Phông chữ bìa là Adobe ITC Garamond. Phông
chữ văn bản là Adobe Minion Pro, phông chữ tiêu đề và ghi chú là Adobe Myriad Pro
Condensed.