UX/UIの"バナナルール"【海外記事メモ】
今日はこの記事を取り上げます。なお、画像も以下から引用します。
バナナルールというちょっと聞き慣れない言葉が気になったので読んでみようと思いましがが、言っている内容はいたって一般的で基本的なものでした。
新しい学びを得るというよりは、「まあこういうのもあるんだ」程度に斜め読みいただけたらいいかなぁと思う記事ですが、よければお付き合いください。
本日もよろしくお願いいたします。
UX/UIデザインにおけるバナナルール
UX/UIデザインにおける「バナナルール」はWebサイトやアプリケーションを使いやすくするためのシンプルで強力な原則です。
このルールは例えるならバナナのかたちそれ自体が「食べ物である」ということが明確に分かるように、ユーザーがWEBサイトやアプリケーションを一瞬のうちに理解できるようにしようというものです。
この考え方は見た目自体がプロダクトの使い方を示唆しているというアフォーダンスという考えに近いものです。
UX/UIデザインにおいて、バナナルールはウェブサイトやアプリのホーム画面のレイアウトに適用されるものです。
これはユーザーがプロダクトに最初に触れ合うページであり、そのプロダクトの目的や提供する機能が明確に伝わることが重要です。
バナナルールに従ったウェブサイトやアプリのレイアウトは整頓され、簡単に使い方を理解することができるものになります。
バナナルールにおける最初のポイントは、明確な情報の階層構造を使うことです。これはデザイナーはページ内の様々な要素の中で重要なものを最も目立たせ、見る人の理解を促すことです。
これは異なるフォントサイズやカラーの使用、レイアウトの違いをページ内の要素に付加させることで実現させることができます。
例えば、ページの見出しは小見出しよりも大きく目立つものでなくてはなりませんし、さらに小見出しはページの本文よりも目立つものでなくてはなりません。
バナナルールにおける第二のポイントは、明確で一貫したナビゲーションです。ユーザーはWEBやアプリ内で目的の動作を簡単に行える必要がありますし、プロダクトの階層構造の中で、自分がどの位置、ページにいるのかがわかる必要があります。
これにはシンプルで一貫したナビゲーションや理解しやすいラベル付けが必要です。
さらに、デザイナーはボタンやCTAがちゃんと目立つように、その配置場所に細心の注意を払わなければなりません。
ユーザーがWEB上のどの位置にいるのかを示すためにパンくずリストを使うことも有効です。
他にはGoogle Storeの例があります。
このWEBサイトはわかりやすく一貫性あるナビゲーションメニューで、ラベルも理解しやすい文言にまとまっています。
これによってユーザーはすぐ簡単に自分が探しているプロダクトやサービスを見つけることができます。
また、WEBサイトはわかりやすく製品情報や特徴、プライシングを表示しています。これによってユーザーは簡単に製品ごとの比較ができ、購入の決断を行うことができます。
この購入までのプロセスはシンプルで一直線的な迷いのない流れの中で行われます。CTAもわかりやすく、求められる情報も最小限です。
これによってユーザーが簡単に購入までのプロセスを完了できるようになります。
対象的にバナナルールに従っていないWEBサイトやアプリケーションは散らかったレイアウトとなり、ユーザーの注意が散漫となります。
これによってユーザーはプロダクトの概要を理解することが困難となり、探している情報を見つけるのが難しくなります。
加えて、ラベルも分かりづらくWEBを通して一貫性のないものであれば、ナビゲーションメニューもわかりづらくなるでしょう。
さらに、バナナルールに従わないとUX全体を損なうこととなり、ユーザーはろくに操作もせずにWEBやアプリケーションを離脱してしまうことにもつながります。バナナルールこそがWEBサイトやアプリケーションの成功の生殺与奪を握っているのです。
まとめると、バナナルールはWEBサイトやアプリケーションを簡単に理解し、扱えるようにするためのUX/UIデザインの重要な法則です。
バナナルールに従うことで、デザイナーは直感的でユーザーに優しいプロダクトを制作することができ、ユーザーの関心を集め、安心感を与えてくれます。
加えて、バナナルールを守ることでデザイナーはユーザーのポジティブな経験を引き出し、WEBサイトやアプリケーションのロイヤルカスタマーとなってくれる機会を増やすことにもつながります。
UXの重要性は今日のデジタルプロダクト開発においては無視できないものであり、バナナルールに従うことはプロダクトの成功への明確な一歩となることでしょう。
感想：UIにおけるアフォーダンスについて詳しく知りたい
この記事を読む限りバナナルールとは、ユーザーが一瞬でUIの意味を理解できるように配慮して設計しようというUIデザインのもともとのお作法の一部を切り出して名前付けしただけのようなものに思えました。
もしかしたら冒頭で述べられていた「UIにおけるアフォーダンス的な考え方」という部分について詳しく事例を交えながら説明してくれるのかと思いきや、「一貫性あるナビゲーション」や「わかりやすいラベル」などかなり議論は一般レベルにまで落ち着いていてしまったので、結局バナナルールとは何のことなのか、というのが個人的にわからなくなりました。
この「UIにおけるアフォーダンス」という部分が深掘り化されて体系化されているルールなのであればぜひより深く学んでみたいと思うのですが、どうなんでしょうか。
とにもかくにも、デザインには新しい謎の単語がポコポコ生まれがち、ということを感じさせられた記事でした。
個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします
ポートフォリオ・お仕事依頼など
__________________________________________________________
#デザイナー #UIデザイン #UX #UXデザイン #UI #海外記事翻訳
サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。