美麗的 Pinkoi 首頁背後 / Behind Pinkoi’s Homepage

我相信經常來逛 Pinkoi 的朋友,對於我們的首頁應該都不陌生,那麼大家一定有過這樣的經驗:曾經被首頁上方的人氣推薦吸引,進而怦然心動的點選了其中某樣設計商品  : )

我們經常說人與人之間的第一印象非常重要,通常在關鍵七秒鐘裡就能決定印象的好與壞。那麼人們對於網站的第一印象呢?大部分人們對於網站的第一印象是來自於網站的門面-首頁,而且還不一定是整個首頁,因為我們螢幕高度限制的關係,第一印象多半可能只有來自於首頁的上半部而已。
__ 

以首頁上半部來展現多元性

__ 
由於我很喜歡觀察使用者實際操作 Pinkoi, 一方面是 UX 的職業病,一方面則是自己單純覺得有趣極了。不過我也經常因此收集到很多資料,幫助我可以不停地優化我們的使用者介面,讓 Pinkoi 變的更好。

我曾經自己私底下做過一個小調查,探討初次到訪與網站第一印象之間的關係,我觀察了大約20-30位使用者第一次到訪的情形,並在之後詢問他們對於 Pinkoi 的第一印象。整理結果之後我發現,很多使用者在看到首頁的商品後,會不自覺的產生快速聯想,進而判斷整個網站的方向,例如:

當男性使用者或輕/熟女使用者初次到訪 Pinkoi 時,如果映入眼簾的商品多為可愛活潑的調性或俏皮多彩的風格,就會讓他們快速產生聯想,覺得整個網站可能都是這種可愛風格的設計商品,而把我們直接歸類為專門為年輕女孩打造的設計品購物網站。

但是事實上 Pinkoi 網站裡販售的設計商品是非常多樣化的,因為像目前 1000多個設計品牌下有那麼多的商品 (31263樣,9/25 updated),自然會有各種風格、各種創作方式與使用材質,也會有各種不同的價位 (不然如果3萬多樣商品都走單一可愛路線的話,那也似乎太誇張了些)。

於是,當我在做 Pinkoi 首頁第三次改版設計時,我特別把重心放在首頁的上半部,希望在這個有限的空間裡,盡可能地展現 Pinkoi 網站上設計商品的多元性  ↓

 

__ 

有時候靈機一動的念頭反而最巧妙

__ 
決定好這次改版的重心之後,我開始在首頁上方那塊小空間裡玩起排列組合,嘗試了各種可能的版面設計、不同的視覺呈現,從最初的標準等分矩形排列、狹長型直條版面、不規則三角形組合,到現在的由大變小順序切分等等,別看它小小一塊,其實好多可以變化的方式呢。

在這個完成版出現前,中間其實還經歷過某個天外飛來一筆的「減法」過程。

原本每個商品圖片旁邊,都還有相關的文字資訊如品名、價錢等等,為了讓這些商品文字不紊亂也不搶戲,我花了很多心血安排它們的落腳處,好不容易找到了一個最滿意的排版方式之後,準備隔天跟夥伴們分享,於是很心滿意足的去睡覺。沒想到,自己卻在隔天起床下樓進工作室後,在按下電腦開關的同時,突然心血來潮想著「乾脆不要放字好了,只用商品圖片來突顯質感」,而瘋狂的又把前一天所有細心安排好的文字都刪減光光。

想不到,結果我反而因此得到自己最喜歡的版本:刪去了商品的文字資訊,讓我的設計少了份商業氣息;留下好質感的設計圖片,反而多了份更親近平常的生活況味,簡單又美好  ↓

 

__ 

多元性,是看似簡單中的不簡單

__ 
規劃好版面之後,再來最重要的莫過於內容的呈現。

多元性說起來似乎很簡單,很多朋友可能會想說:不就是儘量選擇不同的商品放上去就好了…嗎?其實這樣是不夠的,因為如果內容安排上只有商品多元,在視覺呈現上就可能比較混亂,不但每樣商品都有各自為政的感覺,而且還會整體看起來不太搭嘎。

因此當初設計時,我就是希望未來這個版面的內容呈現,除了商品多元之外,還需要搭配出某種特定的風格、商品間彼此的相似點或一個微妙的整體感,讓來逛 Pinkoi 的朋友們能把瀏覽商品當成是一種視覺享受,甚至能獲得一些讓設計商品走入生活的搭配小靈感。

聽見這裡面的難度了嗎?其實這個多元性可是一點也不簡單呢。

在百般考量之下,我後來建議把這個重要的 task 拜托給小雨,一來是因為我覺得她非常會搭配商品;而且很擅長「新品獵奇」(笑):就是經常會發掘很棒的新商品;加上我發現她喜歡的風格類型跟我一樣滿廣的,因此我覺得她絕對是整個 Pinkoi 裡面最適合的對象,怎麼說呢?就是如果把我設計好的版面,拜托給她接手來搭配內容的話,會不自覺的非常放心呢~ ✿

__ 

尋找像京劇變臉般的驚喜感

__ 
但是即使如此還是不夠,因為我們不能一直呈現相同的搭配,必須在多元性之外再增加一些驚喜感。

在無法確知每次都是何種使用者到訪的情況下,我們必須要準備充足,準備好各式各樣風格的設計商品搭配,並且經常更新,儘量讓每一次使用者到訪首頁時,都能夠有像是在看京劇變臉一樣的驚喜,讓他們每一次的到訪,都能擁有不同設計風格的多元體驗,並提高使用者能在首頁就發現自己心儀設計品的可能性,讓大家在 Pinkoi 上面能很輕易的找到與眾不同的美好設計。

加上另一方面,我們希望能鼓勵大家更常玩 Pinkoi 的櫥窗功能,並且讓使用者在搭配櫥窗後能有機會獲得更大的成就感,所以我們最後決定,只要是很美麗或是很精緻有味的櫥窗,我們都會把它們另外抓到首頁上,與小雨挑選的組合一起輪流呈現 Pinkoi 網站上的魅力商品。

所以如果某天,你看見了自己的櫥窗出現在首頁上時,不要嚇到哦  :P

 

__ 

小細節 + 大耐心 =  無限大

__ 
分享了這些 Pinkoi 首頁背後的小故事後,是不是覺得… 怎麼會有這麼多被我記住的小細節呢? (笑)

其實我們每天的生活裡,都有很多看似簡單或好像不加思索的安排與舖陳,但是這些事物的背後,通常都是經過他人細心、耐心地調整之後的成果與付出。因此,我也總是相信著,每件事情只要努力、儘量去注意每個小細節,並在過程裡始終保持著一份大耐心,最後我們能夠成就的一定會更多的。所以,讓我們都一起繼續加油往前走吧  : )

如果,還想閱讀更多我之前關於 Pinkoi 設計的喃喃自語:請往這裡去

 

最後我們來一起欣賞小雨過去的精心首頁搭配,很棒!超棒!我自己都超級喜歡看的呢!

 

還有獻上很有紀念價值的 2011 新年版特輯 : )

 

 

Submit a comment

Your email address will not be published. Required fields are marked *