Mãi cho đến thời gian gần đây tớ vẫn luôn có kiểu suy nghĩ “xem thường” những lý thuyết về thiết kế bởi cho rằng thiết kế là một lĩnh vực của sự “sáng tạo” mà những lý thuyết cứng nhắc sẽ không thể mang lại cho bạn. Làm thế nào để tin rằng sự sáng tạo lại bắt nguồn từ việc … làm theo những quy tắc? Có lẽ tớ nhầm. Có một câu nói gần đây tớ đọc trong một cuốn sách: “Chỉ khi bạn hiểu rõ những nguyên tắc bạn mới biết được khi nào thì nên phá vỡ những nguyên tắc đó”. Vậy nên tớ đã bắt đầu chuyển hướng sang đọc những cuốn sách “cổ điển” về những nguyên tắc cơ bản trong thiết kế, bố cục cũng như phối màu. Trong thời gian tới, tớ sẽ lần lượt giới thiệu đến các bạn những cuốn sách này (một khi đã đọc xong mỗi cuốn).

Bài viết này giới thiệu đến các bạn một trong những cuốn sách có thể gọi là “kinh điển” về thiết kế giao diện người dùng: “Designing Visual Interfaces: Communication Oriented Techniques” của hai tác giả Kevin Mullet và Darrell Sano (nhà xuất bản SunSoft của Sun Microsystems). Cuốn sách là kết quả của những buổi hướng dẫn (Applying Visual Design: Trade Secrets for Elegant Interface)

Giới thiệu về cuốn sách (Prentice Hall)

Cuốn sách miêu tả những kỹ thuật cơ bản được sử dụng để nâng cao hiệu quả trực quan của giao diện đồ hoạ người dùng (GUI – Graphical User Interface), cách trình bày dữ liệu, cũng như các ấn phẩm đa phương tiện. Tác giả cuốn sách đã tiếp cận lĩnh vực thiết kế giao diện từ khía cạnh của những thiết kế đồ họa “hướng giao tiếp” (“communication-oriented”), các thiết kế công nghiệp, và kiến trúc. Những kỹ năng, bài tập, và sự định hướng của những nguyên tắc trong thiết kế này là rất quan trọng đối với sự thành công của mỗi giao diện người dùng. Mặc dù vậy, rất ít những người lập trình phần mềm, những người chuyên nghiên cứu về yếu tố con người, hay người quản lý sản phẩm có được sự huấn luyện cần thiết trong những lĩnh vực như vậy. Cuốn sách Designing Visual Interface giải quyết sự thiếu hụt này bằng cách mô tả những khái niệm quan trọng trong lĩnh vực thiết kế giao diện người dùng. Cuốn sách liệt kê những định luật cơ bản, những lỗi thường gặp, và cả những kỹ thuật áp dụng thực tế trong 6 lĩnh vực chính:

• Sự đơn giản và rõ ràng (“Simplicity and Elegance”)
• Tỷ lệ, Sự tương phản, và Sự cân đối (“Scale, Contrast, and Proportion”)
• Sự tổ chức và Cấu trúc trực quan (“Organization and Visual Structure”)
• Chương trình và Thành phần (“Program and Module”)
• Hình ảnh và Sự trình bày (“Image and Representation”)
• Phong cách (“Style”)

Về hai tác giả, Kevin Mullet là nhà thiết kế sản phẩm cho các công cụ biên tập đa phương tiện của hãng Macromedia (nay thuộc Adobe) và là người chịu trách nhiệm chính trong việc thiết kế các chuẩn giao diện chung cho tất cả các sản phẩm suyên suốt các môi trường hệ điều hành khác nhau. Mullet cũng đã từng làm việc như kỹ sư giao diện người dùng tại Sun Microsystems và đã giải quyết nhiều vấn đề trong thiết kế phần mềm. Darrell Sano là một nhà tư vấn về giao diện người dùng tại Netscape Communication Corporation, hiện đang cung cấp dịch vụ tư vấn thiết kế cho rất nhiều các tổ chức và doanh nghiệp sử dụng các công nghệ của Netscape để thiết lập vị thế của mình trên Internet. Cũng như Mullet, Sano cũng từng là một thành viên trong nhóm kỹ sư nghiên cứu các nhân tố con người tại Sun Microsystems.

Những ấn tượng

