BADUIの要因全盛りで熱意と技術力が試される東京オリンピック・パラリンピック2020ボランティア募集ページ

もう各所で話題になってますが，BADUI収集家としてはノウハウがふんだんに盛り込まれたたまらないワクワクするコンテンツでしたので，こちらにもしっかり残しておこうと思います．

8万人のボランティアを集めることを目標としている東京オリンピック2020のボランティア登録サイト，皆さん体験されましたでしょうか．12月に募集が終わってしまい，それ以降体験できなくなりますので，HCIやデザインなどに興味のある方は，ぜひともこの体験をすることをお勧めします．

さて，この登録サイト，もともと「30分程度かかる」と明記されているもので，最初からなかなか強烈な感じがしますが，応募フォームの入力に30分程度かかること，そして入力途中で保存できることを明記しているのは，とても良いことだと思います．ちなみに，時間的な余裕がなかったためか，アクセシビリティ対応が十分ではないようです．ここら辺からも，時間的な余裕または，予算的な余裕がなかったことがうかがえます（もちろん，単純に手を抜いた可能性も否めませんが）．

さて，このサイト応募登録に関する日本語のウェブページ

から，「大会ボランティアに応募する」というボタンを押して応募ページに遷移すると，まずこんな感じのウェブページに飛ばされます．

英語です．日本語の説明ページからジャンプしたはずなのに（説明ページは英語版も存在している），なぜか登録ページは英語版となっています．この時点で，「えっ」と思って逃げたくなってしまう日本人は一定数いるのではと思います．

ちなみに，画面の右上にイギリスと日本の国旗があり，こちらで言語を変更することができます．そもそも言語を国旗で表現するのって良くないと思うんですが，どうなんでしょうね．ちなみに，英語の説明ページは下記で，英語の説明ページから飛んでも，同じように英語版になります．日本語版のチェック，しなかったんでしょうね．

なお，日本語・英語の切り替えについては，ログインページでは下図のように画面右上に国旗が提示されており，そこから言語を変更することができるのですが…

実を言うと，ウインドウの横幅がやや狭いとき（それでも入力フォーム的には十分な広さがある場合）にはこの言語選択の国旗が消えます

言語の変更をするには，右上のハンバーガーメニューのアイコンを選択したときにようやく言語選択ボタンが出てきます．講義で学生さんたちに試してもらったところ，この変更可能であるということに気づかずずっと英語で入力していた学生もいたようでした．

さて，日本語に戻したページはこんな感じ．いきなり，GoogleかFacebookかLINEを持っていないとログインできない感じがしてしまいます．Google/Facebook/LINEのアカウントを持っている人（私の場合はGoogleで登録しようとしてみました）は，「Googleアカウントでログイン」を押すことでとても簡単に登録できたのですが，そうしたアカウントを持っていない人は，どうしたらよいか悩んでしまいそうなページデザインとなっています．

このページの，下の方にあまり目立たない形で，しかもパスワードをお忘れの場合はこちらの下に「初めての方はこちら ■ 新規登録 ■」とあります．報道によると，リタイアした60代以上の方も多く説明会を聞きに来ているという話でしたし，そうしたアカウントを持っていない人向けに，もっと目立たせてもよかったんじゃないでしょうかとは思います．

さて，アカウントを作成・またはSNS系のアカウントを使ってサインインしたあとにで出てくるのがこんなウェブページ．入力不可な登録番号の下に，STEP一覧と現在のSTEP（STEP 1）がならんでおり，そこの下に基本情報を入力するフォームが待っています．

さて，まずは国籍を選ぶのですが…順番がおかしいです．カタカナで表記された国がアイウエオ順にならんでおり，アイウエオ順の途中にニホンかジャパンがあるのかと思いきや，カタカナが一通り終わった後に，漢字で表記される国の中で登場します．

 

こんなところに．まぁ，この手のUIはよくありますが…．

ちなみに，英語版はこちら．こちらだと日本の位置はわかりやすいです．

 

ちゃんと，Jamaica→Japan→Jordanなのでアルファベット順ですね．わかりやすい！

まぁ，ここら辺からももともと英語版サイトだったものを，とりあえず日本語版へととりあえず翻訳して…ただ時間がなくてというのが見えてきます．こうした過程が見えてくるものがたまらなく大好きです．

さてさて，英語版を日本語版に翻訳して，テストする余裕がなかったんだろうなぁというのが如実に見えてくるのがお次の名前のフォームになります．国籍で日本を選ぶ前のフォームが下記のような感じで，

日本を選んだあとのフォームが下記のような感じになります．

