設計交互-用戶體驗之心得篇

設計交互-用戶體驗之心得篇

1.為什麼用戶使用對齊標籤填寫表單的速度更快

想像一下,一個用戶已經準備好註冊您的站點了。他們會進入你的表格並輸入他們的信息。字段標籤對齊的方式會影響用戶填寫表單的速度。

你是想給用戶提舒適體驗,還是想給他們一個麻煩?

如果您想讓他們的體驗更快更容易,請使用輸入框上面的字段對齊標籤.或輸入框內的對齊標籤模式。

與左對齊和右對齊的標籤相比,頂部對齊或內部左對齊標籤填寫起來更快、更容易。這是因為頂級標籤只需要有一半多的視覺固定物。

頂部對齊標籤還允許用戶以一個可視方向向下移動輸入框。左對齊和右對齊的標籤需要兩個視覺指示才能填寫。

頂部對齊標籤的唯一缺點是,它們可以使表單變得很長。但是現在用戶滾動的頻率越來越高,所以這不是問題。

通過減少字段之間的空白,可以減少表單長度。您還可以將表單拆分成多個頁面,以使表單更短。

頂部和左/右對齊標籤之間的差異很明顯。頂部對齊標籤更容易在眼睛上,並使表格更容易填寫。雖然他們可以使表單更長,

但用戶將從完成表單所需的時間和精力的減少中獲益更多。

如果頂部對齊的標籤能夠給用戶提供更好的表單體驗,那麼它是值得採用的。設計師應該更多地考慮他們的字段標籤對齊。

它可以區別於用戶填寫表單還是放棄表單。

2.為什麼對話框中的“確認”按鈕在右邊工作得最好

有很多設計經常會問我一些關於按鈕上的問題那我今天也來獻醜講以下我對按鈕的一些理解,這段時間針對這些東西研究了很久,在對話框中放置“確認”和“取消”按鈕的位置。 “確認”按鈕是完成任務的主要操作。

“取消”按鈕是在沒有完成任務的情況下將用戶帶回原來屏幕的輔助動作。

根據它們的功能,最好的順序是什麼? “確定”按鈕應該出現在“取消”按鈕之前還是之後?

許多人提到了以下幾點平台約定作為答案。雖然這似乎是一個解決問題的方法,但實際上並非如此。它不能回答哪個位置對用戶更好,以及為什麼。為了一致性而遵循平台慣例的建議是不夠好的,給設計師留下了空手而歸的機會。

“一致性”是設計師們常用的一個詞。不深入考慮用戶面臨的設計問題也是一個流行的藉口。如果一個人不知道為什麼會存在,遵循設計慣例有什麼好處呢?

如果某個設計約定對用戶有害呢?設計師應該為了一致性而盲目地遵循嗎?糟糕的設計實踐是否應該持續下去,因為設計師們希望通過平台設計的一致性來解決每一個問題?

今天,有一些平台設計約定被廣泛使用,因為它們是為用戶工作的。但這裡的要點是,平台設計的一致性永遠不應該讓設計師滿意,因為這是做某事的唯一理由。理解為什麼您應該以一種方式而不是另一種方式來設計您的用戶界面的原因是關鍵。

按鈕放置事項

人們可能會說,讓你的動作按鈕突出給它更多的視覺重量和一個清晰清晰的標籤比它的位置更重要。雖然動作按鈕的視覺重量和標籤是一個重要的設計方面需要考慮,但它不是唯一的方面。

只關註一個設計方面而不是其他方面是一個粗心的設計師的行為。一絲不苟的設計師會思考每個設計方面是如何影響用戶的。

對於設計師來說,最難搞清楚的是主動作和次要動作是如何放置的。這就是為什麼“確認”/“取消”按鈕的爭論在設計師中如此流行的原因。

為什麼'確認'按鈕在右邊工作得最好?

當你通過了平台慣例的爭論後,你會質疑哪個位置最有效。您可以通過分析設計如何影響用戶來解決這個問題。

減少視覺固定

一些設計師認為,在第二個操作之前將主操作放在左邊對用戶更好,因為它更接近,因此,點擊的時間更少。

這是有意義的,但您不能忽視這樣一個事實,即用戶在選擇要採取的操作之前將查看他們的所有選項。

這意味著大多數用戶不會盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。

他們將首先看到左邊的主要動作,然後查看右邊的次要動作。然後,他們會把眼睛移回主要的動作,點擊它。這將在多個方向上總共創建三個視覺固定。

將其與放置在對話框右側的主操作和放置在左側的輔助操作進行比較。用戶從第二個動作的眼睛開始,然後將眼睛移到主動作上單擊按鈕。這在一個方向上總共創建了兩個視覺固定,給用戶一個更快的視覺流。

