在進(jìn)行網(wǎng)站設(shè)計(jì)的時(shí)候，盡管遵循一些啟發(fā)式方法都只是一種理智的行為。 雖然這些啟發(fā)式方法不是網(wǎng)頁(yè)設(shè)計(jì)的固定規(guī)則，但它是一個(gè)很好的起點(diǎn)。

可用性原則4: Use Consistency and Standards（一致性和規(guī)范）

Jakob Nielsen：“用戶不應(yīng)該去猜測(cè)不同的詞語(yǔ)，情境或行為是否意味著相同的事情，遵循平臺(tái)規(guī)范?！?/p>

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：您最不應(yīng)該做的事就是讓買家在您的網(wǎng)站上產(chǎn)生混淆。他們不應(yīng)該去猜測(cè)各種語(yǔ)言、情形或行為是否有相同或不同的含義，網(wǎng)站不應(yīng)該充滿謎題。相反，你應(yīng)該創(chuàng)造流暢的體驗(yàn)，消除任何猜測(cè)。

Massey Ferguson是拖拉機(jī)和全球收割業(yè)務(wù)的領(lǐng)導(dǎo)者，它的網(wǎng)站充分體現(xiàn)了一致性。在每個(gè)頁(yè)面上，無(wú)論是主頁(yè)還是產(chǎn)品頁(yè)面，買家都會(huì)看到相同的空白區(qū)域，干凈的布局和組織良好的信息層次結(jié)構(gòu)。這會(huì)使買家保持冷靜，并能夠快速掃描整個(gè)站點(diǎn)的重要區(qū)域。保持一致性和簡(jiǎn)單使您的網(wǎng)站“可學(xué)會(huì)的”，這是一件好事，這樣網(wǎng)站對(duì)您的買家來(lái)說(shuō)更容易使用。

有許多很好的標(biāo)準(zhǔn)導(dǎo)航樣式的例子，這是Sprint Business網(wǎng)站中的一個(gè)頁(yè)面。 在整個(gè)網(wǎng)站中，無(wú)論您在哪里，您都會(huì)在導(dǎo)航欄中看到相同的元素，以便買家隨時(shí)了解他們的位置。此外，從任何頁(yè)面的分層導(dǎo)航中都會(huì)顯示相同的下拉菜單方案。

以Georgia Pacific Corporation為例。 他們是一個(gè)龐大的公司，但不同相關(guān)品牌的體驗(yàn)是非常不同的，具有不同的導(dǎo)航風(fēng)格和不同的標(biāo)準(zhǔn)。這當(dāng)然不是一種統(tǒng)一的體驗(yàn)，可能會(huì)給一些買家?guī)?lái)困惑。

人們可能會(huì)爭(zhēng)辯說(shuō)，因?yàn)楣疽?guī)模如此之大且市場(chǎng)變化多端，所以您瀏覽網(wǎng)站的不同區(qū)域時(shí)有不同的體驗(yàn)，你必須考慮到這樣做會(huì)：

• 當(dāng)買家偶然發(fā)現(xiàn)差異化的地方或小型網(wǎng)站時(shí)，要迫使他們適應(yīng)不同的界面；
• 會(huì)讓一些買家以為他們離開(kāi)了您的主站點(diǎn)。

專業(yè)建議：在網(wǎng)站的不同部分遵循標(biāo)準(zhǔn)外觀和導(dǎo)航樣式。

可用性原則5： Prevent Errors（防錯(cuò)）

Jakob Nielsen：“比提供合適的錯(cuò)誤信息更好的是一開(kāi)始就防止問(wèn)題發(fā)生。試著消除容易出錯(cuò)的情況，或者識(shí)別這些情況，并在用戶采取行動(dòng)之前向用戶提供確認(rèn)選項(xiàng)?！?/p>

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：對(duì)任何錯(cuò)誤的最佳防御是盡一切力量避免它們。 當(dāng)您仔細(xì)而謹(jǐn)慎地考慮用戶體驗(yàn)時(shí)，錯(cuò)誤就不會(huì)出現(xiàn)。這可能需要對(duì)您的網(wǎng)站進(jìn)行多次可用性測(cè)試和改進(jìn)。

以下是一些容易預(yù)防的錯(cuò)誤：

在網(wǎng)絡(luò)表單中輸入錯(cuò)誤的信息：為了使表單簡(jiǎn)潔干凈，文本框名稱被放置在文本框內(nèi)部，一旦用戶點(diǎn)擊文本框，他就會(huì)被強(qiáng)制記起應(yīng)該在那里寫(xiě)什么。

讓用戶輕松一點(diǎn)，不要延長(zhǎng)他們的短期記憶，在文本框外面列出名稱。

