デザイナーが集まって「フォーム」の使い方だけを考えてみた

この記事は、2018年7月20日にクラウドワークスデザイナーブログ で執筆した記事です。

こんにちは。UIデザイナーの小林です。
先日、「DXEL.1 エンジニアとデザイナーが「いい関係」を築くために」というイベントに行ってきました。このイベントでは、「エンジニアとデザイナーがいい関係を気づくために」というテーマでエンジニアさんやデザイナーさんがそれぞれの取り組みをLTしてくれました。（弊社デザイナーの井上も登壇させていただきました！）

テーマがあるイベントは、参加している間じっくりひとつのことについて思考を深めたり、同じ疑問や課題を持つ人と意見交換できるのがとてもステキだなと感じます！

こういう機会が日常的に作れるようにしていきたいです。最近では私がデザインガイドライン担当ということもあり、コンポーネントやガイドラインについて社内のデザイナーと話す時間が増えてきました。

そこで今回は、私がクラウドワークスのデザイナーと「フォーム」というひとつのテーマについてじっくり意見交換してよかったことや意見交換の内容を少しご紹介してみようと思います。

1. 複数の選択肢から１つだけを選んでほしいときのUIは？

パッと思いつくのは、セレクトボックスとラジオボタン。
どちらも複数の選択肢から1つだけ選ぶことができるUIとしてはお馴染みですし、誰しも使ったことがあると思います。

では、この2つには、どんな違いがあるでしょうか？一緒に考えてみてください。クラウドワークスのデザイナーで意見交換したときは、こんな意見がありました！

選択肢が少ない時はラジオボタンでもいいけど、都道府県みたいに選択肢が多いときにラジオボタンなのは選びにくいな。選択肢が多いときはセレクトボックスがいいと思う。（下記画像参照）

セレクトボックスを使うと、ユーザーが実際にセレクトボックスを開いてみるまで、中にどんな選択肢があるかわからない。それに選択肢の一覧性もちょっと...

フォームとセットになる見出しを見たときに、今から自分が選ぶ選択肢が連想できたら一覧性にかけてても問題ないからセレクトボックスでもいいかも！

今回話してみたことで、複数の選択肢から1つだけを選んで欲しいときのUIを考える時には「選択肢の数」と「選択肢の一覧性」がポイントになることがわかりました！ こういうデザインのポイントを共有できると、複数人でデザインしても統一したUIを提供できそうです。

2. ラジオボタンとチェックボックス、横に並べる？縦に並べる？

下の画像では、同じ画面内において、ラジオボタンやチェックボックスが縦並びのときと横並びのときがあります。どのように使い分けているかわかりますか？

このレイアウトの使い分けはルール化されておらず、各デザイナーの裁量で決められています。各デザイナーがデザインする過程で、感覚的に行なっている部分を「なぜ見やすいのか」「なぜ見辛いのか」意見交換してみました。 

例えば、（上の画像の）希望する色の部分をみてみると、もし横並びだったら選びにくいと思う。一つ一つの選択肢が長いし、横に並べると1列で収まらないよね。

縦並びにすることで、一つの選択肢に複数の要素が入ったときにも選びやすい気がする。縦並びの方が複雑な選択肢でも一覧性を持って比較しやすいってことかもしれない。 

横並びを使いたい時には、選択肢が明示的であることや、細かく比較検討しなくても選べるようにしておく必要がありそうだよね。

お互いがなんとなく感じていた感覚を言語化できるので、次にデザインする時には「あの時こういう話をもとに...」と説明がしやすくなりそうです。ここはまだまだ明示的にできなかったので、ぜひみなさんの意見もきいてみたいところです！

3. 2択の選択肢はラジオボタン？それとも一つのチェックボックス？

これもよくあるパターンではないですか？
例えば、「利用規約に同意しますか？」という質問に対して、ラジオボタンで「はい」「いいえ」の2つの選択肢を選んでもらうか、チェックボックスで「はい」だけを表示して選んでもらうかです。

これについても事例を持ち寄りながら意見交換をしたので、実際の意見を紹介してみます。

どんな2択のときに、どんなUIを使っているんだろう？

利用規約の同意みたいな場合、「はい」を選択しないと次のステップには進めない。この時にはいいえの選択肢があってもユーザーは混乱してしまうだけでは...。

クラウドワークスだと発注時のオプション購入でもチェックボックスが使われてる。オプションは「任意」の項目だからラジオボタンで購入するかどうかを常に選択してもらうのではなく、チェックボックスがついてるかどうかだけで意思表明できるのがいいね！

チェックボックスとラジオボタンの違いだと、ラジオボタンってすでにどちらかが選択されている状態であることが多いよね。これはどうだろう？

暗黙的に「はい」だけな場合にはすでに選択してある状態でもいいけど、あえて明示的に「はい」を選んで欲しい場合にはすでに選択してある状態ではない方がいいと思う。

そうすると、あえて明示的に「はい」を選んで欲しい場合にはチェックボックスで「はい」だけを選べるようにしておくのがいいね！

意見交換の一部を抜粋しているものになりますが、こんな感じで気軽に思ったことを伝え合いました。お互いの意見や疑問を、お互いの経験や知見で補足したり訂正したりしながら、一緒に考えを深めて言語化することができました。

一つのテーマだけをじっくり考えてよかったこと

日々のデザインレビューではわからない知見や経験を共有しあえる
今回フォームについて1時間〜1時間30分ほどじっくり話してみると、自分や自分以外のデザイナーが過去にフォームのデザインを経験した時に悩んだことや、デザイン中に考える細かな思考を共有できました。

ひとつひとつのコンポーネントに対する知見や経験は、自分で実際にデザインをしてみなければ考えが及ばない部分も多く、まだ自分が経験したことがないデザインパターンや事例に触れながら、理解が深められる点でとても学びになりました。

コンポーネントに対する考えや経験値がブラッシュアップされる
「意見交換をする」ということは、もちろん自分の考えや経験も言葉にして伝えなければいけません。自分の経験や意見、疑問を言葉にしていく過程で、どんどんと考えが整理されていきました。

さらに、自分の考えで及ばなかった部分を、他のデザイナーが補ってくれたり、意見交換しながら一緒に新しい発見ができたりするのも魅力的でした！