Thực đơn
trang chủYandex

Biểu tượng bánh hamburger: những cách mới để sử dụng nó. Tại sao bạn nên tránh thực đơn hamburger và cách thực hiện

Cho đến nay chúng tôi chỉ thực hiện việc bố trí.

5. Tải xuống thư viện jquery-3.3.1.min.js

Chúng tôi kết nối với tài liệu HTML của mình trước khi đóng thẻ cơ thể hai tập tin, một trong số chúng vẫn trống.



6. Tạo sự kiện trong JS

Chúng tôi viết đoạn mã sau vào tệp script.js

$(hàm())(
$(".menuBurger").on("click", function())(
$(".menu").slideToggle(200, function())(
if($(this).css("display") === "none")(
$(this).removeAttr("style");
}
});
});
});

Chúng tôi sẽ không phân tích mã JS một cách chi tiết; chúng tôi sẽ giới hạn ở những nhận xét chung chung. Tôi có thể giới thiệu nó cho những ai quan tâm đến lập trình JS

Dòng này $(".menuBurger").on("click", function())( giám sát sự kiện nhấp chuột trên một phần tử có lớp .menuBurger .

$(".menu").slideToggle(200, function())( ở đây, hàm slideToggle() được áp dụng cho chính menu, chức năng này sẽ mở rộng hoặc thu gọn luân phiên các thành phần đã chọn trên trang trong 200 mili giây.

$(this).removeAttr("style"); - loại bỏ display: none khỏi kiểu nội tuyến;

Bây giờ, khi bạn nhấp vào bánh hamburger, menu sẽ mở rộng và thu gọn, nhưng có một vấn đề: khi mở rộng, menu sẽ di chuyển nội dung chính của trang xuống dưới, nhưng vẫn đúng nếu nó ở trên cùng của nội dung. Đồng thời, tốc độ tải trang bị ảnh hưởng, đặc biệt là trên Internet di động.

6. Mở rộng menu phía trên nội dung

Vấn đề này được giải quyết bằng cách định vị menu.

Trong mã CSS chính bạn cần thêm

Thực đơn (
vị trí: tương đối;
}

Trong truy vấn phương tiện: .menu (
nền: #eee;
vị trí: tuyệt đối;
}

Sau đó, menu hamburger sẽ mở rộng bên trên nội dung chính. Đó là cách nó nên được.

Menu hamburger trong CSS

1. Vô hiệu hóa và xóa tất cả các tập lệnh

2. Chèn một dòng mã vào file HTML giữa thẻ div và ul

3. Thay thế thẻ div với lớp .menuBurger trên nhãn

4. Liên kết đầu vào id với thuộc tính for label thông qua #menuCSS

Kết quả là khi bạn nhấp vào biểu tượng menu hamburger, dấu kiểm sẽ xuất hiện trong hộp kiểm.

5. Thêm lớp giả đã kiểm tra vào truy vấn phương tiện

#menuCSS:đã chọn (
không trưng bày;
}

Điều này có nghĩa là khi bạn nhấp vào biểu tượng, một dấu tích sẽ được đặt trong hộp kiểm nhưng nó bị ẩn trên màn hình, chỉ hiển thị biểu tượng. Ý tưởng là nếu hộp kiểm không được chọn thì menu sẽ bị đóng và nếu nó được chọn thì menu sẽ được mở rộng. Sự kiện mở và đóng menu phụ thuộc vào trạng thái của hộp kiểm.

6. Ẩn đầu vào trong CSS

#menuCSS (
không trưng bày;
}

7. Thay đổi mã ở điểm 5, xem phần trên của bài viết để biết phần sau

#menuCSS:đã chọn + .menu (
hiển thị: khối;
}

Nếu như Kết nối với đường dẫn giữa nhãn và đầu vào #menuCSS được chọn (đã chọn), sau đó menu được mở rộng. Đó là tất cả những điều kỳ diệu, thực đơn hamburger có tác dụng CSS thuần túy và nếu bạn thêm hoạt ảnh mượt mà vào nó thì bạn sẽ không cảm thấy bất kỳ sự khác biệt nào so với menu JS.

Hãy thử làm cho trình duyệt của bạn nhỏ hơn và bạn sẽ thấy rõ menu CSS hamburger hoạt động như thế nào

Phần kết luận

Cả hai tùy chọn đều đang hoạt động. Giả sử, menu trong JS là chính xác theo quan điểm sử dụng mã. Menu trong CSS là một “cái nạng”, một loại “biểu hiện của sự khéo léo”, rất phù hợp cho những người không muốn hiểu JS và chỉ sử dụng nó trong các dự án của họ. Đối với các trang web được tạo riêng, không có “nạng nạng”; tôi thực sự khuyên bạn nên tạo bố cục phù hợp để các chuyên gia khác sử dụng thêm JS.

