ウェブサイトデザイン分析: モバイルウェブデザインのための情報構成

モバイルデザインを始める方法

私たちの多くにとって、モバイル向けのデザインはまったく新しい機会です。しかし、デスクトップ Web デザイナーの場合、その経験をモバイル Web にどのように活かすのでしょうか。もちろん、既存のツール、経験、スキルの一部は依然として適用可能ですが、モバイル フォンでどのように整理し、レイアウトするかについて考え始める必要があります。

組織構造

モバイル インターフェイスのコンテンツとアクションを整理し始めると、明確なラベル付け、バランスのとれた幅と深さ、適切なメンタル モデルなど、いくつかの堅実な情報アーキテクチャの原則が依然として非常に重要です。ただし、モバイル Web デザイン エクスペリエンスを整理するには、次の要素を考慮する必要があります。

使用パターン: 人々はモバイル デバイスをどのように、またなぜ使用しているのでしょうか?

ナビゲーションよりもコンテンツを重視する

明確かつ集中力を保つ

モバイルデバイスに対応

私たちは皆、モバイル デバイス特有の制限と機能を理解しています。つまり、デスクトップ Web ページにも多くの固有の制限があります。したがって、デスクトップ製品を携帯電話に直接移植することは意味がありません。代わりに、モバイル デバイスの固有の特性を考慮し、ユーザーのニーズを満たす必要があります。

いくつかの専門的な分析の共通点を研究することで、インスピレーションが得られます。人々が通常どのように、そしてなぜモバイル デバイスを使用するのかという質問に対して、Josh Clark は著書「Touching People」の中で、次の 3 つの重要なユーザー行動について語っています。

「やるべきマイクロタスクがある」

「この辺りで何が起こっているのか見てみたい」

「ちょっと退屈だ。」

これは、モバイル ユーザーを「現在緊急」、「繰り返し」、「退屈」の 3 つの行動グループに分類する Google の調査結果と一致しています。

どのように説明されるかに関係なく、モバイルの使用には通常、次のインタラクションが含まれます。

検索/発見(緊急情報、位置情報ベース): 今すぐに回答が必要です。ほとんどの場合、自分の現在地に関する情報が必要です。

探索/娯楽（退屈、場所ベース）：時間をつぶし、退屈を和らげる娯楽を楽しみたい。

チェックイン/ステータス（反復/マイクロタスク処理）：重要なことは常に変更または更新する必要があり、常に把握しておきたい。

編集/作成（緊急の調整、マイクロタスク処理）：すぐに何かを完了する必要があり、待ちきれません。

上記の要因によって、人々が携帯電話を取り出す理由が決まります。したがって、これらの行動によって、人々のニーズを満たすためにモバイル エクスペリエンスをどのように構築し、整理すべきかが決まります。

たとえば、写真共有アプリ Flickr のモバイル Web エクスペリエンスには、4 つの主要なアクションがあります。アドレス帳に登録されている友達の最新のアクティビティや最新のアップロードにより、友達からの写真のアップデートがないか常に確認したくなります。また、同じ日に近くの人がアップロードした興味深いコンテンツや写真も提供されます。これは、高品質の写真を閲覧したい人にとって、退屈な時間をつぶす方法です。

Flickr のモバイル Web エクスペリエンスは、人々が携帯電話を取り出す理由と一致しています (少し堅苦しいですが)。

モバイル環境の使用環境は、当然のことながら、Web サイトの実際のニーズに合わせて調整する必要があります。モバイル エクスペリエンスはあらゆる場所で使用できるため、ユーザーがどこにいても役立つようにする方法を検討する必要があります。

これは、ユーザーが実際に Web サイト組織が提供するものを必要とする実際のユースケースについて考えることを意味します。以前、「ペルソナを使用して情報アーキテクチャを作成する」というタイトルの記事を書きました。これは、ユーザーがタスクを完了するプロセスを分析することで、Web ページ上に情報アーキテクチャを作成する方法について説明しています。これは実際には携帯電話ではさらに重要です。

ユーザーがスマートフォンを取り出す上記の動機を理解し、自社アプリが提供する機能と組み合わせることで、モバイル端末上でのユーザーの操作経路を減らすことができます。

