Những lưu ý về responsible trong ux/ui design

Hiện tại trên thị trường có rất nhiều thiết bị di động khác nhau từ hình thức đến kích thước. Vì vậy tối ưu UX/UI Design cần nhà phát triển am hiểu sâu về Responsive. 

I. Responsible web design là gì?

Responsive Web Design hay viết tắt là RWD có nghĩa là thiết kế web đáp ứng. Thuật ngữ này dùng để chỉ quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị.

Nhờ có Responsive Web Design thì người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình nhất mà người dùng không cần phải làm gì.

II. Nguyên tắc, lưu ý và phương pháp để tối ưu responsible

1. Mobile first - ưu tiên trên các thiết bị di động

Mobile first là việc nhà sáng tạo nền tảng sẽ tập trung tối ưu giao diện trên thiết bị di động trước vì thiết bị mà người dùng sử dụng hiện nay phần lớn là điện thoại di động, điện thoại thông minh.

Sau khi hoàn thiện phiên bản mobile thì nhà sáng tạo mới xây dựng phiên bản PC và dĩ nhiên bản PC sẽ follow theo giao diện mobile đã xây dựng trước đó.

2. Xây dựng nội dung phù hợp

Nội dung luôn được để chỗ dễ thấy, phải luôn rõ ràng, phân cấp bố cục, sử dụng font chữ, size chữ vừa phải không quá to hoặc quá nhỏ, tránh nội dung quá dài tạo sự chán nản cho người đọc.

3. Tính linh hoạt

Với 1 app/website thì người dùng sẽ sử dụng với rất nhiều thiết bị khác nhau, hệ điều hành khác nhau - điều này là hết sức phức tạp. Mỗi thiết bị sẽ có kích thước, đặc điểm khác nhau nên để tối ưu responsible thì nhà phát triển phải tính toán làm sao để có thể phù hợp nhất với số đông người dùng.

Ví dụ: thanh header trên thiết bị di động thường sẽ cách viền 1 khoảng ngắn để khi nếu có người dùng sử dụng thiết bị có tai thỏ như iPhone Xs/Xs Max sẽ không bị che khuất dẫn đến khó thao tác.

4. Tăng trải nghiệm người dùng

Ngoài việc tối ưu về thiết kế thì nhà sáng tạo cũng phải chú ý đến các yếu tố hình ảnh, màu sắc, nội dung, tốc độ load… để tăng trải nghiệm người dùng. Một layout đẹp nhưng nếu tốc độ tải trang tệ thì cũng sẽ không mang lại hiệu quả cho sản phẩm.

Hay việc tối ưu giao diện còn ảnh hưởng trực tiếp đến tốc độ tải trang, một tiêu chí quan trọng trong trải nghiệm người dùng.

5. Sử dụng các công cụ phát triển

Như Bootstrap, Foundation và các trình kiểm tra Responsive để hỗ trợ quá trình thiết kế.

6. Xây dựng design system khoa học 

Nên có sự nhất quán về giao diện để tránh mất thời gian như tạo ra bộ thư viện các nút button, icon, form,...phù hợp với bộ nhận diện và sử dụng xuyên suốt cho website. 

7. Kiểm tra, đánh giá và tối ưu liên tục

Thường xuyên kiểm tra để phát hiện các lỗi để thay đổi, cải tiến nền tảng như web/app bởi gần như sẽ không có một sản phẩm nào là hoàn hảo khi đưa vào sử dụng.

Ngoài ra có thể thu các phản hồi của người dùng để cải tiến sản phẩm.

8. Hạn chế những gì phức tạp (hiệu ứng, layout phức tạp)

Sử dụng những hiệu ứng đơn giản, tránh phức tạp hóa, cầu kỳ khiến người xem khó dùng và ảnh hưởng tới tốc độ tải trang. 

9. Chú ý đến thao tác tay của người dùng

Thao tác tay đặc biệt quan trọng trong tối ưu responsible. Ví dụ nút Menu (nút hamburger button) thường được đặt ở góc phải bên trên màn hình để người dùng dễ dàng sử dụng ngón cái để click vào button quan trọng này

III. Ưu và nhược điểm của responsible web design

1. Ưu điểm

- Tiết kiệm chi phí và thời gian khi không cần phải thiết kế cho từng màn hình khác nhau.

- Gia tăng thứ hạng SEO của bạn trên các trang trình duyệt tìm kiếm

- Dễ dàng bảo trì hay update trang web.

- Tối ưu trải nghiệm người dùng bằng khả năng tương thích với nhiều kích thước màn hình và độ phân giải của RWD giúp người dùng truy cập và điều hướng website thuận tiện đặc biệt là trên thiết bị điện thoại.

2. Nhược điểm

- Thiết kế RWD đòi hỏi nhiều kiến thức chuyên sâu về HTML, CSS,...

- Quá trình thiết kế RWD khá phức tạp và tốn nhiều thời gian để thiết kế hơn so với cách thiết kế website truyền thống.

- Cần phải thử nghiệm trên nhiều thiết bị và trình duyệt khác nhau để đảm bảo độ phù hợp.

IV. Các phân loại responsible thường gặp

1. Fluid Grid

Những khoảng thời gian trước, việc thiết kế giao diện web chưa được linh hoạt, các nhà thiết kế không thể điều chỉnh được giao diện của một màn hình máy tính để phù hợp với một chiếc điện thoại.

Và bây giờ, chúng ta đã có thể làm mọi việc linh hoạt hơn nhờ có Fluid Grid. Nó giúp chúng ta tự động điều chỉnh linh hoạt hơn để những phần tử trong một layout không bị vỡ như hình ảnh, dạng text,...khi chuyển từ một màn hình ngành sang một màn hình đứng hay từ thiết bị này qua thiết bị khác một cách hoàn hảo.

Fluid Grid có 2 dạng cơ bản sau:

• Viewport

Viewport là khung hình người dùng nhìn thấy trên thiết bị của họ khi vào một trang web bất kì. Với mỗi thiết khác nhau lại có viewport khác nhau. Nếu trang web cố định kích thước thì trình duyệt sẽ tự động thu nhỏ nội dung khi chuyển từ màn hình máy tính qua smartphone - điều này tạo nên trải nghiệm không tốt cho người dùng.

• GridView

 Hệ thống lưới là một cấu trúc chia màn hình thành các hàng và cột, giúp sắp xếp các phần tử trên trang web một cách có trật tự. Một gridview thường có 12 cột tương ứng với 100% độ rộng và sẽ thu nhỏ hoặc mở rộng khi bạn thay đổi kích thước trình duyệt. Fluid grid sử dụng các đơn vị đo lường tương đối (như phần trăm) để các cột có thể tự động thay đổi kích thước theo viewport.

2. Flexible Images

Hình ảnh xuất hiện trên web sẽ có 2 nhóm là có thể cắt đi những phần không quan trọng và nhóm khác sẽ giữ nguyên ảnh nhưng sẽ bị zoom to hoặc nhỏ lại. Flexible Images là kỹ thuật giúp cho phép hình ảnh tự động điều chỉnh kích thước phù hợp với vùng chứa mà không bị méo mỏ hay vỡ hình.

3. Media Queries

Media Queries là một tính năng của CSS nhằm tạo nên một fluid layout và flexible content. Các thuộc tính min-width và max-width sẽ linh hoạt điều chỉnh kích thước, độ phân giải của màn hình và trình duyệt của các thiết bị khác nhau sao cho phù hợp.