UXデザイン10の事柄旅行のウェブサイトはあなたを教えることができます
あなたがあなたの休暇を計画している間あなたがまだ専門的に成長することができるということはあなたの心を超えましたか?人気のある旅行ウェブサイト、予約とチェックアウトのフォーム、旅行プランナーとホテルの時刻表はすべてに優れた情報源です。 ユーザーエクスペリエンスデザインの分野であなたの知識を強化する.
最適な場所、ホテルを選択し、旅行のスケジュールを設定する際には、何がうまくいくか、何がうまくいかないか、何があなたを刺激し、何がすぐに別のサイトにジャンプするかに注意を払うことをお勧めします。. あなたの反応、喜び、そして嫌悪感は、すべてサイトのユーザーエクスペリエンスデザインの効率の大きな特徴です。.
この記事では、人気の旅行サイトからあなたが拾うことができるユーザーエクスペリエンスについて10のレッスンを学ぶことができます.
UIとUXの違い
UXはUIではありません。 書かれていない 法律。 Webサイトの使いやすさについて読むときは、そのユーザーインターフェース(UI)について考える必要があります。ユーザーインターフェースは 様々な視覚的要素のセット あなたの訪問者があなたのウェブサイトとやり取りするときに使う(クリック、ホバーオン、タップ)メニュー、ボタン、アイコンなど.
ユーザビリティは、ユーザインタフェース(UI)を説明する品質です。ユーザビリティは、次のようなUIの効率を示します。 ウェブサイトを使うのがどれほど簡単か (学びやすさ), ユーザーが指定された目標を達成する速度 (効率), どれほど簡単に彼らは彼らの記憶を思い出すことができます サイトのしくみ(記憶)について それが使用することはどのくらい楽しいですか (ユーザー満足度).
ユーザビリティは、ユーザエクスペリエンス(UX)と呼ばれるより複雑な概念の1つの側面です。ユーザー体験 ユーザーのエクスペリエンスに影響を与えるすべてのものを含みます - 否定的にも肯定的にも。優れたUXは見込み客のあらゆるニーズを満たします - 優れたユーザビリティと他の多くのこと.
ユーザーエクスペリエンス調査会社Nielsen-Norman Groupによると、
1.ユーザにスタート地点を与える
まず第一に、あなたがする必要があります あなたの訪問者に彼らが始めることができる場所からの場所を与える. これは、サイトへのメインの入り口であるだけでなく、ユーザーが検索エンジンから来たときには、ほとんどの場合クリックされるホームページです。.
だからあなたはする必要があります ホームページに魅力的なコンテンツとレイアウトを提供する あなたの訪問者をあなたのサイトに留めたい場合.
Booking.comのホームページは、顧客のニーズをよく理解していることを証明しています。考えてみてください。旅行サイトで何をしたいですか?あなたはどちらに行きたいかを知っていて、できるだけ早く可能性を調べたいと思うか、あなたはあなたの旅行の場所について確信がなくてそしていくらかのインスピレーションを必要とします.
Booking.comは、 左側の総合検索フォーム 彼らの将来の旅行について確信している人のためのそのホームページの。訪問者は、無関係なコンテンツを閲覧する時間を無駄にする必要はありません。これは彼らに増加した決意と高められた自信を与えます.
画面上の折り目上の残りのスペース あまり決心のつかないものに多くのインスピレーションを与える:人気のある場所(アブダビ、ニューヨーク、ドバイ)の3つの大きな写真が提案を提供しています。 “予約したばかり” tripsは他のユーザーが現在何をしているかを示します、そして無料キャンセルポリシーに関して見込み客を確実にする小さなセクションさえあります.
Booking.comのホームページでは、誰もがスクロールバーに触れる前にサイトに移動するために必要なインセンティブとポジティブな感情を得ます.
2.ナビゲーションをわかりやすくする
あなたがユーザーをあなたのサイトにとどめさせたいなら、あなたは彼らに明白で使いやすいナビゲーションを提供する必要があります.
TimeOut.comのナビゲーションはスマートなホステスのようなものです。必要なときに訪問者に貴重な助けを提供しますが、迷惑にはなりません。下の写真を見てみると、ナビゲーションシステムには 4つの異なる要素:大きくて、わかりやすい検索バー、明確に定義された項目を含むメインメニュー(シティガイド、映画、音楽、芸術と文化、飲食;会社概要、タイムアウトショップ)、うまく設計されたブレッドクラムバー、サイドバー最も人気のある都市のリスト.
TimeOutはそのような直感的な方法でナビゲーションシステムを設計し、訪問者にサイトを探索するさらなるインセンティブを与えます。すべてのサイドバー項目の横にある小さなサムネイル 視覚的なキーを与える, 飲食物の見出しの下の短い説明 訪問者が正しい場所にいることを確認します。, ブレッドクラムで移動するのが非常に簡単になり、一番上の検索バーでは、現在のものに飽きているユーザーが次の場所に移動することができます。.
各要素は他の要素をサポートします - 素晴らしいUXデザインの明確なサイン.
3.インパクトの強い画像を使用する
下のスクリーンショットは、トリップアドバイザーのレストランプロフィールページの1つです。ストックフォトはユーザーエクスペリエンスを良くするものではないことを既に読んでいると確信しています。.
ストックフォトの代替手段は、ユーザーに強い感情を呼び起こすインパクトのある画像です。そして私達全員はそれを知っている 感情の増大は顧客ロイヤルティの向上につながる.
旅行ウェブサイトは通常すべて高品質の写真を使用しますが、トリップアドバイザーはそれを次のレベルに引き上げます。 ユーザーに自分の写真を追加するように促す 各レストランへ。このようにしてTripAdvisorはそのコンテンツを 通常はもっとおもしろいユーザー生成画像 専門家によって撮影された写真よりも平均的な旅行サイトの訪問者のため.
ピアプレッシャーは、結局のところ最も強い動機の1つです。トリップアドバイザーも ビジュアルコンテンツを新鮮に保ちます ユーザーが撮影したインパクトのある写真を追加する.
4.シンプルにする
通常は少ないほど多くなるので、物事を単純に保ち、関連性のある情報のみに焦点を当てることを常にお勧めします。世間は気を散らすものでいっぱいで、不必要な毛羽立ちから彼らを救えば、あなたの訪問者は確実に感謝するでしょう.
“複雑にしないでおく” Lonely Planetがそのホームページで従っていたと思われるUXの原則です。の 最も重要なトピック ユーザーが興味をそそるのは 魅力的なサムネイルのきちんとしたグリッドに配置された による支援 1〜2語の長い見出し.
LonelyPlanetのホームページは、サムネイルがナビゲーションとしても機能するため、ユーザーエクスペリエンスの面で特にスマートです。 わかりやすいビジュアルキーをユーザーに提供する.
グリッドはレスポンシブであるため、すべてのビューポートで機能します。. モバイルとタブレットのサイズでは、サムネイルはモバイルアプリのアイコンのように見えます。 これはすべてのモバイルユーザーにとって使い慣れたレイアウトであり、親しみやすさも訪問者に安心感を与え、サイトとの関わりを高めるものです。.
5.動詞を使う
あなたはたぶんキャリアサイトからの行動動詞に精通しています。行動動詞は、求職者に履歴書の閲覧だけでなく、Webを介して閲覧しているWebサイトの訪問者も参加させます。.
人気の宿泊施設を共有するソーシャルネットワーク、AirBnBはそのサイトの至る所でそれらを使用しています. 属する どこでも, 家賃, リスト あなたのスペース, 発見 場所, 探検する 世界, 見る 人が旅行している場所, シェア あなたの経験など.
アクション動詞は非常に効率的です。 ユーザーをパッシブ状態からアクティブ状態に移行する. ポジティブな体験は常にユーザーに代わっての活動を必要とします。それがアドベンチャーパークがとても人気がある理由です.
結局あなたはもっと何を覚えていますか?あなたが自分でしたこと、あるいは本で読んだことのどれか?見る? 相互作用もあなたを引き付ける. サイトのユーザーエクスペリエンスを向上させたい場合は、適切な場所にアクション動詞を使用することを躊躇しないでください。.
6.フォームを合理化する
として 余りにも複雑な形態は頻繁に即放棄をもたらす あなたのユーザの経験のためにあなたがすることができる最も賢いことはそれがあなたのサイトの上で可能な限りフォームを合理化することです。合理化の下でどういう意味ですか?
あなたが彼らのホームページでPriceline.comの普遍的な検索フォームを覗くならば、あなたは素晴らしい例を見ることができます。 Pricelineの検索フォームは 便利な水平タブナビゲーションセクション内に隠れています.
タブには、会社が関わっている5つの分野(ホテル、フライト、車、バケーションパッケージ、クルーズ)に関連する5つの異なる検索フォームが含まれています。.
ここで本当に素晴らしいことは、ユーザーが興味のないものに煩わされる必要がなく、必要な検索フォームに直接ジャンプできることです。だから彼らは 追加のデータフィールドに負担をかけない, フォームフィールドは絶対最小値に保たれます。 効率の向上、煩わしさの軽減、および素早い理解 - これまでで最高のユーザーエクスペリエンス.
個人的な話で影響を与える
実際に体験しているように、GoBackpacking.comのホームページで、個人的なストーリーをスマートに使用してユーザーエンゲージメントを高めることができます。.
現実の人々の冒険は、過剰に洗練されたマーケティングの破綻よりも常に興味深いものです。. あなたの訪問者は、彼らがあなたの競争相手のサイトで読むことができるのと同じ厄介な決まり文句を読みたくありません - 結局のところ彼らは彼ら自身で同じ低インパクトの漂白剤を生成することさえできます.
レビュー、評価、監督されたコメント、モデレートされたコメント、ステータス、ブログ投稿、個人的なストーリー、おすすめは、すべてあなたのサイトに個性を与えます あなたの訪問者が感情的につながることができる高品質の情報を紹介する.
GoBackpackingは、ホームページにユーザーの個人的なストーリーを表示し、訪問者がそれを知らなくてもすぐにサイトのコンテンツにアクセスできるようにします。.
8.関連製品を含める
関連性があり、推奨されている人気のある製品ウィジェットがすべての大手eコマースプレーヤーによって使用されているので、旅行サイトでもそれらを活用していることは大きな驚きではありません。.
HotelTravel.Comは、非常にトリッキーで効率的な方法でタスクを解決します。その推薦エンジン 訪問者が探す場所を指定します - 私たちの場合は香港です - そしてもう少し表示します 他のユーザーが推奨するホテルのオプション. 関連ホテルもお勧めのもの、常に良いアイデアです2イン1ソリューションです。.
HotelTravel.Comのデザイナーはもう1ステップ踏み込んだ 関連製品を便利なアコーディオンに それはユーザーがすることを可能にします グループのおすすめ 4つの異なる基準(ベストバリュー、ベストサービス、ベストルームスタンダード、ベストロケーション)によると.
ウィジェットを視覚的に面白くするために、最新のレビューからの評価、価格、小さなサムネイル、および短い引用も含まれています。 訪問者に最大限の助けを与える どの宿泊施設が自分のニーズに最も適しているかを判断する.
9.利点について話す
彼らがあなたのサイトで得ることができる利益を訪問者に示すことは彼らを眠りにさせる乾燥した事実で彼らを煩わせることより常にユーザーフレンドリーです.
Booking.comのホームページで、このUX設計原則の賢い活用法を見ることができます。画面の右側には、あなたが見ることができます “Booking.comを使用する理由?” 含むセクション 6つの利点 それはすべて平均的な旅行者の価値(低価格、選択のボードの範囲、インターフェースの使いやすさ、人口の多いレビューシステム、質の高いカスタマーサービス、そして年中無休24時間の可用性)に従っています.
もちろん、これらの値はもっと詳しく書かれています。 魅力的な方法 来て リンク付き 見込み客が先に進むことができる場所。の “Booking.comを使用する理由” ウィジェットは実際には 正規版の拡張バージョン “特徴” セクション 平均的な中小企業のWebサイトですが、多くのサポート要素が含まれています.
の カラフルなアイコン、強調表示されたリンク、および特定のデータ (といった “世界中で701,118軒のホテル”すべてのユーザーに、信頼できるプロフェッショナルなWebサイトにアクセスしているとユーザーに信じさせる。の 人気の場所のショーケース 左側のシドニーからダブリンまで、そしてサードパーティのレビューセンターの小さなウィジェットはすべて経験をサポートし信頼を築きます。.
10.社会的証明を提供する
ソーシャルプルーフについて人々が話すとき、それらは通常、フェイスブックLikeboxのようなソーシャルメディアウィジェットを意味します。 他の形の社会的証明の働き.
社会的証明の概念は、人々が何かをする可能性が高いという心理的原則に基づいています 周囲の人に会ったら 同じことをする. 外部検証は大きな動機です 私たちのほとんどにとって、賢明なデザイナーは、訪問者が彼らの仲間のユーザーの行動を繰り返すのを奨励するような方法で彼らのサイトに社会的証拠を組み入れます.
トリップアドバイザーで魅力的 ソーシャルコンテンツは便利なタブナビゲーションに組み込まれています ホテルレビュー、ユーザーが作成した写真、フォーラムの3つのセクションがあります。ウィジェットのタイトルは “旅行者が言っていること” どちらですか 平均的な字幕よりもぎこちない 商業用サイトそれゆえ、それは訪問者の目をすぐにとらえます.
ホテルレビューセクションは、スマートな方法で設計されています 内容を要約しやすくする:小さなプロフィール写真とレビューを行っているユーザーのランク、レビューを受けたホテルの名前、レビューからの短い引用、およびサイトの一般的なデザインに適した評価のアイコン.