What's News

把握互動設計的五個核心原則,打造令人流連忘返的網站

2017-03-24 /

0001

瀏覽網站已是現代生活中普遍的行為,每天醒著的時間我們大概都在上網,讓人們「看得爽快、用得愉快」是設計師當仁不讓的責任。出色的互動設計是留住使用者的不二法門,但是,該怎麼把人與機器之間的互動,變得跟人與人之間的互動一般自然,並不是簡單的課題,答案也不是非黑即白。UXPin 內容戰略 Jerry Cao 提出五個互動設計的支柱,把握這五個核心原則,讓你的網站脫穎而出吧!

1. 目標導向的設計(Goal-driven Design)

0002△Mailchimp 的人格塑造範例

也許你不太懂使用者研究,但還是得學會如何在設計中注入關於使用者觀察的洞見。利用以下這兩種技巧幫助你加強同理心:

  1. 塑造人格:人格(persona)是從觀察目標使用者的行為與心理,所創造的虛構角色。思考「像是 Sally 這種週期性的購物者,會怎麼進行結帳流程?」這類問題有助於進行重要的設計決策。
  2. 假想使用情境:使用者情境與「人格」有關,它解釋了人格怎麼使用網站。比方說「今天是黑色星期五,Sally 列了一長串禮物清單,準備在工作之前在網路上通通解決。」設想情境,讓你得以探究人格與產品之間的互動過程。

0003△詳細的經驗地圖

  1. 繪製體驗地圖:把促成單一行為的各種事件,或者該行為觸發的後續狀況與情緒,全部寫下來。「Sally 因為在滑雪假期摔斷了腿而悶悶不樂,她得加緊腳步搞定聖誕節購物計劃。」

這三個方法塑造了完整的體驗圖像:使用者、情境以及整個旅程的情緒,都清晰可見。

2. 可用性(usability)

0004△EventBrite 的座位設計

「可用性(usability)」是設計的最低要求,如果使用者根本不知道怎麼用你的產品,當然也就不會想要擁有它。我們可以看看 EventBrite 的座位設計,這個服務讓使用者得以建立對號入座的活動,每種可能的情境都不放過(座位是一排一排的、還是圓桌,需不需要加上舞台),他們把複雜的多重步驟轉化為單一的線性路徑,使用起來不會頭昏眼花。如同 Eventbrite,系統的可用性必需讓使用者不費吹灰之力,使用者愈不需要思考「該怎麼用」,他們愈能輕易完成整個流程。

3. 預設用途與指意(Affordances & Signifiers)

這裡有兩個設計名詞:affordance(預設用途) 與 signifier(指意),

預設用途(affordance)的概念意味著,功能必須含有解釋自我的能耐,比如一條馬路在眼前,不用多加說明,人們就知道可以行走,而「指意」則提示了「預測用途」,用個例子來解釋就是,「平整」的路面,代表人類能夠安心的「用雙腳走在上頭」。

0005△來源:Affordances in Design

但是如果缺乏「指意」,使用者就很難察覺「預設用途」。在上面這個例子中,你可以看到按鈕設計的過程,最左邊的按鈕沒有任何「示意」的象徵,只是一般的文字而已,但是第三個多了圓角與漸層(gradient),網友自然知道這是可以點選的東西。

0006△來源:Affordances in Design

「指意」也有隱喻的作用,因為設計師也應該讓使用者知道「為何」他們要與某個功能進行互動。以 iPhone dock 來說,圓角的模樣讓我們知道這是可以點按的東西,而帶有隱喻性的圖像(電話、信封、音符),則傳達了互動的目的。

4. 可學習性(Learnability)

0007△來源:Consistency as the key to better UX

理想上,使用者在使用第一次之後,下次就該能反射性的執行所有動作,但是現實沒有這麼美好。良好的互動設計應該建立連貫性(consistency)與可預測性(predictability)。舉例來說,連結的處理,要嘛統一開新分頁、要嘛就全部都在原頁重新導向,不要兩種混在一起。圖片也是,不是全部都用 lightbox 呈現,不然就是都用開新分頁處理。連貫性能夠帶來可預測性,使用者自然學得比較快。