用戶只關注每個按鈕一次,並在主動作按鈕上結束。將主操作放在左邊可能會使用戶更容易到達,但是當您從用戶的思維過程和視覺固定的角度來看速度時,將主操作放置在對話框的右側實際上更快。

用戶點擊或操作按鈕的心裡狀態

當用戶單擊輔助操作按鈕時,他們期望應用程序什麼也不做,並將它們帶回到原來的屏幕。因此,“取消”按鈕的功能類似於“後退”按鈕。

當用戶單擊主操作按鈕時,他們期望應用程序執行按鈕所述的操作,並將其轉到下一個屏幕。因此,“確認”按鈕的功能類似於“下一頁”按鈕。將輔助動作按鈕放置在左側,主動作按鈕在右邊映射到用戶可以期待的'後退'和'下一步'按鈕功能。

它類似於分頁按鈕的放置方式。將用戶帶到下一頁的按鈕位於右側,將用戶帶回其早期頁面的按鈕位於左側。這個按鈕的放置工作是因為它映射到用戶從左到右的閱讀和導航方向,其中右是前進的方向,左是後退的方向。

對話框中的“確認”和“取消”按鈕應該遵循類似的交互模式,因為它們的功能類似於分頁按鈕。

不僅如此,在中國用戶習慣了左右方向的模式。

將您的主要操作放在右側,將次要操作放置在左側,將使您的對話框按鈕更容易、更直觀地為用戶所理解。

為用戶提供更有效的視覺流暢度

將您的按鈕放置在終端區域可以讓用戶看到他們最後需要採取的主要操作。這不僅改善了視覺流,也改善了任務流。

用戶在掃描時不會跳過主動作按鈕。當他們通過時,他們的眼睛就會盯著它,所以他們可以立刻點擊它。

按鈕放置在中間還是放置在左右兩邊?

另一個問題是設計師經常想知道他們是應該把按鈕放在角落裡,還是把它們放在一起。當您將主操作和輔助操作放置在對話框

的角中時,它將很好地映射到左右方向。但是,由於'取消'和'確認'按鈕不是導航按鈕,所以沒有必要遵循方向映射。有時它弊大於利。

如果應用程序要執行用戶無法撤消的關鍵操作,那麼用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下,“取消”按鈕的功能可能像“先前”按鈕,但更重要的是,因為它充當安全按鈕,以防止任何更改。

在左下角放置“取消”按鈕的危險是,由於兩個按鈕之間的視覺分隔很大,它可能導致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起,可以使用戶更容易在一次凝視中查看和比較這兩個動作,從而選擇最佳的操作和點擊。

我們經常卸載軟件的時候一不留神就會點錯,或者是我們在裝某一個軟件的時候全家桶一擁而上。所以在不同場景當中我們所用的按鈕形態也是不一致的。

3.下拉菜單加圖標和不加圖標的區分在哪裡!

大的側邊欄菜單甚至會讓用戶看起來很不雙我們應當如何解決這一個問題。

其原因是設計人師在做顯示菜單項的時候會出現的問題。

當它們都有相同的視覺處理時,菜單項很難進行識別與區分。

如果不修復這個問題,會導致用戶放慢他的瀏覽速度從而導致用戶的流失在大的層面來講,小的層面來講閱讀不爽導致關閉頁面。

菜單欄沒有主次之分

當您對菜單項進行全文本或全圖標處理時,問題就會出現.當用戶掃描他們想要的項目時,他們的注意力分散在菜單周圍。這是因為沒有層次來吸引他們的注意力。

通過將用戶的注意力引導到您的主要項目,使您的菜單可掃描。

要實現這一點,我們可以看下面設計形式來強調重點內容

主項圖標

與其在每個菜單項上放置圖標,還不如將其放置在主菜單項上。視覺強調首先將用戶的注意力引導到這些項目上。

次要項目上缺少圖標,這使得它們能夠得到其餘的關注。

略大一點的圖標

如果要使所有圖標處,請稍微放大需要突出的圖標。

稍微的增大會使視覺效果有很大的不同,同時字形更容易辨認,每一行的線高也會增加。讓整個看起來更加有空間感一些。

讓用戶瀏覽閱讀起來也會更加舒暢一些。

4.在按鈕上避免顏色對比度錯誤

想像一下,當用戶在您的界面上遇到一對按鈕時,他們猶豫不決。

用戶向左看,然後向右看,比較它們。經過一番思考,他們做出了選擇。

他們的選擇按鈕做出決定,而且不確定,因為你的按鈕沒有層次結構。

不要使用相同的顏色輪廓按鈕

甚多的設計師設通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來可能不一樣,但還不夠。

他們仍然會競爭,因為他們的顏色對比度相等。

為了給主按鈕更多的注意,削弱輪廓按鈕的對比度。與其使用重顏色,不如使用它的色調。你可以通過降低重顏色的亮度和飽和度來製作。確保對比度足夠高,以達到主要的按鈕突出性。

不要使用黑色輔助按鈕

設計師的另一個趨勢是把第二個按鈕變成黑色。他們認為,使用中性的顏色,它是不會競爭的。然而,黑色按鈕更為突出,因為它有一個更高的對比度。

不要使用黑色,而要使用重顏色的色調,以使輔助按鈕比主按鈕更弱。要做到這一點,增加亮度和降低飽和水平。

不要在主色調上使用淺色

將彩色按鈕與中性灰色配對並不總是意味著彩色按鈕會得到更多的關注。如果主按鈕的顏色太輕,則中性輔助按鈕將更加突出

要避免這一錯誤,請選擇不太明亮的顏色。明亮的顏色可能看起來很有吸引力,但它與白色背景或文字的對比不太好。在主按鈕上使用更暗的顏色,這樣第二個按鈕就不會引起注意。

5.複選框的設計與使用方式哪種更好

在界面上使用複選框之前,您必須先問自己幾個問題。複選框是否是在此上下文中使用的正確組件?如果是的話,最有用的顯示方式是什麼?

許多設計師沒有問這些問題,自動使用複選框,沒有太多的事先考慮。

因此,它們通過在錯誤的上下文中使用它們而產生可用性問題。

不僅如此,許多設計人員都很懶惰,期望前端寫成默認選框完成這項工作,而不是

自定義復選框設計。但問題是,前端默認的複選框不能完成這項工作,因為它們的

可用性很差。

大多數設計人員在復選框上會犯的幾個可用性錯誤,這些錯誤會破壞用戶體驗。

單選與重複的選擇

在設計當中我們經常會遇到做選擇性的勾選,往往很多設計師會犯的一些錯誤問題和選擇障礙問題。

通過更大的目標來明確與用戶進行選擇更為明確

我們設計單選框的時候這不是秘密而是讓用戶做出選擇,複選框是很難點擊,因為他們的小擊中目標。

設計師通常會讓標籤點擊,但如果它不是直觀的,那也於事無補。

通過將復選框轉換為複選標記,您可以為用戶提供更大的命中目標和更清晰的交互提示。

重複物品的重量及數量選擇

有時你可能想提供不同數量的商品。使用多個複選框複製它會產生更多的文本來讀取,並使界面混亂,且讓用戶難以進行選擇。對於增量輸入更改使用數字選擇器一次顯示該項會為更好些。

undefined

總結以上兩點,實際商用應用案例如下所示

6.在設計當中我們該如何控制內容的突出性與閱讀性

新聞卡片的設計怎麼才能突出信息內容

卡片內容有幾種文本類型,提供不同的信息功能。讓我們看看基本內容卡的文本類型。

首先是眉毛,它是一個明確的詞或短語,用來描述內容的主題。

還有一個標題,它用一個句子中的幾個單詞告訴用戶內容是關於什麼的。

在此之後,就會有一個描述內容的正文。

最後,就是時間與操作的按鈕

必須通過確定哪些文本類型對用戶更重要,從而為您的卡片新聞建立文本層次結構。

此內容新聞卡片的適當文本層次結構為:

1.眉毛-可以是時間,可以是新聞分類

2.標題-最重要的是,因為它描述的內容最快。

3.正文-包含一個描述性段落,但閱讀時間最長。

4.描述內容的正文對內內容的簡要描述。

您的內容卡應指導用戶按此順序瀏覽文本類型。要實現這一點,您需要使用瀏覽控制對文本類型應用適當的視覺強調。

控制用戶的瀏覽順序

通過適當的視覺強調,可以控制用戶瀏覽的順序,並指定反映文本層次結構的瀏覽模式。

當掃描遵循文本層次結構時,用戶會浪費更少的眼球運動,並且可以更快地處理信息。

下面的示例說明了瀏覽控制如何讓眼球工作比較。不同的是強調不同的文本類型。

其他文本類型具有相同的強調度,這使得它們爭奪用戶的注意力。

其他設計形式及瀏覽方式

在內容顏色的控制上我們可以為三種,重要的突出的需要用戶重點進行關注的就用黑色

例如:#333333 #222222 #454545 等等色值

在不需要突出的內容上我們可以用稍微淺一點的色值保證用戶能夠進行閱讀即可,

例如:#999999 #787878 #666666 等等色值更加容易記住

其他輔助的內容表達比內容正文更淺

例如:#bbbbbb #A8A8A8 等等色值

說到這裡我要說一用戶體驗關於文字的事情如果做出來的設計文字是給自己看的隨意設計讀沒人會說你,有句話說的好:現在

是內容為王的時代,如果在內容上不夠吸引或者顏色不夠吸引眼球那就是一個很失敗的案例。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。