Từ Vitaly Rubtsov, tôi không thể cưỡng lại mong muốn hiện thực hóa điều đó.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thực hiện việc này chỉ bằng CSS mà không cần bất kỳ sử dụng JavaScript. Vì vậy, chúng ta sẽ thấy một số thủ thuật CSS (và SCSS) cho phép chúng ta đạt được những kết quả gần như tương tự hoạt hình mượt mà, giống như ảnh gif hoạt hình này.

Đây là một ví dụ về những gì chúng tôi sẽ làm:

Đánh dấu

Hãy bắt đầu với Cấu trúc HTML, mà chúng tôi sẽ sử dụng. Xem bình luận để hiểu rõ hơn.

Điều khiển Câu chuyện Số liệu thống kê Cài đặt

Bắt đầu kiểu SCSS

Bây giờ hãy thêm một số kiểu cơ bản để có được những gì chúng ta muốn vẻ bề ngoài. Mã này khá đơn giản.

/* Kiểu cơ bản */ * ( box-sizing: border-box; ) html, body ( lề: 0; ) body ( font-family: sans-serif; Background-color: #F6C390; ) a ( text-trang trí: none; ) .container (vị trí: tương đối; lề: 35px tự động 0; chiều rộng: 300px; chiều cao: 534px; màu nền: #533557; tràn: ẩn; )

Chuyển đổi hoạt động

Trước khi bắt đầu tạo phần còn lại của giao diện, chúng tôi sẽ thêm một số chức năng chuyển đổi để dễ dàng chuyển từ trạng thái này sang trạng thái khác.

HTML chúng tôi cần đã có sẵn. Và phong cách làm cho nó hoạt động giống như thế này:

// Ẩn hộp kiểm #toggle ( display: none; ) // Kiểu cho trạng thái "mở" khi hộp kiểm được chọn #toggle:checked ( // Bất kỳ phần tử nào có kiểu bạn cần thay đổi khi mở menu sẽ ở đây với a bộ chọn ~ // Kiểu mở Chức năng điều hướng, ví dụ & ~ .nav ( ) )

Tạo trạng thái đóng

Để tạo trạng thái đóng, chúng ta cần chuyển đổi các mục menu thành các dòng để có biểu tượng bánh hamburger. Có một số cách để đạt được sự chuyển đổi này. Chúng tôi quyết định làm theo cách này:

Và đây là mã thực hiện điều này.

$thời lượng chuyển tiếp: 0,5 giây; // Hiển thị các mục điều hướng dưới dạng các dòng tạo nên biểu tượng hamburger.nav-item ( vị trí: tương đối; hiển thị: khối nội tuyến; float: left; clear: cả hai; color: trong suốt; cỡ chữ: 14px; khoảng cách chữ: - 6.2px; chiều cao dòng: 7px; khoảng trắng: nowrap;scaleY(0.2); transition: $transition-duration, opacity 1s; chiều rộng cho dòng thứ hai &:nth-child(2) ( letter-spacing: -7px; ) // Cài đặt cho các phần tử bắt đầu từ dòng thứ tư & :nth-child(n + 4) ( letter-spacing: -8px; lề -top: -7px; opacity: 0; ) // Lấy các dòng cho biểu tượng bánh hamburger &:trước ( vị trí: tuyệt đối; nội dung: ""; top : 50%; chiều rộng: 100%; màu nền: #EC7263; biến đổi : dịchY(5); chuyển tiếp: $transition-duration;

Xin lưu ý rằng ở đây chúng tôi chỉ đưa vào các kiểu cơ bản cho các mục điều hướng quan trọng nhất. Bạn có thể tìm thấy mã hoàn chỉnh trên Github.

Tạo một menu mở

Để tạo mở thực đơn, chúng ta cần khôi phục các điểm điều hướng từ các dòng về các điểm thông thường liên kết văn bản, và cũng làm một loạt những thay đổi nhỏ. Hãy xem cách thực hiện việc này:

$thời lượng chuyển tiếp: 0,5 giây; #toggle:checked ( // Mở & ~ .nav ( // Khôi phục các mục điều hướng từ “dòng” trong menu icon.nav-item ( color: #EC7263; letter-spacing: 0; Height: 40px; line- chiều cao: 40px ; lề trên: 0; độ mờ: 1; chuyển tiếp: $transition-duration, opacity 0.1s; // Ẩn các dòng &: trước ( opacity: ) )

Phép thuật nằm ở những điều nhỏ nhặt

Nếu xem xét kỹ hơn ảnh gif, chúng ta sẽ thấy rằng tất cả các mục menu không được di chuyển cùng lúc mà theo hình bàn cờ. Chúng ta cũng có thể làm điều này trong CSS! Về cơ bản, chúng ta cần chọn từng phần tử (sử dụng :nth-child ) và đặt giá trị độ trễ chuyển tiếp tăng dần. Đây chắc chắn là công việc lặp đi lặp lại. Điều gì sẽ xảy ra nếu chúng ta có nhiều yếu tố hơn? Đừng lo lắng, chúng ta có thể làm mọi thứ tốt hơn bằng cách sử dụng một chút phép thuật SCSS:

$mục: 4; $độ trễ chuyển tiếp: 0,05 giây; .nav-item ( // Đặt độ trễ cho các mục điều hướng khi đóng @for $i từ 1 đến $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - độ trễ; độ trễ chuyển tiếp: $delay; &:trước ( độ trễ chuyển tiếp: $delay; ) ) )

Lưu ý rằng với mã này, chúng ta sẽ có được hành vi bước mong muốn cho hoạt ảnh đóng. Chúng ta cần tính toán $delay, hơi khác một chút đối với hoạt ảnh mở đầu, để quay lại bước chuyển tiếp. Như thế này:

$delay: ($items - $i) * $transition-delay;

Phần kết luận

Chúng ta đã hoàn thành xong thực đơn ưa thích của mình! Chúng tôi cũng bao gồm một số mặt hàng giả như trong gif hoạt hình và bạn có thể thấy.

Vì vậy, chúng tôi đã tạo ra một cách đơn giản và thực đơn chức năng chỉ trong CSS. Tuy nhiên, nếu bạn không muốn sử dụng hệ thống chuyển đổi CSS, nó có thể được thay thế hoàn hảo bằng một vài Chuỗi JavaScript không cần nỗ lực nhiều.

Chúng tôi hy vọng bạn thích hướng dẫn này và thấy nó hữu ích!

Có lẽ bạn đã chán đọc các bài báo và liên tục nghe các cuộc thảo luận khác nhau về ba dòng ngắn thực đơn hamburger. Đây có phải là một kỹ thuật thiết kế giao diện người dùng tồi? Hay không tệ? Bài đăng này thì khác - nó sẽ không đánh giá thực đơn này tốt hay xấu. Vấn đề là tôi không nghĩ đó là quyết định thiết kế tốt nhất, bằng cách này hay cách khác. Nhưng thực đơn hamburger cũng có cái riêng của nó điểm mạnh, đặc biệt khi được sử dụng trong thiết kế di động, trong điều kiện không gian hạn chế. Vậy chúng ta có thể làm gì? Chỉ cần chấp nhận thực đơn hamburger như hiện tại, bất chấp mọi thiếu sót, và tiếp tục cuộc sống của bạn? Rất nhiều trang web và ứng dụng dường như đã chấp nhận điều này. Và tôi tin rằng tôi có khả năng tốt nhất.

Và rồi có hai điều xảy ra khiến tôi thay đổi quyết định. Đầu tiên, tôi tình cờ gặp . Đây là một bài viết thực sự giúp hiểu được ý nghĩa của việc sử dụng thực đơn hamburger. Đặc biệt, các trang web có menu như vậy sẽ bị giảm mức độ tương tác của người dùng một cách nghiêm trọng. Việc xem xét lại số liệu thống kê như vậy mới bắt đầu thay đổi quan điểm của tôi.

Sự cố tiếp theo xảy ra khi tôi đang quan sát một đồng nghiệp đang cố gắng sử dụng một ứng dụng web mới có menu như vậy. Đây là một nhà phát triển rất quen thuộc với giao diện menu hamburger, nhưng khi sử dụng ứng dụng cho nhu cầu của mình, anh ấy đã lớn tiếng hỏi: “Tôi làm cách nào để đến đó?” Xin lưu ý đây là một trong những những người thông minh nhất, điều đó tôi biết, và anh ấy thậm chí còn không nghĩ đến việc chạm vào biểu tượng menu hamburger. Nếu ai đó thông minh như vậy gặp khó khăn trong việc điều hướng, điều đó nói lên điều gì về người dùng thông thường? Ý kiến ​​của tôi cuối cùng đã có được một nền tảng vững chắc.

Tìm giải pháp

Lý do khiến tôi không tin vào sức mạnh của thực đơn hamburger như vậy là đủ - đã đến lúc nói về giải pháp. Đầu tiên, tôi xem xét những lợi ích cụ thể của việc sử dụng thực đơn hamburger:

  • Khả năng mở rộng: đây có lẽ là điểm cộng chính và Lý do chính tại sao rất nhiều trang web và ứng dụng chọn nó. Bạn có thể đặt nhiều yếu tố điều hướng đằng sau một biểu tượng nhỏ.
  • Độ chính xác: điều này đi đôi với khả năng mở rộng, nhưng vẫn không giống nhau. Các nhà thiết kế muốn tạo ra những thiết kế ngắn gọn, gọn gàng, chừa đủ không gian cho nội dung chính. Sử dụng menu hamburger mang lại cảm giác đơn giản về mặt hình ảnh, hấp dẫn đối với bất kỳ nhà thiết kế nào.

Và nếu chúng ta muốn tạo ra một lựa chọn thay thế cho thực đơn hamburger, thì bằng cách nào đó nó phải giải quyết được các vấn đề liên quan đến nó:

  • Tính dễ hiểu: Các thành phần điều hướng phải dễ dàng được tìm thấy, đặc biệt đối với những người sử dụng sản phẩm lần đầu tiên.
  • Tương tác: Giao diện phải cung cấp gợi ý và phản hồi giải thích những gì người dùng có thể làm với sản phẩm và khi nào thì thích hợp để sử dụng một số tính năng nhất định.
Phần khó khăn: di động

Tôi quyết định bắt đầu với hầu hết vấn đề phức tạp và kiểm tra xem giải pháp của tôi có phù hợp với thiết kế di động. Sau khi nghiền ngẫm rất nhiều ý tưởng, tôi đi đến kết luận rằng menu thanh tab của iOS là một trong những giải pháp tốt nhất cho giao diện di động. Rất nhiều người đã cố gắng làm cho thanh tab có thể cuộn được (để phù hợp với hơn năm tùy chọn) hoặc thêm “thêm” vào điều hướng - giống như Plyushkin, người có một phòng thừa sẽ nhanh chóng lấp đầy những thứ rác rưởi. Ngoài ra, cả hai tùy chọn này vẫn không đáp ứng được yêu cầu chính - thiếu sự rõ ràng, khả năng hiển thị của tất cả các khả năng. Vậy bạn có thể làm gì với menu tab để khắc phục điều này?

Giải pháp của tôi là kết hợp thanh hamburger và thanh tab thành một cách tiếp cận duy nhất. Kết quả là một thanh tab mở ra một tập hợp các tùy chọn cho từng mục menu.

Tôi đã tạo một ứng dụng kiểm tra năng suất nhóm để minh họa cách tiếp cận của mình trong thực tế. Sử dụng phương pháp này, người dùng có thể thấy rõ chức năng và công dụng chính của sản phẩm. Và thay vì chìm vào giấc ngủ danh sách đầy đủ các mục menu ẩn đằng sau biểu tượng bánh hamburger, người dùng sẽ được hiển thị một số tùy chọn liên quan đến tab mà họ đã nhấp vào. Điều này giúp điều hướng dễ hiểu và dễ hiểu hơn, mọi thứ bạn cần luôn trong tầm tay và cho phép người dùng xem thứ bậc của ứng dụng.

Một ưu điểm khác của thiết kế này là khả năng sử dụng thông báo theo ngữ cảnh. Trong trường hợp menu hamburger, bạn chỉ có một nơi để hiển thị các thông báo này. Nếu bạn vẫn giữ bố cục thanh tab, bạn có thể cung cấp gợi ý cho người dùng về bất kỳ mục menu nào họ chọn.

Tất nhiên, lợi ích lớn nhất của phương pháp này là Khả năng mở rộng. Có, bạn vẫn bị giới hạn ở năm danh mục, nhưng đó là một điều tốt. Thành thật mà nói, tôi nghĩ rằng bất kỳ trang web nào cũng có thể sắp xếp các tùy chọn của mình thành năm loại nếu nhà thiết kế suy nghĩ kỹ càng về điều hướng. Rốt cuộc, trong mỗi danh mục này có thể có thêm năm hoặc sáu mục phụ.
Tổng cộng, có 30 tùy chọn điều hướng khả thi mà không gây cảm giác quá tải cho người dùng và không chiếm toàn bộ không gian màn hình.

Ứng dụng cho máy tính bảng

Việc tích hợp thanh tab như vậy vào máy tính bảng nghe có vẻ lạ. Máy tính bảng linh hoạt hơn nhiều và việc sử dụng cùng một giao diện người dùng như thiết bị di động trông có vẻ vụng về như một thiếu niên mặc bộ quần áo đã cũ từ lâu. Vì thế tôi đã đi một con đường khác. Thay vì đặt thanh tab ở dưới cùng thì tôi đặt nó ở bên cạnh. Điều này hóa ra lại thuận tiện hơn trong việc sử dụng không gian màn hình và trông rất tự nhiên. Ngoài ra, nhiều người dùng cầm máy tính bảng ở bên cạnh nên đây là khu vực mục tiêu để chạm ngón tay.

Còn máy tính để bàn thì sao?

Hãy sẵn sàng...trình đơn kéo ra. Đúng vậy - hãy thử phương pháp này trên giao diện máy tính để bàn và bạn sẽ phải đối mặt với một thực tế không thể phủ nhận: tùy chọn này không hề mới chút nào. Menu trượt đã xuất hiện trong nhiều năm và hầu như bất kỳ ai (kể cả mẹ bạn) đều biết nó hoạt động như thế nào. Đó là cái hay của phương pháp này - nó không có gì mới.


Tiết lộ đầy đủ

Tôi không biết gọi thứ này là gì. Thanh trượt khảm? Hoặc TABurger (TAB “tab” + burger)? Hơn nữa, tôi không biết trước đây có ai đã tạo ra giải pháp tương tự hay chưa. Với sự đơn giản của thực đơn như vậy, tôi không thể chịu được khi nghĩ rằng mình là người đầu tiên. Tôi biết một số ứng dụng sử dụng menu trượt trên một số nút tab (như Tweetbot), nhưng chúng thường được triển khai như thế này truy cập nhanh dành cho người dùng nâng cao chứ không nhằm mục đích tăng thứ bậc điều hướng. Nếu bạn có một ví dụ như vậy, hãy cho tôi biết trong phần bình luận.
Không quan trọng thực đơn như vậy là mới hay đã được phát minh từ lâu. Điều quan trọng là liệu nó có phải là giải pháp điều hướng tốt hơn, sáng tạo hơn menu hamburger hay không. Đừng tự nhủ “Trang web thú vị này có thực đơn này, vì vậy nó phải là tốt nhất” hoặc “Mọi người đều làm như vậy nên nó phải đúng”. Thiết kế xứng đáng có một cách tiếp cận tốt hơn, chu đáo hơn.
CẬP NHẬT
Collin Eberhardt lưu ý trên Twitter rằng giao diện người dùng tương tự được triển khai trong Điện thoại Windows. bản thân tôi Người dùng WindowsĐiện thoại, và anh ấy đã đúng. Mặc dù kiểu tương tác này chỉ được sử dụng trong Windows Phone cho tùy chọn “thêm” trên thanh tab.

James Perich đưa ra một ví dụ khác trên Twitter. Hãy xem AHTabBarController được tạo bởi Arthur Hemmer.

Bạn sẽ gặp khó khăn hơn trong việc cung cấp thông tin cho người dùng về một mục cụ thể nếu nó chỉ hiển thị khi người dùng mở menu tìm kiếm mục khác.

Bạn có thể làm điều đó giống như trong ứng dụng Jawbone Up: hiển thị biểu tượng phản ánh bản chất của thông báo bên cạnh nút thực đơn bên.

Cách tiếp cận này không có quy mô tốt vì nó liên quan đến việc tạo ra số lượng lớn các biểu tượng đặc biệt và bạn, với tư cách là nhà thiết kế, đôi khi sẽ phải sử dụng biểu tượng chuẩn, mang ít ý nghĩa hơn.

Đây là ví dụ ngược lại: thanh tab của Twitter, hiển thị cho người dùng ngữ cảnh của thông báo và cho phép người dùng truy cập trực tiếp vào màn hình liên quan.

Nhận thức về vấn đề

Có vẻ như bạn bắt buộc làm tất cả những điều này để tiết kiệm nhiều diện tích màn hình hơn, nhưng chúng ta thường hiểu sai những gì mọi người thực sự nhìn thấy. Đối với bạn, có vẻ như mọi người nhìn thấy mọi thứ trước mắt họ, nhưng trên thực tế, tất cả chúng ta đều có một vùng tập trung nhất định, ngay cả khi kích thước màn hình ở mức tối thiểu ().

Do đó, vấn đề tiết kiệm không gian màn hình có thể được giải quyết mà không ảnh hưởng đến việc điều hướng — và phù hợp với nguyên tắc cơ bản HCI (Tương tác giữa người với máy tính) yêu cầu chúng tôi cung cấp nhận xét và hiển thị trạng thái ứng dụng.

Lưu ý: Bạn có thể cần phải nâng cao hiểu biết của mình về các nguyên tắc HCI — Tôi khá chắc chắn rằng điều này sẽ giúp bạn tránh được rất nhiều lỗi thiết kế mà những người có cách tiếp cận thiết kế bằng hình ảnh thường mắc phải.

Giải pháp

Chúng ta đã nói rất nhiều về vấn đề này nhưng giải pháp vẫn chưa rõ ràng.

Khi nào bạn có thể sử dụng menu hamburger?

Trong một số trường hợp rất hiếm, mô hình này thực sự hợp lý, nhưng nói chung nên tránh.

IRCCloud là một ví dụ về việc sử dụng nút hamburger hợp lý (ở một mức độ nào đó): nó được sử dụng để điều hướng giữa các kênh và các thành viên kênh.

Điều này có thể chấp nhận được vì màn hình chính không có màn hình con nào cần điều hướng theo cấp bậc; tất cả nội dung được trình bày dưới dạng phương thức.

Nhưng ngay cả trong trường hợp này, rõ ràng là giao diện đã bị quá tải và kiến ​​trúc thông tin cần được sửa đổi.

Menu bên hiển thị các thành viên kênh (ở bên phải) thay thế nút hành động, theo đó tất cả các hành động liên quan đến kênh có thể bị ẩn. Thay vào đó, các nhà thiết kế phải kết hợp mọi thứ hành động có thể(liên quan đến kênh, mạng và tài khoản) vào một menu hành động:

Điều này đưa chúng ta đến phần tiếp theo của bài viết một cách suôn sẻ:

Làm thế nào để thay thế nút hamburger?

Mẫu menu bên kéo theo xu hướng xấu kiến trúc thông tin: Nút hamburger là một thành phần giao diện khác không hiển thị bất kỳ chuỗi hành động nào — cho đến khi mọi người sử dụng nó.

“Giải pháp là cập nhật kiến ​​trúc thông tin.”

Những hình ảnh trên là ví dụ về cách bạn có thể tránh menu bên. Các chấm màu giúp bạn theo dõi cách sắp xếp lại các thành phần giao diện.

Kết luận:

  • Trạng thái được hiển thị trên tab Tin nhắn
  • Các thành phần giao diện luôn hiển thị và có thể truy cập được
  • Không có xung đột giữa các cử chỉ điều hướng

    • Ngoài việc giải quyết các vấn đề chính, chúng ta có thể đạt được một số không gian theo chiều dọc bằng cách ẩn thanh điều hướng của ứng dụng khi cuộn xuống (xem bên dưới). Ví dụ về Facebook, nhưng điều này cũng được sử dụng trong Safari). Thanh tab vẫn giữ nguyên, cho phép chúng ta điều hướng ngay cả khi thanh điều hướng của ứng dụng bị ẩn.

    Nếu bạn đang có tâm trạng tối giản, có lẽ một thanh công cụ là đủ. Mục đích là làm cho điều hướng hiển thị, cấp quyền truy cập trực tiếp vào các chức năng, tránh xung đột giữa các cử chỉ điều hướng và hiển thị cảnh báo trên các biểu tượng mà chúng thuộc về.

    [Cập nhật] Trong trường hợp trang web, bạn cũng nên xem xét lại kiến ​​trúc thông tin, nhưng thay vì sử dụng các mẫu iOS này, tôi khuyên bạn nên hiển thị điều hướng ở trên cùng, dưới dạng danh sách: ví dụ. Nếu rõ ràng đây là điều hướng của trang web, mọi người chắc chắn sẽ di chuyển xa hơn và thấy ngay tất cả các tùy chọn khác có sẵn.

    Ngoài ra, quay trở lại chủ đề của các trang web trên thiêt bị di động: Đảm bảo loại bỏ độ trễ nhấn 300 mili giây bằng cách sử dụng các mẹo này hoặc sử dụng các sự kiện chạm.

    Làm thế nào tất cả điều này có quy mô?

    Tôi đang mang nó đến đây Ví dụ về iOS giao diện — giải pháp tốt nhất trên đó là việc sử dụng bảng điều khiển với các tab hoặc công cụ.

    Nhưng nếu thanh tab của bạn có nhiều hơn 5 mục thì sao?

    Trong những tình huống như vậy, điều đầu tiên bạn cần làm là xem xét lại kiến ​​trúc thông tin của ứng dụng. Nhưng nếu bạn vẫn phải vượt quá năm tab, phương pháp sau thường được sử dụng: tab cuối cùng cấp quyền truy cập vào danh sách các tùy chọn còn lại.

    Việc triển khai này gặp phải một vấn đề khác: sau khi cuộn, thanh công cụ vẫn ở trạng thái không xác định. Tân binh ẩn bảng điều khiển sau khi người dùng chọn một trong các hành động — cắt, xoay, v.v. Do đó, trạng thái không xác định của bảng điều khiển là “reset” và khi mở lại, nó sẽ hiển thị ở trạng thái ban đầu.

    Phần kết luận

    Vì vậy, bạn đã đọc một bài viết về các vấn đề với mẫu thanh bên và giải pháp của chúng trong iOS, vốn đã được tích hợp vào hệ thống ngay từ đầu.

    Tôi hy vọng bài viết hữu ích và dễ hiểu đối với bạn. Nếu bạn có ý kiến ​​gì xin vui lòng viết thư cho tôi

    Biểu tượng hamburger ở khắp mọi nơi. Ở khắp mọi nơi xung quanh chúng ta. Trong các ứng dụng web, trên các trang web dành cho thiết bị di động và máy tính để bàn, trong phần mềm. Biểu tượng ba dòng phổ biến này ngày nay phổ biến đến mức dường như nó được liên kết duy nhất với menu điều hướng. Nhưng nó là?

    TRONG Gần đây các cuộc thảo luận về tính hiệu quả của biểu tượng bánh hamburger đã đạt đến tầm cao mới. Các bài viết của các nhà thiết kế nổi tiếng và một số trang web bao gồm The Atlantic, TechCrunch, The Next Web và Nielsen Norman Group, kết luận rằng đây là một mẫu chống UX, một biểu tượng hợp thời trang và dễ thực hiện, là sự thoái lui từ đơn giản hơn, hơn thế nữa. các lựa chọn thay thế biểu cảm. Nhưng dù có chống khuôn mẫu hay không thì việc sử dụng biểu tượng đã phát triển đến mức nó gần như trở thành vật cố định trên hầu hết các trang web, đặc biệt là trên màn hình nhỏ.

    Với vị trí của tôi là nhà thiết kế trong nhóm m.booking.com và việc chúng tôi sử dụng biểu tượng này để hiển thị menu trượt ra, tôi quyết định khám phá đối tượng này. Tôi bắt đầu nghiên cứu nguồn gốc của biểu tượng để cố gắng hiểu con đường dẫn đến sự ô nhục của nó.

    Điều này nghe có vẻ đầy hứa hẹn. Nhưng mặc dù biểu tượng này là một biểu tượng cổ điển và đã tồn tại mãi mãi, các nhà thiết kế web vẫn chưa nhất quán trong việc sử dụng nó. Biểu tượng này đã được sử dụng cho danh sách, kéo và sắp xếp lại, căn chỉnh, v.v. Có lẽ việc lạm dụng này giải thích sự chỉ trích của nó như một biểu tượng menu. Có lẽ do được phân phối rộng rãi và sử dụng đa dạng, biểu tượng này đã mất khả năng truyền tải một ẩn dụ duy nhất và từ đó khiến người dùng bối rối.

    Toàn bộ câu chuyện này khiến tôi phải đặt câu hỏi: “Có phải chúng ta thực sự sai và những người khác đều đúng? Điều này có gây bất tiện cho người dùng của chúng tôi không? Có người thực sự hiểu ba dòng nhỏ đó trên trang web của chúng tôi là gì không?”

    Những độc giả thường xuyên của blog này sẽ không ngạc nhiên khi biết rằng bước tiếp theo là hỏi những câu hỏi này dưới dạng bài kiểm tra A/B. Giống như mọi thứ khác, biểu tượng bánh hamburger chịu ảnh hưởng từ nhiều khách hàng của chúng tôi, những người thông qua tương tác với menu đã phải xác định xem biểu tượng này có phải là giải pháp tốt nhất hay không. Đến thời điểm này, tôi đã đọc đủ các bài báo và thông tin để tin tưởng rằng việc thiếu sự đồng thuận hoặc các kết quả khác nhau không phải do hành vi của khách hàng mà thiết kế đang được phát triển. Tôi quyết định làm theo phương pháp được mô tả James Foster, đã được nhiều người tham khảo, bao gồm cả một trong những chuyên gia di động hàng đầu của chúng tôi - Luke Wroblewski.

    Trước đây, chúng tôi đã thử nghiệm một số vị trí và kiểu biểu tượng (có đường viền, không có đường viền, có biểu tượng, các màu khác nhau, v.v.), nhưng chúng tôi chưa bao giờ thử nghiệm từ "Menu" do tính phức tạp của mong muốn thử nghiệm trong bốn mươi- một ngôn ngữ, được chúng tôi hỗ trợ. Tuy nhiên, chúng tôi đã tiếp tục, tìm bản dịch với sự trợ giúp của đội ngũ chuyên gia ngôn ngữ và chạy thử nghiệm:

    Biểu tượng menu "hamburger" ban đầu của chúng tôi nằm ở bên trái tiêu đề và có đường phân cách màu trắng ở bên phải.

    Từ "Menu" bên trong một khối có khung màu trắng với góc tròn, cũng được căn trái.

    Chúng tôi đã triển khai thử nghiệm trên toàn bộ cơ sở người dùng của mình. Ngoài ra, với sự phổ biến và phổ biến của yếu tố này giao diện người dùng, hy vọng sẽ không mất nhiều thời gian để thử nghiệm hàng triệu khách hàng của chúng tôi trên khắp thế giới, bằng mọi ngôn ngữ và số lượng lớn thiết bị.

    Vậy cái gì là kết quả cuối cùng? Từ này có đánh bại được đồ ăn nhanh như trong thí nghiệm của James Foster hay bánh mì và cốt lết sẽ thắng?

    Kết quả Trong thử nghiệm này, việc thay thế biểu tượng bằng từ “Menu” không có tác động đáng kể đến hành vi của người dùng. Với sự giúp đỡ của chúng tôi căn cứ khổng lồ người dùng, với khả năng rất cao, chúng tôi có thể tuyên bố rằng, đặc biệt đối với khách truy cập Booking.com, biểu tượng bánh hamburger thực hiện vai trò của nó giống như phiên bản có mô tả văn bản.

    Tất nhiên, chúng ta không thể ngoại suy dữ liệu này cho mọi thứ. Ở một số quốc gia, trên một số ngôn ngữ hoặc thiết bị, nó có thể hoạt động tốt hơn hoặc kém hơn. Nhưng trên phạm vi toàn cầu, chúng ta có thể kết luận rằng “chiếc bánh hamburger” đã bị chế giễu quá nhiều. Nhìn chung, nó dễ nhận biết như từ “Menu”. Với tinh thần quản lý tiến độ thiết kế, có lẽ chúng ta nên xem xét các lựa chọn khác và có thể thử thêm phô mai, một miếng thịt xông khói và khoai tây chiên vào biểu tượng bánh hamburger của mình, nhưng hiện tại, chúng tôi vui mừng thông báo rằng "người bạn ba dòng" của chúng tôi được dán khắp nơi. Tất nhiên, vị trí, hình dạng, kích thước, vị trí và màu sắc thực tế của nó là một chủ đề để thử nghiệm trong tương lai.

    Chắc chắn đây là bài học cho tất cả chúng ta về bản chất của A/B testing. Bạn không bao giờ kiểm tra toàn bộ các thành phần UI, mô hình hoặc chức năng. Bạn kiểm tra những điều này trên một cách rất cụ thể đối tượng tùy chỉnh trong những tình huống nhất định và cụ thể. Những gì hiệu quả với Booking.com có ​​thể không hiệu quả với bạn hoặc người dùng của bạn. Đây là một trong những lý do tại sao chúng tôi thực hiện thử nghiệm A/B. Những phát hiện từ các chuyên gia khác, dữ liệu từ các trang web khác hoặc các giả thuyết được đưa ra trong quán rượu khi đang ăn bánh mì kẹp thịt đều sẽ không được chứng minh cho đến khi chúng được thử nghiệm với khách hàng và trên nền tảng của chúng tôi.

    Đừng lạc lối trong phép ẩn dụ của chính chúng ta, nhưng nó giống như một công thức làm nên một chiếc bánh hamburger ngon. Ngay cả khi bạn viết ra tất cả các thành phần chính xác theo tôi, bạn sẽ có được một chiếc bánh hamburger hoàn toàn khác. Tất nhiên, điều này sẽ bị ảnh hưởng bởi chất lượng thịt hiện có trên thị trường, loại bột dùng làm bánh mì và hàng nghìn yếu tố khác. Đối với cá nhân chúng tôi, ý tưởng đó sẽ tốt nếu nó tốt cho Booking.com. Liệu chúng tôi có thể lặp lại nó trên trang web của mình và liệu nó có hiệu quả với tất cả khách hàng của chúng tôi hay không.

    Ý kiến ​​của chúng tôi Bạn phải luôn kiểm tra ý tưởng của mình và xem dữ liệu cho bạn biết điều gì cũng như những câu hỏi nào phát sinh. Lời khuyên của tôi? Hãy cắn một miếng và xem điều gì sẽ xảy ra.