優れたモバイルプロジェクト-それは何ですか?

モバイルインターネット、3Gなどの開発への関心の高まりに照らして、近い将来、PDAと携帯電話に焦点を当てたWebプロジェクトの爆発的な成長が期待できます。 モバイルサイトと「大規模ウェブ向け」サイトの開発へのアプローチは完全に異なっていることに留意してください。 これは、モバイルWebへの切り替え時のインターフェースの最適化、レイアウト、ナビゲーションなどの大きな違いを意味します。 以下では、モバイルデバイスのユーザーの生活を少しでも良く、より楽しくするのに役立つ主なポイントを強調しました。





1.情報を正しく表示します。

ユーザーの観点から、サイトのページのコンテンツ全体を3つのグループに分けることができます。

1.コンテンツ-ユーザーがページにアクセスした情報(一般にサイトにアクセスしました)-テキスト、画像、ビデオへのリンク、またはその他のリソースなど。

2.ナビゲーション-サイトの制御要素-サイトの他のページへのリンク、フォームのフィールドおよびボタン。

3.背景-ユーザーにとって二次的な二次的な価値があるか、まったく関係ないもの-サイトヘッダー、セクション見出し、広告ユニット、カウンター、著作権、デザイン要素。




画面サイズによって課される制限のため、ユーザーは一度に少量の情報しか見ることができません。 これは、モバイルインターネットと彼の兄の間の主な違いの1つであり、特別な注意が必要です。 サイトの各ページは、コンテンツおよび重要なナビゲーション要素への最速、最も簡単で便利なアクセスを提供するように設計する必要があります。 次の点に注意する価値があります。

•ページのヘッダーの高さが低いほど(妥当な範囲内)、より良い。 目的のコンテンツの代わりに、ページが読み込まれるたびに画面の3分の1に同じ画像が表示されるのはひどいです。 最適なオプションの1つは、ヘッダー用に2つのオプションを作成することです。メインページにはフルサイズ、それ以外のユーザーにはできるだけ狭い(15-25px)です。

•オブジェクトがページの上部に近いほど、ユーザーがオブジェクトにアクセスしやすくなります。 つまり、情報を重要度の高い順に並べるという原則を順守する必要があります。まず、ユーザーがページにアクセスしたコンテンツ、次に主要なナビゲーション要素、次に残りのコンテンツの順です。

•情報をコンパクトに保ちます。 大量の大きなフォントや、線とオブジェクト間の余分な垂直方向の隙間を避けてください。

•リンクと見出しに短い名前を付けるようにしてください。 それらが1行に収まる場合-これは、見た目の良いタッチです。

•不要なグラフィックスや二次要素で設計をオーバーロードしないでください。




2.ユーザーアクションを最小限にします。

開発のこの段階でモバイルデバイスを使用してWebサーフィンをしたり情報を入力したりすることは、いくつかの不便な点に関連していることを理解しておく必要があります。 これらには、シーケンシャルナビゲーション(ページの最初の要素から最後への段階的なカーソル移動)、キーボードからの不便なテキスト入力、マルチウィンドウの欠如などが含まれます。

•ユーザー入力を保存し、次回はデフォルトとして置き換えます。

例:承認フォームでの最後のユーザーのログインの代用、検索設定の保存など。

•できるだけ簡単に登録してください。 本当に必要な場合にのみ要求します。

•アクセスキーを積極的に使用します。 同じアクセスキーに同じアクションを割り当てます。たとえば、[0]をメインページへのリンクにどこでもリンクさせ、[4]と[6]でページをページングします。

•アクションを完了するために必要なクリック数を最小限に抑えるようにします。

例:よくある間違いは、「登録完了」、「メッセージが送信されました」などのテキストのみを含む「中間」ページの作成です。 [続行]リンク。 ほとんどの場合、これらのメッセージはコンテンツとともに次のページにすぐに表示されます。

•ユーザーにサービスをパーソナライズする機会を与えます。 「自分用」に設定します。 ポスターや天気予報を提供する場合は、メインページに彼が必要とする映画や都市を載せるようにします。 何かにコメントする機会がある場合-ページに表示するコメントの数(および出力の順序)を指定する機会を与えます。 機能と設定を分離します。 追加の要素でページをオーバーロードしないように、個別のセクションで設定を行います。




3.トラフィックを最小限に抑える

GPRSインターネットアクセスは依然として遅すぎ、高すぎます。 ユーザーのお金と時間を節約するには:

•アップロードする画像のサイズを必ず最適化してください。 理想的には、ユーザーの画面サイズに応じて画像オプションを選択します。

•サイトのライトバージョンを作成します-セカンダリイメージ(アバターなど)およびヘッダーを最大限に削減します(またはヘッダーをまったく使用しません)。

•HTMLコードを整理し、不要なスペース、コメントを削除し、長いID、名前、クラス名を避けます。




4.有効性を確認します

ほとんどの標準的なモバイルブラウザは、受け取るリソースの正確さを非常に要求しています。 これは次のことを意味します。

•プロジェクトページはXHTML Mobile仕様に準拠する必要があります( validome.org検証に使用できます)

•CSSは有効でなければなりません(http://jigsaw.w3.org/css-validator/)

•レイアウトはできるだけシンプルにする必要があります(「ストレッチ」、単一列、クロスブラウザ、divの使用も同様)。

•一部のデバイスによって課される制限を遵守してください。

例:一部の旧式の電話は、40〜50 kbを超えるページではうまく機能しないか、特定の文字数を超えるページを表示すると「遅くなります」。

例:ほとんどのMotorola電話はタグを正しく処理しません-太字は読めない四角に置き換えられます)。



All Articles