可用性定義：產(chǎn)品可用性，也稱為用戶可用性，是指真正提供客戶功能信息的產(chǎn)品的實用性。假設所有功能都可以，下一步是確保它按用戶想要的方式工作。

產(chǎn)品功能可見性

如果無法查看和確認元素（link，option，button…），則它不存在。

如果用戶沒有看到他們正在尋找什么，或者他們應該看到什么，那么這是一個嚴重的可用性問題。如果您正在設計產(chǎn)品，請不要期望用戶耐心地點擊以查找重要的輔助信息，閱讀合同條款中的模糊文章，或做可能從根本上影響用戶操作的事情。

以下情況將使產(chǎn)品設計中應避免功能元素“不可見”：

不在用戶正在尋找的位置;

被其他元素阻止;

即使在顯眼的位置也無法識別;

它根本不存在。

在報紙或單頁印刷的時代，報攤的報紙被折疊和放置。因此，除非有人拿起報紙打開報紙，否則只能看到頭版上的一些信息，而其他部分則被稱為“不明顯的位置”?？梢姾筒豢梢姴糠种g的區(qū)別是“折痕”。

隨著網(wǎng)站的出現(xiàn)，“l(fā)dquo;折痕&quoquo;被賦予了新的含義。 “以下折痕”表示除非用戶向下滾動頁面，否則內(nèi)容不會立即可見。與報紙不同，瀏覽器窗口中的“折痕”沒有確切的位置。因為折痕的位置取決于瀏覽器窗口的大小，如果您使用大屏幕并且您將瀏覽器窗口置于最大值，您將看到更多頁面。但是，如果您將窗口縮小，您將看到更少的內(nèi)容。在智能手機或上網(wǎng)本上，最大可見區(qū)域通常小于全尺寸計算機顯示器上的可見區(qū)域。

此外，屏幕分辨率可以極大地影響瀏覽器窗口中看到的內(nèi)容。屏幕分辨率越低，折痕越高。亞馬遜官方網(wǎng)站在1920 * 1080和1280 * 720分辨率下的折痕位置如下：

亞馬遜的官方網(wǎng)站（1920 * 1080分辨率）

亞馬遜的官方網(wǎng)站（1280 * 720分辨率）

事實上，Amazon.com的主頁很長。有些內(nèi)容是必需的，因為它們可以幫助搜索引擎優(yōu)化。但是內(nèi)容處于頁面不明顯的位置，很多人可能永遠看不到它們。

網(wǎng)站上的一些內(nèi)容清晰可見。以下是必須在明顯位置顯示的事項列表：

品牌和主要導航

幫助信息

網(wǎng)站搜索框

購物車和結(jié)算鏈接

咨詢鏈接

語言切換條目

快速應用的關(guān)鍵輸入?yún)^(qū)域

鍵輸出區(qū)域（位于輸入?yún)^(qū)域附近）

通常可安全放置在頁面底部的內(nèi)容包括：法律聲明;隱私政策;地址和聯(lián)系電話。

創(chuàng)建適合滾動的頁面

所謂的滾動頁面是使用布局向用戶發(fā)送強信號，告訴用戶滾動頁面并查看更多內(nèi)容。無論折痕在哪里，都要讓布局通過一個元素（如圖片），讓用戶知道滾動頁面可以看到更多內(nèi)容。適合滾動的技巧是打破圖形消失的內(nèi)容。網(wǎng)頁底部邊緣越干凈，滾動就越不合適。

底部圖像被破壞，這有利于頁面滾動

如果設計在物理上分離兩個相關(guān)信息，它也可能導致問題。例如，我想在頁面頂部的輸入框中提交一條消息，我希望輸出顯示在與輸入框相同的位置（例如，提交內(nèi)容）。即使在適合滾動的界面上，我們也不希望用戶滾動太多。為了點擊屏幕外的提交按鈕，必須滾動一個小頁面真的很煩人。隨著屏幕變小，越來越多的按鈕，輸入框和輸出框需要出現(xiàn)在頁面的頂部或底部，這也是一個符合人體工程學的考慮因素。

微博發(fā)布短信，發(fā)送按鈕位于右上角

底部的發(fā)布按鈕

避免設計廣告盲點

廣告盲點是人們忽視網(wǎng)站上各種橫幅廣告的趨勢。 USATODAY.com從訪談和網(wǎng)站統(tǒng)計數(shù)據(jù)中了解到，大多數(shù)用戶對三件事感興趣：體育，天氣和股票。因此，網(wǎng)站的設計是將所有三個項目放在一個有吸引力的彩色框中，并將其放在頁面頂部。結(jié)果是什么？沒有人點擊內(nèi)容，所以有一個廣告盲點。