0008△來源:Breadcrumb Navigation in Website Design: Outdated or Trending?

另外一個改善「可學習性」的常見策略則是使用既有的 UI 模式。比如「breadcrumbs(中文譯作麵包屑)」,引導使用者在不同的頁面層級中切換瀏覽。無論使用者在哪個網站,這都是令他們熟悉的樣子,不用重新適應,當然你可以依照網站整體的設計風格,稍加調整。如果你的產品能夠讓人自然而然地學習,也會加深人們繼續使用的動機,同時也有不斷改善可用性的功效。

5. 給予回饋與回應的時間(Feedback & Response Time)

0009△來源:Applied Interaction Design

「回饋(feedback)」稱得上是互動的核心。每個互動都是使用者與產品之間的對話,產品應該更加友善、趣味而且益處多多。

可以是細緻的動畫、優美的微互動,或者只是「嗶」一聲,無論是哪種方式,都在傳達訊息給使用者,提示他們任務完成與否,以及下一步該怎麼做。比如社群網站管理服務 Hootsuite 的招牌貓頭鷹,在使用者長期靜止、沒有在 Twitter 上發出任何訊息時,就會「睡著」。這不只是個能讓使用者會心一笑的「小動作」,還可能將負面狀況(不再發送訊息)轉為正面行動。

0010△來源:Emotionally Intelligent Interaction Design

此外,回應時間的重要性也不在話下,總之,愈快愈好。想像一下,如果彈吉他時,每個聲音都延遲兩秒才出來,你會有多惱怒。

改善互動的五個步驟

了解互動設計的五項根基之後,現在就來看看實際上究竟怎麼執行吧!互動設計師 Stephen P. Anderson 提了一個有點費工、但卻能釐清許多事情的建議:找真人扮演介面,而你自己則作為使用者與之互動。一來一往之間,你就能發現介面可能傳來的古怪回應,真正進入設計流程之後,你就能及早避免設計出機械式、欠缺人性的互動形式。

角色扮演:找兩個人來,一個人扮演介面,一個人做筆記。製作一個立體的瀏覽器,讓扮演介面的人舉著。接著,你扮演使用者,開始跟介面對話,「介面」只能透過標籤(labels)、選單以及任何在 UI 上的東西,回應你的目的。

0011來源:Anatomy of the experience map

描繪故事:記下整個過程的每個步驟,包含任務與情緒。這個部分可以很簡單到只記下幾個使用者情境,也能複雜到含有 4 個階段的體驗地圖。想進一步了解詳情,可以參考 The Guide to UX Design Documentation。

0012△來源:Web UI Pattern 2014

簡化步驟:在網路上買車、買機票,這些都算是相當複雜的行為,設計這種類型的介面時,必須特別注意,把繁雜的目標簡化為幾個簡單的步驟(比方說先問終點、接著預計出發與抵達的時間),維珍航空的訂票流程非常值得研究。

限制使用者的選項:這應該是最難的一步了。但是你一定要盡可能減少使用者所能進行的動作。在設計的過程中,反覆詢問自己,是不是所有選項都一定要被塞在某段互動裡面,如果答案是否定的,那就以開啟另一段對話的方式,繼續互動。

注意「猶豫期」:使用者猶豫不決或者甚至停止互動的時間,稱為「micromoment」。回想先前角色扮演的練習,一定有某些時間是裹足不前的,遇到這種狀況,試著以改寫說明文案(microcopy)或者承襲既往的 UI 模式,作為改善的基礎。

就像魔術師的表演中,若有哪個細微的環節稍有不慎,就會毀了整場演出,一個糟糕的互動,也能造成整個使用者體驗大崩壞。希望透過系統化的解釋,能夠對您接下來的設計流程有所幫助。

 

文章來源:http://www.inside.com.tw/2015/03/11/the-5-pillars-of-interaction-design

Google 行動裝置相容性測試檢測
網址:https://www.google.com/webmasters/tools/mobile-friendly/

 
 
蘋果所規劃 網頁設計  http://www.cc-design.com.tw/ 完全符合 google認證


 
更多案例
 
online_tw6.gif

Top