用戶認(rèn)為它點(diǎn)擊了錯(cuò)誤的地方（實(shí)際上沒(méi)有）： 當(dāng)CTA按鈕與其指向的目標(biāo)網(wǎng)頁(yè)語(yǔ)言不相似時(shí)，會(huì)導(dǎo)致您的買家懷疑或感到沮喪和焦慮。

舉個(gè)例子：

落地頁(yè)與期望無(wú)關(guān)，買家很容易感到沮喪、困惑，并相信他犯了錯(cuò)誤。

讓我們來(lái)看看Simply Business的流程，邀請(qǐng)用戶請(qǐng)求保險(xiǎn)報(bào)價(jià)。首先，這是他們主頁(yè)上的CTA：

這是它的落地頁(yè)，有好的地方也有不好的地方：

搜索框是用戶犯常見(jiàn)錯(cuò)誤的地方： 這就是為什么使用自動(dòng)推薦功能可以為每個(gè)用戶創(chuàng)造奇跡。以Google的自動(dòng)推薦功能為例。 每次在搜索引擎中輸入短尾或長(zhǎng)尾關(guān)鍵字時(shí)，搜索框中都會(huì)顯示可能的列表，從而避免拼寫(xiě)錯(cuò)誤。

使您的買家離開(kāi)您的網(wǎng)站：當(dāng)您的買家在您的網(wǎng)站頁(yè)面中，了解您的產(chǎn)品和服務(wù)，或者在轉(zhuǎn)化渠道的關(guān)鍵頁(yè)面，嘗試通過(guò)消除外部鏈接讓您的買家繼續(xù)執(zhí)網(wǎng)站上的任務(wù)。如果您必須在這些頁(yè)面中放置外部鏈接，因?yàn)樗赶蛞粋€(gè)有價(jià)值的資源，那么顯示“您要離開(kāi)我們的網(wǎng)站”警告是一個(gè)好習(xí)慣。您可以在博客中對(duì)這個(gè)問(wèn)題保持隨意態(tài)度，但不能在您的網(wǎng)站頁(yè)面中松懈。

主要和次要CTA之間有明確的區(qū)別：在任何面向跳轉(zhuǎn)的頁(yè)面中，應(yīng)始終存在最重要的下一步。這并不意味著您應(yīng)該將買家鎖定為一個(gè)操作，但這確實(shí)意味著您需要建立一個(gè)清晰的層次結(jié)構(gòu)，并確保主要的CTA更大或字體更粗。

以下是最示例：

專業(yè)建議：保持網(wǎng)站各處清楚，如果有不清楚的地方，買家會(huì)犯錯(cuò)誤，這不是因?yàn)樗麄冇薮?，而是因?yàn)槟銢](méi)有做好功課。

可用性原則6：?Base Everything on Recognition Instead of Recall（識(shí)別優(yōu)于回憶）

Jakob Nielsen：“通過(guò)使對(duì)象、動(dòng)作和選項(xiàng)可見(jiàn)，最大限度地減少用戶的記憶負(fù)荷。用戶不需要記住從對(duì)話的一部分到另一部分的信息?！?/p>

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：您的買家需要能夠在瀏覽您的網(wǎng)站時(shí)，快速識(shí)別下一步去哪或下一步該做什么。 有一些UX功能可以幫助您實(shí)現(xiàn)這一目標(biāo)，但仍然要小心使用它們：

手風(fēng)琴（Accordions）：手風(fēng)琴需要延長(zhǎng)短期記憶力，如果問(wèn)題中的措辭與他最先想到的措辭相同時(shí)，使用手風(fēng)琴效果最好。

Wealthfront做對(duì)了。它通過(guò)手風(fēng)琴呈現(xiàn)大量信息，但問(wèn)題分為帶有清晰標(biāo)題的部分，使用易于理解的語(yǔ)言編寫(xiě)，并按邏輯順序排列。

粘性菜單（Sticky menus）：對(duì)于長(zhǎng)頁(yè)面，常見(jiàn)的問(wèn)題是讓買家知道他們的頁(yè)面有多深。 粘性菜單是一個(gè)很好的解決方案，因?yàn)闊o(wú)論買家的頁(yè)面有多深，他總是可以訪問(wèn)菜單導(dǎo)航選項(xiàng)。

Atlassian在讓買家認(rèn)識(shí)到他們所處的部分，以及已探索的信息方面做得非常出色。 他們使用粘性菜單和標(biāo)簽內(nèi)容的組合，在單個(gè)頁(yè)面中解釋他們的整個(gè)軟件解決方案Jira（這是一個(gè)非常復(fù)雜的軟件解決方案）。

