ユーザーエクスペリエンス分析: Web からモバイル アプリケーションへのデザイン思考の変革

[編集者注] この記事の著者 @刘津legene モバイル インターネットの急速な発展に伴い、多くの Web プロダクト マネージャーやデザイナーがモバイル アプリケーションの分野に目を向けるようになりました。この仕事は非常に関連性があるように思えますが、多くの問題を引き起こす可能性があります。

モバイル アプリケーションに不慣れな多くのプロダクト マネージャーやデザイナーは、依然として Web の考え方を使用してアプリを開発することに慣れています。 WeChatについて語る際、張小龍はかつてこう言った。「Webフォームを決して考慮しないで、すべてはアプリに基づいて考える。」では、モバイル アプリと Web の違いは何でしょうか?

以下は、著者が仕事で学んだ自身の教訓に基づいてまとめたいくつかのポイントであり、皆さんと共有したいと思います。

1. ひたむきに集中する

イノベーションワークスはかつて、映画や料理などのコンテンツを収録した「Pudding Loves Life」というアプリをリリースしたが、リリース以来、反応はいまいちだった。その後、これらのコンテンツはさまざまなアプリケーションに分割され、注目すべき成果を達成しました。これはなぜでしょうか?

私は思う：

まず、モバイル画面は小さく、シーンは固定されていません。機能が多すぎると階層が複雑になり、操作が難しくなり、体験に影響を与えます。したがって、モバイル端末自体は、機能が多すぎたり複雑すぎたりする場合には適していません。

第二に、シナリオの観点から見ると、ユーザーは対応するシナリオ内の対応するアプリケーションのみを考えます。たとえば、ユーザーが映画を見たい場合、映画関連のアプリケーションを検索することがありますが、「ラブライフ」などの製品は一般的に積極的に検索されません。たとえユーザーがそれを見ても、それが何をするのか分かりません。したがって、モバイル アプリケーションを開発するときは、「大規模かつ包括的」になることを目指してはいけません。

2. ニーズを細分化して完璧を目指す

MomoはWeChatのような強力な競争相手を前に、どうやって生き残り、成長したのでしょうか？また、WeChatは近くにいるか確認したり、シェイクしたりといった方法で見知らぬ人と連絡を取ることもできます。製品の位置付けやマーケティングなどの問題はさておき、デザインの違いを比較してみたいと思います。

アプリを開くと、WeChat インターフェースに最近連絡を取った人々とそのメッセージが表示されます。一方、Momo では、近くにいる見知らぬ人の写真と個人の署名が最初に表示されます。

WeChat タブバーの「友達を探す」をクリックし、「近くの人」を選択すると、以下に示すようなリストページが表示されます。しかし、WeChatのアバターはMomoのものよりはるかに小さく、情報もMomoのものほど豊富ではないことは明らかです。知らない人と友達になりたいだけなら、どのアプリを選びますか?

したがって、私の結論は、強力な競争相手に直面しても、ニッチな需要ポイントを特定し、それを最大化できれば（マーケティングなどの他の要素を考慮せずに）、チャンスを見つけることは不可能ではないということです。

3. 機能の優先順位

モバイル アプリケーションの使用シナリオとデバイスは、Web の場合とは大きく異なります。したがって、モバイル アプリケーションの機能は、ユーザーのニーズに依存するだけでなく、使用シナリオやデバイスの制限などの要素も考慮する必要があります。 Web機能をAPPに直接移植しないでください。

たとえば、クーポン商品の場合、Web 版では印刷機能に重点を置き、モバイル版では店頭での展示に重点を置いています。

WeChatが初めてリリースされたとき、多くの人が不思議に思いました。テンセントにはすでに携帯電話用のQQがあるのに、なぜまたWeChatを作るのか？その違いは何なのか？

しばらくすると、モバイルQQを使っていた人がWeChatに切り替えていることに気づきました。なぜ人々は携帯電話でWeChatの方がQQよりも使いやすいと思うのでしょうか?

そしてある日、私はようやく少し理解しました。

モバイル QQ は Web 側の機能を移植したものですが、WeChat の機能はモバイル アプリケーションの特性 (音声入力、携帯電話の連絡先を介した友達の追加、QQ 友達など、シェイクなど) をより考慮しています。

そのため、APPを作成する際には、Web機能をそのまま移植するのではなく、モバイルアプリケーションのシナリオやデバイスなどの特性を十分に考慮して機能を設計し、機能の優先順位を決定する必要があります。

4. シンプルで使いやすい

ユーザーがウェブサイトを使用する場合、通常は大きな画面の前に座り、マウスまたはキーボードを使用します。一方、ユーザーがモバイル アプリケーションを使用する場合は、歩きながら、または混雑して揺れるバスの中で使用することがあります。したがって、モバイル アプリケーションは機能がシンプルで、フォントが十分に大きく (フォントが大きいほど、配置できるコンテンツが少なくなります)、操作がシンプルで (タッチ可能な領域を確保) なければなりません... つまり、4 つの単語で言えば、シンプルで使いやすいということです。

5. プラットフォームの特性と設計仕様を尊重する

モバイルアプリケーションは、Web 版とは異なり、十分な大きさのインターフェースと、十分に安定した使用環境を備えています。わかりにくい部分があったとしても、インターフェースにさまざまなガイドやプロンプトを追加できます。プロンプトがなくても、ユーザーは自分で試すことができます。

