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 dùng 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
- 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.
- 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
- 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
- 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
- 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
- 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
- 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
- Web page càng dài thì người dùng càng ít có khả năng cuộn xuống dưới
- 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
- 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
- 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
- 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
- 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
- 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
- Đả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
- 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)
- 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
- 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
- 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
- Nếu người dùng chờ lâu hơn nhiều giây sẽ khiến users rời website
Mobile
- 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
- 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
- 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ỏ
- 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
- 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
- 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
- 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
- Cách tiếp cận menu điều hướng trên website phải rõ nhìn
- 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
- 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
- Đ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
- Để 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
- Để 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
- Sử dụng breadcrumbs để người dùng biết họ đang ở đâu trên website
- Đ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
- 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
- Đố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
- 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
- Các menu lớn nên thu hẹp lại hơn trên page để users dễ thoát ra ngoài
- 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
- 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
- Căn chỉnh các nhãn form và các trường theo đường dọc để users xem thông tin nhanh
- 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
- 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
- Đặ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
- Các tin nhắn báo lỗi phải hữu ích, chính xác và dễ hiểu
- 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
- 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
- Các đường link nên phải giống giao diện của các links
- 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 đó
- 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
- 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 đó
- 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
- 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
- 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
- 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
- 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ố đó
- 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)
- 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
- 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
- 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
- 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
- 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
- Khi tìm kiếm trên websites, users thường nghĩ tới “1 khung nhỏ để đánh chữ vào”
- 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
- 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
- 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
- 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
- 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 đó
- 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
- Sử dụng accordions để nén các nội dung dài trên các trang web mobile
- 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 đó
- 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
- Đ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ú
- Mục đích chính của mỗi webpage phải được thể hiện rõ ràng cho user
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Đặ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
- Đặ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
- 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ợ
- 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
- 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
- Ư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
- 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
- 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
- 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
- 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
- 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
- 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.
- Đả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
- 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
- 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
- Để 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
- 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)
- KHÔNG IN HOA TẤT CẢ CÁC CHỮ TRONG TIÊU ĐỀ VÀ TAGLINES vì rất khó đọc