更改已訪問(wèn)鏈接的顏色：這是現(xiàn)代設(shè)計(jì)人員和開(kāi)發(fā)人員經(jīng)常忽略的原則，但這是改進(jìn)識(shí)別的一種非常簡(jiǎn)單的方法。

專業(yè)建議：當(dāng)他們?yōu)g覽您的網(wǎng)站時(shí)，不要延長(zhǎng)買家的記憶。不要強(qiáng)迫他們記住任何事情。指出他們的位置，他們的去向以及他們已經(jīng)去過(guò)的位置。

可用性原則7： Encourage Efficiency and Flexibility of Use（靈活高效）

Jakob Nielsen：“Accelerators – 新手用戶是看不到的- 可以經(jīng)常加快專家用戶的交互，使系統(tǒng)同時(shí)可以滿足缺乏經(jīng)驗(yàn)和有經(jīng)驗(yàn)的用戶。允許用戶定制頻繁的操作。”

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：網(wǎng)站中進(jìn)行最常見(jiàn)的任務(wù)要最容易被找到。

有限（但相關(guān)）的用戶流程選項(xiàng)：Pipedrive首屏限制為4個(gè)選項(xiàng)：注冊(cè)、登錄、開(kāi)始免費(fèi)試用了和解有關(guān)軟件的更多信息。

對(duì)老用戶而言得體的CTA：對(duì)于網(wǎng)站而言，要記住的另一個(gè)重要事項(xiàng)是在網(wǎng)站頂部放置一個(gè)始終可訪問(wèn)的CTA快捷方式。 這一點(diǎn)非常重要，因?yàn)樵谫?gòu)買過(guò)程的評(píng)估階段，您的購(gòu)買者往往會(huì)經(jīng)常訪問(wèn)您的網(wǎng)站，而CTA使他們可以輕松地對(duì)最終步驟采取行動(dòng)。

專業(yè)建議：您可以使用快捷方式大幅減少用戶執(zhí)行任務(wù)所需的鼠標(biāo)點(diǎn)擊次數(shù)。

可用性原則8： Keep Your Design Aesthetically Minimalist（簡(jiǎn)約設(shè)計(jì)）

Jakob Nielsen：“對(duì)話不應(yīng)包含不相關(guān)或很少需要的信息。 對(duì)話中的每個(gè)額外信息都在與相關(guān)的信息競(jìng)爭(zhēng)，并降低其相對(duì)可見(jiàn)性。”

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：極簡(jiǎn)主義似乎有一種即時(shí)的吸引力，事實(shí)上，更簡(jiǎn)單的設(shè)計(jì)在科學(xué)上被證明對(duì)買家更具吸引力，并且設(shè)計(jì)趨勢(shì)反映了這一點(diǎn)。

以下是一些簡(jiǎn)單的設(shè)計(jì)示例，同時(shí)為買方提供足夠的信息：

另一個(gè)在網(wǎng)頁(yè)設(shè)計(jì)中利用極簡(jiǎn)主義優(yōu)勢(shì)的網(wǎng)站是Reuters，它的主頁(yè)采用了簡(jiǎn)約的色彩對(duì)比度，足以引導(dǎo)買家注意行為區(qū)域。請(qǐng)注意大量使用空白區(qū)域，以指導(dǎo)我們希望買家看到的內(nèi)容，并把重要的區(qū)域從背景中清晰地襯托出來(lái)。

Basecamp是另一個(gè)很好的例子，針對(duì)現(xiàn)有用戶的一個(gè)最突出的CTA（在頂部），以及一個(gè)針對(duì)新買家的最突出的CTA。

現(xiàn)在舉個(gè)Apple的界面做例子，就是“選擇你的國(guó)家或地區(qū)”頁(yè)面（這可能是蘋(píng)果被用作反例最多的一次）。 他們把產(chǎn)品銷售給來(lái)自世界各國(guó)的企業(yè)和用戶。考慮到這一點(diǎn)，您可能會(huì)認(rèn)為公司會(huì)在提示他們“選擇您的國(guó)家/地區(qū)”頁(yè)面上選擇他們的國(guó)家時(shí)，減輕其購(gòu)買者的認(rèn)知負(fù)擔(dān)。

不幸的是，Apple讓其買家在頁(yè)面上從一個(gè)巨大的列表中單獨(dú)找到他們各自的國(guó)家。這迫使買家必須思考和識(shí)別他們國(guó)家的名稱和標(biāo)志，而不是只有在他們?cè)谙吕藛沃墟I入幾個(gè)字符后才提供匹配建議。 你認(rèn)為蘋(píng)果公司 – 給予買家良好用戶體驗(yàn)的強(qiáng)大支持者 – 會(huì)更好地考慮該頁(yè)面……但事實(shí)并非如此。

