Mẹo thiết kế UX hàng đầu

User Experience Design (viết tắt UXD hoặc UX) trong thiết kế web là 1 quy trình đảm bảo sự hài lòng của khách hàng bằng cách cải thiện tính tiện lợi, khả năng tiếp cận và mức độ hiệu quả trong tương tác người dung với websites.

Bài viết dưới đây tổng hợp 100 meo UX design hàng đầu đến từ 1 cử nhân về UX của Nielsen Norman Group mà mọi web designer nên làm theo:

    Flow

1. Nghĩ về website như 1 con đường lót gạch màu vàng: đưa người dung di chuyển liên tục từ phần này sang phần khác bằng cách thấu hiểu mục tiêu và nhu cầu từ user persona.
2. Người dung nhiều khả năng sẽ chú ý hơn đến các đối tượng gần top trang theo mức độ quan trọng
3. Các giao diện web thống nhất và dễ dùng sẽ giúp users tập trung vào nội dung nội dung
4. Tránh tạo các trang dead end – trang “ngõ cụt” trên websites vì sẽ khiến users bối rối và buộc người dùng thực hiện thêm nhiều thao tác
5. Sử dụng các patterns và giao diện website thông dụng; đừng khiến users phải học thêm gì đó mới

    Scrolling – Cuộn

6. Người dùng sẽ cuộn xuống website nếu website đó cung cấp được những thông tin thêm bổ ích
7. Website phải có chỉ dẫn trực quan về cách cuộn rõ ràng và phải đảm bảo nhiều nội dung có sẵn hơn
8. Web page càng dài thì người dùng càng ít có khả năng cuộn xuống dưới
9. Chạy webpages mang lại cảm giác tốt hơn vì thao tác cuộn nhanh hơn click – tuy vậy đừng tạo các pages quá dài

    Contrast & Color

10. Hãy thiết kế như đang dành cho những users bị mù màu. Chuyển các thiết kế của bạn sang thang màu xám để tất cả users có thể đọc được những thông tin quan trọng
11. Ngoại trừ các đường links, không sử dụng màu xanh cho bất kì chữ nào trên website
12. Chú ý đến mức độ tương phản trên mobile websites. Màn hình chói sẽ khiến website không dùng được
13. Giữ lại 1 màu để thiết kế CTAs trên website và không dùng nó cho các đối tượng nào khác
14. Các màu sáng, ấm đưa ra trước còn các màu lạnh, tối thì để ở background

    Loading – Tải

15. Đảm bảo là users của website có thể hoàn thành mục tiêu chính của họ 1 cách nhanh chóng và dễ dàng
16. Yếu tố ảnh hưởng nhiều nhất đến users chính là website có thể mang đến cảm giác nhanh chóng ra sao (mặc dù đó chỉ là nhận thức của users thôi)
17. Nhận thức về tốc độ website dựa trên thời gian tải, hành vi tải, thời gian đợi và độ mượt của các diễn hoạt
18. Hiển thị bộ khung chính của các yếu tố trên website để truyền tải được layout khi website đang tải
19. Text website nên tải trước hình ảnh để users có thể bắt đầu đọc trước khi web tải xong
20. Nếu người dùng chờ lâu hơn nhiều giây sẽ khiến users rời website

    Mobile

21. 21. Nếu các yếu tố giao diện mobile nhỏ hoặc gần nhau khi người dùng rất khó nhấn vào

21. 21. Kích thước tối thiểu của touch target trên mobile là 1cm x 1cm với padding phù hợp

21. 21. Nếu người dùng phải sử dụng ngón út trên mobile website hoặc ứng dụng đồng nghĩa là các target giao diện quá nhỏ

21. 21. Khi giữ tablet, các phần bên và phần dưới màn hình là những nơi mà ngón cái dễ tiếp cận nhất

21. 21. Ngoài cuộn webpage thông thường, đừng yêu cầu người dùng phải quét dọc với bất kì thứ gì khác

