---

Hãy nghĩ về những website tuyệt vời mà bạn biết. Giờ thì nghĩ về lý do vì sao nó tuyệt vời. Không hẳn là vì những hình ảnh tuyệt vời khiến chúng thú vị (mặc dù hình ảnh đẹp cũng có ích) hoặc nội dung giàu thông tin bạn đọc được ở đó (mặc dù điều này cũng có lợi nhất định). Hoàn toàn không phải: chủ yếu người dùng bị ấn tượng bởi website bởi có thể thực hiện điều gì đó nhanh chóng, hiệu quả và dễ dàng trên website đó. Một trong những cách tiếp cận quan trọng để có được điều này được biết đến với cái tên thiết kế giao diện người dùng (thiết kế UI).

Thiết kế UI là quan trọng bởi nó quản lý tương tác của người dùng internet với website của bạn, và vì thế cũng là cách tương tác với sản phẩm hoặc dịch vụ bạn cung cấp. Những giao diện người dùng tốt nhất cho phép người dùng quên đi những khía cạnh kỹ thuật của website, và chỉ cần để ý tới việc mà họ muốn thực hiện. Mặc dù đó nghe có vẻ là nguyên lý cơ bản của thiết kế web, quá trình thiết kế những trang nội dung và thiết kế giao diện khá khác biệt và có những khác biệt căn bản giữa thiết kế UX, UI, web và phát triển (lập trình) web. Trong bài viết này, chúng tôi sẽ định nghĩa giao diện người dùng là gì, điều gì tạo nên giao diện người dùng tuyệt vời và 4 quy tắc giúp bạn tạo nên những giao diện người dùng tốt.

Giao diện người dùng là gì?

—

Thiết kế giao diện người dùng là việc thiết kế những trải nghiệm về mặt thẩm mỹ của những giao diện kỹ thuật số, cụ thể là những chi tiết hình ảnh trực quan như nút bấm, menu điều hướng và kiểu chữ. Điểm mấu chốt là ở vẻ ngoài và cảm giác mà giao diện mang lại và liệu người dùng có một trải nghiệm mượt mà và dễ chịu cả về vẻ đẹp cũng như sử dụng của website. Nói ngắn gọn, thiết kế UI là quá trình trong đó các nhà thiết kế và nhà phát triển tạo ra những giao diện thân thiện với người dùng liên kết khách hàng với sản phẩm hoặc dịch vụ của bạn.

Thiết kế bởi OrangeCrush

Những dạng thông dụng nhất của thiết kế UI là:

• Giao diện người dùng dạng đồ họa – có những biểu tượng hình ảnh cho nút bấm, menu, bảng điều khiển và hầu như mọi thứ mà người dùng sẽ tương tác. Một ví dụ cho dạng này chính là giao diện của máy tính hoặc điện thoại di động của bạn.
• Giao diện người dùng điều khiển bằng giọng nói – đây là những giao diện đòi hỏi giọng nói của người dùng để thực thi một tác vụ cụ thể. Chúng đang trở nên phổ biến ngày nay. Một vài ví dụ là trợ lý ảo Siri của Apple, Alexa của Amazon, Bixby của Google.
• Giao diện người dùng dạng cử chỉ – đây là những giao diện trong đó những cử chỉ của người dùng ảnh hưởng tới một sản phẩm. Một ví dụ sinh động chính là những trò chơi thực tế ảo (VR).

Bạn định nghĩa một giao diện người tốt như thế nào?

—

Như với bất cứ quá trình thiết kế nào, chìa khóa để tạo ra một thiết kế UI tốt là suy nghĩ cẩn thận về mục tiêu mà bạn muốn đạt được. Thông thường, sẽ dễ hơn khi định nghĩa loại website hay ứng dụng bạn muốn sản xuất so với việc định ra một bộ quy tắc để đạt được mục tiêu đó.

Thiết kế bởi 84 Design.

Thực ra, khá thẳng thắc để định nghĩa những đặc điểm của một thiết kế UI tốt. Đây là một vài điều cần lưu tâm:

