首頁

用戶體驗設計法則應該怎么用?來看看這些應用原理!

seo達人


1、菲茨定

圖片

選中目標所需時間與移動距離長短和目標面積大小有關。(與距離負相關,與面積正相關)

 

現(xiàn)實中的應

圖片

在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準,標志設計得更大、更容易接近。

 

設計應用

圖片

▲ 左側頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區(qū)分;右側頁面CTA按鈕尺寸很大,能讓用戶清晰識別。

 

2、??硕?/strong>

圖片

決策所需要花費的時間隨著選擇的數(shù)量和復雜性增加而增加。

 

現(xiàn)實中的應

圖片

與餐廳相比,快餐店的菜單選項有限。因此顧客點餐速度更快,門店提供的服務也更快。

 

設計應用

圖片

▲ 在Whatsapp上轉發(fā)消息時,會在“最近聊天”列表上方看到“經常聯(lián)系”的3個好友。這對用戶來說是一種簡單的交互,幫助用戶節(jié)省操作時間。

 

3、共域定律

圖片

被一個顯而易見的邊框包圍起來的多個元素,被視為一個群組。(從屬于格式塔理論)

 

現(xiàn)實中的應用

圖片

在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對這家服裝店一無所知,顧客也會將一個貨架內的商品關聯(lián)成相似的東西。

 

設計應用

圖片

▲ 過濾器被封閉在產品頁面之外的單獨區(qū)域中,因此可以清楚地識別左右兩部分的差異。

 

4、雅各布定律

圖片

用戶將大部分時間花在別人家的網(wǎng)站(產品)上,而不是你的。這意味著他們希望你的網(wǎng)站(產品)跟別人的有相同的使用方式。

 

現(xiàn)實中的應用

圖片

假設家中的陽臺是一扇推拉門,我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門,我們可能會下意識地先去推門。

 

設計應用

圖片

▲ 以上是國外知名的電商網(wǎng)站導航欄設計,這幾個網(wǎng)站導航欄中顯示的信息及其結構都非常相似:左側是品牌標志,中間為搜索欄,右側為其他選項(購物車/個人賬戶)。

 

5、系列位置效應

圖片

用戶更容易記住系列中出現(xiàn)的第一項(首因效應)和最后一項(近因效應)。

 

現(xiàn)實中的應用

圖片

我們通常更容易記住某個電話號碼的前4位或后3位,這條法則也是銀行卡號被分成4組數(shù)字的原因。

 

設計應用

圖片

▲ 在亞馬遜主頁上,網(wǎng)站的第一部分總是顯示最重要的內容:導航包含logo、搜索和其他重要功能;輪播圖通過圖形設計吸引用戶的目光,引導新的交易或優(yōu)惠。

 

6、馮·雷斯托夫效應

圖片

又稱隔離效應。當存在多個相似物體時,與眾不同的物體最容易被記住。

 

現(xiàn)實中的應用

圖片

在商場購物時,相較于普通裝飾的門店,我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

 

設計應用

圖片

▲ App上有新消息時,會在圖標上用紅點顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導用戶點擊并查看消息。

 

7、審美可用性效應

圖片

用戶通常認為漂亮的設計更易用。

 

現(xiàn)實中的應用

圖片

當參觀汽車展廳時,我們通常會對汽車精美的展示感到驚嘆,并立即對這個品牌產生積極的印象。

 

設計應用

圖片

▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網(wǎng)站時,我們會下意識地信任這個產品,也確保了用戶對品牌的信任。

 

8、峰終定律

圖片

人們評論體驗優(yōu)劣,大多基于峰值和結束時的感受,而不是所有環(huán)節(jié)的平均值。

 

現(xiàn)實中的應用

圖片

在足球比賽中,整場的觀看體驗將根據(jù)比賽結束(誰獲勝)和比賽高潮(誰進球最多/比賽中最激動人心的時刻)來判斷。

 

設計應用

圖片

▲ 在夜晚非常饑餓的時候,我們使用訂餐App選擇食物時,卻被告知付款失敗。這時候App界面設計的再好看也無關緊要,訂餐失敗就是從這次體驗中收獲的結果。

 


 

原文地址:Clip設計夾(公眾號)

作者:Clippp

轉載請注明:學UI網(wǎng)》用戶體驗設計法則應該怎么用?來看看這些應用原理!

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


Figma自動布局賦能B端設計

周周

排版布局可以響應式的隨設計師對內容的增刪改而自動調整,無需手動修改徒增成本,進而大大提升工作效率。

交互規(guī)范制定指南

周周

