丟掉“說(shuō)明書(shū)”,用戶喜歡容易上手的產(chǎn)品

77 評(píng)論 1693746 瀏覽 1413 收藏 18 分鐘

不用看說(shuō)明書(shū)就會(huì)使用的產(chǎn)品,用戶喜歡嗎?肯定喜歡??!一款能讓用戶滿意的產(chǎn)品,設(shè)計(jì)一定是便于用戶使用的。這在我們看來(lái)是非常簡(jiǎn)單的道理,但是,產(chǎn)品設(shè)計(jì)師們卻常常反其道而行之。所以,說(shuō)到底啊,產(chǎn)品設(shè)計(jì)還是要多站在用戶角度。

在整個(gè)設(shè)計(jì)界,我們經(jīng)常從嘲笑產(chǎn)品裝配說(shuō)明中得到樂(lè)趣——特別是那些來(lái)自宜家的扁平包裝產(chǎn)品。

不過(guò),我最近經(jīng)歷了一些關(guān)于產(chǎn)品說(shuō)明和產(chǎn)品設(shè)計(jì)的不同的啟示。

通常情況下,我們必須按照工廠的想法來(lái)裝配產(chǎn)品……

當(dāng)我終于找了一個(gè)水管工來(lái)更換樓上浴缸滴水的水龍頭時(shí),我趁機(jī)更新了一些其他的配件,包括一個(gè)帶軟管的新的淋浴器/噴霧器。包裹送到后,我把它拿到浴室,毫不費(fèi)力地打開(kāi)盒子,發(fā)現(xiàn)所有產(chǎn)品的零件都被裝在一個(gè)小袋子里。

典型的情況是:我們必須按照工廠的想法來(lái)組裝產(chǎn)品——把所有的小五金部件裝在一個(gè)或兩個(gè)袋子里,充其量是一張說(shuō)明單,幫助我們了解哪種螺絲是什么。

但這個(gè)產(chǎn)品不是,相反的,每個(gè)袋子只包括屬于某個(gè)特定硬件部件的部件,例如:軟管兩端的墊圈位于軟管袋中。

本產(chǎn)品的設(shè)計(jì)是為了確保用戶對(duì)其裝配的內(nèi)在理解。

我成功地組裝了整個(gè)東西,根本沒(méi)看說(shuō)明書(shū),這是因?yàn)橹圃焐淘O(shè)計(jì)了易于裝配的產(chǎn)品。

我要連接軟管兩個(gè)供應(yīng)托架和魔杖,但是我認(rèn)為沒(méi)有必要查看任何指示。即使不看,我也不會(huì)裝配錯(cuò)誤,因?yàn)樵趦啥说木€程是非常不同的,不會(huì)有第二次猜測(cè)。

除了通過(guò)一些嘗試和錯(cuò)誤來(lái)匹配線程之外,我又能通過(guò)什么方式知道軟管的哪一端去了呢?

——墻壁上的連接與它所安裝的支架相匹配,并且有一個(gè)需要扳手才能擰緊的矮胖螺母。作為魔杖一端的一部分的錐形部件與淋浴頭具有相同的拋光效果,并且與魔杖的角度相匹配。

本產(chǎn)品的設(shè)計(jì)是為了確保用戶對(duì)其裝配的內(nèi)在理解。

我成功地組裝了整個(gè)東西,根本沒(méi)看說(shuō)明書(shū)。

說(shuō)明出了什么問(wèn)題?

內(nèi)在理解是重要的,因?yàn)闆](méi)有人會(huì)真正閱讀指令。

沒(méi)有人閱讀說(shuō)明書(shū),這不僅僅是無(wú)聊的哀嘆。我們都知道,典型的用戶會(huì)瀏覽和跳過(guò)我們認(rèn)為他們應(yīng)該想讀的數(shù)字內(nèi)容的很大一部分——比如在產(chǎn)品詳細(xì)信息頁(yè)面上。

在設(shè)計(jì)時(shí),應(yīng)該假設(shè)用戶應(yīng)該能夠理解用戶界面(如果沒(méi)有文本)。

