I am a big fan of Uniqlo because they sell innovative clothing that is great quality at great prices. So when all their stores closed during the “Covid-19 Circuit Breaker” in Singapore, I turned to their website and was surprised how difficult it was to find the item I was looking for.

我是優衣庫(Uniqlo)的忠實擁護者，因為他們出售質優價廉的創新服裝。 因此，當他們所有的商店在新加坡的“ Covid-19 Circuit Breaker”期間關閉時，我轉向他們的網站，并驚訝地發現要尋找的商品有多么困難。

The homepage is extremely cluttered, which is in contrast to their clean and modern branding. So in this article, I want to show how I would design a more modern looking homepage for them and the thinking behind it.

主頁非常混亂，這與其簡潔現代的品牌形成鮮明對比。 因此，在本文中，我想展示如何為他們設計外觀更現代的首頁以及其背后的思路。

問題 (The Problem)

We design to solve problems, so let me highlight the problems that I am trying to solve with this exercise:

我們旨在解決問題，因此，讓我重點介紹一下通過本練習嘗試解決的問題：

• The homepage is loooooong. See for yourself (uniqlo.com) and compare it to gap.com or nike.com, for example. It is even longer on mobile. Why is this a problem? (1) It results in a slow loading website (needs more than 11 seconds). (2) From my experience doing heatmapping, nobody will scroll that far, which means about 50% of the content will never be seen by human eyes.

  主頁是loooooong 。 自己看看( uniqlo.com )，然后將其與gap.com或nike.com進行比較。 在移動設備上甚至更長。 為什么這是個問題？ (1)這導致網站加載緩慢(需要超過11秒)。 (2)根據我進行加熱貼圖的經驗，沒有人會滾動到那么遠，這意味著約有50％的內容不會被人眼看到。

• “Above the fold” (the screen you see when you open the site without scrolling), is visually too noisy, which leaves the user wondering where they should go (Hick’s UX Law). Below I annotated a screenshot to show some UX no-nos: The main issue here is “hierarchy” which refers to how much weight you give each element on the page as a designer. There should be a cascading structure, where you have one big element that you want to highlight and then other elements in smaller sizes or different colors. Apple (screenshot below) does that to perfection.

  “折疊之上” (在不滾動的情況下打開網站時看到的屏幕)在視覺上太嘈雜，使用戶想知道應該去哪里( 希克的《用戶體驗法》 )。 下面，我為屏幕快照添加了注釋，以顯示UX的一些錯誤：此處的主要問題是“層次結構”，它是指您以頁面設計師的身份給頁面上的每個元素分配多少權重。 應該有一個層疊的結構，其中有一個要突出顯示的大元素，然后有其他較小尺寸或不同顏色的元素。 蘋果(下面的截圖)做到了完美。

All this will have a negative effect on the conversion rate (primary KPI for any ecommerce store) because people leave.

所有這些都會對轉換率(任何電子商務商店的主要KPI)產生負面影響，因為人們會離開。

研究 (Research)

Ideally during this phase, I would do usability research, which involves asking users to do a certain task on the website (“find a dress”) and observe what challenges they encounter on the way.

理想情況下，我會進行可用性研究，其中涉及要求用戶在網站上執行某項任務(“找一件衣服”)并觀察他們在途中遇到的挑戰。

In this case, I am not trying to fix the whole website, but only come up with a new homepage design based on best UX practices. So for this phase, I looked at other companies that do homepages well. Let me highlight a few best practices that I observed:

在這種情況下，我不是要修復整個網站，而只是根據最佳UX做法提出一個新的首頁設計。 因此，在此階段中，我研究了其他網頁效果良好的公司。 讓我重點介紹一些我觀察到的最佳實踐：

標頭 (Header)

