Trong thời gian gần đây, cụm từ “User Experience Design” (UXD hay UX) – thiết kế định hướng trải nghiệm người dùng – đã nổi lên như một tiêu chí mới vô cùng quan trọng trong thiết kế web. UX giúp tăng sự hài lòng, cải thiện tính tiện dụng, khả năng tiếp cận và hiệu quả tương tác của website. Với bài blog tuần này, SDmedia muốn chia sẻ với các bạn tổng hợp 100 lời khuyên từ các chuyên gia giúp tối ưu hóa trải nghiệm người dùng cho website của bạn.

Một câu nói thường được biết đến trong ngành UX là: “UX tốt là khi người dùng không nghĩ về nó". SDmedia hi vọng bài viết này sẽ giúp bạn có những cải thiện và nảy ra những ý tưởng tuyệt vời cho các dự án tiếp theo.
           

Flow (tạm dịch: Mạch theo dõi)

1. Chúng ta hình dung website như một con đường lát gạch: người dùng được đưa liên tục một cách tự nhiên nhất từ phần này sang phần khác bằng sự thấu hiểu tâm lý, mục tiêu và nhu cầu của họ.

2. Người dùng thường chú ý đến những chi tiết nằm gần phần trên cùng của trang, tuỳ theo mức độ quan trọng theo nhu cầu của họ.

3. Giao diện web nhất quán, dễ sử dụng giúp người dùng tập trung vào nội dung, cũng như đọc nội dung thoải mái hơn.

4. Tránh đưa người dùng vào các trang dead end – trang “ngõ cụt” (những trang không có đường dẫn đến một trang nào khác trên website), vì sẽ khiến họ cảm thấy bối rối và mất công “tìm đường ra”.

5. Chọn và sử dụng các patterns và giao diện web thông dụng, đừng khiến người dùng phải mất nhiều thời gian mày mò, thực hiện thêm nhiều thao tác hay tìm hiểu một điều gì đó khác lạ. Dĩ nhiên nếu mục đích website là để quảng bá những giao diện, nền tảng và tính năng website mới lạ của các công ty thiết kế và phát triển website thì là một câu chuyện khác.

Scrolling – Cuộn

6. Người dùng sẽ cuộn xuống khi có dấu hiệu rõ ràng là tiếp tục còn nội dung bổ ích bên dưới trang web.

7. Website phải có những chỉ dẫn trực quan về cách cuộn và thể hiện rõ vì sao người dùng cần phải cuộn xuống để xem thông tin.

8. Trang web càng dài, người dùng càng ít khi cuộn xuống tận cùng của trang.

9. Web “cuộn” mang lại cảm giác tốt hơn cho người dùng vì thao tác cuộn lúc nào cũng nhanh hơn click, tuy nhiên đừng tạo các page quá dài.

Tương phản và màu sắc

10. Khi thiết kế, hãy nghĩ đến những người dùng bị mù màu. Chuyển thiết kế của bạn sang grayscale để đảm bảo mọi người đều đọc được những thông tin quan trọng.

11. Đừng dùng màu xanh dương cho bất kỳ phần text nào khác ngoài đường link.

12. Hãy chú ý đến độ tương phản khi thiết kế phiên bản mobile cho website. Màn hình chói sẽ khiến trang web khó đọc..

13. Giữ lại một màu sắc để cho thiết kế CTAs trên website và đừng dùng màu này cho thành phần nào khác trên website của bạn.

14. Đưa những màu ấm và sáng lên phía trước còn những màu lạnh và tối dùng làm nền.

Loading – Tải

15. Đảm bảo người dùng đạt được mục đích sử dụng website một cách nhanh chóng và dễ dàng.

16. Yếu tố ảnh hưởng quan trọng nhất đến hầu hết người dùng là trang web có thể mang đến cảm giác nhanh chóng như thế nào (ngay cả khi đó chỉ là nhận thức chủ quan của họ).

17. Nhận thức về tốc độ website dựa vào thời gian tải, thói quen tải, thời gian chờ và độ mướt của hình ảnh.

18. Một mẹo để tăng cảm-giác-nhanh của người dùng là cho hiển thị bộ khung chính của các yếu tố trên website trước để người dùng vẫn thấy được bố cục trang dù trang web đang tải.

19. Text nên được tải trước hình ảnh trên website để người dùng có thể bắt đầu đọc nội dung trong khi phần còn lại của trang web đang được tải.

20. Chỉ cần chờ lâu hơn một vài giây cũng đủ khiến người dùng rời khỏi website.

Mobile

21. Nếu các yếu tố trên giao diện mobile quá nhỏ và gần nhau thì người dùng sẽ khó click được chính xác vào.

22. Kích thước tối thiểu cho một yếu tố có thể nhấn được (touch target) trên mobile là 1cm x 1cm với khoảng cách xung quanh hợp lý.

23. Khi một người phải dùng đến ngón út để nhấn vào các thành phần trên website hoặc app di động của bạn, thì có nghĩa là chúng quá nhỏ.

24. Khi cầm máy tính bảng, 2 cạnh bên và phần dưới cùng của màn hình là khu vực dễ dùng ngón cái để chạm nhất.

25. Đừng bắt người dùng phải quẹt dọc màn hình cho bất kỳ chức năng nào khác ngoài scrolling.

