Bài viết được sự cho phép của tác giả Đoàn Văn Tuyển
Lâu rồi mình mới quay lại viết, và hôm nay mình muốn chia sẻ với các bạn về một chủ đề đã lâu mình muốn viết: UI/UX. Mình không phải là chuyên gia về UX, nhưng mình có thời gian đọc, tìm hiểu và thử nghiệm nên cũng tích góp được một số kiến thức để chia sẻ. Trong bài viết này, mình xin nêu ra một số nguyên tắc quan trọng trong việc thiết kế UI/UX.
Bạn đang xem: Một số nguyên tắc thiết kế UI/UX website
1. First thing first
FTF (First thing first) có nghĩa là luôn ưu tiên những điều quan trọng nhất. Đó là bạn nên ưu tiên nhóm khách hàng quan trọng, nhóm tính năng quan trọng, thông tin quan trọng với khách hàng… Dưới đây là một số điều bạn nên chú ý:
1.1 Mobile First
Hiện nay, đa số các website vẫn sử dụng thiết kế dành cho máy tính để bàn (Desktop First), trong khi thời buổi này, 80% khách hàng sử dụng điện thoại di động. Vì vậy, việc thiết kế riêng cho mobile là điều cực kỳ quan trọng. Lưu ý những điểm sau đây:
- Màn hình mobile khá nhỏ, vì vậy không thể hiển thị đầy đủ thông tin như trên máy tính.
- Màn hình mobile có chiều dọc hạn chế, vì vậy các bảng biểu cần được điều chỉnh để vừa vào màn hình (320-400 pixel).
- Lựa chọn thông tin nào sẽ hiển thị trên mobile.
1.2 Đặt những thông tin quan trọng vào khung nhìn đầu tiên
Tận dụng khung nhìn đầu tiên mà người dùng không cần phải cuộn ngang hoặc cuộn xuống. Đặt những thông tin quan trọng nhất vào khung nhìn này. Đừng để một banner quá lớn mà ít thay đổi, hãy thu nhỏ nó lại và đưa thông tin quan trọng lên. Đặc biệt, lưu ý rằng trên di động, một số màn hình chỉ nhìn được giao diện của tab hoặc các thông số filter, vì vậy có thể ẩn bớt một số thành phần ít quan trọng để khung nhìn đầu tiên thể hiện nhiều thông tin hơn. Khung nhìn đầu tiên cũng rất quan trọng trên màn hình chính hoặc màn hình dashboard.
1.3 Tạo điều hướng dễ dàng đến chức năng quan trọng
Đảm bảo chức năng quan trọng dễ dàng tiếp cận. Sắp xếp menu sao cho người dùng dễ dàng tìm thấy những menu quan trọng nhất. Chức năng muốn người dùng click nhiều nhất thì hiển thị rõ lên. “Call to action” cần được làm nổi bật và hiển thị trong khung nhìn đầu tiên. Đặc biệt, trên mobile, menu có thể hiển thị luôn thay vì ẩn trong menu như trên máy tính. Lưu ý không sử dụng quá nhiều biểu tượng mà quên text. Đôi khi icon không thể hiện chính xác thông tin, vì vậy khi sử dụng icon, hãy kết hợp cả text để người dùng hiểu chức năng.
1.4 Làm nổi bật thông tin quan trọng
Xem thêm : Thiết kế website Quận Thủ Đức
Thông tin quan trọng cần được làm nổi bật trên màn hình. Ví dụ:
- Trong bảng biểu, cột tổng xếp lên đầu thay cho cuối, sắp xếp dữ liệu theo thứ tự giảm dần.
- Các thông tin muốn nhấn mạnh như giảm giá, giá tiền, trạng thái, cảnh báo, “Call to action”… cần được highlight.
- Chia nhỏ đoạn văn thành những đoạn ngắn hơn, highlight thông tin quan trọng.
- Đưa chữ vào ảnh để tạo sự chú ý.
2. Đừng làm tôi phải suy nghĩ
Như tiêu đề, nguyên tắc này nhằm đảm bảo người dùng không phải suy nghĩ quá nhiều khi sử dụng giao diện. Dưới đây là một số ý mình muốn chia sẻ:
2.1 Hướng dẫn cho khách hàng mới
Khách hàng mới thường là nhóm khách hàng bơ vơ nhất, họ cần hướng dẫn khi gặp một hệ thống hoàn toàn mới. Gợi ý cho bạn như sau:
- Gửi email chào mừng và chia sẻ thông tin hỗ trợ như hotline, email hỗ trợ, link đến câu hỏi thường gặp (nếu có), tài liệu hướng dẫn…
- Có tour hướng dẫn trên giao diện hoặc hướng dẫn hiển thị ngay trên trang dashboard.
- Sử dụng thiết kế kiểu Wizard cho các chức năng phức tạp để dẫn dắt người dùng.
- Tránh việc có tài liệu hướng dẫn quá dài, bởi vì không ai có thời gian đọc hết. Có thể chỉ cần tài liệu để tra cứu khi gặp vấn đề.
2.2 Hướng dẫn khi gặp lỗi
Luôn hiển thị thông tin cảnh báo khi khách hàng làm sai (ví dụ nhập thông tin không đúng định dạng). Hiển thị chi tiết lỗi và cách khắc phục. Điều này giúp khách hàng không bị bối rối và biết làm gì tiếp theo. Nếu khách hàng gửi form và gặp lỗi, hãy khôi phục lại form với đầy đủ thông tin trước khi khách hàng gửi. Đặc biệt, với form nhiều thông tin, điều này giúp tránh tình trạng khách hàng phải nhập lại từ đầu và gây ức chế. Sử dụng hiệu ứng như loading, slide down… để gây chú ý cho người dùng thay vì âm thầm hiển thị lỗi.
3. Đồng nhất
Trong khi hai nguyên tắc trên liên quan nhiều đến UX, nguyên tắc cuối cùng liên quan nhiều hơn đến UI. Trong UI, nguyên tắc quan trọng nhất là sự đồng nhất trong thiết kế. Như font chữ, khoảng cách, kích thước, màu sắc, vị trí của các button… tất cả cần phải đồng nhất. Nếu thiết kế dạng Mobile First, bạn có thể sử dụng thiết kế đã chuẩn hoá của Google (Material Design System) hoặc Apple’s Flat Design. Hai Design System này có hướng dẫn chi tiết để bạn áp dụng trên trang web di động của bạn. Một số thành phần quan trọng mình muốn nhắc đến là:
3.1 Typography
Typography đề cập đến các yếu tố liên quan đến chữ như font chữ, in đậm, in nghiêng, gạch chân, font-size, màu chữ, cách dòng, chia cột chữ, khoảng cách giữa các đoạn văn… Các yếu tố này cần có tỷ lệ nhất định và đồng nhất trên các trang. Đối với nội dung cùng ý nghĩa, cần sử dụng typography đồng nhất. Các button, trạng thái, form input, select cũng cần sự tương đồng này. Điều này ảnh hưởng rất lớn đến sự “đẹp” của website.
3.2 Khoảng cách và sự alignment
Xem thêm : Học lập trình Back-end C# – trở thành .NET Back-end Developer
Chia cột, khoảng cách giữa các dòng, khoảng cách giữa các khối… tất cả cần có sự tương đồng giữa các trang. Khoảng cách trong form, khoảng cách giữa hai lề… cũng cần có sự tương đồng. Gợi ý một số điểm quan trọng:
- Với màn hình điện thoại, để khoảng cách giữa khối chính và hai lề nhỏ (để tăng không gian hiển thị).
- Hạn chế việc sử dụng bo viền, sử dụng hai khối màu khác nhau để phân chia.
- Khoảng cách giữa khối dạng cột nhỏ hơn khoảng cách giữa hai dòng.
- Khoảng cách giữa hai yếu tố liên quan gần hơn so với khoảng cách giữa hai yếu tố ít liên quan.
3.3 Khoảng trắng (đặc biệt trên mobile)
Khi thiết kế, khoảng trắng là một yếu tố quan trọng, đặc biệt là trên mobile. Vì màn hình mobile nhỏ, bạn không muốn người dùng phải cuộn nhiều màn hình để xem thông tin, do đó thiết kế trên mobile thường tối giản. Khoảng trắng nên được sử dụng đúng mực để đáp ứng yêu cầu thẩm mỹ.
3.4 Nguyên tắc trình bày các loại dữ liệu khác nhau
Trình bày văn bản, đặc biệt là trong bảng biểu, có một số nguyên tắc nhỏ mà ít người để ý, như:
- Số luôn căng lề phải, sử dụng dấu phẩy/chấm để ngăn cách phần ngàn. Số thập phân nên có số lượng chữ số sau dấu thập phân như nhau ở tất cả các dòng trong cùng một cột.
- Sử dụng dấu gạch ngang “-” thay cho những dòng trống hoặc giá trị 0.
- Đặt khoảng trống chính xác khi bỏ các dấu câu như (.,:;’).
- Viết hoa đầu dòng, tiêu đề.
- Và còn rất nhiều nguyên tắc khác để đảm bảo sự đồng nhất và dễ đọc, mỗi team nên có một danh sách riêng.
Tóm lại, UI/UX là một chủ đề rộng lớn, những gì mình chia sẻ ở đây chỉ là một phần nhỏ. Hy vọng bạn đọc bài viết này tìm thấy hữu ích và có thể chia sẻ với bạn bè và những người quan tâm.
Bài viết này phần lớn dựa trên kiến thức mà mình học được từ buổi trao đổi với Tùng Jacob bên TGDD và những slide của bạn ấy. Bạn có thể xem thêm thông tin tại những link sau:
- https://speakerdeck.com/tungjacob/vi-sao-nen-lua-hoa-website-ban-hang-make-a-website-your-mom-can-use
- https://docs.google.com/file/d/0B_tCvYq4ZMQKQWJHTnlNZXVwdjg/edit?filetype=mspresentation
- https://speakerdeck.com/tungjacob/ui-workshop-for-team-it-thegiodidong-dot-com
- https://docs.google.com/presentation/d/1SCrMeZ83z2P37MkmGn6C6oLGERkN6y7vv-bezo_VBUo/edit
- https://drive.google.com/file/d/0B_tCvYq4ZMQKYlNHY29BRWIyaUU/view
Bài viết gốc được đăng tải trên medium.com.
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web