幾億人都在用的谷歌翻譯網頁版,是如何做改版設計的? - 優設網 - UISDC

幾億人都在用的谷歌翻譯網頁版,是如何做改版設計的?

2019/05/29 9494評論區

@C7210?:這是一篇來自 Google Translate 團隊設計師的改版經驗分享。

Google Translate改版經驗談

2018 年底,我們上線了基于響應式布局和 Material Design 打造的全新網頁版本 Google Translate。

鑒于 Google Translate 在全球擁有的龐大用戶量,我們從一開始就知道必須為「改版厭惡癥」做好準備。很多文章對這一話題進行過探討,譬如通過什么策略才可以盡可能減少用戶對于產品改版的負面反饋。但對于 Google Translate 這種量級的產品,很多經驗也只有在實際項目過程中才能獲取。以下就是我在這次改版當中學到的最重要的一些東西。

以用戶為鏡

如果你了解過「改版厭惡癥」,那么對于下面這張圖表可能并不陌生。

圖中所展示的是產品改版可能帶來的不同類型的結果。不過顯然,你無法通過圖表對你的改版結果進行預測。對于改版結果缺乏明晰的認知與控制力,這使我在項目初期感到無所適從。但隨著每一次試驗性的迭代,我逐漸意識到,我們的用戶一直在通過他們的實際行為與反饋來指導著我們的前進方向。

在改版試驗階段,用戶會向我們提交反饋,各類意見褒貶不一,有些讀起來并不舒服,但我們還是花費了大量的時間去閱讀,然后在內部報 bug 或是調整設計方案。譬如在讀過一些反饋意見之后,我們才發現,我們對于 tab 次序的調整嚴重影響了一部分重度用戶的工作效率,于是我們立刻回滾了方案。此外,我們了解到很多用戶在實際場景中都需要看到更多的信息,于是我們在接下來的迭代方案中提升了頁面的信息密度。

作為設計師,我們總會希望一次性將最完美的設計方案呈現給用戶。然而對于產品設計而言,分階段進行試驗,通過用戶的真實反饋進行校驗和迭代,才是更為有效的方式。一旦在這方面建立起成熟的機制,你的用戶就會成為產品設計最有效的指引。

定性研究中的陷阱

可用性測試可以幫助你發現設計當中的重大問題,為設計方案帶來多方面的評估。通常,這類測試的規模都不大,每次的被測對象不超過十名。在測試期間,你總會忍不住想要問被測對象更喜歡哪個設計方案,但這種問題的結果往往并不可靠,甚至有可能將你引向歧途。

我們在 Google Translate 改版過程中做過很多輪的定性用研,以此來發現和改正先前設計當中的一系列可用性問題。期間,我們也會征詢被測對象對于新舊版本設計方案的傾向性,絕大多數人都會選擇新版方案。但我們對這類傾向性始終保持謹慎,不想將其作為設計決策的直接依據。

事實證明,新版方案第一次上線測試時,用戶們通過實際行為所表達出的傾向性,并不像我們在定性研究中所了解到的那樣高度一致地傾向于新版方案。

A/B測試,可靠的伙伴

我們希望新版 Google Translate 的頁面具有更高的色彩飽和度。

在早期迭代當中,我們使用了一系列色彩豐富的圖標,這些圖標在我們的移動端 app 當中的表現不錯。但通過 A/B 測試,我們發現這些圖標在網頁版本中的表現并不理想,于是最終仍采用了簡潔的 Material Design 風格圖標。

此外,我們還曾經嘗試將翻譯后的文字呈現在藍色背景當中,就像我們在移動端 app 當中做的那樣。而當譯文長度超過一定的篇幅時,我們則會將底色改為淺灰,使其更易閱讀。

但是我們的一些設計師始終對藍色底色的方案抱有質疑,于是我們決定通過 A/B 測試來進行驗證。其中 A 方案采用了前文描述的模式(根據譯文篇幅調整內容字色與底色),B 方案僅使用淺灰底色。測試結果很明確,A 方案下的用戶使用頻次明顯降低了。

或許對于網頁版的 Google Translate 來說,人們真的不喜歡飽和度如此之高的視覺風格。不過我們也在其他地方繼續嘗試著色彩更為豐富的元素,例如在運營內容卡片或空狀態頁面中使用的插圖等等。

總結

產品改版通?;崠春艽蟮奶粽?,特別是當你無法預先了解人們可能產生怎樣的反應時。通過這次 Google Translate 改版,我所學到的最重要的一課,就是你必須將用戶可能產生的反饋視為設計過程的重要組成部分,而非試圖去控制或避免那些不確定的要素。

既然產品以用戶為本,那么就讓用戶來幫助我們更有效地進行設計。認真規劃每一次的迭代試驗,在足夠大量的樣本當中進行測試,獲取真實用戶的反饋意見,進而提煉出最有價值的數據與信息,用以制定設計決策。

原文鏈接:《Three UX takeaways from redesigning the latest version of the Google Translate website》?Pendar Yousefi

歡迎關注譯者的微信公眾號:「Beforweb」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/google-translate-redesign

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里