26. Không sử dụng thao tác nhấp đôi trên các thiết bị di động. Hãy đảm bảo người dùng có thể tương tác chỉ bằng một chạm.

27. Khi thiết kế layout cho các thiết bị di động, cân nhắc xem thêm người dùng thường đang dùng 1 tay hay 2 tay khi sử dụng thiết bị.

Navigation – Điều hướng

28. Menu của website phải luôn luôn rõ ràng, thuận tiện và dễ thao tác.

29. Nếu hệ thống phân cấp của website có đến 3-4 tầng, bạn nên thiết kế lại.

30. Cân nhắc sử dụng sticky menu (menu cố định), đặc biệt là với các trang web dài hoặc khi cần thao tác nhanh.

31. Điều hướng website tốt sẽ không chắn ngang màn hình mà sẽ dần biến mất vào trong background.

32. Vì đặc tính nhất quán, điều hướng của website không nên thay đổi trong toàn bộ website.

33. Để nhãn điều hướng đặc biệt, không nên sử dụng quá 2-3 từ và bắt đầu với từ quan trọng nhất (mang lại nhiều thông tin nhất).

34. Sử dụng breadcrumbs giúp người dùng biết họ đang ở đâu trên website.

35. Điều hướng trên mobile: Hiển thị các lựa chọn thường dùng nhất và ẩn các lựa chọn khác vào menu dạng hamburger.

36. Với phiên bản desktop, menu dạng hamburger ít quen thuộc hơn nên người dùng có thể sẽ khó trông thấy, ít được chú ý làm tăng interaction cost hơn và hạn chế cảm giác thông tin.

 37. Với các điều hướng thứ cấp trên mobile, hãy dùng landing page để thể hiện các hạng mục, submenu hoặc in-page menu.

38. Menu thả xuống nên ở dạng dọc, không nên ở dạng ngang, vì cuộn ngang luôn khó hơn hơn nhiều.

39. Các menu dạng bảng lớn nên có bề ngang hẹp hơn trang web, để người dùng có thể dễ dàng click thoát ra khỏi menu.

40. Các menu dạng bảng lớn này, khi sử dụng hãy sắp xếp và tổ chức lại các đường link dẫn đến các nhóm, và phân biệt rõ các yếu tố có thể click và không thể click.

41. Đừng ẩn chức năng đăng nhập và tìm kiếm trong menu của website.

Biểu mẫu

42. Các tiêu đề và ô điền chữ nên căn chỉnh theo một hàng dọc để người dùng xem thông tin nhanh hơn.

43. Tiêu đề nên đặt ngoài ô điền chữ, không nên đặt ở trong khiến người dùng khó theo dõi.

44. Chia các biểu mẫu dài thành nhiều phần có dải phân cách để thân thiện với người dùng hơn về phần nhìn.

45. Luôn đặt thông báo lỗi điền form ngay bên cạnh mục gây ra lỗi.

46. Thông báo lỗi phải hữu ích, đầy đủ, ngắn gọn và dễ hiểu.

47. Hiển thị cùng lúc tất cả các thông báo báo lỗi ngay bên cạnh mục gây lỗi để người duyệt web trên mobile không bỏ sót chúng.

Link – Đường dẫn

48. Các đường dẫn trên trang web phải nổi bật – dùng chữ màu xanh hoặc gạch dưới để thể hiện hyperlink.

49. Đường dẫn phải luôn luôn hiện rõ mình là đường dẫn (giống giao diện đường dẫn thường thấy).

50. Không nên để người sử dụng click vào link rồi mới biết link dẫn đến đâu, các đường link nên có text chú thích.

51. Đừng dùng màu xanh cho text hoặc gạch dưới các yếu tố không phải là đường link trên website hay app.

52. Mọi chỉ dẫn đến 1 URL bất kỳ trên website luôn phải liên kết dẫn đến trang đó.

53. Một vài yếu tố trên trang web, chẳng hạn như hình ảnh hoặc review sản phẩm, người dùng phải có thể click được (vì họ luôn nghĩ thế).

54. Dùng một màu khác để thể hiện các đường dẫn đã xem trên website để người dùng không mất công ghi nhớ.

Dù có nhiều xu hướng và phát triển công nghệ trong quá trình xây dựng, nhưng thành công của bất kỳ một website (hay app) nào vẫn chỉ xoay quanh một điều: làm thế nào người dùng cảm nhận được nó tốt nhất. “Trang web (app) này có cung cấp cho tôi giá trị mà tôi cần hay không? Nó dễ sử dụng hay không? Có cảm thấy thoải mái khi sử dụng hay không?”.

Đây là những câu hỏi xuất hiện trong tâm trí của khách hàng khi họ tương tác với sản phẩm của chúng ta và cũng là cơ sở quyết định xem họ có trở thành “khách hàng thường xuyên” của website hay không.

Từng điều trong 100 lời khuyên mà chúng tôi muốn chia sẻ đều muốn cùng bạn cố gắng để làm cho người dùng trả lời “Có” cho tất cả những câu hỏi trên. Hãy đón xem 46 lời khuyên còn lại trong bài blog tuần sau của SDmedia nhé! Rất là thú vị đó!

Nguồn: Intechnic | Biên dịch & Biên tập: SDmedia