Hãy Mang Lại Thiết Kế Theo Chuẩn Mực: Tại Sao Sự Nhất Quán Là Chìa Khóa Của Trải Nghiệm Người Dùng?

Tôi thuộc thế hệ lớn lên cùng với phần mềm máy tính để bàn. Từ Windows 95 đến Windows 7, tôi đã quen thuộc với các phần mềm hoạt động chủ yếu ngoại tuyến, được điều khiển bằng chuột và bàn phím, từ rất lâu trước khi máy tính bảng và smartphone xuất hiện. Gần đây, tôi cảm thấy nhớ một khía cạnh cụ thể của thời đại đó: sự nhất quán trong thiết kế. Tôi muốn nói với bạn về "thiết kế theo chuẩn mực" (idiomatic design), nhấn mạnh tầm quan trọng của các giao diện đồng nhất, và đề xuất rằng chúng ta đã đánh mất một điều gì đó quan trọng.

Các chuẩn mực thiết kế (Design Idioms)

Giả sử bạn đang đăng nhập vào một trang web và nó hỏi: "Bạn có muốn giữ trạng thái đăng nhập không?" Có rất nhiều cách để trang web có thể yêu cầu bạn trả lời: ví dụ, một trường văn bản nơi bạn nhập "Có" hoặc "Không", hoặc một menu thả xuống để bạn chọn "Giữ đăng nhập" hoặc "Đăng xuất khi tôi đóng cửa sổ này". Nhưng trong thực tế, nó hầu như luôn luôn là một ô kiểm (checkbox). Tại sao lại như vậy?

Ô kiểm là một chuẩn mực thiết kế: nó là một thiết kế phổ biến đến mức người dùng biết cách sử dụng nó mà không cần suy nghĩ, và nếu bạn đang tạo một trang web và cần đặt câu hỏi này, bạn cũng sẽ đặt một ô kiểm mà không cần đắn đo. Đối với người xây dựng và người sử dụng, đó là một mẫu thiết kế tiêu chuẩn mà mọi người đều có thể dựa vào.

Giao diện đồng nhất

Một ô kiểm cũng là một phần của giao diện. Bạn sử dụng nó để tương tác với hệ thống bằng cách nhập dữ liệu. Giao diện sẽ tốt hơn khi càng ít yêu cầu sự suy nghĩ: dù giao diện đó là vô lăng xe hay một biểu mẫu trực tuyến, nếu bạn phải mất bất kỳ khoảng thời gian nào để tìm ra cách sử dụng nó, thì đó là điều tồi tệ. Khi bạn tương tác với nhiều thứ, bạn muốn các giao diện đồng nhất mang lại trải nghiệm nhất quán. Nếu bạn học rằng phím tắt Command + C dùng để sao chép, bạn muốn nó hoạt động ở khắp mọi nơi. Bạn không muốn phải nhớ sử dụng CTRL + Shift + C trong một số trường hợp cụ thể hay chuột phải -> sao chép trong các trường hợp khác, điều đó thật phiền phức.

Nhưng đó chính là nơi chúng ta đang đứng. Phần mềm hiện nay nằm trên internet, và các giao diện hoàn toàn không đồng nhất. Có hàng trăm cách mà các trang web khác nhau yêu cầu bạn chọn ngày tháng, nhập số thẻ tín dụng, hoặc thực hiện bất kỳ số lượng công việc phổ biến nào khác. Các phím tắt bàn phím khác nhau từ ứng dụng này sang ứng dụng khác. Có quá nhiều cách tương tác khác nhau đến mức bạn không thể nhớ hay học hết chúng. Sử dụng các ứng dụng web vào năm 2023 là một bài tập lặp đi lặp lại của việc "tôi tìm cái tôi muốn ở đâu?".

Giao diện Windows 2000 với các menu chuẩn mực

Kỷ nguyên phần mềm máy tính để bàn

Ngược lại, một trong những điểm mạnh của kỷ nguyên phần mềm máy tính để bàn là sự nhất quán cao giữa các giao diện thông qua việc sử dụng các chuẩn mực thiết kế. Hãy xem hình ảnh từ Windows 2000 ở trên:

Về mặt thị giác, nó trông có vẻ hơi xấu và lỗi thời: nó góc cạnh, phông chữ không quá đẹp và màu sắc nhạt nhòa. Nhưng giao diện này làm đúng một vài điều rất tốt:

