人のフォーカスを笑うな

ネコメシ、今年の仕事始めに引越しをしまして、麻布十番から渋谷へと本社を移転しました。パートナー会社さんたちとの業務提携っぷりをいっそう深めるためでありまして、これについては、ほとぼりが冷めないうちに、なるたけ近日、別途ご案内差し上げるつもりです。

 

さて、本社の住所変更となりますと、いろいろ手続きが必要です。まず何といっても大事なのは登記簿謄本の住所変更ですね。あとは銀行やクレジットカードなど、主に決済関係のやりとりが発生するところには、速やかに変更の連絡をしておく必要があります。

ということで、ドメイン屋さんとかサーバ屋さんのほうも、住所変更やっとくかってことになりまして。銀行とかと違って、こういうところは全部オンラインで手続きできるから楽ちんですよね！

 

ということで、まず、ヘテムルさん。

 お客様情報の入力フォームです。麻布十番の旧住所が入ってるので、これを変更します。

郵便番号の頭3桁を編集して、タブキーたたいて下4桁を編集しましょう。

っておいおい。なんで市区町村に入っちゃってんのよ下4桁……。ネコメシ、神泉じゃねーし。渋谷区渋谷だし。腹立つなー、こういうの。

 

ま、気を取り直して、ヘテムルの契約更新とか自動で払われるようにしてるので、おさいぽ！さん。

ご登録情報の入力フォームです。麻布十番の旧住所が入ってるので、これを変更します。

郵便番号の頭3桁を編集して、タブキーたたいて下4桁を編集しましょう。

っておいおい。だからなんで市区町村に下4桁なのよ。ネコメシ、神泉じゃなくて渋谷区渋谷だって。ほんと腹立つなー、こういうの。

 

まったく、勝手にフォーカス移動させてんじゃねーよとしか言いようがない。あほなのだろうか？

 

はい、じゃあ次、バリュードメインさん。

連絡情報登録(アルファベット)の入力フォームです。麻布十番の旧住所が入ってるので、これを変更するのですが、「※1 住所が自動入力されます」と書いてあります。これは勝手にフォーカスを移しますよという予告に違いない。タブキー押したら『住所1(Address 1)』にフォーカスが移っているんだと心に深く刻み込みました。

しかしヘテムルやおさいぽ！と違って入力欄が1つなので頭3桁で勝手に（しかも間違った住所で）補完されることはなさそう。ヘテムル、おさいぽ！に比べるとちょっとだけユーザビリティが高い。これなら一発で「Shibuya-ku」「Shibuya」って入ってくれて、その後ろにキャレットが表示されてる状態になっているはずだ、とイメージしながら、えい、タブキー！

……は？

え、ここ何処？

てか、なんか同じページの下のほうの連絡情報登録(日本語)の『住所 1(Address 1)』にフォーカスしてた。何これ？

ちなみにさっきのアルファベットのほうにスクロールを戻して見てみると、

あ、「Shibuya-ku」「Shibuya」になってる。うん。じゃあここでいいじゃねーかよ。なんで日本語のほう飛ぶんだよ。しかも日本語のほう直して変更ボタン押しちゃったら、アルファベットと日本語で登録内容に齟齬出るやんけ。何なのこれ。

 

 

このような、勝手にフォーカスが移ることの問題点は、ユーザが動作を予測できない点にある。WCAG 2.0の3.2.1 On Focusなどで指摘されるまでもない。自分の胸に手を当てて考えてみてほしい。あなたは通常、カーソル位置（フォーカス位置）やIMEのOn/Offといったステータスが現在どうなっているのかを脳内で把握しており、次の操作をした場合にどうなるかを常に予想していることだろう。それが裏切られることの悔しさ切なさ腹立たしさは、多くの人が共感できることだと思う。

 

 

さて、それではこれらの勝手にフォーカスを移してしまう余計なお世話な入力フォームたちに、どのような手を加えればいいのか、いくつかの解決策を考えてみた。

まずは、事前に通告するというもの。前述のバリュードメインのフォームでは実際にその但し書きがあった（結果は予想を超えていたが）。この事前通告をテンプレのごとくフォームのお作法として提示できればいいのではないか？と考えた。一度お作法になってしまえば、今後フォームを作る人はそれにならえばいいだけということになる。

 

その案がこれ。

このように、フォーム全体の前に、まず自動的にフォーカスが移ることをユーザーに了承させるというもの。オプトインである。オプトインしたからには、もうその後どれだけフォーカスが移られたとしても文句はいえない。

 

ただ、ユーザーとしては、フォーカスが自動的に移るフォームを好む人もいれば、好まない人もいる。好まない人は、フォーカスが自動的に移ることのないフォームを提供している同業他社へ鞍替えするという選択肢もあるのだが、上述の案では、そもそもフォーム画面に行かないとどっちなのかがわからない。これでは不便だ。ユーザーファーストとはいえない。だから、もう一歩踏み込んだ解決策を考えてみた。

 

その案がこれ。

このように、サイトのトップページから、いやトップページといわずサイト内全体にわたって共通のヘッダー要素（黄色の帯の部分）を配置してしまおうというもの。これならサイト内のどのページにランディングしても一目瞭然。

さらにもういっそ、サイト単位で独自にこれを配置するのではなく、勝手にフォーカス移すサイト全部にこれ置いとけばいい。いや別にサイト側が対応しなくたっていい。ブラウザの拡張機能で自動で挿入されるようにすればいい（該当サイトがどこかってのはWedataみたいな集合知を利用する）。

 

 

上記、解決策の案につきまして、腹立たしくないフォームを利用したいと切望している全インターネット民の支持を頂きたい次第であります。

よろしくお願い申し上げます。

 

 

※2014/2/3 16:00頃 追記

上記の解決策の案は、いらんことを正当化しようとするともっといらんことになるという例示だったのですが、いくつか「スマートな解決ではない」とか「タブ操作を判定して云々」といった意見が散見されましたので、適切な解決策も提示しておくことにします。

• 最も有効な解決は「何もしない」ことです。
• どうしても郵便番号からの住所補完を提供したい場合は、『住所を入力』のようなラベルのボタンを設けて、ユーザの任意でそれを押させる。その場合、フォーカスが移動するのであればその旨を明記する。
• なんとしても自動的に住所補完を提供したい場合は、あらかじめその旨を明記のうえで、フォーカスを移動させずに実施する。なお、新規入力だけでなく、あとから編集することを踏まえて、入力欄が分かれている場合は先頭3桁だけの編集で実行されないようにする（できれば郵便番号の入力欄を2つに分けない）。

※追記ここまで。

 

※2014/2/3 17:00頃 さらに追記

そもそも郵便番号から住所補完がどれほど便利なのかが疑わしく、個人的には、どうせやるんだったら住所から郵便番号を補完してほしい。

フォームのアクセシビリティを確保しつつ、かつ、そのうえ（ユーザビリティの向上）を目指すのであれば、入力者が何を考えて操作し入力しているのか、もっと考え抜いてデザインして頂きたい。考え抜かないのであれば何も処理せず文書構造のまま素のカタチで提供して頂きたい。

エンジニアもデザイナーも、全員がもっと考え抜くべきです。そうしなければ、全インターネットのアクセシビリティとユーザビリティの向上は望めない。

※さらに追記ここまで。