なんと，日本人用の「姓」「名」入力欄が登場します．おぉ，動的に出てきて素晴らしい！と言いたくなるのですが，ここでポイントは出てきた入力フォームは背景色が白色で，他の黄色背景のものに比べて重要度が低く，必須項目ではないかのように見えることです．しかし，一応説明に「姓（日本国籍の方は必須）」「名（日本国籍の方は必須）」とあるように，そこに入力しないと下図のようにエラーが表示されて，ここに問題があるよ！と赤枠で示してくれます．

日本国籍の場合に必須なのであれば（日本国籍以外の人にはこのフォームは出てこない），この「氏名」の部分についても黄色背景にしてくれればよかったのに…とついついお願いしたくなってしまいます．

ちなみに英語版はこちら．英語版もエラーが出るんですが，英語版の場合は英字氏名もなぜかエラーとして表示されます．なんでなんだろ？

ちなみに必須項目に関する説明の英語版は，下図のようになってます．

「All the fields with an asterisk (*) and a yellow background are mandatory. 」とありますので，アスタリスク＆黄色背景が必須と言われてるんですが（ちなみに，この表現だとややあいまいでどちらともとれなくはないですが…），そんなことないんですよね．アスタリスクのものが対象となるようです．

日本語版の説明だと下図のような感じ．

「アスタリスク（＊）が付いた項目は必須入力となります。」条件が変わっています．この問題に気付いたけど治す暇がなく，文章だけを改めたということなんでしょうかね？ ちなみに，このアスタリスク必須問題，後に別の入力フォームで問題となってきます．

さて，何度も提示させていただいたこのフォーム，他にも面白い点があります．ほとんどの方がお気づきになったかもしれませんが，日本語の氏名は「姓（Family Name）→名（First Name）」の順番なのに，英語の氏名は「名（First Name）→姓（Family Name）」となっています．上下に並んでいる入力フォームで，一貫性を無視しまくっていて素敵すぎます．

入力テストは行ったものの，そこに仕様通りに入力したら，仕様通りにデータベースに格納されるかどうかだけのチェックをしたのか，開発元がフランスの会社なので，日本人のFirst NameとFamily Nameはどっちがどっちかわからず，とりあえず入力通りにDBに入ったからOK！と満足してしまったのかどちらかなんでしょうね．日本人の一般ユーザにテストさせて，データベースに格納された情報をチェックしたら，きっと問題に気付いたでしょうに…

私のようなおっちょこちょいは，ついつい下記のように入力してしまいます．ひとは，ちゃんとラベルや説明を読んで入力なんてしませんからねぇ．ここの部分は，登録時にはチェックされないでしょうから，どれくらいの人がミスしたまま登録してしまったのか興味津々です．

ちなみに，英字氏名のところについて，小文字込みで「Satoshi Nakamura」のように入力するとエラーが表示されます．こういうフォームで，大文字で記入を必須とするのはどうなんでしょうかね．プログラムで小文字と大文字の変換くらい簡単なので，これくらいは自動で変換してあげてほしいものです．

また，ここまでスルーしてきましたが，テキスト入力フォームに付与されている上下のラベルの距離が，下のものの方が近接しており，上のものは離れているため，テキスト入力フォームと関連しているのは下であると誤認してしまい，ついつい1段間違って入力してしまったりもします．こちらもまた色々と興味深い点です．

長くなりましたが，次に行きましょう．お次の性別は特に問題ありませんが

お次の，誕生日を指定するカレンダーUIがなかなか興味深いものとなっています．ここでは，試しに「1976年1月1日」を誕生日として入力してみます．ちなみに，こちらに直接テキスト入力することはできません．

 

ほとんどの応募者は0歳か！と突っ込みたくなるデフォルト値（本日が初期値！）ですが，ひたすらクリックを繰り返し，1976年まで来て，1日を指定したところ，間違った月だったことに気づいています．で，それを修正しようとしているのですが，Invalid dateと出てきて修正させてくれません．そのため，一度入力をキャンセルして，修正という手続きを踏んでいます（ここで，「今日」というボタンを押すことも考えられるかもしれませんが，「今日」を入力するとそこで確定されて日付が入力されてしまうので，Invalid date問題は変わりません）．

おそらく，このカレンダインタフェースのための入力フォーマットをわざわざ日本人用に変換して，「年」「月」「日」をつけてくれたがために，テキストフォームからカレンダーに戻るときにおかしなことになってしまい，エラーが出てしまってるんでしょうね．

その証拠に，英語版だとこういったトラブルはなくなり，普通に修正ができます．英語版素晴らしい！

 

もちろん，日本人向けに「01-Jan-1976」という表記を見せるのはイマイチなのはわかります．ただ，2つの変換ルールを用意してくれてれば，問題なかったのですけどねぇ…

やりたいことはわかるし，気を遣いたかったということはわかるのだけど，それが足りていないがために残念なことになっていたというものでした．ちなみに，動画内でもやってますが，DDMMYYYYというところに数値を入力することで，一気にその日付にアクセスすることが可能です．ただ，それがわかりにくいことと，そもそもその入力順序はどうなのと突っ込みを入れたくなってしまいます（それぞれ独立したリストボックスでよかったように思うんだけどなぁ…）．

