デザインアップデートの前後比較から学ぶUI改善のヒント

今日読んだ記事を要約し、その内容から自分の仕事に活かせそうな内容を記載していこうと思います。

※一番最後の「記事をまとめるのにかかった時間」は今後の自分の参考値として記載します。

今日読んだ記事

アプリのアップデート500本ノックから学ぶUI改善のヒント

用語補足

UI（User Interface）
ユーザーとの間で情報をやり取りするための方法、操作、表示といった仕組みの総称。ユーザーの目に触れる部分/使用する部分。
※私はざっくり「見た目」と理解。

内容要約

・長い説明は読み飛ばされるもの。補足はとにかくシンプルに
・繰り返す文言はひとつに纏め、読まなくても分かる状態に
・アクション訴求の前にメリットや意義、不安払拭のをわかりやすく伝える
・ボタンのラベリングはよりわかりやすく
・ボタンは「押せる」をわかりやすく

参考になりそうなポイント

長い説明は読み飛ばされるもの。補足はとにかくシンプルに

読まない…本当にみんな読まない。補足説明書いても読まれてないなと感じる。そういう場合は補足しなくて良いように要素を考え直す必要がある。本当に読まない。私も読まない。

繰り返す文言はひとつに纏め、読まなくても分かる状態に

これはさっきのことと関連していること。ごちゃごちゃしているだけで読む気が下がる。繰り返し使用するワードは小見出しなどに集約して本文をシンプルにするのがベスト。と分かっていても、この作業もなかなか難しい。別のワードに置き換えたり代替えのものを用意したり、普段からいろんな言葉に触れることが大事。

アクション訴求の前にメリットや意義、不安払拭のをわかりやすく伝える

これと先程の「とにかくシンプルに」「纏める」は紙一重的な、なかなか難しいところ。アクションの大きさというか、ハードルが高いものはメリットや不安払拭の補足をコンパクトに伝える事が大事。今までの自分の作業を振り返ると、これはなかなか出来ていないなと反省。

ボタンのラベリングはよりわかりやすく/ボタンは「押せる」をわかりやすく

これはかなり気をつけている。これに関連して気になっているのがTwitterの仕様。記事ページのリンクを貼るとメインビジュアルを自動的に表示してくれるんだけど、写真を1枚アップロードしたときと見た目が似ていてたまに困る。写真っぽいからクリックしたら記事ページに飛ばされてストレスを感じたり、記事かと思って画像をタップしたら写真が拡大表示されるだけだったり。だからと言って記事ページ用のメインビジュアルに「押せる感」のある文言（詳しくはこちら）や矢印を入れるわけにも行かないし…という感じ。

まとめ

まとめるも何も、この記事自体がBefore/After載せてくれているのでとても分かりやすかった。今後自分に活かせそうな事をまとめるとすれば、以下になるかも。

・伝わりづらいと感じたら、文章やワード単体でなく全体から考え直す必要がある
・デザインはデザイナーに任せる、ディレクターは分かりやすいか分かりにくいかの観点で口を挟む

記事をまとめるのにかかった時間

約1時間

読んだ記事自体がわかりやすく、ボリューム的にも少なかった。

※この記事のメインビジュアル画像はhimawariinさんによる写真ACからの写真