可用性原則9： Allow Users to Recognize, Diagnose, and Recover From Errors（幫助用戶從錯(cuò)誤中恢復(fù)）

Jakob Nielsen：錯(cuò)誤信息應(yīng)該用簡(jiǎn)單的語(yǔ)言表達(dá)（沒(méi)有代碼），準(zhǔn)確地表明問(wèn)題，并建設(shè)性地提出解決方案。

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：所有網(wǎng)頁(yè)設(shè)計(jì)都會(huì)有錯(cuò)誤。當(dāng)錯(cuò)誤發(fā)生時(shí)，它們非常令人感到沮喪，因此您的買家需要快速?gòu)闹谢謴?fù)。

數(shù)字代理商Bluegg集中體現(xiàn)了如何通過(guò)其非常幽默和高效的錯(cuò)誤頁(yè)面，來(lái)減輕未找到頁(yè)面的挫敗感。 當(dāng)然，該頁(yè)面的幽默和外觀都是出乎意料的，但它也為用戶提供了一個(gè)功能上的好處——用戶可以選擇回到Bluegg的主頁(yè)，用一種愉快和戲弄的方式。

這是經(jīng)典的404頁(yè)面的另一個(gè)例子，來(lái)自TechCrunch。這個(gè)例子提供了更多功能性解決方案，旨在真正幫助用戶。錯(cuò)誤頁(yè)面不僅提供了建議搜索功能，使用戶走上正確的方向，而且還為用戶提供他們可能感興趣的最新內(nèi)容。

專業(yè)建議：您網(wǎng)站上的任何錯(cuò)誤消息都需要以簡(jiǎn)單的日常語(yǔ)言顯示，以便您的買家確切知道發(fā)生了什么。 錯(cuò)誤消息必須明確說(shuō)明問(wèn)題所在，并提出有用的解決方案。

可用性原則10：Offer Help and Documentation（提供幫助）

Jakob Nielsen：“即使沒(méi)有文檔會(huì)更好使用，但有時(shí)候還是可能需要提供幫助和文檔。任何此類信息都應(yīng)易于搜索，專注于用戶的任務(wù)，列出要執(zhí)行的具體步驟，而不要太寬泛。”

在設(shè)計(jì)B2B網(wǎng)站時(shí)可以翻譯為：您的網(wǎng)站不需要任提供何關(guān)于如何使用它的說(shuō)明。保持簡(jiǎn)單，但提供幫助。

您可以通過(guò)以下幾種方式執(zhí)行此操作：

（1）實(shí)時(shí)聊天彈出窗口

讓買家提出問(wèn)題的最佳時(shí)機(jī)正是他在研究信息時(shí)出現(xiàn)了問(wèn)題，您可以使用LiveChat等工具在瀏覽網(wǎng)站時(shí)與買家進(jìn)行互動(dòng)。

（2）FAQ

非常有用，特別是當(dāng)它們用于回應(yīng)常見(jiàn)問(wèn)題或猶豫時(shí)。 您要求的承諾越大，您需要回答的問(wèn)題就越多。 這就是FAQ在定價(jià)表或相對(duì)高承諾的網(wǎng)頁(yè)（例如“開(kāi)始使用”或“注冊(cè)”）中非常重要的原因。

（3）定價(jià)表

有時(shí)可能是一個(gè)充滿混亂的領(lǐng)域，從完整的功能表中分離不同定價(jià)計(jì)劃的概述是一種很好的做法。這將使您的買家很容易從高層次上了解不同的定價(jià)點(diǎn)，并且仍然允許他們深入了解所包含的功能。

這是一個(gè)例子，首先是總結(jié)，然后是功能比較表：

幫助文檔的另一個(gè)很好的例子是客戶服務(wù)平臺(tái)Zendesk的定價(jià)表，Zendesk利用彈出式解釋確保買家清楚地了解所包含的每個(gè)功能，消除可能的疑慮。

結(jié)論

無(wú)論您是重新設(shè)計(jì)網(wǎng)站還是在進(jìn)行優(yōu)化之旅，遵循這些啟發(fā)式方法都只是一種理智的行為。 雖然這些啟發(fā)式方法不是網(wǎng)頁(yè)設(shè)計(jì)的固定規(guī)則，但它是一個(gè)很好的起點(diǎn)。

原文地址：https://conversionxl.com/blog/10-best-practices-for-better-b2b-website-experience/

譯者：Halo

本文由 @Halo 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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