ほんとの出会い系ブログ

今まで出会った本をご紹介します。人気の作品や良書と呼ばれる本が多いと思いますので、出会いのきっかけになれば幸いです。

デザイニング・ウェブインターフェース

現在、Twitterによって開発されたBootstrapGoogleによって開発されたMaterial Design Liteのようなフレームワークや、特定のUIを実現するJavaScriptライブラリなどを利用することで 、少ない労力でリッチなウェブアプリケーションを提供することができます。HTML5やCSS3の普及によって表現方法や操作性はますます進化していくでしょう。本書は、ウェブアプリケーションのインタラクションデザインのパターンを75種類以上紹介します。全カラーページで、デザインパターンのカタログとして利用できます。

本書では次のような6種類の原則に基づいて各パターンを紹介します。

  • 第1原則 直接的なインターフェースを作ろう
    1章は「ページ内編集」です。従来は編集ページのような画面へ遷移して実現していたものに対し、インライン編集やオーバーレイ編集などの遷移無しに直接編集するデザインについて説明します。2章では「ドラッグアンドドロップ」について説明します。3章では「直接的な選択」として、従来のチェックボックスのようなトグル型選択のほか、ページ内のオブジェクトを直接選択するオブジェクト型選択などを説明します。

  • 第2原則 軽快さを心がけよう
    4章は「コンテキスト連動型ツール」です。常時表示型ツールや逆に必要な時だけ表示するロールオーバー表示型ツール、デスクトップアプリケーションの右クリックメニューのようなサブメニューなどを説明します。ただしサブメニューに関しては、ブラウザではデフォルトで右クリックメニューが表示されるのでウェブの世界では見つけにくいものとしています。

  • 第3原則 1ページで完結させよう
    基本的にページの遷移やリロードはユーザの行動を中断するものであるとし、それらを解決する方法を説明します。5章と6章ではそれぞれ「オーバーレイ」と「インレイ」を説明します。オーバーレイは画面の一部を隠してダイアログのようなライトボックスを表示したり、ツールチップを表示することです。一方インレイは、画面の一部を広げて情報を表示する方法です。7章では「バーチャルページ」として一画面に表示しきれない要素について、インラインページングやカルーセルなどの、従来のページングナビゲーション以外の方法を説明します。8章では「プロセスフロー」として、ユーザの操作のプロセス全体を1ページで行う方法を説明します。

  • 第4原則 インビテーションを仕掛けよう
    インビテーションとは、ユーザを操作へ誘導するための合図のことです。9章では「静的インビテーション」を、10章では「動的インビテーション」を説明します。

  • 第5原則 トランジションを利用しよう
    トランジションとは、映像効果やアニメーションのことです。11章では「トランジションのパターン」として明度/濃度の増減、展開/折りたたみ、回復型フェード、アニメーション、スポットライトを説明します。12章では「トランジションの目的」を説明します。むやみにトランジションを利用すると逆にユーザの集中が途切れるページになりかねないので、適切な目的で利用することが大切です。

  • 第6原則 すばやく反応しよう
    インビテーションが操作をする前の仕掛け、トランジションが操作中の効果であるならば、本原則は操作した後のリアクションについてです。13章の「情報探索のパターン」ではオートコンプリート、ライブサジェストなどを説明します。14章で「フィードバックのパターン」として、ライブプレビューや進行状況表示など、操作後の結果のフィードバック方法について説明します。

本書では具体的な実装方法は提示しません。それはフルスクラッチで実装する場合もあれば、ライブラリや外部サービスを利用できる場合もあるでしょう。また、実装の詳細に立ち入らないため、ウェブデザイナやUIの仕様策定者にも読みやすく、「オーバーレイ」や「インレイ」「インビテーション」「トランジション」などをチームで共通用語とすることで、デザインについてチーム内コミュニケーションが効率化できるかもしれません。