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

讓人們「看得爽快、用得愉快」是設計師當仁不讓的責任。出色的互動設計是留住使用者的不二法門,但是,該怎麼把人與機器之間的互動,變得跟人與人之間的互動一般自然,並不是簡單的課題,答案也不是非黑即白。UXPin 內容戰略 Jerry Cao 提出五個互動設計的支柱,把握這五個核心原則,讓你的網站脫穎而出吧!
評論
評論

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

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

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

2. 可用性(usability)

EventBrite 的座位設計

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

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

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

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

△來源:Affordances in Design

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

△來源:Affordances in Design

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

4. 可學習性(Learnability)

△來源:Consistency as the key to better UX

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

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

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

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

△來源:Applied Interaction Design

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

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

△來源:Emotionally Intelligent Interaction Design

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

改善互動的五個步驟

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

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

來源:Anatomy of the experience map

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

△來源:Web UI Pattern 2014

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

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

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

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

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

5G 電波對孩子安全嗎?停止瞎操心 — 基地台電磁波比家長想得更無害!

「5G 基地台有致癌風險」、「5G 電波對孩子健康有不良影響」…這些危言聳動的警語,你是否也有所耳聞呢?
評論
Photo Credit:unsplash
評論

5G 時代即將來臨,除了令人期待的超快網速外,許多家長正有著另一種隱憂——如果家附近新建 5G 基地台,對兒童健康會受影響嗎?畢竟,一般人通常都對電磁波一知半解,很容易因為這樣的聳動標題而產生刻板印象。

事實上,電磁波真的對人體有害嗎?就讓我們一同來闢謠吧!

Q:我家附近剛建好基地台,如果長期暴露在過量電磁波的環境,真的很怕影響家人健康…

這點爸媽完全不需擔心,雖然 5G 因頻率更高、傳送距離變短,必須建置比 4G 時代更密集的基地台數量。但手機與 5G 基地台所用的頻率是屬於「非游離輻射」,不會破壞生物細胞分子,因此不會造成人體影響。而且基地台所發射的電磁波均符合國際和國家電磁波安全標準,所以在適當的控管下十分安全。

此外,基地台絕對和你家保持著安全「社交距離」,根據國家通訊傳播委員會的法規明定:一般室外大型基地臺天線水平方向正前方 15 公尺內不得有高於天線之合法建築物,在「社交距離」的保護下,家中所接觸到的電磁波並不會過量。

若家長還是很擔心,也可以到行政院環保署的非屬原子能游離輻射管制網(https://nonionized.epa.gov.tw/MessagePost.aspx),可以查到全台各地的監測數據,或者是撥打基地臺電磁波量測服務專線 0800-580-010(0800,我幫您,量一量),有數據更安心。

Q:聽 LINE 群組說電子產品的電磁波都有危險,所以我全面禁止小孩玩手機!結果現在孩子嚴正抗議,跟我引發家庭革命…

咳,這邊並不是鼓勵小孩跟父母唱反調,不過從二戰開始各國傾力研究電磁波以來——目前並無科學證明,手機的電磁波會直接對小孩發育或人體造成影響。因此,「手機導致罹癌」完全是未經證實的,別輕信於謠言!

若是家中寶貝太常使用手機、平板等,該注意的反而應是孩子與電子產品互動的方式。例如是否有使用時間過長、影響視力、傷害眼睛、進入不當網站、社群媒體焦慮等心理危害。不管是年齡偏小的兒童、還是正值青春期的青少年,都可能產生濫用問題,而這才是數位家長該關心的重點。

Photo Credit:unsplash

夏日烈陽下的紫外線,比基地台的電磁波更危險!

其實,我們都在一個處處都是電磁波的世界。不只手機,人類每天接觸到的電磁波比你想得更多,不過並不是所有的電磁波都有害。

冬天時穿毛衣微微觸電的靜電反應、孩子用來打手遊的智慧型手機、家庭休閒時光必備的電視…這些都屬於低頻率的非游離輻射;再把頻率調高一點點,這些是有熱效應的非游離輻射,例如維持客廳明亮的可見光,以及孩子看卡通必備、電視遙控器上的紅外線。這些生活常接觸的「非游離輻射」,因為頻率低於 3x1015 Hz 的電磁波,但並不會破壞分子鍵,因此對人體無害。

最後,來自太空、恆星核融合產生的伽瑪射線,以及健康檢查會碰到的X光、夏天正午站在烈陽底下的紫外線,都屬於高頻率的「游離輻射」,頻率高於 3x1015 Hz 的電磁波,這類型能量密度較強的輻射,會破壞生物細胞分子,才是人體必須格外小心的電波。

Photo Credit:國家通訊傳播委員會

電磁波是個安全的酷東西,我需要瞭解更多…

在科技轉換的時代,人們常因不瞭解而引發恐慌,這都是很正常的,因為我們都想好好保護家中寶貝。但當面對來路不明的謠言時,建議可先冷靜以待,到公部門或具公信力的新聞網站上查詢相關說明,用理性來擊敗偽科學的謠言,這才是保護孩子的正確之道。

如果有更多的疑問,歡迎到國家通訊傳播委員會的行動通訊電磁波官網(https://memf.ncc.gov.tw/),延伸閱讀更多關於電磁波的知識,讓你與家人在 5G 時代下生活得更安心。

如果你的孩子剛好擁有美術天份,也對行動通訊感興趣的話,不妨鼓勵他/她參與 110 年電磁波安全電腦動畫競賽(https://memf.ncc.gov.tw/news_detail.aspx?uid=66),用創意讓更多的人認識 5G!

國家通訊傳播委員會 廣告