瀏覽了許多關于“設計規(guī)范”的文章,發(fā)現(xiàn)很多都是在針對通用流程和視覺方面在整理,關于交互層面的內容比較少?;诖?,結合最近項目中沉淀的實際案例,以及參考了不少行業(yè)通用的設計規(guī)范,總結了一篇關于搭建交互規(guī)范的流程、框架、要點。希望能夠幫助大家更好的沉淀交互規(guī)范。

B端產品設計規(guī)范

周周

整理了一套B端設計規(guī)范,包括色彩規(guī)范、字體規(guī)范、圖標規(guī)范、布局柵格、組件規(guī)范。

用戶體驗度量模型

周周

本文介紹了幾個關于用戶體驗度量的模型,UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型,它們各有切入點,也各有其適應場景。對各個模型的概念和它們相應的維度做了詳細的介紹。

產品體驗增長中的3個核心招式

周周

本文將以「產品與用戶之間的信任」為出發(fā)點,從產品體驗的角度,對比產品體驗層面的差異化,為大家提供設計思路,助力產品數(shù)據(jù)的增長,設計出既好看又好用的產品界面。

開啟新時代的響應式網(wǎng)頁設計

ui設計分享達人

///

它是如何開始的-固定屏幕

在千禧年來臨之前,我們首先開始在單一視圖屏幕中進行UI設計,這類屏幕在當時最流行的尺寸是640x480。大多數(shù)時候,我們甚至沒有考慮讓屏幕滾動,而是在特定區(qū)域或文本局部區(qū)塊中設置了內部滾動條。毋庸置疑,當時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的,并帶有用于布局的表格。那是在智能手機出現(xiàn)之前,隨著事物的發(fā)展,我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路,CSS已得到長足的發(fā)展,“響應式”網(wǎng)頁設計從2010年開始才真正獲得了專有工具。

圖表來源: https://www.webdesignmuseum.org/web-design-history


///

它現(xiàn)在怎么樣-響應式設計

隨著CSS3的發(fā)布,我們獲得了對“媒體查詢”(Media Queries)的訪問權限(譯者注:隨著移動互聯(lián)網(wǎng)的興起,我們需要適配多種移動端設備,這就需要用到Media Queries,即“媒體查詢”),此后不久,Ethan Marcotte在2009年底創(chuàng)造了“響應式設計”一詞。十多年來,我們一直使用“響應式網(wǎng)頁設計” (RWD) 創(chuàng)建網(wǎng)頁布局,作為一種網(wǎng)頁設計方法,僅需基于一種屏幕尺寸進行設計,“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。

在早期,當移動電話還不兼容媒體查詢或JavaScript時,“移動優(yōu)先”和”漸進式增強”的概念就成為了非常流行的方法,當時有很多CSS完全不受支持。

用我們今天的話來說響應式設計,我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調整為移動設備屏幕所需的尺寸時,我們使用“媒體查詢”來更改整個頁面布局。

 

///

它的未來是什么-組件驅動

很快,使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時—就像我們在90年代所做的那樣。

我們通過基于viewport(視口)的“媒體查詢”獲得了許多強大的工具,但我們也缺乏很多適配的可能性,因為“媒體查詢”是一個適用于整個頁面的通用解決方案,并且對每個用戶來說都一樣。我們缺乏響應“用戶需求”的能力,也缺乏將“響應式”樣式注入“組件”本身的能力。


當我們談到組件時,這里指的是頁面上的“元素”,這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內容,每個“塊”都由各種更小的“構建塊”組成。這些組件拼湊在一起構成我們的網(wǎng)頁。我們可以使用 global viewport information(全局視口信息)來設置這些組件,但它們仍然無法擁有自己的風格。當我們的設計系統(tǒng)是基于“組件”的而不是基于“頁面”的時,這使得它變得更加困難。

好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化,而且它正在迅速變化,這需要我們進行一些思維轉變:考慮如何設計和定義組件樣式以及它們如何適應周圍環(huán)境。

CSS正在不斷發(fā)展,“響應式”網(wǎng)頁設計的新時代即將到來。從目前的情況來看,自從我們第一次引入 “響應式網(wǎng)頁設計” (RWD) 以來,僅僅10多年的時間,這個生態(tài)系統(tǒng)已經準備好迎接CSS發(fā)生一些相當大的改變。


讓我們深入研究一下可以期待哪些類型的變化,這會如何改變我們的設計方法,以及我們如何考慮界面設計。

 

///

用戶能夠設置基于個人偏好的“媒體查詢”

簡單來說,我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗偏好來調整用戶體驗。

