UI・UXインターフェースステッパー
User Interface - 2018 -
UIUXデザインにおいて避けたいものの一つにスマートフォンのプルダウンメニューがあります。面倒な感覚はユーザー離れの原因にもなりますし、見栄えも悪いので、代替案が必要になります。この時最適なのが、タイトル画像のようなプラスマイナスで数値を操作するインターフェースで、ステッパーと呼ばれています。
小さい数の操作はステッパー
画面遷移、画面の変化、それらは煩雑な印象を与えると同時に、信頼性を失います。その場で数値が変えられるステッパーは優れたUIと言えるでしょう。旅行サイトで宿泊人数を変えたり、商品数を変えたりするのに最適なインターフェースです。もちろんこれは大きな数字の操作には向きません。2桁を超えるようなものは違ったタイプのUIを導入しましょう。それでも解決しない場合はプルダウンを用いても構いません。
ステッパーの応用
上のイメージはステッパーの概念を導入した秀逸なUIです。大人の人数は普通に選択させますが、子供のように赤ちゃんから小学生まで様々な選択肢がある場合は、さらに条件を入力してもらう必要があります。そんな時、初期状態で情報が簡潔で操作にも迷わないインターフェースはユーザーエクスペリエンスの向上が見込まれます。子供の数値部分をクリックした後はトグルで領域を広げ、選択肢を提示すれば良いので、デザイン性を損なう心配もありません。疑似的なステッパー表示はマイナスにし、数値は合計値に変化します。
子供の年齢区分の選択になるとスマートフォンの下部にプルダウンが表示されますが、迷いのない快適な体験は維持されます。
まとめ
もちろんステッパーがすべてではありませんが、前述のケースでプラスマイナスの案内を設置せず、閉じるボタンなどを併用した時の煩雑さ想像してみましょう。アップルのヒューマン・インターフェイス・ガイドラインで示されているステッパーの優れた応用例として参考になると思います。このように一つの型にとらわれず柔軟なUI設計を心がけていきましょう。