Thiết kế giao diện web

Khái quát

Các độc giả của web không chỉ xem thông tin, họ tương tác với nó theo cách thức mới không như các tiền lệ trong việc thiết kế tài liệu giấy. Giao diện người dùng đồ hoạ (GUI) của hệ thống, cộng thêm các tương tác ẩn dụ, hình ảnh và các quan niệm được sử dụng để chuyển tải mọi tính năng, thông tin lên màn hình, và trải qua thời gian các đặc thù trực quan của các thành phần giao diện đồ hoạ và sự tương tác chức năng hoá đã tạo nên nét đặc trưng "nhìn thấy và cảm nhận" của các trang web cùng các mối liên kết hypertext. Thiết kế đồ hoạ và các hình ảnh "ký hiệu" trực giác không chỉ để làm đẹp trang web – đồ hoạ trở thành một phần được tích hợp của kinh nghiệm của độc giả đối với web site của chúng ta. Trong các tài liệu có ảnh lẫn nhau, không thể hoàn toàn tách rời thiết kế đồ hoạ với thiết kế giao diện.

Trang Web đối lập với thiết kế tài liệu thông thường

Đại đa số nhận thức hiện tại của chúng ta về thông tin có cấu trúc bắt nguồn từ việc tổ chức các quyển sách, tạp chí xuất bản định kỳđã được in và công tác chỉ số hoá thư viện, các hệ thống phân loại được phát triển quanh các ấn bản đó. "Các tiêu chuẩn về hình thức" của các cuốn sách trong thế giới nói tiếng Anh đã được thiết lập cũng như công nhận rộng rãi; các hướng dẫn chi tiết cho việc toạ một cuốn sách có thể tìm đọc trong các quyển như The Chicago Manual of Style. Mọi đặc điểm cho một cuốn sách, từ mục lục đến chú thích, chỉ số đã được rút ra qua hàng thế kỷ, và người đọc trước kia cũng đã phải đối diện với các vấn đề tổ chức hệt như người đọc bây giờ của các tài liệu đa phương tiện (hypermedia). Cuốn Kinh thánh năm 1456 của Gutenberg thường được trích dẫn như cuốn sách hiện đại đầu tiên, tuy thế cũng phải sau khi phát triển mạnh việc xuất bản cùng hơn 100 năm kinh nghiệm thì việc đánh số trang, chỉ số, mục lục cũng như các trang bìa mới trở thành đặc điểm routine cho các cuốn sách. Các tài liệu web tương tự như vậy, cũng phải trải qua sự phát triển và sự chuẩn hoá cách thức thông tin được tổ chức, thực hiện ở dạng điện tử.

Các tiền lệ trong in ấn

Mặc dù các tài liệu đa phương tiện trên mạng đưa ra các thách thức mới cho những nhà thiết kế thông tin, đại đa số hướng dẫn chúng ta cần đến để thiết kế, tạo lập, lắp ráp, hiệu chỉnh và tổ chức một media phong phú, đa dạng về căn bản không khác so với thực tế trong công việc của nhà xuất bản. Đa số trang web có thể được tạo ra phù hợp với các qui ước cho hình thức biên tập và tổ chức văn bản của The Chicago Manual of Style. Nhiều điều chúng ta cần biết về phương pháp tạo các tài liệu rõ ràng, bao quát, nhất quán có thể đọc trong các hướng dẫn như Xerox Publishing Standards: A Manual of style and Design. Đừng bị lạc trong các trang web lạ thường mà bỏ qua các chuẩn mực cơ bản của thiết kế đồ hoạ cũng như biên tập.

Hãy làm cho các trang web của chúng ta độc đáo

Các trang World Wide Web khác sách và các tài liệu khác ở một nét cơ bản: các mối liên kết siêu văn bản cho phép người đọc truy nhập đến một trang web đơn lẻ không cần đến lời nói đầu hay tựa đề. Điều này thường có nghĩa là các đầu trang, chân trang của trang web sẽ phức tạp, nhiều thông tin hơn các trang in trên giấy. Có thể là vô lý, buồn cười khi lặp lại các thông tin bản quyền, tác giả, thời gian xuất bản ở tất cả các trang sách, nhưng một trang web riêng lẻ thường cần đến những thông tin này vì các trang đơn lẻ có thể chỉ là một phần nhỏ của cả web site chúng ta có mà độc giả đó có thể nhìn thấy. Vấn đề tạo các trang web độc đáo không chỉ có đối với các trang web. Các báo chuyên đề, tạp chí, đa số các báo ngày đều lặp lại thời gian phát hành, số bản tại phần đầu hay cuối từng trang vì họ biết độc giả của họ thường cắt các bài báo, hoặc photocopy các trang từ tạp chí và cần thông tin trích dẫn để theo dõi nguồn gốc nguyên bản của các bài.