• Cấu trúc menu File, Edit, View... là tiêu chuẩn. Dù bạn đang ở Adobe Photoshop hay Microsoft Excel, bạn đều biết lưu nằm ở File, làm lại nằm ở Edit, toàn màn hình nằm ở View, v.v.
• Menu có thể điều hướng bằng bàn phím: có một gạch chân nhỏ trong mỗi mục menu, ví dụ: F trong File và N trong New. Chúng chỉ ra các phím tắt. Bạn có thể nhấn ALT+F để mở menu File, sau đó nhấn N để mở tệp mới. Điều này phục vụ người dùng chuyên nghiệp (power-users) đồng thời làm cho các phím tắt dễ học.
• Thanh trạng thái ở dưới cùng cho bạn biết mọi thứ về trạng thái hiện tại: trang, cột, số từ, liệu bạn có đang theo dõi thay đổi hay không, chế độ chèn, v.v.
• Các mục menu được dán nhãn rõ ràng. Từ ngữ, không phải biểu tượng, là giao diện chính cho các hành động. Biểu tượng chỉ được sử dụng ở nơi chúng rõ ràng nhất. Toàn bộ giao diện không để lại nhiều chỗ cho sự đoán già. Trong hình trên, không có chỗ nào cho câu hỏi "Tôi không biết cái này làm gì gì nhỉ?". Bạn biết cách sử dụng nó, ngay cả khi bạn chưa bao giờ sử dụng nó trước đây.

Quan trọng hơn, các chuẩn mực thiết kế này không chỉ được sử dụng trong Microsoft Word, mà trên toàn bộ hệ sinh thái Windows.

Kỷ nguyên phần mềm trình duyệt

Kỷ nguyên phần mềm trình duyệt là một kỷ nguyên của các giao diện không đồng nhất. Hãy xem các ảnh chụp màn hình từ hai ứng dụng web yêu thích của tôi: Figma và Linear.

So sánh giao diện Figma và Linear

Đây có lẽ là hai phần mềm doanh nghiệp tốt nhất hiện nay. Và mặc dù chúng có nhiều tính năng giống nhau — cài đặt nhóm, hệ thống phân cấp mục trừu tượng, nhận xét cộng tác, v.v. — chúng không chia sẻ một biểu tượng duy nhất nào. Chúng không có bất kỳ chuẩn mực thiết kế chung nào. Chúng có các phím tắt bàn phím khác nhau. Cả hai đều được thiết kế rất tốt từ các nguyên tắc đầu tiên, nhưng không tuân theo những gì người dùng có thể quen thuộc từ các giao diện khác. Chúng ta đang ở trong một kỷ nguyên của các ứng dụng web được thiết kế tốt, hữu ích riêng lẻ, và tất cả chúng đều độc nhất.

Tổng thể, điều này rất gây bực bội. Sự thiếu hụt các giao diện đồng nhất có nghĩa là tôi dành phần lớn thời gian kỹ thuật số của mình không ở trong trạng thái làm việc trôi chảy, mà là đi săn tìm khắp màn hình, tự hỏi "Mình có thể bấm vào cái này không? Cái này có mở trong tab mới không? Nút 'Quay lại' của trình duyệt có cho tôi quay lại không?". Khủng khiếp!

Sự thiếu đồng nhất này xuất phát từ hai nguyên nhân:

1. Sự chuyển đổi sang thiết bị di động Tất cả các mẫu hình trong thiết kế cho ứng dụng chuột và bàn phím đều phải được phát minh lại với sự ra đời của màn hình cảm ứng. Hầu hết các ứng dụng web phải bật cả trải nghiệm di động và máy tính để bàn, và các hình thức tương tác này rất khác nhau. Do đó, hầu hết các trải nghiệm người dùng kể từ đó bị mắc kẹt ở một giai đoạn trung lập khó xử, ví dụ: menu hamburger dành cho ứng dụng di động cũng được dùng cho ứng dụng máy tính để bàn, v.v.

2. Thiếu các chuẩn mực ngoài HTML Nếu mọi người đều tuân theo cùng một chuẩn mực thiết kế, thì các giao diện sẽ trông khá nhất quán. Vào những ngày đầu của internet, có các chuẩn mực thiết kế mạnh mẽ: các siêu liên kết đến các trang khác được gạch chân màu xanh, và màu tím nếu bạn đã truy cập chúng. Tuyệt vời! Ngày nay, mọi trang web đều trình bày một trò chơi đoán mò về cách các yếu tố giao diện được định dạng. Đó là liên kết sao nhỉ? Có thể cũng được!

