[Tối ưu giao diện người dùng] Phần 02 - Bố cục và giao diện website

Để tiếp tục chuỗi bài viết về tối ưu giao diện người dùng, hôm nay chúng ta sẽ cùng nhau đến với phần 02 - bố cục và giao diện website. Ở phần này chúng ta sẽ cùng nhau tìm hiểu xem làm cách nào để sắp xếp các thành phần khác nhau của một website để tạo thành một giao diện người dùng tốt nhất để từ đó nâng cao tỉ lệ chốt đơn ngay trên website.

22 gợi ý cải thiện bố cục và giao diện cho website của bạn

01. Hãy thử tạo bố cục một cột cho website của bạn:

Cách bố trí nội dung một cột cho phép bạn dễ dàng kiểm soát câu chuyện của mình. Ngoài ra cách bố trí này giúp khách hàng dễ dàng theo dõi câu chuyện của bạn một cách mạch lạc hơn và không bị gây mất tập trung bởi yếu tố ngoại vi khác. Hãy dẫn dắt khách hàng của bạn với một câu chuyện lôi cuốn và một lời kêu gọi hành động thật nổi bật ở cuối trang. Cách bố trí bố cục này phù hợp cho những website chỉ bán một sản phẩm duy nhất hoặc để tạo pagesale (trang bán hàng).

02. Hãy tổng hợp các chức năng tương tự lại thành một chức năng duy nhất:

Trong quá trình xây dựng website chúng ta thường không để ý đến việc phân mảnh chức năng ảnh hưởng đến trải nghiệm của khách hàng như thế nào. Việc phân bố các chức năng chung quy chỉ thực hiện một chức năng tương tự như chức năng liên hệ dưới đây mang lại cho khách hàng cảm giác rối rắm vì không biết nên chọn nút nào là hợp lý nhất. Vì thế với những chức năng giống nhau hay tương tự nhau bạn nên tổng hợp lại thành một nút chức năng duy nhất và đặt ở nơi dễ thấy nhất.

03. Cố gắng cho khách hàng biết họ đang ở đâu và họ có thể đi đến đâu:

Một giao diện website trực quan sẽ có các yếu tố như ánh sáng, màu sắc và độ tương phản là những dấu hiệu giúp người dùng hiểu được hệ thống ký hiệu cơ bản trong giao diện của bạn. Bạn có thể quan sát hình ảnh bên dưới và dễ dàng nhận ra rằng với giao diện bên trái chúng ta dễ dàng nhận ra chúng ta đang ở đâu và chúng ta có thể đi đến đâu trên website này. Để đạt được điều này cho website của mình bạn cần thống nhất các thao tác theo một quy chuẩn duy nhất để người dùng dễ dàng nhận ra.

04. Đưa ra lời gợi ý cụ thể cho trang sản phẩm:

Có lẽ bạn đã quen với việc sử dụng ứng dụng gợi ý sản phẩm trong trang sản phẩm của mình, đây là một hình thức bán thêm vô cùng hiệu quả và được rất nhiều website tin dùng. Nhưng đại đa số các website đều đưa ra sản phẩm gợi ý theo hình thức cho khách hàng tự lựa chọn mà không gợi ý điều gì. Theo tâm lý học hành vi, việc cung cấp một gợi ý cho khách hàng sẽ nâng cao tỉ lệ mua thêm rất nhiều so với việc để khách hàng phân vân.

05. Hiển thị trạng thái của đơn hàng hay trạng thái thanh toán:

Trong bất kỳ giao diện người dùng nào, chúng ta nên hiển thị các phần tử có thể có các trạng thái khác nhau. Email có thể được đọc hoặc chưa đọc, hóa đơn có thể được thanh toán hay không,... Trạng thái giao diện có thể giúp mọi người hiểu hành động trong quá khứ của họ đã được thực hiện thành công hay chưa, cũng như liệu có nên thực hiện các hành động tiếp theo để xử lý hay không.

06. Hãy thử thao tác trực tiếp thay vì menu ngữ cảnh:

Đôi khi, việc cho phép các yếu tố giao diện người dùng nhất định được thực hiện trực tiếp ngay tại phần nội dung cần xử lý sẽ giúp người dùng đơn giản thao tác hơn trước rất nhiều. Ví dụ: khi hiển thị danh sách dữ liệu, chúng ta nên cho phép người dùng thực hiện điều gì đó với các mục trong danh sách. Nhấp vào hoặc di chuột qua một mục trong danh sách này có thể được sử dụng để thể hiện rằng một mục cụ thể sẽ được thao tác (đã xóa, đổi tên, v.v.)

07. Hãy thử hiển thị từ từ thay vì hiển thị ngay lập tức:

Các phần tử của giao diện thường xuất hiện, ẩn, di chuyển, thay đổi và thay đổi kích thước khi người dùng thực hiện thao tác nào đó. Khi các yếu tố phản ứng lại các tương tác của chúng ta, đôi khi nó sẽ dễ hiểu hơn một chút khi các thao tác đó được hiển thị từ từ. Vì vậy hãy thay đổi thời gian xuất hiện của các phần tử khi có thao tác từ ngay lập tức thành 0.5s để xem nó sẽ mang lại trải nghiệm như thế nào nhé.

