Scribble at 2022-03-18 10:52:43 Last modified: 2022-03-20 00:19:13

I should start by mentioning that this concept is far from new. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn’t to blow your mind with some new-never-thought-of navigation design. I’m just trying to bring awareness to another available menu concept.

Using Hamburger Menus? Try Sausage Links

モバイルだけに限った話でもないが、最近はページの端に「ハンバーガー・メニュー」と呼ばれる実装方法でメニューを配置する事例が酷く増えている。正直、無意味なキー・ビジュアルをでかでかと配置するくらいなら、最初からメニューの項目を幾つかページに展開すればいいのにと思わざるを得ない用途のサイトもあって(もちろんどんな用途のサイトでもそうする「べき」だとは思ってない)、確かに上記の記事で提案されているような、メニュー・アイテムを幾つか並べて表示する「ソーセージ・リンク」も一つのアイデアだろうと思う。

もちろん、ソーセージ・リンクの短所として適切に説明されているように、"Without proper fade / cut off visual cues, users may not understand they can scroll"(ユーザが最初に眺めるとっかかり箇所をきちんとフェードしたり遮っておかないと、メニューをスクロールできることにユーザが気付かない恐れがある)という技巧が必要だ。ハンバーガー・メニューは、最初のうちこそあれがメニューのボタンだと気づくのに時間がかかったけれど、ひとたび理解できればタップするだけだ。しかし、水平スクロールする UI 要素の場合は、隠れた項目があってもなくても見た目は同じになってしまう恐れがある。すると、ソーセージ・メニューを使い慣れた人でも隠れたメニューがないと錯覚してしまうかもしれない。

|●●●|〇〇〇〇〇

|●●●|

とでは、左にスワイプしてスクロールさせて初めて出てくる「〇〇〇〇〇」の項目があってもなくても、 |●●●| のディフォールトの表示領域は見た目が同じだからだ。

  1. もっと新しいノート <<
  2. >> もっと古いノート

冒頭に戻る


※ 以下の SNS 共有ボタンは JavaScript を使っておらず、ボタンを押すまでは SNS サイトと全く通信しません。

Twitter Facebook