91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

用困難分解法解決特殊場景的交互難題

2021-6-30    資深UI設(shè)計者

在B端產(chǎn)品中,經(jīng)常會出現(xiàn)層級深或者數(shù)據(jù)量過大而導(dǎo)致正常控件出現(xiàn)體驗問題,那在這方面的交互時,可以引入什么樣的新思路呢?

量變引起質(zhì)變的交互難題


作為唯物辯證法的基本規(guī)律之一,“量變引起質(zhì)變”適用于很多事物的發(fā)展規(guī)律,而我最近在交互設(shè)計中,也發(fā)現(xiàn)了很多類似的問題。例如一些常見的控件或者交互方式,在數(shù)據(jù)量龐大或者層級過多的特殊場景下,就變成了一種“蹂躪用戶”的存在。所以在一些特殊業(yè)務(wù)場景的B端產(chǎn)品中,當(dāng)“Corner Case”變成一種常態(tài),常見的控件就會開始因為“量變”而引發(fā)“質(zhì)變”,一下子成為用戶的困擾。













看了以上兩個案例,我們會發(fā)現(xiàn),常規(guī)的控件和常用的交互方式在這些“難搞”的場景下,都不再好用了。那我們是否能另辟蹊徑,利用一些其它的交互思維,來解決這些棘手的交互難題呢?


困難拆解法


其實一提到“棘手”,“困難”,大家可能多多少少,在網(wǎng)上聽過這樣的“雞湯”:“別畏懼困難,困難是可以拆解的,當(dāng)把一個困難拆解成一個一個小目標(biāo)去完成時,我們離總目標(biāo)就會越來越近了?!?

這就是我今天想聊的——“困難拆解法”。說到困難拆解法,無論是網(wǎng)上火爆的各類成功學(xué),還是一些成熟的項目管理理論(例如經(jīng)典的Work Breakdown Structure)都對此有詳細的、深層次的研究和實踐。我們通常會把這個思維應(yīng)用到復(fù)雜工作和項目的管理中去,但是我今天想做一個大膽的實驗,把困難拆解法應(yīng)用到交互設(shè)計中來,看看利用困難拆解法,能否解決我們上面提到的因為特殊業(yè)務(wù)場景而嚴(yán)重影響交互體驗的問題。



既然要做困難拆解,我們總不能隨意去拆解,總得有一些拆解的原則和方法論,以支撐行為的正確性?!俺晒W(xué)”中肯定很難找到詳細的方法論,那就參考一下Work Breakdown Structure中的拆解原則,來看一看是否可以應(yīng)用于交互設(shè)計的場景。

先一起來看下WBS中定義的分解原則:

  1. 將主體目標(biāo)逐步細化分解,最底層的日?;顒涌芍苯臃峙傻絺€人完成;

  2. 每個任務(wù)原則上要求分解到不能再細分為止;

  3. 日常活動要對應(yīng)到人、時間和資金投入;

  4. 整體拆解的任務(wù),最終可以支撐總?cè)蝿?wù)的完成。

如果我們從中提取一下關(guān)鍵意義,就是:

  1. 大目標(biāo)拆解成小目標(biāo);

  2. 拆分到最小顆粒度;

  3. 每個小目標(biāo)需要有對應(yīng)成本的衡量;

  4. 最終完成總目標(biāo)。


最后,可以將原則的關(guān)鍵意義與交互設(shè)計做一個對應(yīng):

  1. 將一個場景內(nèi)的大的任務(wù)目標(biāo),逐步分解成一個個小的交互行為

  2. 每個交互行為要盡可能的簡單直接,只針對一個交互目的的達成;

  3. 拆解的每一個小目標(biāo)都要有對應(yīng)的交互成本的計算;

  4. 整體拆解出的小的交互行為,最終可以支撐總?cè)蝿?wù)目標(biāo)的完成。


分析到這里,我們大概總結(jié)出了一些拆解的原則,但是仔細看這四條原則,大家會發(fā)現(xiàn),目前還少了一個概念的輸入:那就是交互成本。如果沒有交互成本的計量,那就沒辦法真正衡量出我們最后通過拆解制定出的方案,是否真正節(jié)省了用戶的交互成本,提升了任務(wù)效率。

所以,在開始拆解之前,還需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼爾森·諾曼(Nielsen Norman)將“交互成本”定義為用戶為實現(xiàn)其目標(biāo)而必須付出的身心努力的總和大多數(shù)初級設(shè)計人員都有這樣的誤解,即交互成本等于用戶完成任務(wù)所需的點擊次數(shù)。但是,它遠不止于此?!禝nteraction design is more than just user flows and clicks》(作者Richard Yang)一文中講到:交互成本可以分為物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的兩個最重要的組成部分是注意力記憶力。當(dāng)一項任務(wù)需要過多的注意力或記憶才能完成時,它將具有較高的心理交互成本(MIC),從而降低了可用性。

  • 對于不同類型的記憶都有廣泛的分類。最短的記憶類型稱為工作記憶,通常在任務(wù)過程中僅持續(xù)幾秒鐘。換句話說,當(dāng)我們參與其他認知過程時,我們的工作記憶負責(zé)我們可以掌握的信息。米勒定律指出,普通人一次只能在他們的工作記憶中保留5-11件物品。完成產(chǎn)品中的任務(wù)所需的工作記憶與強加給用戶的心理互動成本(MIC)負擔(dān)成正比。所以,任務(wù)不應(yīng)要求用戶隨時在其工作記憶中保留七個以上的項目。在極少數(shù)情況下,如若必須要求用戶在其記憶中保存11個以上的項目,請使用“區(qū)塊”減輕其精神負擔(dān)?!皡^(qū)塊”指將信息分組。

  • 與注意力和記憶有關(guān)的另一個考慮因素是“??硕伞薄4藯l定律指出,“做出決定所需的時間會隨著選擇的數(shù)量和復(fù)雜性而增加”。




