Home » Blog lập trình » [Web design] Ý tưởng thiết kế web nâng cao trải nghiệm người dùng [Phần 2]

[Web design] Ý tưởng thiết kế web nâng cao trải nghiệm người dùng [Phần 2]

Tiếp tục bài viết thiết kế web nâng cao trải nghiệm người dùng phần 1, hôm nay mình sẽ giới thiệu tiếp 4 ý tượng nhỏ  trong thiết kế web nhưng mang lại liệu hiểu quả lớn trong nâng cao trải nghiệm người dùng.

Ý tưởng 3: Cố gắng gọp các chức năng

Hãy cố gắng gọp các chức năng tương tự của website lại thay vì phải phân mảnh giao diện để phục vụ thật nhiều chức năng. Ví dụ: website có các mục: Chat With Us Now , Call Us Now, Send Message Now, thì bạn có thể gọp chúng thành một chức năng duy nhất đó là Contact Us.

Xét về mặt tâm lí, website có quá nhiều đề mục để thế hiện quá nhiều chức năng sẽ khiến người dùng rối mắt và phân vân. Do đó, thay vì phải phổ trương quá nhiều chức năng, bạn hãy gọp các chức năng tương tự lại thành một đề mục duy nhất.

Minh họa: Cố gắng gọp các chức năng lại có trải nghiệm người dùng tốt hơn.

Minh họa: Cố gắng gọp các chức năng lại có trải nghiệm người dùng tốt hơn.

Ý tưởng 4: Sử dụng lời nhận xét của người khác

Hãy sử dụng những lời nhận xét của khách hàng sau khi sử dụng dịch vụ của bạn thay cho những lời tự giới thiệu bản thân.

Bạn có thể thiết kế chức năng nhận xét dựa trên các tài khoản mạng xã hội nhưng Facebook, Twitter để tăng tính khách quan hơn.

Về mặt tâm lí, những lời nhận xét của khách hàng chắc hẳn sẽ mang tính thuyết phục cao hơn hẳn so với những gì bạn tự nhận định về bản thân mình.

Trên giao diện, sau khi dẫn chứng những lời nhận xét tích cực của khách hàng, bạn hãy thêm vào “Your Call to Action” (Kêu gọi hành động) của bạn.

Minh họa: Dùng nhận xét của khách hàng thay cho lời tự giới thiệu bản thân

Minh họa: Dùng nhận xét của khách hàng thay cho lời tự giới thiệu bản thân

Ý tưởng 5: Lặp lại “Your call to action” ở cuối trang

Hãy thử lập lại các “Your call to action” (kêu gọi hành động) ở cuối trang web thay gì chỉ thể hiện 1 lần duy nhất ở đầu trang. Chiến lược này thích hợp cho những trang có nội dung dài, do đó, lập lại “Your call to action” sẽ không gây cảm giác phiền phức, trái lại nó còn giúp thúc đẩy việc người dùng nhấn vào “Your call to action” của bạn.

Hãy đặt “Your call to action” của bạn không chỉ ở đầu trang mà còn ở cuối trang nữa vì khi người dùng kéo xuống đến cuối trang, họ sẽ suy nghĩ xem mình sẽ làm gì tiếp theo, do đó, một “Your call to Action” ở phía cuối trang là cực kì hợp lí.

Minh họa: Lặp lại "Call to action" ở cuối trang sẽ nâng cao trải nghiệm người dùng

Minh họa: Lặp lại “Your call to action” ở cuối trang sẽ nâng cao trải nghiệm người dùng

Ý tưởng 6: Làm khách biệt những thứ có thể click hoặc chọn

Những thứ có thể click vào tiêu biểu nhất là link (thẻ <a> trong HTML) hoặc button.  Một số trang web có xu hướng tùy chỉnh cho link có cùng màu với chữ của trang web, nhưng theo tôi thì cách làm này không mang lại trải nghiệm cao cho người dùng bời người dùng sẽ không phân biệt đâu là link, đâu là text thông thường. Bản chất của link là dùng để dẫn đến một trang có liên quan, dó đó cần phải cho người dùng thấy được link để họ tìm đến các trang liên quan.

Những thứ có thể chọn tiêu biểu là các item trong navigation (thanh chuyển hướng thường ở đầu mỗi trang web), khi một item được chọn, chúng cần được làm nổi bật hơn các item khác. Điều này sẽ giúp người dùng nhận thức được “họ đang ở đâu” trên trang web của bạn. Đừng nên dùng quá nhiều màu sắc sẽ gây rối mắt cho người dùng.

Ví dụ: Trang web của tôi dùng chữ màu xanh, và khi một item được chọn, nó sẽ được chuyển sang màu đen để phân biệt với các item còn lại.

Minh họa: Sử dụng 2 màu để phân biệt các item sẽ có trải nghiệm người dung tốt hơn việc sử dụng nhiều màu lè loẹt

Minh họa: Sử dụng 2 màu để phân biệt các item sẽ có trải nghiệm người dung tốt hơn việc sử dụng nhiều màu lè loẹt


Bạn có ý tưởng nào hay, hãy chia sẻ với mọi người ở phần bình luận bên dưới nhé 🙂

Hẹn gặp các bạn trong trong phần 3 của chủ đề: Ý tưởng thiết kế web nâng cao trải nghiệm người dùng.

 

Share
Share
Free WordPress Themes - Download High-quality Templates