Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

BtoBサービスのUIデザインをする上でのリファレンスまとめ

f:id:life-is-bitter:20170704104931j:plain

つい最近、ご縁がありましてBtoB向けのサービスの開発にUIデザイナーでジョインすることになったのですが、BtoB向けのサービスにおけるUIデザインというものがはじめての経験です(しかもスタートアップ、スタートアップでの開発もはじめて)。

で、本格的にコミットしていく前にある程度予備知識というか最低限気をつけておかなければならないことやバリエーション出しのためのリファレンスが欲しいなと感じたので自分用にまとめることにしました。

www.life-is-bitter.com

PinterestやDribbble、あとはこの間も紹介したUI Movement等のリファレンスではBtoC向けのアプリやWEBのUIは豊富なのですが、BtoBとなるとなかなか無いというか見つけづらいんですよね。

おそらく管理画面ダッシュボードUIの開発が軸となるので、今回はダッシュボードUIがまとまったサイトと気をつけておくべきことをまとめました。

UIリファレンス

www.designyourway.net

UIの参考例が豊富。また、英語ですがダッシュボードUIを設計する上での留意点もまとめられており必読の記事です。

onextrapixel.com

こちらもUIの参考例が豊富。扱う情報(天気・解析結果等の定量データ・パーソナルデータなのかなど)によってカラムの取り方が大きく変わって、それに伴いIAも大幅に変わるのが面白い。

designrfix.com

デザインモック寄りなので実装工数とかユーザビリティが何とも言えませんがバリエーション出しのインスピレーションにはなりそう。

www.nxworld.net

複雑で大量の情報を扱うときにどうカテゴライズしてまとめるか、というときに参考になりそうな例が多め。

www.pinterest.jp

あとはPinterestでも見つけた良さそうなダッシュボードUIをまとめておきました。

UI設計する上での留意点

transitkix.hatenablog.jp

ユーザビリティやエンジニアへの実装の投げやすさを考慮すると、ちょっと前にも話題になった「つよいUI」であるための視点は欠かせません。特にBtoBサービスでのUIではフォームが多いので、空欄だった場合の処理や表示など細かい部分の仕様が肝心になってくると思われます。

ボタンの押下・視認可能性

数多くのダッシュボードUIを見てきて思ったのが、意外と各種ボタンが押下できるのか、ボタンとして認識できるかどうかに気を配っているものが少ないなと感じました。極端にフラットデザインに傾倒して、ユーザーにとってそのボタンがアクションできるものかどうか一目で判断できなくなるのは論外なのでここは注意。

重要な意思決定アクションでの確認

売上に関わるレベルの重要な意思決定アクションにおいては必ずワンクッションおいて確認画面を出しますが、このときに出る[OK][キャンセル]のボタン。そもそも文言がOKとキャンセルで正しくないかもしれないし、配色も気を配らなければなりません。

ECサイトのCTAボタン並に研究する余地がある領域だと個人的には思っていたり...。

カテゴライズは適切か

ダッシュボードに詰め込む情報量や機能が多い場合カテゴライズする必要がありますが、そのカテゴライズでひとつ階層が奥に行くわけなので、どうカテゴライズするかでユーザー体験の快適さが左右されます。完全にIAの領域。

実装工数が適切か

Dribbbleにあるようなデザインモックのおしゃれ感は現実問題、実装工数が適切かどうかによるとしかいいようがありません。エンジニアが足りないからこんなリッチなUIだとリリースまでにできないよ、なんてことだと全く意味がないですからね。

デザイナーのエゴで無駄な工数を増やすわけにはいかないので、どうしてそのUIになったか合理的な説明をエンジニアはじめ各所にできるようなアイデア展開をしていきたいものです。

最後に

0→1フェーズでのビジネスにおけるデザインははじめてなのでなかなか骨が折れそうだ〜という感じですが、学びも多そうなので非常に楽しみです。インプットをもっとしていかなければ...!!