訪客至上的Web、移動可用性設計--指導原則

聽雲APM發表於2016-03-17

關於可用性設計,之前寫過一個“紙上談兵”版本的,那篇帖子主要是根據A/B test的方式來進行的。

但是最近找了本Steve krug寫的Don't make me think,我覺得更系統的講解了什麼是可用性設計。

實際上開始可用性設計之前,我們要搞清楚什麼是可用性設計。對於可用性設計我們可以找到很多的定義,經常可以分為下面幾個方面:

有用:產品能夠幫助使用者去完成一些必須的工作

可學習:人們能夠明白如何使用它

可記憶:再次使用的時候,不需要重新學習。

有效:真的幫助完成了任務

高效:產品只需要使用者花費適當的時間和適當的努力就完成了工作。

合乎期望:這個產品就是人們想要的。

再有一個加分項,令人愉悅的:使用產品的過程中覺得愉悅,好玩、有趣等等。

其實關於可用性最核心的內容非常簡單:一個有著平均能力和經驗的人,能明白如何使用產品,並且不必付出過多的努力或遇到不必要的麻煩。

弄清楚定義之後,如何做到呢?有一些指導原則,看著有些空泛但是大道理都是這樣。

1、別讓我思考

這條可以說是可用性的第一定律,是我們判斷什麼有用什麼沒用的第一法則,我們應該儘量做到,當我們看到一個頁面時候,它應該是不言而喻的,一目瞭然,這也是我經常提到的產品功能自解釋。

多餘的思考會分散使用者的精力,降低使用者的體驗,對使用者使用產品的主幹邏輯產生干擾。其實每個可用性問題的背後,都有一個貌似合理的根據,以及一個良好的但是錯誤的意圖。避免這種情況的出現,一般的方法都是列出一個檢查清單:我在什麼位置?我該從哪裡開始?他們把XX放哪兒了?頁面上最重要的是什麼?為啥這個功能叫這個?

2、掃描

對於網站,大部分時間裡使用者的使用都是以一種掃描的態勢進行的,我們精心準備的文字在使用者看起來更像是在車上飛馳的時候遇到的廣告牌。在京東技術學院培訓的時候也看到他們的內部資料,京東在對網站進行可用性測試的時候使用了眼動儀,觀察使用者在使用京東的時候是如何瀏覽的,結果表明在看商品列表的時候是採取一種Z字型的掃描態勢,這一發現也直接決定了京東的商品列表排布已經熱門商品的擺放位置,在這點上淘寶與京東相比,我更喜歡京東的,因為京東的頁面展示都是一種風格,比如搜尋ITO的箱子

淘寶上是這樣的:enter image description here

京東上是這樣的:enter image description here

因為圖片背景的關係,我更喜歡JD的,看起來更加清晰。但是重要的事情說N遍,在購買的主需求面前,頁面的展示稍微花哨點並不影響什麼,除非那個頁面太花哨了,晃得你想吐。

3、能用就行

我們絕大多數時候,做出的決定都不會是最好的選擇,而是選擇第一個能說得過去的,這就是滿意策略(《人的模型:社會化和理性》首次提到了這個概念)。人們在做決策的時候有很多環境因素會對人造成影響,包括時間的壓力、模糊的目標、有限的資訊和變化的環境。

其實人們做出滿意策略也比較好理解,因為這樣的效率最高。如果任何事情我們都追求完美,我們的生活將會無比艱辛。

當然,這條是告訴我們一個現象,但不是告訴我們應該這樣做,使用者很多時候都是能用就行了,也並不關心背後的原理,但是我們要之後,如果一個產品功能可以做到自解釋或是核心的功能非常突出,也許就一個核心功能,這樣避免了使用者做選擇,直接給使用者一個最高效的選擇,這樣帶來的好處是顯而易見的。這裡要強調的是,使用者在使用你的產品,不是因為你的產品非常好,而是你恰好在使用者覺得,能用就行的節點上。

4、不為閱讀設計

如果我們確定使用者都是用掃描的方式進行瀏覽的,那麼有幾點需要在設計的時候注意

  • 儘量利用習慣用法

    比如一級導航一般都在頁面的頂端,那麼你就別設計在頁面的底端;LOGO通常在左上角,那麼你就別設計在右下角,除非你有特別充足的理由以至於使用了不符合習慣的佈局後依然不會影響使用者使用的便利程度。

  • 建立有效的視覺層次

    越重要的地方越突出;邏輯相關的部分在視覺上也要相關;邏輯上包含巢狀關係的在視覺上也要進行巢狀;總之有效的視覺層次其實是讓視覺和功能邏輯保持一致,便於使用者直觀的理解。

  • 頁面劃分成明確對方定義區域

    和利用習慣用法一樣,LOGO區域、廣告區域、導航區域、主內容區域都有劃分清楚。

  • 明顯標識可以點選的區域

    這一點上在移動產品設計的時候尤為明顯,為啥。。。因為沒滑鼠啊,連個懸停提示都沒有。

  • 最小化干擾

    專注、聚焦,如果在實際設計的過程中啥都想要,這兩個詞只能是句口號。

  • 為內容建立清楚的格式,以便於掃描

    上面京東和淘寶的對比就是例子,這裡只說可用性設計,並不提及產品所定位引起的展示形態不同。

5、省略多餘的文字

這個就不細說了,別跟我提部落格這種專門的閱讀類產品哈,這裡說的去掉多餘的文字是指在標題和說明的設計上,應該儘量剪短,減少對使用者精力的分散。

另外多說一些關於點選的事兒,很多人在爭論讓使用者完成某個功能,點選越少就設計的越牛逼,使用者用起來越方便。其實這壓根就是個偽命題,使用者用起來是否方便是取決於使用者使用過程中所花費的精力,這個精力包含著點選次數的體力和艱難思考、分辨的腦力,我認為使用者不介意點選了幾次完成了認為,只要每次點選都是毫不費力的,並且讓使用者堅信自己的選擇是正確的。當然別抬槓說點了100多次確認才傳送一條微博什麼的。

相關文章