モバイルWebデザインの使いやすさを向上させる10のヒント

モバイルWebブラウジングは、次の主要なインターネットプラットフォームに変わると予想されています。テクノロジーのおかげで手に収まるモバイル機器を利用して、ほぼどこからでもネットを閲覧することが今では簡単になりました。モバイルWebデザインにおけるユーザビリティの実装が不十分であると、人気のあるさまざまなモバイルWebサイトをブラウズするのが難しくなります。モバイルデバイスの設計は、標準的なWebサイトよりもシンプルで、タスクベースのタスクベースのものを使用する必要があります。.

あなたはあなたの主要なコンテンツのために利用可能なスペースの最小の最小値をどのように使うべきかについて考慮に入れるべきであり、モバイルユーザーにとっては依然として興味深いものです。大きな画像やフラッシュアニメーションは、サイトを遅くするので避けてください。機能性は、モバイルWebサイトのスタイルよりも重要であることを忘れないでください。あなたのウェブサイトがコーディングされておらず、適切にデザインされていない場合、それはある携帯電話ではより良く見え、別のものでは最悪、あるいは最悪で、まったく表示されないかもしれません。すべてのモバイルデバイスと互換性があるかどうかをテスト、検証、および確認する.

デスクトップまたはラップトップコンピュータだけでなくモバイルデバイスからもアクセス可能なWebサイトを作成するのに役立つように、モバイルWebデザインのサンプル画像とモバイルWebサイト版の直接リンクを考慮してください。.

1.画面の解像度を決めます

モバイルの世界には、さまざまな画面サイズや解像度からさまざまな形状まで、さまざまな設計上の考慮事項が含まれています。十分な画面幅と視聴者数のバランスをとることを目指してください。現在のモバイル機器のスペックを調べて、あなたの最良の判断をしてください。モバイル開発者にとって難しいのは、さまざまなプラットフォーム用にページを再作成することなく、さまざまな画面サイズにわたって適切に表示させる方法です。.

これは、2011年2月現在のモバイル機器で人気のあるWeb解像度のリストで、Uxbooth.comによって公開されている記事と一緒に提示されています。, モバイルWebデザインに関する考慮事項（パート2）：ディメンション, David Leggettによる。著者はレイアウト設計のためのディスプレイ寸法と解決策についてのいくつかの点を説明します.

2. Webページを細かく分割する

テキストの長い部分は読みにくくなる可能性があるため、複数のページに配置するとスクロールが一方向に制限されます。優先度の低いコンテンツを削除します。水平方向のスクロールがないように折り返すテキストの1列に固執する.

以下の例では、CBSニュースのモバイルWebサイトのバージョンでは、主要なニュースセクションのみが表示され、ニュース記事は小さな部分に分割されています。 Treehuggerは最近の記事やフルウェブサイトの機能のいくつかと最新のつぶやきで自分自身を提示しながら. どちらのサイトでも、ユーザーはテキストリンクをクリックして記事の残りの部分を表示します。.

CBSニュース

Treehugger

3.デザインを単純化する

単純さは使いやすさと同じです。彼らが問題なくサイト内を移動できるようにします。テーブル、フレーム、その他のフォーマットを含めないでください。パディングを使用する場合は、通常のWebページに使用するよりもはるかに少ない絶対最小値に保つことを忘れないでください。デスクトップコンピュータと比較して、モバイルWebサイトのリンクをクリックするほど、読み込み時間が長くなるため、待ち時間が長くなります。それには、コンテンツとナビゲーションのバランスを取りながら、Webサイトを削除して簡素化する必要があります。.

私たちの例では、Best Buyのモバイル版Webサイトには、コンテンツの階層レベルを切り捨てる最も重要な商品カテゴリのみがリストされています。 YouTubeのモバイルホームページには4つの最新スポットライト動画しか表示されませんが.

ベストバイ

YouTube

4.ウェブサイト全体を閲覧するためのオプション

