List Down Amazon

Bài đăng này đã không được cập nhật trong 3 năm

Chào bạn, hôm nay mình sẽ chia sẻ đến các bạn 1 phương pháp dùng cho dropdown list các item giúp tăng trải nghiệm người dùng mà mình thấy khá là hay ho. Nên muốn vọc và chi sẻ luôn

Để hiểu nhanh về vấn đề này, mình sẽ đưa ra ví dụ luôn giúp các bạn dễ hình dung

Ví dụ 1

Đây là drop down list của amazone Ví dụ 2

Đây là dropdown list cũ của Khan Academy

Qua 2 ví dụ trên, ta có thể thấy rõ đc sự khác biệt của 2 drop down list này đó là tốc độ phản hồi cho người dùng. Ở ví dụ 1, sự tương tác này gần như như ngay lập tức và người dùng sẽ không nhận thấy độ trễ nào. Còn ở ví dụ 2 thì có 1 độ trễ tương đối khi hiện ra thông tin đi kèm.

Vậy lý do nào gây ra độ trễ này, có phải do code xử lý trang Khan Academy chậm nên bị delay như vậy ?

Thực tế không phải là như vậy, độ trễ ở trang Khan Academy được dùng với mục đích giúp người dùng chuyển tử menu chính sang menu con mà menu con ko bị biến mất khi con trỏ chuột chuyển ra ngoài thanh menu chính như ở ví dụ (với bootrap's dropdown menu):

(các bạn có thể thấy lỗi này ở rất nhiều trang web ví dụ trananh.com hay nhaccuatui.com/)

Việc delay ở tran Khan Academy thực tế dùng để xác định menu con nào mà người dùng muốn hướng đến tránh lỗi sảy ra như ví dụ trên.

Vậy có chăng trang Amazone bị lỗi khi chuyển từ menu chính sang menu con ?

Câu trả lời lại là "không", các bạn có thể thử ngay tại trang chủ của amazon.com Vậy thì làm sao mà amazon có thể tạo sự tương tác trực tiếp với người dùng mà không bị mất menu con, hay làm sao nhận biết khi nào người dùng muốn đổi menu chính mà không phải là di chuyển sang menu con. Giải pháp cho vấn đề này rất hay, đó là họ áp dụng phương pháp hình tam giác ma thuật để xác định nhu cầu của người dùng.

Nói thì có vẻ khó hiểu nhưng các bạn có thể thấy được nguyên lý của giải pháp ở hình sau đây

screen_shot_2013-03-06_at_1.17.35_am.png : Nếu như con trỏ chuột di chuyển trong hình tam giác xanh đó thì menu con sẽ được giữ nguyên và không bị biến mất.

Và ở mọi thời điểm khi con trỏ chuột di chuyển, hình tam giác này sẽ được vẽ lại qua 3 vị trí con trỏ chuột, điểm cao nhất và thấp nhất của menu con. Nếu người dùng di chuyển ra ngoài vùng tam giác đó, hệ thống sẽ nhận định là người dùng muốn chuyển menu chính và ẩn menu con đó đi.

Phương pháp này mình thấy rất hay và thú vị vì nó dựa theo thói quen người sử dụng để đưa ra giải pháp đơn giản mà hữu hiệu, nếu họ muốn di chuyển từ menu chính sang menu con thì họ luôn di chuyển thẳng con chuột sang vùng menu con đó do đó chắc chắn con trỏ chuột sẽ nằm trong vùng tam giác. Còn khi người dùng muốn đổi menu chính thì sẽ d chuyển lên hoặc xuống đến menu cần và cn trỏ chuột đã ra khỏi vùng tam giác nên menu con sẽ biến mất và thay thế bới menu mới

Ví dụ:

Và tuyệt vời hơn khi tác giả bài viết này( dĩ nhiên là tác giả bài gốc tiếng anh, chứ không phải mình :p) đã viết ra module js hỗ trợ dạng dropdown menu này, đó là jQuery-menu-aim.

Okie! Giờ chúng ta sẽ bắt đầu dựng 1 awesome dropdown menu thôi nào. DIên nhiên là đơn giản thôi vì tôi cũng mới vọc mà thôi. Tôi sẽ làm thử với rails trước, với các ngôn ngữ khác thì phương pháp chắc cũng tương tự thôi

Trước hết ta sẽ phải dựng 1 khung html cho các menu chính và các menu con đi kèm

<!-- 1 view bất kì -->
<ul id="main_nav">
  <li><a href="#">Food</a></li>
  <li><a href="#">Place</a></li>
</ul>

<div id="flyouts">
  <ul class="sub-menu">
      <li><a href="#">Pho</a></li>
      <li><a href="#">Soup</a></li>
      <li><a href="#">Rame</a></li>
      <li><a href="#">beef</a></li>
  </ul>

  <ul class="sub-menu">
      <li><a href="#">Cinema</a></li>
      <li><a href="#">Station</a></li>
      <li><a href="#">Zoo</a></li>
      <li><a href="#">Stadium</a></li>
      <li><a href="#">Opera House</a></li>
      <li><a href="#">Coffee shop</a></li>
      <li><a href="#">Bus Stop</a></li>
      <li><a href="#">Restaurant</a></li>
  </ul>
</div>

Hãy add thêm css trông cho đẹp mắt 1 tí

/*cusstom.css.scss*/
body {
  padding: 3em;
}

ul ul {
  padding: 0 0 0 2em;
}

#main_nav {
  border: 1px solid red;
  position: relative;
  float: left;
}

#main_nav > li {
  background: #ccc;
  width: 200px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #333;
}
#main_nav li a {
  display: block;
}

#main_nav .sub-menu {
  position: absolute;
    top: 0; left: 200px;
  display: none;
}

#main_nav li.hover .sub-menu {
  display: block;
}

#flyouts {
  float: left;
}

#flyouts ul {
  display: none;
}

Sau đó bạn cần phải add file jQuery-menu-aim.js vào thư mục app/asset/javascript

Đồng thời bạn phải khai báo sử dụng jquery.menu-aim cho menu bạn vừa tạo ở trên thêm qua đoạn code sau

//menu.js
$("document").ready(function(){
    $("#main_nav").menuAim({

        // hiện menu con khi con trỏ chuột trỏ tới
        activate: function(a){
            var idx = $(a).index(); // lấy ra giá trị menu được chọn với vị trí con trỏ chuột tương ứng
            $('#flyouts ul').eq(idx).show();
        },

        //ẩn menu con khi con tro chuột ra ngoài vùng tam giác
        deactivate: function(a){
            var idx = $(a).index();
            $('#flyouts ul').eq(idx).hide();

        }
    });

    // ẩn tất cả các menu khi người dùng click chuột ra ngaoif vùng menu
    $(document).click(function() {
      $('#flyouts ul').hide();
    });
});

Xong hãy chạy rails s bật server lên và test thử thành quả của mình thôi nào. Ngoài cách làm đơn giản trên các bạn có thể google với từ khóa jQuery-menu-aim demo để xem thêm rất nhiều ví dụ khác áp dụng phương pháp trên, có rất nhiều cái hay và thú vị mà bạn sẽ tìm được ở đó

Chúc các bạn áp dụng thành công và enjoin your code

Tham khảo

Mục lục