Subscribed unsubscribe Subscribe Subscribe

石橋秀仁(zerobase)書き散らす

まじめなブログは別にあります→ja.ishibashihideto.net

UIデザインとメンタルモデルの練習問題:Android 4.4 KitKatのバッテリー残量インジケーター

(UIデザインにおけるメンタルモデルを考える上で、ちょうどよい練習問題)

f:id:zbih:20140311211049p:plain

Android 4.4 KitKatのバッテリー残量インジケーターは、この画面表示で「残り50%」を示しています。そうは見えませんよね?(そう見える人もいるかもしれませんが) 私には、とても50%もあるようには見えません。もっと少なく見えます。なぜでしょうか。ここには「メンタルモデル」と「UI実装モデル」のギャップがあります。

なお、ここでいう「メンタルモデル」は、クリッペンドルフの『意味論的転回』では「ユーザー概念モデル」(UCM: user conceptual model) と呼ばれています。以後そう呼びます。

この練習問題について、自分で考えてみたい人は、一旦ここで読むのをやめて、回答を出してから、続きを読んでください。

ユーザーの概念モデルの観点で、バッテリー残量インジケーターのデザインを考えてみましょう。

f:id:zbih:20140311215310p:plain

このインジケーターを見て「50%を下回る残量」に見える人は、おそらく「インジケーター中の塗りつぶされた面積の比率」を「バッテリー残量」と結びつけて考えています。

f:id:zbih:20140311215009p:plain

こういう認知パターンの人が多数派だろうと思います。調査したわけではありませんが、経験則として。

一方、実装を見ると、どうやら「高さの比率」で「バッテリー残量」を表現しようとしているようです。どこの高さかというと、バッテリーのプラス端子の出っ張りを無視して、「肩」から底までの高さです。

f:id:zbih:20140311215523p:plain

UI実装上は、「全体の高さに対して、塗りつぶした高さの比率」で「バッテリー残量」を表現しているように見えます。

これまで見てきたように、ユーザー概念モデルが「面積比率」であり、UI実装モデルが「高さ比率」だとすると、両者が一致していません。端子の出っ張り分だけギャップがあります。このギャップは、そのまま「残り50%にはどうしても見えない」という認知上のギャップとなって現れます。

デザイン実践への示唆

  1. 静的なアイコンデザインの感覚で「なんとなく絵を描いた」だけだと、動的なインフォグラフィックとして破綻することがあります。計算機上の実装モデル、数学的なモデルにまで、正しく落とし込まなければなりません。

  2. もしデザイナーが面積比の意図で設計していたとしても、その意図がプログラマーに理解されないまま実装されてしまったのかもしれません。そういうことはしばしば起こります。それゆえ、単なるアイコンデザインとは異なる「仕様書」を書く責務が、デザイナーにはあります。