こんな証券口座 UI はどうでしょう
証券口座のウェブ管理画面の UI を作ってみた。と言っても作ったのは画面 1 枚だけ、口座にログインした直後に見るトップページ。これは、口座残高とマーケット情報を表示するダッシュボード。メニュー構成は、とある既存の UI (後述) を参考にしてます。
ダッシュボードを意図してるから、[口座残高状況] が一番に目に入れば成功。次は [マーケット] か [メッセージボックス] の未読件数かな。その他の画面の要素の意味も、ある程度想像できてくれれば嬉しい。画面の左と上にメニューを置く構造は通例だから、理解は難しくないと期待してる。
上記の画面の要素うち、3 つだけサブメニューが表示される想定。[アカウント] には証券口座についての情報と、いくつかの [お手続き] へのショートカットがある。[ヘルプ] にはサービスを説明する情報への導線がある。
もう 1 つのサブメニューを持つ要素は [メッセージボックス]。未読を新しい順に 5 件を表示し、かつ過去ログへもここからアクセスする。金融サービスでは法令でユーザの閲覧が必須の文書もありそうだから、実際にはこれだけじゃ足りないかもしれないけど、一旦こんな感じでまとめた。
動機は SMBC 日興証券の使いづらさ😡
SMBC 日興証券イージートレードの画面は酷い。画面内の情報に階層的な強弱が無く、重要と非重要が整理されてない。要素の配置には規則性がなく、雑然としたレイアウトがユーザを迷わせる。枠線の多さや一貫性を欠くグラデーションは、視覚的ノイズとして不必要に認知負荷を高める。
この画面の最大の失策は「情報の整理不足」だと思う。結局、この [トップ] は何を伝えたいの？視線を集めやすい画面左上の一等地に氏名が鎮座してるけど、まさか「ユーザに、ユーザの氏名を教えたいんです」とか言わないよね？ (上図では名前は消したけど、敬称 [様] が確認できる)
以降で、僕がどんなふうに考えて冒頭に載せた UI を組み立てたのか、その思考の軌跡を書き残す。自分自身の「情報整理術」の備忘録だけど、もし別の誰かの参考になれば嬉しいね。
大事な情報を選ぶ
まず [トップ] が何を伝えたいのか見抜く。そもそも証券口座は証券取引をするためのもの。その原点に立ち返ると、ユーザが知りたい最重要な情報が何か見えてくる。この画面においては [口座残高状況] と [マーケット] がそれに当たるだろう。
[メッセージボックス] はユーザが最も高い関心を寄せる対象ではないかもしれない一方で、サービス運用上重要だから完全に無くすのはマズそうだ。サブメニューとして、アクセス可能性を残しつつ隠すのが良いだろう。一定の注意を引くために、未読数のバッジが付けばなお良いね。
微調整で見やすさを向上
情報設計の基本は、重要な情報を目立たせ、それ以外を劣後させること。画面上部に散らかった細かいボタン類は思い切り劣後させよう。アカウント管理とヘルプ/サポートが混在してて、配置にも機能にも合理的な一貫性がない。これらは機能ごとに集約して、サブメニューに隠す。
また、画面幅の広い現代的な端末を想定するなら、画面左に新しくカラムを置き、そこにグローバルナビを当てたい。横長な画面においては希少な「縦幅」を圧迫してしまうのが、タブ型グローバルナビの無視できないデメリット。回避する手があるのに、使わない理由は無いね。
そうして完成、新しい UI 案
この画面で提供したい情報が正しく提供されるよう設計したのが、冒頭にも載せたこの UI 案。全く同じ内容なのに、ずっとスッキリしてる。いくつかのボタンは、サブメニューに隠したから 1 クリック余分に必要になったけどね。フレンドリーな絵文字で、認知負荷も低い (よね？)。
もともと [マーケット] 欄には、好きな銘柄を登録してその変動を一覧する機能があった。変動を数値だけでなく視覚的に理解できるよう、簡易なグラフも追加した。銘柄名、価格、変動の位置関係はもう少し改善できるかも… ともかく、グラフがあることで画面の機能性はさらに増したはず。
整理してみて分かったのが、ボタンやサブメニューのリンク先がかなり非直感的だということ。例えば [サイトマップ] も [ご利用ガイド] も [メッセージボックス] も、実は [トップ] 配下に入ってる。[トップ] はダッシュボードかなと僕は推測したけど、必ずしもそうではない…？
ちなみに画像は Google Slide で作った。最近 Google Slide を使いこなせるようになってきて楽しい。