用戶很少閱讀標(biāo)簽和錯(cuò)誤信息,所以在設(shè)計(jì)用戶界面時(shí),我總是從這樣一個(gè)假設(shè)開(kāi)始設(shè)計(jì):如果沒(méi)有文本,用戶應(yīng)該能夠理解用戶界面。

為什么呢?

這些典型的交互系統(tǒng),我的意思是:用戶希望滾動(dòng),手勢(shì),作出選擇,并點(diǎn)擊或按按鈕。

用戶期望交互,但是指令并不是他們與之交互的項(xiàng)、對(duì)象或控件。

為什么要讓他們用他們的腦力來(lái)理解指令,并將它們與用戶界面中的適當(dāng)元素相關(guān)聯(lián)呢?

例如:有一些應(yīng)用程序可以阻止用戶在點(diǎn)擊他們所描述的功能之前,繼續(xù)下一步。這些人試圖將指令與相應(yīng)的動(dòng)作聯(lián)系起來(lái),而只是強(qiáng)調(diào)了這兩種理解模式之間的不和諧。

使用戶界面文本變得有用、具有上下文和相關(guān)

當(dāng)測(cè)試新的應(yīng)用程序或網(wǎng)站時(shí),我們可以追蹤到許多可用性問(wèn)題的系統(tǒng)行為與用戶的心理模型不匹配。

這種情況經(jīng)常發(fā)生,是因?yàn)槲覀円呀?jīng)對(duì)一個(gè)數(shù)字系統(tǒng)的結(jié)構(gòu)和行為做出了決策,這些結(jié)構(gòu)和行為與數(shù)據(jù)結(jié)構(gòu)或后臺(tái)進(jìn)程的實(shí)際工作方式不匹配。

你必須解釋任何不屬于產(chǎn)品的部分,確保你這樣做的方式,以確保人們能夠找到信息。

我們?cè)噲D通過(guò)解釋來(lái)消除這種差異,但在這種情況下解釋不起作用。

不只是因?yàn)槿藗儾婚喿x,而是因?yàn)楫a(chǎn)品團(tuán)隊(duì)太接近他們的產(chǎn)品,所以默認(rèn)使用行話。用戶常常誤解或忽略與功能沒(méi)有緊密耦合的標(biāo)簽和指令。

然而,標(biāo)簽和簡(jiǎn)單的解釋,如提示文本,可以填補(bǔ)任何差距。用戶的理解,加強(qiáng)他們的期望,并向用戶保證他們正在采取正確的行動(dòng)。

當(dāng)我們正確使用時(shí),漢堡包菜單圖標(biāo)就會(huì)起作用。類似地,當(dāng)用戶有問(wèn)題時(shí),他們會(huì)尋找更多的信息。所以,給他們有用的,易于使用的,易于理解的信息。

雖然我總是試圖設(shè)計(jì)一些簡(jiǎn)單有效的系統(tǒng),而不需要幫助主題中的信息,但是在您的設(shè)計(jì)中,您根本不能為數(shù)字體驗(yàn)解決某些問(wèn)題。用戶必須按下按鈕,在其他系統(tǒng)上工作,為東西付費(fèi),更新和升級(jí)。

讓我們考慮另一個(gè)家庭實(shí)物產(chǎn)品:不久以前,商店-真空?在我的工作間里,我需要一個(gè)新的袋子。真空被貼上了標(biāo)簽,但他們都吹捧它的特點(diǎn)和品牌,提供了一些規(guī)范,并提供了一些警告。但是,這些標(biāo)簽沒(méi)有一個(gè)告訴用戶購(gòu)買什么類型的替代袋。

你必須解釋任何不屬于產(chǎn)品的部分,你只有這樣做,才能確保人們能夠找到信息。這些信息應(yīng)該是上下文相關(guān)的,并且緊挨著功能。幫助部分不是上下文的,因此是無(wú)效的,而問(wèn)答集比無(wú)用更糟糕。

可以還是取消?

從網(wǎng)站或移動(dòng)應(yīng)用程序斷開(kāi)說(shuō)明的是什么?你怎么能解決這樣的問(wèn)題?

讓我們從一個(gè)非常簡(jiǎn)單的例子開(kāi)始。

