2016-11-1 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
企業(yè)應(yīng)用的復(fù)雜性決定了在用戶(hù)使用過(guò)程中難免會(huì)需要通過(guò)幫助來(lái)解決用戶(hù)遇到難題或者通過(guò)幫助的設(shè)計(jì)來(lái)引導(dǎo)用戶(hù)順利開(kāi)始任務(wù)。接下來(lái)讓我們共同類(lèi)型以及該如何設(shè)計(jì)這些幫助。
幫助設(shè)計(jì)的元素
1.文本
運(yùn)用簡(jiǎn)短的文字給用戶(hù)提供恰當(dāng)?shù)膸椭畔?,?duì)能夠用一句話(huà)說(shuō)明白的事情,決不擺弄文采的變出兩三句話(huà)甚至是一段話(huà)出來(lái)。太多的文字用戶(hù)選擇的是忽略而不是閱讀,用戶(hù)并不希望在你的產(chǎn)品幫助文本讀出詩(shī)意,而是簡(jiǎn)單明確的告訴他們這是什么情況,你可以采取什么行動(dòng),會(huì)有什么結(jié)果。文本鏈接也可以是文本的一種形態(tài)。
Xero 運(yùn)用文本的幫助設(shè)計(jì)
2.圖片
圖片能夠形象具體的表達(dá)出想要表達(dá)的意思與觀點(diǎn),對(duì)于相對(duì)較為復(fù)雜的情形,可以適當(dāng)?shù)牟捎脠D文并茂的形式對(duì)用戶(hù)進(jìn)行幫助引導(dǎo)或者解決用戶(hù)遇到的問(wèn)題。提供生動(dòng)的圖形信息能夠有效吸引用戶(hù)的注意力,通過(guò)解讀圖片的信息而獲得對(duì)應(yīng)的幫助信息。在幫助設(shè)計(jì)中有效的運(yùn)用圖片能夠降低用戶(hù)學(xué)習(xí)的成本獲得更好的用戶(hù)體驗(yàn)。
Xero 運(yùn)用圖文的幫助設(shè)計(jì)
3.視頻
視頻可以運(yùn)用到復(fù)雜的情形中,通過(guò)聲音圖形有序的講解來(lái)提供給用戶(hù)相關(guān)的幫助信息。視頻剪輯提供了對(duì)于復(fù)雜流程及情形更為生動(dòng)的介紹或者解答,用戶(hù)更多是在被動(dòng)的接受信息中,更大程度的減少了用戶(hù)學(xué)習(xí)的成本,因此推薦使用視頻對(duì)復(fù)雜的情況進(jìn)行解釋說(shuō)明,但視頻同時(shí)會(huì)占用更多的存儲(chǔ)于網(wǎng)絡(luò)流量資源,尤其當(dāng)用戶(hù)在非wifi環(huán)境下,視頻可能是并非用戶(hù)首選的點(diǎn)擊選擇。
Xero 運(yùn)用視頻的幫助設(shè)計(jì)
幫助類(lèi)型
不同的情境不僅需要選擇使用幫助的元素,也需要選擇合適的幫助類(lèi)型來(lái)為用戶(hù)提供恰到好處的幫助,本文將幫助分為介紹型幫助與勸導(dǎo)型幫助兩種類(lèi)型,在不同的上下文情境中選擇不同的類(lèi)型來(lái)給用戶(hù)提供幫助的解決方案。
介紹型幫助:顧名思義,介紹型幫助即以介紹為主要目的,這種方式的幫助主要可以運(yùn)用在用戶(hù)初次接觸產(chǎn)品或者某些功能時(shí)候提供的說(shuō)明性幫助,如功能模塊介紹,標(biāo)題的解釋以及一些操作過(guò)程功能的解讀。旨在告知用戶(hù)當(dāng)面明對(duì)的是什么,可以做什么或者有什么用處。 如QuickBooks 在注冊(cè)的不同階段,提供適當(dāng)?shù)恼f(shuō)明性解讀,告知用戶(hù)當(dāng)前步驟的作用及意義(見(jiàn)下圖)。
QuickBooks 介紹型幫助設(shè)計(jì)
勸導(dǎo)型幫助:即通過(guò)介紹引導(dǎo)用戶(hù)完成瀏覽或者任務(wù)。勸導(dǎo)型幫助可以運(yùn)用在一些空白的起始頁(yè)面,創(chuàng)建于修改頁(yè)面中,對(duì)于新功能操作的引導(dǎo)以及操作中遇到問(wèn)題的解決幫助。勸導(dǎo)型幫助目的是勸導(dǎo)用戶(hù)嘗試某新新的功能或者通過(guò)引導(dǎo)完成任務(wù)。如Base應(yīng)用中對(duì)初始界面運(yùn)用引導(dǎo)性的標(biāo)識(shí)與文字提示用戶(hù)點(diǎn)擊上方按鈕開(kāi)始創(chuàng)建銷(xiāo)售按鈕(見(jiàn)下圖)。
Base 勸導(dǎo)型幫助設(shè)計(jì)
幫助的表現(xiàn)形式
1.文本類(lèi)幫助表現(xiàn)形式:
類(lèi)型一:內(nèi)置輸入提示,內(nèi)置輸入提示通常為簡(jiǎn)短明確的提示,引導(dǎo)用戶(hù)需要填入的內(nèi)容、格式等。如下圖:Stich Labs用戶(hù)選擇輸入的設(shè)計(jì),將提示文字顯示在輸入框內(nèi),當(dāng)用戶(hù)需要輸入時(shí),便可以快速瀏覽文字獲得需要進(jìn)行的操作提示。
Stitch Labs內(nèi)置輸入提示設(shè)計(jì)
類(lèi)型二:輸入內(nèi)容的旁位提示(如下圖),這種提示方式適用于一列的頁(yè)面排版中,因?yàn)閷?duì)于輸入內(nèi)容的提示文字相對(duì)較多,不宜大面積使用,推薦在內(nèi)容較少的表單中使用,如注冊(cè)。
輸入內(nèi)容旁位提示
類(lèi)型三:對(duì)文本的說(shuō)明性提示(如下圖),這種提示適合運(yùn)用于標(biāo)題、獨(dú)立區(qū)塊說(shuō)明以及一些特殊需求的字段中。
Stitch Labs中對(duì)頁(yè)面標(biāo)題的說(shuō)明幫助設(shè)計(jì)
Stitch labs 頁(yè)面中對(duì)標(biāo)題的輔助說(shuō)明設(shè)計(jì)整體頁(yè)面
2.彈出浮框式:
彈出浮框可以在當(dāng)用戶(hù)需要時(shí)候提供簡(jiǎn)短的幫助信息,不需要時(shí)候隱藏起來(lái)的一種方式。觸發(fā)浮框的觸發(fā)點(diǎn)根據(jù)實(shí)際需要可以變化,如下圖的兩種觸發(fā)點(diǎn)樣式。需要說(shuō)明的是在為桌面進(jìn)行的設(shè)計(jì),推薦可以采用獲得焦點(diǎn)即顯示幫助文字,在移動(dòng)設(shè)備上時(shí)通過(guò)點(diǎn)擊顯示。也可以根據(jù)實(shí)際需要調(diào)整觸發(fā)的時(shí)機(jī)。提出浮框可以運(yùn)用在許多地方,如對(duì)輸入標(biāo)簽的提示,對(duì)新功能行按鈕的引導(dǎo)性介紹等。下圖是彈出浮框的觸發(fā)樣式以及QuickBooks 對(duì)彈出浮框的運(yùn)用。
以圖標(biāo)為觸發(fā)點(diǎn)的彈出浮框提示以及以文本為觸發(fā)點(diǎn)的彈出浮框提示
QuickBooks的彈出浮框提示設(shè)計(jì)
3.解釋模塊式:
解釋模塊用于對(duì)頁(yè)面,或者較大的區(qū)塊進(jìn)行的說(shuō)明??梢允羌兾谋镜恼f(shuō)明,也可以是圖文并茂以及內(nèi)嵌視頻對(duì)復(fù)雜的功能及內(nèi)在邏輯進(jìn)行指導(dǎo)說(shuō)明,或者是步驟的引導(dǎo)說(shuō)明。如StichLabs在采購(gòu)訂單初始界面按照步驟以圖文方式整體介紹如何快速創(chuàng)建采購(gòu)訂單(見(jiàn)下圖);
StichLabs 初始界面的提示區(qū)域設(shè)計(jì)
Xero產(chǎn)品中運(yùn)用圖文方式,直觀的將創(chuàng)建發(fā)票步驟顯示在頁(yè)面頂部幫助解釋區(qū)域,方便用戶(hù)直接查看參考(如下圖)。
Xero操作步驟的提示區(qū)域設(shè)計(jì)
Base針對(duì)具體的區(qū)域運(yùn)用解釋區(qū)域的幫助形式對(duì)該區(qū)域的內(nèi)容進(jìn)行解釋與操作引導(dǎo)(如下圖):
Base 區(qū)塊化幫助設(shè)計(jì)設(shè)計(jì)
4.內(nèi)嵌式幫助中心
大多數(shù)的企業(yè)應(yīng)用軟件還會(huì)提供內(nèi)嵌幫助中心,內(nèi)嵌幫助中心通常會(huì)根據(jù)當(dāng)前頁(yè)面內(nèi)容提供針對(duì)性的幫助內(nèi)容入口以及在線(xiàn)幫助中心的固定入口,用戶(hù)通過(guò)內(nèi)嵌的幫助中心可以獲得該頁(yè)面直接或者間接相關(guān)的幫助內(nèi)容入口,同時(shí)也可以鏈接到在線(xiàn)的幫助中心,獲得更為全面的幫助內(nèi)容。(下圖分別為內(nèi)嵌的幫助中心與在線(xiàn)幫助中心示例)
QuckBooks內(nèi)嵌幫助中心
5.在線(xiàn)幫助中心
在線(xiàn)幫助中心是最全面的集中幫助文檔的地方,在線(xiàn)的幫助中心內(nèi)容不一定是百分之百集合了應(yīng)用中所有的相關(guān)幫助,更多的承載了對(duì)于產(chǎn)品功能模塊、業(yè)務(wù)操作以及操作引導(dǎo)的介紹,如下圖QuickBooks的在線(xiàn)幫助中心。
Quick Books在線(xiàn)幫助中心
選擇使用幫助設(shè)計(jì)的要點(diǎn)
a.時(shí)機(jī)
產(chǎn)品中的幫助并非越多越好,也并非越早越好或者等著用戶(hù)自己去挖掘。好的幫助形式是能基準(zhǔn)把握時(shí)機(jī),并較為準(zhǔn)確的判斷出用戶(hù)可能遇到的問(wèn)題,并提供有針對(duì)性的解決方法。如QuickBooks的幫助中心,根據(jù)當(dāng)前界面的內(nèi)容,提供針對(duì)頁(yè)面內(nèi)容的用戶(hù)可能需要的幫助內(nèi)容入口,供用戶(hù)選擇使用。
QucikBooks 根據(jù)當(dāng)前頁(yè)面內(nèi)容在幫助中心中提供的關(guān)聯(lián)內(nèi)容
b.頻率
當(dāng)用戶(hù)需要頻繁的進(jìn)行某個(gè)操作或者使用某個(gè)功能時(shí)候,開(kāi)始用戶(hù)可能對(duì)此功能的頁(yè)面或者該功能不理解或者不熟悉,然后通過(guò)用戶(hù)頻繁使用,當(dāng)用戶(hù)已經(jīng)對(duì)該功能爛熟于心時(shí),此時(shí)的幫助提示是不是多余的元素呢?如何處理類(lèi)似這種情況呢?相反,如果用戶(hù)對(duì)某頁(yè)面或者功能使用的并不是非常頻繁,只是偶爾用使用,該模塊的頁(yè)面與功能相對(duì)來(lái)說(shuō)又比較復(fù)雜,那我們可以選擇將幫助內(nèi)容暴露在頁(yè)面中,共用戶(hù)方便查看,如設(shè)置頁(yè)面,用戶(hù)訪問(wèn)的頻率不高,但是設(shè)置的操作復(fù)雜并且有許多內(nèi)在聯(lián)系的內(nèi)容,提供簡(jiǎn)單直接容易獲得的幫助能夠提高用戶(hù)完成任務(wù)的速度,從而提高用戶(hù)效率。如Xero的新手引導(dǎo)幫助設(shè)計(jì)就比較巧妙,當(dāng)用戶(hù)首次進(jìn)入系統(tǒng)或者新用戶(hù)剛開(kāi)始使用系統(tǒng),Xero將如何開(kāi)始使用軟件放置在頁(yè)面中非常明顯的位置,提供具體的引導(dǎo)幫助用戶(hù)快速學(xué)習(xí)開(kāi)始。但同時(shí)提供了關(guān)閉該幫助提示的功能,而當(dāng)用戶(hù)再次需要該模塊的幫助內(nèi)容時(shí),便可以在固定的入口再次將此幫助顯示在原來(lái)的位置(如下圖)。
Xero 打開(kāi)幫助提示的設(shè)計(jì)
c.重要性
幫助設(shè)計(jì)還需要根據(jù)設(shè)計(jì)目標(biāo)的重要程度來(lái)評(píng)估使用什么形式的幫助。如果某功能并非核心功能,用戶(hù)及時(shí)不知道該功能是做什么的,但可以通過(guò)嘗試來(lái)逐漸弄明白該功能的作用,而不會(huì)造成嚴(yán)重的錯(cuò)誤,如導(dǎo)致業(yè)務(wù)出錯(cuò)或者一些不可逆的損失,則可以選擇性的采用幫助的形式與提示時(shí)機(jī)。但如果該功能或者頁(yè)面非常重要,不適當(dāng)?shù)膰L試會(huì)導(dǎo)致嚴(yán)重的后果,造成不可逆的影響或者取消該操作產(chǎn)生的影響會(huì)涉及很多的內(nèi)容與流程,則最好在用戶(hù)嘗試操作前提供必要明確的操作提示,降低操作錯(cuò)誤的概率。必要時(shí)候可以采用打斷用戶(hù)的方式進(jìn)行引導(dǎo)用戶(hù)。
d.一致性
以上介紹了多種的幫助設(shè)計(jì)樣式,作為同一個(gè)應(yīng)用或者軟件,可以綜合使用多種幫助設(shè)計(jì)的形式,但在使用的同時(shí),保證整體的統(tǒng)一性一樣非常重要,一致的設(shè)計(jì)與體驗(yàn)?zāi)軌蛱岣哂脩?hù)對(duì)應(yīng)用的信任并有更好的體驗(yàn),一致的設(shè)計(jì)也能減少用戶(hù)學(xué)習(xí)的成本。如,我們常見(jiàn)的幫助設(shè)計(jì)方式,如果大多數(shù)需要此類(lèi)幫助設(shè)計(jì)的頁(yè)面采用類(lèi)似的布局方式,用戶(hù)在訪問(wèn)到當(dāng)前頁(yè)面即使不仔細(xì)查看也能推斷出此塊是幫助內(nèi)容部分,相反,如果每個(gè)頁(yè)面有不同的位置布局,當(dāng)用戶(hù)需要幫助的時(shí)候,還需要花額外的精力進(jìn)行尋找該幫助。
總結(jié)
無(wú)論使用哪種幫助形式,都只是意在預(yù)判用戶(hù)在瀏覽或者執(zhí)行任務(wù)時(shí)候可能遇到的問(wèn)題而進(jìn)行的輔助形式。最好的設(shè)計(jì)是盡可能的減少額外幫助的使用,當(dāng)一定需要使用幫助來(lái)減少用戶(hù)使用產(chǎn)品的受挫感或者減少用戶(hù)出錯(cuò)的概率,應(yīng)當(dāng)選擇在適當(dāng)?shù)臅r(shí)機(jī)選擇合適的幫助形式輔助用戶(hù)完成任務(wù)。
最好的設(shè)計(jì)是讓用戶(hù)根據(jù)經(jīng)驗(yàn)或者直覺(jué)去順利完成相關(guān)的任務(wù),當(dāng)然,也有些大眾消費(fèi)應(yīng)用會(huì)提供讓用戶(hù)自己挖掘功能或者服務(wù)來(lái)給用戶(hù)帶來(lái)額外的驚喜;但對(duì)于商業(yè)類(lèi)軟件來(lái)說(shuō),效率是第一位的,如果想通過(guò)趣味性換來(lái)用戶(hù)的忠誠(chéng)可能不是明智的選擇,所以在設(shè)計(jì)商業(yè)類(lèi)軟件或者應(yīng)用時(shí)候,在沒(méi)有其他設(shè)計(jì)方式可以表達(dá)復(fù)雜的流程或者內(nèi)在的功能聯(lián)系,可以適當(dāng)?shù)倪x擇幫助設(shè)計(jì)來(lái)達(dá)到提醒用戶(hù),輔助用戶(hù)順利完成預(yù)期目標(biāo)的目的。
文章來(lái)源: http://www.boxui.com/ued/interaction-design/26474.html
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com