project-itoh.comの使いにくさと設計ミス
〔註：すでにサイトはリニューアルしており、この記事の内容を現物で確認することはできません〕
今時めずらしいほどヒドイUI設計を見かけました。こういうものが蔓延しないよう、警鐘として、啓蒙的な文章を書くことにしました。
UIデザインの訓練をしていない人は、「なぜ使いにくいのか」を説明出来ないものですし、そもそも「使いにくさ」に気づかないものです。使いにくいものを無自覚に、つまり「使いにくい」と思わずに使っていたりします。
プロならひと目なのですが、素人向けに、この文章では細かく「使いにくさ」について説明します。
第1セクション：キービジュアルとインストラクション
このウェブページを開いた直後、初期状態です。ここでページのインタラクション体系が示唆されます。具体的には、“scroll down”というインストラクションと、画面右端のドット列によって、以下の情報がユーザーに示されています：
- このページには8つのセクションがあります。
- スクロール操作で8つのコンテンツを順番に閲覧できます。
- ドットナビゲーションをクリックすれば、そのセクションに直接飛ぶことが出来ます。
など。こういう情報の伝達と解釈の過程は、非自覚的・無意識的な場合もありますし、結果として類推される情報にも個人差があります。その点には注意が必要です。 [1]
しかし、その期待はすぐに裏切られることになります。さておき、とりあえず第2セクションまではスクロール操作で行けますから、話を進めることにしましょう。
第2セクション：作品リスト
第2セクションを表示しているとき、右端のナビゲーションは正しく機能しています。この時点でユーザーが「このルールが反復される」という期待を形成するのが当然です。
しかし、その期待はすぐに裏切られます。これ以上スクロールできないのです。「あれ、故障か？」と混乱し、何度か「空スクロール」してしまいました。
こういうことがあると、このウェブページの設計への信頼が損なわれます。言い換えると、ユーザーは不安になります。
第3セクション：動画
3番目以降のセクションを閲覧するため、右端のドット・ナビゲーションの中の3番目をクリックしてみました。
動画コンテンツを提示したいなら、スクロールダウンでいいじゃないですか。なんで「クリックしなければ閲覧できない」ように設計したのでしょう。謎です。
さらに第4セクションを閲覧しようと思いましたが、いったんこのモードを抜けなければ別のセクションに移動できません。第3セクションはモーダルウィンドウ [2] になっているのです。これも使いづらいですね。
しかも、閉じるボタンのコントラストが低すぎるので、ほとんどのユーザーは閉じるボタンの存在に気づかないでしょう。ただし、最近よくある「閉じるボタン以外でも、周辺部のどこをクリックしてもモーダルウィンドウが閉じる設計」でした。そこは辛うじて期待通り。
なんとか第3セクションから抜けて、第4セクションのボタンをクリックすることにします。そこで衝撃の展開に…
第4セクション：掟破りの別ウィンドウ
なんと、別のウィンドウが開いてしまいました。
先に説明したように、このウェブページでは
- このページには8つのセクションがあります。
- スクロール操作で8つのコンテンツを順番に閲覧できます。
- ドットナビゲーションをクリックすれば、そのセクションに直接飛ぶことが出来ます。
というインタラクション体系が暗示されていました。しかし、それを大いに裏切る結果となりました。私には、もはや、どこをクリックすればどうなるのか、まったく予期できなくなりました。設計への信頼がなくなりました。それ以降は手探り、暗中模索のインタラクションになります。
次節で少し本質的なことを解説します。
「使用と信頼」「混乱と探求」の関係性
クリッペンドルフの『意味論的転回』[3]では、ユーザーとアーティファクト（人工物）のインタラクションを説明するために、下図が用いられています：
期待通りに使用できてる間には「信頼」が蓄積されていくのですが、期待外れにより「混乱」しますし、それが続くと「信頼」できなくなって「探求」のモードに戻ってしまいます。そこで「落胆」すれば、使うのをやめてしまうわけです。
所見
「ウェブというメディアの特性」 [4] をほとんど考慮していないデザインだと評価します。
具体的な改善案は提示しません。それは制作者の仕事です。
もっとアクセシビリティ、ユーザービリティ、コンテンツを大事にしたデザイン（設計）を期待します。
あ、伊藤計劃作品の映像化にも大いに期待します。
ちなみに、スマートフォン向け（モバイル版）のページのほうは、こういう問題のないページでした。モバイル版をもとにPC版を作ればよかったのでは、という気がします。どうしてこうなった。
情報建築家からは以上です。
脚注
[1] 専門的に言えば、「シグニファイアからユーザーがアブダクトするアフォーダンスとは（後略）」となります。注釈を加えると、「記号（シグニファイア）としてのUI部品からユーザーが使用可能性（アフォーダンス）を類推（アブダクション）する過程は、非自覚的・無意識的な場合もあるし、類推される結果にも個人差がある」ということです。これは「ユーザビリティ評価が原理的に決して客観的ではありえない」ということを意味しています。ということは、読者も本稿を「決定論的」（「こうすればこうなる」というif…then..ルール的）な説明として読んではならないということです。
[2] モーダルウィンドウについては、モーダルダイアログを参照のこと。この場合はほとんど同じ意味です。
[3] 『意味論的転回』については解説文を書きました：ユーザー・エクスペリエンスについて考える人に読んで欲しいクリッペンドルフの『意味論的転回−デザインの新しい基礎理論』
[4] 「ウェブというメディアの特性」については、簡単ながら「なぜインブラウザー・デザインへの移行が必要なのか？」の中で触れています。
