Culture Centered Design

現在位置がわかる → ◯

金融機関の申し込み画面です。現在入力中の項目が、全体の中で何番目であるかを1/5や2/5などの数字で示しています。これから入力しなければならない項目が、全部で何項目あるかを前もって知ることができる有益な手がかりとなります。また、最上部の表示では、一連の入力が、「申し込み内容入力」「情報入力」「入力内容の確認」「完了」とステップ分けされていて、色が変化することにより、現在どの行為を行なっているかを確認することができます。いずれも全体の中で自分自身の現在位置がわかる重要な

カレンダーの月選択でOKを押す必要がある → ×

上記画像は某銀行の通帳アプリの画面の一部です。月を選択する際に、目的の月を選択してから、次に「OK」ボタンを押す必要がありました。これは目的の月を選択したら直ちに次の画面に遷移するのが良いと思います。例えば9月を見たいのであれば、9月を押して「OK」を押すのではなく、9月を押すだけにした方が良いと考えます。もし月を押し間違えたら、直前の画面に戻ってやり直せば良いのです。カレンダーからの選択UIを持つ代表的なアプリはほとんどが月や日付を選んだ直後に反映される仕組みです。

フォーカスが線で囲まれている → ◯

フォーカスが当たっている位置は、下の動画のように多少ダサくても太い線の矩形で囲まれているほうが誤解が少なくて良いと思います。特に画像ボタンの場合には、周りにシャドウがうっすらとかかっている上品なデザイン表現が多いのですが、うっかりしているとフォーカスがあるかないかで見た目の変化がよく分からないケースがあります。また、視力が弱くなってくると、昔ははっきり区別できたのに、両者が同じに見えてしまうこともあります。マウスやトラックパッドが使えず、キーボードだけで操作をせざ

どちらの×で消せるのかわかりにくい → ×

Webサイトで写真やイラストのサムネールをクリックして拡大し、×で閉じる操作があります。しかしこれが２枚重なると、どちらが前面にあって消すことができる対象なのかわかりにくくなります。この写真の例では自動車の写真が前面に拡大表示されているので、右上の×で消すことができますが、グレーの枠の右上にある×も押せそうな気がしてしまいます。改善策としては、順序に意味を持たせるのなら押せないグレーの枠はもっと明度・彩度とも落として存在感がないようにすることや、どちらでも×で消せるの

オンとオフの状態がわかりやすい → ◯

下記はカメラを通した動画などの出力を加工するソフトの画面の一部です。オンとオフを切り替えるスイッチをソフトウエアの画面上で表現する上での問題の一つは、そのスイッチの付近に書いてあるラベル（文字）が、現在の状態を表しているのか、これから変化させたい未来の状態を表しているのか、よくわからないことです。上記の例ではOffやOnは現在の状態を表しています。そしてOffは薄くグレーアウトされて使えない状態を表し、Onは強調色を用いて使える状態を表しています。 iPhoneの設

バナーやカルーセル内にボタンを配置する → ×

銀行のウェブサイトトップページには、各銀行のオンラインバンキングサービスへのログインボタンが設けられていることが多いようです。しかし、PC用画面に限るとトップページ上部のバナーやカルーセルの中にログインボタンを置いているケースが見受けられます。特に上段の例ではバナーの中の文字装飾としてのデザインなのか、そこがボタンとして独立していて別のリンク先に飛ぶのか、ボタンがバナーに馴染んでいるがためにどちらかよくわかりません。また、ボタンの領域とバナーやカルーセルの領域が近

新しいセブンイレブンのATM → ◯

2019年後半より導入され、旧機種とリプレースされつつあるセブンイレブンの多機能ATM（セブン銀行ATM+）は、ユーザーインターフェースに関してよく検討され、こなれていると感じる点がありました。このATMは画面以外の操作（カードの挿入やテンキーの操作など）を必要とする場合に、該当箇所を何らかの方法で示してくれるのです。上記例ではカード挿入口を画面上で示しています。またテンキーでの入力が必要になった場合には、テンキーを明るくハイライトして、そこに目がいくようになっていました