Tớ biết đến cuốn sách này một cách hoàn toàn tình cờ khi được đọc một tài liệu tham khảo (một phần trích đoạn sẽ được giới thiệu ở dưới) trong quá trình học môn CPSC 481 – Human-Computer Interaction (I). Bản thân quá trình học là tương đối chán với tớ bởi như đã nói ở đầu, tớ vốn không nghĩ rằng việc rập khuôn theo những bước đã qui định sẵn là một cái gì đó nên làm trong quá trình thiết kế – trong khi bản thân môn học chỉ là giới thiệu về những bước đó. Tuy nhiên, phải nói là nửa sau của môn học đã có ý nghĩ hơn một chút chỉ với việc đọc cuốn sách này.

Designing Visual Interfaces được trình bày giống như một bài “đại luận” của những bài tiểu luận về những vấn đề khác nhau trong thiết kế. Không chỉ là những lý thuyết với những quy tắc “suông” về những gì nên / không nên theo, nội dung của cuốn sách được hai tác giả viểt ra như những tổng kết từ những trải nghiệm thực tế của mình với rất nhiều những ví dụ thực tế trong những ứng dụng kinh điển (mà phần lớn là ở những thời kỳ đầu của nghành công nghiệp phần mềm – khi mà thiết kế của ứng dụng được chú trọng về chính những vấn đề cần giải quyết chứ không phải những giao diện màu mè với những hiệu ứng đặc biệt của các ứng dụng ngày nay).

Như tiêu đề của cuốn sách, “Communication Oriented Techniques” – “Những kỹ thuật hướng giao tiếp”, cuốn sách đề cao những chi tiết trong thiết kế nhằm truyền đạt thông tin đến người dùng – mọi chi tiết phải có một ý nghĩa và mục đích của nó nhằm giúp cho quá trình sử dụng của người dùng được dễ dàng hơn.

Trong phần dưới đây, tớ xin dịch một trích đoạn về những định luật trong thiết kế mà tớ đã rất thú vị khi đọc nó. Đây chỉ là những chi tiết đơn giản mà chúng ta bỏ qua khi gặp. Trích đoạn nằm trong chương 4 của cuốn sách – Sự tổ chức và cấu trúc trực quan (“Organization and Visual Structure”).

Sự tổ chức của nhận thức (“Perceptual Organization”)

Rất nhiều định luật về “sự tổ chức của nhận thức” lần đầu tiên được mô tả vào những năm 20 bởi những nhà nghiên cứu tâm lý của trường Gestalt. Những nhà nghiên cứu về gestalt (tự điển: một tổ hợp của các phần tử để truyền tải nhiều thông tin hơn những gì mà tất cả các phần tử thành phần có được) tập trung mô tả những quá trình mà trong đó những nhân tố riêng lẽ được nhóm thành những gestalt (tổ hợp) trong quá trình cảm nhận trực quan (Wertheiner, 1958). Bằng cách mô tả làm thế nào cấu trúc tổng thể của một tổ hợp được nhìn thấy từ những cấu trúc nhỏ hơn của các thành phần, những định luật Gestalt có thể giải thích được sự thành công của rất nhiều kỹ thuật thiết kế trực quan.

Trước hết, định luật của sự xấp xỉ mô tả khuynh hướng những phần tử riêng biệt ở gần nhau sẽ được nhóm lại với các phần tử xung quanh nó hơn là những phần tử ở xa. Hiện tượng này có thể quan sát thấy ở hai mức độ khác nhau trong hình (1) ở dưới. Con mắt của chúng ta “tổ chức” những chấm nhỏ trước hết thành 4 cột đứng thay vì 4 hàng bởi vì khoảng ngăn cách giữa các cột là lớn hơn nhiều so với khoảng ngăn cách giữa các hàng. Kế đến, vì khoảng cách của hai cột giữa là “hơi” lớn hơn so với hai khoảng cách còn lại nên toàn bộ bức hình được nhìn như là bởi 2 nhóm – mỗi nhóm 2 cột.

Định luật về sự tương đồng cho thấy các phần tử sẽ được nhóm vơi nhau khi giữa chúng có sự giống nhau về các đặc tính hiển thị trực quan (ví dụ như sự giống nhau về hình dáng, kích thước, màu sắc, giá trị, và chiều như được mô tả trong các chương trước) bất kể sự khác nhau về các đặc điểm khác. Vì lí do này, hình 2 một lần nữa xuất hiện như 2 nhóm, mỗi nhóm 2 cột mặc dù khoảng cách giữa các phần tử cũng như giữa các cột đã được thiết kế bằng nhau.