在紅色框中，它是一個廣告盲點

在產(chǎn)品設計中，您可以通過以下方式避免廣告盲點：

允許特定用戶查看特定廣告以實現(xiàn)精確投放。

將廣告放在頁面底部，而不是頂部。最新的研究表明，頂部位置不在頁面的頂部，而是在第一個屏幕的底部。這有直接的廣告設計應用，可以避免廣告的盲點效應的損害。

以對聯(lián)的形式掛在頭版的兩側(cè)，規(guī)格很大，不會有廣告盲點，廣告位置會強烈影響參觀者的視野。

網(wǎng)站的重要內(nèi)容避免了過度設計

避免遮擋重要內(nèi)容

網(wǎng)絡瀏覽的總體經(jīng)驗極大地影響了用戶購買產(chǎn)品，繼續(xù)使用服務甚至注冊的愿望。但是，我們都知道有些網(wǎng)站只能在有限的范圍內(nèi)觀看，只有付費后才能看到更多的內(nèi)容。用戶必須注冊并提供個人信息，支付一些錢或做其他事情才能訪問該頁面。

京東的做法是一個積極的案例。京東為沒有登錄進入購物車提供技術(shù)支持。具體來說，一位未登記的用戶訪問了京東網(wǎng)站2,3和4這三個項目被添加到購物車，所以京東的后臺也記錄了已經(jīng)有三個在用戶的購物車中的項目，以及每次用戶查看他們的購物車時，京東后臺都可以顯示相應的數(shù)據(jù)（涉及Session和cookie技術(shù)，本文不深入），會提示用戶登錄/注冊當用戶最終想要解決時的帳戶。

我們希望確保產(chǎn)品在產(chǎn)品設計中的可見性，嘗試解決設計中的以下問題：

不應在用戶無法找到的地方隱藏重要信息。

不要讓任何東西阻止您想要顯示的信息。

避免將重要信息設計為廣告的盲點。 。

在折痕頁面中對信息進行分組，并且不會在折痕下隱藏重要信息。

付款方式不會影響免費體驗的一部分。

產(chǎn)品應易于用戶理解

在可用性方面，“易于理解”用戶的答案必須為“是”是“”！

共同參考概念

共同參考意味著無論誰使用某些東西，它都可以與其設計者保持相同的理解

文本

文本描述一直在產(chǎn)品設計中發(fā)揮重要作用。例如，書中的文字通常不僅僅是圖片，而且iPhone有一個非?？岬膱D標和相關(guān)的文字。該文本構(gòu)成了大多數(shù)手冊，菜單，產(chǎn)品描述和公共內(nèi)容的核心。

關(guān)于文本的可用性，有兩點需要注意：

無論描述什么，它必須簡潔明了

不要以為每個人都能理解你正確寫的信息

用戶無法理解的錯誤消息

創(chuàng)建共同參考的要點：

不要認為一切都是理所當然的

提前考慮用戶可能遇到的問題

回答用戶沒有想到的問題

根據(jù)用戶的實際使用情況檢查內(nèi)容

不同的使用場景將影響所需的信息（已提供）

圖片

一張圖片勝過千言萬語。圖像可以增強文本效果。最重要的是，圖像可以是一些難以用文字清晰描述的東西的直觀表示。文本是傳達事實和數(shù)據(jù)的好方法。但是照片，圖形等傾向于更好地傳達物體的微妙和經(jīng)常情感方面。

此外，圖片還可以顯示如何使用，磨損等等。如果以稍微不同的方式使用產(chǎn)品，圖片將非常有用。

最后，您可能無法單獨顯示包含圖像和圖像的所有內(nèi)容。為了清楚地表達信息，請使用兩種或更多種常見的參考點方法。

天貓顯示的產(chǎn)品圖不僅顯示產(chǎn)品的詳細信息，如何使用它，還顯示產(chǎn)品與視頻的組合。這是一個很好的共同參考

圖標

我們知道這個圖標很有吸引力，但它實際上非常無能。事實上，大多數(shù)人最終只能識別出4個圖標：

放大鏡（找）

房子（主頁）

信封（聯(lián)系我們/郵件）

打印機（打印）

經(jīng)驗告訴我們，如果你真的需要一個圖標，最好使用類似于微軟，蘋果或谷歌的設計。人們通過網(wǎng)站或應用程序?qū)W習東西，并期望將這些知識應用于其他網(wǎng)站和應用程序。不要設計太有創(chuàng)意的圖標。雖然它們很漂亮，但設計成本很高。真正有創(chuàng)意的圖標通常只在點擊時才有意義，否則看起來沒用就沒用了。產(chǎn)品中任何東西的概念都是它能做的，而不是它的外觀。

