實時響應設計的幾個原則

發表於2016-07-03
實時響應設計的幾個原則

設計實時響應的使用者體驗時可能有用的幾個基本原則:

1、狀態清晰

使用者應該清楚系統當前所處的狀態,任何時候,程式應該向使用者傳達清楚當前發生了什麼並針對使用者的每一步操作給出清晰的反饋。

應用程式本身建立在一個非結構化的系統之上,其試圖向使用者提供結構化的資料。雖然實時響應的介面並不使用類似於頁面重新整理器這樣的固定識別符號,但它同樣可以使用恰當的訊號來標識狀態的改變。

例項:網路連線狀態

在我們使用移動裝置的時候,難免會碰到網路掉線的情況,這時候最好告訴使用者是由於超出程式控制的某種因素導致了這種意外情況。

實時響應設計的幾個原則

不好:網路掉線後並沒有告訴使用者

實時響應設計的幾個原則

好:出現清楚的通知告訴使用者網路掉線,系統正在嘗試重新連線

例項:載入狀態

低頻寬(網路環境差)、載入資料量大、多點連線等諸多因素都可能引起使用者在使用你的程式過程中需要花費一定時間等待。應對這種情況的方法是你要培養自己成為一個具有前瞻性的設計師,通過一定的方法凸顯出系統正在響應使用者行為並嘗試載入新資料,好讓使用者意識到這一過程。

實時響應設計的幾個原則

不好:系統沒有告知使用者他在與列表項互動後,系統就開始載入內容了

實時響應設計的幾個原則

好:頭部的進度指示器向使用者標明瞭載入過程,以及需要等待的時間

例項:確認狀態

應該積極響應使用者的操作,並給出結果的反饋,讓使用者意識到系統對其行為目標的狀態是關心的。

實時響應設計的幾個原則

不好:使用者到新頁面後,系統並沒有告知其前面的刪除操作是否成功了

實時響應設計的幾個原則

好:使用一個提示強化了系統對刪除操作的響應

2、有預期的改變

使用者應該清楚預期效果是怎樣的,就是說程式應該向使用者表明在他們操作就將發生什麼。

在一套邏輯嚴謹(按部就班,模式固定)的系統裡,出現一些驚喜(意外)並不會令人愉悅。對於一輛負責運送乘客的普通汽車,如果你關心的是其精密的機械結構,那麼爆胎和發動機歇火就是在你的關注點之外的意外驚喜。 跟汽車類似的是,一個應用程式通過其精細的設計(相比於汽車通過其精密的機械結構滿足人們的需要)來滿足使用者的某種需求,然而不同於汽車的是,現在的數字媒體(應用程式)允許我們預料到將要發生的變化並提前告訴使用者。

例項:(1)傳達結果

當系統可能出現較強烈的狀態變化時,應該提前向使用者預示其行為操作所將帶來的結果,這樣也就給了使用者自己來把控即將發生的事情的機會,進而避免發生出其不意的“驚喜”。

實時響應設計的幾個原則

不好:沒有任何跡象或動作,新的資訊就出現在列表中

實時響應設計的幾個原則

好:當新的資訊準備好載入後,系統出現提示,使用者與之互動後方插入到列表中

例項:(2)使用骨骼框架

為了緩解使用者在等待資料載入時的長耗時,並讓頁面間的轉換過渡更為流暢,可以考慮在資料載入出來之前先向使用者顯示一個內容框架,讓使用者能夠預期到新頁面將要填充的資料型別和複雜度。這樣做帶來的另一個好處就是會讓使用者感覺到你的程式在響應使用者操作時還是相對及時的。

實時響應設計的幾個原則

不好:在頁面內容未載入完全之前,使用者不得不在第一個頁面一直等待

實時響應設計的幾個原則

好:在頁面內容未載入完全之前,頁面便跳轉,使用佔位符向使用者標明即將載入的資料型別和複雜度

3. 保持上下文環境統一協調

使用者應該清楚他們看到的內容從何而來,是屬於哪裡的。

在實時響應型別的應用程式中,通常情況下我們不可能看到系統的所有響應變化(有一些中間態可能在某些條件下才能觸發),這時候,我們設定並強調一條緩衝帶就顯得非常重要,它用來揭示每個頁面和按鈕跟其他元素的關係。這種做法就意味著我們建立了很多個標示,使用者依賴它可以在這些關聯的頁面、元素間流暢切換。

例項:(1)保持佈局一致

所有新的內容應該出現在一個可預期的位置,要讓使用者習慣於在程式中特定的關鍵位置點間穿梭轉換,儘量避擴音供多種方式給使用者來做同一件事情的做法,這會稀釋使用者對各個行為路徑的關注度和適應性。

實時響應設計的幾個原則

不好:新的資訊出現在不可預期的位置

實時響應設計的幾個原則

好:新資訊自當前列表頂部插入。使用者便漸漸意識到新資訊出現在列表上部

例項:(2)保持良好的狀態變化姿勢

如果關聯資訊間的狀態改變出現在一個不可預期的位置, 可以使用設計精巧的動效來向使用者傳達新內容的出現及對周圍資訊的影響。這種做法一定程度上延緩了使用者的體驗過程,但能使得狀態的變化過程非常清晰明瞭。

實時響應設計的幾個原則

不好:一條資訊插入列表後導致相鄰的資訊依次移位

實時響應設計的幾個原則

好:使用一個精細的動畫效果凸顯新內容的出現和相鄰內容的動位,給使用者一定的反應時間

例項:(3)記錄儲存滾動位置

當在兩屏內容間來回切換時,要確保使用者回到的是返回前在當前頁面的最後瀏覽位置。

實時響應設計的幾個原則

不好:滾動位置並未儲存,使用者要花時間重新定位上次的瀏覽位置

實時響應設計的幾個原則

好:儲存了瀏覽位置,使使用者能在頁面間放心切換

相關文章