a. Định nghĩa
Visual Framework nhằm thiết kế các trang bằng cách sử dụng bố cục cơ bản giống nhau, cùng màu, cùng thành phần mẫu mã, tuy nhiên cùng lúc tạo khả năng để thiết kế có thể thay đổi theo nội dung các trang khác nhau [12].
b. Các tình huống áp dụng
Khi bạn thiết kế một website với nhiều trang hoặc một UI với nhiều cửa sổ, hoặc hầu hết các phần mềm phức tạp. Bạn muốn chúng ở cùng nhóm và trông giống nhau nhưng được thiết kế khác nhau. Chúng cần phải dễ sử dụng và dễ định hướng.
c. Tại sao
Khi một UI sử dụng màu giống nhau, các phông chữ, các bố cục tương tự, các tựa đề và các hướng dẫn định vị ở vị trí giống nhau thì người sử dụng sẽ biết họ đang ở đâu và phải tìm kiếm ở đâu. Họ không cần phải làm quen với bố cục mới mà mỗi lầm họ chuyển nội dung từ trang này qua trang khác.
Một Visual Framework tốt, được lặp lại trên mỗi trang sẽ giúp nội dung trang nổi bật hơn. Một số thì dễ bị mờ nhạt trong mắt người sử dụng, và một số sự thay đổi thì được chú ý. Hơn nữa, thêm các yếu tố vào Visual Framework sẽ giúp bạn đưa tên tuổi của website hoặc sản phẩm.
d. Bằng cách nào
Thiết kế thống nhất về look-and-feel cho mỗi trang hoặc cửa sổ mà bạn xây dựng. Các trang chủ và cửa sổ chính là đặc biệt và được bố trí hơi khác biệt so với các trang phụ, tuy nhiên chúng vẫn có chung một số đặc điểm với các phần còn lại. Ví dụ:
- Màu sắc: màu nền, màu chữ, và màu nhãn.
- Phông chữ: tựa đề chính, tựa đề phụ, chữ thường, chữ nhỏ.
- Kiểu viết và ngữ pháp: tựa đề, tên, nội dung, miêu tả ngắn, các đoạn văn dài, các phần sử dụng ngôn ngữ.
Tất cả các trang hay cửa sổ khác cũng cần có chung những điểm sau: - Tựa đề, logo,…
- Các thiết bị định hướng: một tập các link, nút OK/Cancel, Back, Quit hoặc Exit và các mẫu định vị như Global Navigation, Sequence Map và Breadcrumbs.
- Khoảng cách và liên kết: lề trang, khoảng cách các dòng, khoảng cách giữa các nhãn và các điều khiển, các chữ.
- Hệ thống bố cục: sắp xếp mọi thứ trên trang, trong mỗi cột hay dòng, xem xét khoảng cách lề được đặt ở đâu.
Nếu bạn quen thuộc với các định nghĩa về thiết kế đồ hoạ thì bạn có thể nhận ra các kỹ thuật này như bao gồm hệ thống bố cục. Một hệ thống bố cục là một mẫu có hệ thống cho một loạt các trang hay bố cục. Trên mỗi trang các nhãn khác nhau nhưng tất cả các trang sử dụng chung một lề nhất định và sắp xếp nội dụng của chúng trong phạm vi dòng. Một Visual Framework tốt thường bao gồm một hệ thống bố cục, nhưng cũng có lúc bao gồm khía cạnh look-and- feel.
a. Định nghĩa
Center Stage đặt phần quan trọng nhất của UI vào bộ phận phụ lớn nhất của trang hoặc cửa sổ, nhóm các công cụ phụ và các nội dung quanh nó vào các panel nhỏ hơn [15].
b. Các tính huống sử dụng
Khi nhiệm vụ chính của trang là thể hiện thông tin mạch lạc tới người sử dụng, để họ tổ chức tài liệu hoặc thể hiện một số nhiệm vụ. Hầu hết các ứng dụng có thể sử dụng Center Stage và trang nối rộng, các trang web và các thiết kế đồ hoạ.
c. Tại sao
Cần hướng dẫn người sử dụng ngay từ đầu đến các thông tin (hay nhiệm vụ) quan trọng nhất, thay vì để họ lạc vào trang. Sự tập trung rõ ràng thu hút sự chú ý của họ. Ví dụ, các câu đầu của các đoạn tin tức thường nêu ra vấn đề và mục đích của đoạn tin. Sự tồn tại của Center Stage nêu lên mục đích của UI. Mô hình này được sử dụng đầu tiên vào năm 1998 bởi P.R. Warren và M. Viljoen, ở báo "Design patterns for user interfaces."
Khi được thực hiện người sử dụng sẽ tiếp cận các mục gắn với trung tâm. Điều này sẽ dễ dàng cho họ thay vì lướt qua trang để tìm kiếm cái gì sẽ xảy ra trước, cái gì sau.
d. Bằng cách nào
Thiết lập thứ bậc hiển thị, Center Stage sẽ chiếm ưu thế các phần khác. Khi thiết kế Center Stage ta cần xem xét các yếu tố quan trọng sau:
Size: Nội dung của Center Stage cần phải rộng gấp hai lần so với các phần bên trong lề của nó, và cao gấp hai lần so với lề trên và lề dưới (có thể thay đổi kích cỡ, tuy nhiên nó nên được giữ như vậy khi người sử dụng thấy nó lần đầu).
Color: Sử dụng màu sắc đối lập với thông tin bên trong lề. Ở desktop UI, màu trắng được sử dụng đối nghịch với màu nâu của cửa sổ. Màu trắng cũng thường được sử dụng ở các trang web. Các nút quảng cáo và định hướng thường có màu sắc khác, do đó người sử dụng web thường tìm kiếm các bài viết trên nền màu trắng.
Headlines: Các tựa đề lớn là các điểm trung tâm, chúng có thể thu hút sự chú ý của người sử dụng vào đỉnh của Center Stage. Điều này thường hay thấy ở báo chí.
Context: Người sử dụng trông chờ điều gì khi mở một trang? Một thiết kế đồ hoạ, một bài viết dài, một sơ đồ, một cây hệ thống. Hãy tận dụng sự kỳ vọng của họ, hãy đặt nó vào vị trí trung tâm và làm cho nó dễ nhận biết.
Lưu ý: Không quan trọng đặt Center Stage ở đâu, tất cả đều có thể chấp nhận. Nếu nó đủ lớn, nó sẽ được nằm ở vị trí trung tâm.
2.2.2.3 Titled Sections
Hình 2-15. Giao diện sử dụng mẫu Titled Sections
a. Định nghĩa
Titled Sections xác định các bộ phận nội dung tách biệt bằng việc tạo ra tiêu đề hiển thị rõ ràng cho mỗi bộ phận, sau đó đặt chúng vào một trang [15].
b. Các tình huống sử dụng
Khi có nhiều nội dung trên trang, nhưng ta muốn trang đó có thể dễ dàng được đọc và hiểu. Do đó chúng ta nên nhóm các nội dung vào cùng một bộ phận theo chủ đề hoặc nhiệm vụ miễn sao phù hợp với người sử dụng.
c. Tại sao
Các bộ phận được định nghĩa và đặt tên rõ ràng làm cho nội dung được chia thành các đoạn dễ hiểu và dễ dàng được tìm thấy ngay từ đầu. Do đó nó làm cho kiến trúc thông tin rõ ràng, mục giới thiệu chương đưa ra thông tin để truyền đạt về thứ bậc hiển thị, về cấu trúc thực sự của nó.
Khi người sử dụng thấy một trang được chia ra thành các khoảng như vậy, nó sẽ khiến họ sử dụng dễ dàng hơn trên trang. Bởi vậy ta phải đặt chúng một cách hợp lý.
d. Bằng cách nào
Đầu tiên, Chia nội dung ra thành từng khoảng dễ hiểu, đưa ra các tên ngắn và dễ nhớ (tốt nhất là một hoặc hai từ). Sau đó chọn các kiểu trình bầy sau:
- Các tựa đề: sử dụng phông nổi bật hơn những phần còn lại, kích cỡ lớn hơn và màu mạnh hơn (không có màu nào tốt hơn màu đen, kể cả màu đỏ).
- Thử đảo tựa đề ngược với mảng mầu đối lập. Màu trắng trên nền tối, làm nó giống với tilebar của windows.
- Đưa các bộ phận trên các màu nền khác nhau rất hữu hiệu trên các trang web và giao diện, tuy nhiên nó không thông dụng trên các UI của desktop.
Nếu ta gặp khó khăn trong việc đưa tiêu đề hợp lý cho các khoảng nội dung, có thể đó là dấu hiệu việc nhóm không phù hợp cho nội dung. Ta nên cân nhắc việc chia thành các khoảng khác nhau sao cho dễ đặt tên và dễ nhớ.
2.2.2.4 Card Stack
Hình 2-16. Giao diện sử dụng mẫu Card Stack
a. Định nghĩa
Card Stack đặt các bộ phận nội dung trên các kênh hoặc “card” tách biệt, và xếp chúng lại sao cho chỉ có một hiển thị ở một thời điểm, sử dụng tab hoặc các thiết bị khác để người sử dụng có thể tiếp cận tới chúng [14].
b. Các tình huống sử dụng
Khi có quá nhiều tài liệu trên trang. Có quá nhiều nút điều khiển và lỗi trên UI mà không có cấu trúc vững chắc sẽ làm cho người sử dụng mất tập trung. Ta có thể nhóm các nội dung vào Titled Sections, nhưng chúng sẽ quá lớn và không vừa vào trang cùng một lúc. Hơn nữa người sử dụng chỉ cần tập trung vào một bộ phận tại một thời điểm.
c. Tại sao
Các “cards” được gắn nhãn giúp cho các nội dung được cấu trúc thành các khoảng dễ hiểu, mỗi phần sẽ trở nên dễ hiểu ngay từ đầu. Tab là công cụ phổ biến nhất của Card Stack và nó rất quen thuộc với người sử dụng.
d. Bằng cách nào
Đầu tiên ta tạo cấu trúc thông tin tốt. Chia nội dung thành các đoạn dễ hiểu, đưa ra các tựa đề ngắn gọn và dễ hiểu (một hoặc hai từ). Nếu ta tách nội dung sai, người sử dụng sẽ phải trở đi trở lại giữa các card khi họ nhấn vào thông tin hoặc so sánh chúng.
Ta chọn các cách trình bầy sau:
- Tab chiều thẳng đứng cho phép bạn ép Card Stack vào một khoảng nhỏ và cao, nơi không thể vừa với các trang tab thông thường. - Một cột bên trái với các tên phù hợp với nhiều trang web hoặc các
hộp thoại. Ta có thể đưa nhiều card vào cùng một cột. Nó cho phép ta tổ chức card theo thứ tự, cách mà ta không thể thực hiện với tabs. - Một số UI có danh sách drop-down ở đỉnh mỗi trang, nó chiếm ít khoảng trống hơn là một cột link, tuy nhiên điểm yếu của nó là sự rõ ràng: danh sách drop-down thường có chức năng như điều khiển và người sử dụng thường không nhận biết nó như một thiết bị định hướng.
2.2.2.5 Closable Panels
Hình 2-17. Giao diện sử dụng mẫu Closable Panels
a. Định nghĩa
Closable Panels đặt các bộ phận của nội dung vào các kênh tách biệt để người sử dụng mở và đóng chúng một cách riêng biệt từng cái một [12].
b. Các tình huống sử dụng
Khi có nhiều thứ có mặt trên trang, nhưng bạn muốn sử dụng mỗi thứ một cách nhanh gọn. Chia nội dung của trang thành các bộ phận và đặt tên rõ ràng, như với Titled Sections và Card Stack. Người sử dụng muốn xem hai phần hoặc nhiều hơn cùng một lúc.
c. Tại sao
Bạn muốn Closable Panels ở nhiều nơi mà bạn có thể sử dụng Card Stack- một công cụ tiết kiệm khoảng trống và phụ thuộc vào việc người sử dụng nhấn vào đó để đạt được nó. Tuy nhiên Closable Panels đưa ra các điểm linh hoạt sau:
- Closable Panels có thể chứa các bộ phận với các kích cỡ khác nhau. Nếu sử dụng Card Stack với các bộ phận có các kích cỡ khác nhau, các bộ phận nhỏ sẽ có các khoảng trắng lớn, như vậy khá là thừa khoảng trống.
- Người sử dụng có thể mở vài bộ phận cùng lúc. Điều đó rất tốt trong việc điều khiển các công cụ và giúp người sử dụng thông thạo đối với các loại ứng dụng phức tạp, họ có thể mở nhiều kênh cùng lúc và giữ chúng trong tầm quan sát mọi lúc.
Closable Panels cũng có mặt hạn chế: các trang tab được sử dụng phổ biến với hầu hết mọi người, nhưng Closable Panels thì không. Hơn nữa việc cho phép mở nhiều bộ phận cùng lúc có thể đem kết quả ngược lại bởi nó làm cho môi trường lộn xộn và khó sử dụng.
d. Bằng cách nào
Chia nội dung thành các bộ phận, đặt tên chúng một cách phù hợp, đưa chúng vào các kênh nơi chúng xuất hiện và biến mất khi bạn nhấn vào một nút hoặc một link. Đặt một mũi tên, dấu cộng, hình tam giác hoặc hình chữ ">>" trên nút hoặc link đó, đưa ra tín hiệu với người sử dụng rằng cái đó sẽ đóng hoặc mở.
Hầu hết các ứng dụng mà sử dụng công cụ này, cửa sổ bao gồm Closable Panel xuất hiện và biến mất khi các kênh được mở hoặc đóng.
Lưu ý: Ta có thể sử dụng Card Stack đặt bên trong Closable Panel khi ta có nhiều bộ phận phải xử lý.
2.2.2.6 Movable Panels
a. Định nghĩa
Movable Panels đặt các công cụ hoặc các bộ phận có nội dung khác nhau vào các kênh tách biệt, để người sử dụng di chuyển chúng nhằm tạo ra một bố cục theo ý muốn [15].
b. Các tính huống sử dụng
Khi trang có một vài phần giao diện mạch lạc mà nó không cần phải được đặt ở một hình dáng duy nhất. Nghĩa là người sử dụng có thể để chúng ở bất kỳ vị trí nào trên trang. Movable Panels giúp người sử dụng có cảm giác làm chủ phần mềm, hoặc ít nhất họ cảm thấy thú vị khi điều khiển chúng.
c. Tại sao
Khi bạn làm việc gì đó một thời gian, bạn muốn sắp xếp lại môi trường để phù hợp với phong cách làm việc của bạn. Bạn có thể đặt các công cụ hay dùng gần nơi bạn làm, ẩn những gì bạn không cần và ghi nhớ nơi mà bạn đặt chúng. Movable Panels sẽ giúp bạn làm việc hiệu quả hơn và dễ dàng hơn.
d. Bằng cách nào
Để người sử dụng di chuyển các phần UI quanh trang theo ý muốn. Lưu bố cục cho lần sau sử dụng lại phần mềm đó, nhất là khi nó là phần quan trọng trong cuộc sống của họ.
Phụ thuộc vào thiết kế mà bạn lựa chọn, bạn có thể tự do đặt những phần trong trang vào bất kì nơi nào, thậm chí nếu chúng chồng lên nhau. Hoặc bạn có thể quy định bố cục với các “vị trí” của các phần. Điều này giúp cho người sử dụng không mất quá nhiều thời gian vào tìm kiếm cửa sổ.
Người sử dụng sẽ thấy hữu dụng khi có hành động “trở lại bố cục default” ở nơi nào đó trên UI nếu họ hoàn toàn bị lộn xộn và muốn bắt đầu lại. Khi dùng Movable Panels, hãy xem xét cẩn thận những di chuyển ngẫu nhiên của bảng. Nếu người sử dụng kéo một bảng và không chú ý tới một nơi là họ có thể không biết ngay họ đã làm gì hoặc làm sao để làm lại nó.
2.2.3 Các mẫu hành động
Đề cập tới các hành động trên giao diện, như các nút và menu. Các hành động này làm cho giao diện đỡ nhàm chán và dễ sử dụng.
2.2.3.1 Button Groups
Hình 2-19. Giao diện sử dụng mẫu Button Groups
a. Định nghĩa
Button Groups trình bầy các hành động liên quan thành một cụm nhỏ các button, xếp theo chiều ngang hoặc dọc. Tạo ra vài nút nếu chúng có ba hoặc bốn hành động hoặc nhiều hơn [15].
b. Các tình huống sử dụng
Khi trình bầy một số nhỏ (hai đến năm) các hành động, chúng có liên quan đến nhau và chúng có chức năng với cùng một đối tượng hoặc có cùng ảnh hưởng hoặc bổ sung lẫn nhau.
Các nút OK, Cancel, Apply và Close thường thấy ở các nhóm. Các nút này đều hành động trên các hộp thoại. Tương tự như vậy, các nút xử lý các đối tượng trên cùng một danh sách (như Move Up, Move Down, hoặc Delete) cũng nên tạo thành nhóm.
c. Tại sao
Button Groups giúp cho các giao diện tự miêu tả. Các cụm button được sắp xếp tốt thường dễ dàng được phân biệt từ các bố cục phức tạp vì chúng rất rõ ràng, chúng đưa thông tin về sự có mặt của các hành động. Chúng thông báo “đây là các hành động mà bạn phải làm việc cùng ở khung cảnh này”.
Mối liên hệ của các button cùng nhóm: cùng hoạt động giống nhau, cùng làm các hiển thị tương tự. Sự thay đổi kích cỡ và sắp xếp hợp lý giúp các nhóm button tạo nên một dáng hiển thị hỗn hợp.
d. Bằng cách nào
Tạo một nhóm từ các button. Đặt tên button bằng động từ ngắn dễ hiểu hoặc cụm động từ. Không dùng các thuật ngữ trừ khi người sử dụng mong đợi.