人們依賴的是動(dòng)覺(jué)記憶而不閱讀,所以他們最可能會(huì)點(diǎn)擊他們期望的位置的按鈕,而不去閱讀他們的標(biāo)簽。

對(duì)話框是眾所周知的糟糕的信息顯示方式,但是盡管至少十年來(lái),在設(shè)計(jì)人員不應(yīng)該做的事情列表中名列前茅,我們?nèi)匀豢吹搅说教幎际菈牡睦印?/p>

圖1顯示了一個(gè)典型的糟糕確認(rèn)對(duì)話框,在這個(gè)對(duì)話框中,標(biāo)題描述了內(nèi)容以更詳細(xì)的方式解釋的條件,然后動(dòng)作按鈕為用戶提供了兩個(gè)選擇。

圖1-A通常是錯(cuò)誤的確認(rèn)對(duì)話框

用戶在確認(rèn)對(duì)話框中遇到的典型問(wèn)題包括:

  • 標(biāo)題中的行話。
  • 在描述的開(kāi)始部分重復(fù)標(biāo)題文本所以用戶不需要瀏覽它,實(shí)現(xiàn)提供不同的數(shù)據(jù)和停止讀取。
  • 防止用戶將內(nèi)容與流程和上下文關(guān)聯(lián)的不一致的術(shù)語(yǔ)。
  • 冗長(zhǎng)的標(biāo)題和描述。
  • 模糊的信息,如:“文件將被刪除”,而不包括文件名,以便那些真正閱讀的人可以得到他們需要的信息。
  • 與當(dāng)前任務(wù)或條件不相關(guān)的一般按鈕標(biāo)簽,因此要求用戶閱讀和解釋詳細(xì)的說(shuō)明。
  • 與整個(gè)任務(wù)沖突的按鈕標(biāo)簽——例如:在一個(gè)確認(rèn)對(duì)話框中使用默認(rèn)按鈕標(biāo)簽OK和Cancel,該對(duì)話框允許用戶取消正在進(jìn)行的進(jìn)程,其中的是OK按鈕而不是Cancel按鈕,執(zhí)行取消功能。

不反映用戶期望或與應(yīng)用程序的其馀部分不一致的按鈕放置 ,例如:一旦用戶熟悉了單擊右邊的按鈕繼續(xù),將確定放在左邊。

記住,人們依靠的是動(dòng)覺(jué)記憶而不是閱讀,所以他們很可能會(huì)點(diǎn)擊那些位于他們預(yù)期位置的按鈕,而沒(méi)有閱讀他們的標(biāo)簽。

盡管使用確認(rèn)對(duì)話框通常是不合適的,但是設(shè)計(jì)一個(gè)好的對(duì)話框是很容易的。

一定要遵守以下準(zhǔn)則:

  • 將標(biāo)題設(shè)為問(wèn)句,以問(wèn)號(hào)結(jié)尾。用戶可以通過(guò)點(diǎn)擊與特定動(dòng)作相對(duì)應(yīng)的標(biāo)記清楚的按鈕來(lái)回答這個(gè)問(wèn)題。你是在邀請(qǐng)用戶做決定,而不僅僅是通知或責(zé)罵用戶。提問(wèn)會(huì)引起更多的審查,因此用戶更有可能閱讀信息。
  • 保持短語(yǔ)簡(jiǎn)短,并以關(guān)鍵信息引導(dǎo)。人們?yōu)g覽的時(shí)間比閱讀的要多,所以他們閱讀任何短語(yǔ)的頭幾個(gè)單詞的可能性要大得多。
  • 使用平易的措辭。然而,如果你確實(shí)使用品牌或技術(shù)文本,使用的術(shù)語(yǔ)與產(chǎn)品的其他部分相同。
  • 要具體,提供背景。不確定或擔(dān)心流程的用戶通常會(huì)閱讀消息文本,因此提供特定信息,比如:文件名、位置、源和目的地,并且總是提供結(jié)果或結(jié)果的清晰描述。
  • 避免歧義。如果用戶會(huì)誤讀文本嗎?他們會(huì)。添加指令永遠(yuǎn)不會(huì)修復(fù)含糊的按鈕標(biāo)簽,因此彌補(bǔ)核心問(wèn)題并修改標(biāo)簽文本。
  • 確保按鈕的順序與整個(gè)應(yīng)用程序的順序一致。