Lưu ý: thời gian nên được chọn là 0.5s vì khoảng thời gian này là vừa đủ, bạn không nên để thời gian xuất hiện quá lâu vì nó sẽ mang tới trải nghiệm tiêu cực cho người dùng.

08. Bỏ bớt các đường viền để tăng sự tập trung vào nội dung nhiều hơn:

Để tránh khách hàng tập trung vào những thành phần không cần thiết, bạn có thể bỏ các đường viền phân cách giữa các thành phần để người dùng tập trung vào nội dung chính nhiều hơn. Bạn có thể thay thế các đường viền bằng các mảng màu khác nhau để làm nổi bật nội dung bạn muốn.

09. Hãy thêm thiết kế cho những phần dữ liệu còn trống:

Có những trường hợp bạn sẽ có từ 0 hoặc hơn 10.000 kết quả dữ liệu được hiển thị theo nhiều kiểu khác nhau. Chúng ta thường quên thiết kế cho trường hợp khi không có gì để hiển thị khi chưa có nội dung, vì thế chúng ta rất dễ bị người dùng bỏ qua. Lần đầu tiên người dùng nhìn vào website của bạn, và tất cả những gì chúng ta đưa ra là chỉ một khoảng trống mà không có bất kì sự hướng dẫn nào cả, điều này khiến người dùng không biết phải làm gì tiếp theo. Vì thế, hãy chỉ dẫn họ đến một nơi khác trong website của bạn.

10. Cố gắng thống nhất giao diện theo một chuẩn duy nhất:

Trong quá trình thiết kế chúng ta thường không xây dựng cho mình một chuẩn chung duy nhất cho giao diện của toàn hệ thống. Vì thế nhiều khi cùng hiển thị một nội dung và cách giải quyết giống nhau nhưng lại được hiển thị bằng nhiều cách khác nhau. Điều này khiến người dùng cảm thấy khó khăn trong quá trình sử dụng website của bạn, vì thế bạn nên cố gắng thống nhất giao diện theo một chuẩn duy nhất.

11. Thiết kế theo quy ước chung thay vì tạo ra bộ quy chuẩn mới:

Trong thiết kế trải nghiệm người dùng có những quy ước bất di bất dịch mà bạn cần tuân theo, việc tạo ra bộ quy luật mới chỉ làm người dùng chỉ cảm thấy khó chịu hơn khi sử dụng website của bạn. Ví dụ cụ thể cho trường hợp này người dùng muốn quay lại bước trước đó, mặc định họ sẽ nhấp vào nút "quay lại" nằm ở bên trái chứ không phải ở bên phải như hình ảnh (bên phải) dưới đây hay bạn muốn cho người dùng biết để xóa một đoạn tin nhắn bạn cần nhấp vào biểu tượng xọt rác chứ không phải nhấp vào một cái phao cứu sinh.

12. Hãy nhóm các mục có liên quan với nhau vào một chỗ duy nhất:

Việc nhóm các mục có liên quan lại với nhau là một cách cơ bản để người dùng dễ dàng sử dụng website của bạn hơn. Việc tập trung các mục có liên quan lại với nhau còn giúp người dùng không lãng phí nhiều thời gian để tìm kiếm từ đó giúp họ tập trung hơn vào công việc hiện tại.

13. Hãy sử dụng các nút thay vì chỉ sử dụng các nút nhấn:

Khi website của bạn có lượng người dùng lớn, bạn nên quan tâm đến lượng người dùng chân thành. Lường người dùng thường vào website của bạn sẽ tìm cách cho phép họ thực hiện nhiệm vụ lặp đi lặp lại nhanh hơn và phím tắt là một trong những cách giải quyết vấn đề này. Các phím nóng, một khi đã được nhớ, có thể tăng tốc độ thao tác các tác vụ một cách đáng kể.

Một ví dụ của việc này là việc sử dụng các phím nóng J và K cho kế tiếp và trước đó đã được phổ biến rộng rãi bởi các ứng dụng như Gmail, Google Reader (lịch sử hiện tại), Twitter và Tumblr.

14. Thông báo nhắc nhở một cách nhẹ nhàng thay vì sử dụng cửa sổ bật lên:

Cửa sổ bật lên là một cách gây chú ý cho người dùng đang sử dụng website nhưng đôi khi nó sẽ gây ra khó chịu. Bạn thử hình dung mình đang viết nội dung mô tả cho sản phẩm mà cứ mỗi 2 phút lại hiện lên một cửa sổ thông báo chúng ta nên lưu bài để đề phòng cúp điện đột ngột, nhắc nhở lưu bài là hợp lý nhưng cái cửa số ấy lại gây cản trở công việc của mình và gây cảm giác vô cùng khó chịu. Để khắc phục điều này bạn có thể sử dụng các thông báo với kích thước nhỏ hơn và nằm bên phải màn hình để không ảnh hưởng đến công việc của người dùng.