這絕不是一個完整的列表,但能給你一些想法,這些基于偏好的“媒體查詢”可能包括:

這些將幫助我們構建更具活力和個性化的網(wǎng)頁體驗,專門滿足我們用戶的專屬需求,尤其是那些希望網(wǎng)站易于訪問的用戶。更進一步說,這些基于偏好的“媒體查詢“尊重任何用戶已經在操作系統(tǒng)設置的偏好。舉個例子,當用戶的操作系統(tǒng)偏好設定為“減少動效”時,他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好,并為其他人提供“動效增強”的體驗。

另一個流行的媒體查詢是@prefers-color-scheme(配色偏好設定),它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”,它會自動發(fā)生。

///

“容器查詢”為你的設計系統(tǒng)注入新的生命力

CSS 中最令人興奮的新興領域之一是“容器查詢”(container queries),通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉變對發(fā)展“設計系統(tǒng)”的作用價值不容低估,盡管今天使用它并不安全,但重要的是要了解其發(fā)展方向。

簡而言之,“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規(guī)則。這意味著任何組件都更加獨立,與現(xiàn)代設計系統(tǒng)保持一致,真正成為“即插即用”模塊,可以轉移到任何頁面或布局,而且無需根據(jù)新環(huán)境重新考慮所有內容。

“容器查詢”為我們如何規(guī)劃、設計和構建特定組件提供了一種更加動態(tài)的方法,因為組件本身擁有它的響應信息。

甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要,我們應該研究一下。

 

///

考慮各種形態(tài)因素

由于各種“形態(tài)因素”(form factors)的變化和擴展,例如新的屏幕類型,可折疊屏,我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內容中,請記住,這是最具實驗性的,并且只是一項正在進行的工作,仍在嘗試解決我們可能遇到的任何復雜問題,同時考慮未來“形體因素”可能會如何發(fā)展。

在可折疊屏場景中,原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們如何讓內容根據(jù)新環(huán)境進行適配。例如,你可以在一個屏幕上放置一個收起的側邊欄(或菜單),并允許內容在另一個屏幕上展開并隨頁面滾動。

 

///

為什么我們需要它?

我知道你在想什么,我們已經從事網(wǎng)頁設計并使用“響應式”來進行網(wǎng)頁設計10余年了。我們對其相當滿意,那么為什么要改變呢?如果我們真的以終局視角來看響應式設計,那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網(wǎng)頁體驗應該去適應用戶的需求偏好。隨著設計系統(tǒng)的發(fā)展以及我們如何創(chuàng)建更便攜的網(wǎng)頁,諸如“容器查詢”之類的工具將變得非常有意義。

配圖:CSS 將基于各個層級來確定用戶的最佳體驗

 

考慮到這一點,這意味著我們現(xiàn)在可以使用基于頁面的媒體查(包括跨越屏幕的細微差別)來設計宏觀布局;使用容器查詢的組件設計微觀布局;使用基于用戶偏好的媒體查詢,根據(jù)用戶獨特的偏好和需求定制用戶體驗。

 

對于新的響應式設計,有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協(xié)同工作的方式需要我們從根本上轉變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實:即我們的設計不是靜態(tài)的,不僅在布局上,還有在用戶可獲得的體驗中,我們需要學會在這種模糊性中做出計劃。網(wǎng)頁和設計的未來變得越來越復雜,我們需要適應和挑戰(zhàn)自己,理解“新響應式”體驗的意義。

 

文章來源:站酷   作者:MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

延遲增強——視頻信息流廣告的提轉秘訣

ui設計分享達人

伴隨短視頻平臺的崛起,移動互聯(lián)網(wǎng)的主流內容消費形態(tài)向短視頻視聽語言轉變,視頻信息流廣告的時代已經來臨。如何通過設計提升轉化,是視頻信息流廣告所面臨的挑戰(zhàn)。


為了提升廣告轉化效果,我們結合實際項目,通過大量的實驗與思考,梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現(xiàn)原則,我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。


///

延遲增強是什么?


視頻信息流廣告有三要素:內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料,基礎框架需對齊宿主保持一致性,所以僅有承載轉化信息和行為的轉化組件,是可設計部分。 


“延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現(xiàn)方式。它由消費者決策時的理想心理動線,結合廣告行為推導得出,并經過實驗驗證了其對于轉化提升的有效性。


“延遲增強”包括兩個階段:1.廣告展現(xiàn)初始階段,延遲展現(xiàn)廣告意圖,通過內容吸引潛在用戶;2.廣告內容逐步呈現(xiàn)階段,轉化組件漸進式增強,輔以增益信息,不斷強化,引導轉化行為。