QQ圖標也將通過鼠標添加到顯示文本中，這使用戶更容易理解圖標的含義

音頻，視頻

帶寬的增加，標準化格式的統(tǒng)一以及易于使用的第三方服務的出現(xiàn)使人們能夠快速地向網(wǎng)站和應用程序添加真實的多媒體內(nèi)容。視頻和音頻的出現(xiàn)增加了用戶交互的樂趣，人們可以通過收聽和觀看視頻來更快地獲得他們想要的資源。視頻和音頻通常是更好的參考。

為確保我們的產(chǎn)品易于用戶理解，我們必須執(zhí)行以下操作：

解釋并幫助副本準確而全面。

不要使用可能難以理解的縮寫，普通話或不熟悉的單詞。

使用正確的圖片創(chuàng)建公共參考。

讓所有用戶了解網(wǎng)絡內(nèi)容或離線流程。

使圖標包含描述性文本，包括alt屬性（當您將鼠標懸停在單詞或圖像上時，會自動彈出一個小黃色框）。

從視覺設計角度創(chuàng)建成熟的公共參考。

在不誤導用戶的情況下直觀地描述內(nèi)容。

產(chǎn)品一致性

產(chǎn)品規(guī)則不會意外更改。

一致性是清晰簡潔的功能設計的關(guān)鍵之一，使我們周圍的世界更容易理解，讓我們的生活更輕松。 Apple的設計師已經(jīng)說過‘當事情表現(xiàn)不同時，他們應該保持視覺上的不一致;當事情表現(xiàn)相同時，他們應該保持視覺上的一致性。 &rsquo的;

例如，如果您始終使用“提交”按鈕作為按鈕標簽，不要突然改為“發(fā)送”。并且“接受””避免混淆。不要只是為了創(chuàng)造性而混合術(shù)語。一旦你建立了自己的語言習慣，就要堅持下去，特別是在與表格和對話有關(guān)的地方。

保持單調(diào)

兩者都希望保持措辭的標準，但也為用戶提供簡單直接的選擇。例如，選擇性別時：

男性;

女性;

這是一個單獨的列表，其中所有單詞（在網(wǎng)站上將其視為菜單標簽）明確區(qū)分，沒有任何重復，用戶可以輕松做出選擇。如果您更改為以下情況，您會如何選擇？

男性;

女性;

次要;

菜單分類清晰明了

提高標準化的一致性

使用標準化設計可以保護用戶的使用。例如，要使Android應用程序符合Google的相關(guān)規(guī)范，iOS也有自己的設計規(guī)范。標準化的關(guān)鍵不是阻礙創(chuàng)新，而是要使解決方案清晰可見。

在設計不同的客戶產(chǎn)品時，我們必須確保掌握設計規(guī)范，以便我們能夠設計出符合用戶使用習慣的產(chǎn)品。

一鍵，一個功能

多按鈕遙控器

我們都看到了煩人的遙控器，面板上有很多按鈕。雖然這個東西還有許多其他可用性問題，但至少它沒有多功能按鈕。如果你想要一個按鈕有多個功能，它基本上是要求它。人們并不總是理解為什么應用程序或網(wǎng)站突然切入“不同模式”。

例如，我可以使用遙控器上的菜單按鈕激活或停用電視屏幕上的菜單。這很好。但是，菜單按鈕周圍有四個光標按鈕用于導航。左箭頭按鈕是后退功能，當菜單關(guān)閉時，它可以快速查看12種不同的屏幕寬高比（寬屏，電影擴展16：9，字幕縮放等）。如果我同時按下左右箭頭，我會看到設置菜單，但它與我按下菜單按鈕時看到的菜單不同。簡而言之，多功能按鈕可以說是非常糟糕的。

Apple在消除多功能按鈕和避免多功能性方面做得非常出色。 iPhone只有一個按鈕，它只做一件事：回到手機的主屏幕。所有其他操作都是通過“軟”操作完成的。觸摸屏上的按鈕。 Apple鼠標也只有一個按鈕。換句話說，如果您按住Apple鼠標一兩秒鐘，您將看到另一個菜單，就像PC上的鼠標右鍵一樣。這是一種妥協(xié)，但它的工作原理和易于操作。

當然，按鈕并不總是更簡單。多按鈕并不總是壞事，只要它們可以合理分組，指示按鈕的相關(guān)功能，并且不會在不同時間表示不同的功能。

圖標，功能

與按鈕密切相關(guān)的是圖標的操作。例如，谷歌流行的Gmail應用程序曾經(jīng)是重用圖標的著名名稱。畢竟，圖標設置為快速識別隱藏在圖標后面的功能。

