【設計】toBのWebアプリ開発で表示順の統一が軽視されがちなので、いかに大事な機能であるかを力説してみる
はじめに
対象
- 「怪しい……表示順がバラバラだ……」と思っているITエンジニア向け。
直接利益に結び付かないですし、それで契約が増えるインパクトもないので、軽視されがちなんですよね。多少表示順に難があったところで、使い続けるだろうってのは。良いものを作りたいと思っている開発者や、既存顧客にとっては心境複雑な話ですが。
表示順を笑う者は表示順に泣く
表示順、意識していますか？ IDの昇順でお茶を濁していませんか？
我々の生活の中には順番が溶け込んでいます。SNSのタイムライン、コンビニの商品棚、家具や道具の配置など。いつも使っているものが、いつも通りの順番で並んでいる。それは当たり前ではありません。順番を維持する力が働いているからです。
あるときはTwitterのタイムラインが投稿日時降順でなくなって困る声が続出し。またあるときは商品棚から賞味期限切れの商品が出てきてレジに引っかかり。またあるときは模様替えをしたら前の癖で、そこにある筈の物を取ろうとしたり。
順番が変わることでユーザーには様々な不都合が発生します。しかし何故、このようなことが起こるか、言葉にして説明することはできますか。この記事では順番、特にWebアプリにおける表示順について深堀りしていきたいと思います。
Webアプリにおける表示順
本格的な説明に入る前に、Webアプリにおける表示順について軽く補足しておきます。
最初に思い付くのは一覧・検索画面です。例えば社員一覧であれば、社員番号の昇順は鉄板です。次点、入社年（期）の昇順、氏名順などでしょうか。複数の条件を優先順位の高い順に適用していく方法もあります。
次にセレクトボックスです。例えばマスタデータから入力フォームのセレクトボックスを作る場合、その表示順は一覧・検索画面と一致していることが望ましいです。しかし無秩序にコピペ等でコードを増やしていくと、画面や部品ごとにバラバラということも。
最後にメニューです。ヘッダー・フッター・サイドバーなど、多くのサイトで基本配置はある程度決まっています。ヘッダー右上のユーザーアイコンをクリックするとサブメニューが出てくる、フッターにリンク集を配置するなどですね。
探せば他にもあるかもしれませんが、今回はこのくらいで。
順番統一がUXに寄与する理屈
人は予測をもとに行動する
画面の前のあなたはマウスを動かしています。あるいはキーボード派の方もおられるかもしれません。Zennで自分が書いた記事を確認したいなぁ、さっきいいねした記事もう一度読みたいなぁ。そして恐らくメニューを開いて、目的の項目を選ぶでしょう。
しかし実際のメニューを見てマウスを動かしている訳ではない筈です。以前見て何となく覚えているメニューを想起した上で、クリックしてメニューを出した後直ぐにマウスを移動しているのではないでしょうか。これ見ているのはうろ覚えのメニューの方なんです。
一覧・検索画面にしても同様です。毎回、一覧画面の隅々まで詳しく読んでいたら疲れてしまいます。食品のラベルに書かれている原材料表示、PC周辺機器の規格説明欄。どれも全面・全部を読んでる訳ではありません。内容に当たりを付けてから読んでいます。
セレクトボックスにしても、下の方にある項目であれば、クリックした直後にマウスを下に持っていくか、UIによってはスクロールし始めるでしょう。それは「そういう順番のセレクトボックスの選択肢がこの辺に出てくる」と予測したものに対して操作しています。
つまりこの想定から大きく外れた場合、具体的には表示順がバラバラであったり、あるいはUIの仕様が統一されていなかったりすると、ユーザーはそこで手が止まってしまう訳です。誤った選択肢を選んでしまうこともあるでしょう。
無意識に身体が覚えている
さてWindowsユーザーがMacを使いはじめて真っ先に思うこと。ウィンドウを閉じるボタンはどうして左上にあるのだろうか。そして画面を閉じようとしたとき、自然と右上にマウスを持っていってしまう。頭で分かっているのにやってしまう。
習慣や慣れというのは恐ろしいもので、Webアプリでも例外ではありません。そのうち行動目的を思い浮かべただけで、手が勝手に動くようになります。ブランドタッチをするときに、わざわざアルファベットのボタンを探さないのと一緒ですね。意識すると滅茶苦茶打ちにくいです。
人はやはり本人の意図しないところで、身体が動きを覚えることがあります。ちょうど模様替えをした次の日に起きたら、机を動かしたのを忘れていて頭をぶつけるみたいな感じ。ホテルに泊まったのを忘れて、いつもの場所を手探りでわさわさしてしまう感じ。
この癖を修正するのには、人にもよりますが、ある程度の期間が必要です。このためマスタ画面で表示順を変更したりすると、慣れるまでしばらく時間がかかるという訳です。
表示順を統一するアプローチ
クラス設計とリファクタリング
表示順がバラバラになってしまう根本原因は実装がバラバラなことです。例えばRailsで開発を行う場合は、専用のスコープを用意して呼び出します。default_scopeはあちこちで言われてますが、おすすめしません。これは検索してください。
また合わせて押さえておきたいのがransackです。@q.sortsに別途渡さないといけないため、どうしてもスコープとは別定義になってしまいます。
これに関しては、下手に共通化するよりはコントローラーに直接書くか、複数必要な場合はモデルに定数として定義しておくのが筋が良いような気がします。もしもっと良い方法があればコメントにて補足いただけると助かります。
まとめられない場合はレビューや試験で拾うしかないので、チェック項目としてリストアップしておくようにします。
利便性を追求する
今の表示順で本当に使いやすいでしょうか。特にID昇順のままになっている場合です。本来ユーザーが望む表示順は別にあるかもしれません。表示順自体に合理性がないと、対象の項目を探しにくいです。
もしアプリ全体で同じ表示順にできるなら、その方実装コストが安いです。もし組織ごと・ユーザーごとにしたい場合は、相応のコストがかかります。よくあるのは表示順カラムを追加して、表示順の優先順位を数字で示してもらう仕様です。
マスターデータ以外だと区分値など、あらかじめ固定の値が多いと思います。これはセレクトボックスやラジオボタンとして表現されることが多いですが、表示順を指摘されることは少ないと思います。あるとしたら不要な項目を非表示にしたいとかですね。
メニューの表示順はWebアプリの内容次第ですが、マイページは上、設定やログアウトボタンは下の方に来ることが多いので、寄せた方が使いやすいのではないでしょうか。最近はサイドバーがにゅっと出てくるものや、左下にユーザーアイコンがあるものもあり、一概には。
結局のところ、自分自身がユーザーとなってWebアプリを使い、その中で使いにくいUIを見つけたら、少しずつ改善を積み重ねていくのが良いという結論になります。
おわりに
ツールを使っているユーザーはそこまで思い入れもないし、解像度も言語化もそこそこなので、返ってくる言葉が「使いにくい」なんですよね。具体的に何がそうさせるのか理由は上手く言葉にできないけれど、なんか使いにくいですねと。
あとは歴史を覚えるタイプの脳味噌を使っている方は気にならないとか。数学や物理のように抽象化した法則の方を覚えるタイプだと、個別具体的で法則性のないUIにいらいらしがち。IQテストの法則探しが得意な人もこの部類に入ると思います。
とはいえ使いやすいのは間違いなく、表示順の規格が揃っているUIなので。もし心当たりがあるプロジェクトがありましたら、この機会に見直してみてはいかがでしょうか。
Discussion