它指導了轉化組件從“呈現(xiàn)”到“增強”的全流程,從時機(出現(xiàn)&增強時機)/引導(動效&互動引導)/前置(信息&轉化前置)三個部分,幫助提升廣告轉化效果



///

時機-延遲增強如何呈現(xiàn)?


轉化組件的呈現(xiàn)時機包含“何時展現(xiàn)”與“何時增強”兩個部分,前者幫助增加廣告接收率,后者提升廣告轉化率。


01/ 出現(xiàn)時機:

延遲展現(xiàn)廣告意圖,可以提升廣告賣點的展現(xiàn)機率


互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動卷入爆炸式增長的資訊信息體中,廣告借助這一媒介迅速發(fā)展,但也因為部分商業(yè)廣告的過度宣傳與其降低用戶信息獲取便捷性的本質,不可避免的使受眾產生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

 

所以對廣告來說,在廣告展現(xiàn)初始,延遲展現(xiàn)廣告意圖,融入內容,可以緩解受眾的抵觸情緒,提升廣告賣點的展現(xiàn)機率。



02/ 增強時機:

通過用戶行為和視頻特征動態(tài)決定增強時機,可以有效提升轉化


對廣告來說,搭配廣告內容進行增強,通過內容積累購買欲/信任感,然后通過階段性的增強來提示操作,對比一成不變能起到更好的轉化效果。


我們首先嘗試了程序化的增強時機,在不增加技術成本的前提下,根據(jù)歷史經驗,面向不同的廣告均采用固定時段的階段性增強。


但不同的廣告物料內容不同,不同的用戶偏好也不同,固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候,我們采用了動態(tài)時機策略,通過用戶行為和視頻特征動態(tài)決定增強時機,在程序化增強時機之后,再次實現(xiàn)了轉化提升


undefined


///

引導-延遲增強如何引導轉化行為?


轉化組件如何引導轉化,則可分為基礎的視覺引導與進階的互動引導,前者幫助搶奪視覺注意力,后者則能夠在互動體驗中植入部分幫助決策的“小心思”。

 

01/ 視覺引導:

適當增加視覺吸引點,可以有效引導點擊

 

延遲增強需要通過階段性的增強來提示操作,而如何增強能有效吸引注意則需要琢磨,已有實驗表明轉化按鈕增加掃光動效與智能取色,能有效吸引注意,引導點擊,對轉化提升有良好效果



02/ 互動引導:

讓用戶主動選擇,可以增加廣告曝光,輔助轉化決策

 

互聯(lián)網(wǎng)產品設計對于用戶交互體驗的追求越發(fā)極致,如影視行業(yè)走向可交互網(wǎng)劇,本質上是從用戶接收轉變?yōu)橛脩糁鲃訁⑴c,用戶本身對于獲得優(yōu)質體驗的意識逐漸覺醒。商業(yè)化產品也需要緊跟“體驗”與“互動”,將廣告變?yōu)榛芋w驗或具備使用價值的信息,讓用戶從被動瀏覽到主動參與,掌握對廣告的選擇權。

 

以互動投票為例,我們通過用戶與用戶之間的觀點表達,以投票選擇的形式誘發(fā)群體性選擇,引起好奇心與同儕壓力。

 

若用戶選擇符合群體選擇,則帶來群體性背書,增強信任感;若用戶選擇不符合群體選擇,基于從眾心理,用戶極有可能對群體選擇產生好奇,從而瀏覽兩種選項的內容,有效的增加了品牌曝光。


undefined


///

前置-延遲增強如何幫助轉化達成?

 

轉化組件的前置主要包含信息前置與轉化前置,前者輔助轉化決策,后者幫助便捷操作,更好更快的完成轉化。


01/ 信息前置:

增加增益信息或前置落地頁信息,可以輔助轉化決策


購買/轉化一定是需要足夠的信息積累信任感才能達成的,在前卡適當?shù)脑黾淤u點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級,二電類廣告可以增加價格信息,甚至可以前置優(yōu)惠劵、圖片banner等信息,均能實現(xiàn)轉化的正向提升。


undefined


02/ 轉化前置:

縮短轉化路徑,可以幫助轉化行為更便捷的達成


在信任感積累與階段性的增強都達成的時候,在當前轉化對比跳轉落地頁再進行轉化,鏈路更短,用戶流失概率更小。比起實驗嘗試,更像是延遲增強的基礎能力配置。


首先,我們針對表單/咨詢/電話/安卓下載都進行了轉化前置,具有用戶明確意向的按鈕點擊會直接在當前進行反饋。



