当サイトはお見積もり依頼を受け付けるシステムにショッピングカートを採用しております。手続きをするという構造上、どうしてもヒアリングを億劫に感じられることが出てくると思います。
そこで私たちはこのプロセスを減らして負担を軽くすることでイベント主催者の皆様にゆとりが生まれる最良のUXを提供したいと日々考えております。今回実装したのもその機能の一つです。
数量欄の左右に+と-ボタンを追加
今回、商品詳細ページの数量欄に2つの新しいボタンが登場しました。
直接キーボードで数量を入力しなくてもプラスとマイナスボタンを押せば加算と減算がされるように設定しました。ここで調整したあと[この商品をカートに入れる]ボタンを押すと、その数量ぶんの商品がカートに投入されます。
ボタン長押しで自動的に加算/減算
このボタンは、単押しだけではなく長押しにも対応しています。数量が多くなってきた時は何度もクリック(もしくはタップ)することになるので、一定時間以上押すと自動的に加算/減算されるように調整しました。
ここでマウスとキーボードに関するお話を少々
パソコンでマウスを操作しているとキーボードまでの距離があり、キーボードを操作しているとマウスまでの距離があります。スマホはタッチパネルですが、テキストを入力する際に画面上にキーボードが展開されて画面の何割かを占有します。そして入力操作が終わると閉じられます。
パソコンでもスマホでも、このシフトチェンジにはストレスがかかりますから、これを少なくしたかったのです。
マウスにはホイールがある
たいていのマウスには画面をスクロールするためのホイールがあります。このホイールを数量入力時にくるくると回すことで加算と減算ができるようにしました。
キーボードには矢印キーがある
キーボードには上下左右に移動するためのキーがあります。このキーを上に押せば加算され、下に押せば減算されるよう対応しました。
UIは外観だけではない
UI(ユーザーインターフェイス)とはユーザーの皆様がデバイス機器を操作するための接点です。この接点が豊富にあれば交通手段が豊富にあることと同じで、目的地まで到達しやすくなります。
GUI(グラフィックユーザーインターフェイス)の登場により、ひと口にUIと言えば外観という意味合いが強まってきましたが、本質的には人が機械を操作する為の接点である事は変わりません。
そして近道があれば遠回りもあります。
遠回りと近道の例(数量入力の場合)
例1)100と入力する場合
遠回り | +ボタンを100回押す ↑キーを100回押す |
近道 | キーボードで100と入力する +ボタンを長押しする マウスホイールを上に回す ↑キーを長押し |
例2)100と入力された数字を95にする場合
遠回り | 全消しして95と入力する |
近道 | -ボタンを5回押す(または長押し) マウスホイールを下に回す ↓キーを5回押す |
もちろん今回実装した機能のすべてをお客様が使う必要は全くありません。新幹線でもバスも電車でも自動車でも、名古屋と大阪を行ったり来たりすることはできます。自分に合った交通手段を使えば全然問題ないので、それと同じです。
ただ、これだけは言わせてください。
見た目だけこざっぱりしたサービスを作って遠回りをさせていたり、逆に視覚的に消化しきれないほどのボタンやバナーをてんこ盛りにしてしまう事も、真に優れたUI/UXではありません。
あぐらをかかないことを大前提として、過不足なくフレキシブルに。
何よりも、これ「で」いいと周りが言っていても、自分が他にこれ「が」いいと思うものがあればその時「わあっこれすごい!」と思った感情を共感してもらえるように搭載していく事が、サービス提供者の正しい姿勢ではないでしょうか。
今回搭載した機能のまとめ
以下の操作方法で数量調整ができるよう対応しました。
スマホ | パソコン | |
直接数字を入力 | ◯ | ◯ |
+-ボタン | ◯ | ◯ |
上下キー | ✕ | ◯ |
マウスホイール回転 | ✕ | ◯ |
普段弊社の見積もり依頼サービスをご利用のお客様のストレスが減っていれば幸いです。