圖2-更好的確認(rèn)對(duì)話框設(shè)計(jì)

露而不述

在軟件中實(shí)現(xiàn)的許多流程都遵循壞的、舊的或不透明的方法。

例如:在紙張時(shí)代,有人在一個(gè)窗口或通過(guò)郵件提交了一個(gè)表單。然后,他只是等待,并希望一切都得到解決。

好的交互系統(tǒng)不應(yīng)該讓用戶產(chǎn)生疑問(wèn)。當(dāng)用戶對(duì)流程的工作方式有信心時(shí),他們會(huì)更快樂(lè),你會(huì)更容易使用,同時(shí)減少顧客關(guān)懷電話和降低成本。

當(dāng)用戶加載新軟件或同步配置備份時(shí),請(qǐng)使用已連接的藍(lán)牙設(shè)備((物聯(lián)網(wǎng))設(shè)備,許多簡(jiǎn)單明了的術(shù)語(yǔ),如上傳和下載可能會(huì)變得模糊。實(shí)際上,甚至像設(shè)備這樣的基本術(shù)語(yǔ)也會(huì)很快變得很麻煩。
因此,與其解釋或假設(shè)用戶將得到培訓(xùn)或閱讀幫助,不如描述將會(huì)發(fā)生什么,如圖3所示:

圖3-解釋過(guò)程的圖

用戶可以看到將要發(fā)生的一切。

這個(gè)圖表顯示了整個(gè)過(guò)程中的步驟,因此用戶不會(huì)得到延遲指示器。因此,用戶可以準(zhǔn)確地知道系統(tǒng)正在做什么,并能更好地理解諸如超出范圍或失去電源之類的事情的后果。
使用相同風(fēng)格的圖表,這種過(guò)程可以有多個(gè)版本,但是有步驟、方向和其他反映實(shí)際過(guò)程的細(xì)節(jié)。

設(shè)計(jì)為選項(xiàng)卡

特別是在設(shè)計(jì)應(yīng)用程序時(shí),為了便于開(kāi)發(fā)和實(shí)現(xiàn)一致性,我盡可能使用操作系統(tǒng)或框架默認(rèn)值。

然而,設(shè)計(jì)標(biāo)簽經(jīng)常讓我心痛,并不是因?yàn)闃?biāo)簽的概念本身有問(wèn)題,而是因?yàn)檫@個(gè)接口設(shè)計(jì)解決方案最近經(jīng)常讓我們失望。

一個(gè)與內(nèi)容區(qū)域相鄰的選項(xiàng)卡在本質(zhì)上很容易理解,因?yàn)槲覀儗?duì)文件夾選項(xiàng)卡的工作方式有著長(zhǎng)期持有的思維模型。

與最終編碼版本相比,人們通常更容易理解系統(tǒng)的高級(jí)概念草圖。因?yàn)檫x項(xiàng)卡可能比較模糊,弄清楚標(biāo)簽的意思需要思考太多。

圖4顯示了一個(gè)典型的現(xiàn)代例子:

圖4-用于Android的Quora應(yīng)用中的選項(xiàng)卡

粗體標(biāo)簽、高亮顯示和下劃線都是區(qū)分當(dāng)前選項(xiàng)卡內(nèi)容的好方法,但是標(biāo)簽仍然需要解釋,只有兩個(gè)標(biāo)簽是有問(wèn)題的。

你怎么知道哪個(gè)標(biāo)簽是高亮的?

傳統(tǒng)的顯示選項(xiàng)卡的方法是復(fù)制實(shí)際的、物理的文件文件夾選項(xiàng)卡,這就是我們叫它們標(biāo)簽的原因。這是一個(gè)例子,在這種情況下,斯凱歌變形并不壞,因?yàn)樗皇且环N裝飾風(fēng)格,而是利用了一個(gè)核心的組織原則。

