デザイナーブログクラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。学んだことこんにちは。UIデザイナーの小林です。エンジニアとデザイナーが「いい関係」を築くために」というイベントに行ってきました。このイベントでは、「エンジニアとデザイナーがいい関係を気づくために」というテーマでエンジニアさんやデザイナーさんがそれぞれの取り組みをLTしてくれました。(弊社デザイナーの井上も登壇させていただきました!)テーマがあるイベントは、参加している間じっくりひとつのことについて思考を深めたり、同じ疑問や課題を持つ人と意見交換できるのがとてもステキだなと感じます!こういう機会が日常的に作れるようにしていきたいです。最近では私がデザインガイドライン担当ということもあり、コンポーネントやガイドラインについて社内のデザイナーと話す時間が増えてきました。そこで今回は、私がクラウドワークスのデザイナーと「フォーム」というひとつのテーマについてじっくり意見交換してよかったことや意見交換の内容を少しご紹介してみようと思います。複数の選択肢から1つだけを選んでほしいときのUIは?パッと思いつくのは、セレクトボックスとラジオボタン。どちらも複数の選択肢から1つだけ選ぶことができるUIとしてはお馴染みですし、誰しも使ったことがあると思います。この2つには、どんな違いがあるでしょうか?一緒に考えてみてください。クラウドワークスのデザイナーで意見交換したときは、こんな意見がありました!選択肢が少ない時はラジオボタンでもいいけど、都道府県みたいに選択肢が多いときにラジオボタンなのは選びにくいな。選択肢が多いときはセレクトボックスがいいと思う。セレクトボックスを使うと、ユーザーが実際にセレクトボックスを開いてみるまで、中にどんな選択肢があるかわからない。いうデザインのポイントを共有できると、複数人でデザインしても統一したUIを提供できそうです。ラジオボタンとチェックボックス、横に並べる?縦に並べる?下の画像では、同じ画面内において、ラジオボタンやチェックボックスが縦並びのときと横並びのときがあります。どのように使い分けているかわかりますか?このレイアウトの使い分けはルール化されておらず、各デザイナーの裁量で決められています。各デザイナーがデザインする過程で、感覚的に行なっている部分を「なぜ見やすいのか」「なぜ見辛いのか」意見交換してみました。(上の画像の)希望する色の部分をみてみると、もし横並びだったら選びにくいと思う。一つ一つの選択肢が長いし、横に並べると1列で収まらないよね。縦並びにすることで、一つの選択肢に複数の要素が入ったときにも選びやすい気がする。縦並びの方が複雑な選択肢でも一覧性を持って比較しやすいってことかもしれない。横並びを使いたい時には、選択肢が明示的であることや、細かく比較検討しなくても選べるようにしておく必要がありそうだよね。お互いがなんとなく感じていた感覚を言語化できるので、次にデザインする時には「あの時こういう話をもとに...」と説明がしやすくなりそうです。2択の選択肢はラジオボタン?それとも一つのチェックボックス?これもよくあるパターンではないですか?例えば、「利用規約に同意しますか?」という質問に対して、ラジオボタンで「はい」「いいえ」の2つの選択肢を選んでもらうか、チェックボックスで「はい」だけを表示して選んでもらうかです。これについても事例を持ち寄りながら意見交換をしたので、実際の意見を紹介してみます。どんな2択のときに、どんなUIを使っているんだろう?利用規約の同意みたいな場合、「はい」を選択しないと次のステップには進めない。この時にはいいえの選択肢があってもユーザーは混乱してしまうだけでは...。クラウドワークスだと発注時のオプション購入でもチェックボックスが使われてる。オプションは「任意」の項目だからラジオボタンで購入するかどうかを常に選択してもらうのではなく、チェックボックスがついてるかどうかだけで意思表明できるのがいいね!チェックボックスとラジオボタンの違いだと、ラジオボタンってすでにどちらかが選択されている状態であることが多いよね。これはどうだろう?暗黙的に「はい」だけな場合にはすでに選択してある状態でもいいけど、あえて明示的に「はい」を選んで欲しい場合にはすでに選択してある状態ではない方がいいと思う。すると、あえて明示的に「はい」を選んで欲しい場合にはチェックボックスで「はい」だけを選べるようにしておくのがいいね!意見交換の一部を抜粋しているものになりますが、こんな感じで気軽に思ったことを伝え合いました。お互いの意見や疑問を、お互いの経験や知見で補足したり訂正したりしながら、一緒に考えを深めて言語化することができました。一つのテーマだけをじっくり考えてよかったこと日々のデザインレビューではわからない知見や経験を共有しあえる今回フォームについて1時間〜1時間30分ほどじっくり話してみると、自分や自分以外のデザイナーが過去にフォームのデザインを経験した時に悩んだことや、デザイン中に考える細かな思考を共有できました。ひとつひとつのコンポーネントに対する知見や経験は、自分で実際にデザインをしてみなければ考えが及ばない部分も多く、まだ自分が経験したことがないデザインパターンや事例に触れながら、理解が深められる点でとても学びになりました。コンポーネントに対する考えや経験値がブラッシュアップされる「意見交換をする」ということは、もちろん自分の考えや経験も言葉にして伝えなければいけません。自分の経験や意見、疑問を言葉にしていく過程で、どんどんと考えが整理されていきました。自分の考えで及ばなかった部分を、他のデザイナーが補ってくれたり、意見交換しながら一緒に新しい発見ができたりするのも魅力的でした!さいごに今回はひとつのコンポーネントについてじっくり考えてみた話をしました。クラウドワークスではデザイナー読書会で一つの本をテーマにみんなで意見や疑問を出し合ったり、経験を共有する会を行なっています。今も「デザイン思考」について、みんなで楽しく学びを深めてます!こちらの内容についても、また機会があれば、クラウドワークスのデザイナーブログで紹介したいと思います。社内にデザイナーさんが一人しかいない人や複数人いてもなかなか相談できない人など、ぜひ気軽にクラウドワークスのデザイナーとおしゃべりしにきてください。16:00デザイナーが集まって「フォーム」の使い方だけを考えてみたTweet関連記事2019-10-25ユーザーの行動フローからコンテンツを再設計!サービスサイト改修のお話こんにちは、クラウドワークスでデザイナーとして働いている岡...2019-04-12デザインシステムの基本の基を考えていくお仕事をしています。UXエンジニアのみーたです。先日3月でクラウドワ...2018-12-25クラウドワークスの創業期から6年以上在籍するぼくが、辞めるのを辞めた話。2018」の、最終...2018-05-18デザイナーが情報収集するときにハマりがちな課題について考えてみたデザイナー5ヶ月目のUIデザイナーが感じる情報収集の難しさと実...2018-03-01新卒のUXデザイナーがまじめに1年目を振り返ってみたこんにちは。UXデザイナーの八尾です。»このブログについてクラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。