Mỗi lần nhận dự án mới, đội ngũ bên mình thường bắt đầu bằng một câu hỏi rất đơn giản: người dùng sẽ bấm vào đâu trong năm giây đầu tiên? Nghe thì nhỏ, nhưng câu hỏi ấy là nền tảng của mọi kiến thức thiết kế website và giao diện số. Bài viết này chia sẻ lại những gì chúng tôi đã đúc kết qua nhiều năm làm việc với doanh nghiệp nhỏ, marketer và cả những designer mới vào nghề, để bạn có thể áp dụng ngay.
Thiết kế website khác gì thiết kế giao diện số?
Nhiều người dùng hai cụm này như thể chúng giống nhau, nhưng thực ra chúng bổ trợ cho nhau. Thiết kế website nhìn vào cấu trúc tổng thể: site có bao nhiêu trang, người dùng đi từ đâu đến đâu, thông tin được sắp xếp thế nào để họ tìm ra thứ cần tìm. Giao diện số thì tập trung vào lớp hiển thị: màu sắc, khoảng cách, kiểu chữ, nút bấm và cách mọi thành phần phản hồi khi người dùng tương tác.
Chúng tôi từng gặp một khách hàng làm website bán thiết bị văn phòng. Giao diện của họ rất đẹp, ảnh sản phẩm sắc nét, nhưng khách vào trang rồi thoát ra gần như ngay lập tức. Khi xem lại, lỗi nằm ở cấu trúc: danh mục sản phẩm chôn quá sâu, phải bấm ba lớp mới thấy hàng. Đổi cấu trúc trước, giữ nguyên giao diện, tỷ lệ rời trang giảm rõ rệt. Bài học là đẹp mà khó dùng thì vẫn thất bại.
Nguyên tắc UI/UX nên ghi nhớ
UI tập trung vào vẻ ngoài và cảm giác thị giác, còn UX là toàn bộ hành trình người dùng trải qua khi dùng sản phẩm. Hai thứ này không thể tách rời. Một giao diện hiện đại nhưng form đăng ký dài bảy trường bắt buộc vẫn khiến người ta bỏ dở.
Khi làm dự án, chúng tôi thường bám theo vài nguyên tắc sau:
- Giữ hệ thống màu nhất quán, tối đa ba màu chính và một màu nhấn cho nút quan trọng.
- Khoảng cách giữa các thành phần nên theo một thang cố định, ví dụ bội số của 8px, để giao diện nhìn gọn gàng.
- Mỗi trang chỉ nên có một hành động chính rõ ràng, tránh để người dùng phân vân giữa quá nhiều nút.
- Chữ phải đủ lớn và đủ tương phản để đọc được trên điện thoại, không chỉ trên màn hình thiết kế.
Chữ đủ lớn nghe có vẻ hiển nhiên, nhưng đây là lỗi chúng tôi gặp nhiều nhất khi kiểm tra website của khách. Thiết kế trên màn hình 27 inch trông ổn, nhưng cầm điện thoại ngoài nắng thì dòng chữ xám nhạt gần như biến mất.
Chọn công cụ thiết kế phù hợp với bạn
Thị trường có rất nhiều công cụ thiết kế, và câu hỏi quan trọng không phải là công cụ nào mạnh nhất mà là công cụ nào hợp với quy mô và kỹ năng của bạn. Một freelancer làm landing page cần tốc độ và thư viện mẫu sẵn có, trong khi một đội thiết kế lớn cần khả năng cộng tác theo thời gian thực và quản lý bộ thành phần dùng chung.
Nếu bạn mới bắt đầu, hãy thử một công cụ vẽ giao diện phổ biến trước, làm vài bản mẫu nhỏ rồi mới quyết định đầu tư sâu. Đừng mua gói phần mềm đắt tiền chỉ vì người khác khen. Chúng tôi từng thấy một bạn sinh viên làm rất đẹp chỉ bằng bản miễn phí, vì họ hiểu nguyên tắc bố cục hơn là phụ thuộc vào tính năng.
Tối ưu trải nghiệm người dùng trên thiết bị di động
Phần lớn lưu lượng truy cập hiện nay đến từ điện thoại, nên thiết kế cho màn hình nhỏ không còn là lựa chọn mà là bắt buộc. Cách làm tốt nhất là bắt đầu từ bản di động rồi mở rộng lên máy tính, thay vì ngược lại. Khi ép một bố cục máy tính rộng vào màn hình nhỏ, bạn gần như chắc chắn sẽ phải cắt bớt nội dung quan trọng.
Một mẹo nhỏ chúng tôi hay dùng là đặt mình vào vị trí người dùng đang cầm điện thoại bằng một tay, đi tàu hoặc ngồi quán cà phê. Nút bấm nào nằm ở góc trên bên trái sẽ rất khó với tới. Vì vậy các nút hành động chính thường nên đặt ở vùng dễ chạm phía dưới màn hình.
Xu hướng giao diện đáng theo dõi
Xu hướng thiết kế thay đổi khá nhanh, nhưng không phải cái nào mới cũng đáng áp dụng. Chế độ tối (dark mode) đang được nhiều sản phẩm hỗ trợ, nhất là các ứng dụng dùng nhiều giờ trong ngày, vì giúp giảm mỏi mắt. Tuy vậy, chúng tôi luôn nhắc khách hàng rằng dark mode phải được thiết kế riêng, không đơn giản là đảo màu nền và màu chữ. Màu bóng đổ, màu ảnh và độ tương phản đều cần điều chỉnh lại.
Ngoài ra, các hiệu ứng chuyển động vi mô cũng ngày càng phổ biến. Một nút bấm đổi trạng thái nhẹ nhàng khi di chuột giúp người dùng biết hệ thống đang phản hồi, và điều đó quan trọng hơn nhiều so với việc trang trí cho đẹp.
Thương hiệu số và sự nhất quán
Một website đẹp nhưng không mang được dấu ấn thương hiệu thì người dùng khó nhớ. Khi làm việc với doanh nghiệp nhỏ, chúng tôi thường bắt đầu bằng việc xác định ba đến năm từ khóa mô tả cảm xúc mà thương hiệu muốn gửi đến, ví dụ như tin cậy, gần gũi hay hiện đại. Từ đó mới chọn màu, kiểu chữ và phong cách hình ảnh.
Sự nhất quán cũng quan trọng không kém. Logo, màu sắc và giọng văn trên website nên giống với trang mạng xã hội và tài liệu bán hàng. Người dùng nhìn thấy cùng một phong cách ở mọi nơi sẽ có cảm giác đáng tin hơn.
Lời khuyên để áp dụng ngay
Nếu phải rút gọn toàn bộ kinh nghiệm của chúng tôi thành vài việc, đó sẽ là: kiểm tra website trên điện thoại thật thay vì chỉ xem trên máy tính, đo thử xem người dùng mất bao lâu để tìm được thứ họ cần, và luôn để lại thời gian thử nghiệm trước khi đưa sản phẩm ra công chúng. Bạn không cần một đội ngũ lớn để làm những việc này, chỉ cần sự quan sát và thói quen hỏi lại mình về trải nghiệm của người dùng.
Nếu bạn đang tìm hiểu sâu hơn về cách xây dựng sản phẩm số, có thể tham khảo thêm những điều cần biết khi xây dựng thương hiệu số cho website, nơi chúng tôi đi sâu vào việc đồng bộ nhận diện giữa các kênh. Với các ý tưởng về trang lỗi và cách giữ chân người dùng khi họ đi lạc, bạn có thể đọc bài về thiết kế trang 404 sáng tạo. Và nếu quan tâm đến chế độ tối, đừng bỏ qua hướng dẫn thiết kế dark mode mà chúng tôi đã tổng hợp từ các dự án thực tế.
Thiết kế tốt không phải là làm cho sản phẩm trông lộng lẫy nhất, mà là giúp người dùng đạt được điều họ muốn một cách nhẹ nhàng nhất. Khi giữ tâm thế đó, bạn sẽ thấy việc chọn màu, sắp xếp bố cục hay chọn công cụ đều trở nên rõ ràng hơn rất nhiều.