Cho các khó khăn khi tạo các web site vừa dễ sử dụng, vừa đầy đủ nội dung, chiến lược thiết kế tốt nhất là áp dụng nhất quán một số qui ước thiết kế cơ bản trong mọi trang web của chúng ta. Các thành phần cơ bản của một tài liệu không phức tạp, nó cũng chẳng là gì so với công nghệ Internet. Nó rất giống với điều được giảng trong một lớp báo chí: ai, cái gì, khi nào và ở đâu.

Ai

Ai đang nói? Câu hỏi này thật cơ bản, và thông tin thường được đảm bảo đến nỗi các tác giả của web thường bỏ qua phần tin quan trọng nhất mà một độc giả cần đến để đánh giá nguồn gốc, lai lịch của tài liệu: ai đang nói cho tôi? Dù trang web có xuất phát từ một cá nhân hay từ một viện nghiên cứu, cũng luôn phải thông báo cho người đọc ai đã tạo trang web đó. Cơn thác các web site truyền bá thông tin không chính xác, hơn nữa lừa gạt về tai nạn máy bay TWA 800 là tột ví dụ sống động của vần đề thông tin không nguồn gốc hoặc không xác đáng sẽ nhanh chóng trở nên trội hơn, lấn át cuộc điều tra và kết luận chính thống.

Cái gì

Mọi tài liệu đều cần tiêu đề dễ hiểu để gây sự chú ý của độc giả, nhưng trong nhiều trường hợp đặc biệt đối với các trang web, yếu tố cơ bản này lại cự kỳ quan trọng. Tiêu đề là cái đầu tiên các độc giả của các trang World Wide Web nhìn thấy khi các trang được nạp dần xuống. Trong các trang nhiều hình ảnh đồ hoạ, tiêu đề là cái duy nhất mà người ta có thể nhìn thấy trong thời gian chờ ảnh được nạp lên trang web. Ngoài ra, tiêu đề là phần văn bản sẽ được chương trình duyệt sử dụng như một "đánh dấu trang" nếu độc giả chọn nó để đưa vào danh sách ghi nhớ. Một tiêu đề không sát thực, tối nghĩa, hoặc một tiêu đề quá kỹ thuật sẽ không giúp người đọc nhớ được tại sao họ lại cho trang web này vào danh sách lưu trữ.

Khi nào

Tính hợp thời là một yếu tố quan trọng trong việc đánh giá toàn bộ một tài liệu. Chúng ta làm thông tin trong thời đại mà mọi tài liệu giấy đã đảm bảo: báo, tạp chí, và hầu như mọi quan hệ thư từ văn phòng đã được xác định ngày tháng. Do đó chúng ta hãy đề ngày tháng cho mọi trang web, và thay đổi mỗi khi tài liệu được cập nhật. Điều này đặc biệt quan trọng đối với các văn bản online dai và phức tạp mà chỉ được cập nhật từng phần, tuy vậy điều này cũng có thể không đủ nổi bật cho các độc giả vãng lai, không thường xuyên. Thông tin về doanh nghiệp, các bản hướng dẫn, thông tin về sản phẩm và các tài liệu kỹ thuật dưới dạng trang web nên có thêm thời gian được sửa chữa, cập nhật lại.

Nơi nào

World Wide Web là một địa điểm duy nhất có chiều thông tin cực lớn nhưng lại có ít chỉ dẫn rõ ràng về vị trí thực sự của tài liệu. Nhấn vào một liên kết web, chúng ta có thể kết nối đến một web server ở Sydney (Úc) hay Chicago (Mỹ) hoặc một nơi nào đó trên Internet rộng lớn. Nếu bạn không thông thạo lắm trong việc phân tích địa chỉ Internet (URL), thật khó khăn để xác định tài liệu đang thực sự nằm ở đâu. Sau cùng đây chính là World Wide Web, và câu hỏi tài liệu đến từ đâu đôi khi không thể tách khỏi câu hỏi tài liệu này của ai. Chúng ta nên luôn luôn thông báo cho độc giả chúng ta đang ở đâu, cùng với (nếu nó thích hợp) các thông tin về doanh nghiệp, viện, cơ quan của chúng ta.

Thiết kế giao diện cơ bản

Thiết kế hướng tới người sử dụng

