【Webデザイン分析】NETFLIX,アマプラ動画視聴アプリ
UIデザイナー/このこのです!
会社のWeb担当者様
Webサイトの作り方がよくわからない。
サイトへのクレームが多くて困っている。
アプリユーザー
このアプリ使いづらいなぁ。
何をしたら次に進むの？
ボタン押すの怖い。。。
今回は、タイトル記載の企業アプリをUI(使い勝手)の観点で分析します。
この記事は、デザイン未経験者様でも理解できるようにわかりやすく、ユーザーの視点で分析します。デザイナーの方も、未経験の方も「わかる〜」と思って下されば幸いです。それでは、行きましょう!
NETFLIX
皆さんお馴染みNETFLIX。人気TOP10やあなたにおすすめの映画など、選択肢を多く提供してくれるサービスが魅力的な動画視聴サービスです。最近は、呪術廻戦にはまっています。そんなNETFLIXですが、利用していて「これ押したらどうなるの？」と思ったボタンが1つだけありました。皆さんは心当たりありますか？
ボタンは、押した後の結果がわかるアイコンで表現する
赤枠のボタン。これは、「マイリストに追加」ボタンです。この状態はまだ未追加の状態です。アイコンの記号は「+」。とてもわかりやすいですね!ボタンを押すと「追加」されることが一目でわかります。そう、ボタンのアイコンは、一目で押したら何が起こるかを想像できるものを使用すると良いでしょう。右の「グッド」ボタンも「バッド」ボタンも押した後のアクションが容易に理解できますよね!
しかし、逆に「マイリストから削除」ボタンがマイナスポイントです。ボタンのアイコン記号は「✔︎」。これでは、押すと何が起こるかが想像できません。僕は、「この動画を購入する」ボタン、もしくは「いいね」ボタンだと勘違いしていました。NETFLIXさんの思惑は、この記号を見たらマイリストに追加している動画かどうかを判断できるから、という理由でこのアイコン記号を用いたのでしょう。しかし、ボタンの役割を考えてみてください。何かアクションを起こすためにボタンは利用されるはずです。マイリストに追加している動画かどうかを判断するツールは、「ラベル(テキスト)」を使用した方がユーザーは迷わずに操作できるはずです。
この場合、「マイリストから削除」ボタンに使用するアイコンは、「×」ボタンもしくは「マイリストから削除」ラベルを使用すると良いでしょう。
Amazonプライムビデオ
動画視聴サービスの大御所Amazonプライムビデオ。Amazonサービスの主役を務めるプライムビデオは、人気のオリジナルドラマや昔の映画など各ジャンルが揃っている全人類向けの動画視聴サービスです。最近、僕は「マチネの終わりに」という動画を見て「大人の恋愛って難しいよな〜」とカッコつけた独り言を吐きましたww
よく使用されているアイコンを使おう
Amazonプライムビデオのデザインで気になった点は、実はNETFLIXと同じ箇所です。
まず、「マイリストに追加」ボタン。うん、「+」の記号を使用していて、とてもわかりやすい!
では、「マイリストから削除」ボタンはどうでしょう?
こちらもNETFLIXと同様、ボタンを押してどんなアクションが起こるのかが想像できません。ユーザーが何が起こるかを想像できるデザインでなければユーザーはストレスを抱えてしまいます。さらに、このアイコンの場合、あまり見かけないアイコンではないでしょうか？これでは、押して何が起こるか想像の余地もありません。アイコンの役割というのは、一目見て瞬時に何のボタンであるかを理解できるようにすることです。(テキストの場合、読むという動作が加わるので、アイコンに比べるとユーザーはストレスを感じてしまう。)なので、アイコンに使用する記号は、ユーザーに馴染みのある記号出なければ効力を発揮しません。
やはりこの場合は、「×」ボタンが適切だと言えるでしょう。(「×」ボタンの場合、ポップアップを閉じるボタンと勘違いされてしまう可能性もあるので、ここでは、テキストの利用も有りです。)
まとめ
Web担当者様に意識して欲しいことは、2つ。
①ボタンは、押した後の結果がわかるアイコンで表現する
②アイコンを使う時は、よく使用されている記号を使おう
アイコンの役割は、「一目見て瞬時に何のボタンであるかを理解できるようにすること」です!
今回、例にあげたアプリは皆さん利用されているのではないでしょうか？実際に扱ってみて気になるデザインは有りませんでしたか？別のサイトでもいいので、気になるデザインがあれば、是非僕に共有していただけると助かります。デザインはまだまだ勉強中なのでこれからも精進します!では、また!
サポートお願いします!あなたも闇コミュニケーション力マスターになりましょう!