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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我成功地組裝了整個(gè)東西,根本沒看說明書。

說明出了什么問題?

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

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

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

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

為什么呢?

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

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

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

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

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

當(dāng)測試新的應(yīng)用程序或網(wǎng)站時(shí),我們可以追蹤到許多可用性問題的系統(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通過解釋來消除這種差異,但在這種情況下解釋不起作用。

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

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

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

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

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

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

可以還是取消?

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

讓我們從一個(gè)非常簡單的例子開始。

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

對(duì)話框是眾所周知的糟糕的信息顯示方式,但是盡管至少十年來,在設(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ì)話框中遇到的典型問題包括:

  • 標(biāo)題中的行話。
  • 在描述的開始部分重復(fù)標(biāo)題文本所以用戶不需要瀏覽它,實(shí)現(xiàn)提供不同的數(shù)據(jù)和停止讀取。
  • 防止用戶將內(nèi)容與流程和上下文關(guān)聯(lián)的不一致的術(shù)語。
  • 冗長的標(biāo)題和描述。
  • 模糊的信息,如:“文件將被刪除”,而不包括文件名,以便那些真正閱讀的人可以得到他們需要的信息。
  • 與當(dāng)前任務(wù)或條件不相關(guān)的一般按鈕標(biāo)簽,因此要求用戶閱讀和解釋詳細(xì)的說明。
  • 與整個(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)覺記憶而不是閱讀,所以他們很可能會(huì)點(diǎn)擊那些位于他們預(yù)期位置的按鈕,而沒有閱讀他們的標(biāo)簽。

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

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

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


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

露而不述

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

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

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

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

圖3-解釋過程的圖

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

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

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

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

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

一個(gè)與內(nèi)容區(qū)域相鄰的選項(xiàng)卡在本質(zhì)上很容易理解,因?yàn)槲覀儗?duì)文件夾選項(xià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)簽是有問題的。

你怎么知道哪個(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所示,沒有顏色變化或分隔線。

Tabs that are contiguous with their content

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

一個(gè)與內(nèi)容區(qū)域相鄰的選項(xiàng)卡在本質(zhì)上很容易理解,因?yàn)槲覀儗?duì)文件夾選項(xià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):使用過于容易使用的元素,與用戶的其他期望沖突。

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

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

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

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

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

結(jié)論

本專欄沒有提供清單或風(fēng)格指南,但傳達(dá)了一種哲學(xué)或概念,以一種真正以人為本的方式對(duì)待設(shè)計(jì)。不幸的是,許多產(chǎn)品開發(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)品開發(fā)生命周期中記住這些目標(biāo),而不僅僅是只在設(shè)計(jì)一條快樂的路徑時(shí)才記得。

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感覺像翻譯過來了的。不過也感謝分享了

    回復(fù)
  2. 沒看太懂,看的有點(diǎn)混亂

    回復(fù)
  3. 搬了老外的文章吧

    回復(fù)
  4. 怎么感覺是機(jī)翻的……

    回復(fù)
    1. 回復(fù)
  5. 內(nèi)容沒有首尾呼應(yīng)……

    回復(fù)
    1. 看到這個(gè)詞,我才發(fā)現(xiàn)我也不會(huì)寫文章了??

      回復(fù)
  6. 我還以為只有我一個(gè)人覺得亂,看評(píng)論我放心了!

    回復(fù)
  7. 開了一個(gè)好頭

    回復(fù)
  8. 不明所以

    回復(fù)
  9. 全是干活,收藏了,不知道有原文沒

    回復(fù)
  10. 哈哈哈

    想想現(xiàn)在公司要我們瘋狂寫操作說明書。

    回復(fù)
  11. 不明白一篇質(zhì)量一般的內(nèi)容放首頁幾個(gè)月。。。。。

    回復(fù)
  12. 讀著讀著,我來看看評(píng)論,然后心安了

    回復(fù)
  13. 好,有個(gè)問題不知道該咋問,也不知道,大家都理解不,就是說,我們到底是研究的是產(chǎn)品還是只研究產(chǎn)品的原型圖

    回復(fù)
  14. 什么亂七八糟的,閱讀量怎么能過萬?

    回復(fù)
    1. 機(jī)器翻譯的吧

      回復(fù)
    2. 翻譯的毫無可讀性

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

    回復(fù)
  16. 寫的好混亂

    回復(fù)
  17. 防呆設(shè)計(jì)的重要性,如果一個(gè)產(chǎn)品老人都能上手教會(huì),那就是真的好產(chǎn)品

    回復(fù)
  18. 現(xiàn)在組裝產(chǎn)品說明書,用戶在購買以后,看著說明書,還是不會(huì),得想個(gè)更好的

    回復(fù)
  19. 可以

    回復(fù)
  20. 為什么一直在首頁,每次打開以為沒有內(nèi)容更新

    回復(fù)
  21. 現(xiàn)在的產(chǎn)品就是充分的了解用戶的行為習(xí)慣,特意把一些讓用不注意購買,或者不注意出發(fā)了看廣告等按鈕做了特別隱蔽的處理,用戶不知道就看了什么廣告,或購買了什么服務(wù),在商業(yè)利益面前,恰恰有些產(chǎn)品會(huì)利用用戶的操作習(xí)慣或視覺習(xí)慣。

    回復(fù)
  22. 喲,其實(shí)我真的想不明白,我有一個(gè)客戶生產(chǎn)電動(dòng)牙刷的時(shí)候特別強(qiáng)調(diào)了說明書,還把文檔做的老長了,生怕客戶不會(huì)使用

    回復(fù)
  23. 直接翻譯嗎……竟然還在首頁……

    回復(fù)
  24. 所以說了讓用戶理解,為什么短信的案例方面不用中文做案例而選擇用英文,用中文來不就更能讓讀者有更好的學(xué)習(xí)體驗(yàn)么。

    回復(fù)
  25. 94.8w的閱讀量,嚇人。。。

    回復(fù)
    1. 牛啊

      回復(fù)
  26. 完全沒有邏輯,這樣的文章不應(yīng)該在首頁

    回復(fù)
  27. 我以為是我讀的有問題,都不知道在講啥。

    回復(fù)
  28. 說什么亂七八糟的

    回復(fù)
  29. 寫的亂亂的,條理不清楚

    回復(fù)
  30. 機(jī)翻一下就發(fā)出來糊弄事

    回復(fù)
    1. 成都

      回復(fù)