ナビゲーションよりもコンテンツ

原則として、モバイル デバイスではコンテンツがナビゲーションよりも優先されます。株価、ニュース、スコアなどの最新情報を頻繁にチェックする場合でも、ローカルニュースをチェックする場合でも、検索で記事を探す場合でも、チャットを使用する場合でも、ユーザーはサイトの構造を確認するよりも、自分のニーズに素早く対応したいと考えています。

あまりにも多くのモバイル Web エクスペリエンス (以前の Flickr など) では、コンテンツ情報ではなく、長いナビゲーション リストから会話が始まります。モバイル ユーザーの時間は貴重であり、ダウンロードには料金とデータ トラフィックが必要になるため、ユーザーが必要な情報をすぐに入手できるようにすることが重要です。

Youtube ESPN のモバイル ウェブサイトではこれが実行されます。まず、現在地を知らせるシンプルなヘッドアップ表示から始まり、ナビゲーション オプションは 1 つのボタンに集約されます。残りのスペースには、いつでも視聴できる最新の情報 (ESPN) と人気のエンターテイメント ビデオが掲載されています。

ESPN YouTube モバイル ウェブ エクスペリエンスは、ナビゲーションよりもコンテンツ情報に重点を置いています。

ポジショニングと探索

しかし、ちょっと待ってください。コンテンツが常にナビゲーションよりも優先されるのであれば。

戻るボタンについて

多くのネイティブ iPhone アプリには、ナビゲーション バーに常設の [戻る] ボタンがあります。 Apple のモバイル デバイスにはハードウェアの戻るボタンがないため、多くのアプリでは上部のタイトル バーに戻るボタンがあります。

ただし、モバイル インターネット エクスペリエンスでは、どこにでも戻るボタンを設定する必要はありません。 Android、Blackberry、Windows Phone 7 などの多くのデバイスには、ハードウェアの物理リターン ボタンが搭載されています。

Androidフォンには通常、物理的な戻るボタンがあります

Apple の iPhone のブラウザでも、下部のツールバーに常設の「戻る」ボタンが含まれています。

iPhone ブラウザの下部のツールバーには戻るボタンがあります。ある Web ページの左上隅にある戻るボタンは冗長です。

モバイル Web エクスペリエンスに戻るボタンを追加すると、混乱が生じやすくなります。人々がウェブを使用するときに、「これらの 2 つの戻るボタンは同じ機能を果たすのか?」と尋ねます。したがって、モバイル Web ページを設計するときは、限られたスペースを占有する余分な「戻る」ボタンを配置しないでください。

要約すると、モバイル Web エクスペリエンスを整理する計画を立てる際には、どのユーザー行動がモバイル ライフのニーズに合致するかを検討してください。

モバイルの使用例。検索、探索/再生、チェックイン/ステータスの表示、編集/作成などの動作を考慮して、モバイルでの使用に合わせて Web サイトのアーキテクチャを調整します。

まずコンテンツに重点を置き、次にナビゲーションに重点を置きます。人々は、すぐに処理したい情報やタスクをより重視します。

関連性のあるナビゲーションが適切な場所に表示されるため、ユーザーはサイトへの没頭度が高まり、より深くサイトを訪問するようになります。

ミッションクリティカルなオプションを削減します。ナビゲーションは明確で、人々が本当に必要としているものに焦点を当て、緊急時や理想的でない状況でできるだけ早く人々を助けることにもっと配慮する必要があります。

人々が余暇に携帯電話をどのように使用するかを考えて、シンプルなデザインをさらに高く評価してもらえるように横向きでデザインすることを検討してください。

「モバイルファースト」の翻訳失敗を偲んで

元記事: http://www.zhangyq.com/first-element-of-the-interaction-design-of-mobile-terminal-scene/

原題: ウェブサイトデザイン分析: モバイルウェブデザインにおける情報構成

キーワード: ウェブサイト、モバイル、ウェブページ、情報グループ、方法、開始、私たちと一緒に、複数の人、ウェブマスター、ウェブサイトのプロモーション、収益化