Định luật của sự liên tục mô tả xu hướng gắn liền những đường nét liên tục, không đứt gãy với những cách giải thích đơn giản nhất về hình thức thay cho những cách tổ hợp khác phức tạp hơn bởi những thành phần không đồng đều vốn cũng có thể giải thích được điều mà chúng ta nhìn thấy. Hình 3 vì lý do này được nhìn nhận như là hai đường kẻ đi ngang qua nhau thay vì là của 4 đường ngắn gặp nhau tại một điểm, hay là của hai góc vuông (hoặc thậm chí là 4 góc). Một định luật liên quan khác là định luật của sự đóng kín (principle of closure) mô tả khuyên hướng đặc biệt của con người diễn giải các hình trực quan như là những đối tượng hoàn chỉnh và kín ngay cả khi hoàn toàn không có thông tin nào từ hình ảnh đó gợi ý về sự hiện diện của các hình thể này. Hình 4 (phía dưới) dễ dàng được chúng ta nhìn nhận như là sự kết hợp của 1 hình tam giác nằm trên 3 hình tròn kín, mặc dù thật ra thì không hề có hình tròn hay hình tam giác được hiển thị trên hình. Ví dụ này cũng thể hiện một đặc tính khá thú vị gọi là “sự tráo đổi giữa hình và nền” (figure-ground reversal), trong đó sự chú ý của người xem liên tục bị tráo đổi giữa những hình tròn và hình tam giác. Cả 2 đều có thể được xem như là nền cho đối tượng còn lại. Trong những phần kế tiếp của cuốn sách, chúng ta sẽ thấy rằng hiện tượng này có thể được sử dụng một cách cực kỳ hiệu quả trong việc thiết kế các biểu tượng và bố cục cho các cửa sổ ứng dụng.

Quay trở lại những định luật về nhóm, định luật về diện tích nói rằng giữa hai hình thể nằm chồng lên nhau, hình thể nhỏ hơn sẽ có xu hướng được xem như là một hình thể trong khi cái còn lại được xem như là phần nền. Hai hình vuông trong hình 5 thể hiện điều này: hình vuông nhỏ hơn được nhìn như một vật thể đứng trước cái to hơn – thay vì xem nó như là một lỗ hổng của hình vuông lớn. Bởi vì những hiện tượng như thế này xuát hiện gần như trong tất cả các vấn đề của lĩnh vực thiết kế, một nhà thiết kế thành công phải biết cách nhận ra và giải quyết nó để đảm bảo rằng cấu trúc mà anh ta muốn sẽ đến với xem.

Cuối cùng, định luật về sự cân xứng mô tả quá trình nhóm dựa trên những thuộc tính được thấy trực tiếp của đối tượng thay vì bản chất bên trong của chúng. Những đối tượng càng đối xứng sẽ càng có xu hướng được chúng ta nhìn nhận như là những tổ hợp. Hình 6 vì vậy được nhìn như là của hai hình vuông nằm chồng lên nhau thay vì là sự ghép nối của 3 hình riêng biệt.

Sự tổ chức và cấu trúc trực quan chính là yếu tố chủ yếu của một thiết kế hướng giao tiếp. Cho dù Tỷ lệ, Sự tương phản, hay Tính cân đối rất khó để nắm bắt và dự đoán, hay thậm chí không bao giờ giống nhau, sự tổ chức và cấu trúc trực quan đều dựa trên những phương thức liên tục và an toàn – có thể được áp dụng nhiều lần theo những cách tương tự như nhau. Sự tổ chức bắt đầu với quá trình phân loại trong đó việc nhóm các đối tượng liên quan và thiết lập thứ tự giữa các đối tượng và nhóm. Một khi đã có một trật tự rõ ràng, việc trình bày bản thân nó có thể được cấu trúc để thể hiện mối quan hệ giữa các thành phần trong khi vẫn giữ được sự cân bằng của bố cục.

[…]

Có lẽ các bạn đang tò mò những hiện tượng trên sẽ được sử dụng như thế nào trong quá trình thiết kế và bằng cách nào sẽ giúp chúng ta tận dụng chúng cho mục đích của mình. Đó cũng là thắc mắc của tớ khi đọc những dòng này (góp phần quan trọng trong quyết định quyết mua cuốn sách này để đọc), và vẫn đang là những thắc mắc của tớ lúc này dù đã đọc gần hết cuốn sách – và đó chính là điểm mấu chốt của quá trình thiết kế. Đọc sách giúp chúng ta biết về những chi tiết đó nhưng chính quá trình thiết kế sẽ giúp chúng ta nhận ra cách sử dụng những chi tiết đó – điều mà sẽ không cuốn sách nào hướng dẫn được.