マガジンのカバー画像

Culture Centered Design

719
街で見かける使いやすいもの使いにくいものを○×で評価しています。
運営しているクリエイター

#ボタン

アイコンに頼らず文字で表記する → ◯

ログインの際のパスワードを表示する/表示しないのトグルスイッチについては、様々な方法があり議論が続いています。よく目にするのは目のアイコン(見える)と目に斜線が入ったアイコン(見えない)で表示と非表示を切り替えるタイプです。 この場合、困るのはアイコンで示された絵柄の状態が、現在の状態を表しているのか、押したらこれから起こる状態を表しているのか、それだけではわからないことです。 上記の方式では切り替えボタンのラベルを「表示」「隠す」と文字で表記しています。これも一つの方法

タッチ式なのに飛び出ている → ◯

押しボタン式信号機のボタンは、一見すると物理的に押し込まれるプッシュボタンに見えますが、タッチ式でした。 これは視覚に障がいを持つ人でもそのボタンの存在を形状で把握できるように、凸部のデザインとなっています。 ガイダンスの文言は「ふれてください」です。古いタイプの押しボタンユニットでは、黒の背景に赤色の文字でしたが、新機種では見やすくするために、よりコントラスト比が高い、黒の背景に白色の文字が採用されています。

ボタンが背景に溶け込んで見つけにくい → ×

e-TAXでの手続きで、スマートフォンのマイナポータルアプリを使う必要があったので利用しました。QRコードを読み込みたかったのですが、メニューを開いても、それらしい機能名が見当たりません。 よく見ると、QRコード読み取りのための「読み取る」ボタンがありました。しかしこのボタンが半透明になっていて、背景に溶け込んでしまい、ボタンとの重なりの部分が見づらく、発見しにくい状態でした。 ボタンであればもっとその存在を明らかにして、可読性を高める必要があると感じました。どうしても見

スライドスイッチに見えなかった → ×

某金融機関のアプリ画面です。支払いモードを3つの状態を切り替えることができるのが売りだったのに、どうしても切り替えをすることができませんでした。 「支払いモードに設定→」は通常の押すボタンだと思っていて、何度もタップしていたのですが、何も変化がありませんでした。おかしいなとは思いつつ、しばらく放置していましたが、サービスについての情報を探していたところ、そのサービスの紹介をしているYouTube動画を発見しました。 その動画で驚愕の事実が判明しました。「支払いモードに設定

青延長用ボタンは赤で良いのか → ◯

「青延長用押ボタン」が付いている信号機があります。高齢者や障害のある方などをはじめとした横断に時間のかかる人への配慮として、通常の青信号の時間を延長するための仕組みです。 青延長用なのにボタンの色は赤になっています。文字通り青にした方が連想できそうな気もしましたが、総合的には赤で妥当かと思いました。 色が何色かということよりも、対象物が「押せるプッシュボタン」であることが重要です。このことから背景と明らかに区別ができる目立つ色であることが求められます。 むしろ最近のタッ

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

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

ドア開閉ボタンと認識しづらい → ×

上の「開/OPEN」が点灯して光っているのは空いている状態を示しているのかと思いましたが、どうやらそうではなく押せる状態としての点灯のようです。「開/OPEN」と「閉/CLOSE」は押してドアを開けたり閉めたりする操作ボタンなのですが、「押して開ける」などと補足して書いていないとどうしてもボタンに見えないのです。 対して、中央は使用中/OCCUPIEDとあるので、中で鍵をかけると点灯して使用中の状態を表すインジケータです。これがあることにより、上下にある「開/OPEN」と「

緊急時呼出ボタンのカスタマイズ → ◯

