検索
ホームページウェブフロントエンドhtmlチュートリアル優れたモバイル Web サイトを構築するにはどうすればよいでしょうか? Google の専門家が教える 25 のテクニック (5) [転送]_html/css_WEB-ITnose

?21. 商品画像は大きな画像表示をサポートする必要があります

顧客は購入する商品を見たいと考えています。小売 Web サイトでは、ユーザーは詳細を確認できるよう、より高解像度の製品画像を表示することを望んでいます。Web サイトが大きな製品画像の表示をサポートしていないと、ユーザーは間違いなく非常に失望するでしょう。

重要な要素: 製品写真などの重要な画像には、高品質のクローズアップ画像を提供する必要があります。

? 22. どの画面の向きで Web サイトにアクセスするのが最も快適かをユーザーに通知します

ユーザーは、画面の向きを切り替えるように指示するプロンプトがない限り、固定された画面の向きで Web サイトにアクセスする傾向があります。ビデオを視聴するとき)。垂直方向と水平方向の両方の画面方向を念頭に置いて Web サイトをデザインし、ユーザーに最適な画面方向への切り替えを促すことができます。ただし、画面の向きをどのように切り替えるかに関係なく、重要な「行動喚起」コンテンツが Web サイト上に明確に表示されるようにする必要があります。

重要なポイント: 最適な画面の向きについてユーザーとコミュニケーションをとることができますが、重要な CTA コンテンツが目立つようにしてください。

? 23. ユーザーが 1 つのブラウザ ウィンドウで Web サイトにアクセスし続けられるようにします

スマートフォンでウィンドウを頻繁に切り替えるのは非常に面倒で、ユーザーが元に戻す方法を見つけられない可能性があります。あなたのウェブサイトに。したがって、ユーザーが別のウィンドウで Web サイトを閲覧できるようにしてください。特に、「行動喚起」コンテンツを新しいウィンドウで開かないでください。

重要な要素: 「行動喚起」コンテンツが別のブラウザ ウィンドウに表示されていることを確認します。

? 24. 「フル サイト」というラベルは避けてください

「フル サイト」オプションを見たユーザーは、「モバイル サイト」が Web サイトの圧縮された合理化されたバージョンであると考え、最終的に選択します。をクリックして「サイト全体」に入ります。デスクトップ Web サイトとモバイル Web サイトのコンテンツが一致していても、ユーザーに誤解を与える可能性があるため、「フル Web サイト」の代わりに「デスクトップ Web サイト」タグを使用できます。

重要な要素: ユーザーに簡単な Web サイト切り替えエクスペリエンスを提供するには、「フル サイト」ラベルの代わりに「デスクトップ サイト」ラベルを使用します。

? 25. ユーザーの住所情報が必要な理由を知っておく必要があります

ユーザーは通常、なぜ位置情報を尋ねるのか知りたいと考えています。たとえば、ユーザーは旅行 Web サイトで別の都市のホテルを予約しましたが、Web サイトではユーザーに現在の地理的位置情報の提供を求められるため、違和感を感じました。したがって、Web サイト上の地理的位置の列をデフォルトで空にし、ユーザーが自分で選択できるようにするか、「近くを探す」などの明確な「行動喚起」操作をユーザーに提供する必要があります。

重要な要素: ユーザーの住所情報がなぜ必要なのかを理解し、その情報がユーザー エクスペリエンスにどのような影響を与えるかを理解する必要があります

上記 25 点に対して、Google のユーザー エクスペリエンス研究者である Jenny Gove 氏は次のように述べています。最も重要な 4 つの提案は次のようにまとめられています:

? 1. 目を引く検索バーを追加します

モバイル Web サイトに検索バーがまだない場合は、すぐに検索バーを追加する必要があります。 「モバイル端末では、人々は必要なものをすぐに見つけられることを望んでいます。そのため、検索バーに対する需要が高いことが分かりました。それをホームページに配置することが最善であるとゴーブ氏は説明しました。」

もちろん、Google が開始した研究プロジェクトとして、Web サイトの目立つ場所に検索バーを設置することが推奨されるのは驚くべきことではないようです。しかし実際には、Google は、必要な情報をすぐに見つけられるため、ユーザーは実際には検索バーの使用を気にしていないことを発見しました。

? 2. 大きなフォームを小さな部分に分割します

Google では、多くのウェブサイトがユーザーに住所情報 (商品の発送時に必要)、クレジット カード番号 (注文の支払い時に必要) などのさまざまな情報の提供を求めることを発見しました。 )必要)など。この情報を入力する場合、Web サイトでは多くの場合、さまざまな入力ボックスを備えた長いフォーム ページが提供されますが、これは非常に複雑です。したがって、これらの表をより小さく理解しやすい塊に分割できれば、より良いかもしれません。

