Vài ngày gần đây, một số người dùng phản ánh rằng họ đã nhận được các cuộc gọi lừa đảo tự xưng là trung tâm viễn thông.

Nguồn: https://dantri.com.vn/suc-manh-so/canh-giac-cuoc-goi-lua-dao-de-doa-khoa-sim-20230316221344832.htm

Nguồn tham khảo: Thegioididong.com

Dù bạn là một UX/UI Designer lâu năm hay là một người mới vào nghề, bạn nhất thiết cần và nên tuân theo một số nguyên tắc chung khi thiết kế. Bài viết dưới đây, kèm theo những hình ảnh trực quan, sẽ giải thích một số điểm lưu ý trong thiết kế giao diện của Website/App.

1. Phông chữ tạo sự khác biệt

Đừng chỉ làm cho văn bản lớn hơn để làm nổi bật hoặc nhấn mạnh. Thay vào đó, hãy sử dụng độ đậm của phông chữ, kiểu chữ hoặc màu đậm hơn.

2. Độ dài văn bản

Tránh sử dụng các dòng dài và văn bản nhỏ để sử dụng toàn bộ bất động sản. Thay vào đó, hãy sử dụng khoảng trống trên màn hình để hiển thị tầm quan trọng của văn bản.
Tham khảo nhanh – Có không quá 9 từ mỗi dòng.

3. Cẩn thận với các nút (button) trên màn hình

Thiết kế nút của Ứng dụng dành cho thiết bị di động cần được định kích thước cẩn thận! Theo một nghiên cứu của MIT, chiều rộng đầu ngón tay của con người là 16-20mm, tức là gần 40-50px.

4. Lưu ý hiệu ứng di chuột trên điện thoại

Trang web dành cho thiết bị di động không có trạng thái di chuột. Các nút (hoặc lời kêu gọi hành động) phải được thiết kế phù hợp để làm cho trang web thực sự đáp ứng.

5. Làm nổi bật nút CTA khi cần thiết

Nút hành động chính được “đánh dấu” trong hộp thoại bên phải, để cung cấp cho nó tầm quan trọng mà nó cần. Hình bên trái khiến 2 nút CTA đồng cấp, không làm nổi bật được mục đích cuối cùng là chọn “Download”. Hình bên phải là phương án giải quyết để người dùng tập trung vào nút được tô màu hơn, tăng tỷ lệ nhấp chuột.

6. Sử dụng nút chọn (radio button)

Sử dụng kiểu nút radio để nhấn mạnh khi bạn có ít hơn 5 tùy chọn và ưu tiên so sánh các tùy chọn giúp họ có cái nhìn trực quan về các lựa chọn màu sắc, kích thước,…
Các Drop-down menu được ưu tiên hơn khi bạn có nhiều hơn 7 tùy chọn, mà không cần phải xem tất cả chúng song song với nhau.

7. Sử dụng Infinite Scroll hay Pagination cho việc hiển thị nội dung?

Infinite scroll nghĩa là kéo không giới hạn, các thông tin liên tục được hiện ra và bạn không biết khi nào nội dung đã hiển thị hết. Kiểu thiết kế này thích hợp có các nội dung có tính khám phá như Pinterest, Twitter, Facebook hay các mạng xã hội, báo chí khác.

Pagination nghĩa là phân trang. Kiểu thiết kế này thích hợp cho các nền tảng hướng tới một mục đích nhất định. Như hình dưới đây, đôi với các sản phẩm điện thoại khác nhau, nhà thiết kế phân tách chúng thành cách thành các ô riêng biệt với hiệu ứng trượt thay vì infinite scroll. Nhờ đó, người dùng có thể dễ dàng so sánh các sản phẩm trên Amazon.

8. Sắp xếp của yếu tố trên giao diện

Vị trí dày đặc được sử dụng cho các nút mang tính chất tương đồng như ‘Spam‘ & ‘Xóa‘. Ví dụ như nút “Spam” và nút “Xóa” trong hình có chung tính chất và mục tiêu nhằm xóa hoặc báo cáo một chủ thể. Khi đó, hai biểu tượng này nhất thiết phải được đặt cạnh nhau.

Vị trí phân tán được sử dụng cho các nút mang tính trái ngược. Ví dụ như ‘Yêu thích‘ & ‘Xóa‘ trong hình là hai biểu tượng có ý nghĩa khác nhau. ‘Yêu thích‘ mang tính tích cực, ‘Xóa‘ mang tính tiêu cực nên chúng cần được tách biệt, giúp người dùng nhận ra sự khác biệt nhanh chóng và tránh ấn nhầm.

9. Thiết lập lựa chọn mặc định

Đối với radio buttonsta cần tạo lựa chọn mặc định mong muốn hoặc lựa chọn thường xuyên cho người dùng có thể sử dụng. Điều này vô cùng quan trọng cho website/app thương mại điện tử.

10. Hữu hình hóa văn bản

Đối với các chức năng phức tạp hoặc trừu tượng, hãy sử dụng biểu tượng và biểu tượng tổ hợp nhãn để tác động cả về mặt lý trí và cảm xúc. Hãy hình tượng hóa, thể hiện với các icon để người dùng chú ý và dễ theo dõi hơn. Điều này cũng khiến thiết kế sinh động hơn thay vì chỉ sử dụng chữ.

11. Tăng khả năng nhấp chuột vào CTA

Các nút CTA thường chứa các động từ mạnh, ví dụ như “Add” trong hình dưới đây. Nhưng bạn không nên chỉ sử dụng động từ, thêm bối cảnh cho hành động để không khiến người dùng khó chịu. Chúng tôi khuyến khích nội dung CTA không quá 3 chữ cái để nút CTA đẹp hơn và người dùng không mất nhiều thời gian để định hình nội dung trong đó.

Ngoài ra, hiện đang được ưa chuộng là “Call to value” (CTV), tức là các nút kêu gọi hành động mang lại giá trị cho người dùng. Vì vậy đừng chỉ thêm “hành động”, hãy thêm cả “ngữ cảnh”!

12. Sử dụng overlap và đổ bóng

Hình ảnh chồng chéo tạo thêm tiêu điểm và chiều sâu cho giao diện. Việc đổ bóng tạo chiều sâu và tập trung vào yếu tố đó trên giao diện. Đây cũng là biện pháp tuyệt vời để tối đa khoảng trống và tối ưu hóa việc sử dụng không gian.

13. Chi tiết hóa các lỗi xuất hiện

Khi người dùng điền vào biểu mẫu, có nhiều trường hợp lỗi có thể xảy ra như giá trị không đúng, hợp lệ, mật khẩu không chính xác, tài khoản chưa đăng ký,… Hãy hiển thị thông báo chính xác lỗi xảy ra trên biểu mẫu. Nếu có thể, bạn có thể thêm phần đề xuất sửa lỗi để người dùng có thể làm theo.

14. Sử dụng nút thay vì chữ

Đóng khung CTA và đổ màu là một cách để nút CTA trở nên ấn tượng và hấp dẫn hơn người dùng. Đôi khi, người dùng bỏ qua việc đọc nội dung trên nút CTA mà chỉ nhấp vào nút nổi bật nhất. Hình bên trái có hai đoạn văn bản được thiết kế giống nhau khiến người dùng phải đọc và định hình và thao tác chính xác nút CTA họ đang cần chọn. Điều này không chỉ gây khó chịu mà ảnh hưởng đến quá trình thao tác, mất thời gian hơn, không thân thiện với người dùng.

15. Sử dụng icon/hình ảnh tương ứng với nội dung

Cũng giống như Tip 10, việc hiển thị nhiều thông tin giống nhau sẽ gây nhàm chán và khiến người dùng khó nắm bắt. Việc sử dụng icon hay hình ảnh tương ứng, liên quan giúp phân biệt các nội dung. Để thấy rõ hơn, bạn xem hình ảnh bên dưới để thấy được hiệu quả bất ngờ giữa các lựa chọn thiết kế.

16. Tận dụng khoảng trắng và màu sắc để phân cách nội dung

Nếu số lượng nội dung cùng cấp quá nhiều, việc chỉ áp dụng Tip 15 (Sử dụng icon/hình ảnh tương ứng với nội dung) là chưa đủ. Để giúp tối ưu việc hiển thị ta cần phân cách bằng màu sắc và khoảng trắng sẽ giúp nội dung trở nên rõ ràng và dễ đọc, dể thao tác hơn rất nhiều. Hiện nay, các mạng xã hội đã áp dụng nguyên tắc này rất hiệu quả trong phần thông báo, nổi bật như Facebook và Instagram.

17. Áp dụng thanh tiến trình ghim trên header

Mặc dù giao diện người dùng trên điện thoại có hiển thị thanh chạy (scroll bar) của trình duyệt ở phía tay phải, nhưng ít người dùng chú ý tới phần này. Đặc biệt, thói quen người dùng cầm điện thoại bằng tay phải và lướt màn hình bằng ngón cái đã che mất yếu tố này. Để hỗ trợ người nhận biết tiền trình đọc nội dung trên trang, ta cần đưa tính năng thanh tiến trình ở phía trên header với màu sắc nổi bật.

18. Tránh màu nền sáng, chói

Tránh nền sáng cho các ứng dụng nặng văn bản. Nó gây căng thẳng cho mắt và khó đọc.

19. Phân biệt Checklist và Radio Button khi áp dụng

Checklist – Sử dụng khu người dùng có thể chọn nhiều phương án cùng lúc
Radio Button – Để lựa chọn một lựa chọn

20. Phân cách bằng thanh cùng tone với nền

Sử dụng tông màu (hoặc bóng râm) cùng màu là một cách chia tách nội dung. Các màu sắc quá rõ ràng, nổi bật so với màu nền (hình bên trái) khiến người dùng mất tập trung vào nội dung. Tuy nhiên, khuyến khích nên tận dụng khoảng trắng, font chữ để phân cách thay vì các đường kẻ.

21. Offset shadow

Offset shadow là một kỹ thuật quen thuộc trong thiết kế với 2 mặt đổ bóng và 2 mặt nhận ánh sáng. Việc thực hiện đổ bóng toàn bộ để làm nổi bật vật thể làm thiết kế trở nên không tự nhiên. Thay vào đó, Sử dụng Offset Shadow làm cho bố cục có vẻ tự nhiên.

22. Hạn chế sử dụng nhiều màu

Thiết kế bên trái sử dụng nhiều màu sắc cho các icon khác nhau và điều này làm tăng việc tiếp nhận thông tin, nhận thức màu sức từ menu. Thay vào đó, hãy thử dùng 2 màu, trong đó một để hiển thị trạng thái đang được chọn.

23. Mô tả chi tiết các trường nhập

Gợi ý người dùng cách nhập nội dung trong trường giúp giảm khả năng phải nhập lại nhiều lần, khiến người dùng khó chịu.

24. Thiết kế các button và trực quan

Các lựa chọn hoạt động tốt hơn với các tùy chọn mô tả trực quan và có thể chạm rộng hơn so với các nút radio. Ví dụ khi so sánh giữa hai phiên bản dưới đây, rõ ràng hình bên phải với hình ảnh nổi bật và vùng thao tác lớn hấp dẫn người dùng hơn.

25. Phân biệt bằng các nhãn màu

Bạn nên thêm màu sắc vào các nhãn phân loại quan trọng để làm nổi bật các nội dung chính, giúp người dùng có cái nhìn trực quan, chính xác khi nhìn lướt.

26. Tận dụng khoảng trắng

Để lên giao diện người dùng trong kích thước giới hạn, hãy tạo khoảng trắng cho các phần thay vì ngăn cách bằng đường kẻ cho cái nhìn rõ rệt hơn nhưng khiến người dùng phân tâm, nội dung trở nên rời rạc hơn. Khoảng trắng luôn là phương án tuyệt vời trong trường hợp này.