• Một trải nghiệm “sướng” cho người dùng đồng thời cho họ sức mạnh để hoàn thành tác vụ một cách nhanh chóng và dễ dàng.
• Cần tính đến nhu cầu đa dạng của các nhóm người dùng khác nhau – nói cách khác chính là khả năng truy cập của thiết kế (đối với những người tàn tật,…)
• Giao diện nên đơn giản và đẹp mắt nhưng không quá rối rắm và gây mất tập trung. Người dùng nên có khả năng xem cách thực hiện một công việc dễ dàng như thế nào.
• Trọng tâm là ở sản phẩm và dịch vụ của bạn, và giao diện đóng vai trò như cầu nối cho khách hàng có thể tiếp cận chúng.
• Nó cho phép người dùng điều hướng và tương tác theo cách họ lựa chọn, nhưng nó cần sẵn sàng nhảy vào và giúp đỡ hoặc cung cấp sự trợ giúp nếu cần thiết.

Khi tất cả những chi tiết được kết hợp, cuối cùng bạn sẽ có được một thiết kế UI không chỉ đơn giản mà còn mạnh mẽ: một thiết kế cho phép người dùng đạt được điều họ muốn một cách nhanh chóng, và không cần phải tìm kiếm qua nhiều trang để tìm thông tin cần thiết.

Những quy tắc quan trọng của một thiết kế UI tuyệt vời

—

Giờ thì hãy cùng nhau đi xa một chút khỏi những định nghĩa cơ bản của thiết kế UI tốt và bắt đầu nhìn vào những quy tắc và kỹ thuật có thể sử dụng để đạt được nó. Mặc dù mỗi website và ứng dụng đều khác biệt, luôn có một bộ tính năng cốt lõi được chia sẻ bởi hầu như mọi thiết kế UI tuyệt vời ngoài kia. Vậy thì chúng ta hãy cùng nhau điểm qua từng quy tắc nhé!

1. Một thiết kế UI tốt luôn có sự nhất quán xuyên suốt toàn bộ website

Có lẽ thành phần quan trọng nhất của một thiết kế UI tuyệt vời chính là sự nhất quán. Lý tưởng thì mọi thành phần của website nên cho người dùng biết họ chính xác đang ở đâu. Điều này có nghĩa rằng một trong những bước đầu tiên khi phát triển một website chất lượng là cần phát triển một bộ chỉ dẫn thương hiệu dành cho nội dung text và bảng màu, để người dùng không bao giờ phải tự hỏi họ có đang duyệt trên cùng một website hay không.

Một bảng màu như thế cũng có thể được sử dụng để chỉ ra cho người dùng cách sử dụng website của bạn. Màu sắc có thể giúp người dùng dễ nhận ra những tính năng quan trọng của website. Ví dụ, nút “tìm hiểu thêm thông tin” nên trông giống với nút “yêu cầu một mẫu thử” để người dùng có thể dễ dàng tìm thấy những hành động tương tự họ đang tìm kiếm chỉ đơn giản bằng cách quét nhanh qua website.

Nút “ứng tuyển” và nút “bắt đầu” nên có thiết kế giống nhau mặc dù nội dung text là khác nhau. Nhưng nó vẫn khiến người dùng dễ dàng nhận ra rằng họ đang thực hiện cùng một tác vụ. Thiết kế bởi masiko.

Việc tạo ra những màu sắc, nút và font khác nhau cho mỗi hành động trên website của bạn khiến những người dùng vội vã khó tìm những thông tin hữu ích hơn. Tương tự như thế, việc tạo ra một nút với cùng font, kích cỡ và màu sắc cho 2 hành động hoàn toàn khác nhau có thể gây ra sự bối rối. Ví dụ bạn sẽ không bao giờ muốn hai nút “đồng ý” và “hủy” sẽ có cùng một màu.

2. Thiết kế UI tốt tránh khiến người dùng phải quá mất công sức

—

Những website tốt nhất đơn giản hóa những việc phức tạp giúp người dùng và bạn có thể đạt được điều này bằng việc giảm thiểu càng nhiều công sức thực hiện cho người dùng càng tốt. Những website tốt sử dụng khá nhiều kỹ thuât để làm việc này, từ việc khiến text dễ đọc hơn cho đến những kỹ thuật phức tạp như sắp xếp cấu trúc nội dung và trang để có hiệu quả tối đa. Để bắt đầu việc này, hãy cân nhắc những điều sau:

Sự rõ ràng về hình thức

Đây là lúc bạn sắp xếp lại những thành phần trong trang web để cho thấy mức độ quan trọng của chúng. Ví dụ, nút bấm và link nên lớn hơn và màu mè hơn để thu hút sự chú ý, và vì thế đóng vai trò là một dấu hiệu rằng chúng quan trọng hơn những thành phần khác.

