Page 161 of 165

25. 解りやすいアイコンとは?(microsoft word)


アイコンは情報伝達のわかりやすさという意味では文字より劣ります。しかし、GUIの進化にともないアイコンは重要な情報伝達の手段として必要不可欠な存在になりました。

例えば、図1はmicrosoft wordの書式設定のウインドウです。このアイコンたちを見ると、どのアイコンがどんな機能を持っているかすぐわかります。しかし、ここが重要です。何回か使ったことのある人はわかると思いますが、使ったことのない人は「なんだこれ?」となるわけです。


図1:microsoft wordの書式設定のウインドウ
図1:これで書式の設定をします


解りやすいアイコンを作成する場合、そのアイコンの意味と人間のメンタルモデルをうまく合致させることで初心者ユーザの方々にも解りやすくなると考えられます。例えば、図2はアイコンが太字で書かれており(アイコンの意味)とBold→太字である→頭文字はBである→だから「B」なのか!(メンタルモデル)がうまく合致している例であります。


図2:microsoft wordの書式設定のウインドウ
図2:太くするには太字をクリック

そこで、初心者ユーザの方に「文字を太くしてください」というタスクを与えた場合、このアイコンを選ぶ確率が高くなると予想されます。(というのも実験をしていないので正確にはわかりませんが…) 解りやすいアイコンとは、このような視点からも考えられます。

中には、無意識に自分がしたい操作のアイコンをすぐに選択できる場合がありますが、それはそのアイコンが解りやすいのです。UIには「透明性」という言葉があります。人間と機械の間に障害がなく、すんなりと理解できる、ということです。アイコンに限らず、様々な機器で「透明性を見る」ことができれば?いいなと思います。

24. そこにあるのに使えないボタン


三度登場のさくら銀行ATMコンビニ設置モデル。最近モデルチェンジしたんです。以前紹介した所員お気に入りのモデルに比べ、いくつかの点で改悪されています。

ATM

基本的に先代モデル同様、タッチパネル操作+暗証番号のみテンキー入力なんですが、何故かテンキー部分に「万」、「千」、「円」といったボタンがついています。テンキーで暗証番号を入力した後は金額入力なので、つい続けてこのテンキーで金額まで入力できると思ってしまうんですよね。

ATM

それ以外にも、全体の反応速度も落ちてるし、テンキー自体も小さく押しにくいものになっています。

頼むから前のに戻してくれ〜>さくら銀行

関連ページ
17. コンビニ設置のさくら銀行ATM(2)〜視線移動
02. コンビニ設置のさくら銀行ATM

23. 論理的インタフェース設計の落とし穴


皆さん、毎日トイレに行きますよね。私ももちろん行きます。会社でも何度も行きます。

当社では、トイレの電気は省エネのために出る度に消しています。そして、入る度に点けます。そう、私はトイレに入ると、まず電気を点けるのです。もうこれは習慣ですね。

しかし、果たして私は本当に「電気を点けて」いるのでしょうか?

たまに、トイレの電気が点けっぱなしの時があります。お客さんが消し忘れでもしたのでしょう。

そういったときにトイレに入ると、「あ、点けっぱなしだ」と思いながら、私は電気を消してしまいます。そうです、今から自分がトイレを使うのに、わざわざ点いている電気を消してしまうのです。そして、いつもと様子が違うことにしばし動転し、それから改めて電気を点けます。

つまり、私は日頃トイレに入るときには、「電気を点けて」いるのではなく、実際には「スイッチを今と反対側に倒し」ているのです。

毎日うまくいっているために、いつの間にか「電気を点ける」という本来の目的は「スイッチを今と反対側に倒す」ということにすり替わってしまったのです。そして、私は「電気を点けて」いるんだと思いこんでいますが、習慣になっているのは「スイッチを今と反対側に倒す」というもっと単純なことだったのです。

