Home > UI（インターフェース） > ユーザビリティを高めるためのシャドウ（影）活用

ユーザビリティを高めるためのシャドウ（影）活用

久しぶりに純インターフェースのお話です。

メニューやウィンドウなどを表示するときに、ちょっとした工夫でぐっと見易さがアップすることがあります。

例えばこんな画面があるとします。

wp_basic_shadow[1]

これは、「CITY GUIDE」のメニューを表示しているわけですが、この部分にちょこっとシャドウを施すと、大分印象が代わります。

wp_better_shadow[1]

いかがでしょうか？

背景（他の情報）と今表示しているメニューとの領域の違いが明確になり、明らかに可読性がアップしているのが分かります。

この方法が有効な原因は2つあって

  1. 今見ている領域と、それ以外の領域の間の「敷居」が明確になる
  2. それ以外の領域部分にシャドウを掛けることで、結果的にそれらが背景であるとユーザに認識させることが可能

といったことが主なポイントです。

このようなシャドウの効用は主に以下の用途で活用できるでしょう。

  • ダイナミックHTMLによるメニュー表示
  • ポップアップ的にJavaScriptでウィンドウ（レイヤー）を出現させる
  • あるいは、デザインテイストを崩さずに特定の要素を目立たせる

ちょっとした工夫ですが、何度も使うナビゲーションや使い回しの効くJavaScriptへの適用ですので、トータルの効果は結構大きいのではないでしょうか。

■ 参考記事
・Using Shadows to Improve the Usability of Menus and Windows
・ユーザビリティ活用例？悪用例？～ とても広告には見えないAdsenseのデザイン集

twitterRe:Tweet This!

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Remember personal info

Home > UI（インターフェース） > ユーザビリティを高めるためのシャドウ（影）活用

About

  • Tomotaka Imaki
  • ユーザ中心とかインターフェースとかの会社で、サービス開発責任者みたいなお仕事をしています。
  • 2008年末に自分の会社を作りました。本業と並走中。
  • rss RSS Feed
  • twitter Twitter :fallinstar
  • facebook Facebook
Search
Categories
自作ツールなど（※随時公開）

ヤコブ・ニールセンBot

ユーザビリティ・Webユーザ調査の権威ヤコブ博士のTwitter bot。
これまでに発表した知見をつぶやいています。フォロー歓迎！

人気のエントリー
  1. 2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書
  2. 80%近いコンバージョンを達成した、Triumphの恐るべき「おねだり」機能
  3. 言葉尻一つでユーザに与える印象が「ころっ」と変わる表現いろいろ
  4. フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話
  5. ネット有料配信を打ち出すことで、風俗サービスを無料化(！）してしまった「Big Sister」
  6. 電通とGoogleの間で交わされた、ジョークのような本当のような交渉
  7. ハリー・ポッターの大ヒットを支えた「広告費0円」PR作戦
  8. 違法コピーを逆手に取った韓国版「花より男子」広告戦略が凄い
Archives
Feeds

Page Top