App 的 「確定」按鈕應該放在左邊還是右邊?

不論你是 app 的使用者或開發者,有沒有思考過,到底「確認」鍵應該放在對話視窗的左邊還是右邊呢?
評論
評論

作者是 MoonMonster,百度無線使用者體驗部互動設計師,現任上海 MUX 負責人。本文 〈在 App 裡,「確定」按鈕應該放在左邊還是右邊?〉 轉載自他的部落格「MoonMonster」。

---

iOS 說,「I'm always right」,於是「確定」就在了右邊。Android 倔強的說,「要在左邊」,於是「確定」就在了左邊。

接著,iOS 把 Android 揍了一頓,「stay foolish,foolish…… 都要在右邊」,Android 被硬拗到了右邊。

這是個老話題了,只是隨著時間的推移,各平台都在更新,我們也要與時俱進,有必要再拿出來提一提。

三大行動平台:Android、iOS 和 Windows Phone(下文簡稱 WP),我們一個一個說。

Windows Phone

先從 WP 開始吧,WP 平台內的彈出提示稱之為「raw notifications」,延續 Windowsdows 桌面平台的設計原則。


圖 1

如圖 1 所示,dialog(對話框)內操作按鍵稱為「Commit button」,代表「肯定」的操作位於左邊,「否定」位於最右邊。Windows 平台定義了具體的用法與順序:Yes/No、Yes/No/Cancel、[Do it]/Cancel、[Do it]/[Don't do it]、[Do it]/[Don't do it]/Cancel。(可參考 這裡 ,注意 OK 鍵沒有在此間出沒,後面具體說明。


圖 2

WP 平台及 Windows 8 平台 dialog 內操作按鍵的左右順序也是一致的(圖 2)。

iOS

iOS 平台,它的出身和歷史註定了與 OS X 在設計上的傳承。與 Windows 相反(或者說 Windows 有意與 OS X 相反,這裡面又要翻出一堆歷史問題了 ^_^)代表「肯定」的操作位於右邊,「否定」位於左邊。(大多數情況下)( iOS 需要注意按鍵反光的狀態。)


圖 3

OS X 使用者預期所有的按鍵位於 dialog 的右側底部,啟動一個操作的按鍵總是位於最右側。該按鍵稱之為「action button」,以確認當前 dialog 最重要的操作。取消按鍵位於「action button」的左側(圖 3 左)。(OS X Interface Guidelines,請參考 Dialog 章節。)

iOS 繼承了 OS X 的設計原則(圖 3 右),只是稍稍有些不一樣,像是對於 Cancel(取消)的理解:

當操作涉及潛在的風險時,兩個按鍵中「Cancel」按鍵應位於右側,並反光提示。
當需要引導人們進行所期望的操作時,兩個按鍵中的「Cancel」按應位於左側,相對應的操作按鍵反光提示。

iOS 中「Cancel」可能位於左側,也可能位於右側,這取決於所執行的操作是否具有破壞性。 iOS 平台更看中的是按鍵的反光狀態(iOS 反光狀態始終在右側,OS X 則不然)。同時在 dialog 彈出的情況下按下 home 鍵,應當是等同於點擊了「Cancel」按鍵,並不執行任何操作。(請參考 iOS Human Interface Guidelines 中的 alert 部分)

Android

Android 平台,這才是最頭痛的家伙,大多數的坑都在這裡。剛出道時,可能是因為當時設計規範執行力道小、Android 系統的碎片化等原因,導致 dialog 內的操作按鍵順序隨著 app 開發者喜好而定,大多數與 Windows 平台保持一致。更新至 Android 4.X 後,官方終於對此有了一個很明確的態度,並在 Android Design 裡有了標準的定義。


圖 4

Dialog 操作按鈕通常是「取消」/「確定」,確定鍵同時也是首選操作以及最可能執行的操作。但是,如果涉及特殊操作例如關閉或等待,那麼所有的按鈕都應該使用動詞。同是,dialog 中代表「肯定」的操作總是安排在右側,而否定的操作放在左側。與 iOS 理念上統一,但也有所保留!^_^(就算是到現在還是能看到大量的 Android app 與該原則相悖,或許是習慣,或許是遷就舊版系統…… Android Design,請參考 這裡的 的 Dialog 章節。)

聊完了各平台的設計規範,對各平台 dialog 內操作按鍵的順序有所了解,大家知道怎麼去進行設計了,但是身為設計者需要更進一步的思考,有興趣的請繼續往下看。

如果你是一個設計者,在完全沒有設計原則指導的情況下,將如何安排 dialog 內操作按鍵的順序呢?思考一下吧。

以下僅為個人觀點!歡迎大家討論。

我傾向於代表「肯定」的操作位於右邊,否定操作位於左邊,也就是「取消」/「確定」。

「確定」/「取消」,採用這種順序最大的理由是符合自然的閱讀順序,也就是大部分從左起語言的順序。使用者在執行某操作彈出 dialog 後,視線最先接觸的是需要執行的「action」,因為設計者認為「action」重要程度比「cancel」要高,需要著重強調,這裡涉及認知領域的首因效應(Primacy Effect),以後有機會再講吧。(由於是 Windows 平台所採用的順序,就簡稱為 Windows 順序吧。)

「取消」/「確定」,由於主要是水果平台採用,以下簡稱為 OS X 順序,或者 iOS 順序。說說具體為什麼傾向它的幾個理由:

  • 閱讀視線流
  • 掃視時的閱讀順序
  • 邏輯順序

閱讀視線流,Windows 順序雖然能夠使用者視線更早接觸到「action」,但不可否認一個事實,使用者會閱讀完所有可操作的選項,這意味著使用者的視線不會停留在「action」上,它將繼續向後進行掃描,在查看完所有可選項後,再返回之前的的「action」執行相應操作。採用 iOS 順序,使用者的視線流將會更平滑,視線最終停留的位置也是「action」所處的位置。透過圖 5 對比,可以得知「確定」放置於左側,將導致使用者的視線流發生改變,使用者視線流無意識的回跳,而放於右側將保持視線流在一個方向,減少視線曲折搜尋的過程。


圖 5

掃視時的閱讀順序, 有人可能會問了這與前一個理由有什麼區別?閱讀是由掃視(saccades)和凝視(fixation)兩個動作連續組合、切換的過程。第一個的理由基於凝視(fixation)運動過程。

為什麼在 dialog 彈出時會出現掃視?因為,使用者對於 dialog 裡的內容只是快速的瀏覽,或者說是沒有人會認真閱讀 dialog 裡的內容。由此也引申出 dialog 設計時的一個重要原則:不要在 dialog 相關的 action 按鍵裡寫上「好」或「確定」等,應該用實際會發生的動作來命名。這也是為什麼建議使用動詞的原因。如:你需要執行一個「儲存」操作,那你的 dialog 裡出現的相關 action 應該是「取消」和「儲存」。

說回掃視,使用者的在進行掃視時順序往往如圖 6,最終視覺的落點是在視覺界面的右下角(Terminal Area),掃視終點往往就在「action」區域上,該區域能夠獲得更多的視覺關注。這也是為什麼 Windows 及 OS X 桌面系統內的 dialog 按鍵均非居中顯示,而是位於右下角的原因。古老的 Gutenberg Diagram(古藤堡圖表)也是用以描述掃視順序的模型(請參考 這裡的資料 。注意圖 6 所標出的區域 1,iOS 在右側「action」鍵上加了反光效果,這對視覺搜尋有益。


圖 6

邏輯順序, 首先讓我們來對 dialog 內按鍵定義一下,「確定」按鍵是使用者以執行相關操作的按鍵,點擊後將對現有狀態發生根本性的改變。「取消」按鍵是使使用者返回到原來狀態,取消當前 dialog。

這意味著,使用者點擊「action」後將進入下一步操作,點擊「cancel」將執行返回操作。想想我們常見的:瀏覽器上的導航按鍵、kindle 上的左右翻頁按鍵、安排軟體過程當中的「上一步」、「下一步」……等等!

如圖 7,使用者在 dialog 內所看到的視覺順序與邏輯順序是一致的。


圖 7

另外,桌面平台上還考慮到使用者左右手使用習慣,這其實與 dialog 內的邏輯順序也有所關聯。我們知道大部分的人主要是右手使用者,當 dialog 內的「action」位於右側時,使用者在操作時能夠更為順應他們自身的使用習慣。這一點還出現在 Windows 和 OS X 桌面文件排布順序方面,OS X 為了大部分的右手使用者將桌面文件分布在螢幕的右側。


圖 8

最後來個結尾,其實視覺順序在設計時,或系統設計時是一條很重要的原則,可惜並沒有太多設計師重視這條原則,舉例說明(圖 9),從下圖中將 Windows 和 OS X 的窗口控制按鍵抽離出來,並將「關閉」替換成「取消」,如果將這些操作放置在一個 dialog 中,有沒有發現它們還是符合這兩個系統分別堅持的設計原則呢?

圖 9

休假後的第一篇,略長、略長…… 囧


Cookie 消失?試試看全新 AI 影像內容辨識:讓用戶看的內容決定看到的廣告

Google Chrome 即將淘汰幫助廣告主的工具—— Cookie ,它的離去將再一次地影響數位廣告產業。
評論
Photo Credit:<a href="https://www.shutterstock.com/zh/image-photo/ai-artificial-intelligence-big-data-internet-1075853384" target="_blank">shutterstock</a>
評論

透過GA分析進站者發現, Safari的新客數越來越多,難道這表示 iOS 的用戶數也跟著增加了嗎?注意了,這有可能是 Apple 封鎖第三方 Cookie 帶來的影響。隨著 Google 即將淘汰 Chrome 上的 Cookie ,這個幫助廣告主記住用戶受眾的小工具,將要再一次地影響數位廣告產業。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

後 Cookie 時代的廣告受眾如何鎖定?

各大廣告平台在過去幾年不斷地透過 Cookie 以及其它方式,悄悄收集使用者的用戶數據,隨著這幾年用戶的隱私權意識抬頭, Apple 與 Google 對於藉由 Cookie 辨識用戶資料的廣告投遞方式,持有不同的態度,這也將是所有廣告主的極大挑戰。當 Cookie 不復存在,要如何辨識使用者資料?

Cookie 消失了,或許會有新的數據辨識工具來取代,但是任何試圖跟蹤受眾的方式,都難以符合大眾對於保護隱私權的期望。另一方面,也極有可能無法再通過日趨嚴格的媒體監管限制。無論如何,數位廣告不能像過去一樣,無條件地使用類似 Cookie 的追蹤方式,來達到與現在同樣的廣告效果。

後 Cookie 時代內容辨識類型的廣告鎖定方式,將成為未來具指標性的投放策略。廣告與瀏覽平台或內文主題的高相關性,不僅能顯著提高受眾的互動度,更重要的是,完全不需要收集任何個人數據。

FreakOut Taiwan 不斷嘗試更友善的廣告投遞形式, 自 2016 年進入台灣市場的原生廣告,到 2020 年末引進「 Mirrors 」 AI 影像視覺內容辨識系統,都是以網路使用者的角度出發。「 Mirrors 」不需要使用傳統的受眾興趣設定,即可針對「目標受眾在觀看的影像內容」、「品牌自身競爭對手或相關指定系列產品出現的影片」來投遞 YouTube 上的影音廣告。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

AI 人工智慧影像技術突破,推動新一代內容辨識功能

傳統的內容比對廣告皆為自然語言處理 NLP 中心,基於「純文字」的比對來顯示相關廣告,如大家很熟悉的 Google AdSense 。但是,結合新興的 AI 演算和複雜的圖像辨識,已然能夠達到「影片」的內容偵測,透過增加多個比對層和基於自然語言處理 NLP 的基準定位,可深度學習並提供更精細的辨識洞察力。

舉例來說,若想要將汽車廣告投放給對汽車有興趣的人,我們要先從可能對汽車感興趣的受眾中開始推估,並且根據過去的經驗加入不同的興趣條件,最後針對素材更進一步地測試。透過 Mirrors ,我們可以讓廣告出現在有滿足特定條件的影片內,例如:在消費者觀看的影片中,出現汽車評測報告、自家品牌或競爭對手的 LOGO 、代言人等指定條件,再依照不同廣告主設定的預算判斷是否露出廣告。

藉由這樣的影像比對方式,可以更有效地根據消費者行為觸發廣告投遞條件,而不再是現行的用戶受眾數據。人的興趣是多樣且多變的,當對汽車有興趣的用戶在完成汽車的選購後,短期內將不會再瀏覽相關資訊,轉而瀏覽其他更具時效性的內容。透過消費者當下正在觀看的影片內容,取代消費者身上被貼上的數位標籤,將更貼近消費者本身的使用行為。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

Mirrors AI 影像辨識:用消費者看的內容決定廣告

2021 年台灣數位報告指出,台灣人在各網路內容服務中,最愛「網路影片」的比例高達 97.9%,遠超過 Vlog、串流音樂、網路廣播、Podcast 。

影音廣告早已是品牌經營的趨勢:根據 DMA 2019 年台灣數位廣告量統計報告指出,台灣各類型廣告中,影音廣告以 37.2% 的成長比例大幅領先奪冠。其中 YouTube 持續蟬聯台灣最常被造訪網站第 2 名(僅次於 Google ) ,在台灣各大影音平台中的觸及率及影響力不容小覷。

2021 年 FreakOut Taiwan 已與客戶合作,進行搭載新系統的 YouTube 串流內廣告投遞,在針對品牌及產品客製化的多層鎖定策略建議下,房地產廣告的 CTR 表現高於平均,並發現「人臉」群組辨識表現為佳,其中多為財經、名嘴等名人。而美妝品牌廣告 VTR 表現優異,則以品牌「 Logo 」、「人臉」群組有最出色的表現。

本文章內容由「驚點股份有限公司( FreakOut Taiwan )」提供,經關鍵評論網媒體集團廣編企劃編審。