なお，2002年4月1日以前にうまれた人は下記のエラーに出会うこととなります．

「生年月日は2002-04-01より前にしてください！」いや，生年月日はいじれるものじゃないでしょ．応募に制限があるのであれば，最初にそのことについて断るべきでしょうね．一応，2002年4月1日以前に生まれた人が対象となるということについては，もともとのサイトの応募にあたってや，FAQのボランティアに関するよくある質問に隠れつつ（展開しないと見れない）書かれているのですが…これは気づけませんよね．

さて，お次に行きましょう．パスポートやマイナンバーを指定した後に，入力できるフォームがあります．ボランティアは希望者数多数の場合は，断られる可能性もあるので，そもそもここは入力フォームをなくしておいた方が良かったようにも思いますが（マイナンバーについては入力の縛りもありますし），まぁそれは置いとくとしましょう．あ，ちなみに有効期限のカレンダーUIは，誕生日に関するものと同じ問題を抱えていました．

そのあとに出てくるのが，写真をアップロードするUI．こちらも通った人にだけこれをお願いするようにしておいても良かったと思うんですけどね．写真ってどこまで申請において重要なんでしょうか．

ちなみに，写真を登録・変更の部分は，その上の画像をクリックしても登録・変更を行えず，その下のテキストをクリックした場合のみ登録・変更可能であるというのもなかなかです．せめて，画像のところをクリックで修正させてほしかった．

そのあとの，配慮・サポートはいいとして，その下はユニフォームの指定となっています．こちらも応募時は入力不要です．こうした，入力不要のものはカットしておいた方が良いでしょうね．

さて，面白いのは次です．STEP 1からSTEP 6まであるのは最初に示した通り．画面の下まで来たので，次のステップ（STEP 2）に進むために，「送信」を押したところ…

 

ありえない量のエラーが表示されて圧倒されてしまいます．ギャー．

STEP 1にそこまでの入力項目はないはずなのに…と思うのですが，このエラーは実をいうと，STEP 2～6までのすべての入力フォームに関するすべてのエラーとなっています．しかも，そのエラー，全部クリックして消していかないといけません．なかなか強烈です．スマホで入力していると画面が埋め尽くされてしまいます．

さて，画面下部に次のステップ（STEP 2）に進むリンクやボタンはありません．どうしたものかと色々とページを見直すと，ページの最上部にSTEP 2へ移動するタブがありました．

 

ここでSTEP 2を選択することで，次のステップへ移動することが可能となります．ウェブでの入力に慣れた人はまぁなんとかこれを発見してクリックすることは可能だと思いますが，私の親などはきっとエラーの山でびっくりしてしまい，何度やっても次へ進まないと諦めてしまうだろうなという姿が容易に想像がつきます．ちなみに，知り合いのお子さんは，このエラーの山に心が折れて登録をあきらめてしまったようでした．

さて，お次のページでも居住国のフォームがあります．まぁ，こちらについても先ほどの国籍と同じく，日本が悩ましいところに存在しています．先ほどとは異なり，カタカナ→漢字→カタカナ→漢字と複数項目がソートされて並んでいます．おそらくこの2回目のカタカナについては，意味のある分割をしているんでしょうけれど，もっと他になかったのかと言いたくなってしまいます．

 

日本はこんなところに．

さて，お次は国入力した後に住所を一部自動入力するための，郵便番号の入力フォームです．「半角ハイフンなし」と指定があるのが少しだけ引っ掛けですが，ポイントはそこではありません．郵便番号で「1648525」（私の職場の郵便番号）と入力すると，なぜか入力内容がハイフンを付与されたものに変更された後（ハイフンなしって書いてるのに！），何も反応しません．色々テストした結果わかったのは，ここのサービスに登録されている郵便番号以外を入力してしまうと，うまく結果が出ないというものでした．

 

ちなみに，上の動画にある通り，実をいうとハイフンありでも検索可能だったりします．まぁ，色々なハイフンがあるから，あえて抜いて検索するように指示されているのかもしれません．だとしても，とりあえずフィードバックは返してほしいものですね．

他にも色々ありますが，例えば電話番号の入力フォームは下記のような感じ．下の電話番号をハイフン無しで入力しろというのはわかるのですが，電話番号（国番号）についてハイフンなしというので，どこにハイフンを入力するんだと悩んで，余計なことを考えてしまいました（ちなみに，カリブ海の島などは1-XXX等の形でハイフンが入るので私が知らなかっただけなのですが）．

あと，前の方に「アスタリスクは必須」という話がありましたが，ここではアスタリスクはあるものの必須ではありません．なぜに…