Một bí quyết khác là cung cấp nhiều gợi ý về mặt hình ảnh cho người dùng. Bạn có thể cung cấp những trợ giúp hình ảnh và điểm tham chiếu để giúp người dùng thông qua giao diện của bạn. Ý tưởng là khiến việc điều hướng website dễ đoán nhất có thể. Bạn không bao giờ muốn một khách truy cập ngạc nhiên vì mục đích và vị trí đặt của một núm bấm hay đường link.

Cân bằng giữa text và hình ảnh

Một thủ thuật quan trọng là giảm thiểu khối lượng nội dung dạng text bạn có trong website của mình. Người truy cập website vốn có sự chú ý ngắn hạn và việc bắt họ đọc qua một đoạn văn dài sẽ khiến họ chóng nản chí hơn. Người dùng cần có thể đọc quét qua và dễ dàng nhận diện những phần và thông tin mà họ cần tìm.

Thiết kế bởi David Ferretti

Qúa trình đơn giản

Hầu hết các tính năng của website của bạn, cho dù nó là đăng kí, đặt hàng hay yêu cầu thông tin chi tiết nên tuân theo quy tắc click 3 lần. Đúng như tên gọi của nó, bạn cần đảm bảo người dùng của mình có thể đạt được mục đích với tối đa 3 lần click chuột.

3. Thiết kế UI tốt cho người dùng khả năng kiểm soát

—

Những thiết kế UI tốt khiến người dùng dễ dàng hơn trong việc điều hướng website theo cách họ muốn, truyền sức mạnh cho họ và để họ cảm thấy có thể kiểm soát trải nghiệm của chính mình. Bạn nên đảm bảo rằng website của bạn làm việc cho người dùng, hơn là ép họ học dùng một giao diện người dùng phức tạp để truy cập những dịch vụ của bạn.

Có một số cách để làm việc đó, và dưới đây là những cách thường gặp nhất:

• Bổ sung một vài kiểu menu hoặc dấu hiệu đính kèm link đến những trang nội dung hay được dùng để chúng có thể dễ dàng điều hướng website của bạn.
• Tạo điều kiện để khách truy cập dễ dàng quay lại trang họ vừa ghé thăm. Điều này không chỉ khiến website của bạn dễ sử dụng hơn, mà nó còn khuyến khích người dùng khám phá website và cho họ kiểm soát quá trình khám phá đó.
• Ghi nhận hoặc cung cấp phản hồi mỗi khi một hành động nhất định được hoàn thành, hoặc kết quả của một hành động. Ví dụ, khi tạo một mật khẩu, cho người dùng biết rằng mật khẩu của họ có thỏa mãn điều kiện bảo mật hay không và họ còn thiếu gì.

Thiết kế bởi tikshow

• Cung cấp những cập nhật thời gian thực của trạng thái hệ thống để hạn chế việc người dùng mất kiên nhất (ví dụ khi một yêu cầu trên giao diện hoàn tất, người dùng nhìn thấy thông báo thực hiện thành công hoặc trạng thái được thay đổi từ “đang cập nhật” sang “đã hoàn tất”,…)
• Cung cấp nhãn bằng chữ và hình ảnh. Hãy làm rõ tab nào cho hành động nào bằng cách sử dụng những biểu tượng thường gặp cũng những tên tab rõ ràng.
• Cho phép tính năng tự động lưu để tránh việc người dùng bị mất dữ liệu khi không may ấn nhầm nút nào đó.
• Đi sâu thêm vào cùng một chủ đề, những thông báo lỗi nên được thiết kế cẩn thận để tránh làm người dùng chán nản. Những thông báo lỗi nên bao gồm các đường link dẫn đến trang nội dung hữu ích để khắc phục lỗi, như là link dẫn đến đổi mật khẩu.

Thiết kế bởi Allure

4. Thiết kế UI tốt khiến người dùng thoải mái

—

Thiết kế UI tốt khiến mọi người dùng cảm thấy thoải mái, và truyền sức mạnh cho mọi người khách truy cập đạt được mục đích họ muốn. Điều này có nghĩa đảm bảo rằng tất cả khách truy cập đến website của bạn cảm thấy thoải mái và tự tin khi truy cập website của bạn. Một số cách để làm việc này là:

Tránh dùng những từ khó hiểu

