Tam giác ma thuật của Amazon

Bài viết của tác giả Tran Nhat Huy đăng trên Kipalog.com

Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với di chuyển thời gian thực của con trỏ :v

Tôi vốn nghĩ tốc độ tức thì khi di chuyển con trỏ là điều không thể. Tất cả các menu đều cần một ít delayđể thay đổi nội dung của submenu. Bạn có thể nhìn ví dụ dưới đây

Bạn có biết tại sao lại cần delay không? Nếu không có một chút delay đó, khi bạn di con trỏ ra khỏi menu chính tới submenu nhỏ hơn thì submenu sẽ biến mất ngay khi bạn chưa kịp di chuột đến, tạo ra một hiệu ứng đuổi bắt rất khó chịu cho người dùng. Nếu bạn chưa hiểu lắm thì thử nhìn Bootstrap bug dưới đây nhé:

Tam giác ma thuật của Amazon

Vậy là Amazon đã làm thế nào để vẫn đem lại UX hoàn hảo trong khi không có một tí delay nào ? Chúng ta không thấy Bootstrap bug, và tốc độ thì hẳn là tức thì. Câu trả lời là hình tam giác được đánh dấu dưới đây

• Ở mọi thời điểm, Amazon vẽ ra 1 tam giác với 1 đỉnh là vị trí con trỏ hiện tại và 2 đỉnh còn lại là đỉnh và đáy của submenu.
• Vị trí tiếp theo của con trỏ được kiểm tra xem có nằm trong tam giác này hay không
• Nếu con trỏ vẫn nằm trong hình tam giác, thì Amazon “phán đoán” là user đang dịch chuột về submenu và giữ nguyên nội dung.
• Nếu con trỏ đi ra ngoài thì xét lại vị trí để tìm submenu cũ hay mới.

Những chi tiết nhỏ như thế này tạo ra những trải nghiệm UX tuyệt vời cho người dùng. Nếu bạn muốn sử dụng lại hiệu ứng này thì rất may là có 1 Jquery plugin rồi nhé jQuery-menu-aim ????

Tham khảo

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Techtalk Via kipalog