設計 Pinkoi 的幕後花絮 (下) / Behind the Scene: Pinkoi Website Design (II)

Continued from: 設計 Pinkoi 的幕後花絮 (上) / Behind the Scene: Pinkoi Website Design

再來,也是超級重要的一件事,就是非常簡單乾淨的介面。

沒有塞滿滿的彩色廣告 Banners,沒有密密麻麻的 Gif 圖片,沒有閃爍不停的「下殺三折」,沒有從左到右的永遠靜不下來的過動跑馬燈。有的只是質感很好的設計商品,與更多更多更多美麗的設計商品,還有最後… 用來襯托這些優質商品的簡潔介面。

因為這樣就已經足夠,因為這些美麗的設計商品才是我們的重點。

在整體介面的設計時,我給予美麗的商品圖片主角般的地位,讓它們站出來為自己說故事,因為它們不但本身就吸引人,更直接的點出了商品本身的價值。當我決定好主角與配角之後,頁面的主次分明,透過簡單文字與圖片的視覺互補,也就更容易幫助使用者找到他們有興趣的內容。

其他的時候,我會在資訊區塊與區塊之間,以淡灰細線分隔開來,並在周圍給予足夠的留白,讓真正的重點可以被突顯出來,更容易快速瀏覽或閱讀。當使用者的眼睛能獲得適當的休息時,簡單舒適能讓頁面上的內容更容易被消化。當我在設計時儘量優化使用者體驗,使用者就會更喜歡逛 Pinkoi。

 

 

對於網站最上方的 Top Navigation,我最後選擇用簡單的文字搭配一目了然的大型圖示。因為這排選項將是帶領使用者穿越不同 Pinkoi 時空的重要角色,必須受到足夠的注目,但我又不希望它們在視覺上太搶眼,最後使用單色簡約的圖示,讓它們在一旁「溫柔的搶戲」就好。視覺動線與主次的選擇很重要。

同時,因為我只想提供給使用者「剛剛好」的選擇,所以其實設計了二種不同的 Top Navigation 版本,分別是登入前/登入後使用,二種情況裡不需要被看見的選項都被我簡化,只留下必要的,然後我再根據使用者需求,重新調整不同功能的比例與位置,以儘量滿足使用者在這個階段的需求。

 

 

在我設計到「購物車顯示」的時候,突然心血來潮,想對使用者開個可愛的小小玩笑,幽默一下之外,也希望呈現出親切的感覺,於是我花了些心思,設計出二種不同的購物車顯示狀態:

❤ 當使用者的購物車裡還沒有任何商品時,購物車小女孩會露出一個好悲傷好寂寞的傷心表情,很希望使用者可以趕快放點東西進去。

❤ 當使用者的購物車裡有1+以上的商品後,購物車小女孩會一改剛剛的哭臉而破涕為笑,露出開心的粉嫩表情,一個期待使用者快去結帳的可愛模樣。

「這個好有妳的風格」 很多朋友們看到了這個購物車設計時,這麼告訴我。

一開始聽見這種稱讚時,其實我都會愣住一下子,但後來想想好像也是這樣子,我一直以來的確喜歡加點會讓人微笑的小細節 make people smile。這或許是我本身並不常笑的反作用吧。

 

 

商品頁面的設計是另一個重點。

在 Pinkoi 的商品頁面上,我還是選擇了能突顯商品質感的圖片為主角,再來則是商品名稱;然後對於設計師們的品牌形象,在幾經掙扎之後,我決定以現在的方式保存下來,一個明顯的設計館招牌,而不是只用短短一行文字帶過,因為 Pinkoi 是一個希望設計師與使用者雙贏的平台,我們希望每個使用者來逛商品頁面的時候,都明確的知道商品的設計者/品牌,進而能夠去更深入的了解這個品牌故事。

當然,對於其他的細節我也持續的關注著,我利用足夠的留白去突顯出商品價位與「我要購買」按鈕,如果暫時不想購買,加入我們的慾望清單也是個很好的選擇 (而且還可以累積紅利)。

只是加入慾望清單本身是個「站內收藏」的動作,但是對於除了買設計、賣設計之外,另一個我也希望顧及的「分享好設計」目標而言,站內收藏的分享效益不如 Facebook 按讚帶來的大,於是社群網站整合、同步分享就變成一個設計時必然的重點。另外,在社群網站整合的比例配置上我也受到在地化的影響,考量到 Facebook 的使用者佔有率在台灣還是最大的,我在版面比例上也做了因應調整。

商品頁面的左下方是提供給設計師填寫自己的商品文案,因此設計師們要如何描述他們的商品,要寫長寫短寫抽象寫具體都可以,但是為了要讓使用者在觀看商品頁面時,不需要用滑鼠滾輪往下滑完整頁,就可以快速的知道關於這項商品的「幾個重點」,我們在商品頁面上也提供了一個設計商品重點提示,利用簡單的圖示與說明,清楚的交待一些對於使用者而言重要的快速資訊,例如是否全球配送、手工製作、台灣出品、環保有機等等,而這個部分在設計師們上架時,則可以從後台輕鬆勾選設定。

 

 

然後,我必須盡可能的讓使用者能快速離開這個頁面 (笑)

好吧,這聽起來其實有點嚇人,但是我並不是這個意思。而是,如果使用者對於目前這個頁面上的商品沒有興趣,我希望能幫助他快速找到下一個他會感興趣的設計商品,或是如果使用者是想看更多關於這個品牌的其他商品,我也希望能加快他到達那裡的速度。

所以在每個設計商品頁面的兩邊,也各設計有一個箭頭,讓使用者可以不需要重新回到設計館,就能快速瀏覽這個品牌的其他商品;同樣的,我們也在商品頁面的右側提供「設計館其他商品」「你可能也會喜歡」等相關的推薦,好幫助使用者更快速的找到喜歡的商品。

同時為了幫助設計師與其他使用者更了解商品的被觀看/被收藏狀態,鼓勵社交分享行為,我們也把「誰已經擁有了這件商品」「喜歡這件商品的人」放在明顯的位置。

 

 

關於 Pinkoi 站上其他的設計考量,如果要一直這樣聊下去,我好像真的會就這樣一直這樣聊下去 (驚)。所以除了「逛櫥窗」「設計誌」,我要日後另外寫文章介紹之外,好像應該在這裡先劃下一個句點,不然我可能會忍不住一直說下去 on and on and on…

畢竟,負責 Pinkoi 使用者體驗持續的優化,是我所有工作裡最重要的一項。如何能滿足使用者各個階段性的需求、調整介面以解決他們使用時所遇到的困難,都是一項我每天必須不斷挑戰的 Task。每一個 Pinkoi 網站上的功能調整、介面微調,甚至是每一個新功能的上線,背後都各自有它們的分析與原因;調整上線後,團隊也會守在電腦後努力的追蹤成效,把成效轉化為分析研究,然後讓我把分析設計為介面。

我自己也經常回去重新檢視每一個 Pinkoi 的功能,追踨並研究它的成效分析是不是與目前的期待有落差,是否在 Google Analytics 裡有不夠理想的表現,是否還符合目前的 Business目標,當發現問題時我會立刻排入自己的 Project lists裡,持續優化,為的是要讓它們的表現可以更好,更符合當前的目標與期待,因為使用者在不同階段會有不同的需求,而這些都會誠實的反映在成效分析數據上。

因為我相信,只有持續優化我們的使用者體驗,Pinkoi 才會成長的健康茁壯。

 

—————————————————-  2012.02.09 後記 分隔線 —————————————————-

 

Pinkoi 上線至今約一年半,我設計的非常開心,簡單的介面是最難做的,也最需要嚴格的堅持著每個細節,所以我很感謝 Mike 和 Peter 在撰寫功能上與我的配合 (讓我能儘量發揮),Joyce 和 Teressa 在行銷上的掌握 (讓 Pinkoi 被更多人認識與喜愛),Patty 在其他設計上的支援 (讓我能好好放心主導全站UI/UX),小雨幫首頁挑選一個個美麗的組合。就是因為有這麼棒的夥伴,我才能一路走來很盡興很開心。

我們整個團隊目前雖然只有7個人,但每個夥伴都非常優秀,總是能發揮好多好多能量,讓我每次望著做不完的 Roadmap 時,心情也總是保持著一個愉快又興奮的狀態。當然我們一定還有做的不夠好的地方,或是可以做的更好的地方,所以我們從來沒有停止設計,也沒有停止前進。

我們整個團隊每天都在面臨新的挑戰也樂此不彼,因為我們想要帶來改變,夢想著有一天外國朋友們也能透過 Pinkoi 認識台灣的設計師、購買到台灣優秀創作者的作品。所以 Pinkoi 會持續努力,把更多好設計帶入生活,把更多想像力帶給每天都努力生活的你,我們一起從生活中萃取美感。

也希望在這個努力的旅程裡,能夠有你的鼓勵與我們一起走過   : )

 

Submit a comment

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