2. 物理交互成本(PIC)

  • 常見的物理交互成本(PIC)因素包括到達距離和目標(biāo)寬度,用戶輸入的數(shù)量以及完成任務(wù)所需的操作等。

  • 費茨定律指出,點擊目標(biāo)的時間(例如,單擊按鈕)是距輸入設(shè)備的距離和目標(biāo)的擊中框?qū)挾鹊暮瘮?shù)。例如,如果鼠標(biāo)光標(biāo)很遠且按鈕很小,則單擊桌面上的按鈕將花費更長的時間。

  • 評估物理交互成本(PIC)的最佳方法是“任務(wù)分析”和檢查可用性指標(biāo),例如“任務(wù)時間”。





3. 交互路徑和動機
在某些情況下,用戶可能采取多種路徑來實現(xiàn)其目標(biāo)。用戶根據(jù)“預(yù)期效用”的概念來決定采用哪種路徑。

  • 用戶權(quán)衡每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的路徑。用戶趨向于選擇自己預(yù)期中交互成本更低的那條路徑。如果操作路徑不直觀或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)較高,他們最終也會選擇他們更熟悉的路徑。

  • 具有較高動力(例如,由于品牌運營)的用戶更有可能承擔(dān)較高的互動成本以實現(xiàn)其目標(biāo)。假如消費者是某品牌的忠粉,那即使這個網(wǎng)站的交互成本很高,那么用戶可能仍有足夠的動力去完成他們的任務(wù)。然而,如果用戶購買常規(guī)產(chǎn)品時付款流程的交互成本很高的話,那么他們很可能去其它網(wǎng)站購買。


從以上具體理論的闡述中我們可以看出,在評估交互成本的時候,步驟數(shù),點擊次數(shù)以及操作路徑長短這些我們?nèi)粘W铌P(guān)注的幾個維度,并不能完全評判交互行為的好壞。而注意力成本和記憶力成本,以及預(yù)期效用,往往也會成為決定一種交互行為成敗的關(guān)鍵,而對于上面提到的“困難場景”,也正是因為數(shù)據(jù)量過大和層級過深致使用戶的注意力和記憶力成本階梯式增加,從而導(dǎo)致常規(guī)組件體驗感崩塌。
下圖中,我具體整理了各個交互成本組成的因素,以及會導(dǎo)致的結(jié)果。

如何拆解?案例一


我們詳細聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來開始進入正題,我們通過困難拆解法和交互成本計算的邏輯,來解決上面提到的兩個案例的問題。

首先,我們先拆解一個簡單的案例。

拆解困難法的核心是將一個大的難以達成的目標(biāo)拆成各個小目標(biāo),所以我們需要先確定這個案例的核心困難點。
第一步,分析問題:
這個方案的優(yōu)點就在于:在物理交互成本上,省了一步點擊,將信息直接po到定位的周圍,根據(jù)格式塔的接近原則,用戶可以很容易的尋找和查看相應(yīng)定位對象的詳情。但是這些優(yōu)點只限于在定位對象少,展示的詳情信息數(shù)據(jù)量小的場景內(nèi)。一旦處于數(shù)據(jù)量龐大的場景下,就會產(chǎn)生大量的信息雜揉。定位與詳情相互交織、覆蓋,非常混亂。如果用戶想在這種界面去尋找信息的話,將需要付出非常大的注意力成本,大大加長了用戶選擇信息的時間。心理交互成本的增加,對于用戶的使用情緒,也會產(chǎn)生消極的影響。
所以,此案例的核心問題就是:移動端屏幕很小,在有限的展示范圍內(nèi),無法容納大量的數(shù)據(jù),所以導(dǎo)致信息雜糅在一起,對用戶使用造成了極大的干擾。

那怎么去解決這個核心問題呢?讓我們開始進行第二步:拆解方案的主體。
通過分析可知,這個案例最小顆粒度的兩個交互主體為:

  1. 在地圖上找到關(guān)注區(qū)域的定位標(biāo)記;

  2. 查看定位標(biāo)記相對應(yīng)的詳情數(shù)據(jù)。

那么現(xiàn)在,根據(jù)上面提到的拆解原則,我們要將本來一步到位的交互行為,拆分成兩個最小顆粒度的交互行為,然后分成兩步來達成同樣的任務(wù)目標(biāo)。
第一步,在地圖上只留下定位標(biāo)記的顯示,這樣的目的主要在于讓用戶只專注于尋找相應(yīng)區(qū)域的定位標(biāo)記。在去掉了了大量數(shù)據(jù)信息之后,頁面就一下會清爽許多;



而第二步就是將查看詳細數(shù)據(jù)拆分成一個操作,即點擊某一個定位標(biāo)記時,詳情數(shù)據(jù)通過彈出卡片,或者彈出彈窗的形式,去陳列詳細數(shù)據(jù)。(如果詳情數(shù)據(jù)少,就可以使用卡片的形式,這樣不會打斷當(dāng)前操作;如果詳情數(shù)據(jù)量很大,并且需要足夠的拓展性以便后期增加詳情,則可以使用彈窗的形式。)這么做則是為了讓用戶更專注于查看他所關(guān)注的詳情信息。



闡述完解決方案,根據(jù)原則的3,4條,我們一起衡量下方案對交互體驗和任務(wù)效率是否有提升。
首先從成本角度來衡量方案:

1.物理交互成本:

  • 多增加了一個點擊步驟。

2.心理交互成本:

  • 去除了界面中大量雜糅的信息,讓用戶可以清晰、迅速地查看地圖位置,并高效的尋找用戶所關(guān)注的區(qū)域定位;

  • 讓用戶只專注于查看他所關(guān)注的定位信息,避免了其它大量信息的干擾。即使通過粗略的估算,也可以算出來,這多點擊一下的交互時間,要比在大量信息中去檢索信息的時間要小得多。


其次從任務(wù)目標(biāo)角度來衡量方案:
1.達成了與原方案相同的目的,即可以尋找某個區(qū)域內(nèi)的定位標(biāo)記,并可以查看對應(yīng)的詳情。
2.解決了信息雜糅在一起,對用戶使用造成極大干擾的交互難題。
所以,綜合成本和目標(biāo)來看結(jié)果,這“多一步”的代價,實際大大提高了用戶的檢索效率。


如何拆解?案例二


當(dāng)然,上面這個例子過于簡單,第一交互路徑短,第二也屬于比較常規(guī)的交互解決方案。那接下來,我們一起來分析一個稍微復(fù)雜點的案例,看一看,當(dāng)“海量數(shù)據(jù)”再加上“深層級”時,我們用這種方式是否還能解決。

首先呢,還是老套路,先一起來確定一下我們要核心解決的問題:


首先總結(jié)這個案例的優(yōu)點:可以將操作在一個頁面內(nèi)全部鋪開,并且通過點擊快速打開下級頁面,然后在一個頁面里對多層數(shù)據(jù)進行查看和操作。這種交互在數(shù)據(jù)較少的場景里,是沒有問題的。
但是,在移動端場景中,因為屏幕大小有限,一直存在著數(shù)據(jù)展示條目十分局限的問題,而當(dāng)層級過深甚至數(shù)據(jù)條目過多時,這種問題就會愈加愈烈。所以,如果生產(chǎn)環(huán)境中長期處于數(shù)據(jù)量非常龐大的狀態(tài),就會引出以下問題:


  1. 在一條完整的下拉控件中,只有第一層級的數(shù)量是恒定為1的,而二三四層的數(shù)據(jù)量都有可能為多個,尤其第四層的詳情部分,數(shù)據(jù)條目會更多。所以在一個下拉控件中,假設(shè)每一層級都有數(shù)據(jù)的話,用戶至少會看到4條信息。而如果二級信息大于兩條的話,在全展開的情況下,就已經(jīng)占據(jù)了一整屏的位置(場景三),從而導(dǎo)致用戶在一屏下,至少要去看10-12行(數(shù)量隨著層級4數(shù)據(jù)條目的變化有所增減)的信息。假設(shè)我們再劃一屏,用戶就至少需要閱讀和記憶20-24行信息。前面的米勒定律也提到,普通人一次只能在他們的工作記憶中保留5-11條信息。完成產(chǎn)品中的任務(wù)所需的工作記憶與強加給用戶的心理互動成本(MIC)負擔(dān)成正比。用戶在這個過程中面對海量數(shù)據(jù),以及繁復(fù)的層級,會付出大量的注意力和記憶力成本,導(dǎo)致用戶在使用產(chǎn)品的過程中,心理交互成本呈階梯式增長。

  2. 當(dāng)一個下拉控件二三四層的數(shù)據(jù)量過大時(圖示場景二、三),除了會增加用戶的注意力和記憶力成本,還會增加反復(fù)操作的頻次以及用戶的錯誤成本,一旦操作錯誤或者看錯數(shù)據(jù),重新找到這條數(shù)據(jù)的成本會變的很高。如果滑動一下的物理交互成本為1,那么在多次滑動的情況下,我們滑動的成本就會變?yōu)?*X,這個X變量會隨著數(shù)據(jù)量的增大而成正比的不斷增加。


根據(jù)??硕晌覀兛芍?wbr style="outline:0px;margin:0px;padding:0px;">決策所需要花費的時間隨著選擇的數(shù)量和復(fù)雜性增加而增加。
所以改進方案的核心點就是:減少頁面內(nèi)的層級和數(shù)據(jù)量,降低用戶選擇的復(fù)雜性。
但是從業(yè)務(wù)上來說,肯定不能直接去減少數(shù)據(jù)的總量,所以我們必須從交互的角度,去制定出可以減少用戶選擇的方案。找到了要核心解決的問題,接下來我們就開始“拆解”。
那么從哪個角度開始拆解呢?目前的狀態(tài)是:隨著每個層級的不斷鋪開,用戶查看的數(shù)據(jù)就會不斷增加。那既然數(shù)據(jù)總量上我們無法動刀,那我們就從層級入手,把每個層級單獨拆出來,根據(jù)拆分原則的最小顆粒度原則,給用戶每一屏提供最少層級的選項,讓用戶專注于最少數(shù)據(jù)的篩選。具體怎么做呢?一起來看看下面的解決方案。


首先,我們先來拆分第一層級。第一層級是展開后面層級的前提,所以我將第一層級,設(shè)計成了一個頂部切換。點開切換后,會跳出彈窗,這個彈窗中會包含所有的第一層級的選項。隨著彈窗中不同選項的切換,我們會立馬回到列表頁面,而頁面下方的數(shù)據(jù)也會刷新為此一級選項下的所有數(shù)據(jù)。因為第一層級的數(shù)據(jù)量,相比其它層級,在常規(guī)情況下是最少的,所以面對更少的選擇,用戶便可更專注、更迅速、更便捷的鎖定任務(wù)目標(biāo)。



其次,我們將二層與三層,作為展開式的卡片,形成一個卡片式列表。(這里將二三層放在一個頁面內(nèi),沒有拆到最小顆粒度讓其形成兩個頁面,主要是為了控制跳轉(zhuǎn)次數(shù)。)列表中的數(shù)據(jù)只包含對應(yīng)的第一層級內(nèi)的數(shù)據(jù),所以這個頁面中展示的數(shù)據(jù)比起之前場景中的“大而全”,已經(jīng)得到一個非常明顯的過濾。下拉層級,也減少為兩層,層級復(fù)雜度相比之前簡單了許多。另一方面,每條二層的數(shù)據(jù)都形成了一個獨立的卡片,這樣在視覺上,會有一個明顯的區(qū)分。無論是數(shù)據(jù)量上的選擇復(fù)雜度,還是視覺上對于層級的區(qū)分度,都大幅度縮小了用戶的辨別成本。


最后,因為第四層經(jīng)常會囊括大量數(shù)據(jù),我們將第四層單獨提出來作為一個獨立頁面(或彈窗),通過點擊第三層的條目進入。獨立的頁面第一可以大大提升用戶對于場景的專注性,第二有利于數(shù)據(jù)的拓展性,即使再多的信息列入,也不會影響其它層級的展示效果。而如果這些詳情信息還分為不同類別的話,我們甚至還可以加入TAB篩選,這樣就可以更加快速的通過類別篩選過濾出用戶想查看的信息。



老規(guī)矩,在闡述完方案后,我們依舊根據(jù)原則的3,4條,對方案進行各角度的衡量。


成本角度:

  • 物理交互成本:點擊數(shù)有小幅度增加,而因為屏幕內(nèi)數(shù)據(jù)量減少,下劃數(shù)得到了銳減,另外跳轉(zhuǎn)步驟增多。頁面的數(shù)據(jù)量越大,增幅的物理交互成本越少。

  • 心理交互成本:用戶在每一個頁面所需要做出的信息篩選得到了大幅的減少,每一步足夠直觀。因為層級頁面拆分,而導(dǎo)致的數(shù)據(jù)大量過濾可以幫助用戶完成快速決策。而信息篩選節(jié)省出來的時間成本,大大高于因點擊而增加的時間成本。低量心理成本的付出,也會提升用戶的預(yù)期效用,從而使用戶忽略一定程度的物理交互成本。

任務(wù)目標(biāo)角度:
這個方案,把選擇和查看多層數(shù)據(jù)條目,拆解成了多步操作,讓用戶在完成每一個層級內(nèi)的查看和篩選中,去逐步完成對所有層級的查看和篩選。


拆解之后,每個層級頁面中為用戶減少了大量的選擇和干擾,降低了用戶選擇的復(fù)雜性,幫助用戶節(jié)省更多的選擇任務(wù)時間。解決了用戶在大量信息中去海選的痛點。
所以從結(jié)果來看,通過拆解,既完成了場景下的任務(wù)目標(biāo)、解決了之前存在的交互難題,也節(jié)省了大量的心理交互成本,提高了用戶的預(yù)期效用。


困難拆解等于繞圈子?




看到這里,也許有人會說,感覺所謂的“拆解”,都是在“繞圈子”。其實沒錯,我們以上的兩個方案都多繞了一步。但是交互中本就沒有最完美的方案,只有最適合場景的方案。如果可以解決核心的場景問題,對于低幅度的交互成本的增加是可以接受的。
另外,我們有時候在設(shè)計交互方案時,經(jīng)常會過于計較物理交互成本,將“省一步”封為了交互設(shè)計的“金科玉律”,從而忽略心理交互成本和預(yù)期效用對用戶體驗的影響,結(jié)果導(dǎo)致用戶對于產(chǎn)品的選擇性和體驗感一起降低。
所以當(dāng)用戶面對高額心理交互成本的困境時,不妨付出一些“提升物理交互成本”的代價,也許這多繞的一圈,或者多走的一步,反而會讓用戶更快的通往“羅馬”。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷  作者:回去干活

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.b186.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


在B端產(chǎn)品中,經(jīng)常會出現(xiàn)層級深或者數(shù)據(jù)量過大而導(dǎo)致正??丶霈F(xiàn)體驗問題,那在這方面的交互時,可以引入什么樣的新思路呢?

量變引起質(zhì)變的交互難題


作為唯物辯證法的基本規(guī)律之一,“量變引起質(zhì)變”適用于很多事物的發(fā)展規(guī)律,而我最近在交互設(shè)計中,也發(fā)現(xiàn)了很多類似的問題。例如一些常見的控件或者交互方式,在數(shù)據(jù)量龐大或者層級過多的特殊場景下,就變成了一種“蹂躪用戶”的存在。所以在一些特殊業(yè)務(wù)場景的B端產(chǎn)品中,當(dāng)“Corner Case”變成一種常態(tài),常見的控件就會開始因為“量變”而引發(fā)“質(zhì)變”,一下子成為用戶的困擾。













看了以上兩個案例,我們會發(fā)現(xiàn),常規(guī)的控件和常用的交互方式在這些“難搞”的場景下,都不再好用了。那我們是否能另辟蹊徑,利用一些其它的交互思維,來解決這些棘手的交互難題呢?


困難拆解法


其實一提到“棘手”,“困難”,大家可能多多少少,在網(wǎng)上聽過這樣的“雞湯”:“別畏懼困難,困難是可以拆解的,當(dāng)把一個困難拆解成一個一個小目標(biāo)去完成時,我們離總目標(biāo)就會越來越近了?!?

這就是我今天想聊的——“困難拆解法”。說到困難拆解法,無論是網(wǎng)上火爆的各類成功學(xué),還是一些成熟的項目管理理論(例如經(jīng)典的Work Breakdown Structure)都對此有詳細的、深層次的研究和實踐。我們通常會把這個思維應(yīng)用到復(fù)雜工作和項目的管理中去,但是我今天想做一個大膽的實驗,把困難拆解法應(yīng)用到交互設(shè)計中來,看看利用困難拆解法,能否解決我們上面提到的因為特殊業(yè)務(wù)場景而嚴(yán)重影響交互體驗的問題。



既然要做困難拆解,我們總不能隨意去拆解,總得有一些拆解的原則和方法論,以支撐行為的正確性?!俺晒W(xué)”中肯定很難找到詳細的方法論,那就參考一下Work Breakdown Structure中的拆解原則,來看一看是否可以應(yīng)用于交互設(shè)計的場景。

先一起來看下WBS中定義的分解原則:

  1. 將主體目標(biāo)逐步細化分解,最底層的日?;顒涌芍苯臃峙傻絺€人完成;

  2. 每個任務(wù)原則上要求分解到不能再細分為止;

  3. 日?;顒右獙?yīng)到人、時間和資金投入;

  4. 整體拆解的任務(wù),最終可以支撐總?cè)蝿?wù)的完成。

如果我們從中提取一下關(guān)鍵意義,就是:

  1. 大目標(biāo)拆解成小目標(biāo);

  2. 拆分到最小顆粒度;

  3. 每個小目標(biāo)需要有對應(yīng)成本的衡量;

  4. 最終完成總目標(biāo)。


最后,可以將原則的關(guān)鍵意義與交互設(shè)計做一個對應(yīng):

  1. 將一個場景內(nèi)的大的任務(wù)目標(biāo),逐步分解成一個個小的交互行為

  2. 每個交互行為要盡可能的簡單直接,只針對一個交互目的的達成;

  3. 拆解的每一個小目標(biāo)都要有對應(yīng)的交互成本的計算;

  4. 整體拆解出的小的交互行為,最終可以支撐總?cè)蝿?wù)目標(biāo)的完成。


分析到這里,我們大概總結(jié)出了一些拆解的原則,但是仔細看這四條原則,大家會發(fā)現(xiàn),目前還少了一個概念的輸入:那就是交互成本。如果沒有交互成本的計量,那就沒辦法真正衡量出我們最后通過拆解制定出的方案,是否真正節(jié)省了用戶的交互成本,提升了任務(wù)效率。

所以,在開始拆解之前,還需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼爾森·諾曼(Nielsen Norman)將“交互成本”定義為用戶為實現(xiàn)其目標(biāo)而必須付出的身心努力的總和大多數(shù)初級設(shè)計人員都有這樣的誤解,即交互成本等于用戶完成任務(wù)所需的點擊次數(shù)。但是,它遠不止于此。《Interaction design is more than just user flows and clicks》(作者Richard Yang)一文中講到:交互成本可以分為物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的兩個最重要的組成部分是注意力記憶力。當(dāng)一項任務(wù)需要過多的注意力或記憶才能完成時,它將具有較高的心理交互成本(MIC),從而降低了可用性。

  • 對于不同類型的記憶都有廣泛的分類。最短的記憶類型稱為工作記憶,通常在任務(wù)過程中僅持續(xù)幾秒鐘。換句話說,當(dāng)我們參與其他認知過程時,我們的工作記憶負責(zé)我們可以掌握的信息。米勒定律指出,普通人一次只能在他們的工作記憶中保留5-11件物品。完成產(chǎn)品中的任務(wù)所需的工作記憶與強加給用戶的心理互動成本(MIC)負擔(dān)成正比。所以,任務(wù)不應(yīng)要求用戶隨時在其工作記憶中保留七個以上的項目。在極少數(shù)情況下,如若必須要求用戶在其記憶中保存11個以上的項目,請使用“區(qū)塊”減輕其精神負擔(dān)。“區(qū)塊”指將信息分組。

  • 與注意力和記憶有關(guān)的另一個考慮因素是“??硕伞薄4藯l定律指出,“做出決定所需的時間會隨著選擇的數(shù)量和復(fù)雜性而增加”。




2. 物理交互成本(PIC)

  • 常見的物理交互成本(PIC)因素包括到達距離和目標(biāo)寬度,用戶輸入的數(shù)量以及完成任務(wù)所需的操作等。

  • 費茨定律指出,點擊目標(biāo)的時間(例如,單擊按鈕)是距輸入設(shè)備的距離和目標(biāo)的擊中框?qū)挾鹊暮瘮?shù)。例如,如果鼠標(biāo)光標(biāo)很遠且按鈕很小,則單擊桌面上的按鈕將花費更長的時間。

  • 評估物理交互成本(PIC)的最佳方法是“任務(wù)分析”和檢查可用性指標(biāo),例如“任務(wù)時間”。





3. 交互路徑和動機
在某些情況下,用戶可能采取多種路徑來實現(xiàn)其目標(biāo)。用戶根據(jù)“預(yù)期效用”的概念來決定采用哪種路徑。

  • 用戶權(quán)衡每個操作的收益和成本,然后選擇收益與成本之間最佳平衡的路徑。用戶趨向于選擇自己預(yù)期中交互成本更低的那條路徑。如果操作路徑不直觀或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)較高,他們最終也會選擇他們更熟悉的路徑。

  • 具有較高動力(例如,由于品牌運營)的用戶更有可能承擔(dān)較高的互動成本以實現(xiàn)其目標(biāo)。假如消費者是某品牌的忠粉,那即使這個網(wǎng)站的交互成本很高,那么用戶可能仍有足夠的動力去完成他們的任務(wù)。然而,如果用戶購買常規(guī)產(chǎn)品時付款流程的交互成本很高的話,那么他們很可能去其它網(wǎng)站購買。


從以上具體理論的闡述中我們可以看出,在評估交互成本的時候,步驟數(shù),點擊次數(shù)以及操作路徑長短這些我們?nèi)粘W铌P(guān)注的幾個維度,并不能完全評判交互行為的好壞。而注意力成本和記憶力成本,以及預(yù)期效用,往往也會成為決定一種交互行為成敗的關(guān)鍵,而對于上面提到的“困難場景”,也正是因為數(shù)據(jù)量過大和層級過深致使用戶的注意力和記憶力成本階梯式增加,從而導(dǎo)致常規(guī)組件體驗感崩塌。
下圖中,我具體整理了各個交互成本組成的因素,以及會導(dǎo)致的結(jié)果。

如何拆解?案例一


我們詳細聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來開始進入正題,我們通過困難拆解法和交互成本計算的邏輯,來解決上面提到的兩個案例的問題。

首先,我們先拆解一個簡單的案例。

拆解困難法的核心是將一個大的難以達成的目標(biāo)拆成各個小目標(biāo),所以我們需要先確定這個案例的核心困難點。
第一步,分析問題:
這個方案的優(yōu)點就在于:在物理交互成本上,省了一步點擊,將信息直接po到定位的周圍,根據(jù)格式塔的接近原則,用戶可以很容易的尋找和查看相應(yīng)定位對象的詳情。但是這些優(yōu)點只限于在定位對象少,展示的詳情信息數(shù)據(jù)量小的場景內(nèi)。一旦處于數(shù)據(jù)量龐大的場景下,就會產(chǎn)生大量的信息雜揉。定位與詳情相互交織、覆蓋,非?;靵y。如果用戶想在這種界面去尋找信息的話,將需要付出非常大的注意力成本,大大加長了用戶選擇信息的時間。心理交互成本的增加,對于用戶的使用情緒,也會產(chǎn)生消極的影響。
所以,此案例的核心問題就是:移動端屏幕很小,在有限的展示范圍內(nèi),無法容納大量的數(shù)據(jù),所以導(dǎo)致信息雜糅在一起,對用戶使用造成了極大的干擾。

那怎么去解決這個核心問題呢?讓我們開始進行第二步:拆解方案的主體。
通過分析可知,這個案例最小顆粒度的兩個交互主體為:

  1. 在地圖上找到關(guān)注區(qū)域的定位標(biāo)記;

  2. 查看定位標(biāo)記相對應(yīng)的詳情數(shù)據(jù)。

那么現(xiàn)在,根據(jù)上面提到的拆解原則,我們要將本來一步到位的交互行為,拆分成兩個最小顆粒度的交互行為,然后分成兩步來達成同樣的任務(wù)目標(biāo)。
第一步,在地圖上只留下定位標(biāo)記的顯示,這樣的目的主要在于讓用戶只專注于尋找相應(yīng)區(qū)域的定位標(biāo)記。在去掉了了大量數(shù)據(jù)信息之后,頁面就一下會清爽許多;



而第二步就是將查看詳細數(shù)據(jù)拆分成一個操作,即點擊某一個定位標(biāo)記時,詳情數(shù)據(jù)通過彈出卡片,或者彈出彈窗的形式,去陳列詳細數(shù)據(jù)。(如果詳情數(shù)據(jù)少,就可以使用卡片的形式,這樣不會打斷當(dāng)前操作;如果詳情數(shù)據(jù)量很大,并且需要足夠的拓展性以便后期增加詳情,則可以使用彈窗的形式。)這么做則是為了讓用戶更專注于查看他所關(guān)注的詳情信息。



闡述完解決方案,根據(jù)原則的3,4條,我們一起衡量下方案對交互體驗和任務(wù)效率是否有提升。
首先從成本角度來衡量方案:

1.物理交互成本:

  • 多增加了一個點擊步驟。

2.心理交互成本:

  • 去除了界面中大量雜糅的信息,讓用戶可以清晰、迅速地查看地圖位置,并高效的尋找用戶所關(guān)注的區(qū)域定位;

  • 讓用戶只專注于查看他所關(guān)注的定位信息,避免了其它大量信息的干擾。即使通過粗略的估算,也可以算出來,這多點擊一下的交互時間,要比在大量信息中去檢索信息的時間要小得多。


其次從任務(wù)目標(biāo)角度來衡量方案:
1.達成了與原方案相同的目的,即可以尋找某個區(qū)域內(nèi)的定位標(biāo)記,并可以查看對應(yīng)的詳情。
2.解決了信息雜糅在一起,對用戶使用造成極大干擾的交互難題。
所以,綜合成本和目標(biāo)來看結(jié)果,這“多一步”的代價,實際大大提高了用戶的檢索效率。


如何拆解?案例二


當(dāng)然,上面這個例子過于簡單,第一交互路徑短,第二也屬于比較常規(guī)的交互解決方案。那接下來,我們一起來分析一個稍微復(fù)雜點的案例,看一看,當(dāng)“海量數(shù)據(jù)”再加上“深層級”時,我們用這種方式是否還能解決。

首先呢,還是老套路,先一起來確定一下我們要核心解決的問題:


首先總結(jié)這個案例的優(yōu)點:可以將操作在一個頁面內(nèi)全部鋪開,并且通過點擊快速打開下級頁面,然后在一個頁面里對多層數(shù)據(jù)進行查看和操作。這種交互在數(shù)據(jù)較少的場景里,是沒有問題的。
但是,在移動端場景中,因為屏幕大小有限,一直存在著數(shù)據(jù)展示條目十分局限的問題,而當(dāng)層級過深甚至數(shù)據(jù)條目過多時,這種問題就會愈加愈烈。所以,如果生產(chǎn)環(huán)境中長期處于數(shù)據(jù)量非常龐大的狀態(tài),就會引出以下問題:


  1. 在一條完整的下拉控件中,只有第一層級的數(shù)量是恒定為1的,而二三四層的數(shù)據(jù)量都有可能為多個,尤其第四層的詳情部分,數(shù)據(jù)條目會更多。所以在一個下拉控件中,假設(shè)每一層級都有數(shù)據(jù)的話,用戶至少會看到4條信息。而如果二級信息大于兩條的話,在全展開的情況下,就已經(jīng)占據(jù)了一整屏的位置(場景三),從而導(dǎo)致用戶在一屏下,至少要去看10-12行(數(shù)量隨著層級4數(shù)據(jù)條目的變化有所增減)的信息。假設(shè)我們再劃一屏,用戶就至少需要閱讀和記憶20-24行信息。前面的米勒定律也提到,普通人一次只能在他們的工作記憶中保留5-11條信息。完成產(chǎn)品中的任務(wù)所需的工作記憶與強加給用戶的心理互動成本(MIC)負擔(dān)成正比。用戶在這個過程中面對海量數(shù)據(jù),以及繁復(fù)的層級,會付出大量的注意力和記憶力成本,導(dǎo)致用戶在使用產(chǎn)品的過程中,心理交互成本呈階梯式增長。

  2. 當(dāng)一個下拉控件二三四層的數(shù)據(jù)量過大時(圖示場景二、三),除了會增加用戶的注意力和記憶力成本,還會增加反復(fù)操作的頻次以及用戶的錯誤成本,一旦操作錯誤或者看錯數(shù)據(jù),重新找到這條數(shù)據(jù)的成本會變的很高。如果滑動一下的物理交互成本為1,那么在多次滑動的情況下,我們滑動的成本就會變?yōu)?*X,這個X變量會隨著數(shù)據(jù)量的增大而成正比的不斷增加。


根據(jù)希克定律我們可知:決策所需要花費的時間隨著選擇的數(shù)量和復(fù)雜性增加而增加。
所以改進方案的核心點就是:減少頁面內(nèi)的層級和數(shù)據(jù)量,降低用戶選擇的復(fù)雜性。
但是從業(yè)務(wù)上來說,肯定不能直接去減少數(shù)據(jù)的總量,所以我們必須從交互的角度,去制定出可以減少用戶選擇的方案。找到了要核心解決的問題,接下來我們就開始“拆解”。
那么從哪個角度開始拆解呢?目前的狀態(tài)是:隨著每個層級的不斷鋪開,用戶查看的數(shù)據(jù)就會不斷增加。那既然數(shù)據(jù)總量上我們無法動刀,那我們就從層級入手,把每個層級單獨拆出來,根據(jù)拆分原則的最小顆粒度原則,給用戶每一屏提供最少層級的選項,讓用戶專注于最少數(shù)據(jù)的篩選。具體怎么做呢?一起來看看下面的解決方案。