しかし、私に『トイレに入ったらまず何をする?』と聞くと、『そりゃぁ電気を点けるよ。なぜなら暗いからね』と答えるでしょう。それは決して自分が「電気が点いているかいないかに関わらず、ただ単純にスイッチを倒すことしかしない頭の悪いやつ」と思われたくないからではなく、本当に「電気を点ける」と思いこんでいるのです。

人間は外界の制約を巧く利用し、様々なことに適応していきます。人間にはアフォーダンスを上手く利用する能力が備わっているのです。

ユーザはこのように優れた適応能力を持っていますが、必ずしも自分のことを正しくは理解していません。自分の行動を反射的なものだとは考えずに、自分にとって筋の通った論理的なメンタルモデルを構築しようとします。

それ故に、設計者やデザイナーが論理でインタフェースを設計すると、このようなときに破綻してしまいます。『決して理詰めで物事を考えるわけではないユーザ』のことを十分に考慮した柔軟性、冗長性(たとえばフェールセーフをしっかりと組み込む)を持ったデザインを行うべきなのではないでしょうか。

22. リッジレーサーV~ゲームのインタフェース


さて、話題のプレイステーション2用ソフト、「リッジレーサーV」です。

最新のソフトということで、きれいなグラフィックに注目が行きますが、インタフェイスに注目しても、いろいろと気付くことがあります。今回はそのうち、良いところと悪いところをそれぞれ取り上げたいと思います。

操作フローを考慮したメインメニュー

メインメニュー
メインメニュー

メインメニューでは、新規でゲームを始めたり、続きから始めたり、データをロードしたり、といったことが行えます。初めてゲームをしたときは、[NEW ENTRY]にフォーカスされているのですが、一旦データをセーブすると、次回このメニューに入ったときには[LOAD]がフォーカスされています。さらには、ロードが終了すると、自動的に[CONTINUE]を選択した状態になり、すぐにゲームが始められるようになっています。

ゲームをするたびに操作する部分ですし、このようにユーザの操作手順を考慮した設計は非常に効果が高いと思います。


メニューのフロー
これだけステップが自動化されています

×どっちがマイカー??

コースマップ
さーて、どっちだ?

いざ、ゲームが始まると、画面左上のコースマップ上に、自分の車の位置が表示されます。また、マップ上にはマイカーだけではなくライバルカーも表示されています。

黄色と赤のクサビが見えますね。さて、どっちがマイカーでしょう?

答えは「赤」なんですが、この色は恣意的に割り当てられているように思えます。マイカーのペイントとも関係ありません。マイカーのペイントを黄色にしていてもライバルカーが「黄色」です。しかも、各セクションごとにパックマンとモンスターを使ってマイカーとライバルカーのラップ差が表示されるのですが、そのときマイカーを表すパックマンはもちろん「黄色」です……。せめてここだけでも色を揃えて欲しかったですね。

ゲーム中に素早く見なければいけない部分ですが、その際にどっちの色が自分なのかをとっさに判断できないため、未だ私はこのコースマップを有効に利用できません。それどころか間違えて壁に突っ込んだりもします。(とほほ。)

他にも、データファイル選択画面など、いろいろと工夫されたところも多く、是非一度ご覧になることをお勧めします。是非店頭などで遊ぶ機会があったら、レースも良いですが、メニューなどもチェックしてみてください。

21. 傘立てが傘立てであるために


傘立てはどうすれば傘立てになれるのでしょうか。


たぶん傘立て

たぶん傘立て

我が社の傘立てにももちろん傘立てとしてのアフォーダンスはいろいろあります。

  • 筒になっててささりそう
  • 玄関に置いてある
  • 他に傘を置くような所がない
  • 水に濡れても大丈夫そう
  • 水が漏れなそう
  • 傘立てでないならこれは何なんだ

しかし残念ながら、お客様が自信を持って傘を立てるには、どれも今ひとつです。傘立てでないものに傘を立てるのはやっぱり失礼ですよね。そのリスクを負うにはアフォードが弱いのです。

でも、こうすれば大丈夫。


間違いなく傘立て

間違いなく傘立て


« Older posts Newer posts »