画像サムネイルとボタンが似ていて紛らわしい → ×

これはかなり特殊なケースですが、画像サムネイルとボタンの形状や大きさが非常に近いので、画像サムネイルにボタンのテーマカラーを使っていると、それがボタンに見えてしまって混乱してしまうという現象が起きました。上記の例では、左側の note編集部お気に入りマガジンにある「note」は画像サムネイルですが、ボタンと同じ扱いに見えてしまい、脊髄反射的に思わず押してしまいました。右側にある本物のボタンと一目で明らかに区別がつくように、例えば横の長さを長くしてしまうなどの改善策があ

メッセージ内容がわかりにくい → ×

表計算ソフトで２つのファイルを開いていて、一方でコピーをした後にファイルを閉じようとしたら、下記のメッセージが表示されました。わたしは反転している行をコピーして、別のファイルに挿入コピーしたかったので、「はい(Y)」をクリックしました。この問題は２つの要素があります。１つ目は、一般的なコンピューターやスマートフォンでの操作の前提となる、「コピーしたものはクリップボードという名前のついたところに一時的に保存されて、ペーストする時にはそのクリップボードにある情報が貼り付け

メニュー名称が動詞になっている → ×

読者の皆さまもよくご存知だと思われる、macOSでのApp Storeの画面です。「見つける」「創作する」「仕事する」などメニュー名称が動詞になっていますが、動詞のメニューカテゴリは、そこに含まれるものがどんなものか想像しにくい欠点があります。できる限り上位カテゴリのメニュー名称はものの集合を表す名前にしたほうが良いと考えます。

最も大切なはずのボタンが小さい → ×

ECサイトでの買い物が増えています。注文した後はいつ荷物が到着するのか気になりますね。こんな時に荷物がどこまで来ているかをパソコンやスマートフォンで確認できるウェブサービスが役に立ちます。現在、大手の配送会社や郵便局などではおおよそ似た機能の「荷物追跡サービス」が提供されています。今回も大手の配送会社でしたが、荷物の状態を知るためのトリガーとなるボタンが小さく、どこにあるか探すレベルの大きさでした。バナー掲載や注意書きも必要かも知れませんが、伝票番号を入力して、問

明るくても薄暗くてもそれなりに読みやすい配色 → ◯

表示エリアの大きさに対して、やや情報量が多すぎるようにも思いますが、背景色と文字色のコントラストや、読みやすいフォントの使用など、東京メトロの案内表示は見やすく改善されていると思いました。特にこの案内表示が吊り下げられる位置によって、照明からの距離がバラバラで一定しませんが、明るくても多少薄暗くてもそれなりに読みやすいことは重要です。

手前に引くのか左右に倒すのかわかりにくい → ×

某ホテル内のお手洗いにあった蛇口と水を出すためのレバーです。手前に引くのか、左右に倒すのか、わかりにくい構造になっています。一見しただけでは、前後でも左右にでも動きそうに見えます。ごく一般的な水栓だと、その形状から回転させるしか思いつかず、回す方向も暗黙のルールとして決まっていますので、迷う余地がありません。しかし、このような解釈の自由度のある水栓デザインでは、迷う余地が様々なところに出現してしまいます。意外性を楽しむ余裕がある場合は別ですが、手を洗うなどの基本的

切替スイッチの状態がわかりにくい → ×

かなり安い価格帯のそれなりの扇風機なので、ここまで指摘するのは酷かもしれませんが、やっぱりわかりにくかったので記しておきます。電源のON/OFFを兼ねる形で、切替スイッチがLO（弱い送風）→OFF（電源オフ）→HI（強い送風）の順番に並んでいます。中央が電源OFFの状態で、左右がONで弱い風か強い風のどちらかという方式です。ただ、利用者の素朴な立場としては、OFF（電源オフ）→LO（弱い送風）→HI（強い送風）と並んでいて欲しいと思いました。風力の強さの段階を階段状に

フォローしませんか？

#UI