Có thể ngạc nhiên rằng thiết kế web hiện đại lại thiếu chuẩn mực như vậy, vì các tiêu chuẩn HTML/CSS rất chi tiết. Vấn đề là mặc dù có tiêu chuẩn để viết HTML, nhưng không ai viết HTML nữa. Người ta viết React trong TypeScript hoặc framework mới nhất. Họ nhập vô số gói npm. Tất cả những thứ đó đi qua một quy trình xây dựng phức tạp để xuất ra thứ chạy trên trình duyệt. Các nhà phát triển frontend không sai khi làm điều này. Trình duyệt ngày nay cực kỳ mạnh mẽ và cung cấp các API đa năng cho phép bạn làm gần như mọi thứ nếu bạn sáng tạo.

Nói ngắn gọn, có rất ít chuẩn mực thiết kế web vì phát triển frontend đang di chuyển quá nhanh. Các kỹ sư quan tâm đến những gì có thể làm được hơn là các câu hỏi về sự hoàn thiện, và điều đó là chính đáng. Hợp tác thời gian thực đa người dùng có giá trị hơn nhiều so với các phím tắt bàn phím cho người dùng chuyên nghiệp.

Thành công của thiết kế theo chuẩn mực

Tuy nhiên, một số tổ chức sản phẩm thành công nhất hiện nay tích cực theo đuổi các chuẩn mực thiết kế của riêng mình và đạt được sự đồng nhất nhất định trong giao diện của họ.

Apple là một ví dụ điển hình. Chúng ta đã nói về Microsoft của quá khứ, nhưng Apple ngày nay thúc đẩy một hệ thống thiết kế có quan điểm rất mạnh. Thư viện phông chữ, nút bấm, màu sắc, v.v. nói chung của Apple và sự nhất quán của nó trên tất cả các ứng dụng và thiết bị gốc của Apple đã tạo ra một hiệu ứng tuân thủ mạnh mẽ cho các ứng dụng bên thứ ba. Ngay cả khi sử dụng ứng dụng bên thứ ba trên iPhone, việc tương tác qua bàn phím, pinch-to-zoom, v.v. đều được iOS kiểm soát. Đây là một phần lớn của hiệu ứng "nó chỉ hoạt động" (it-just-works) của Apple.

Nên làm gì?

Là một người xây dựng sản phẩm, bạn muốn tuân theo các chuẩn mực thiết kế càng sát càng tốt, vì nó làm cho phần mềm của bạn dễ sử dụng hơn và tối đa hóa khả năng tương thích trên các thiết bị/trình duyệt. Tôi tuân theo các nguyên tắc này và hiếm khi phá vỡ chúng:

• Nghiên cứu và tuân theo các chuẩn mực HTML/CSS bất cứ khi nào có thể. Ví dụ, một liên kết nên được gạch chân, có màu sắc, con trỏ chuột thay đổi khi di chuột qua, và được viết dưới dạng thẻ <a>.
• Tránh các triển khai lại bằng JavaScript của các thành phần cơ bản của HTML, ví dụ: các thành phần Button của React thay vì các phần tử <button> được định dạng.
• Nghiên cứu và tuân theo các chuẩn mực của trình duyệt bất cứ khi nào có thể. Nút quay lại luôn phải hoạt động. Sao chép-dán URL nên đưa bạn đến cùng một giao diện. CTRL-click vào một phần điều hướng nên mở nó trong tab mới.
• Nếu bạn lệch khỏi các chuẩn mực chung, hãy đảm bảo rằng thiết kế của bạn hoàn toàn nhất quán về mặt nội bộ và ít nhất là "theo chuẩn mực" trong tổ chức của bạn.
• Ưu tiên từ ngữ hơn biểu tượng. Chỉ sử dụng các biểu tượng được hiểu phổ quát.
• Nếu nghi ngờ, hãy làm cho các yếu tố thị giác trông rõ ràng. Không bao giờ được nhầm lẫn về việc một thứ là nút bấm hay tab.
• Ưu tiên những gì dễ hiểu hơn những gì đẹp về mặt thị giác.

Tôi mơ về ngày mà mọi bộ chọn ngày hoặc biểu mẫu thẻ tín dụng trên internet đều hoàn toàn giống nhau: khi sau ba mươi năm phát triển lặp đi lặp lại và hàng triệu nỗ lực, chúng ta cuối cùng đã hội tụ về cái tốt nhất. Tôi mơ về một tương lai nơi trong mọi ứng dụng web, CTRL-Click mở thứ đó trong một tab mới. Sẽ thật tuyệt vời...