* 原則 [#d0e435fd]
-直接的なインタフェースを作ろう ... そこに出力のある限り、入力を可能にせよ
-軽快さを心掛けよう
-1ページで完結させよう
-インビテーションを仕掛けよう
-トランジションを利用しよう
-すばやく反応しよう
* 直接的なインタフェース [#sd04d6b8]
** ドラッグ＆ドロップ [#j81ea551]
-[[気になる瞬間マトリクス:http://designingwebinterfaces.com/resources/interestingmomentsgrid.xls]]
* 軽快さを心掛けよう [#cbf30d6d]
** コンテンツ連動型ツール [#h416aff1]
-常時表示型ツール
--アクションを喚起したいときに使う
--重要度によって、置き場所と大きさを変える
-ロールオーバー表示型ツール
--ユーザがオブジェクトの上でマウスポインタを止めたときにツールを表示する
--ロールオーバーしない限りツールの存在に気付かないため、気付かせる工夫が必要
--ユーザが必ずマウスポインタを重ねるところで使うと良い
-トグル表示型ツール
-段階的表示型ツール
--放射状メニュー（[[Songza:http://songza.org/]]）... 曲名をクリックすると放射状メニューが表示される
---このメニューを使い続けているユーザなら、手の動きを覚えているので、メニュー項目を見なくても操作できる
---メニュー項目間の距離の近さと、ターゲットの大きさのおかげでメニュー操作が楽になっている
--mutton ... menu + button
---ロールオーバーするとハイライトされ、押すとメニューを開くことなく機能が実行される
---ドロップダウン用の矢印をクリックするとコマンドが現れる
-サブメニュー
--ブラウザの右クリックメニューがあることを考慮する
--右クリックの代わりにマウスを1秒以上長押ししたときにサブメニューを表示することも考えてみる
* 1ページで完結させる [#ke87d1f0]
** オーバーレイ [#gf3eb6b9]
-ライトボックス効果
--注目させたい部分以外を暗くして目立たせる
--ユーザが別のモードに入っていることを強調するときに使う
-詳細表示用オーバーレイ
--ロールオーバーで起動するときは、表示する前にわずかな間（0.5〜1秒）を置く
--簡単に消去できるようにしておくこと（マウスポインタを外すだけで消す等）
--[[事例（Netflix）:http://www.netflix.com/BrowseSelection]]
** インレイ [#a4a3ac7f]
-ダイアログ用
--ページ自体に直接コンテンツを挿入
--[[事例（My Yahoo!）:http://my.yahoo.com/]] ... 「Change Appearance」を押すとインレイが表示される
-リスト用
--アコーディオン
---リスト中に一度に1枚だけパネルを開く
** バーチャルページ [#n7d49d4f]
-バーチャルスクロール
-インラインページング
-スクロール型ページング
-バーチャルパンニング
-ズーム型ユーザインタフェース
** プロセスフロー [#c68e5cde]
-インタラクティブページ型プロセス
-インラインアシスタンス型プロセス
-ダイアログオーバーレイ型プロセス
-コンフィギュレータ型プロセス
-非インタラクティブページ型プロセス
* インビテーションを仕掛けよう [#za426766]
** 静的インビテーション [#m1d1fd5e]
** 動的インビテーション [#qc637e85]
* トランジションを利用しよう [#d788dc08]
** 明度／濃度の増減 [#l96fbec0]
** 展開／折り畳み [#v6b139e6]
** 回復型フェード [#b6c52283]
** アニメーション [#p269fb44]
** スポットライト [#ha175c60]
** スライドイン／スライドアウト [#u548eb64]
** フェイスプレート [#i89ce310]
** フリップ [#z1d21e4d]
** カルーセル [#vbc6af2a]
* すばやく反応しよう [#jb112649]
** オートコンプリート [#jfd92dc6]
** ライブサジェスト [#oc0e05fb]
** ライブサーチ [#h95a47b4]
** 絞り込み検索 [#n2063ff3]
** ライブプレビュー [#edb230b0]
** 段階的表示 [#b5486f3c]
** 進行状況表示 [#z0627611]
** 自動リロード [#f00f0e81]
* 参考書籍 [#b1ffb65c]
-[[Designing Web Interfaces:http://designingwebinterfaces.com/]]
--[[画像:http://www.flickr.com/photos/designingwebinterfaces]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
