優(yōu)衣庫(kù)不雅

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.

我是優(yōu)衣庫(kù)(Uniqlo)的忠實(shí)擁護(hù)者，因?yàn)樗麄兂鍪圪|(zhì)優(yōu)價(jià)廉的創(chuàng)新服裝。 因此，當(dāng)他們所有的商店在新加坡的“ Covid-19 Circuit Breaker”期間關(guān)閉時(shí)，我轉(zhuǎn)向他們的網(wǎng)站，并驚訝地發(fā)現(xiàn)要尋找的商品有多么困難。

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.

主頁(yè)非常混亂，這與其簡(jiǎn)潔現(xiàn)代的品牌形成鮮明對(duì)比。 因此，在本文中，我想展示如何為他們?cè)O(shè)計(jì)外觀更現(xiàn)代的首頁(yè)以及其背后的思路。

問(wèn)題 (The Problem)

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

我們旨在解決問(wèn)題，因此，讓我重點(diǎn)介紹一下通過(guò)本練習(xí)嘗試解決的問(wèn)題：

• 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.

  主頁(yè)是loooooong 。 自己看看( uniqlo.com )，然后將其與gap.com或nike.com進(jìn)行比較。 在移動(dòng)設(shè)備上甚至更長(zhǎng)。 為什么這是個(gè)問(wèn)題？ (1)這導(dǎo)致網(wǎng)站加載緩慢(需要超過(guò)11秒)。 (2)根據(jù)我進(jìn)行加熱貼圖的經(jīng)驗(yàn)，沒(méi)有人會(huì)滾動(dòng)到那么遠(yuǎn)，這意味著約有50％的內(nèi)容不會(huì)被人眼看到。

• “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.

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

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

所有這些都會(huì)對(duì)轉(zhuǎn)換率(任何電子商務(wù)商店的主要KPI)產(chǎn)生負(fù)面影響，因?yàn)槿藗儠?huì)離開(kāi)。

Uniqlo above the fold screenshot折疊屏幕上方的優(yōu)衣庫(kù) Apple above the fold screenshot蘋(píng)果首屏截圖

研究 (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.

理想情況下，我會(huì)進(jìn)行可用性研究，其中涉及要求用戶在網(wǎng)站上執(zhí)行某項(xiàng)任務(wù)(“找一件衣服”)并觀察他們?cè)谕局杏龅降奶魬?zhàn)。

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:

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

標(biāo)頭 (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.

所有站點(diǎn)的標(biāo)題都非常整潔(很多空白，清晰的文案和易于理解的圖標(biāo)。這是路易威登網(wǎng)站上的一個(gè)示例。

Louis Vuitton Header路易威登頭

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).

大圖像幾年前，大圖像無(wú)法很好地加載。 技術(shù)先進(jìn)，現(xiàn)在可以快速加載大圖像。 還請(qǐng)注意文本的大小(因?yàn)閳D像說(shuō)明了一切)。

Gap.comGap.com

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).

電子郵件注冊(cè)與您保持聯(lián)系的第一方信息(電子郵件地址)比以往任何時(shí)候都變得更加重要。 因此，幾乎每個(gè)網(wǎng)站上都有一個(gè)注冊(cè)表格，可以使人們有金錢(qián)上的訂閱動(dòng)機(jī)，并且只要求提供電子郵件地址(您想要的信息越多，人們?cè)敢庥嗛喌娜司驮缴?。

Calvin Klein卡爾文·克萊因(Calvin Klein)

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.

促銷(xiāo)新品大多數(shù)時(shí)尚網(wǎng)站的首頁(yè)上都有促銷(xiāo)。 有趣的是，這只是一個(gè)公告，而沒(méi)有介紹哪些產(chǎn)品正在銷(xiāo)售。 目的是吸引游客，但不要在到達(dá)目的地時(shí)向他們轟炸。

Calvin Klein卡爾文·克萊因(Calvin Klein)

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 (

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

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.

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

Users will transfer expectations they have built around one familiar product to another that appears similar.

用戶會(huì)將他們圍繞一種熟悉的產(chǎn)品建立的期望轉(zhuǎn)移到看起來(lái)相似的另一種產(chǎn)品上。

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.

通過(guò)利用現(xiàn)有的思維模型，我們可以創(chuàng)建出色的用戶體驗(yàn)，使用戶可以專注于自己的任務(wù)而不是學(xué)習(xí)新的模型。

角色 (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 ;-).

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

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.

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

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,…).