モバイル訪問者が、フルバージョンのWebサイトに切り替えるためのリンクを提供して、デスクトップ版のサイトでしかアクセスできないその他のコンテンツや機能をユーザーが見つけて表示できるようにします。あなたの視聴者は確かに多くの垂直スクロールをしているので、彼らがページのトップにジャンプできるように 'トップに戻る'リンクで彼らを助けてください.

一例として、Ars Technicaは、見出しに配置されている標準Webサイトへのリンクボタンを持っています。 Shangri-LaのフルWebサイトへのリンクはフッターに配置されていますが.

アルステクニカ

シャングリラ

5.ナビゲーション配置

あなたのオーディエンスを知り、彼らが何を探しているのかを意識しましょう。彼らがあなたのサイトをどのようにナビゲートしたいのかを調べてください。ターゲットのモバイルユーザーがコンテンツの変更をすばやく確認したい場合は、ナビゲーションメニューをコンテンツの下に配置します。ページのコンテンツを見にくくするために、コンテンツと見出しを最初に表示する必要があります。特定のカテゴリにすぐに移動したいユーザーの場合は、ページの上部にナビゲーションを配置します。以下は、モバイルWebデザインで使用されるナビゲーション配置のさまざまなサンプルです。.

D&G

政治

毎日の星占い

6.テキストリンクを使う

メインのWebサイトでは、ちょっとしたフライアウトメニュー、ロールオーバー、その他の派手なガジェットを使用することがありますが、モバイルブラウザではそうは思わないでしょう。動的なページ要素とグラフィカルリンクはリソースを消費するので、ラベルの付いたテキストリンクを選択してください。.

別のリスト

7.選択したリンクを区別します

カーソルを下に動かすとページがスクロールされ、リンクが一度に強調表示されます。したがって、どの項目にフォーカスがあるのかをユーザーに明確にアドバイスすることが重要です。これは、リンクとボタンのフォントと背景色を変更するか、リンクの周囲にパディングを追加してクリック可能領域を約44x44ピクセルに拡大することで実行できます。 Geek SquadとDieselはクリック可能なテキストに大きなフォントを使用しました.

オタクチーム

ディーゼル

8.バランスリンク

各ページのダウンロードは時間とシステムリソースを消費しますが、後者は不足しています。そのため、サイトの訪問者に、求められている情報にアクセスするために多数のページを掘り下げさせないでください。各ページのリンク数とサイトの深さのバランスをとる.

Flickr

Twitter

9.ユーザーのテキスト入力を減らす

モバイル版のWebサイトにテキストを入力するのは困難です。代わりにラジオボタンまたはリストに置き換えて、必要なものから簡単に選択できるようにします。モバイルユーザーは従来のキーボードやマウスにアクセスできないことを忘れないでください。 URLが短いほど、長いURLを入力するのは単調なので、より良いです。.

以下のサンプルでは、Fedexはチェックリストとドロップダウンメニューを利用しました。 Tumblrはあなたがドロップダウンメニューを使用してあなたの言語を選択しましたが.

フェデックス

タンブラー

10.ポップまたはリフレッシュなし

モバイルブラウザは通常ポップアップをサポートしません。そして彼らがそうしたならば、彼らは飛び込むための非常に狭いスペースを持っているでしょう。予期しない結果を避けるためにそれらを使用しないでください。また、デバイスの制限されたメモリがいっぱいになるのを防ぐために、ページを定期的に更新しないでください。ユーザーにコンテンツを更新させる.

手短に

クリエイティブになり、モバイルWebデザインを新しい方法で適用します。あなたのコンテンツを十分に魅力的で使いやすいものにしてください。必要なときに、必要なものをユーザーに提供します。ユーザーは、自分が探しているものをモバイルWebで見つけるためだけに、サイトを詳しく調べたいとは思いません。.

あなたは本当にあなたを刺激した任意の好ましい携帯サイトを持っていますか？モバイルWebデザインのヒントをいくつか教えてください。私たちに知らせて!

参考文献

レスポンシブWebデザイン （alistapart.com）
あなたのサイトをモバイルフレンドリーにする （thinkvitamin.com）
W3C mobileOKチェッカー （w3.org）
iPhoneシミュレータ