僕は今iichiとPinkoiというサービスのUIデザインとフロントエンドを担ってます。
iichiはハンドメイド作品のC2CのECプラットフォームで、作り手と買い手をつなげるサービスです。
3月に台湾のPinkoiと業務提携をし、現在ふたつのサービスを手がけています。

今日はiichiであったUI改善の話を一つ。


iichiはECサイトなので買い手は届け先住所を入力します。
その住所が間違ってることが多く、取引が停滞するケースが多いとのこと。
それを解決するためにCSから出た要望は
「確認画面で住所の欄をもっと目立たせ、間違いないか確認させる旨の注意書きを入れて欲しい」
というものでした。

ちなみに確認画面はこんな感じ。

35


確かに住所はあまり目立ってないですね。

で、要望をそのまま聞き入れるのではUIデザイナーの名が廃るってものなので考えました。

確認画面で目立たせたところで、それを見るものなのか?
あんま目立たせてダサいデザインになるのは嫌だぞ?
注意書きは怖くないか?
そもそも何で住所が間違ってるんだ???普通間違うか?

一体どういう風に住所を間違えてるんだ??


というわけで実際の間違い住所を確認すると皆共通して
「町名までしか入っていない」というもの。丁目、番地、建物名が抜けてるんです。
そこでピーンときました。

郵便番号の自動入力だ!

今やどのサイトにもある郵便番号での住所自動入力。
間違えたユーザーたちは
「郵便番号で住所が自動で入ったからそれで満足して次のページに遷移しちゃった」
のではと考えました。

で、考えた仕様がこちら。

auto3


自動入力されたのち、町名のとこにカーソルがフォーカスするという仕様。
郵便番号を7ケタ(ハイフンも許可)入れると自動で住所が入力され、
住所1のフォームがアクティブになります
こうすることで「まだここの入力は終わってないよー」感を出してみました。

結果、この手の住所間違いは激減、スマートな仕様で無事問題を解決することが出来たのでした。

起こっている事象への対応を考えるのではなく、その事象が何故起きているのか、
それを起こらないようにするにはどうすればいいかを考えることが大事です。

確認画面でのアラートは手段の一つではあると思うのですが、
間違える人はその時すでに間違えているわけです。
いかに最初に間違えさせないかが大事。
その原因さえ突き止められらば解決策は自ずと見えて来るのではないでしょうか。

というお話。