緊急時呼出しボタンが押しやすい雰囲気を醸し出しているので気軽に押せてしまうのでかえって良くないという記事を書きました。今回は同じボタンをうまくカスタマイズしている例に出会いましたので紹介します。 緊急時呼出しボタンの上に、大きくSOSと警戒色の赤を用いて表示し、さらにボタンにプラスチックのふたを取り付けて、一手間増やしています。ふたを付けた程度では、いたずらで押す人をゼロにはできませんが、ちょっと面倒になるだけでも効果はあります。 前回も書きましたが、緊急事態により押され

気軽に押せそうな優しいユーザーインターフェース → ×

公共図書館のトイレに緊急時呼び出しボタンが設置されていました。テプラで後から印字されているのは、「緊急時呼出/Emergency Call」なので、本当に緊急事態が起こった際に押して助けを呼ぶためのボタンであるようです。鉄道にある緊急停止ボタンと同じような扱いのボタンと言えます。 元々の機器のボタンは読みやすい書体で、「呼出」という文字の可読性も高く、ユニバーサルデザインとして文句のつけようはありません。このボタンが置かれる場所が入院中の病室ならこのデザインのままテプラをつ

停車ボタンのボタンラベルに違う文言が記載されている → ×

内装および車種自体もやや古い設備の路線バスに乗りました。停車ボタンに「降りる方はこのボタンを押してください」以外の文言が書いてあり、適切なボタンラベルがないのです。 「急停車にご注意ください」というボタンを押すと、右側に「次とまります」が点灯します。 これでは機能ボタンにユーザーインターフェースとして必要な要素がないので、路線バスに乗ったことがない人には、正しい操作ができず、目的地で降りることができません。「降りる方はこのボタンを押してください」という正しいボタンラベルを

上下を示す矢印がない → ×

最近竣工されたモダンなスタイルのビルのエレベーターホールにあったボタンです。上下を示す矢印がありません。 上下に配置されているので、上にあるボタンが上へ向かうボタン、下にあるボタンが下へ向かうためのボタンというデザイナーの意図は、利用者がこれまで生活してきた経験則と位置関係による類推でなんとかわかります。 しかし、乗って上下階に移動するという実用のためのエレベーターに求められることは、そういうものではありません。なんとかわかる程度ではダメで、利用者がどんな人でもボタンの意

追い炊きボタンを押しても温度表示は給湯温度のまま → ×

上記写真左上に表示されている温度45℃はお湯を出したときの給湯温度です。追い炊きのボタンを押して風呂を沸かしているときであっても、お湯の給湯温度を示したままです。 しかし「おいだき」ボタンを押した人から見ると、いま沸かしている浴槽のお湯の温度がが45℃になるように感じてしまいます。 下部にあるパネルを開くと、設定ボタンが出てきて、右端にある「ふろ温度」を押すと風呂の湯沸かしの温度が表示されるようになっています。ここでようやく追い炊きは42℃まで加熱するということが判明しま

あけるが上にある → ○

JR五日市線の車両は、ドアが自動開閉ではなく、乗客がボタンを押して降りる必要があります。駅に到着し停車している間だけランプが点灯しているので、その時に「あける/Open」または「しめる/Close」ボタンを押すとドアを開閉することができます。当然ながら走行中は「あける」ボタンを押してもドアは開きません。 逆に言えば、この仕組みに慣れておらずぼーっとしていてボタンを押さないと、ドアが開かず目的の駅で降り損なう恐れがあるのです。 これを防止するためには「あける」が上にあるのが

複数機能のボタンはわかりにくい → ×

自宅のプリンターは利用頻度も少ないので、安価な複合機を使っています。写真はフロントパネルに並んだボタンですが、左から、白黒コピー、カラーコピー、一番右が「ストップ/メンテナンスボタン」という名称のインクカートリッジ交換などに使うボタンです。 「ストップ/メンテナンスボタン」は、マニュアルによれば下記のように説明されています。(一部省略) ・印刷中またはコピー中に押すと、印刷またはコピーを中止して用紙を排出します。 ・スキャン中に押すと、スキャンを停止します。 ・通常時に3