さらに、Gove 氏は、フォームに記入する手順を示すのが最善であると提案しました。そして、記入する際に、入力内容が正しいかどうかをリアルタイムに検証できることがベストです。たとえば、ユーザーが郵便番号を入力する際に​​、リアルタイムで検証できます。

? 3. ユーザーが匿名で閲覧できるようにします

一部のショッピング Web サイトでは、購入するためにユーザーの登録またはログインが必要です。一部の Web サイトはさらに誇張されており、閲覧する前に登録またはログインが必要です。どちらのアプローチも完全に間違っています。

Gove 氏は、「小売 Web サイトを作成する場合、ユーザーが登録済みアカウントを持っていない場合は、ゲスト ID を提供できます。確かに、販売業者はユーザーが登録してログインできることを望んでいますが、それは可能です」と述べています。

4. デバイス間の便利な切り替えをサポート

いつでもどこでもモバイル端末を使用しているため、使用中に何かによって中断される可能性が非常に高くなります。 . 上の仕事に行きました。

最も悲惨な経験は、ユーザーがデバイスを切り替えたときに、以前のエクスペリエンスを継続できなくなることであると考えています。ユーザーがアクセスした URL をコピーして貼り付けるのは非常に面倒です。

最善の解決策は、モバイル Web サイトにショートカット ボタンを提供し、現在のリンクやアクセス コンテンツをユーザー自身のメールボックスに自動的に送信し、ユーザーが後でどのデバイスでログインしても、独自の使用を継続できることです。経験。

最後に、ゴーブさんは、Google がユーザー調査を通じてモバイル Web サイト構築の問題点を明確に特定したと感じています。多くの問題はあるものの、これらの問題を特定でき、それらの問題を書き留めることができるのは良いことだと感じています。 people 、つまり、人々にもこれらの問題を解決する能力があるということです。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLの汎用性:アプリケーションとユースケースHTMLの汎用性:アプリケーションとユースケースApr 30, 2025 am 12:03 AM

HTMLは、Webページのスケルトンであるだけでなく、多くのフィールドでより広く使用されています。1。Webページ開発では、HTMLはページ構造を定義し、CSSとJavaScriptを組み合わせて豊富なインターフェイスを実現します。 2。モバイルアプリケーション開発では、HTML5はオフラインストレージおよびジオロケーション機能をサポートしています。 3.メールやニュースレターでは、HTMLは電子メールの形式とマルチメディア効果を改善します。 4。ゲーム開発では、HTML5のCanvas APIを使用して2Dおよび3Dゲームを作成します。

HTMLドキュメントのルートタグは何ですか?HTMLドキュメントのルートタグは何ですか?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesStop-levellementThateChationCothercontent、ProperDocumentsTurcuteRuctureAndBrowsingを保証します。

HTMLタグと要素は同じものですか?HTMLタグと要素は同じものですか?Apr 28, 2025 pm 05:44 PM

この記事では、HTMLタグは要素を定義するために使用される構文マーカーであり、要素はタグやコンテンツを含む完全なユニットであると説明しています。彼らは協力してWebPages.Characterカウントを構築するために協力します:159

< head>の重要性は何ですかおよび< body> HTMLのタグ?< head>の重要性は何ですかおよび< body> HTMLのタグ?Apr 28, 2025 pm 05:43 PM

この記事では、< head>の役割について説明します。および< body> HTMLのタグ、ユーザーエクスペリエンスへの影響、およびSEOの影響。適切な構造化により、ウェブサイトの機能と検索エンジンの最適化が強化されます。

< strong>< b>の違いは何ですかタグと< em>< i>タグ?< strong>< b>の違いは何ですかタグと< em>< i>タグ?Apr 28, 2025 pm 05:42 PM

この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。

HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。Apr 28, 2025 pm 05:41 PM

記事では、UTF-8に焦点を当てたHTMLでのキャラクターエンコーディングの指定について説明します。主な問題:テキストの正しい表示を確保し、文字化けされたキャラクターの防止、SEOとアクセシビリティの強化。

HTMLのさまざまなフォーマットタグは何ですか?HTMLのさまざまなフォーマットタグは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、Webコンテンツの構築とスタイリングに使用されるさまざまなHTMLフォーマットタグについて説明し、テキストの外観に対する影響とアクセシビリティとSEOのセマンティックタグの重要性を強調しています。

「ID」属性とHTML要素の「クラス」属性の違いは何ですか?「ID」属性とHTML要素の「クラス」属性の違いは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、HTMLの「ID」属性と「クラス」属性の違いについて説明し、一意性、目的、CSS構文、および特異性に焦点を当てています。それらがWebページのスタイリングと機能にどのように影響するかを説明し、のベストプラクティスを提供する

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません