画面上での注意喚起を促す文面の表示の仕方について。

help me!

help me!

先に言います。
これ、半分以上は名村の「確認不足からくること」でです。
「ちゃんと読め」と言われればそれまでなのですが・・・・ということを先に謝っておいた上手のエントリーです。

先ほどある銀行サイトでドメイン料の振込をしようとしました。
ドメインベンダーから「振込人名義は会員IDとお名前をご入力お願いします」とあったので、手入力をしたんです。

し、しかし・・・。

依頼人名の入力方法が正しくありません。入力内容をご確認ください。

依頼人名の入力方法が正しくありません。入力内容をご確認ください。

という表示が・・・。

これをみて「あぁ、全角とか半角指定だろうな・・・」と思い、その画面にあった「入力可能な文字などくわしくはこちら」というリンク先をクリックしてみます。

こ、これは・・・全角なのか半角なのか・・・どっちだ?!

そこで出てきた画面がこの画面でした。

依頼人名の入力方法

依頼人名の入力方法

確かに上の方に、目立つように「赤字」で「全角」と書いています。

ただ、この画面、入力文字例を掲載したことで、画面としては赤字の部分が返って目立ちにくくなっているような気がするのですが、気のせいでしょうか?(汗)

というのは、僕においては思考と視線がこう動いたんです。

  1. 入力したらエラーになった!!
  2. (気分的に少しげんなりして)入力方法指定の画面を開く
  3. 入力出来る文字列は・・・・えーっと「カナ」・・・「濁音」・・・「数字」・・・と。

と、いきなり入力出来る文字列の方に目をやってしまったんです。
なので、実は冒頭の赤字で書いてくれている「全角で」という注意文の部分は全く視界に入っていなかったんです。

結果として名村の頭の中では、

え?この「英字」の指示って全角?半角?
間違い例のところのアルファベットって、これってQ数が小さいの?は、半角ってことか?

となってしまったんです(恥)

で、結局何をしたかというと・・・入力例のアルファベットを「コピペ」したんです(笑)
いや、そこに書いている文字列をコピペすればさすがに大丈夫だろう・・・ってことなんですが、全部打ち終わってから「あっ・・・全角ってことか・・・」と気がついた次第です。

と、完全にイチャモンレベルなんですが、この「赤字で太字にしたから目立つだろう」ってのは、僕も全く疑いもせずにやってしまいがちです。

ただ、今回の名村みたいにせっかちな人が、ある画面を初見の時、赤字の太字よりも情報的に優先度が高いものが掲載されているとそっちに目が行ってしまう、ということがありえるのだと我ながら気が付きました・・・。

情報の優先度と目立たせるって、もうちょっと気をつけてこれからの設計に気を使っていきたいと思います・・・。

最初プンスカしてごめんなさい、某銀行さん。

著者写真
この記事を書いた人
名村晋治 / 株式会社サービシンク

都内のWeb制作会社のWebディレクター兼代表取締役。 1994年にインターネットに出会い、1996年、学生4名でのWeb制作事業をはじめ、Web黎明期から多くの大手企業のサイト制作・開発に携わる。 2000年から2005年までは不動産検索サイト「LIFULL HOME"S」を運営する株式会社LIFULL、2005年から2009年までは都内のWeb制作会社の取締役として参画し、2010年に株式会社サービシンクを立ち上げ、代表を務める。 現在もWebディレクターとして現場でのPMを行う。 経験案件規模は直請けで10万円〜3億円。 過去900人以上が受講している「Webディレクター育成講座」は2000年より開催し今年で25年目。 2020年よりWebクリエイターへの情報提供のためのPodcast「Webディレクションやってますラジオ」を毎週金曜23時に配信中。 不動産テック協会 理事 2023年慶應義塾大学大学院経営管理研究科(MBA)取得

@yakumo

関連記事

この記事のハッシュタグ #UserInterface から関連する記事を表示しています。

関連記事

同じカテゴリー「プロデュース」の新着記事を表示しています。

マーケティング視点から見る無料保険のドアノック商材

2026年05月04日

マーケティング視点から見る無料保険のドアノック商材

What I consider to be the best thing about buying Vision Pro!

2024年11月29日

What I consider to be the best thing about buying Vision Pro!

ぬいぐるを使ったアイデア写真はどのように生まれるのか?

2022年03月28日

ぬいぐるを使ったアイデア写真はどのように生まれるのか?

「Webディレクションやってます:blog」リニューアルしました。

2015年04月04日

「Webディレクションやってます:blog」リニューアルしました。

Foursquareのチェックインボタンの挙動を通して気がつくユーザインターフェース設計の考え方

2013年06月15日

Foursquareのチェックインボタンの挙動を通して気がつくユーザインターフェース設計の考え方

NAVERまとめのオロナミンCのバナーがすごい!

2013年06月03日

NAVERまとめのオロナミンCのバナーがすごい!