21. Không sử dụng những thao tác nhấn đôi trên các thiết bị di động. Đảm bảo người dùng có thể tương tác với 1 lần chạm duy nhất
22. Khi thiết kế mobile layouts, xem thêm liệu users thường đang dùng các thiết bị với 1 tay hay 2 tay 26.
    

    Navigation – Điều hướng

    28. Cách tiếp cận menu điều hướng trên website phải rõ nhìn
    29. Nếu tính phân cấp của website nhiều hơn 3-4 tầng thì bạn cần phải thiết kế lại
    30. Cân nhắc sử dụng sticky menus, đặc biệt là trên các webpage dài hoặc khi cần thao tác nhanh
    31. Điều hướng website tốt không hề chắn ngang màn hình mà sẽ biến mất vào background
    32. Để tạo tính thống nhất, hoạt động điều hướng không nên thay đổi trên toàn bộ website
    33. Để các nhãn điều hướng đặc biệt, thì không nên sử dụng quá 2-3 từ và bắt đầu với từ mang lại nhiều thông tin nhất
    34. Sử dụng breadcrumbs để người dùng biết họ đang ở đâu trên website
    35. Điều hướng mobile: Hiển thị các lựa chọn được sử dụng nhiều nhất và ẩn các lựa chọn khác dưới menu dạng hamburger
    36. Các menu hamburger trên desktop ít được chú ý hơn, ít quen thuộc hơn, tăng interaction cost và hạn chế cảm giác thông tin
    37. Đối với điều hướng thứ cấp trên mobile, hãy sử dụng landing page đề mục, submenu hoặc menu in-page
    38. Menu thả xuống phải theo hướng dọc, chứ không phải di chuyển theo hướng ngang vì cuộn ngang luôn khó hơn nhiều
    39. Các menu lớn nên thu hẹp lại hơn trên page để users dễ thoát ra ngoài
    40. Nếu sử dụng megamenus, hãy tổ chức các links dẫn đến các groups và phân biệt giữa đối tượng click được và không click được
    41. Không ẩn các tính năng đăng nhập hay tìm kiếm trong các menu của website

    Forms

    42. Căn chỉnh các nhãn form và các trường theo đường dọc để users xem thông tin nhanh
    43. Các nhãn trường nên để ngoài trường text, không phải bên trong vì users rất khó theo dõi
    44. Chia các sections bằng các dải phân cách để các form web dài nhìn thân thiện với người dùng hơn
    45. Đặt các form báo lỗi bên cạnh các trường dễ gây ra lỗi trên tất cả các form web
    46. Các tin nhắn báo lỗi phải hữu ích, chính xác và dễ hiểu
    47. Hiển thị các trường gây ra lỗi cùng 1 lúc, bên cạnh mỗi trường rắc rối để mobile users không bị lỡ tin cảnh báo

    Links

    48. Các link trên website phải nổi bật – sử dụng text màu xanh và/hoặc để chỉ dẫn hyperlinks
    49. Các đường link nên phải giống giao diện của các links
    50. Một user không cần phải click vào link mới biết được nó sẽ dẫn đến đâu. Text trong link sẽ nói lên điều đó
    51. Không sử dụng text màu xanh hay gạch dưới các yếu tố không có link trên websites hay ứng dụng
    52. Một chỉ dẫn đến 1 URL đầy đủ bất kì trên 1 trang web phải luôn liên kết với trang đó
    53. Một vài yếu tố như hình ảnh sản phẩm hoặc reviews sản phẩm thì người dùng phải click được
    54. Sử dụng 1 màu khác cho các links đã được xem trên websites để giảm mức tải bộ nhớ của người dùng

    Buttons

    55. Buttons trên các trang web phải có giao diện trông dễ kích vào và có đủ không gian để users click hoặc nhấn vào 1 cách thoải mái
    56. Các hành động gần đây trên websites hoặc ứng dụng phải có buttons lớn, đặt ở những khu vực dễ tiếp cận
    57. Các màu nền, đường viền hoặc các nhãn hướng đến action trên 1 website cho đem đến cho người dùng cảm giác họ có thể click vào yếu tố đó
    58. Với các thiết kế phẳng (flat design), hãy đảm bảo là các buttons hành động được thiết kế với màu sắc đối lập với nhãn hướng đến hành động (action-oriented label)
    59. Website phải có gợi ý trực quan vì 1 click button chỉ thành công trong khoảng 0,1 giây tương tác
    60. Các buttons thay đổi hoặc xóa dữ liệu trên di động nên khiến người dùng tốn nhiều sức để nhấn vào hơn, để ngăn các hành dộng nhấn nhầm

    Search

    61. Nếu website của bạn không quá nhỏ với quá ít nội dung thì nhất định phải có trường tìm kiếm
    62. Trường tìm kiếm phải luôn có giao diện như 1 hộp text trên máy tính. Khi sử dụng trên mobile thì biểu tượng search cũng phải ổn định
    63. Trường tìm kiếm phải dễ… tìm. Users thường đi tìm trường tìm kiếm ở góc trên bên phải
    64. Khi tìm kiếm trên websites, users thường nghĩ tới “1 khung nhỏ để đánh chữ vào”
    65. Các trường tìm kiếm trên websites phải đủ rộng để nhìn được toàn bộ truy vấn tìm kiếm

    Carousels – Băng chuyền

    66. Tránh những băng chuyền: mỗi slide mới sẽ xóa bộ nhớ của slide trước đó, để users có thể tập trung vào 1 thứ duy nhất
    67. Rất khó thấy các dots trên các bằng chuyền trên mobile websites, thay vào đó hãy sử dụng các hình ảnh nhìn nhanh từ bên trái và phải
    68. Thay vì chọn mũi tên điều hướng băng chuyền, hãy sử dụng các nhãn mô tả để users biết được mình có thể mong đợi gì ở slide kế tiếp
    69. Chỉ khoảng 1% users click vào các slide bằng chuyền trên websites vì vậy đừng phụ thuộc vào các clicks đó
    70. Các băng chuyền website tự động chuyển nên trở thành thao tác thủ công khi users bắt đầu tương tác với các băng chuyền đó

    Accordions

    71. Sử dụng accordions để nén các nội dung dài trên các trang web mobile
    72. Khi sử dụng accordions, hãy đề xuất xuất ra nội dung exposed bất kì khi người dùng đã mở rộng nội dung đó
    73. Lợi ích của việc sử dụng accordions trên các mobile website là các pages ngắn hơn dễ sử dụng hơn các links in-page
    74. Điểm bất lợi của sử dụng accordions trên các mobile websites: tăng interaction cost và “xa mặt cách lòng”

    Help và Hints – Hỗ trợ và Ghi chú

    75. Mục đích chính của mỗi webpage phải được thể hiện rõ ràng cho user
    76. Users thường rất ngập ngừng khi sử dụng Help trên website. Hãy đặt nó vào đúng ngữ cảnh và đề xuất các phương pháp wizards và FAQs phù hợp
    77. Hiển thị các gợi ý trên website và ứng dụng theo đúng ngữ cảnh và chỉ khi cần thiết
    78. Các hướng dẫn và thông tin hỗ trợ phải ngắn gọn và dễ nhìn so với các yếu tố giao diện khác
    79. Chỉ hiển thị 1 gợi ý tại 1 thời điểm trên các websites và các ứng dụng mobile. Nó sẽ làm giảm gánh nặng bộ nhớ

    Icons

    80. Các icons phải miêu tả trực quan chức năng và mục đích của chúng, bên cạnh đó chúng phải đơn giản, thân thuộc và có ý nghĩa
    81. Chỉ nên sử dụng icons khi cần thiết. Tránh lạm dụng chúng và không nên sử dụng chỉ vì mục đích trang trí
        

        Content

        82. Thông tin quan trọng nhất trên webpage phải luôn nổi bật và nhìn trực quan nhất
        83. Đặt thông tin quan trọng lên trước. Phần trên bên trái và 2-3 từ đầu tiên là những từ được users xem kĩ nhất
        84. Đặt nội dung ưu tiên cao lên phần đầu của website page. Sử dụng analytics để xác định những nội dung ưu tiên trên các thiết bị khác nhau
        85. Sử dụng màu sắc và kích thước đối lập trên website để phân biệt thông tin chính với các chi tiết bổ trợ
        86. Nội dung cần ưu tiên như thông tin liên quan đến ngữ cảnh, địa điểm, có tính cấp thiết sẽ được đánh giá quan trọng hơn cho các mobile users
        87. Các nội dung ưu tiên cho mobile: địa điểm, sự kiện, số điện thoại, thông tin khẩn cấp, thông tin cần thiết khi người dùng bận
        88. Ưu tiên các thuật ngữ đơn giản, rõ ràng thay vì các thuật ngữ trong ngành hay các từ ngữ xu hướng

        Readability – Khả năng đọc

        89. Hầu hết các users lướt trước rồi đọc sau. Hãy sử dụng text đa dạng, nhiều ý nghĩa để người dùng thao tác lọc dễ dàng hơn
        90. Khả năng đọc không dừng lại ở việc bạn có được cái gì đó hay không mà nó còn liên quan đến liệu bạn có muốn đọc hay không
        91. Chú ý giãn khoảng cách giữa các dòng từ danh sách gạch đầu dòng, danh sách số, các dòng và các đoạn để cải thiện khả năng đọc
        92. Các yếu tố để cần nhắc chọn 1 website là tính rõ ràng, khả năng đọc, weights và styles
        93. Trên các ứng dụng và website mobile, cân nhắc tạo chiều cao-x của font lớn hơn để dễ đọc hơn
        94. Tránh dùng các fonts nhỏ trên tất cả các thiết bị, đặc biệt là form copy dài. Không sử dụng fonts condensed – fonts hẹp trong text thân bài.
        95. Đảm bảo kích cỡ text của tiêu đề trên 1 mobile website phải responsive như phần còn lại của nội dung
        96. Tăng kích thước font trên mobile websites – luôn scale kích thước font so với kích thước màn hình
        97. Banner Blindness – Điểm mù quảng cáo banner: users sẽ không muốn tốn sức nhìn vào những hình ảnh, nội dung tương tự như các banners quảng cáo
        98. Để các đoạn text dài dễ đọc hơn thì bạn chỉ nên tập trung vào 1 ý tưởng cho mỗi đoạn văn
        99. Chữ in nghiêng thường rất khó đó, đặc biệt là với những người có hội chứng dyslexic (mắc chứng khó đọc)
        100. KHÔNG IN HOA TẤT CẢ CÁC CHỮ TRONG TIÊU ĐỀ VÀ TAGLINES vì rất khó đọc

    Nguồn: Techtalk via intechnic