15. Tích hợp nhiều chức năng cần thiết trong cùng một phiên làm việc:

Thiết kế đơn giản và dễ sử dụng lúc nào cũng được người dùng đánh giá cao. Vì trong một cửa sổ làm việc chúng ta có thể thực hiện nhiều công việc khác nhau. Ví dụ trong phần tìm kiếm chúng ta vừa có thể vừa tìm kiếm vừa có thể xem trước sản phẩm hay là đánh giá ngay tại trang tìm kiếm.

16. Mô tả các chức năng một cách dễ hiểu:

Việc sử dụng các biểu tượng tượng trưng cho các chức năng là một cách làm khá quen thuộc hiện nay. Nhưng đôi khi các chức năng đó lại quá khó để thể hiện qua một biểu tượng cụ thể vì thế đối với các bước thiết lập mới bạn có thể kèm thông tin mô tả cạnh bên để người dùng làm quen và dễ hình dung hơn.

17. Thể hiện thời gian một cách thông minh:

Việc thể hiện thông tin về thời gian một cách thông minh sẽ giúp người dùng đỡ mất thời gian suy nghĩ về các khoảng thời gian ấy. Ví dụ như hình ảnh bên dưới, bạn có thể thấy việc thể hiện thời gian ở hình bên trái sẽ dễ hình dung hơn hình bên phải. Việc này tuy nhỏ nhưng lại mang lại cảm giác vô cùng tích cực từ phía người dùng.

18. Tăng cường sự chú ý:

Tại các điểm quan trọng mà chúng ta cần tăng sự chú ý của khách hàng thì việc sử dụng các yếu tố như tăng kích thước hay tăng độ tương phản là một trong những việc làm cần thiết. Ví dụ như bạn đang viết một bài bán hàng, bạn dẫn dắt khách hàng từ mở đầu và muốn chốt hợp đồng tại cuối bài, ở cuối bài bạn để một form để khách hàng có thể điền thông tin nhưng form đăng ký ấy không thực sự nổi bật để thu hút sự chú ý của khách hàng và thế là bạn đã bỏ mất một cơ hội. Việc thiết kế form tăng cường sự chú ý là một ngụ ý cho khách hàng biết mình nên làm gì khi đọc xong bài viết.

19. Đặt sản phẩm theo bộ sưu tập thay vì đặt riêng lẻ:

Việc đặt các sản phẩm liên quan với nhau thành một bộ sưu tập sẽ giúp khách hàng khao khát sở hữu hơn. Vì bản chất của chúng ta đều mong muốn sở hữu những sản phẩm hoàn chỉnh và có thể kết hợp với nhau để được một trải nghiệm tốt hơn. Ví dụ: khi bán bộ sản phẩm chăm sóc sắc đẹp, bạn có thể tạo ra một bộ sản phẩm mà chúng có thể hỗ trợ với nhau để mang lại cho người dùng một giải pháp triệt để hơn.

20. Hãy phản hồi thay vì lặng im:

Khi thực hiện một thao tác nào đó trên website, người dùng luôn mong đợi xem mình đã thực hiện nó thành công chưa hay còn gặp lỗi nào đó để có thể gải quyết. Việc phản hồi người dùng là cách hữu dụng nhất để giải quyết mong muốn của khách hàng. Việc phản hồi không những cung cấp thông tin cho người dùng mà còn cho họ một cảm giác an tâm hơn khi thao tác trên website của bạn. Ví dụ như việc gửi mail mà không có thông báo phản hồi thì thực sự người gửi sẽ khá là khó chịu đó.

21. Sử dụng nhiều khoảng trống hơn:

Việc sử dụng nhiều khoảng trống hơn sẽ giúp cho đoạn văn bản trở nên dễ đọc hơn so với việc đặt các đoạn văn bản sát nhau. Nhưng bạn cũng nên lưu ý, chúng ta chỉ nên sử dụng khoảng cách hợp lý. Việc sử dụng khoảng trống vô tội vạ sẽ khiến người dùng cảm thấy khó chịu hơn đấy.

22. Hãy tạo một giao diện tương thích với mọi thiết bị:

Hiện nay điện thoại thông minh đang xuất hiện trong mọi hoạt động của con người. Từ lúc ăn cho đến lúc ngủ, không khó bắt gặp một ai đó đang sử dụng smartphone. Và theo báo cáo, hiện nay việc sử dụng smartphone để duyệt web và cập nhật thông tin rất cao. Vì thế việc sở hữu một website hiển thị không tương thích với smartphone xem như bạn đã lỡ mất rất nhiều cơ hội. Bạn có thể hình dung khi vào một website mà các văn bản thể hiện nhỏ xíu, muốn xem ở đâu phải dùng 02 ngón tay để phóng to lên mới có thể đọc được.