27. Mô tả các lựa chọn

Có các tùy chọn mô tả cho một cảnh báo, chỉ dẫn quan trọng giúp người dùng dễ dàng đưa ra các phán đoán, thao tác nhanh chóng và sáng suốt. Ngoài ra có nhiều cách để các CTA hay hơn, nhưng đừng quên Tip 11: không dài quá 3 từ nhé.

28. Tạo màu khác biệt cho các lớp hiển thị

Giữ cho lớp thứ hai, chẳng hạn như một menu thả xuống ít nhất 2 sắc thái (hoặc sắc thái) khác với nền sẽ giúp tạo ra sự nổi bật về mặt hình ảnh.

29. Xử lý hiển thị thanh điều hướng

Thanh điều hướng là một nhân tố quan trọng để tăng trải nghiệm trang và kéo dài thời gian ở lại trang của người dùng. Các yếu tố quan trọng như mũi tên điều hướng phải có tông màu đen và trắng, để hoạt động trên cả nền tối và nền sáng.

Ba ví dụ dưới đây đều sử dụng chung một tấm hình với màu nền đa dạng. Tuy nhiên, hình số ba xử lý tốt nhất dù chỉ áp dụng hai màu cơ bản Đen – Trắng.

30 Tách biệt trường văn bản và nút CTA

Sử dụng một nút dễ phân biệt khác với trường văn bản để làm cho nút này nổi bật hơn và dễ hành động hơn.

31. Sử dụng màu nhấn giúp tạo sự khác biệt

Sử dụng màu nhấn như một yếu tố nâng cao & khác biệt trong thiết kế giúp người dùng phân loại các phần một cách trực quan.

32. Phương pháp đổ bóng với mảng màu tối

Trên các hình ảnh, đối tượng có màu sáng hay quá nhiều màu sắc thì khó để chọn đúng màu sắc cho văn bản. Việc đổ bóng không chỉ tạo sự tự nhiên cho bức ảnh mà vẫn làm nổi bật nội dung, hỗ trợ người dùng đọc và thao tác dễ dàng hơn.

33. Thiết kế nhiều phương tiện để phân biệt các yếu tố trên giao diện

Như bạn đã biết, một số phương pháp thường được áp dụng là sử dụng icon, màu sắc, giải phân cách,… Tuy nhiên sử dụng sự khác biệt bằng hình ảnh một cách tinh tế tạo ra mức độ ưu tiên để người dùng hiểu được, với lời kêu gọi hành động tốt hơn (call-to-action).

34. Lưu ý khoách cách giữa các dòng

Khoảng cách giữa các dòng trong văn bản có tác động, thói quen đến người dùng, đặc biệt với những nội dung mang tính chất thông tin. Nếu giãn dòng quá nhỏ, việc đọc trở nên khó khăn, đôi khi người dùng có thể thoát ngay lập tức nếu nhìn vào những đoạn văn bản như vậy. Trường hợp giãn dòng quá lớn, khu vực hiển thị dài hơn kiến việc đọc nội dung khó tập trung, khó khăn khi đọc tiếp. Người dùng thường có xu hướng đọc lướt và lười đọc vì thế nên giữ khoảng cách văn bản phù hợp. Giữ chiều cao dòng nhiều hơn 20-30% so với chiều cao ký tự để dễ đọc hơn.

35. Sử dụng nội dung phù hợp

Sử dụng nội dung, chữ trong trải nghiệm của người dùng nhằm mục đích chỉ dẫn, giải thích giúp tăng mức độ tương tác của người dùng.

Những tip trên mặc dù khá cơ bản trong thiết kế UX/UI nhưng chúng thực sự hiệu quả. Những tip trên được tham khảo từ Sparklin – Đơn vị phát triển Ứng dụng Website/App, xây dựng thương hiệu có trụ sở tại New Delhi & Bangalore, Ấn Độ.