Giao diện đồ hoạ cho người sử dụng (GUI) được thiết kế nhằm cho người dùng điều khiển trực tiếp maý tính của họ. Ngày nay, người sử dụng yêu cầu một mức độ hoàn hảo của mọi thiết kế giao diện đồ hoạ, kể cả các trang web. Mục đích là cung cấp mọi cần thiết cho tất cả độc giả quan trọng của chúng ta, mô phỏng công nghệ web cho mọi mong chờ của họ, và không bao giờ đòi hỏi người đọc chỉ đơn giản là làm theo một giao diện mà đặt những cản trở không cần thiết lên con đường của họ.

Các giúp đỡ định hướng rõ ràng

Với thực tại của công nghệ web, đa số độc giả tương tác với các trang web bằng cách thực hiện các liên kết giữa các tài liệu. Vấn đề chủ yếu của giao diện trong các web site là độc giả không ý thức được họ đang ở đâu trong tổ chức thông tin. Các biểu tượng nhất quán, dễ hiểu, các lược đồ đồ hoạ đồng nhất và bản khái quát (đồ hoạ hay văn bản), màn hình tổng hợp có thể cho độc giả sự tin tưởng là họ có thể tìm thấy cái họ tìm mà không lãng phí thời gian.

Mọi trang web nên có ít nhất một liên kết. Các trang "dead-end" – các trang không móc nối đến các trang khác trong cùng site – không chỉ là một sự thất vọng với độc giả, chúng thường làm mất khả năng đưa độc giả đến với các trang khác trong web site của chúng ta.

Các trang web thường được đưa ra không có lời tựa đầu: độc giả thường tạo hay đi theo các liên kết thẳng đến các trang cất sâu trong cấu trúc của web site. Do vậy họ có thể không bao giờ nhìn thấy trang chủ (Homepage) hoặc các thông tin mở đầu trên we site của chúng ta. Nếu các trang phía dưới của site không có các liên kết quay lên, về trang chủ hoặc quay lại menu, độc giả thực chất là bị loại khỏi việc truy nhập đến các phần còn lại của web site.

Mục đích là cung cấp cho độc giả thông tin họ cần với ít bước nhất và với thời gian ngắn nhất. Điều này có nghĩa là chúng ta cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối đa các bước qua hệ thống menu. Các nghiên cứu về giao diện chỉ ra rằng độc giả thích các menu mà có từ 5 đến 7 liên kết, và độc giả cũng thích ít màn hình dày dặc các lựa chọn hơn là nhiều trang với các menu đơn giản.

Băng thông và ảnh hưởng

Độc giả không chịu đựng thời gian trễ dài (thời gian chờ đợi trang web tải xong). Các nghiên cứu nhân tố con người cho thấy đối với đa số công việc tính toán, ngưỡng của sự mất tác dụng là khoảng 10 giây. Các thiết kế trang web mà không thích hợp với tốc độ truy nhập mạng của độc giả sẽ chỉ làm cho họ thêm thất vọng. Nếu độc giả chỉ là một người dạo chơi web bình thường sử dụng modem tốc độ 28.8 kbps qua đường điện thoại, thật dại dột đặt một ảnh lớn (kích thước) lên trang web, độc giả sẽ không đủ kiên nhẫn chờ đến khi ảnh được nạp xuống. Thế nhưng, nếu chúng ta xây dựng một web site cho nội bộ (intranet) trường học, doanh nghiệp, nơi mà mọi người truy nhập web server với tốc độ mạng LAN hay cao hơn nữa, thì chúng ta lại nên sử dụng nhiều ảnh và multimedia.

Đơn giản và nhất quán

Độc giả sẽ không ấn tượng với sự phức tạp không lý do, đặc biệt các độc giả phụ thuộc vào web site của chúng ta về thời gian hoặc thông tin chính xác, liên quan đến công việc. Các biểu tượng nên đơn giản, quen thuộc là dẽ hiểu với độc giả, ví dụ nếu chúng ta muốn một biểu tượng cho việc thiết kế thông tin, nên chọn quyển sách hay thư viện, chứ đừng chọn tầu vữ trụ hay vo tuyến truyền hình. Thiết kế thông tin tốt nhất là những cái mà đa số độc giả chưa bao giờ nhận thấy.

Adobe (do Studio Archetype thiết kế) là một mô hình xuất sắc cho thiết kế web site. Các trang sử dụng đồ hoạ một cách rộng rãi với các trợ giúp định vị (navigation), áp dụng nhất quán ở tất cả các trang trên web site. Một khi chúng ta biết các liên kết cơ bản nằm trên đầu trang, ranh giới trở thành vô hình và việc định vị sẽ dễ dàng hơn.

