あえてメンタルモデルから外すという選択
※本記事は、noteに連載している「ドリーム・アーツ Designers」からの転載となります。
組織図検索を作ったよ
さて、少し前、InsuiteX※という製品に、「組織図検索」という機能が実装されました🎉
- ✨ひたすらぬるっと動く!(gif画像だとお伝えできないのが悔しい…!)
- ✨しかも現在地までの導線も出る!
- ✨検索して選択した組織がハイライトされる!
- ✨折れ線で要素同士が繋がれていて、本物の組織図のよう・・・!
(自分で言うのもな…と思いつつも、エンジニアとデザイナーの苦悩の結晶なので「すごい!」と言いたい…!)
※InsuiteXって?:
65万名の働き方を支える、大企業向けポータルクラウドサービス。
部門の情報を集約し、webポータルに掲載することができます。
組織図はその掲載情報のひとつとして開発しました。
でもこの組織図って・・・
さて、画面を見ていただきましたが、みなさんどう思われましたか?
この組織図、一般的に思い浮かぶ「組織図」とはちょっと違いませんか?
おそらく「組織図」と言われて思い浮かぶのは上から下に組織が連なっていく、このような形ではないでしょうか。
なんでこの形にしたのか
デザイン初期では、組織図は横並びでUIを考えていました。
しかし、実際にカンプに落とし込んだところ、こんな問題が発生しました。
- 文字横書きの横長カードが横に並ぶので、とにかく一覧性が悪い
- 左右スクロールを多用するので、ブラウザの挙動の「すすむ」「戻る」と同じジェスチャになり、望まない動きになる可能性がある
- そもそも、横スクロールをするために「シフトを押しながらマウスのホイールを回す」ことを知っているユーザーがどのくらいいるのか?が疑問
- 実際の使用シーン的に、最初から2階層分開いておくのが望ましいが、二階層開くとカードがとにかく散るので、一覧性が良いとは言えない
とにかく一覧性が低くて使いにくい!!!!
勇気を持ってメンタルモデルと外れることをする
結果的に言うと、正直違うよね、と言われることを覚悟の上で、カードを縦並べに変えました。 (一般的なメンタルモデルとは違う見た目にする判断だったので、正直怖かった…!)
では、なぜそうしたのか。
今回達成すべきUXは、「わかりやすく検索できる」こと。
そのわかりやすさのためには、「一覧性」と「現在地がわかること」がUIには必要だったため、組織図っぽさを少し落としました。
つまり、今回は「使いやすさ」優先するという判断をしました。
「一般的」は、「使いやすさ」への1要素でしかない
そもそも「一般的なメンタルモデル」って何のためにあるんでしょう?
UIをデザインする時に「この見た目は一般的か?」「これはユーザーがすぐに理解できるのか?」という視点は非常に重要です。
それは、「理解しやすい」という使いやすさの要素を満たすための考え方なんじゃないかなと思います。
とはいえ、「従来のメンタルモデルに合っているから」という理由だけでUIを設計してしまうと、わかりやすいけど、使いにくい状態になることってありませんか?
「これまでの画面はこの形だったからこれに揃えて作って」
「このUI、わかるけど一般的ではないから変えてほしい」
これらの要望は、本当は「使いやすい画面にしたい」という意図があるはずなんです。
使いやすくするために、確かにそうするのが一番安全なのはわかるのですが、
(え、こんなに古いUIなのにそのまま使うの?)
(既存の画面を変えないと、新規ユーザーには使いにくくない?)
それって「そういうものだから」という部分で思考停止してない?
とも思うわけです。
なので、「本当に達成したい体験のために、一般的ではないとわかった上であえて違う形をとる」という判断をすることが、UI/UXデザイナーの仕事なんじゃないかなあ、と思った機能開発でした。
とはいえ、まだまだ発展途上
とは言いつつも、このUIで完璧!✨というわけではありません。
システム要件的に表示されてしまうデータの扱いを修正したり、そもそも表示すべきデータはあっているのか?などなど、改善・検討すべきことは多いです。
InsuiteXチームはとにかく早くPDCAを回すことを心がけているチームなので、不足している部分をバンバン見つけて、もっともっと良い製品にしていきます!
ここまでお読みいただき、ありがとうございました!