當然，這不僅僅是谷歌。 Windows產(chǎn)品也有重用圖標的情況。

從這個角度來看，即使經(jīng)過多年的研究和消費者投訴，即使是大公司也沒有真正接受“一個圖標，一個功能”的最佳實踐概念。

不同的圖標提供不同的功能，以便用戶不會對我們的產(chǎn)品產(chǎn)生懷疑。

網(wǎng)易云音樂，細致的圖標

使我們的產(chǎn)品保持一致非常重要。我們必須做到以下幾點：

設計中應該沒有看起來相同的東西，但實際操作是不同的。

設計中應該沒有看起來不同但操作相同的東西。

不要為了創(chuàng)新而犧牲對象或功能的一致性。

不要重復使用圖標來實現(xiàn)不同的功能。

嘗試為您的產(chǎn)品或服務添加一致性，或使用其他人開發(fā)的最佳實踐。

使用按鈕和其他控件對按鈕和其他控件進行分類，以便用戶立即了解它們是相關(guān)的。

產(chǎn)品可預測性

讓用戶清楚地知道接下來會發(fā)生什么。

一致性和可預測性之間的顯著差異在于，一致性意味著某些事情每次都做同樣的事情，而可預測性意味著它做了您期望它做的事情。舉一個簡單的例子，花瓣網(wǎng)上的每種材料都有一組圖標，這是一致的。用戶點擊圖標意味著收集材料，這是可預測的。

一致性和可預測性

讓用戶知道會發(fā)生什么

可預測性意味著某些東西會做你想做的事情。了解期望的關(guān)鍵是在交互實際發(fā)生之前設定期望。

我打賭你肯定會去餐館之前去餐館檢查商家是否值得信賴。在購買書籍（或其他項目）之前，您一定會在評論部分查看書籍的評論。

當用戶觸發(fā)操作時，適當?shù)奶崾究梢詾橛脩艚⑵谕?

倒計時跳轉(zhuǎn)到頁面提示，為用戶提供期望

品牌，客戶滿意度和期望

在營銷方面，品牌也與設定期望有關(guān)。其中一個關(guān)鍵組成部分是產(chǎn)品或服務的市場定位。例如，我們認為沃爾沃是一款安全的汽車，捷豹是一款舒適的跑車，而雪佛蘭則是一款實用的汽車。

客戶滿意度和期望密切相關(guān)。例如，外國調(diào)查顯示，沃爾瑪是一家折扣店，以其良好的服務而聞名，并不具有吸引力，其客戶滿意度高于Nordstrom，后者是自稱的。為什么？因為沒有人真的希望得到沃爾瑪?shù)膬?yōu)質(zhì)服務，所以工作人員做任何讓購物者更方便的事情令人印象深刻。但對Nordstrom服務的期望已經(jīng)相當高，因此他們需要更加努力地給客戶留下深刻印象。這相當于業(yè)務中的高位。

所以我們學到的是，如果人們沒有期望，幫助他們建立期望;如果他們有期望，你越是超出期望，那么人們就會感覺更好的可用性。也就是說，超出用戶的期望。

讓用戶知道有多少步驟

多次點擊并不一定會使產(chǎn)品變得更糟，只要用戶認為每次點擊都會使他們更接近目標，他們就會多次點擊。因此，我們最有可能預見的往往是告訴人們提前點擊多少次。

如果有多個步驟，請務必在文字或圖片中顯示。

顯示流程的步驟

把東西放在用戶期望的地方

使事物可見意味著將它們放在應該出現(xiàn)的位置。在可預測性方面，將事物放在人們期望找到它們的地方也很重要。例如，在現(xiàn)實世界中，我希望電燈開關(guān)靠近門，希望在廚房里找到鍋碗瓢盆。簡而言之，用戶希望一切都在需要的地方附近并以合理的方式分組。

為確保我們的產(chǎn)品具有可預測性，我們可以嘗試以下方法：

幫助用戶利用過去的經(jīng)驗。

讓用戶知道應該事先知道什么。

提前告訴用戶幾步。

提供可見狀態(tài)表示產(chǎn)品的不可用狀態(tài)。

確保在使用產(chǎn)品期間滿足用戶的期望。

作者：轉(zhuǎn)瞬即逝，互聯(lián)網(wǎng)產(chǎn)品設計師，4年互聯(lián)網(wǎng)產(chǎn)品經(jīng)驗。

本文最初由@流年發(fā)表。未經(jīng)許可，禁止復制。

該地圖來自PEXELS，基于CC0協(xié)議

« 在線文檔可以幫助您升級工作場所？使用金山文件就足夠了 | Bing和Google的SEO優(yōu)化規(guī)則有什么區(qū)別？ »