結合理論落地項目功能,從邏輯層面思考問題。
節前有一位讀者問了一個關于單選與復選框樣式選擇的問題,大概是:
看到很多單選與多選的設計形式,多種多樣,以前看到「圓點+圓圈」就知道是單選,但是為什么現在單選與多選的設計樣式五花八門,都沒有遵守前面這種規范呢?這些組件的樣式到底該如何確定呢?為什么會有一種模糊不清,不知道如何使用的情況?
我發現許多人都有一個習慣,就是喜歡把某個具象的內容抽象化,把某個具體的問題概念化。
比如認為單選就應該是「圓圈+圓點」的形式,但似乎從來也沒有任何明文規定單選就必須是這樣的形式,只不過大家看得多了,就習慣認為是這樣,覺得就是這樣規定的,但其實并沒有過這樣的規則。
要知道,樣式常常根據功能在變化。比如功能優化了,樣式也需要進行修飾,并不是說這里有一個單選操作,就必須是「圓圈+圓點」的形式給用戶選擇。無論是在電腦還是手機上,都是一樣的道理。
這樣去處理問題,常常會把實際的業務問題給處理沒了,最后變成控件選擇的問題,而不是功能本身的問題。
比如普通的彈框,也是一種單選狀態,為什么不也改成下圖右邊這樣的呢?不就是操作路徑長,點擊起來麻煩,多此一舉,而且也不好看么?
即便真的在某個場景下,非得使用上圖右邊的單選形式,那么把樣式改成下圖這樣,又有何不可呢?
只不過常規的「圓圈+圓點」被使用得多了,大家形成了共識而已,但并不代表它就是一種標準。
如果有一個規則規定說,單選必須是「圓點+圓圈」,那么各位目前所設計的絕大部分組件都將不能使用,包括各類菜單或開關。比如下圖這樣的 action sheet 就不應該存在,而它的出現也是因為功能屬性、設備遷移、操作形式等內容的演化所呈現的結果。
這就是大家在處理設計問題時,習慣做一種概括,希望能復用于絕大多數場景而導致的錯誤情況,沒有落實具體問題具體分析的原則。
包括這位讀者的問題,也是希望能夠明確單選與復選樣式的選擇問題,以便往后能夠更有條理的使用。但可惜并不是這樣,從上述我舉的控件例子可以看出,單選形式早就已經變了模樣,而多數人并沒有注意到,還在認為單選與多選就應該是圓圈與方框的形式。
設計工具/方法論,確實是有部分指導作用,但不能作為絕對性或權威性的內容來吸收,應該辯證地去看。
而之所以在移動端延伸出許多自定義組件(形式并沒有遵循所謂的市場常見規范),正是因為業務與功能的多樣性導致的結果。
樣式的選擇不單單是看到的那部分,它還可以任意變化地處理,無論是單選或者是多選,不該被樣式套牢了。而它的決定因素應該是內容。
比如,iOS 鬧鐘的鈴聲選擇,有許多可選項。
但是因為內容的明確性,大家都知道,鬧鈴只能選擇一種,不會同時有 2 個鈴聲響起來(當然也可以這么做),所以即便鬧鈴的單選形式再如何變化,大家也都知道它是單選的,這就是功能決定了操作形式的例子。
類似于,再如何變化選擇樣式,無論是圓圈、方框,或只有勾,甚至是其他情況,大家也都知道它就是單選。
而之所以用勾或圓點表示被選中狀態,只不過是人的一種正常認知意識,即使改成三角形,只要能說清楚是被選中狀態,那也不是不行,只不過三角形沒有勾來得清晰罷了,而并不是因為有什么特殊含義。
所以只要梳理出符合自己產品的「單多選」樣式,形成規范即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標準,又何來的清晰呢?
寫到這,想到之前有讀者問:什么時候該遵循設計規范,什么時候不該?
要知道,設計規范本身就是基于某個具體產品內容所構建的一個整合標準,為了規范化存在共性的功能形式。而對于共性的判斷也應該是從功能來定義的,比如返回都在左上角類似的,但是一定么?
單拎出來說什么時候該遵循,什么時候不該遵循,是很概念化的一個問題,不可能存在一個具體話術標準,說什么時候應該,什么時候不應該的。
如果我回答,符合規范中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的廢話了。但除此之外,我也就不知道如何解答了,除非你把規范和具體問題發給我,我可以跟你一起討論討論。
寫這篇文章的時候,看到一位朋友發的信息:
為什么手機刷新都喜歡下拉?因為神經科學研究表明,這個動作,更容易讓人產生對不確定性和驚喜的期待,原理和賭場的老虎機類似。
很多人都會習慣性給一些操作或交互形式做類似這樣的定義。
但這么定義是不對的,因為這相當于前面說的,把業務給解釋沒了,成了形式上的討論。而為什么會使用下拉、以及下拉會有什么情況,包括它所解決的問題,都沒有任何的分析。
比如,下拉之所以讓人上癮,并不是因為「刷新」本身。下拉只是一種交互行為,它的出現也只是為了解決早期刷新按鈕占據屏幕空間的問題,希望通過下拉進行刷新,以隱藏掉屏幕上的刷新按鈕,給屏幕留出更多可用空間。
而采用下拉是因為它更符合人的直覺 —— 往下拉能看到更多新的內容。
但是人之所以會對下拉上癮,并不是因為下拉這個行為,而是因為下拉能看到更多信息。下拉本身只是解決了屏幕空間的問題,而人其實是對內容上癮。
比如我在騰訊新聞里看 NBA 的資訊,通常只會直接上滑,看下面的內容,看完了就關了,不會進行下拉刷新。
因為在騰訊新聞里,下拉刷新的新聞并不是的內容,更多是今天或今天之前的信息,不刷新反而是剛剛更新的資訊,那么下拉刷新雖然也是刷新,但是刷新出來的內容是舊的,也并不吸引我,反而成了我要避免的操作,因為只要一下拉,的資訊就會被舊的資訊擠掉,要刷掉進程重新打開 App 才會重新再顯示的。
所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」,而是要關注內容,如果刷新的信息都是舊的,或者是用戶沒興趣的,那即便刷新了,也不會引起用戶的注意,也更不可能讓用戶上癮了。
讀者:
呆呆,這個圖的卡片列表里,標題用省略號合適嗎?
(因為原圖涉及讀者項目隱私,所以重畫了個草圖。)
又是一個沒有業務背景的問題。不過這個問題比較簡單,可以展開來說一下。
通常,我們會在各類產品里面見到諸如「標題超出部分用省略號顯示」這樣的設計,譬如上面這圖。
于是,許多人在自家產品的設計過程中,遇到此類情況,被開發問到時,也會搪塞一句:文案要是超出就「…」顯示吧。
大多數遇到這種情況的,都是因為之前沒考慮好,才臨時想了這個解決辦法。
而很多時候,一些產品之所以用「…」顯示,并不是因為單純地文案溢出,可能是專門設計過的。
所以,如果簡單地認為「…」就是解決溢出而使用的方法,那就有問題了。
下面舉幾個例子。
有些產品,我們幾乎看不到列表視圖里的標題是有省略號的。
因為這類產品的目的就是讓用戶讀到完整的標題信息,對眼前的內容好做判斷,從而考慮是否點進去看詳情。
所以在設定的時候,界面中標題字數的規定,與界面樣式就已經提前規劃好了,可能在后臺設置就限定死字數,要求運營人員上新時要統一界面的展示形式。
這種情況下,一般就不會再有省略號的問題,譬如一些知識付費類產品。
比較典型的還有 TED 演講視頻的標題,在《設計體系》這本書里專門提到了這個案例。
對于 TED 來說,演講標題的信息優先級是最高的,所以他們寧可保留所有標題文案,也不對文案做截斷用「…」顯示。
因為對標題做截斷是很容易的,而難的是把一個演講主題提煉成一句簡短句子,所以他們為了展示更清晰的標題,寧可在界面上保留長標題,甚至為長標題的顯示而專門設計相符合的展示形式。
反過來,他們也因為這一點而確定了界面上標題字數的上限,確保文案不會超過界面顯示的最大臨界值。
包括一些資訊類產品,在標題上也會做限制,以滿足最大化呈現且不使用省略號。意思是:假設界面上文案范圍定了 30 個字符,那么配置的時候就必須 30 個字符以內把內容表達清楚,且必須完全顯示在界面上。
所以經??吹揭恍?UGC 產品之所以會限制標題字數,原因除了常見的標題不能過長之外,還有一點是為了在列表頁就能顯示完整。
各位在設計這類產品功能時,也要注意到這一點,而不是隨意說一個「字符不能超過 50 吧」。
而有些產品的內容列表,之所以頻繁使用省略號,它的目的是為了引導用戶點擊用的。
這類形式一般出現在營銷號發的文章里,多是營銷人員自己為了文章點擊率而做的。很少會有一款產品的所有內容都是這樣的,除非是一些內容產品,運營方是企業自己,為了讓產品上的內容有更多人點擊而這樣去設計,當中可能涵蓋了廣告,以此賺取廣告費。
不過這類內容的設計已經讓用戶開始反感,所以如果不是特殊情況,最好少這樣去做。
當然,還有同類型的,一般出現在頁面面積小且需要展示更多信息的集合類視圖,比如:
這種形式的設計,就是因為頁面上想展示的信息太多,以至于通過這類合集來展示某個模塊里的內容,營造出一種很豐富的感覺。
也就是利用「…」引導用戶點擊,表示信息沒有展示全,如果要看,就點開詳情,進二級頁面。
還有一些產品的省略號,純粹就是大家理解的,溢出就省略號顯示。
比如同樣是資訊或內容類,以文字為主的產品,雖然標題超出范圍用了省略號,但用戶基本也已經知道是什么內容(上面那個集合類視圖也是一種),且還有摘要引讀。
比如下圖:
這種標題字符限制在了兩行以內,多余字符用「…」展示,基本上已經是一句完整的話,能讓人大致了解這條信息的意思。并且還有部分摘要,已經足夠用戶判斷是否對它有興趣,如果沒興趣,直接刷走也無所謂。
包括一些電商類產品,用戶多以商品圖片為主要決策因素,商品標題作為輔助信息,優先級不高,所以標題溢出是否省略號顯示也無所謂。
這其中有一個特殊情況,就是有些產品的標題即不展示全,同時又沒有省略號,比如淘寶的商品搜索結果頁面。
因為這類列表實質是一個產品賣點集合的濃縮詞,不是完整的一句話,多余字符展示或者不展示,都不會有太大影響,所以也不重要。
當中我比較反感的還要數農藥了。
好友邀請的列表視圖里,常常看不全昵稱,因為好友會有游戲昵稱,微信備注會展示在游戲昵稱后面,以至于要點到游戲關系里先看全昵稱,再到匹配界面邀請好友。
既然已經區分了微信好友與游戲好友,為什么昵稱上面不也加以區分呢?
當然,經常玩的好友可能沒這個必要,畢竟頭像或昵稱都可以很快識別出來,但是偶爾一起玩的好友通過這樣的識別方式就比較難了。
這里就是簡單提一句。
通過上面提到的一些例子,以及不同場景下標題省略號的處理方式,相信大家對這塊的理解會比之前更深。
同樣,對于開篇讀者提到的問題,更符合的情況可能類似于知乎這種,有完整句子,所以標題是否省略號處理也就沒太大影響。
但具體的還是要結合業務詳情仔細考量。
而標題內容的展示是否要用省略號處理,優先要看這條信息的業務權重,以及是否會影響用戶決策。
所以各位在設計這類內容標題是否要用「…」顯示時,也要注意判斷自己的產品特性符合哪種類型,而不是隨意一句話,說「超出就省略號顯示好了」。
最近收到兩個問題,正好都與輸入框有關:一個是怎么判斷輸入框要不要放置清空按鈕;另一個是輸入框超過限制后,是禁止用戶繼續輸入,還是允許超出但會警告提示。
在一定程度上,這兩個問題的分析邏輯是類似的,所以放到一起聊正合適。
先看第一個問題:怎么判斷輸入框里要不要放置清空按鈕?
原問題是這樣的:
呆呆,我最近在優化公司的產品,遇到一個問題,就是 PM 想在聊天輸入框里加一個「清除按鈕」,可我覺得不太合適,但是說不出原因,只能說沒見過在聊天框里加清空按鈕的。這個問題要怎么判斷呢?
我們一般會在搜索、手機號輸入框里看到類似的清空按鈕,比如輸錯了就點一下,清空后再重新輸入。但是很少會在聊天框里看到清空按鈕,為什么呢?
主要是「時效性」…算了,這種概念詞用多了,發現現在人都不會講話了。說白話就是「要快」。
無論在登錄注冊還是搜索的場景下,除了內容本身之外,最注重的就是效率。
譬如有個數據大概是說,用戶登錄注冊花的時間超過某個范圍,轉化率就會對應逐步降低。而率,就是讓用戶能快速登錄注冊賬號,使用產品功能。所以設計師們會在登錄注冊的操作流程里抓住可提率的每個細節,輸入框使用效率就是其中之一。
搜索也是一樣,當用戶有明確目的使用搜索框時,關鍵詞就是用戶當下最關注的信息,如果輸錯,再一個個刪除,顯得麻煩,所以清空按鈕能在這里提高用戶的操作效率,甚至 iOS 的搜索組件也會自帶一個清空按鈕。如果是電商產品,率是能間接提高成交率的。
這里的輸錯,也有兩層意思,一個是用戶在輸入過程中發現錯字,比如登錄注冊時,發現手機號輸錯了,一個個刪除反而沒清空重新輸入來得快,因為刪了之后,號碼要重新背一遍,具體到某個數字,然后接著輸,特麻煩。
或者搜索內容時,發現有錯別字,刪除某個字再重新輸入,反而沒有清空重新輸入來得快,畢竟輸入法有串聯關鍵詞組的功能。
另一個是反饋的結果不符合用戶的心理預期。比如輸入手機號已被注冊,或者搜索結果不滿意要重新輸入關鍵詞,使用一鍵清空都是比較的。
而且輸入之后,系統需要給用戶呈現結果,如果結果不滿足用戶預期,還會存在短時間內多次輸入與清空的情況。那么,無論是錯字還是對結果不滿意,清空按鈕都可以非常便捷地幫助用戶一鍵清除上次輸入的字段,讓用戶更快速地重新輸入新字段,從而提高用戶的操作效率。
于是,我們會把這類場景下的「清空」說成是「一鍵清空」,主要是因為方便。而它的作用就是,在出錯的場景下,更快捷地給用戶重置的操作。
反過來,各位可能要說:那聊天框不滿足這個條件么?
我們接著看聊天輸入框。
我們知道,聊天輸入框的內容不是固定的,它是根據對話內容而變化的,用戶甚至需要花時間持續輸入并糾正自己的用詞,以及話術的準確度。過程中,如果輸入的內容多,而且又是即興的,耗費的時間與精力也是很大的,清空后也難以再恢復。
它不像登錄或搜索,固定的輸個數字串或關鍵詞,它是一段完整內容。雖然也會有某一句話或者某個詞輸錯的情況,但是一鍵清空的操作成本太低,對應著聊天框的高輸入成本,一鍵清空的存在與之并不相符。
于是,這里就引出了一個概念,叫做「輸入成本」與「修改成本」。
清空按鈕對應的,就是低修改成本,因為簡單點擊一下,就清空了。它所適用的場景就是低輸入成本的情況,也就是前面提到的登錄注冊或搜索 —— 輸入的內容相對固定,且可能反復。
對于登錄、搜索等指向性比較明確的輸入框來說,用戶在乎的是輸入和反饋的效率高不高。一鍵清空操作能帶來效率上的提升,而且操作后帶來的損失成本是很低的。因此,一鍵清空操作在這個場景下,對用戶來說是安全且的。
但是在聊天場景下,一鍵清空作為低修改成本的作用是不適合的,因為這時候輸入成本比較高。
用戶在聊天輸入框內表達清楚自己的想法是為了讓對方理解,達到交流的目的,這樣的內容是不確定的。而且在聊天輸入出錯情況下,我們有多種操作方式讓用戶重輸,比如鍵盤快滑定位,觸摸定位錯字等,都比一鍵清空重新輸入的成本低很多,而它所謂的「便捷性」在這里意義也就不大了。
于是乎,在衡量輸入框是否需要清空按鈕時,我們首先要知道,清空按鈕是低修改成本,那么如果輸入框的輸入成本比較低時,我們就會使用清空按鈕,來提高操作效率。而當輸入成本比較高時,一鍵清空的操作就顯得配不上這個輸入框了。所以,它在聊天框里就沒有存在的必要了。
包括其他非固定內容的輸入框,也是一樣的道理。
接著,延伸出第二個同學的問題:輸入框超過限制是禁止用戶繼續輸入,還是允許超出但會警告提示?
相信各位讀完上面的,再看這個問題,應該也能分析出原因了吧?邏輯跟上面的也差不多。
也看輸入成本,比如是固定內容的手機號,我們正常會禁止多余輸入,因為這樣用戶更容易判斷手機號是否正確。
如果是短長文,說明用戶可能是手打字超出限制,這時候如果禁止輸入,用戶不好在輸入框里做內容刪減或修改,也會打斷用戶的輸入流,畢竟還沒寫完就限制了,那得先刪掉前面的,再來思考后面怎么寫,會亂。而且如果是復制的,禁止輸入的話,超出部分就被截斷了,也要先刪減,再繼續復制剩余部分,非常麻煩。除非先在別處刪減到限制字數內,再復制過來,但這樣又增加了用戶的操作成本。
如果允許輸入但警告提醒,那么用戶就可以根據自己已經輸入完的內容做刪減修改。
所以對于這個問題,我們從這個視角出發,也能了解一二,就是通過適用場景與輸入成本來分析。
當然,以上所有內容更偏向于通用性說明,針對具體業務還需要具體分析。
1、從單復選組件反思功能設計問題
2、標題文案溢出使用「…」合理嗎?
3、怎么判斷輸入框里放不放清空按鈕?
文章來源:站酷 作者:呆總、
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
復雜應用大多情況下是偏專業和B端的一些UI界面,它們大多出現在桌面端使用環境,并且終端用戶類型多樣,涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章,來自UX設計領域的存在NNGroup,作者為凱特·卡普蘭。
我們之前將「復雜應用」界定為特定專業領域當中,需要經過廣泛培訓之后使用的,有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象,不過這么說你可能會 更容易理解:從科學研究到專業人員,諸如金融分析師,它們常用的那些專業軟件應用。這類應用通常有著這些特點:
盡管不同的復雜應用之間差異很大,但是他們的共同點是,專業的從業人員對于這類工具有著極強的依賴性。
考慮到設計師和開發者在面對這類工具的時候的挑戰,我梳理總結了 8 個復雜應用的設計原則和指南。
很多研究表明,對于復雜的應用和工具,用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。
與大量的教程、文檔、幫助和設置說明相比,能夠立刻開始的任務和項目,對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。
雖然在專業領域當中,倚靠摸索和試錯學習是不恰當也不安全的,但是一定程度的邊做邊學是必須的,因為不可能在培訓和手冊當中涵蓋所有的使用場景。
所以,在設計的時候應該提供「跳過教程」的直接上手的偏好設置,同時進行相應的安全性設置,避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作,讓控制面板實時顯示操作結果或者預覽結果,這樣用戶無需執行全部操作就可以知道大概的結果。
在 Salesforce 控制面板當中,就可以實時預覽面板編輯的效果。
絕大多數用戶都不是進階的專家級用戶,他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后,通常不會主動做出改變,而這在日積月累之后導致大量的時間浪費,效率低下。
值得一提的是,這個時候依賴冗長的文檔和教程其實很難達成效果,更合理的方式是結合用戶所處的上下文環境,通過界面工具提示的方式,適時地告知用戶「有更方便的方法」。
通常,可以使用懸停提示,或者是彈出式工具提示來實現這一功能。
ArcMap 是一款地理信息系統類工具,它通常會通過上下文環境下的信息引導,來幫助用戶了解技巧。
復雜的應用程序,通常會有很多功能是分散的而非線性的,不同的功能組合起來可以實現特定的功能。在這類工具當中,用戶日??赡芤膊皇呛艽_切知道最終的目標是什么,而需要通過數據分析來逐步推進,同時,在知道確切目標的情況下,也應該可以遵循不同的路徑靈活地達成目標。
設計師這些應用的時候,設計師應該避免使用固定、唯一、 僵化的實現路徑,迫使用戶必循嚴格按照某一固定路徑來做事情。一方面,允許用戶跳過某個步驟,或者回滾到更早的路徑,另一方面,允許用戶遵循不同的方式和路徑來達成目標。
比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。
復雜的任務,通常意味著它需要很多步驟,不同的環節,而在實際的應用場景中,某個分析步驟耗費幾個小時甚至幾天,都是有可能的。在高度復雜的現實生活中,某個步驟可能會換人接手,可能會因為硬件、 網絡等問題而暫停甚至丟失,這也意味著「可追溯性」是很重要的。
所以,在這樣的復雜應用當中,應該允許用戶在使用過程中,可以便捷清晰地記錄、保存、 導出內容和記錄,允許用戶中斷,中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。
在決策建模軟件TreeAge 當中,用戶可以在分析和建模過程中進行開放式的注釋,可以后續在底部快速訪問這些筆記。
復雜的應用通常還會面臨一個狀況,就是工具本身的不足,用戶需要在多個工作空間上使用工具和內容的時候,它需要具備切換的功能。對于不具備的功能,應用程序應該允許使用第三方的應用來作為補充。
比如當軟件不支持某個操作的時候,應該允許用戶從線上的其他數據庫中獲取并導出數據來使用,可以依托外部文檔作為支持,允許用戶在應用中做注釋和評論。
減輕工作負擔的一個要點,是盡量使用通用的API、接口和標準,盡量兼容行業標準軟件,比如 Excel、Powerpoint ,盡量使用標準格式,等等。
微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能,非常方便
復雜應用通常旨在保持泛用性。使用場景多樣,多種不同的功能,一家汽車生產廠家,可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是,這種泛用性的另外一面,就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶,而后者用到的功能很小概率會被基礎用戶用到。
所以,設計者需要在不降低功能性的情況下,基于應用場景、 用戶需求來進行簡化和優化,在保持功能完整易用的前提之下,降低復雜度和混亂度。
分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后,再呈現特定功能,是有效的設計方法。
即使降低了混亂度,在復雜應用當中,信息量可能依然是過載的。通常,對于這種情況可以通過區分信息層級的主次來進行快速的區分,不過,從交互上來說,這可能依然不夠。
對于諸如控制面板一樣的界面,用戶可能需要時刻查看面板上的信息,需要了解次級信息但是又不能離開界面,這就體現出主次信息之間的過渡呈現的重要性了。
一般而言,使用類似與懸停顯示的方式,能夠比較柔和地將次級信息呈現出來,允許用戶查看詳細的定量數據。下面這個案例當中就是,懸停顯示更多次級信息。
復雜應用通常在界面上包含由大量的信息,而這個時候關鍵性的數據如果不在視覺上做突出顯示,會被用戶錯過。通過視覺區分、提示警報的方式,讓用戶及時注意到,才有可能規避可能存在的問題。
值得注意的是,讓關鍵信息和元素凸顯的方式,并不一定非得是使用鮮艷的色彩和較粗的字體,簡單的放大呈現,使用圖形化的元素輔助提示,或者是提供足夠的留白都可以達到目的,就像下面的案例一樣:
復雜的應用多種多樣,支持的服務和功能也千差萬別,但是無論如何呈現,此類復雜應用的設計都是非常挑戰設計師的設計功底的,需要設計師了解業務,了解用戶,并且能夠通過設計更好地提供服務。
文章來源:優設 作者:Kate Kaplan
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
雖然「玻璃擬物化」并非是全新的事物,但是確實有越來越多的設計師正在嘗試這樣的設計風格,并且在這個多災多難的2020年底能看到這樣的新東西,總歸會讓我們對未來有那么一絲期待 。
隨著網購成為了人們購買東西的第一選擇,各大平臺的競爭也逐漸轉移到了提升用戶體驗感的身上。不管購買什么東西,最終都要經歷下單這一流程。一個合理的下單流程,往往可以讓消費者體驗流暢,從而提升對平臺的好感度,進而愿意長期的使用。
這是個非常值得研究的內容,最近我在優化商城下單流程的過程中,遇到了許多問題,通過不斷地探究,也對整個模塊有了更深刻的理解,希望通過總結能給大家帶來一些啟發。
下面將從目標的提出,結合案例的解說,并最終推到出結論的方式講解。
作為漏斗模型的最終收口的購買步驟,是購買轉化的關鍵。
但往往有些產品由于對流程沒有系統深刻的理解,會有很多迷惑的操作,使得下單的流程相當混亂。我也曾經經歷過類似的購物情景,經過一輪謎之操作后,我終于下完單了,但過后會擔心剛才買的東西有沒出錯。
關于流程的優化我們遵循的原則是:先讓流程合理了,再提高用戶每步操作的效率。
怎么理解合理,必須解決以下兩個問題,整個下單流程涉及到哪些步驟?步驟之間有什么邏輯關系?
我們需要洞悉到流程之間是如何串連,信息是如何層層遞進并最終達成目的。因為只有每環節解決了對應的問題,流轉到下一環節才能更省心。才能避免信息的反復確認,影響操作的效率甚至引發出錯。
可以拆分成三個維度考量,第一是頁面布局的重點突出的提效,第二是信息展示直觀的提效;第三是交互操作簡化的提效。清晰的頁面信息傳達能讓用戶清楚并了解自己的操作結果,并快速做出決策。
下單流程按需要提交的信息進行拆分,一般下單需要先確定商品(一切影響商品價格的因素的確定,如規格);其次是訂單信息的確認(不影響商品價格,是訂單層面信息的確認,如收貨人,備注等),而后是訂單支付,支付方式的確認。
最后是訂單進度的跟蹤。這里列出的每一步前提都是上一步內容的確定。只有這樣才能做到環環相扣,并且信息流轉。
你是否遇到過在逛商城時看到某個服務,想購買時,進入的詳情頁卻沒有價格,然后需要你點擊咨詢客服,打開了一個咨詢窗口
賣東西不標價,你賣個寂寞嗎?
作為用戶的我難免會有浪費老子時間的負面情緒出來,撇開一些特殊情況說,一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買,購買的決策需要價格的支撐。
這是一對不可分離的組合,沒有價格的商品陳列和沒有目標指向的價格都是沒有意義的。
那么總結一下:商品詳情必備的兩個信息:
滿足了必備元素展示后,我們還要考慮元素的放置位置,首先是突出重要的元素,其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率,我們來看看下面這個例子:
京東的商品詳情作為購物電商商品詳情的代表來說一下,可以看到視覺瀏覽路徑是非常流暢的,明確的實覺引導和操作指引,先看價格,再選規格,而后點擊購買。
權大師的商品詳情雖然頁面中這重要元素都非常醒目,但它卻沒有讓用戶的決策提效,我猜測費用總計為什么放在這個位置,是希望用戶直觀看到選擇不同的服務項目對應的收費的變化。
可是也忽略了金額作為重要的元素,當用戶進入詳情需要第一樣看到,導致瀏覽路徑有點繞圈圈。
攜程的詳情可以說是權大師的一個優化,同樣的考慮,頭部不僅展示了重要的價格和商品信息,給到用戶購買的預期。在規格選擇后,預定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。
在購物中,選擇商品或者服務的規格是一個常見的操作流程,選擇規格的目的有:
以上幾個選項,根據不同的業務會有不一樣的描述,不過可以概括兩個內容,一是影響能不能買,二是能買的話不同規格的選擇怎么影響商品價格。
圖像化選項,比如顏色外形等規格有圖像的描述就更加直觀。如果換成文字的話,用戶的生活經驗會影響對文字解讀的結果。
數值化選項,這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格,方便對比然后選擇。
通常門票或者酒店的規格選擇會用上面這種方式展示,同樣的道理,把不同項目的價格列出來,讓項目之間的對比更直觀。
下圖的例子中參考身高這一項規格說一下,身高的規格本來就是有規律的,比如從矮到高,或者從高到矮。
如果我選擇紅色規格衣服,身高規格最后兩項灰掉了,這時就算我不看具體身高規格是多少,也大概知道紅色衣服身高最高的規格沒貨了。
這時,我想找一個有170cm身高的衣服,我就會不斷切換顏色規格,用視線的余光去看什么時候170cm的規格亮起來。規格的展示通過位置和內容的支撐,能讓用戶更快速找到變化的差異。
不影響商品價格,是訂單層面信息的確認,如收貨人、備注等。
第一步說的是商品信息的確認,這一步是訂單信息的確認,這兩個維度怎么理解呢?
舉個例子:比如你到商場買東西,你首選是挑選好要買的商品放到購物籃里,再到結算臺支付。
這時候你是有個比較清晰購物列表在腦海中的,因為在挑選時候已經經過判斷,我拿了一個薄荷味的牙膏,還拿了一個潘婷的洗發水。現在只需要把這些給到收銀員,她再確認一次就可以了。
但試想如果在你的結算的時候,有個小孩把你購物籃的東西攪亂了,放了一些別的商品或者拿走了其中的一些商品,你在收銀臺這里就會變得十分混亂。我又得重新確認一下自己要買的東西是什么。
訂單的確認是建立在商品的確認上的,而且步驟之間本來就存在了遞進的關系。先確認能不能買,再考慮能買的話收貨人等訂單的信息。在這一步,確認的信息盡量不影響商品的單價。
淘寶這個例子的話,訂單確認的頁面需要確認收貨人信息、數量、配送方式、運費險等,這幾個元素都不影響商品單價的,都是訂單層面的信息確認。這就符合前面所說的,頁面信息層層遞進,減少相同信息反復確認的原則。
飛豬買門票這個流程中,從詳情頁到規格選擇到訂單確認,門票類型始終可以選擇,到最后填寫訂單了,還是可以選擇不同的票種。
這操作有點迷惑,前面都告訴我了當前選擇了成人票,到最后還告訴我,你還可以選擇要一張學生票噢。最后確認下單信息要把商品信息再確認一次,這就是影響下單效率的表現。
支付的確認也有兩個重要的元素,金額和支付方式的選擇。
但也有的商城也會做成下面右圖,在訂單確認頁面把支付方式也一并選擇了。
表面上簡化了步驟,但由于不同步驟確認的突出的信息是不一樣的,如果我選擇支付,那在支付前我必定會關注金額。所以右圖這樣就沒法讓突出重要信息,需要費勁地找一下金額是多少。
訂單的詳情頁里包含的信息有:商品的信息、訂單的信息、支付的信息、訂單進度的信息。這個環節,訂單的進度信息無疑是重點。
對信息展示優先級排序為:訂單進度信息 > 商品信息 > 支付信息 > 訂單信息,淘寶的訂單詳情按重要程度自上而下排列:
有的商城甚至會把一些權重低的信息收起來,如訂單信息、支付信息。想查看時候可以點擊查看更多信息,這樣做的好處是能讓界面整體更清爽,降低頁面的復雜程度,那么對重點信息的抓取就更快速了。
對訂單辦理的進度展示優化,我認為淘寶可以說是個經典的案例:
以上改動都是讓訂單進度掌控的體感更加豐滿的過程:
以上進度展示的關鍵點可以概括為:當前進度、整體流程、完成的預期。有了以上三點,用戶對于整個進度的才能有一個清晰的把握。
在訂單流程設計各環節中,如果我們明白每一步的操作的目的,提煉出關鍵點。那在優化中就能更加得心應手。如果發現本文有什么邏輯的錯誤,歡迎大家指正,一起進步。
下面附上本文的知識目錄:
文章來源:人人都是產品經理 作者:小圈學產品
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
5W1H 這種分析方法,是比較宏觀的分析工具。它的應用是針對整個項目的開展來進行,幫助我們圍繞產品需求有計劃有邏輯性的制定解決方案。
在這個框架下,就方便我們決定要引入哪些其它分析方法或者理論內容,例如 SWOT、KANO、AB TEST、RMF 等工具。
也因為我們對整體的認識更清晰,決定了我們應用理論和其它分析模型的精細度、細節方法。讓設計師在項目處理過程中可以更靈活,更專業,更游刃有余。
節能環保是符合可持續發展戰略的一個課題。在節能環保方面界面設計都有哪些風格呢?
下面給您展示兩種風格界面:清新明快和深色沉穩。
綠色和黃色為主的色調給人一種清新自然,富有生機與活力的印象。圖形以圓形為主,比較有親和力,同時圓形也是今年UI設計的流行趨勢。
紫色和粉紅色漸變為背景,明快有活力,容易吸引人眼球。綠色、黃色、藍色作為輔助色,增加頁面的靈動感。圖標簡潔清晰,辨識度高。
黑白色調是一種低調雅致的配色,配以簡潔的線條,更符合節能環保的主題。
這款APP界面采用深灰色底色,沉穩大氣,有現代科技感,界面采用卡片式布局。配以粉紅和橘黃作為點綴,讓界面不因深色而顯得呆板。
界面采用深藍和灰色為主的配色,大面積留白??ㄆ讲季郑湟郧€圖表,扁平風格圖標。簡潔清晰,表意明確。讓人對節能的理念一目了然。
(圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
大數據可視化界面設計賞析(一)
大數據可視化界面設計賞析(二)
大數據可視化界面設計賞析(五)
Design project的第三個特點是根據反饋快速迭代。我們的第一個想法是設計一個暑期實習計劃,鼓勵EPAPA學生到心儀的企業做一個簡單的實習(即使是打雜也無不可),由學校和企業合作提供培訓和導師,旨在幫助學生在進入大學之前就對感興趣的職業有第一手的認知,例如我們認為如果你親眼看過谷歌的工程師工作,就會對成為工程師需要什么知識更加有譜。我們拿著這個方案到學校和老師、學生交流,收集他們的反饋,發現其中一個較大的問題:學生自己分析和提取信息的能力較弱,很難從兩個月的實習期當中收獲很多有用的信息,我們設想中的“從實干中學習”很難實現。
那我們最終設計的方案是什么呢?在這里賣個關子,如果大家感興趣可以去看我們小組final presentation的內容:
這篇文章是對大部分產品都有的簽到功能的一些總結。
說到簽到,幾乎是互聯網產品的標配了,大家估計都很熟悉。但是簽到功能并不是所有的APP都合適的,出現這個總結的原因就是小伙伴在工作中遇到問題的一個吐槽。
場景:小伙伴公司在做一個記賬功能的APP,她發現原型中有個簽到功能
小伙伴:為什么要做簽到,對于我們的產品好像沒啥用?
產品經理:吸引用戶進入APP, 提升用戶活躍度呀。
小伙伴:你用啥吸引用戶,我們就一個記賬APP?
產品經理:用戶簽到,我們就給積分,積分高了等級就高了,他可以給別人看看他多牛逼!
小伙伴陷入了久久的沉默,然后就來和我吐槽了,什么“天才”會因為一個記賬APP的等級高覺得牛逼啊……
就像小伙伴公司做簽到功能的目的是為了提高用戶的活躍度,他的初衷我覺得是對的,但是沒有考慮到產品本身適不適合做簽到、以及給予用戶的獎勵是否能吸引用戶。
所有拋開產品本身談簽到的行為都是耍流氓,我是個正經人!會結合一些市面上的產品來總結一下簽到功能,其中包括為什么要做簽到?什么產品適合做簽到?簽到有哪些方式和類型?做簽到功能需要考慮哪些東西?若總結有不足之處大家友好交流呀。
什么是簽到?在生活中第一個想到的是上班打卡、小時候上學點名。這些簽到場景都有具體的時間限制、要按規定的方式進行登記并且伴隨著未完成簽到會有一定的“懲罰”。當簽到功能被用到APP中時,APP中的簽到通常是指產品通過一些獎勵強化用戶行為并促使用戶打開APP進行瀏覽、打卡。用戶為了得到獎勵再次簽到,達成閉環,產品用簽到來提升用戶活躍度和用戶粘性,繼而達到業務上的轉化。
APP簽到和現實簽到的差別:1、APP中的簽到擴寬時間維度(一天24小時都可以簽到、并且還可以補簽);2、強化“獎勵”只要你簽到,我就給你獎勵;3、弱化了“懲罰”,大部分APP對用戶的簽到都是給予獎勵,個別APP也有懲罰機制,如早起打卡活動,如果未達到目標,用戶參與活動的錢就會被其他完成目標的用戶瓜分。
了解了什么是簽到后,接下來就是看我們的產品適不適合做簽到,并不是所有App都適合做簽到的,適合做簽到的產品通常都具有以下特點
當用戶希望從你的產品獲得實質利益或某種精神滿足的時候,你的產品就適合做簽到。比如內容、社區、電商、金融、游戲類型產品。
當用戶認為你的產品是一個工具,那么就不適合做簽到功能。如日歷、天氣、瀏覽器、翻譯等(還有小伙伴公司正在做的記賬APP),因為用戶使用工具類產品是在有需求的時候打開并在短時間內完成操作,在沒有需求的時候不會使用。
一般簽到常用于高頻服務,低頻的工具型產品就不適合做簽到。(有人肯定會想,微信也是高頻次為什么沒有簽到,因為用戶每天都會進行社交,好的社交產品不需要簽到就有很高的活躍度。微信這樣的產品并不需要簽到功能,畢竟大家每天都會打開微信吧……增加簽到就雞肋了)
了解你的產品適不適合做“簽到”后,接下來看看APP中,為什么要做簽到,也就是簽到的作用。能想到的有提高用戶活躍度、培養用戶習慣、匯集流量轉化業務、拉新等等。接下來從用戶和產品兩個角度來看為什么要做簽到。設計師在做設計前一定要先了解好做簽到需求的目的!需要了解不同的目的相對應的設計的側重點也是不同的。
簽到有一定的作用但是小聲逼逼:簽到不能決定一個APP的死活,對產品有多大的作用,本質上還是要看產品的核心功能,要想靠簽到救活一個APP,基本不可能(除非你是王多魚)
1)促活:通過獎勵來促使用戶每天使用產品。培養用戶的使用習慣。這個其實是大多數APP做簽到的目的,也是衡量簽到功能是否成功的重要指標;設計師在設計的時候,就要考慮獎勵的樣式呈現、簽到的方式、激勵點的設置、簽到的提醒等。
2)留存:一般簽到頁面為了提高留存率,在設計上可以展示第二天或者近7天登錄的獎勵(例如很多游戲的簽到頁),會吸引想要獎勵的用戶再次登錄。如果通過簽到讓用戶養成了每日簽到的習慣,那產品的留存率將提高;
3)拉新:通過簽到來滿足用戶的技能成長記錄與分享后得到他人的夸獎、認同的需求。從而刺激用戶對外分享,讓產品獲得更多曝光,某一定程度上也能拉新。如朋友圈經常能看到keep用戶的健身簽到圖、堅持背英語的簽到圖。
4)營收:讓用戶從簽到轉化達到營收是最重要的目的。現在很多產品的簽到功能跟商城掛鉤,給予獎勵吸引用戶購買商品,一定程度上能拉升營收。設計師在設計的時候,就要考慮優惠券、兌換的設計怎么結合到簽到中,因為優惠券能促使用戶下單、積分加現金能增加禮品、道具等的收入。
5)會員體系:簽到有助于產品建立更加完善的會員積分系統,不同的會員等級,享受的待遇和優惠不一致。通過堅持打卡,來激勵用戶激活更高的會員等級。設計師在做簽到頁的時候就要考慮和會員等級怎么掛鉤,引導用戶。
6)品牌印象:這個目的就需要設計師在簽到頁增加品牌吉祥物或其他象征物,強化用戶對產品的印象。
簽到對用戶而言,是因為能夠用戶獲利,所以才會去簽到,獲利分為物質和精神兩種。
1)物質獎勵:即用戶可以獲得積分、兌換商品、優惠券、現金等(大部分有商城的APP常用的獎勵)
2)精神獎勵:即用戶自己的情感滿足(如keep打卡技能成長記錄與分享后得到他人的夸獎、認同的需求)、以及簽到獲得不同的會員等級與用戶權限、或者虛擬的獎章(如游戲勛章)、排行榜之類的。
在了解了我們的產品是否適合做簽到后,接下來了解要把簽到功能做好,需要從哪幾個點入手?(另外,在做這篇總結的時候,有大佬的簽到設計上了首推,大家可以結合大佬的設計一起看這個模塊,食用效果更佳)
把簽到功能加到APP里,在不影響主要功能使用的前提下,把簽到功能入口做的越明顯越好,這樣才能在更新后讓用戶更加容易發現,并且讓用戶在每天簽到時能夠更加快捷,不會因為進入的路徑過長或者過于復雜而讓用戶放棄
1)首頁金剛區圖標
這類的簽到功能相對獨立且內容強大,比較能吸引用戶,有的簽到就是常規入口,如:拼多多的現金簽到、京東的領京豆、飛豬的領里程。放在首頁的目的是為了曝光。
2)底部單獨tab
這類型多見于生鮮、超市之類的APP,簽到對其功能比較重要的產品。
3)首頁右下角懸浮球
首頁右下角的懸浮球是簽到快捷入口,未簽到情況下顯示,簽到完成則會消失(之前有遇到,沒找到就不配圖了)
懸浮球會遮擋一部分底部內容以及干擾用戶操作。友好用戶體驗就是當用戶向下滑動頁面的時候懸浮入口就會消失或者收納到頁面右側只露出一點,也就不會造成干擾的問題了。
4)個人中心的列表類、按鈕類
這類是很多APP會采用的簽到模塊入口,與個人中心模塊的其他列表的展現形式一致(圖標+文字)
5)彈窗類提示
一般使用的App并不是太多,在進入APP時,就會跳彈窗,想引導用戶去簽到,因為這類形式容易造成用戶不同程度的反感。(從我的彈窗總結就能看出大家多不喜歡彈窗了)
6)導航欄
簽到在導航欄上進行展示的時候,用戶是較為容易忽略導航欄上的簽到功能的,所以設計師通常會做成金幣、紅包、禮物的形式并加上動畫效果來用戶的注意。
7)個人主頁頂部小標簽/小按鈕
通常放置在用戶名邊上或者頂部,突出簽到的功能
1)寫死的界面(需要重新發版才能更改)
這種適合簽到頁面不復雜,不需要經常調整的
2)H5(可以在不發版的情況下進行替換)
適合經常改需求的產品,可以根據需求不斷更替(如有些電商產品會根據節日做不同的簽到樣式)
1)自動簽到
在APP中就是登錄即簽到,優點是用戶很便捷簽到成本低,缺點是放棄成本也隨之變低,不利于習慣養成和形成有效轉化。用戶一般對自動簽到的感知度較低,因為自動簽到通常顯示為:連續簽到X天,獲得XX積分。用戶不能明確感知獲利信息,如簽到獲取的積分能做什么,產品想要吸引用戶長期簽到很難。在設計的時候需要把簽到結果反饋給用戶又不能給用戶形成過多的干擾。
游戲類的自動簽到一登錄就自動簽到,并向用戶展示簽到得到的獎勵,并且會展示多天的,吸引用戶再次點擊進入產品
2)手動簽到
用戶要主動去點擊并獲取獎勵。手動簽到在設計的時候,為了簽到的效率,通常會把簽到按鈕放大處理,讓用戶可以快速找到簽到入口并快速完成操作。通常會除了簽到功能外,還會有簽到說明、規則、以及引導用戶進行轉化模塊。手動簽到盡量讓用戶長時間停留更有利于用戶停留和轉化,大部分電商產品都是手動簽到。手動簽到缺點是不能一步完成,用戶通常要付出操作成本。若簽到層級太深,用戶通常注意不到(所以需要在首頁做快捷入口)
1)連續簽到
需要用戶在一段時間內連續完成簽到不可間斷,斷簽后需要重新開始的計算方式。連續簽到我認為包含了每日簽到所以不單獨拆開說。連續簽到通常會故意設計成單次簽到的獎勵不如連續簽到的獎勵多,連續簽到所獲得的獎勵內容存在疊加與翻倍關系。每完成一個短周期,就可以獲得一個大獎,增強新鮮感,刺激用戶養成連續簽到的習慣。但這樣,一旦用戶斷簽,帶來的損失感也要比前一種大得多,用戶不一定愿意重新開始,而是會徹底放棄??梢栽谠O計中加個每日提醒功能和補簽功能。
若產品打算使用連續簽到的方式,就需要考慮斷簽的情況下的設計
A 用戶斷簽就需要重新開始簽到
B 提供補簽,可以是用積分兌換、拉新,補簽的具體方法可以很多具體可以和公司負責運營的小伙伴商量,但是要補簽對用戶來說一定要付出的成本小于補簽后獲利成本,用戶才會完成補簽動作。
2)累計簽到
用戶在在APP內達到規定次數即認為簽到成功,可間斷。斷簽后依舊計算總天數。用戶每天簽到可以獲得當日獎勵,并且只要保證周期內達到規定次數就可以獲得額外獎勵。亮點:由于能連續簽到的用戶實在太少,累積簽到可以給用戶有緩和度,給用戶還能達到的心理暗示,會更容易讓用戶接受。
當產品要設置簽到周期通常就是連續簽到方式,常見的簽到周期為5天、7天、21天、一個月。很多APP都會選擇7天這個周期設置。選擇7天,因為我們平時上班、上學都是以周為單位的,比較容易被用戶習慣。
在簽到周期的最后一天會設置一個激勵點,設計師在設計的時候可以在第三天設置激勵點,把2個小部分,因為我們在上班的過程中通常把周三做為一個節點,過了周三后,就好像馬上周末了一樣,開心!讓用戶在較短周期完成簽到獲得獎勵,再通過小周期的疊加來培養用戶簽到習慣。激勵點的設置可以和數據結合分析,看哪天最容易斷簽,就在那天設置獎勵日,讓用戶看到獎勵打開APP實現連續簽到的目的。
簽到的獎勵反饋內容和產品希望培養的用戶行為直接相關,根據產品提供給用戶的獎勵,簽到可以分成以下幾種常見類型:
1)物資激勵簽到
就是只要用戶簽到,就給用戶物資獎勵,獎勵可以是優惠券、現金抵現、抽獎、兌換商品等,是大多數產品的簽到手段,模式簡單粗暴,大部分APP都是使用這種方式。這種簽到激勵往往耗時較長,且有一定的運營成本,獎勵的價值往往都比較低。同時過程中缺乏新意,且只能滿足用戶較低層次的需求。
有個有意思的簽到是網易云簽到,雖然這個產品簽到成功會有積分獎勵,但是最吸引用戶的是每次簽到后,網易云會推薦一首歌以及一些歌曲評論,身邊有堅持網易云簽到的小伙伴基本是奔著這個獎勵去的。
還有另一種物資激勵,如早起計劃這種類型的簽到方式,是先讓用戶付出少量的資金,周期簽到完成后可以瓜分獎金池里的資金。如果簽到失敗,你前面付出的資金就會被其他完成的小伙伴瓜分,這類簽到由自愿參與,在設計的時候,要列出挑戰成功獎勵、失敗的結果,利用用戶“厭惡失去”的心理讓用戶更加容易堅持下去,并且只要參與這個計劃,每天醒來第一件事,就是快打開我們的APP進行簽到。
2)精神激勵簽到
這類簽到,主要是利用等級、稱號、曝光率、成就感、認同感等一些自我實現和尊重的需求來刺激用戶使用。最典型的產品就是Keep的運動徽章,微博話題的簽到熱度排行、螞蟻莊園等等,但對于獲得獎勵的門檻往往要求較高(例如:keep要運動目標才可以簽到)。
3)體驗驅動簽到
這有的產品沒有“簽到”功能,但是產品本身自帶簽到,將“簽到”作為產品的一種屬性,使產品擁有了每天都需要被打開的原因,很好的提高了整個產品的活躍度。例如:網易蝸牛讀書,登錄即可領1小時免費時長就是這個產品的“簽到功能”,吸引很多用戶每天登錄雖然沒有簽到功能,但是將其內化成了用戶每天必須打開它的理由。做這種簽到的前提是產品能夠滿足用戶的某個需求,就像用戶如果沒有閱讀需求,這個免費時長就毫無價值和吸引力了。
4)游戲化簽到
很多平臺為了凸顯簽到的差異化,增強吸引力,游戲化簽到方式就應運而生了。相比普通的簽到方式,游戲化包含了更加豐富的內容和場景,更容易讓用戶上癮。對用戶而言,也不會有任務般的強迫感,用戶體驗相對更好。非常建議小伙伴們可以研究下游戲化簽到。
比較典型的就是種水果,用戶簽到達到一定周期后,平臺給你送水果。支付寶的螞蟻森林和養雞就是非常成功的游戲化簽到。比如我沉迷的養雞,就是通過養雞讓小雞產生愛心,每達到5顆愛心就可以讓一個人得到救助,以這種公益的方式吸引用戶使用支付寶(因為沒飼料了,使用支付寶付款后就會產生飼料)和達到店鋪賦能(還可以看店鋪獲得飼料)。
這個模塊展示常見APP簽到的幾種樣式
1)彈窗類
此類簽到通常在一個頁面內即可完成簽到操作,無需跳轉到其他頁面,此類簽到規則在游戲類app中也運用的較多,展示模式也跟游戲類app相似。
2)標簽類
標簽卡片式適合展示當天較為重要的獎勵數據,通常在當天簽到展示信息較多的時候使用。相比其它展示類型更加清晰明了。但不能看到隔天的獎勵,刺激用戶連續簽到。
3)時間進度類
A 時間軸平鋪類
時間軸平鋪類通常可以很明顯的看到時間進度,一般以時間軸進度條橫向平鋪的形式進行展示。周期通常為7天為并設置獎勵日,培養用戶簽到習慣。在知乎看到一個問答帖:為什么現在很多男生不追女生了?下面有個高贊的回答:看不到進度條。同理,大部分人沒能堅持簽到,是因為看不到進度條。
B 日歷平鋪類
頭部展示宣傳運營信息。彈窗類上的日歷展示會相對簡潔,日歷類跳轉頁通常在簽到邏輯較為復雜的情況下使用,能夠更好的呈現當月的簽到情況。
4)勛章類
在運動健身類、游戲類App中運用較多,當直觀看到獎章榮譽,對用戶有較強的激勵作用。
游戲形式有抓娃娃、地圖闖關、澆水種樹、建設小鎮等
了解完簽到的設計要點后,怎么運用到設計中?看兩個典型的,一個是標準的簽到的產品,一個是去除簽到字樣但有簽到概念的產品
京東的簽到瓜分京豆頁面,將拉新、留存、促活、轉化結合到一塊。這一套下來,用戶在參與這個活動時,保證了用戶這23天每天會打開一次(如果漏簽,用戶會拉新補簽)。
螞蟻森林就是游戲化的方式展現出來,去除了“簽到”字樣,但是依舊達到簽到功能的產品,用戶的參與度和留存度都很高,
用戶的典型路徑為:
進入螞蟻森林界面;
收取自己行為產生的能量(運動、支付、回收……);
去好友的頁面收取他們的能量,或者幫他們收取即將消失的能量;
積累到一定數量后,種下真實的樹。獲得證書
1、螞蟻森林的簽到形式是收取能量(或收取好友能量),能量是你前一天的運動、支付產生的
2、獎勵是產品方替你種下一棵樹并獲得證書(這個是物資獎勵+精神獎勵)這是很強的精神獎勵(看周圍小伙伴沉迷于透能量,早上7點半定鬧鐘來偷我的能量就知道了)
3、簽到周期,能量3天不收會消散,這形成了一個簽到周期。獎勵是種樹,不同的樹苗所需能量不一樣,用戶可以自行選擇對其難度小的。能量種樹并領取證書就是激勵點的設置
4、可以收取他人能量形成社交聯系(我下次也要定鬧鐘去偷他的能量!),也會進一步提升產品的活躍和留存。
這個總結了簽到的定義、什么產品適合做簽到、為什么要做簽到以及做簽到要注意哪些要點,簽到確實不能決定一個產品生死,最終要看的還是產品本身的核心功能。但如果你用得好,雖不能雪中送炭,但一定可以錦上添花。希望小伙伴們在做簽到功能的時候,能提供給大家清晰的認知和方法。可能存在一定的局限性。這個總結也斷斷續續寫了兩周,希望能對大家有幫助。
文章來源:站酷 作者:是阿三三呀
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用互聯網產品過程中,會有很多因素造成操作錯誤或失誤,導致無法順利完成任務。因此產品的容錯性設計是交互設計中的重要內容。
用戶在實際使用互聯網產品的過程中,會有很多因素造成操作錯誤或者失誤,而導致無法順利完成任務,或者完成任務的效率很低。產品自身所具備的容錯能力對于各種使用場景的有效覆蓋,可以提升產品糾錯效率、降低用戶操作出錯概率,因此產品的容錯性設計是交互設計中的重要內容,也是提升用戶體驗不可忽視的一個環節。
容錯性概念源于計算機領域,容錯性是指計算機系統在發生故障的情況下,依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。
本篇內容我們討論的是容錯性在互聯網產品領域的內涵和意義。延伸到互聯網產品設計領域,容錯性的范疇更為寬泛,涉及產品對錯誤操作承載能力的多個方面,包括:如何降低用戶操作的出錯率,如何及時提供糾錯幫助,以及如何給用戶提供解決方案等內容。
「 即便你的產品90%的時間都運行良好,但是如果在用戶需要幫助時置之不理,他們是不會忘記這一點的?!禛etting Real》」
一個產品設計的無論多么簡單,用戶都難免在使用過程中因為各種原因而犯錯?;ヂ摼W產品面向的用戶群體是復雜多樣化,教育背景的不同,行為習慣的差異,復雜的使用場景,都會使得用戶的真實操作相比產品設計之初的預期有一定出入。此外,一些產品本身存在的因素,例如產品路徑復雜,邏輯不暢等,也有可能造成用戶無法順利完成任務,亦或是完成任務的效率低,出錯率高。產品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失,會給用戶帶來不好的用戶體驗,也是產品的一種設計缺陷。因此設計師應具有良好的容錯性設計思維,盡量避免用戶錯誤操作的出現,當用戶出現錯誤操作時,幫助用戶識別、診斷,及時反饋問題所在,并提出有效的解決方案,幫助用戶快速從錯誤中恢復。最終達到使產品更可用、更易用的目的,給用戶帶來更優的用戶體驗,使用戶與產品的交流更加順暢。
互聯網產品的容錯設計可從用戶使用產品的三個階段來考慮,即操作前、操作中、操作后??纱笾職w納為以下幾方面內容:首先在用戶操作前給予正確有效的引導;其次在重要的操作步驟給予用戶及時有效的提示;當用戶發生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案;最后幫助用戶在錯誤發生后迅速回到正確狀態。
在用戶開始任務操作前給出用戶正確有效的提示,可減少錯誤操作的發生。需要注意的是,引導應盡量醒目且簡單易理解,確保能引起用戶注意,并且在用戶注意到后快速獲取信息,到有效的防錯幫助。
產品常見的引導主要針對兩種情況。第一種是針對于新手用戶的功能介紹,不同于曾使用過產品的用戶或者高級用戶,新用戶首次使用產品的過程其實是一個學習的過程,此時需要讓用戶快速了解產品核心功能及主要的操作,幫助他們更快地上手。
例如下圖導航APP新版本的新手引導【如圖1】,在用戶首次啟動產品時,產品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹,能夠讓新用戶快速熟悉核心功能,并在正式使用產品的過程中提升效率,降低出錯率。
圖1-導航APP新手引導
第二種情況是針對產品上線的新功能或者較大的功能變動而設計的初次引導,產品的功能改動可能會是用戶產生不同程度的陌生感,適當的提示可幫助用戶快速熟悉新功能點或頁面信息的調整。初次引導常見的方式有很多種,包括:遮罩式引導、彈窗式引導、氣泡、浮層式引導等等。
例如版本升級后的音樂APP【如圖2】,首頁使用情感化圖文設計加遮罩式的引導,可以有效將注意力集中到特定功能上,用戶進入頁面第一時間就注意到,確保了信息傳達的有效性。
圖2-新版首頁的遮罩引導
以上列舉的內容屬于狹義層面的引導,用戶尚處在被動接受引導的學習階段,在此階段引導的目的是提醒和防錯。從廣義的層面來講,我們可將對用戶的引導理解為”消減信息的不對稱性“,當用戶面對可影響其決策的因素時,給予用戶關鍵性的信息提示和說明,可以促使用戶做出正確的決策。
針對需要加工時間的特殊品類,如烘焙蛋糕,京東到家在用戶決策的關鍵頁面和步驟展示時效提醒【如圖3】,避免用戶在完成訂單信息填寫或結算后才發現商品的配送時間超出用戶的期望,會給用戶帶來極為不好的購物體驗。
圖3-京東到家頁面中的時效提醒
當用戶進行一些如修改、刪除、覆蓋等不可逆操作時,系統需要在用戶做出這類操作指令后告知其產生的后果,讓用戶自主決策是否選擇繼續執行。在此階段的提示需要注意從以下兩個角度考慮:一是提示的方式,二是提示的時機。
在用戶完成任務的操作路徑中,大部分產品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態彈框和非模態彈框兩種大的類型【如圖4】,主要區別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示,要依據提示信息的優先級和視覺權重的大小,同時要清楚不同類型的彈框適合的場景。
圖4-彈框分類
模態彈窗是較重的提示方式,在用戶進行重要且有風險的操作時可優先考慮使用。其優點是可以快速獲取用戶的視覺焦點,缺點是會打斷用戶當前的操作流程,用戶需要進行如單擊“確定”、“取消”、“關閉”按鈕等操作指令將該對話框關閉后才可繼續操作。
而非模態彈框屬于輕量級的提示方式,其優點是不強制用戶進行交互操作,或者用戶依然可以在頁面進行其他操作。彈框出現一段時間后會自動消失,所以但不利于承載過多文字信息。非模態彈框對用戶造成的干擾較小,但也因此容易被用戶忽視。
給用戶的信息提示還有一點不可忽視的是反饋時機,應確保用戶在關鍵的操作步驟得到及時的反饋,因為滯后的反饋可能會導致用戶因為某一個環節的錯誤操作不得不重復操作一遍之前的流程,或者要修改關的一系列信息。
【如圖5】中的登錄頁面,用戶登錄需要依次輸入手機號、密碼、圖片驗證碼,但如果用戶輸錯了密碼并不能馬上得到反饋,依然可以繼續填寫驗證碼,只有在全部信息填寫完之后點擊登錄,系統才會校驗密碼,并提示用戶密碼錯誤重新確認,用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統驗證密碼可以提前到輸入圖片驗證碼的步驟之前,在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟,馬上修改密碼。
圖5-登錄頁面中的提示滯后
同時,盡量為用戶提供相應的解決方案,這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯,并且會告知用戶如何去管理儲存空間,以解決此問題【如圖7】。
圖6-多行表單報錯頁面
在產品設計中,為降低操作的出錯率,限制也是一種方式。在可能造成錯誤操作的入口適當設置操作障礙或者禁止操作,增加不可逆操作的難度,可以有效規避錯誤操作發生風險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設計,可以有效避免用戶的誤操作。
此外通過讓控件、動作、選項等變得可見,盡可能減少用戶記憶負擔,把需要記憶的內容作為輔助信息提供給用戶,或幫助用戶自動完成信息填寫也可以幫助用戶快捷地完成既定任務,降低出錯率。例如【如圖8】在信息填寫的步驟,可在用戶已復制的內容和上傳的圖片中自動識別姓名、電話、地址等內容,并在用戶確認后自動幫用戶填寫對應信息,為用戶大大節省時間和記憶成本,快捷地完成既定任務,降低出錯率。
在用戶執行操作后,應盡可能的為用戶保留已操作的信息,以便在發生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復雜的操作任務,記錄用戶在每一步驟的操作信息,讓用戶可以從出錯的步驟上及時恢復到正確的流程上,或恢復到距離錯誤操作最近的步驟,可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當前的操作,在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕,可讓用戶有機會恢復到上一步操作結果上。
圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕
以上是關于互聯網產品中容錯設計的概念、重要性以及設計方法的一些闡述和思考。在產品設計的實際應用的中,可以模擬使用場景,對目標用戶使用產品的真實操作進行行為觀察,分析對比產品設計的操作路徑與用戶真實操作的差別,發現并收集用戶可能發生錯誤或失誤操作的關鍵步驟,驗證產品的容錯能力是否能達到有效覆蓋。同時,也要通過產品數據的對比分析得出用戶操作錯誤及失誤的真實原因,指導并提升產品容錯能力的設計優化,進而不斷提升產品的可用性和易用性。
文章來源:站酷 作者:DXC設計體驗中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計源于生活,本文通過生活視角溯源格式塔原理,從生活到界面設計感受格式塔原理應用在方方面面。
一、什么是格式塔原理
格式塔即Gestalt,是德語中“形狀”和“圖形”的意思。是基于心理學對人類視覺系統的研究,人類的視覺系統自動對視覺輸入構建結構。
最重要的格式塔原理有:接近性原理、相似性原理、連續性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運體 原理。
下面將進行詳細分述
視覺會把互相靠近的物體看成一組,反之則不是。
下方示意圖中A被看作三排,B被看作三列
【 生活中】
無論是在看閱兵還是軍訓,我們都有所經歷,左右間距為一拳,前后間距為一臂。
列與列之間的間距遠大于每個人之間的間距,互相靠近的則被看作一列。
(圖片來源于網絡,僅供交流學習)
【界面設計中】
個人中心中,同一組信息之間的間距遠小于不同組,下圖中我們明顯可以感知到7組由圖標和文字組成的信息。
(圖片來源于網絡,僅供交流學習)
建議
設計過程當中可以控制元素與元素之間的間距,從而對元素進行視覺分組,就像排隊一樣,有利于元素排列更有規律,主次分明,易于用戶獲取信息。
視覺會把相似的物體看成一組,反之則不是
下方示意圖中顏色相似的被看成一組,顏色較深的兩個圓被看作一組
【 生活中】
大家都玩過跳棋,在全部棋子形狀相同的情況下,通過顏色進行陣營區分。相同顏色的棋子很容易區分被分為一個陣營。
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中01、02、03三個圖標區域呈現不同的圖標樣式,通過樣式的相似性進行了合理分組,體現了個人中心圖標的強弱層級。
建議
設計過程當中可以通過制造相似性,包括:顏色、形狀、格式、質感等,使某些對象在視覺上成組。
視覺傾向于感知連續性,而不是零散的事物
下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊,甚至是一個X。而不是一條淺色線段,兩條深色線段
【 生活中】
被切開的水果我們依然可以感受到完整的樣子,一看便知這是一個完整的橙子被切開之后的樣子
(圖片來源于網絡,僅供交流學習)
【界面設計中】
利用連續性原理,我們將上圖中的會員等級曲線看成是完整的曲線,而不是兩段不同顏色的曲線
利用連續性,下圖中依然可以感受到完整的一盤食物
(圖片來源于網絡,僅供交流學習)
建議
設計中可以利用連續性原理,只露出部分元素暗示完整元素,或用連續性來暗示走向趨勢等。
視覺會將敞開的圖形封閉起來,從而感知完整的物體
下圖中我們不會將其看作三段曲線,而是很容易感知到是一個圓
【 生活中】
劃分停車位的時候,即使不畫出四面封閉的四邊形,我們依然可以感知到完整的四邊形車位
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中的斷點式icon設計,即使圖形沒有完全連續,我們依然可以感受到完整的圖形
(圖片來源于網絡,僅供交流學習)
建議
設計中可以利用封閉性原理合理刪減、斷點等方式增加設計感、豐富度,強化頁面趣味感、精細度
視覺會將復雜物體解析為符合對稱規律的更簡單的物體,從而降低復雜性
我們可以很快感知到下圖是兩個圓交疊,而不是其他更復雜的圖形,因為一對圓的復雜度遠小于其他
【 生活中】
河對岸的房子倒影在水面上,我們通常會最快地自動解析出水平的對稱線,將其視為上下對稱的兩組房子
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖的網頁排版,我們的視覺自動梳理出了左右對稱的規律,即使左右的顏色并不一樣,也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復雜性
(圖片來源于網絡,僅供交流學習)
建議
設計中復雜圖形可以通過簡單圖形復用得出,降低視覺理解難度。復雜的排版中可以制造對稱性,從而降低頁面的理解成本。
視覺將聚焦部分解析為主體其余解析為背景,或改變焦點時呈現不同的主體
大的矩形和圓形交疊時,我們傾向于把小的看作主體,矩形則視為背景。
【 生活中】
下圖中將深色區域視為主體時我們看到了建筑,把淺色視為主體時我們看到了五角星,在五角星中我們把美隊看作主體,天空看作背景
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中彈窗的出現轉移了頁面的主體
(圖片來源于網絡,僅供交流學習)
建議
可以通過控制主體與背景,改變用戶視線焦點,從而起到引導用戶視覺的目的。
一起運動的物體被感知成一組或彼此關聯
下圖中三個運動的小球被看作一組
【 生活中】
舞蹈表演中,通向運動的舞蹈演員被我們歸位同一組
(資料來源于網絡,僅供交流學習)
【界面設計中】
背景的文字擁有一致的運動速度,因此原本零散的文字在動效過程中被我們視為同一層元素
(資料來源于網絡,僅供交流學習)
建議
設計中不僅可以通過接近性、相似性,還可以通過同樣的動態特征將物體成組,減少視覺凌亂感。
文章來源:UI中國 作者:JuneW
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn