Dropbox設計師總結,如何讓介面資訊更加聚焦
始終圍繞使用者目標做設計決策,根據功能優先順序做出不同的設計形式,強化核心功能,是一篇非常棒的細節優化方向參考文章。內容不多,但是蠻有啟發,分享給大家!
想想看,在手機上工作是什麼感覺,你的注意力容易被分散,胖胖的手指還老是按錯字母。每當這個時候,你只想放下手機,去和你的愛人吃一頓晚餐,又或者跟合得來的朋友聚在一起聊聊天。
如果你開始有了這種想法,那麼為移動辦公提出的解決方案將會變得完全不一樣。你的產品目標不再是單純為了提高使用者活躍度或者讓使用者花更多的時間在你的應用上。相反,設計的焦點應該在如何讓使用者在這麼小的介面中使用最少的時間並能高效的完成工作上。
在過去的一年中,我們重新走查了一遍 Dropbox 的移動端體驗,並將如何提高使用者的工作效率作為產品的核心目標。我們做了一些迭代改進,讓使用者的工作變得更加有效率,也讓他們能抽出更多的時間去陪陪家人,朋友。同時,我們也希望將我們的工作分享出來,能對那些和我們有同樣產品目標的人有所幫助。
一、善用平臺間的相似性
十年前,Dropbox 利用了桌面系統上的聚合模式,通過檔案瀏覽器的通用性,Dropbox 能夠在 mac和 pc上提供相同的「神奇資料夾」體驗。
我們在最近的重設計中,利用了 iOS和 Android上類似的相似性。通過使用兩個作業系統共通的模式,我們建立了一個比較一致的雙平臺體驗。使用者無需適應新的使用者介面,就可以在換不同手機時也能夠快速使用應用。團隊也可以在使用不同作業系統時,減少因為介面差異而帶來的困擾,熟悉的介面能夠讓使用者更加專注。
二、優化圖示
△ 檔案瀏覽介面前後對比
△ 操作列表介面前後對比
7個月前,我們釋出了一套全新的檔案圖示,目的在於提高圖示的可讀性和搜尋檔案時更高的聚焦性。我們不斷問自己這樣的問題:「什麼樣的圖示更容易識別?圖示的型別如何區分?我們如何優化圖示以便使用者能夠快速識別?」。
通過這些問題的思考,我們更新了應用中的所有圖示,以減少複雜性並增加可讀性。通過優化這樣的小細節,可以讓使用者在工作時提高專注力,從而提升效率。
三、外顯核心入口
在移動端切換頁面要比在桌面端更麻煩,因為不能像桌面端那樣開多個視窗,移動端上的每個檢視都需要一整屏來承載。因此,當涉及到多個介面之間跳轉,想要找到你想要的功能時,層層跳轉就像是一個非常多餘的操作。如果你想快速完成工作,這樣的操作就會讓使用者感到沮喪。
這就是為什麼我們把評論的輸入框直接外顯(之前,要評論的話你必須點選聊天氣泡圖示)的原因。通過梳理介面上的功能優先順序,把最常用的功能提取出來並前置,減少了團隊協作時所需要的時間。
四、簡化操作介面
不久前,我們在應用中釋出了一個全新的首頁,目標是通過及時顯示內容片段來幫助使用者聚焦工作。但是,我們在資訊展示上出了問題。介面中的不同資訊內容全都放在了一起,我們無意中增加了使用者做出決定所需要的時間(詳細可以參見「希克定律」)。並且由於是在一個介面中垂直排列,最常用的功能或者是最近操作的檔案反而可能在第一屏不被看到。
我們最新的版本已經優化了這個問題,開啟預設是一個完整的最近工作檔案,而其他功能也可以通過選項卡快速檢視。現在,使用者可以從開啟應用的那一刻起,專注於最有價值的閱讀體驗。
五、突出最重要的操作
當你想要跟合作者共享一個資料夾時,不應該需要去找到某個圖示並理解它的意思再弄清楚如何去做。這就是為什麼我們會在資料夾頂部設計一個突出的按鈕,並把圖示改為文字的原因。只是一個很簡單的改變,就能讓你減少思考時間,高效工作。
(譯者注:頁面的核心功能應該重點去強化,對於 Dropbox 來說,使用者進到這個頁面,最主要的操作就是分享,所以會做出這樣的改進。)
六、時刻反饋變化
作為使用者儲存最重要檔案的地方,Dropbox 能夠時刻跟蹤這些檔案發生的變動。今天,我們通過 Dropbox 的這種能力以一個全新的檔案活動列表介面清晰的展示給使用者。
這就意味著,你再也不需要去問團隊成員他們是否更新過檔案。有了這個功能,你可以瞭解某個檔案所有的更新資料,而不再需要通過溝通或者電子郵件,也沒有必要去打斷隊友們的工作了。
總結
我們都知道,當我們在使用手機工作時,因為螢幕小感覺是一種障礙而不是生產力工具時,會多麼令人沮喪。
這就是為什麼高效工作是移動辦公應用中一直追求的東西。因為只有當用戶能夠在應用中快速找到焦點時,他才能在忙碌的工作中找到像擁有超能力一樣的感覺。
我們希望在這裡分享的案例能夠拋磚引玉,鼓勵大家去探索更高效的方法,讓使用者能夠提高工作效率。
原文:https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c
作者:Ed Chao
譯者:彩雲Sky
本文翻譯已獲得作者的正式授權
△授權截圖
作者:彩雲sky ,騰訊視覺設計師。微信公眾號: 彩雲譯設計
本文由 @彩雲Sky 整理髮佈於UI中國。未經許可,禁止轉載。
ofollow,noindex">微信公眾號: 彩雲譯設計