除了直接將操作前置外,針對不同細分場景的需求,還可以通過交互形態(tài)的優(yōu)化在感官上縮短路徑

 

這里以百度的視頻MAX廣告為例,我們針對重落地頁的商家,將MAX首屏(視頻頁)與H5落地頁的關系變拼接結構為雙層結構,通過浮層面板承載落地頁,延時自動彈出,強引導下方內容,激發(fā)用戶上滑瀏覽興趣,解決了落地頁隱藏較深,轉化鏈路過長的問題,同時增加了落地頁曝光從而提升轉化。



///
結語


在視頻信息流領域中,延遲增強仍然可以繼續(xù)深挖,作為“基礎建設”承載未來更多細分場景下的互動化、個性化的“精神需求”。

 

同時延遲增強設計方法也可以橫向復用于廣告前卡、落地頁、IM工具等各種需要在合適時機抓取用戶注意的場景中,去追求點擊或者轉化的提升。甚至在未來可以嘗試其在長視頻或圖文場景中的應用。

文章來源:站酷   作者:MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務

互聯(lián)網(wǎng)金融產品——適老化設計分析

ui設計分享達人

雖然,三類互聯(lián)網(wǎng)老年人用戶模型之間各有差異,但我們發(fā)現(xiàn)他們最大的共性的特點在于具有開放的心態(tài)積極地接受更多理財新可能,因此我們也應該盡可能從交互視覺的角度或從產品功能的角度為老年群體提供更多樣化的互聯(lián)網(wǎng)理財參與方式,并且降低參與的門檻。因此我們得到以下適老化改造的策略方向:

(1)產品內容功能上充分考慮老年人對理財產品的認知以及期待

(2)交互視覺上充分考慮老年人感官、心理、認知上的特性

(3)技術規(guī)范上充分考慮如何利用技術便利用戶操作以及產品體驗設計的最大化落地



改進分析


根據(jù)過往產品設計經驗,我們提出線上金融服務設計的三大原則:

操控感:所見的是什么,剛剛干了什么,現(xiàn)在在干什么,接下來怎么做,可達成什么目標。

無障礙:適用于任何人群

安全感:資產保障安全感、使用體驗安全感

基于以上設計原則,結合本次適老化改造的策略方向,我們得到以下具體改進方向。



1. 設計原則拆解


操控感


能懂會用,可以有效減少老年人在使用線上產品時焦慮感和挫敗感。讓老年人知道看到的是什么,正在做什么,接下來要這么做,可以達成什么目標,這是在使用線上產品進行一切操作的基礎條件。


(1)簡潔的界面

大字體、大圖標、界面簡潔;老年人因其生理結構特征,很難輕易識別一些較小的文字、圖形;因此在界面設計的適老化改進上,需要簡化信息布局、放大圖形文字;


(2)清晰的導航

產品中的導航可以幫助用戶快速定位當前所在位置,剛剛在哪里,未來會到哪里去。清晰的導航有以下三大特點:

連貫性:頁面跳轉前后需有繼承關系,不光是文字,字體、顏色等視覺元素也可以加強關系

扁平化:盡量減少跳轉避免出現(xiàn)多層級,除了操作復雜之外,客戶使用時的記憶成本也較高

易記憶:無論導航的位置、描述、視覺元素,都應在用戶心智中穩(wěn)定固化,憑借記憶可以快速定位;

圖11:支付寶(關懷版)


(3)明確的語義

所有描述、狀態(tài)、操作盡量唯一且易于理解,符合老年人的基礎認知;


(4)及時地反饋

任何用戶操作行為都應有相應結果,對于極其敏感易焦慮的老年人群體來說更為重要,如加載、成功、失敗、異常情況等,且反饋內容應明確可被理解,即在各項流程結束后應給出含有明確反饋的流程結果頁面;對于學習和理解能力較弱的老年人而言,及時地反饋顯得更為重要;


(5)順暢的流程

復雜業(yè)務流程的任務對于老年人來說挑戰(zhàn)最大,失敗率也最高。除了與本身流程復雜,以及上述的語義不清、反饋不及時等可用性問題有關之外,流程體驗的閉環(huán)對于老年人群體而言也是極其重要。


無障礙


(1)輔助性功能

由于老年人的視力與協(xié)調能力開始下降,很難進行很復雜的交互動作。在線下場景中,老年人辦理業(yè)務時會有銀行工作人員在身邊進行輔助。同樣,在老年人使用APP時,產品也應起到輔助作用。常見做法有,線上客服、語音輸入輔助、使用說明和操作示范等;文本輸入提示,語音輸入等無障礙功能,用于提升方言識別能力,方便不會普通話的老年人使用智能設備;對智能客服入口的設置也不僅僅放在首頁,應輻射到盡可能多的頁面。

圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)人工客服頁


(2)低密度信息

對于老年人而言,即便是頁面內信息的層級非常清晰,高密度的信息仍會增加記憶負荷。因此在針對老年人的產品設計中,不應過度追求頁面效率,適當去掉形容性、專業(yè)性、技術性、營銷性、裝飾性的信息,將有助于信息降噪。


(3)簡化操作

降低老年人的輸入成本,例如合理規(guī)劃驗證碼出現(xiàn)機制,身份證信息、銀行卡號的圖像識別、自動保存常用聯(lián)系人等。


(4)產品適用性

市場上某些頭部的金融相關APP已經推出老年版本,如支付寶的關懷版,該版本不僅是字體、按鈕更大,更重要的是通過不同的信息功能架構,將不同年齡層的用戶客群做了產品注意力的重點區(qū)分,強調不同類型用戶的使用的場景不同,有助于將用戶的注意力鎖定在與其相關的業(yè)務上,提升用戶完成任務的效率。


安全感


(1)資產保障安全感

近些年有關老年人的金融詐騙層出不窮、人人自危,除了實際保障資產安全的措施之外,在服務設計層面上也需要保障和增強用戶安全感受。如在某些特定場景中,轉賬、匯款時,及時告知用戶可能存在的風險,大額時需要子女輔助驗證等;


(2)使用體驗安全感

在產品設計中需要考慮防錯和容錯機制,這有助于減少問題的發(fā)生,消除老年人使用產品時的恐懼感,讓用戶放心安全的使用產品。例如輸入金額時明確顯示單位,金融產品頁面強化顯示風險與收益,大額需要二次確認。

根據(jù)以上改進方向和原則,下面對目前產品的部分功能模塊和非功能模塊分別進行梳理和優(yōu)化,產出初步優(yōu)化方案和建議,并對其中部分具體功能的實現(xiàn)做技術分析和方案要求。




2. 具體功能優(yōu)化分析


2.1 基金賬戶類

涉及開戶流程、風險測評問卷、資料變更等板塊。需要適配改進的地方包括以下幾個方面:

(1)證件上傳

開戶證件OCR識別和上傳,對二代身份證的支持較為完備,對一代身份證和其他證件類型的支持不到位。老年人群體存在持一代身份證的可能性;

(2)開戶綁卡

開戶綁定銀行卡,基金公司支付渠道僅支持銀聯(lián)標志的銀行借記卡,對存折等非借記卡不支持;

(3)預留信息

央行反洗錢、CRS等合規(guī)要求對開戶資料預留信息字段作出了明確規(guī)定,其中部分字段不容易讓人理解和獲取,如賬戶實控人、電子郵箱等;

(4)風評問卷

關于風評問卷,目前題目數(shù)量較多,建議減少至5道題左右;

(5)密碼找回

增加多種找回密碼的途徑,如手機號、電子郵箱、手機短信。


2.2 基金交易類


涉及申購、贖回、專戶、分紅方式、定投等功能,需要適配改進的地方包括以下幾個方面:

(1)數(shù)字輸入

交易密碼金額等數(shù)字輸入場景,建議盡量調起九宮格數(shù)字鍵盤,字號較大且清晰;


(2)風險提示

購買環(huán)節(jié),按銷售適當性要求,醒目提示基金風險;

(3)限額

基金申購支付方式,適當提高支付限額,或引導匯款轉賬的方式,滿足大額申購場景。


2.3 查詢類


(1)在線客服

建議增加語音輸入和播報功能,同時醒目提示人工客服點擊按鈕;

(2)圖表查看

基金列表和詳情頁等頁面中包含圖表的,建議增加豎屏和橫屏切換按鈕,增加圖表易讀性;

(3)版本更新

新版本發(fā)布時,建議增加新功能示意遮罩,指引客戶如何使用新功能。



3. 非功能優(yōu)化分析


(1)色彩

用色簡潔干凈、對比柔和。減少復雜顏色、漸變顏色、極端飽和度顏色的使用,盡量使用純色、基礎漸變、稍微明亮的顏色作為圖標用色,關鍵互動界面避免使用藍色。

圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)功能列表頁


(2)文字

字體應使用黑體類型字體,且允許用戶自行調節(jié)或匹配手機系統(tǒng)字號,但最小字號不宜低于16px,多行文字顯示時行間距應為1.5倍字號大小,減少大量文字內容帶來的壓抑感;文字顏色使用不同透明度的黑色進行信息層級的區(qū)分,重要內容使用1~2種輔助性彩色作突出;