Để đạt được tối đa việc chức năng hoá và tính rõ ràng, thiết kế trang của chúng ta nên được xây dựng trên các đơn vị mẫu nhất quán, tất cả đều sử dụng chung một kiểu đồ hoạ, phong cách biên tập và mô hình tổ chức. Mục đích là tính đồng nhất, có thể đoán trước, để độc giả cẩm thấy thoải mái khi khai thác web site của chúng ta, và chắc chắn họ biết phải tìm cái họ cần tìm. Các biểu tượng đồ hoạ trên trang web cung cấp các tín hiệu trực quan về sự tiếp nối của thông tin. Biểu tượng đồ hoạ trên tất cả đầu trang của Adobe site tạo nên một giao diện độc giả nhất quán, và cũng là nét nhận dạng duy nhất cho site của Adobe.

Ngay cả khi các trang của chúng ta không sử dụng đồ hoạ, sử dụng nhất quán các tiêu đề, các chân trang và các liên kết đến trang chủ, các trang liên quan sẽ tăng cường cảm giác của độc giả là họ đang trong khung cảnh web site của chúng ta.

Để tạo hiệu quả cho một hệ thống "không đứt đoạn – seamless", chúng ta nên xem xét đến việc đưa các thông tin quan trọng vào web site của chúng ta, gộp nó vào hệ thống hơn là tạo liên kết đưa độc giả của chúng ta ra khỏi site của chúng ta (nếu không vi phạm bản quyền cho việc sao chép thông tin).

Tính ổn định thiết kế

Nếu chúng ta mong muốn thuyết phục độc giả của chúng ta rằng cái mà chúng ta cung cấp là chính xác, đáng tin cậy, chúng ta cũng phải thiết kế web site của chúng ta cẩn thận, giống như chúng ta tạo các mối liên hệ với các doanh nghiệp khác, với cùng sự biên tập và các trình độ thiết kế cao. Một site trông luộm thuộm, với thiết kế trực quan nghèo nàn, trình độ biên tập kém sẽ không truyền được sự tin cậy cho các độc giả.
Tính ổn định chức năng trong thiết kế web có nghĩa là giữ các thành phần giao tiếp của web site làm việc ổn định. Tính ổn định chức năng có hai thành phần – đặt các vật đúng chỗ ngay từ đầu khi thiết kế web site, và sau đó giữ chúng hoạt động nhịp nhàng trong suốt thời gian. Các web site tốt có tự nó đã có tác động qua lại, với nhiều liên kết đến các trang trong site đó, và có các liên kết đến các site khác. Trong khi thiết kế, chúng ta cần kiểm tra thường xuyên các liên kết để đảm bảo chúng còn tồn tại, mọi cái trên web thay đổi rất nhanh, cả trên web site của chúng ta và các web site khác. Chúng ta cần có lịch kiểm tra lại các liên kết và cả nội dung của nó có còn thích hợp không.

Phản hồi và đối thoại

Thông qua hình ảnh đồ hoạ, các nút bấm, các liên kết đặt một nơi duy nhất, thiết kế web của chúng ta nên đưa ra khả năng xác nhận vị trí, lựa chọn của độc giả.

Phản hồi cũng có nghĩa là bước chuẩn bị cho việc trả lời, đáp ứng các đòi hỏi, góp ý của độc giả. Các web site thiết kế tốt luôn cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc "webmaster" phụ trách kỹ thuật của site. Lên kế hoạch đảm bảo quan hệ liên tục với các độc giả là quan trọng sống còn đối với sự thành công lâu dài của một doanh nghiệp.

Thiết kế cho các trình duyệt khác

Không phải mọi độc giả của chúng ta có hưởng lợi từ các ảnh đồ hoạ chúng ta đưa ra trên trang web, và rất nhiều độc giả không có chương trình duyệt đồ hoạ. Một trong những cái hay của web và HTML là khả năng thay thế thông báo (nhãn ALT trong HTML) để các độc giả với web browser không có khả năng đồ hoạ (lynx) vẫn hiểu được chức năng của hình ảnh trên trang web. Sử dụng chương trình đặc biệt, các độc giả mù có thể nghe các thông báo thay thế mà chúng ta cho hỗ trợ cùng hình ảnh đồ hoạ, do đó không hoàn toàn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm trang web.

Điều khiển