例如，如果您問(wèn)用戶為什么不從您的網(wǎng)站上購(gòu)買(mǎi)商品，您將很快了解他們當(dāng)前的沮喪和恐懼(“不確定尺寸是否正確”，“不想支付運(yùn)費(fèi)”， …)。 現(xiàn)在，我們可以為它設(shè)計(jì)(提供出色的尺寸指南，突出顯示免費(fèi)送貨…)。

草圖和線框 (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.

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

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.

在下面的低保真度線框中，您可以看到我正在考慮使用一個(gè)較大的滑塊(左)，一個(gè)帶有促銷(xiāo)橫幅的較小英雄圖像(中間)和一個(gè)具有四個(gè)較小圖像的英雄圖像(右側(cè))。 最終，我決定采用最后一個(gè)設(shè)計(jì)，因?yàn)樗峁┝撕?jiǎn)潔的設(shè)計(jì)，并允許優(yōu)衣庫(kù)突出顯示其所有當(dāng)前功能項(xiàng)(“ AIRism，口罩等”)。 在此階段，您通常還會(huì)邀請(qǐng)客戶參與，甚至進(jìn)行一些早期的可用性測(cè)試。 您越早發(fā)現(xiàn)問(wèn)題，越容易解決。

Finally, I would fine tune the chosen concept.

最后，我將微調(diào)所選的概念。

Low Fidelity Wireframes低保真線框

設(shè)計(jì) (Design)

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

因此，最后，我們開(kāi)始使用內(nèi)容和UI元素填充線框。 這是此設(shè)計(jì)背后的主要思想：

• 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.
  在線時(shí)裝商店中存在一種趨勢(shì)，即使用盡可能少的顏色并讓圖像進(jìn)行對(duì)話。 例如，您可以在Zara.com上看到它。 就優(yōu)衣庫(kù)而言，它們的顏色是紅色，并且擁有一個(gè)朝氣蓬勃的年輕品牌，因此，強(qiáng)調(diào)一點(diǎn)色彩是很有意義的。
• 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.)
  優(yōu)衣庫(kù)的確有很多不同之處值得一提，例如他們的AIRism技術(shù)，防紫外線服裝系列，帶有卡通漫畫(huà)的T恤等。人們只為這些物品而去優(yōu)衣庫(kù)，這就是為什么他們應(yīng)該在“折”。 (這將是A / B測(cè)試的重要部分(哪些產(chǎn)品組導(dǎo)致最低的跳出率？)，或者甚至是動(dòng)態(tài)推薦引擎，以向您顯示個(gè)性化的結(jié)果。)
• 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.
  很多來(lái)Uniqlo的人都是第一次來(lái)訪，所以我想快速解決他們的擔(dān)憂(來(lái)自“ Persona”部分)，并強(qiáng)調(diào)免費(fèi)送貨等。
• 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.
  另一個(gè)細(xì)分受眾群將是回頭客，以檢查是否有銷(xiāo)售或新變化。 對(duì)于他們來(lái)說(shuō)，我有一個(gè)“新到貨”部分。

最后的想法和下一步 (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).

手機(jī)屏幕在哪里？ 盡管我設(shè)計(jì)了它們，但是這里缺少它們是因?yàn)槲蚁肟傮w上專注于設(shè)計(jì)過(guò)程(也因?yàn)樵谶@里很難顯示移動(dòng)屏幕)。

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.

下一步將創(chuàng)建更多頁(yè)面，包括作為Adobe XD原型的巨型菜單，我們可以與用戶共享以獲取反饋，這將導(dǎo)致設(shè)計(jì)變更。

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!

最后，請(qǐng)隨時(shí)分享您的想法。 設(shè)計(jì)是不斷改進(jìn)的無(wú)窮循環(huán)，我相信對(duì)于Uniqlo主頁(yè)，還有很多其他好的設(shè)計(jì)選項(xiàng)。 讓我們討論！

翻譯自: https://medium.com/swlh/uniqlo-homepage-a-ux-case-study-1b70a1389552

優(yōu)衣庫(kù)不雅

總結(jié)

以上是生活随笔為你收集整理的优衣库不雅_Uniqlo主页-用户体验案例研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。