(3)圖標

圖標設計簡潔清晰,且需要有文字說明,避免使用過于抽象表意不明確的復雜圖標;


(4)布局

結合對老年人的認知及操作習慣,通過信息類型、展示頻率、重要性等方式進行歸類,形成合理的布局結構,通過這種行為塑造方式,讓用戶快速摸清產品形態(tài);

如下圖兩家銀行首頁布局由資產查看、常用功能金剛區(qū)、輪播圖、服務渠道、理財產品構成;在底部導航欄上只選擇展示兩個一級頁面以及突出顯示的語音助手入口。

圖13:工商銀行(幸福生活版)、中信銀行(幸福+版)首頁


(5)動效

有效的動畫可以給頁面帶來生命感,但如果濫用動效不僅會分散用戶注意力,嚴重的話對某些用戶來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激);

為了避免給特殊人群造成困擾,設計師考慮加入動效時應注意禁止使用高頻閃動、運動夸張、視差較大的動效,并且在同一界面也應控制運動元素數(shù)量,避免對用戶的閱覽和判斷產生困擾。


(6)無廣告

由于老年人對事物的認知和理解能力較慢,過多的廣告會嚴重分散用戶注意力,甚至導致誤操作造成經濟損失,尤其一些具有強誤導性的開屏廣告、營銷活動廣告等;建議減少廣告數(shù)量、杜絕惡意引導廣告,并針對廣告投放需設立專門的審查人員進行合規(guī)審查。



4. 技術規(guī)范要求


(1)按鈕熱區(qū)

對于文字按鈕需要保留較大的間距作為按鈕熱區(qū),避免老年人用戶操作時誤觸;


(2)版本切換

新增版本切換功能,建議將按鈕直接展示于首頁右上角,且要有文字進行圖形說明,便于老年人用戶理解且能直接進行操作;

現(xiàn)有APP采用架構為hybird app,基本的開發(fā)模式為:原生殼子+H5(vue),因此針對版本切換功能需要對APP架構進行調整,解決方案為對各項版本進行獨立開發(fā)或對原版本進行內置模塊開發(fā)。

其中,獨立版本開發(fā)優(yōu)點為各版本獨立、UI獨立、歷史包袱少;相應地,也提高了開發(fā)和維護成本;一些情況下多版本入口也會使用戶在使用上產生困惑;

內置模塊開發(fā),以模塊形式嵌入原生系統(tǒng)中。其優(yōu)點為成本相對較低,使用入口統(tǒng)一,缺點為歷史包袱過多、開發(fā)自由度較低、改造過程也受老系統(tǒng)所制約。


(3)語音識別

考慮到用戶群體對于文字輸入和閱讀的能力欠佳,針對查詢功能、鍵盤(數(shù)字)輸入、智能助手等功能,嵌入語音識別、語音輸入、語音播報等技術,優(yōu)化老年人用戶操作體驗。




結論


在互聯(lián)網(wǎng)日漸發(fā)達、金融逐步數(shù)字化的今天,越來越多的老年人群體嘗試著加入我們的步伐,他們構成了快速增長且日益富裕的目標受眾,但現(xiàn)實是,一些不恰當?shù)脑O計讓他們望而卻步,無法享受科技能夠帶給人類的利益;為此,我們需要關注和反省,我們所創(chuàng)造的、服務于人類的產品,也應該有能力來適應人類衰老的過程,而創(chuàng)造這項能力,也已經成為了肩負在我們身上的責任。

文章來源:站酷   作者:陳皮紅豆沙

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

純純

失敗的網(wǎng)頁設計各不相同,但是優(yōu)秀的網(wǎng)頁設計則有著共通的特點。你需要思考人們想要的是什么,什么東西能夠觸動他們,讓他們欲罷不能,無法忘懷。

聽起來似乎很簡單,不是嗎?取悅用戶的關鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術都能讓用戶愉悅,那些真正易于理解、便于使用、降低難度的技術、設計手法和抓人的視覺元素,才是一切的關鍵。下面總結的7項秘訣,會讓你的網(wǎng)頁脫穎而出的。

1、定制化

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

定制化,或者說個性化,是今天網(wǎng)頁設計中最典型的趨勢之一。用戶希望瀏覽網(wǎng)頁的時候獲得更加私人的瀏覽體驗,無論是玩頁游還是購物。

看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購買歷史的產品推薦,Netflix 則會推薦相關的作品、有待觀看的下一部,并且基于用戶 Twitter 上的內容來進行推薦。