Đừng dùng ngôn ngữ mà người dùng của bạn không thể hiểu. Hãy nghĩ về người dùng và sử dụng những khái niệm và từ ngữ họ biết và thường sử dụng. Ví dụ, một số cá nhân làm việc trong ngành công nghiệp quần áo có thể nhắc đến khuyến mãi “buy one get one (mua 1 tặng 1)” như là BOGO, nhưng việc đặt BOGO trong website của bạn để quảng bá cho khuyến mãi này sẽ không có ý nghĩa gì lắm với phần đông khách hàng. Và nó có thể khiến người dùng bối rối và rời khỏi website.

Hãy giúp người khuyết tật có thể sử dụng sản phẩm của bạn

Thiết kế bởi OrangeCrush

Hãy nhớ rằng trong số người dùng có một bộ phận nhỏ những người dùng có thị lực kém, khiếm thính, suy giảm nhận thức hoặc suy giảm vận động. Bằng việc đảm bảo rằng website của bạn có thể phục vụ đông đảo các nhóm người dùng, bạn sẽ có thể tiếp cận và cung cấp trải nghiệm cho nhiều người dùng hơn. Hãy luôn để ý điều này khi thiết kế giao diện người dùng của bạn.

Điều này có thể có nghĩa là sử dụng những chi tiết đơn giản và độ tương phản cao nhất có thể, và giảm độ nhiễu về mặt thị giác về mức tối thiểu. Tránh sử dụng những chi tiết đồ họa hoặc đường link không hoàn toàn phù hợp với những thứ bạn cung cấp.

Ngay khi bạn bắt đầu nhìn vào những thiết kế UI xuất sắc, bạn sẽ thấy giá trị của điều này vượt xa khỏi việc mang đến trải nghiệm tốt cho những người khuyết tật. Bằng việc đảm bảo ứng dụng hoặc website của bạn nổi bật với càng nhiều người càng tốt, bạn sẽ có được một thiết kế đơn giản, tinh tế và dễ sử dụng hơn nhiều cho mọi người.

Sử dụng những gợi ý mà người dùng đã biết

Khi bạn sử dụng những gợi ý hình ảnh từ thế giới thực trong thế giới ảo, người dùng vốn đã biết ý nghĩa của nó. Chỉ cần nhìn vào máy tính của mình và bạn sẽ thấy các thư mục giống như những tệp tài liệu ngoài đời trong khi thùng rác trông giống thùng rác thường dùng trong công sở. Người dùng vốn đã hiểu chứng năng của thư mục và thùng rác và sẽ sử dụng theo cùng cách ở thế giới ảo.

Một ví dụ khác là nhiều người dùng biết rằng để thoát khỏi một màn hình, họ cần click vào nút “x” trên phía trên bên phải (hoặc trái) của cửa sổ. Điều cuối cùng bạn sẽ cần làm là thiết kế một cửa sổ bật lên (pop up) hoặc màn hình nơi mà chức năng nằm ở dưới cùng của trang.

Xem cách nút “Bỏ qua” là được đặt vào vị trí của nút “X” như thế nào? Điều này nói cho người dùng biết rằng chức năng thoát là nơi mà nút “X” được kỳ vọng bởi người dùng. Thiết kế bởi Brendox.

Tạm kết

—

Cuối cùng, mục tiêu của một thiết kế giao diện người dùng tốt là khiến việc điều hướng một website hoặc ứng dụng dễ dàng và thoải mái cho người dùng. Điều này sẽ khuyến khích người dùng khám phá sản phẩm hoặc dịch vụ của bạn mà không cảm thấy nó quá khó hoặc họ sợ làm sai.

Những thiết kế UI tốt nhất làm được nhiều điều hơn thế, nó cũng là một cách để phô diễn thương hiệu của bạn với thế giới. Bởi vì website của bạn là bộ mặt của thương hiệu hoặc sản phẩm của bạn, bạn nên thiết kế nó trong khi luôn để tâm tới khách hàng và đảm bảo họ sẽ có được trải nghiệm mà họ mong muốn. Cho dùng điều đó có nghĩa bạn phải tìm hiểu nhiều kỹ thuật thiết kế giao diện người dùng hoặc thuê một nhà thiết kế UI, mục tiêu của bạn vẫn không thay đổi – mang đến một trải nghiệm tuyệt vời cho mọi người.

Nguồn: 99designs.com