首先,我們先來拆分第一層級。第一層級是展開后面層級的前提,所以我將第一層級,設(shè)計成了一個頂部切換。點開切換后,會跳出彈窗,這個彈窗中會包含所有的第一層級的選項。隨著彈窗中不同選項的切換,我們會立馬回到列表頁面,而頁面下方的數(shù)據(jù)也會刷新為此一級選項下的所有數(shù)據(jù)。因為第一層級的數(shù)據(jù)量,相比其它層級,在常規(guī)情況下是最少的,所以面對更少的選擇,用戶便可更專注、更迅速、更便捷的鎖定任務(wù)目標(biāo)。



其次,我們將二層與三層,作為展開式的卡片,形成一個卡片式列表。(這里將二三層放在一個頁面內(nèi),沒有拆到最小顆粒度讓其形成兩個頁面,主要是為了控制跳轉(zhuǎn)次數(shù)。)列表中的數(shù)據(jù)只包含對應(yīng)的第一層級內(nèi)的數(shù)據(jù),所以這個頁面中展示的數(shù)據(jù)比起之前場景中的“大而全”,已經(jīng)得到一個非常明顯的過濾。下拉層級,也減少為兩層,層級復(fù)雜度相比之前簡單了許多。另一方面,每條二層的數(shù)據(jù)都形成了一個獨立的卡片,這樣在視覺上,會有一個明顯的區(qū)分。無論是數(shù)據(jù)量上的選擇復(fù)雜度,還是視覺上對于層級的區(qū)分度,都大幅度縮小了用戶的辨別成本。


最后,因為第四層經(jīng)常會囊括大量數(shù)據(jù),我們將第四層單獨提出來作為一個獨立頁面(或彈窗),通過點擊第三層的條目進入。獨立的頁面第一可以大大提升用戶對于場景的專注性,第二有利于數(shù)據(jù)的拓展性,即使再多的信息列入,也不會影響其它層級的展示效果。而如果這些詳情信息還分為不同類別的話,我們甚至還可以加入TAB篩選,這樣就可以更加快速的通過類別篩選過濾出用戶想查看的信息。



老規(guī)矩,在闡述完方案后,我們依舊根據(jù)原則的3,4條,對方案進行各角度的衡量。


成本角度:

  • 物理交互成本:點擊數(shù)有小幅度增加,而因為屏幕內(nèi)數(shù)據(jù)量減少,下劃數(shù)得到了銳減,另外跳轉(zhuǎn)步驟增多。頁面的數(shù)據(jù)量越大,增幅的物理交互成本越少。

  • 心理交互成本:用戶在每一個頁面所需要做出的信息篩選得到了大幅的減少,每一步足夠直觀。因為層級頁面拆分,而導(dǎo)致的數(shù)據(jù)大量過濾可以幫助用戶完成快速決策。而信息篩選節(jié)省出來的時間成本,大大高于因點擊而增加的時間成本。低量心理成本的付出,也會提升用戶的預(yù)期效用,從而使用戶忽略一定程度的物理交互成本。

任務(wù)目標(biāo)角度:
這個方案,把選擇和查看多層數(shù)據(jù)條目,拆解成了多步操作,讓用戶在完成每一個層級內(nèi)的查看和篩選中,去逐步完成對所有層級的查看和篩選。


拆解之后,每個層級頁面中為用戶減少了大量的選擇和干擾,降低了用戶選擇的復(fù)雜性,幫助用戶節(jié)省更多的選擇任務(wù)時間。解決了用戶在大量信息中去海選的痛點。
所以從結(jié)果來看,通過拆解,既完成了場景下的任務(wù)目標(biāo)、解決了之前存在的交互難題,也節(jié)省了大量的心理交互成本,提高了用戶的預(yù)期效用。


困難拆解等于繞圈子?




看到這里,也許有人會說,感覺所謂的“拆解”,都是在“繞圈子”。其實沒錯,我們以上的兩個方案都多繞了一步。但是交互中本就沒有最完美的方案,只有最適合場景的方案。如果可以解決核心的場景問題,對于低幅度的交互成本的增加是可以接受的。
另外,我們有時候在設(shè)計交互方案時,經(jīng)常會過于計較物理交互成本,將“省一步”封為了交互設(shè)計的“金科玉律”,從而忽略心理交互成本和預(yù)期效用對用戶體驗的影響,結(jié)果導(dǎo)致用戶對于產(chǎn)品的選擇性和體驗感一起降低。
所以當(dāng)用戶面對高額心理交互成本的困境時,不妨付出一些“提升物理交互成本”的代價,也許這多繞的一圈,或者多走的一步,反而會讓用戶更快的通往“羅馬”。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷  作者:回去干活

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.b186.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.b186.net

存檔