Cung cấp một tập hợp phong phú các điều khiển đồ hoạ và liên kết tương tác trong trang web sẽ thu hút sự chú ý của độc giả xuống trang web, quên đi các liên kết đa năng của trình duyệt và lôi cuốn họ vào nội dung. Bằng cách sử dụng các phím ấn đồng nhất, có thể ưự đoán được, chúng ta đã giúp độc giả có được cảm nhận của web site của mình, và làm cho logic và trật tự của web site trở nên rõ ràng. Ví dụ sau đây từ trang chủ của PBS phong phú đồ hoạ, liên kết đã hấp dẫn ngay người đọc vào site này:

Tạo ngữ cảnh hoặc mất độc giả

Độc giả cần cảm nhận ngữ cảnh, về vị trí của họ trong tổ chức thông tin. Trong các tài liệu trên giấy, cảm giác "ta đang ở đâu" là sự phối hợp các cách xử lý về biên tập, đồ hoạ có được từ thiết kế sách, cách tổ chức văn bản và cảm giác vật lý của cuốn sách. Các tài liệu điện tử không cung cấp một ám chỉ vật lý nào cho việc truy nhập thông tin. Khi chúng ta thấy một liên kết web trên một trang, chúng ta có ít càm nhận chúng ta sẽ được dẫn đi đâu, có bao nhiêu thông tin ở đó, và chính xác thông tin đó quan hệ thế nào đến trang hiện tại như thế nào. Đại đa số các trang web không vừa khớp với màn hình 14-15 inch, và do đó luôn có một phần của trang mà độc giả không thể nhìn thấy.

Các trang web cần cho độc giả cảm nhận rõ ràng ngữ cảnh và tổ chức thông tin, vì chỉ có một phần nhỏ của web site (ít hơn một trang) được hiển thị vào một thời điểm. Nếu là một người thiết kế web, chúng ta cần chuẩn bị để cung cấp cho độc giả các khả năng này.

Liên kết và điều khiển

Tất cả các hệ thống siêu văn bản đều chia sẻ một vấn đề chung đó là: quay lại từ một loạt các liên kết mà độc giả đã đi qua sẽ không giống như lật các trang ngược lại trong các tài liệu in, khi mà các trang được đánh số. Khi độc giả nhấn vào một liên kết trong một tài liệu web, họ thường di chuyển từ một web site này đến cái khác, có khi từ một quốc gia này đến một quốc gia khác. Cũng do liên kết là hai chiều, độc giả có thể quay lại web site mà họ vừa rời khỏi bằng cách nhấn vào phím "Back" của trình duyệt. Có phím "Back", thì phím "Forward" cho phép độc giả lại đi đến web site mới.

Tác dụng của thanh phím ấn

Đối với các nhà thiết kế thông tin, các liên kết siêu văn bản là một may mắn pha tạp. Sự thay đổi căn bản trong ngữ cảnh mà các liên kết tạo ra dễ dàng làm lúng túng các độc giả, những người cần đến các ám chỉ và các yếu tố tác động có tổ chức, khi họ theo đuổi và hiểu các liên kết siêu văn bản từ trang này sang trang khác. Điều này đặc biệt đúng khi chúng ta đưa ra cho độc giả các tài liệu có nhiều phần đánh số. Trên hình trên, độc giả đã nhảy đến web site thứ hai tại trang 6, và web site đó gồm các trang được đánh số.

Bằng việc tăng thêm các phím chuẩn (Back và Forward) của trình duyệt với các phím "Trang trước" và "Trang tiếp" được đưa váo các trang, bản thân độc giả đã có thêm công cụ để định vị qua hệ thông thông tin của web site như chúng ta mong muốn. Thanh phím ấn cũng có thể hiển thị vị trí của thông tin, giống như tiêu đề chương của các cuốn sách in:

Liên kết cố định và tương đối

Không như các phím Back hay Forward trong các trình duyệt như Netscape và MS Internet Eplorer, Mosaic, chỉ có chức năng tương đối đến các trang mà độc giả vừa rời khỏi, phím Trang tiếp và Trang trước trong các trang web là các liên kết cố định do chúng ta tạo nên chỉ đến một văn bản nhất định. Bắng cách tạo các phím lật trang, phím chỉ đến mục lục, chúng ta đã cung cấp cho độc giả phương tiện hiểu cách thức chúng ta tổ chức thông tin trên web site, ngay cả khi họ đến không phải từ trang chủ, hoặc từ mục lục nội dụng. Phím ấn không cho phép độc giả đọc tin theo thứ tự họ chọn, nhưng cho phép họ đọc các trang liên tiếp như ta trình bày.