結局，最初の日本人用の氏名のところ以外は，背景が黄色のものが必須なわけで，あそこさえちゃんと対応していれば問題なかったのにという案件でした．

さてさて，そのあとの必須ではない項目ですが気になった点を…．

例えば，日本語・英語以外の言語能力についての言語選択フォームが下記のようになっています．ここ，ボランティアとして選ばれたい人にとっては是非ともアピールしたい部分だと思うのですが，並びがわけがわかりません．

 

どういう順番なんでしょうね．

あと，とても重要そうな「手話」が一番下にあります．

まぁ，この入力時点では重要ではないのかもしれませんが（メンバーに選ばれたときに改めてそうした情報は集められるんでしょうし），「手話」って国によって違いますし（きっと，国際手話を意図しているのだと思いますが），とても重要な情報なのでもう少し詳細に記述してほしいものです．

追記（2018/10/07）： Fumiaki Nishihara（西原史暁）さんの「使用できる言語に「手話」という選択肢を入れてしまっている東京五輪ボランティア募集ページの問題点」で指摘されている通り，「手話」という単一の言語があるわけではありません．そのため『「手話」という選択肢しか出てこないのは、言語の選択欄で「ロシア語」や「ドイツ語」を選ぶことができず、「音声言語」しか選べないようなものである。』というご指摘はまさにその通りで，他の言語に交じって「手話」とだけ提示されるのは大きな問題です．なお，それぞれの手話によるコミュニケーションをとることができるということは，来訪者や競技者のことを考えるととても重要だと思いますので，日本語・英語以外の言語・レベルとは別に，手話に関するフォームも別途作って，もっと大きく扱い，せめてここにあるような手話は列挙してもよいもののように思います．

後は，スポーツ経験の選択で，経験がない場合にはそれぞれ競技名のところで「なし」を選択しなければなりません．まぁ，もうここまで来ると些細なことですが…

最後の大きなトラップがこちら．エラーが出ていても何のことやらわからず悩んでしまいます．

ちゃんと説明文を読むとやるべきことは明確で，「*連携大学やパートナー企業等でコードをお持ちの方はご記入ください。複数お持ちの場合は複数ご記入ください。お持ちでない方は、「2020」をご記入ください。（半角）」とあるので，コードを持っていない場合は「2020」と入力したらよいのですが，まぁなかなかそうした説明文は読まないので，ついつい気づかずスルーしてしまいます．せめて，「お持ちでない方は，「2020」をご記入ください」の部分を，赤色や太字などで表記するなどしたらよいと思うのですがね．

あと，ボランティアの登録について．複数選択可ってのはこういうフォームのこういうところに使うものではないでしょうね．

なお，大会準備期間について，4月～7月とさすがに長すぎてどう拘束されるのかがわからな過ぎて怖いです．おそらくそんな無茶なことはないと思うのですが，安心させてくれるためにももう少し，具体的な情報が欲しいものです．

まぁ，そんなこんなでとても楽しいBADUIな入力フォームでした．このシステムを開発しているAtosはフランスの会社で，報道によるとこれまでにもオリンピックのボランティア募集サイトの開発・運営に携わってきており，そのシステムを日本向けに手直ししたものなのだそうな．ただ，ユーザテストをするまでの時間がなかったのか，予算の都合なのか，それとも日本での運用を甘く見ていたのか，英語版を日本語版になんとか翻訳したアラが目立ってとても興味深いものでした．

リアルなユーザに使ってもらったら，もう少し問題は減らせたと思いますし，もう少し多数の人に使ってもらい，登録してもらわなければならないということを考えて，ユーザインタフェースを考えると問題が少なくなったのではと思います．

私が失敗から学ぶユーザインタフェースでBADUIを整理していたのは下記になりますが，

• 第1章： 手がかり
• 第2章： フィードバック
• 第3章： 対応付け
• 第4章： グループ化
• 第5章： 慣習
• 第6章： 一貫性
• 第7章： 制約
• 第8章： メンテナンス
• 第9章： 人に厳しいBADUI

このうちの，手がかりにも，フィードバックについても，対応付けやグループ化，慣習についても問題があり，一貫性についても制約についても問題があり，メンテナンスについても問題があるという素晴らしすぎるユーザインタフェースでした．いやぁ，もうこのサービスを肴に散々飲めそうな感じです．今年のBADUI of the Yearは固いのではと思います．

BADUI収集家的に，いいサービスをありがとうございました．このネタ，次回のBADUI診療所にも登場予定です．これにより，メンテナンスすることが重要であるという点がこれによって色々なところで理解されるとよいなと強く思ったのでした．啓蒙活動的に良いサイトな気がします．

ちなみに，同僚の五十嵐先生による本件に関する記事（東京五輪のボランティア応募フォームがダメな理由・良いユーザーインターフェースを作るための必要条件）はこちら．必読です．