每一個微小的自定義設計,都能讓用戶感覺這些用戶體驗設計是為他們而做的。同時,這種設計也會給用戶一種參與感和溝通的體驗,從而加深用戶的忠誠度。如此一來,用戶會更好地融入整個網(wǎng)站的用戶群或者社區(qū)。

2、簡練的動效

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

另外一個大熱的流行趨勢,就是動效設計。它不僅能為用戶帶來驚喜,而且具備強大的引導性。

動效設計的精髓在于簡單。令人頭暈或者不知所措的動效,應該不是你要的東西吧?動效應該是有目的性的,和其他所有的設計元素一樣,有針對性,達成目標是它存在的意義。

對動效或者說動畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯覺:迪士尼動畫》中,就詳細總結了創(chuàng)造今天動畫的12個原則:

·擠壓和拉伸
·預期
·登臺
·連續(xù)動作和姿態(tài)對應
·緩進緩出
·弧形運動
·次要動作
·時序
·夸張
·立體刻畫
·吸引力

3、使用約定俗成的設計模式

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

對于常見的問題,設計模式就是可靠且可復用的解決方案。簡而言之,最常見的信息和交互方式被整合到一個界面當中,比如點擊按鈕,滾動頁面,滑動解鎖,它們都是設計師模式。

你需要熟悉這些常見的設計模式,并且在設計界面和交互的時候將它們用進去。這符合用戶在體驗上的訴求,也是易用性的最基本構成。

同時你也要在自己的設計中創(chuàng)造設計模式,在不同的頁面中使用相同、相似或者規(guī)則化的設計,讓用戶習慣。比如,不同頁面中的CTA按鈕的色彩保持一致,卡片式的元素使用相同的樣式,等等等等。

4、給設計以性格

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

沒人會喜歡單調無聊的設計。你的網(wǎng)站應當同你的品牌保持一致的性格,擁有獨特的氣息。

要做到這一點,通常需要用到微妙走心的文案和親切自然的語調如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(請注意他們的文本和圖片是如何無縫地連接到一起的)

5、在屏幕內思考

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

用戶同網(wǎng)站交互都是在屏幕內進行的,無論是桌面端還是移動端,整個體驗都是圍繞著屏幕進行的。

這并不是一句廢話。屏幕是一個區(qū)域,它界定范疇,賦予概念,創(chuàng)造隱喻。這也解釋了為什么視差滾動和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個容器中,讓用戶隨之同下一個元素進行互動。

如何運用好這個概念其實并不是那么容易。一個屏幕內應當承載多少信息,需要仔細考慮。一個桌面端頁面所能承載的信息量在移動端屏幕上,可能需要劃分到幾個頁面當中去。

從屏幕的角度來考慮問題,可能會讓你的計劃更加龐大復雜,但是這種考量是有價值的,這種基于屏幕或者基于設備的考慮能讓用戶感覺更加便捷貼心。

6、一體化的內容和交互

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

視頻、游戲、測試都爭取讓用戶能與之進行互動,這種互動的目的在于驅動用戶參與到設計中來。用戶與界面交互的越多,用戶所獲得的體驗就越好。

不過,有趣的元素能讓這一切截然不同。

讓交互內容盡量簡單,不要牽扯太多,讓用戶可以一目了然,讓他們輕松獲得反饋的信息,不用在冗雜的體驗中淪陷。這其實和美劇的5分鐘原則有著異曲同工之妙。

7、輕松有序的設計

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

最后一個秘訣并非不重要,它甚至可以說是最基礎的原則:讓你的設計保持干凈、整潔和有序。使用柵格可以讓每一個頁面元素都有準確的位置。將響應式設計落實到每一個元素,能讓頁面能從一個設備兼容到另一個設備。

簡約風和極簡風能成為設計趨勢是有道理的。用戶可以更輕松理解這一切。簡約的視覺設計更容易交互。沒有復雜信息并且被精心設計的界面能更好地運作,賦予更好的體驗。

蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個典型案例。誰都可以拿起手機毫無障礙地開始玩兒,它設計簡單干凈,容易互動,視覺元素周圍有足夠的空間,無需擔心誤觸。同時,其他游戲所具備的東西它也有——有趣好玩,可以共享得分,能分享到社交媒體。

結語

界定一個網(wǎng)站的體驗與否有的時候并不是單一的標準,而今天所推薦的7條秘訣本身也更接近于基本的Guideline,了解用戶,熟悉趨勢才能提供優(yōu)秀的體驗。

文章來源:優(yōu)設  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