于網頁上的每個動作,都應該有一個反應。反饋可以告訴用戶操作是否成功,但是理想情況下,它可以告訴用戶更多信息,例如下一步要做什么或操作為什么需要這么長時間。
您可能遇到了提交表單的情況。單擊提交按鈕后,沒有任何反應。表格提交了嗎?可能表單提交失敗。
這是一個很好的例子,反饋可以消除用戶的任何疑問或恐懼。一個簡單的進度指示器可以解決此問題。它會在視覺上告訴用戶服務器已經收到該表格并正在積極地處理它。
不提供反饋會引起很多麻煩。例如,我們提交了表單,但沒有收到任何反饋。以下情況是可能的:
本文探討了反饋的重要性,提供反饋的常見UI元素以及反饋的好例子。
用戶界面響應動作。這就是我們所定義的反饋。反饋用于吸引,解釋和消除恐懼或困惑,所有這些都可以提高用戶滿意度。
您遇到的大多數反饋對于用戶界面都是可視的。對于游戲或其他類型的內容,用戶反饋可以采取聽覺反饋的形式。讓我們關注視覺反饋。
視覺反饋有三個主要目標,詳細說明如下。
通常不清楚元素是否可單擊。因此,將鼠標懸停在按鈕上時,它們會實現視覺反饋。當用戶懸停Web元素時,網站設計人員使用CSS:hover選擇器來應用不同的樣式。我們都知道示例,當您將鼠標懸停在按鈕上時,按鈕的顏色會發生變化。
這種反饋形式對于告訴用戶他們可以與元素進行交互非常重要。沒有它,用戶必須猜測哪些元素可以參與。但是請記住,觸摸設備的用戶無法利用懸停效果。
反饋不僅表示行動的結果。它還可以指導用戶。視覺效果將用戶的注意力吸引到特定的UI元素上,并鼓勵用戶單擊它。因此,您可以使用視覺反饋來告訴用戶下一步該做什么。
假設您想增加訂閱電子報的用戶數量。如何在注冊表單中添加一些視覺提示呢?例如,當時事通訊表單可見時,使“提交”按鈕短暫搖動以吸引用戶的注意。這是增加參與度的一種簡單而有效的技術。
最后,反饋對告訴用戶正在發生的事情最有幫助。如網站表單示例中所述,進度指示器會告訴用戶表單提交已被服務器接收并正在由服務器處理。
這是最關鍵的反饋形式!一個動作總是需要反應。缺乏反饋是用戶與應用程序交互的困惑或恐懼的主要原因。最重要的是,反饋可以消除混亂,從而改善用戶體驗。
以下是提供反饋及其使用的常見Web元素列表。
提供出色的用戶體驗是關鍵。用戶體驗通常會推動銷售。例如,讓用戶知道他們在結帳過程中要執行的步驟。面包屑是向用戶提供快速反饋的強大工具。
同樣,反饋有助于消除混亂或擔心該過程將花費多長時間。用戶可以知道他們必須完成哪些步驟才能有效地購買產品,它為用戶提供了指引。
本文顯示了反饋的重要性以及您可以實施以提供用戶反饋的標準UI元素。反饋的最基本的UI元素之一是進度指示器。這是消除用戶對流程的任何恐懼或困惑的好工具。
請記住,您可以通過各種方式使用反饋。除了發出信號活動之外,您還可以提高網站參與度或信號響應能力。
用戶運營過程中,經常會遇到這樣一個問題,用戶的反饋信息和用戶真實行為并不一致,他們所講述的需求和真實需求并不一樣,比如,面對網絡購票混亂,黃牛搶票猖獗的問題,多數用戶都希望12306使用技術手段防止黃牛利用軟件搶票,但是當復雜的驗證碼在購票過程中出現時,人們似乎并不在乎黃牛搶票的問題了,而是想要更加便捷的登錄方式。那為什么用戶所說的和實際不一樣呢?通過了解用戶所說與其實際所做不一致背后的真正原因,搞清楚影響用戶行為的因素,也許會幫助我們提高用戶反饋的真實性。
人并不是完全理性的動物,情感、情緒、認知都會影響到人的行為,以下的幾種影響因素最為常見。
一、從眾
從眾效應是影響用戶行為的一個重要因素,所謂的從眾,就是個體受到群體的影響,從而和他人保持一致。在現實生活中,從眾的例子有很多,記得有一次去游樂園玩,當時走在園區內,看到一條排的很長的隊伍,站到隊伍的末端根本沒法看清人們到底是為了什么排隊,于是我就問我前面的那個游客大家都在排隊買什么,沒想到他竟然跟我說他也不知道,只是先排著,這位游客的行為就是一種典型的從眾行為,很多人在排隊似乎就暗示著前方有吸引人的東西,從而在心里上影響了個人。這種情況在現實生活中很常見,再比如很多時候我們購買東西并不是因為東西有多好,而是看到了很多人都在為了購買這樣東西排隊,從而影響了自己。
因此,在對用戶使用情況進行調研的過程中,盡量安排用戶進行一對一的信息反饋,最大程度上降低群體對個人的影響,減少從眾現象的發生。
二、自信
當面對某件事情的時候,人們都會認為自己如何如何。比如,在事業中,多數人都認為自己事業很成功。對于婚姻,絕大多數人都認為自己婚姻幸福。面對困難,多數人都會認為自己能夠克服。面對事業和生活,人們總是會展現出自己自信的一面,認為自己比別人強,那么這種情況下,必然會出現自我認知和實際水平不符的情況,一旦這種情況出現在技術人員對用戶使用情況進行調研的過程中,最終很可能出現用戶的反饋信息和用戶真實行為不一致。為了盡可能避免這個問題,當技術人員在對用戶使用情況進行調研的時候,調研的內容要針對當下真實的場景,詢問用戶是怎么做的,針對當前已經出現的問題,用戶的真實行為和感受是什么。
三、情緒
人的情緒對人的行為有很大的影響,情緒有很多,包括喜、怒、憂、思、悲、恐、驚七種。行為在身體動作上表現的越強就說明其情緒越強,如喜會是手舞足蹈、怒會是咬牙切齒、憂會是茶飯不思、悲會是痛心疾首等等就是情緒在身體動作上的反應。在真實的環境中,人們的情緒各不相同,比如外部環境安靜或者嘈雜,用戶使用產品的心情是完全不同的。再比如,12306復雜的驗證碼帶給人們的挫敗感,導致多數用戶對驗證功能評價極差。所以技術人員在對用戶使用情況進行調研的時候,要盡量還原真實的外部使用環境和真實的使用過程,做到不影響用戶的情緒和心態。
總之,用戶調研就是要盡可能的還原用戶在真實環境下的真實使用情況,進行一對一的信息反饋,避免他人的影響,問題客觀公正不帶有任何傾向。只有這樣,反饋結果才能和用戶真實行為保持一致。
來源:崇立鑫博客(微信公眾號:clxzmt QQ號:2042669521),原創文章如轉載,請注明本文出處!http://www.chonglixin.com/531.html
眾號【傳智播客博學谷】回復關鍵詞:前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料!
一、HTML
1、<image>標簽上title屬性與alt屬性的區別是什么?
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶,視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽:文字加粗、下標、居中、字體
加粗:<b>、<strong>
下標:<sub>
居中:<center>
字體:<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽,并說明其語義和應用場景
section:定義文檔中的一個章節
nav:定義只包含導航鏈接的章節
header:定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer:定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside:定義和頁面內容關聯度較低的內容——如果被刪除,剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解?
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重;
c. 方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;
d. 便于團隊開發和維護,語義化更具可讀性,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?
聲明位于文檔中的最前面,處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是,以該瀏覽器支持的最高標準運行。
在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型?
標簽可聲明三種 DTD 類型,分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型:Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型:Strict、Transitional 以及 Frameset。
Standards (標準)模式(也就是嚴格呈現模式)用于呈現遵循最新標準的網頁,
Quirks(包容)模式(也就是松散呈現模式或者兼容模式)用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素?
a. HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽(header,nav,footer,aside,article,section)
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件,calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素:
a. 純表現的元素:basefont,big,center, s,strike,tt,u;
b. 對可用性產生負面影響的元素:frame,frameset,noframes;
9、iframe的優缺點?
優點:
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點:
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面,不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么?它和Standards模式有什么區別?
在寫程序時我們也會經常遇到這樣的問題,如何保證原來的接口不變,又提供更強大的功能,尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD,所以IE6就假定 如果寫了DTD,就意味著這個頁面將采用對CSS支持更好的布局,而如果沒有,則采用兼容之前的布局方式。這就是Quirks模式(怪癖模式,詭異模式,怪異模式)。
區別:總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型:在W3C標準中,如果設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬:在Standards模式下,給等行內元素設置wdith和height都不會生效,而在quirks模式下,則會生效。
c. 設置百分比的高度:在standards模式下,一個元素的高度是由其包含的內容來決定的,如果父元素沒有設置百分比的高度,子元素設置一個百分比的高度是無效的用
d. 設置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套,比如table>tr>td>h3,會導致搜索引擎讀取困難,而且,最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差,比如要將tr設置border等屬性,是不行的,得通過td
c. 代碼臃腫,當在table中套用table的時候,閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan,用來布局時,頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好?》
12、簡述一下src與href的區別
src用于替換當前元素;href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫,指向外部資源的位置,指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫,指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接
公眾號【傳智播客博學谷】回復關鍵詞:前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。