UIを組む際に不足しがちな「最大と最小」の表現
最近やっっっと鈴木リーダーの下の名前呼びに慣れてきたクロコ Webデザイナーの窪薗(クボゾノ)です☺︎
この１年間でUIデザイン作成の案件に入ることが多かったのですが、「あの要素足りないね」「このボタン必要だね」と途中で気付くことが多く。。
今回はそんな見落としを少しでも減らすべく、UIを組む際に不足しがちな要素のひとつである「最大と最小」の表現を自分のためのアウトプットとしてまとめてみました。
これで「あれ実装していなかったドウシヨウマニアワナイ。」がなくなるといいな・・
一覧画面での「最大と最小」
例えばこのようなアイテムを自主的に追加できる一覧画面が必要になった場合で、デフォルト状態はアイテムが複数登録されているものとします。
こんな画面ではどんな「最大と最小」の表現が必要か？まずは最小から！
自主的に要素を追加できる画面の場合、まずアイテムが空であることを明記してあげましょう。
また追加できるコンテンツの種類のよっては、追加を催促させるようなテキストが一緒にあるとユーザーには親切ですね！
このように表示する情報がない時にユーザーが見る画面のことを「エンプティステート」と言うらしいです。未登録のプロフィール画面なんかでもよく見かけますね
お次に最大の場合です。
仮に追加できる最大数が決まっていた場合、追加ボタンの非活性化(desabled)と、クリックした際のエラー文をツールチップ、もしくはモーダルなんかで出してあげましょう。
上限に達して追加できなくなった場合、追加ボタン削除したらなんでボタンが無いの？押せるようになったら今度はなんで押せないの？とユーザーから出てくるであろうすべての不便を解決する必要があります。
エンプティステート（最小値）と反対にこれはなんと言うのでしょうか。カンストステート？🤔
よくわからないですが、初めから「追加できる項目は○個までです」と明記しておくのが一番親切かもしれません。システムのターゲット層やUIのトンマナに沿って決めていくと◎
選択するときの「最大と最小」
次の見出しはチェックボックスです！デフォルトはこんな感じ
単一選択か複数選択か、複数選択の場合は上限があるのかなどを見ていきます。
チェックボックスが必須の場合も、入力フォーム同様*証を付けるのは変わりません。
ただ単一選択（一つしか選択できない）の場合、ますチェックボックスではなくラジオボタンに変更するのを忘れないようにしましょう。（私はこれよく忘れます。。）
またラジオボタンの実装する選択肢意外に、セレクトボックスで表示させる方法もあります。
どちらで実装するかは、ユーザーに選択肢を一度を見せてから選ばせるならラジオボタンで、選択肢を見せずに、また縦幅の表示領域が広がるのを懸念するならセレクトボックスで、など選択肢の種別や量によって変更しましょう。
こう考えるとよくある都道府県選択なんかは選択肢が分かり切っている＆選択肢が多いのでセレクトボックスが多いですね🤔
最大時の表現として、選択の上限がある場合 or 全て選択できる場合の２通りあるかと思います。
選択の上限がある場合は、上限に達した際に他のボタンをクリックできなよう非活性化(desabled) & もっと丁寧にするなら他ボタンクリック時にツールチップを見せてあげると親切です。
全て選択できる際は選択肢に加えて「全て選択する」チェックボックスをつけてあげるのが一般的でしょうか
フォーム入力の「最大と最小」
最後の見出しは会員登録や問い合わせなどで見かけるフォーム部分です。
入力フォームの場合は赤字のバリデーションでエラーメッセージを出して管理するのが一般的です。
最小の表現として、必須項目の場合の「*(アスタリスク)」の追記は不可欠です。
また稀ではありますが保存の際に最低限必要な文字数が決まっている場合は、こちらもクリック後のバリデーション表記を付けるか、ラベル横の表記が必要です。見かけるのはパスワード入力フォームぐらいでしょうか？
クリックした後に「保存できません。」だけのエラー文は一番避けたいですね😇
逆に文字の上限が決まっている場合、こちらも同じくバリデーションorラベル横に表記してあげましょう。
以上で入力フォームの表現は終わりです。UIというよりは機能面での検討が色々必要ですね
最後に
自分のアウトプット用に”忘れがちな「最大と最小」のUI表現”をまとめてみました。
クロコではホームページやLP制作以外にも、システムやスマホアプリのUIデザイン制作の依頼もお待ちしております！
▼クロコの過去の制作実績、web制作についてはこちらから！