好的制表符設(shè)計(jì)效果很好,因?yàn)橹票矸麡?biāo)簽與選項(xiàng)卡的內(nèi)容相接,就像卡片股票標(biāo)簽貼在物理選項(xiàng)卡的內(nèi)容之上一樣。所選選項(xiàng)卡的背景繼續(xù)進(jìn)入下面的內(nèi)容區(qū)域,如圖5所示,沒(méi)有顏色變化或分隔線。

Tabs that are contiguous with their content

圖5-與其內(nèi)容相接的選項(xiàng)卡

一個(gè)與內(nèi)容區(qū)域相鄰的選項(xiàng)卡在本質(zhì)上很容易理解,因?yàn)槲覀儗?duì)文件夾選項(xiàng)卡的工作方式有著長(zhǎng)期持有的思維模型。

人們知道標(biāo)簽和內(nèi)容區(qū)是一個(gè)單一的東西。用戶希望物理定律在應(yīng)用程序中仍然有效,因此,他們假設(shè)所有的標(biāo)簽都附在它們的內(nèi)容上。所以,點(diǎn)擊背景中的標(biāo)簽之后,會(huì)把標(biāo)簽放到前面,從而暴露它的內(nèi)容。

避免混淆你的設(shè)計(jì)

還有更多這樣的例子,我想提供,但我將總結(jié)一個(gè)不相干的風(fēng)險(xiǎn):使用過(guò)于容易使用的元素,與用戶的其他期望沖突。

人們不讀書(shū),尤其是在沒(méi)有明顯的理由這樣做的情況下,如果交互元素似乎滿足了他們的期望,那么他們就沒(méi)有理由費(fèi)心去閱讀標(biāo)簽或解釋圖標(biāo)了。

我曾經(jīng)在一個(gè)網(wǎng)站上工作,在頁(yè)面頂部附近的工具條上有一個(gè)單步注冊(cè)表單。用戶只需在一個(gè)域中輸入他們的電子郵件地址,然后按下一個(gè)按鈕,就可以注冊(cè)以接收交易通知、小費(fèi)等信息。

但是,我的團(tuán)隊(duì)被引入來(lái)修正這個(gè)表單,因?yàn)楹艽笠徊糠纸Y(jié)果——工程師們故意沒(méi)有驗(yàn)證,都是胡言亂語(yǔ),而不是電子郵件地址。很快我們就發(fā)現(xiàn)它們實(shí)際上是搜索詞。

搜索應(yīng)該包括一個(gè)輸入框,而不是一個(gè)鏈接,也不只是一個(gè)放大鏡圖標(biāo),用戶可能會(huì)誤解。用戶非常喜歡搜索,希望在頁(yè)面頂部附近找到它,并被輸入框所吸引,所以如果他們看到頁(yè)面頂部附近的搜索輸入框,他們將使用更多的搜索。

因此,如果您在頁(yè)面頂部附近放置任何輸入框,用戶將認(rèn)為這是一個(gè)搜索輸入框,而不管字段或提交按鈕實(shí)際表示什么標(biāo)簽。

結(jié)論

本專欄沒(méi)有提供清單或風(fēng)格指南,但傳達(dá)了一種哲學(xué)或概念,以一種真正以人為本的方式對(duì)待設(shè)計(jì)。不幸的是,許多產(chǎn)品開(kāi)發(fā)本質(zhì)上是將使用了多年的PowerPoint培訓(xùn)平臺(tái)或Excel文件轉(zhuǎn)換成面向客戶的數(shù)字產(chǎn)品。我不是在夸張,實(shí)際上這已經(jīng)發(fā)生了太多次了。

然而,我們可以創(chuàng)造更好,更滿意,更有效的產(chǎn)品的設(shè)計(jì),以反映人們真正的工作方式和人們實(shí)際消費(fèi)和理解信息的方式。在整個(gè)產(chǎn)品開(kāi)發(fā)生命周期中記住這些目標(biāo),而不僅僅是只在設(shè)計(jì)一條快樂(lè)的路徑時(shí)才記得。

 

本文由 @小光蛋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 教育資源管理后臺(tái)

    回復(fù)
  2. 1

    回復(fù)
    1. 回復(fù)