Tam giác ma thuật của Amazon
UI
23
UX
15
design
20
White

Vu Nhat Minh viết ngày 29/03/2016

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

Amazon Menu

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

Khan Academy Menu

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é:

Dead case

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

magic triangle

  • Ở 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 :)

jQuery-menu-aim

Tham khảo

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

50 bài viết.
475 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
69 2
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết hơn 1 năm trước
69 2
White
42 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết hơn 1 năm trước
42 5
White
39 4
Đây là một bài trên vinacode cách đây ít lâu, các bạn có thể đọc tại (Link). Lập trình là một nghề hạnh phúc vì lập trình viên có khả năng và điề...
Vu Nhat Minh viết hơn 1 năm trước
39 4
Bài viết liên quan
White
42 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết hơn 1 năm trước
42 5
White
5 2
Trong một bài test của mình, có một câu là hãy thực hiện (Link) giống của (Link). Cách sử dụng là khi bạn nhập một ký tự thì sẽ gởi một request lên...
Võ Hoài Nam viết 1 năm trước
5 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
50 bài viết.
475 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!