請注意,對于非錯誤情況,您可以從同一本書中摘錄。例如,如果我刪除了某些內(nèi)容,但可以還原它,請告知我,帶有一行復制內(nèi)容,例如“您始終可以通過移至回收站并單擊還原來還原已刪除的項目?!?/div>
預(yù)期用戶錯誤的原理稱為poka-yoke原理。Poka-yoke是日語術(shù)語,翻譯為“防錯”。
5.快速提供反饋
在現(xiàn)實世界中,環(huán)境為我們提供了反饋。我們說話,而其他人則回應(yīng)(通常)。我們抓撓貓,貓會發(fā)出嘶嘶聲或嘶嘶聲(取決于貓的喜怒無常以及貓抓撓時的吸吮程度)。
數(shù)字接口常常無法提供太多回報,這使我們想知道是否應(yīng)該重新加載頁面,重新啟動筆記本電腦,還是只是將其彈出最近的可用窗口。
所以給我加載動畫。當我點擊該按鈕時,使其彈出并彈回,但不要過多。當我做某事時,給我一個虛擬的高五,我同意這太棒了。(感謝MailChimp。)
計劃或發(fā)送電子郵件時,MailChimp會提供反饋和鼓勵。
只要確保一切都快速進行即可。Usability.gov將超過1秒的任何延遲定義為中斷。超過10秒鐘,中斷。而且后者很慷慨:對于大約一半的美國人口來說,三秒鐘足以引起反彈。
如果頁面將在5秒鐘內(nèi)加載,請不要顯示進度條,因為它實際上會使加載時間看起來更長。而是使用不暗示進度的可視化效果,例如Mac臭名昭著的“死亡風車”。但這不是。如果確實在網(wǎng)站上使用進度條,請考慮嘗試一些視覺技巧以使加載看起來更快。
6.仔細考慮元素的放置和大小
菲茨定律是人機交互(HCI)的基本原理,它指出:
獲取目標的時間取決于目標的距離和大小。
換句話說:物體越近和/或越大,將光標(或手指)放在上面的速度就越快。顯然,這對交互和用戶界面設(shè)計技術(shù)具有各種含義,但是最重要的三個是:
將按鈕和其他“點擊目標”(如圖標和文本鏈接)設(shè)置得足夠大,以方便查看和點擊。這對于排版,菜單和其他鏈接列表尤為重要,因為空間不足將使人們一次又一次地點擊錯誤的鏈接。
將最常見操作的按鈕放大并突出顯示。
將導航(以及其他常見的交互式視覺元素,如搜索欄)放在屏幕的邊緣或角落。最后一個看上去似乎違反直覺,但它之所以有效,是因為它減少了對準確性的需求:用戶無需擔心過高的點擊目標。
在考慮元素放置和大小時,請始終牢記交互模型。如果您的網(wǎng)站需要水平滾動而不是垂直滾動,則需要考慮在何處以及如何將這種異常的交互類型提示用戶。
7.不要忽視標準
作為具有高度創(chuàng)造力的類型,設(shè)計師傾向于喜歡重塑事物,但這并不總是最好的主意。
為什么?因為熟悉的交互或界面的改進版本增加了“認知負擔”:它使人們重新考慮他們已經(jīng)學習的過程。顯然,您可以重新發(fā)明所有想要的輪子,但前提是要切實改進設(shè)計。
此經(jīng)驗法則解釋了為什么Google文檔的菜單欄幾乎具有與Vista之前的Microsoft Word相同的所有選項:
在Vista之前的Microsoft Word菜單欄。
?2015年Google文檔菜單欄
?
這也解釋了為什么幾年前Pocket必須更改其Android應(yīng)用程序中存檔按鈕的位置。
更改單個按鈕使其與Android的設(shè)計模式更加一致,使新用戶繼續(xù)使用Pocket的可能性增加了23%。
截止到2013年秋季,存檔按鈕位于屏幕的左上角,即Android設(shè)計規(guī)范所說的“向上”按鈕應(yīng)位于的右上角。Pocket希望人們將注意力集中在閱讀體驗上,而不是復制現(xiàn)有的硬件控制,但是這種不一致的位置導致新用戶不小心關(guān)閉并存檔了他們正在閱讀的文章,而不是簡單地按預(yù)期返回他們的閱讀列表。
這一微小的變化“使[新用戶]從現(xiàn)在起繼續(xù)使用Pocket的可能性增加了23%”。
8.使您的界面易于學習
在簡單性方面,人們經(jīng)常引用哈佛心理學家喬治·米勒(George Miller)發(fā)表的一篇論文,標題為“神奇的數(shù)字7,正負2:對我們處理信息能力的限制”。這篇文章建議人們在短期記憶中只能擁有5到9種東西,而沒有任何可靠性。米勒本人稱這是一個巧合,但這似乎并沒有阻止任何人引用他。
就是說,邏輯越簡單,在短期內(nèi)記住起來就越容易。因此,只要有可能,就限制一個人有效使用界面需要記住的事物數(shù)量。您可以通過對信息進行分塊來簡化此過程,即將其分成可消化的小塊。
這個想法與Tesler的“復雜性守恒定律”相吻合,該定律指出UI設(shè)計人員應(yīng)使其界面盡可能簡單。這可能意味著在可能的情況下掩蓋簡化界面后的應(yīng)用程序的復雜性。Microsoft Word是產(chǎn)品不遵守該法律的流行示例。
大多數(shù)人在Word中只做一些事情(例如鍵入),而其他人則可以使用它來做各種功能強大的事情。但是在世界各地,每個人都使用相同的UI打開相同版本的Word,而普通的Joe(不是超級用戶)會被他們可能永遠不會使用的各種選項所淹沒。
這導致了一個稱為漸進公開的概念,其中高級功能隱藏在輔助接口上。您經(jīng)常會在網(wǎng)站的首頁上看到此信息,其中短篇幅的副本介紹了產(chǎn)品或功能,然后鏈接到用戶可以了解更多信息的頁面。(這也是移動設(shè)計的實踐,在該設(shè)計中,強大的導航始終是一個挑戰(zhàn)。)
專家提示:避免在鏈接和按鈕中使用“了解更多”以及類似的非特定文本。為什么?因為它不會告訴用戶他們將“了解更多”的知識。通常,人們只是瀏覽頁面以尋找將他們帶到想要去的鏈接,而“學習更多”(重復15次)無濟于事。對于屏幕閱讀器的用戶來說尤其如此。
9.簡化決策
太多的網(wǎng)絡(luò)尖叫著我們:“橫幅廣告”突然擴展為全屏廣告。模式彈出,迫使我們訂閱我們還沒有機會閱讀的博客。視頻插頁式廣告將我們擋在了軌道上,迫使我們觀看寶貴的秒數(shù)。甚至不要讓我開始使用小部件,彈出按鈕,工具提示...
有時候,我渴望一個平靜的網(wǎng)絡(luò)-??怂苟山o了我們所有人建立一個網(wǎng)絡(luò)的理由。這個想法就像最終結(jié)果一樣簡單:向用戶展示的用戶界面選項越多,他們做出決定的難度就越大。
這幾乎影響了我們構(gòu)建的所有內(nèi)容:
整體布局
導航菜單
定價頁面
博客索引
內(nèi)容提要
清單繼續(xù)。但是結(jié)果是:我們進行的設(shè)計越簡單,用戶做出我們希望他們做出的決定的速度就越容易。這就是為什么登陸頁面和非新聞郵件僅應(yīng)號召采取行動的原因。
專家提示:有時,您實際上確實希望用戶放慢速度并考慮他們的選擇。這就是Pinterest,Dribbble和許多博客的平鋪設(shè)計實際上運行良好的原因。畢竟,您必須決定的選項越多,找到適合您的選項的可能性就越大。
10.聆聽數(shù)據(jù)
盡管我們都希望我們的設(shè)計純粹是根據(jù)其藝術(shù)價值進行評估,但現(xiàn)實是,優(yōu)化設(shè)計以實現(xiàn)其目標同樣重要。
盡管我們都希望我們的設(shè)計純粹是根據(jù)其藝術(shù)價值進行評估,但現(xiàn)實是,優(yōu)化設(shè)計以實現(xiàn)其目標同樣重要。
盡管用戶研究和測試在指導設(shè)計決策實現(xiàn)站點目標方面非常有用,但是啟動后收集的數(shù)據(jù)仍然非常寶貴。
因此,請為您的網(wǎng)站設(shè)置分析并定期進行分析。有很多不同的分析工具,但我建議根據(jù)項目類型使用Google Analytics(分析)和/或Mixpanel。
Mixpanel專注于事件,因此它根據(jù)訪問者在您的網(wǎng)站上執(zhí)行的操作來收集數(shù)據(jù),而Google Analytics(分析)則更具行為性,為您提供會話時間,訪問量來源等。雖然這兩種工具都可以提供兩種形式的數(shù)據(jù),但它們的確在閃耀他們的重點領(lǐng)域,因此請選擇最適合您的需求。
注意:這兩個工具最多可免費使用一定數(shù)量的數(shù)據(jù)點。Webflow和類似平臺通常通過簡單的API密鑰交換使分析設(shè)置變得容易。
Webflow網(wǎng)站中出色的交互設(shè)計
許多使用Webflow的設(shè)計師已應(yīng)用這些準則來構(gòu)建直觀且引人入勝的交互。這里有幾個例子。
展開圓圈導航
Waldo Broodryk創(chuàng)建了一個有趣的移動和桌面友好動畫菜單。在頁面加載時,右下方的圓圈顯示為“菜單”。單擊時,它會展開以顯示可用的頁面并更改為X,從而允許用戶關(guān)閉菜單并重新關(guān)注內(nèi)容。
這是一個清晰而引人入勝的設(shè)計的好組合,并且密切關(guān)注Fitts定律:最容易將鏈接定位到屏幕邊緣。當您不想在導航中隱含層次結(jié)構(gòu)時,循環(huán)導航是一個有趣的選擇。
你給那個女孩喝一杯嗎?
設(shè)計師Shane Hurt匯集了這個令人驚嘆的交互式?jīng)Q策樹,可幫助您決定是否向該女孩購買飲料。該設(shè)計包含大量內(nèi)容,但讓您專注于手頭的任務(wù):回答當前問題,然后繼續(xù)進行決策。Shane是保持界面簡單的方法。
優(yōu)衣庫重新設(shè)計
uniqlo替代主頁
一天,設(shè)計師Tim Noah在Uniqlo網(wǎng)站上購物時,他意識到他們的導航系統(tǒng)多么復雜和獨特。受此啟發(fā),他決定“ 以更加平板電腦和移動設(shè)備友好的方式重新創(chuàng)建它?!?/div>
我最喜歡的事情是他如何將Uniqlo的多級導航轉(zhuǎn)換為單頁體驗,該導航需要幾次單擊和頁面加載才能遍歷該品牌的實際桌面網(wǎng)站。(公平地說,優(yōu)衣庫在其移動網(wǎng)站上做同樣的事情,但這是一個移動子域,而不是其桌面網(wǎng)站的響應(yīng)版本。)
注意:此重新設(shè)計僅是個人項目,絕不與優(yōu)衣庫相關(guān)。
運動加速器
開始領(lǐng)導
2017年初,設(shè)計師Jaro Quastenberg開設(shè)了一個網(wǎng)站,該網(wǎng)站真正展示了Webflow中視覺交互的力量:Lead Sport Accelerator。
該站點確實具有上述兩個技巧。第一:了解您的用戶。Lead Sports Accelerator知道他們正在努力吸引產(chǎn)品制造商,為此,他們必須通過其網(wǎng)站給人留下深刻的第一印象。第二是提供反饋。無論您是滾動,懸停還是單擊頁面上的元素,它都會立即以生動有趣的方式響應(yīng)訪問者的動作。
從菜單到滾動交互–這是關(guān)于某些人認為是藝術(shù)作品的優(yōu)化功能的一個很好的例子。
好的,您已經(jīng)掌握了基礎(chǔ)知識
現(xiàn)在繼續(xù)制作一些華麗的可用界面。并且隨時可以分享您在評論中在全球范圍內(nèi)看到的和最差的
UI設(shè)計示例。
新聞標題:成都搭建網(wǎng)站費用
文章URL:http://jinyejixie.com/news8/174408.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、小程序開發(fā)、網(wǎng)站設(shè)計、用戶體驗、ChatGPT、全網(wǎng)營銷推廣
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)