しかし、モバイル アプリケーションのインターフェイスは小さく、搭載できるコンテンツは非常に限られており (Web 上のページのコンテンツがモバイル アプリケーション内の多くのページに表示される可能性があり、ページ ジャンプの回数が多い)、使用環境は不安定で、操作も難しくなります。開発者が独自の「想像力」に従ってインターフェイスを設計すると、結果は悲惨なものになります。

幸いなことに、各プラットフォームの設計仕様を参照することができます。デザイン標準により、さまざまなアプリケーションの一貫性をより適切に維持し、ユーザーの理解を容易にし、学習コストを削減し、インターフェースをより使いやすくすることができます。製品設計者にとって、仕様を注意深く研究することは、より早く成長するのに役立つ学習プロセスでもあります。

かつては、プロダクトデザイナーはこれに縛られるべきではなく、大胆に表現すべきだと信じ、さまざまなプラットフォームのデザイン仕様を見ることを断固として拒否していたPMもいました。彼が設計したものは、確かに非常に「非主流」であり、ユーザーにとって理解するのが困難でした。たとえ本当に何らかの制約を打ち破りたいとしても、まずそれを十分に理解し、それに基づいてより良い突破口を拓くべきだと私は思います。

6. 「大きくて扱いにくい」UIスタイル

以前 Web 製品に携わっていたデザイナーの多くは、モバイル アプリケーションを初めて試すときに間違いを犯しがちです。インターフェイスは美しく見えるものの、モバイル アプリケーション インターフェイスのようには見えず、どう見ても Web の影が残ります。なぜでしょうか? デザイナーは小さいフォントを好む傾向があり、インターフェースがより洗練されて美しく見えるからです。

しかし、これはモバイル アプリでは機能しません。混雑して揺れるバスの中で、密集した小さなテキストを読まなければならないとしたら、ユーザーがどれほどイライラするか想像してみてください。ですから、この時点でデザイナーは考え方を変える必要があります。

モバイル アプリケーションの UI スタイルの特徴は何でしょうか? 簡単に言うと、次のようになります。

1. フォントははっきりと見える大きさでなければならない

2. レイアウトが非常にすっきりと簡潔になり、一貫性も増したため、読みやすくなりました。

　3. コンテンツが少なくなり、色も少なくなります…

これらはウェブデザイナーが嫌い、拒否するものかもしれませんが、プロフェッショナルで使いやすい製品を作るためには、時間内に考え方を調整する必要があります。

7.ユニークなスタイルと洗練されたインターフェース

モバイル アプリケーションのインターフェースは「馬鹿げていてばかげている」ように見え、設計者はプラットフォームの仕様によって「制約」されていますが、これによって多くの素晴らしいモバイル アプリケーションのインターフェースが生まれることを妨げるものではありません。

モバイル アプリケーションのインターフェイスは、Web インターフェイスよりも洗練された外観である必要があります。美しい Apple や Android のボディにシンプルで粗雑なインターフェイスが組み合わされたら、どれほど見苦しくなるか想像してみてください。

さらに、小さな画面ではインターフェースの欠陥が目立ちやすくなります。これらのハイエンドスマートフォンユーザーは、ためらうことなく、嫌悪感をあらわにしながらあなたのアプリを削除するでしょう。

したがって、モバイル アプリケーションに取り組んでいるデザイナーは、デザインの詳細にさらに注意を払う必要があることがよくあります。もちろん、これはまずプラットフォームの仕様と設計機能を理解し、それに基づいてブレークスルーを模索することに基づいています。モバイル アプリケーションは、実際にはデザイナーにより多くの遊びの余地を与えます。

絶妙なだけでなく、ユニークでもあります。最近のモバイル アプリ業界の競争は非常に激しく、ユニークなデザインによってアプリを簡単に目立たせることができます。

8. その他

モバイル アプリケーションには、入力方法、ランドスケープ モード、起動、読み込み、ジェスチャ、トランジション、アニメーションなど、Web バージョンとは異なる多くの機能があります。これらを 1 つずつ説明することはなく、設計仕様で関連するコンテンツを見つけることができます。

要約する

モバイル デバイスは持ち運びやすく、画面が小さく、操作が不便ですが、使用シナリオは豊富で多様です。これらの特性により、モバイル アプリケーションで複雑な機能や複雑なコンテンツを実行するのには適していません。多くの場合、より成功するモバイル アプリケーションを作成するには、Web ベースの考え方を捨て、モバイル デバイスの特性を十分に考慮し、問題について考えることに重点を置く必要があります。

最後に、モバイル アプリケーションは Web ベースの製品の付属物でも、Web ベースの製品のレプリカでもありません。モバイル アプリケーションは独自の活力を持つべきです。同じチームが Web 製品とクライアント製品を担当することは、プロフェッショナルで効率的な製品を作成することが難しくなるため、推奨されません。

著者の新浪ブログ: http://blog.sina.com.cn/legene

原題: ユーザー エクスペリエンス分析: Web からモバイル アプリケーションへのデザイン思考の変革

キーワード: ユーザー、エクスペリエンス スコア、Web、モバイル、アプリケーション、デザイン思考、コンバージョン、編集者、この記事、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化