All the sites have a very clean header (lots of whitespace, clear copywriting and easy to understand icons. Here is one example from the Louis Vuitton website.

所有站點的標題都非常整潔(很多空白，清晰的文案和易于理解的圖標。這是路易威登網站上的一個示例。

Large ImageryA couple of years ago large images did not load well. Technology has advanced and large images can now be loaded quickly. Notice also how small the text is (because the imagery speaks for itself).

大圖像幾年前，大圖像無法很好地加載。 技術先進，現在可以快速加載大圖像。 還請注意文本的大小(因為圖像說明了一切)。

Email Sign-upFirst party information (email addresses) has become more important than ever to stay in touch with your customers. So almost every website has a sign-up form on it that gives people a monetary incentive to subscribe and asks for only the email address (the more information you want, the less people will be willing to subscribe).

電子郵件注冊與您保持聯系的第一方信息(電子郵件地址)比以往任何時候都變得更加重要。 因此，幾乎每個網站上都有一個注冊表格，可以使人們有金錢上的訂閱動機，并且只要求提供電子郵件地址(您想要的信息越多，人們愿意訂閱的人就越少)。

New and Promotional Items Most fashion website have a sales promotion on their homepage. The interesting thing to observe is that it is only an announcement without going into which products are on sale. The objective is to get visitors drawn in without bombarding them with too much information upon arrival.

促銷新品大多數時尚網站的首頁上都有促銷。 有趣的是，這只是一個公告，而沒有介紹哪些產品正在銷售。 目的是吸引游客，但不要在到達目的地時向他們轟炸。

Conclusion Why is it so important to look at other websites? To answer that, let me introduce Jacob’s Law and the concept of mental models (

結論為什么瀏覽其他網站如此重要？ 為了回答這個問題，讓我介紹雅各布定律和心理模型的概念(

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

用戶將大部分時間都花在其他網站上。 這意味著用戶更喜歡您的網站以與他們已經知道的所有其他網站相同的方式工作。

1. Users will transfer expectations they have built around one familiar product to another that appears similar.
   用戶會將他們圍繞一種熟悉的產品建立的期望轉移到看起來相似的另一種產品上。
2. By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.
   通過利用現有的思維模型，我們可以創建出色的用戶體驗，使用戶可以專注于自己的任務而不是學習新的模型。

角色 (Personas)

Next, personas. There are many opinions on how to create them (or if we even need them) out there, so here is my take: If you design for the user it helps a lot if you see them in front of you. It is a good reminder on who will be using your design eventually (not you or the client ;-).

接下來，角色。 關于如何創建它們(或者甚至我們是否需要它們)有很多意見，因此，我的看法是：如果為用戶設計，那么在您面前看到它們會很有幫助。 這很好地提醒了最終將由誰使用您的設計(而不是您或客戶;-)。

How to create them? In my opinion, they should be based on data (surveys) that you gathered from your users and they represent 2–3 of your core users. You don’t need a lot of details (“has a dog and loves drinking coffee in the afternoon,…) but it should be clear what are their motivations and fears, which is what your design should and can address.

如何創建它們？ 我認為，它們應該基于您從用戶那里收集的數據(調查)，它們代表了您的核心用戶的2-3。 您不需要很多細節(“有一只狗，喜歡在下午喝咖啡，……”)，但應該弄清楚它們的動機和恐懼是什么，這是您的設計應該并且可以解決的問題。

For example, if you ask your users why they are not buying from your website, you will very quickly learn about their current frustrations and fears (“not sure if the size is correct”, “don’t want to pay for shipping”,…). Now we can design for it (come up with an awesome size guide, highlight free shipping,…).

例如，如果您問用戶為什么不從您的網站上購買商品，您將很快了解他們當前的沮喪和恐懼(“不確定尺寸是否正確”，“不想支付運費”， …)。 現在，我們可以為它設計(提供出色的尺寸指南，突出顯示免費送貨…)。

草圖和線框 (Sketching & Wireframes)

I spare you my hand drawn paper/pen sketches, but here is how my process usually looks like: I give myself 10 minutes to come up with at least 8 concepts on how the page could look like (prior to this I will have some idea what kind of content is required on the page). This exercise forces me to think of different ideas and not to go with the first one.

我為您省下了手繪紙/筆的草圖，但是這通常是我的過程：我給自己10分鐘時間，提出了關于頁面外觀的至少8個概念(在此之前，我會有一些想法頁面上需要什么樣的內容)。 這種練習迫使我思考不同的想法，而不是第一個想法。

In the low fidelity wireframes below you can see that I was considering a large slider (left), a smaller hero image with a promo banner (center) and a hero image with four smaller images for feature items (right). Eventually I decided to go with the last design because it provides a clean design and allows Uniqlo to highlight all their current feature items(“AIRism, masks,etc). You would usually also involve the client at this stage and even do some early usability tests. The earlier you find issues the easier/cheaper they are to fix.

在下面的低保真度線框中，您可以看到我正在考慮使用一個較大的滑塊(左)，一個帶有促銷橫幅的較小英雄圖像(中間)和一個具有四個較小圖像的英雄圖像(右側)。 最終，我決定采用最后一個設計，因為它提供了簡潔的設計，并允許優衣庫突出顯示其所有當前功能項(“ AIRism，口罩等”)。 在此階段，您通常還會邀請客戶參與，甚至進行一些早期的可用性測試。 您越早發現問題，越容易解決。

Finally, I would fine tune the chosen concept.

最后，我將微調所選的概念。

設計 (Design)

So finally, we start to populate our wireframes with content and UI elements. Here are my main thoughts behind this design:

因此，最后，我們開始使用內容和UI元素填充線框。 這是此設計背后的主要思想：

• There is a trend in online fashion stores to use as little color as possible and let the imagery do the talking. You can see this at Zara.com, for example. In Uniqlo’s case, their color is red and they have a vibrant youthful brand, so a little bit color to accentuate element makes sense.
  在線時裝商店中存在一種趨勢，即使用盡可能少的顏色并讓圖像進行對話。 例如，您可以在Zara.com上看到它。 就優衣庫而言，它們的顏色是紅色，并且擁有一個朝氣蓬勃的年輕品牌，因此，強調一點色彩是很有意義的。
• Uniqlo does have a lot of different things to highlight like their AIRism technology, their UV protection clothing line, their t-shirts with cartoons, etc. and people go to Uniqlo just for these items, which is why they deserve a spot “above the fold”. (This would be a great section for A/B testing (what product groups lead to the lowest bounce rate?) or even a dynamic recommendation engine to show you personalised results.)
  優衣庫的確有很多不同之處值得一提，例如他們的AIRism技術，防紫外線服裝系列，帶有卡通漫畫的T恤等。人們只為這些物品而去優衣庫，這就是為什么他們應該在“折”。 (這將是A / B測試的重要部分(哪些產品組導致最低的跳出率？)，或者甚至是動態推薦引擎，以向您顯示個性化的結果。)
• A lot of people coming to Uniqlo will be first time visitors, so I wanted to address their fears (from the “Persona” section) quickly and highlight free delivery, etc.
  很多來Uniqlo的人都是第一次來訪，所以我想快速解決他們的擔憂(來自“ Persona”部分)，并強調免費送貨等。
• The other segment will be returning users to check if there is a sale or what’s new. For them I have a “New Arrival” section.
  另一個細分受眾群將是回頭客，以檢查是否有銷售或新變化。 對于他們來說，我有一個“新到貨”部分。

最后的想法和下一步 (Final Thoughts & Next Steps)

Where are the mobile screens? Although I designed them, they are missing here because I wanted to focus on the design process in general (and also because mobile screens are difficult to display here).

手機屏幕在哪里？ 盡管我設計了它們，但是這里缺少它們是因為我想總體上專注于設計過程(也因為在這里很難顯示移動屏幕)。

Next steps would be to create more pages including the mega-menu as a Adobe XD prototype that we can share with users to get feedback, which will lead to changes in the design.

下一步將創建更多頁面，包括作為Adobe XD原型的巨型菜單，我們可以與用戶共享以獲取反饋，這將導致設計變更。

Finally, please feel free to share your thoughts on this. Designing is an endless loop of improving things and I am sure there plenty of other good design options out there for a new Uniqlo homepage. Let’s discuss!

最后，請隨時分享您的想法。 設計是不斷改進的無窮循環，我相信對于Uniqlo主頁，還有很多其他好的設計選項。 讓我們討論！