厚底な足元「ファットフッター」が叶えるユーザビリティ

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

Fat Footer Roundup

メアリーはバスルームの改修に使う水道の蛇口を探すためにThe Home Depotの配管関連のページを探しましたが、見つけることができませんでした。そのページには様々なパイプやバルブ、温水器などとその商品の使い方を説明するビデオはありましたが、彼女の探しているものはありませんでした。メアリーは失望しながらそのページのフッターに辿り着き、The Home Depotのすべての商品部門のリストを見つけ、その二番目にバス用品の項目を発見しました。ファットフッターが彼女を救ってくれたのです!

今日、ファットフッター(高さのあるフッターエリアのこと)を使用しているのはThe Home Depotだけではありません。ディズニーからホワイトハウスまで、複雑なナビゲーションを必要とする大規模なサイトはこの階層に依存しないナビゲーションを使用しています。一般的に、デザイナーはファットフッターを、大量の検索ボリュームに埋もれたページを晒すため、あるいは第二のナビゲーションとして機能させるために使用しています。

フラットデザインの流行とともにフラットフッターも見られるようになりましたが、これらは別なトレンドではないようです。ファットフッターはレスポンシブで、SEO対策に馴染み、そしてページの足元に置くのにとても魅力的です。今週は、UX Boothがフラットフッターについて、それは何なのか、なぜそこにあるのか、UXを改善するためにどのように使えば良いのか、調査し収集した記事をみなさんと共有したいと思います。

ファットフッターとは何なのか?

Fat Footer Design Pattern UI Patterns

手始めに、UI Patternsの単刀直入なファットフッターの定義と、UIデザイナーたちの探している問題解決方法にぴったりのいくつかの使用例を見てみましょう。この記事の重要な部分は、「ファットフッターを使うことによって、ユーザーを自然な方法でさり気なく新しいページヘと誘い、あなたのウェブサイトに留まらせることができる」というところです。

ユーザーの興味とビジネスニーズの絶妙なブレンドと言えるでしょう。

Big Fat Footer Web Design Brian Hoff

一枚の絵が千の言葉に匹敵する価値を持つなら、Zurb's pattern libraryで紹介されたこのイメージは、一つの辞書だと言えるでしょう。Brian HoffはRSSフィードや(恐らくは)重要な文書へのリンク、おすすめの本などを含めた、魅力的で便利なファットフッターの例を紹介しています。フッターにはサイト外のリンクもわずかに含まれていますが、ほとんどはサイト内のリンクに焦点を当て、ユーザーをよそへ逃がさないためのリソースセンターの役割を果たしています。

おまけとして、このサイトで実際に使われている、Zurbの制作したファットフッターが、彼らのパターンライブラリやデザイン方法へのリンクを含んだ2つ目の素晴らしい例となっています。 

Copyright: Brian Hoff/Zurb

Copyright: Brian Hoff/Zurb


ファットフッターを何故好むのか

What's Fat Footer and Why is it Important? Kim Krause Berg

つい一年ほど前にKim Krause Bergが、ファットフッターにおける今までの経緯と現在の状況について検証しています。この記事で、彼女はJakob Nielsenが2010年に表明した「肥満したフッター」という批判を引用し、単にリンクだけが詰め込まれたフッターを取り除くことで、いかにユーザービリティが良くなるかについて述べています。彼女は特に、ニュースレターの登録や、ソーシャルネットワークへのリンク、支払情報といった単なる静的な情報へのリンクを置くことを批判しています。それから、ファットフッターは時の経過とともに、実用的なスペースへと変わってきたのです。

10 Best Intranets of 2015 Patty Caya, Kara Pernice, and Amy Schade

Nielsenが肥満したフッターを批判した5年後、Nielsen Norman Groupはファットフッターを重要なものだと捉え、翌年のイントラネットの最良のデザインを特徴づける共通な要素となるだろう、とする記事を発表しました。10位に入賞したうちの3つのウェブサイトがファットフッターを使用しており、Caya PerniceとSchadeの言葉を借りると、「イントラネットに期待される愛想の良いアンカーである」とのことです。

Fat Footers and Free Hugs CBJ Digital Blog

すべてのチームがファットフッターの便利さに同意したとしても、どうやって配置すれば良いかについては議論が分かれるところです。最終的なコンテンツの決定はユーザーリサーチやユーザビリティテストによってなされるべきではありますが、まずはファットフッターに重要な要素のリストを並べることから始めてみることをCBJ Digital Blogは勧めています。彼らはおすすめや提案項目を伝統的な企業のフッターとして分けて考え、良いファットフッターについての提言を、「誰もが喜んで食べるようなごちそうをビュッフェのテーブルに並べるのを忘れないようにするべきだ」という重要な警告で結んでいます。

次ページ:ファットフッターはどこからやってきたのか


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて