ユーザーエクスペリエンス分析：アリババ国際ステーションのホームページ再設計の概要

Alibaba.com は、世界最大かつ最も影響力のある B2B 電子商取引プラットフォームであり、Alibaba グループの主力企業です。長い間、アリババ国際駅のビジュアルスタイルは、ビジネスの急速な発展に伴い、魅力的な変化を遂げておらず、ユーザーに提示されたデザインスタイルは依然として少し時代遅れのものです。ユーザーのニーズと会社の業務のプレッシャーにより、Web サイトのビジュアルの再構築が差し迫った問題になっています。エキサイティングな変化の時が来ました。

1. 現在のオンライン版の分析:

改訂前のアリババ国際駅ホームページ

上の写真は現在のオンライン版です。2009 年版と比較すると、全体的なデザイン スタイルと情報構造はあまり変わっていません。

ホームページでは Alibaba.com のビジネスの方向性や中核的な価値観が伝わっていません。

ビジネスの方向性が進むにつれて、ビジネスニーズを満たすことができなくなります。

デザインが古く、デザインスタイルが統一されていません。

2. ユーザー需要分析:

ユーザーのニーズを分析する前に、工場から出荷までの対外貿易B2Bビジネスにおける重要なリンクと、これらのリンクに対してAlibabaが提供する関連サポートサービスについて見てみましょう。

ユーザー調査と分析を通じて、現在のウェブサイト ユーザーは Alibaba.com が提供するコア サービスに対する認識が低いことが判明したため、このホームページの再設計の主な目的は、ユーザーを教育し、ウェブサイトのコア サービスを提供することです。

3. 情報導出 - フレームワーク構造

偉大な作家ウィリアム・ストランクとEBホワイトの「スタイルの要素」には、「テキストはシンプルであればあるほど、より強力になります。文には余分な言葉がなく、段落には余分な文があってはなりません。同様に、絵画には余分な線がなく、機械には余分な部品があってはなりません。」と書かれています。ホームページの情報を再編成し、長い間操作されていない冗長な情報を削除し、情報構造を再調整し、コアポジションでウェブサイトのコアバリュー情報を伝え、ユーザーが最も必要とする機能のみに焦点を当て、基本機能の20％を使用して80％のユーザーのニーズを満たします。

新しいホームページの最終的なワイヤーフレーム

Alibaba.com のメイン機能エリア。サイト全体の購入者向けのメイン機能の入り口です (トップ ナビゲーション、カテゴリ、検索)。

コアサービス、ウェブサイトサービスとユーザー教育、新規購入者向けの初期教育と価値デモンストレーション、既存購入者向けのプロセスガイダンスとウェブサイトサービスの紹介。

ウェブサイト運営領域（サブバナー運営活動、バーゲンバイ、GSD商品領域）

人気商品をプッシュし、購入者の閲覧行動に関連する商品を表示し、ウェブサイトのサイトマップとアプリケーションの拡張を行います。

4. 視覚的派生 - スタイル、色

新しい視覚スタイルの探求は主に以下の側面から検討される。

1. 色調、感触、明るい、柔らかい、または暗い。

2. アイコン、フォント、統一感、伝えられる感情。アイコンとフォントは連続している必要があります。

3. 文字の密度、余白、行間、文字間隔、ゆるさ

4. 構造: 整然としたもの、流れるようなもの、オープンなもの、またはクローズドなもの。

デザイントレンド

近年、Metro スタイルのシンプルさと直感性、Google の新しい UI エクスペリエンス、Android 4.0 システムのフラット化により、主要な主流インターフェースのスタイルはシンプルで、構造が明確で、情報が目立ち、ノイズが少ない傾向にあります。

新しいホームページのビジュアルキーワード

新しいホームページのビジュアルキーワード

新しい色を見つける

視覚的なキーワードを通じて新しい色域を見つける

配色を決める

配色を決める

青は精神性と知性の両方を表す色です。色彩心理学のテストでは、青を嫌う人はほとんどいないことがわかりました。明るい空色は希望、合理性、理想、独立などを象徴します。 ColourLovers.com が調査結果を発表したところによると、米国のトップ 100 ウェブサイトはロゴに 12 色をメインカラーとして使用している。その中で最も多くのウェブサイトが青を使用しており、赤が2番目にランクされています。

5. デザイン表示

ユーザーのニーズを情報構造に変換し、ユーザーグループの生活空間におけるウェブサイトのカラートレンドを発見しました。次に、理論をインタラクティブで視覚的な表現に変換し、新しい国際的なサイトデザインスタイルが誕生しました。

アリババ国際ステーション新ホームページ

一貫性と標準化

一貫性とは、製品インターフェースのさまざまなモジュールの外観、操作性、動作が似ていることを意味します。今回の改訂では、ユーザーにシームレスで快適なブラウジング体験を提供するために、Web サイトのコア ページも最適化しました。

アリババ国際ステーション新ホームページ_2

アイコンの再描画

古いバージョンのアイコンには 2 つの問題があります。1 つ目は、スタイルが統一されていないこと、2 つ目は、元のアイコンのテクスチャが重すぎることです。新バージョンのデザインでは、すべての新しいアイコンにフラット化処理を採用し、新しく描画されたアイコンを単色で塗りつぶすことで、新バージョンのシンプルさと新鮮さをよりよく反映できます。

アイコンの再描画

UIコンポーネントの再描画

シンプルさと統一性が体験の鍵となります。新しく描画された UI コンポーネントは、UI 要素の強度を可能な限り軽減するように努めています。新しく描画されたボタンは、CSS3 を使用して丸い角とグラデーションを実現しています。各コンポーネントには 2 ～ 3 つの異なるサイズがあり、ユーザーに可能な限り統一されたエクスペリエンスを提供します。

UIコンポーネントの再描画

6. 効果のフィードバック

時間とスペースの問題により、ホームページが990px​​グリッドシステムを使用する理由、レイアウトにおいてどのような論理パスが合理的かつ効果的であるかなど、この概要ではまだ分析されていない詳細が多数あります。後ほど引き続きシェアさせていただきます。新しいホームページが公開された後、新しいホームページに対してA/Bテストやユーザーアンケートを実施したところ、新しいビジュアルスタイルも大多数のユーザーに認知されました。アリババ国際駅の改修について帰国した華僑のコメントを引用する。新しいホームページのデザイン変更は、Alibaba International サイトのエクスペリエンスを最適化するための第一歩にすぎません。今後も段階的にサイト全体の他のページを最適化していく予定です。

アリババ国際駅UEDへの長期にわたるご注目とご支援に感謝いたします。ご提案やご意見がございましたら、こちらにご返信ください。皆様のご参加とご支援が、アリババ国際駅UEDの発展の原動力となります。

原題: ユーザーエクスペリエンス分析: アリババ国際駅ホームページの再設計の概要

キーワード: ユーザー、エクスペリエンス スコア、Alibaba、国際サイト、ホームページ、改訂、概要、Alibaba、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化