淺析 “掃一掃” 的互動小知識
掃一掃:有效連線線上世界和真實世界的方式,溝通線上和線下世界,把跨界體驗變簡單。
前言:掃一掃前生今世
日常生活中,掃一掃作為連線線上線下的橋樑變得越來越複雜和多功能。從微信推行二維碼,到如今掃描二維碼,條形碼,以及身份證,快遞,AR掃描,以圖搜圖,識別印刷文字,圖片資訊,網站連結等各種各樣均可從線下掃到線上。
有效連線線上世界和真實世界的方式,溝通線上和線下世界,把跨界體驗變簡單。
掃描二維碼可以快速把使用者指向目的頁面,不需要輸入任何東西,尤其移動裝置輸入難度較大,而且達到資訊源確保準確無誤,類似web時代的網址。但它又比網址更多功能,可以增加物品本身資訊量,人們通過掃碼和物品產生互動,使用幫助,記憶資訊,包括視訊音訊多媒體各式各樣的資訊。
除去未來的人臉識別,指紋識別,語音識別,是目前線下與線上連線最穩定快捷主要通路
掃一掃得以流行傳承的三個原因:
1.有效性,存在使用價值
2.易用性,無需學習成本,或低成本學習掌握後即操作
3.可發現性,易於傳播,大範圍的被使用宣傳,個人商家商戶互相傳播使用
今天搜尋幾大常用不同應用來分析探討當下掃一掃介面主要有哪些功能,提供哪些服務,何種設計更方便快捷,以及成功掃描,失敗掃描情景提示。幫助之後設計中若涉及掃一掃功能,更全面瞭解。
一.掃一掃介面內容有哪些?
1.掃描的頭部標題
標題有采取“掃一掃” 或無標題,以及根據掃描場景寫標題
2.掃描介面的功能入口
相簿,手電筒,歷史記錄,關閉(或返回首頁),切換AR掃描,圖片搜貨,付款碼,我的二維碼,使用幫助
3.可掃描的內容
二維碼,條形碼,圖片,以圖識文,以圖搜圖
4.二維碼掃描框的大小以及位置
位置普遍居中偏上,大小根據掃描內容不同而變化
5.錯誤異常狀態提示,以及提示文字
在頂部底部中間彈窗,提示異常的掃描結果,提示文字會根據掃描的時長變化,幫助使用者操作,減少等待焦慮
二.“掃一掃”前中後狀態互動提示
以支付寶中掃一掃為案例:
整個掃描過程,根據情景和使用者心裡活動,針對性提醒,常規正常狀態安靜的隱蔽,操作受阻出現情緒化時即使撫慰;需要幫助主動尋找方案,支付寶整體互動細節深鑽使用者深層需求,預見洞察需求不做馬後炮,多嘴舌。
知識點:參照案例,如何在自己專案中深度挖掘情景化設計?
思考:針對上述案例,在感慨他人思考深入完善同時,我們該如何把知識點運用到自己專案中,通過哪些方法策略能夠接觸挖掘到使用者的設計點呢?
首先了解什麼是情景化設計?在場景中的使用者,與情境互動,孕育、改變著需求。使用者場景是某時間(when)某地點(where)特定型別使用者會(who)會通過某種手段(method)來滿足(do)這種慾望。
例如:使用者根據趣味功能選擇社群-場景,社群的氛圍、構造、規則定義了使用者;百事可樂典型場景是年輕人聚會,可口可樂在中國典型場景是過年回家。
再次如何根據場景做設計,通過翻看查閱互動書籍和分享的文章
總結出主要分為三步:
第一步:列出設計場景,通過流程圖,故事板,頭腦風暴整理出關鍵場景。例如編寫場景故事,包含誰在哪些時候做哪些事情,當前環境是怎樣,有何外界因素影響 ,使用者的情緒是怎樣
第二步:深度分析列舉場景,發掘機會點;通過故事板,流程圖列出關鍵場景,通過分析當前場景使用者的操作,和預見下一步的操作尋找發掘機會點,有針對性性滿足不同使用者需求。
第三步:設計宗旨在於解決問題,通過設計策略方法想出最優方案,將機會點轉化成設計點。
在這分享下來自阿里設計師的策略方法高效,5種思考方向:
● 行動點前置插入: 預期到使用者下步操作,縮短關鍵流程。微信發圖,手機截圖時彈出分享編輯等
● 行動點替換: 一般是指當前場景下某個行動點的功能不再適合當前場景,因而將其替換為另外的需求較強的行動點,位置不發生變化,而功能變化,為使用者提供當前場景需要的或與下一步意圖相關的行動點能夠幫助使用者提高操作效率。例如底部Tab欄常規時顯示首頁,上下滑動時則變成返回頂部。
● 行動相關推送: 指根據使用者當前或下一步的行為提供相關推送或提示,以輔助使用者進行決策行動,提高使用者操作效率。縮短關鍵步驟。
● 突出行動點 :預期到使用者下一步的行為後通過顏色或提示等方式對行動點進行突出,吸引並提醒使用者點選,減少思考成本,提高操作效率;掃一掃光線較暗時,自動開啟手電筒。
● 自動執行: 適用於一些需求較為明確的行動點,做使用者之所想,提高操作流暢性及效率
另外情感化,和貼心同樣是情感化設計的目的,和思考切入點,產品設計本質是讓使用者更容易,更愉悅地使用產品。
三.異常狀態提示的不同樣式
異常狀態的文字提醒,展示位置,上中下,跳轉介面均有不同案例。
注:支付寶掃描微信二維碼時會明顯阻止無法掃描,其他應用掃描微信二維碼時會提醒是否跳入對應連結。
知識點:關於容錯機制
介面設計中會出現各種極端狀態,錯誤提醒,如何合理設計容錯機制,適當情景給予合適的提醒,又允許使用者微微犯錯,有返回餘地呢?
容錯性:是產品對錯誤操作的承載效能,即一個產品操作時出現錯誤的概率和錯誤出現後得到解決的概率和效率。容錯性最初應用於計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。 產品容錯性設計能使產品與人的交流或人與人藉助產品的交流更加流暢。
容錯性設計原則:
1.合適的引導和貼心提示
無論針對新手使用者或老使用者,以及新功能上線,重要操作是,能給出詳盡文字說明和指導方向,以及智慧預測使用者出錯原因。並且引導內容簡單容易理解,引起使用者注意時快速獲得資訊幫助,降低錯誤發生概率。
在結果不可逆操作是,例如退出編輯,取消支付等,詢問使用者讓其指導操作的後果
2.限制操作
增加不可逆操作的難度,適當限制使用者的某些互動操作,例如不可點選時 變灰色,表單未填寫內容時,按鈕呈灰色不可點選狀態
3.使用者錯誤發生時,及時提供糾錯幫助
4.錯誤恢復
允許犯錯,並存在撤銷以前的命令,儘可能保留操作資訊,能幫助使用者傳送錯誤後迅速回到正確狀態
5.減少負擔,儘可能減少記憶負擔,減少認知混淆,讓使用者啊單次只執行唯一操作,減少不必要操作步驟
四.掃一掃中的幫助頁面
解釋說明主要能夠掃描的內容,引導使用者操作,同時宣傳相關掃描活動,根據實際使用場景,合情合理的插入運營活動資訊
圖三圖五幫助頁面:進入後直接提供拍照傳圖的入口以及輸入入口,把幫助說明和實際功能操作結合在一起,不僅是圖片演示,無需再次返回掃描介面
知識點:如何讓幫助頁面深入人心,起到真正幫助作用呢?
1.使用者錯誤或不懂如何操作時,及時提供糾錯幫助,減少挫敗感,例如當下空白頁面,錯誤頁面的情感化設計,友好提醒不能責備或威脅使用者
2.出現錯誤的提示詞用簡潔易懂清晰的詞彙表達,不要使用術語
3.出錯後提出的建議,應該有建設性幫助,智慧糾錯減少二次輸入,以及提供快速入口,避免返回重新操作
五.掃圖識字
常見於以掃描為主的應用,類似掃描全能王,翻譯,通過以圖識別文字,並直接翻譯
文字識別出後可允許複製,編輯,翻譯儲存照片
設計點:實時反饋掃描結果,讓結果和原圖處於同一視覺介面內,便於對照檢測內容正確性
六.掃描證件、卡片、檔案等
同掃圖識別文字相似,主要是固定類似的文字,識別賬號卡號,在介面展示上要求資訊操作一體化,直觀看到掃描的結果,允許編輯修改內容,掃描作為輔助輸入工具
七.掃一掃 和 手動輸入 如何高效切換
掃一掃獲取資訊,連結線上線下方便快捷,但容易受外界因素影響,例如掃描卡號,掃碼開鎖等,同樣可手動輸入;
如何快捷切換輸入與掃一掃呢
1.掃描框底部明確提示可以掃描內容
2.輸入入口命名清晰直觀
3.自動根據輸入內容調出相關鍵盤型別,減少點選
4.輸入和掃描處在同一介面,沉浸同一場景,減少頁面跳轉,快速互相切換
八.掃一掃 的那些廣告
掃一掃逐漸被普及,使用者習慣凡事掃一掃,介面曝光機會增加,內容簡潔,在不引起使用者注意下,順帶增加廣告資訊
不浪費每一處的廣告位,多使用電商行業
在設計中我們也要思考如何合情合理的插播廣告,看到廣告讓使用者感受到的不是反感,而是貼心的正合我意。
尾言:糕小糕的思考
掃描雖然頻繁被使用,但目前使用者習慣使用微信掃一掃,或手機自帶掃一掃,對軟體應用自身攜帶掃一掃缺乏使用場景和常識
但市面上應用基本把掃一掃當做標配,放在首頁最頂部,使用者多不知此處掃一掃和“微信” “手機自帶”有何區別。 設計產品時也應避免為了做功能而做功能,如何讓掃一掃發揮最大價值,而非擺設。
首先從應用本身屬性分析,軟體需要哪些來自線下的資訊,和外界產品有何不同?如何更好地使用掃一掃提升互動體驗呢?
例如掃描前提示語,掃描後資訊展示,可以被修改
不如在 輸入卡號時,加入掃一掃;輸入地址時;複製文字
作為UI設計師,除了提供專業技能的輸出,同時多思考如何讓現有技術價值最大化,向產品設計師精進。
參考文獻:
1.阿里設計師:如何根據使用者場景設計產品? ofollow,noindex" target="_blank">http://uxren.cn/?p=45575
2.產品容錯性設計原則 https://www.ui.cn/detail/96826.html
作者:糕小糕,正所謂:書宜雜讀,業宜精鑽
希望我的分享對你有所幫助