勝手にEFO徹底解剖 郵便局転居届申し込みフォーム

6月も最終日となり、いよいよ明日から7月。
7月といえば異動が多いタイミングでもあり、転勤に伴い住所が変わったという人も多いのではないでしょうか。

転居時に必要な手続きのひとつには「郵便物の転送」がありますね。郵便局まで赴いて手続きするイメージがありますが、じつは大変便利なことに、この郵便物転送の申込みは郵便局のWEBページから簡単に実施することができます。

今回はこの転居届申込みフォーム(日本郵便株式会社様、http://www.post.japanpost.jp/index.html)を徹底解剖の題材として取り上げてみたいと思いますので、お付き合いいただければ幸いです。

※本記事の内容は2015年6月30日時点の日本郵便のフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラEFOの入力補助機能は導入されていません(2015年6月30日時点)。

フォーム全体の特徴

まずはフォーム全体の特徴をチェックしていきます。

現在地がわかりやすいフロー表示

このフォームはフォーム送信が完了するまでかなり長いステップを要しますが、全てのページに下記のフロー画像が用意されており、フォーム全体像と現在地がつねに明確です。

efo_double_ring フロー画像の存在により、「あとどのくらいかかるの?」というユーザーの不安・不満は生まれにくくなっていると思います。

フロー表示

フロー表示

シンプルで理想的な専用レイアウト

またレイアウトもシンプルな構成で、ユーザーのフォーム入力への集中を妨げる余計なリンクはほぼ存在しないつくりになっています。非常に理想的なページテンプレートの形と言えます。

efo_double_ring シンプルなヘッダーとフッターでお手本のようなページレイアウトです。

シンプルはヘッダーと、最低限のリンクを記載するにとどめたフッター

シンプルはヘッダーと、最低限のリンクを記載するにとどめたフッター

必須マークも明確

必須には赤色の「必須」の文字入りアイコン、任意の表示はなしという形でした。
とこに最低限入力すればよいのかがひと目でわかるデザインですね。

efo_double_ring 必須マークのアイコンは赤色。ページのメインカラーと同じ色を使いデザインをなじませつつも、しっかり引き立つように表現されている。

必須マークと任意箇所

必須マークと任意箇所

ページごとの特徴

ここからはページごとの特徴を詳しく見ていきます。

利用規約への同意

まずは利用規約の確認と同意からフォームがスタートします。

利用規約の確認ページ

利用規約の確認ページ

ラベルをクリックできない

一見、問題なさそうなフォームですが、「同意する」のチェックボックスは、文言部分をクリックして選択することができないようでした。
つい忘れがちではありますが、チェックボックスにはlabelタグを利用するなどして、クリック領域を広げておきたいものです。

注意 ラベルをクリックしてもチェックボックスを選択することができない。

同意のチェックボックス。

同意のチェックボックス。

キャンセルボタンは極力なくしたい

また、同意した人が次に進む流れに対して、同意されないユーザーにフォーム送信のキャンセルへ導く、いわゆる「キャンセルボタン」が用意されていました。
わざわざ用意しなくても同意できないユーザーは送信をとりやめるほか、誤ってクリックしてしまうなどのリスクのほうが高いため、とくに配置するメリットはないと思います。

注意 キャンセルボタンはすぐにでも削除したい

キャンセルボタン

キャンセルボタン

メ―ルアドレスの入力

規約に同意すると、次は「メールアドレスの入力」画面に進みます。メールアドレスだけではなく、名前やフリガナも取得するようになっています。

メールアドレスの入力画面。

メールアドレスの入力画面。

ふりがななの全角自動変換機能が

今回ふりがな部分には「全角」という入力形式の指定があるものの、実際には半角で入力しても、自動で全角に変換するようになっていました。
このようなユーザー側の手間を吸収する仕組みは、EFOにおいて積極的に取り入れたいものです。

efo_double_ring 半角で入力しても、確認画面遷移時には自動的に全角に変換されている。

半角を全角に自動変換

半角を全角に自動変換

確認ページ

次は確認画面です。

確認画面

確認画面

送信ボタンの差別化はなし。上下に配置
今回進むボタンと戻るボタンがまったく同じデザインで上下に配置されるようになっていました。

進むと戻るはそれだとひと目で分かるよう見た目を差別化しておきたいところ。色はともかく、せめて三角のアイコンの向きは逆にするなどの配慮がほしいと思います。

注意 ボタンはまったく同じものが上下に並ぶ。誤ってクリックする可能性も高まる懸念も

送信ボタン

送信ボタン

その他は、とくにつまづく点もなく良いと思います。

送信完了

メールアドレスの送信完了ページです。この後送られるメール内のURLをクリックして以降の手続きを進行させる必要があります。

次のステップが完結かつ強調して表記されており、この後どのようなアクションをすればよいかが明確です。

efo_double_ring また、URLに有効期限が設定されている点も表記があり親切です。

メールアドレスの送信完了ページ

メールアドレスの送信完了ページ

新旧住所の入力と確認

メール内のURLから進むと、新旧の住所を入力するページとなります。

新旧住所の入力ページ

新旧住所の入力ページ

2カラムで対比

左に旧住所、右に新住所を入力させるレイアウトとなっています。
一般的にフォームを複数カラムで構成するのは記入漏れを生みやすく推奨されませんが、この例では、横に対応させて並べることでよりいっそうわかりやすく表示できている好例だと思います。

efo_double_ring 色もグレーと赤の2色を使い対比させているのもポイント

新旧住所の入力欄は2カラムで並ぶ

新旧住所の入力欄は2カラムのレイアウトで並ぶ

住所を入力しやすくする仕組みが充実
まず、郵便番号からの住所自動入力機能を装備しています。
しかし、引っ越し時には新しい住所の郵便番号を把握しているユーザーは少ないもの。そんな状況を考慮してか、郵便番号そのものを検索できるページへのリンクを用意しています。

efo_double_ring 郵便番号がわからないユーザーにも配慮。非常にユーザー目線なフォームといえます。

住所の自動入力

住所の自動入力

また。ここでも半角と全角の自動変換機能が。
住所の番地はたとえ半角で入力しても、送信時には全角に自動で変換されます。

efo_double_ring 住所の番地部分にも自動変換機能がばっちり搭載されている

全角自動変換機能

全角自動変換機能

7転居者情報の入力と確認

次は転居者の情報入力です。

転居者情報の入力

転居者情報の入力

できれば、自動入力されていてほしい

ここで転居者の名前とフリガナを入力するのですが、多くの場合、最初のメールアドレス入力画面で入力した氏名を再度入力するユーザーが大半だと思います。つまり、ユーザーは同じ情報を2回入力するはめに。

注意 できれば、初期値として冒頭で入力した内容が設定されていると手間が省けるユーザーも多いのではないでしょうか。

08

また、最後にある「転送開始希望日」は、入力時の日付の3日後以降を指定できるようになっているのですが、画面上そのような記載はなく、ユーザーはエラーになった時点ではじめてその条件を知ることとなります。

注意 3日以内を選択すると下記のエラーが。できれば最初から教えて欲しい、と思うユーザーもいるのでは

3日以内を選択した時のエラー文。

3日以内を選択した時のエラー文。

電話番号入力

その後、届出人の電話番号を入力するページとなります。

電話番号の入力

電話番号の入力

この後、自動音声電話による確認を経て手続きが完了するのですが、そもそもこの後のフローに対するフォーム画面上の説明がわかりにくく、電話番号を何に使われるのかが不明瞭です。

注意 この後のフローが「ユーザーが電話をかける」という内容であることが伝わりにくいおそれが。

09

電話ページ

最後は、電話確認の実施ページです。
電話認証というと、自動音声の電話がかかってきて確認コードを受け取り、それを入力するという形がオーソドックスですが、
このフォームでは、ユーザーから電話を掛け、画面上に表示された確認番号を通話時に入力するという方式をとっており、少し特殊な形です。

電話ページ

電話ページ

複雑なフローですが、説明は充分にあり、不足はないと感じました。
ただし「申請登録」ボタンが画面のかなり下部に配置されているため、押し忘れが懸念されます。

配置を検討するか、離脱ブロック機能等の導入で押し忘れに配慮すると良いでしょう。

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖は以上となります。
最後にこれまでみてきたフォームの特徴をまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • 現在地がわかりやすい一貫したフロー表示
  • シンプルで理想的な専用レイアウト
  • 明快な必須マーク
  • 全角と半角の自動変換機能
  • 次のステップが明確な完了画面
  • 2カラムでわかりやすく対比されたフォームレイアウト
  • 郵便番号、住所の入力支援機能

課題と思われる点、その他論点など

  • ラベルをクリックできない
  • キャンセルボタンの存在
  • 送信ボタンの差別化がない
  • 同じ内容を2回入力する可能性
  • 記載されていない入力条件がある
  • 不明瞭なフローがある

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です