令人厭煩的種種模態

模態指主頁面上臨時彈出的彈窗,讓主頁面處於不可操作的狀態,在彈窗層進行相應交互後方可返回主頁面。模態彈窗最初應用於PC端軟件、網頁,如今模態彈窗在移動端也得到廣泛應用。但模態一直是產品設計者有爭議的話題之一,不恰當的使用會對產品用戶體驗產生破壞

模態

模態存在本身就是破壞用戶操作流。流(flow):當人們全身心投入某個活動時,會對周邊視而不見。這種狀態稱爲“流”。(摘自《流:最優體驗的心理學》)而模態出現就是在用戶操作流過程中被打斷。因爲用戶按照這樣的流進行操作流程不符合程序的輸入規範或者達不到自身預期結果,還有程序目前不能讓用戶進行操作的狀態等。例如一些被動的模態在註冊賬戶時會有提示賬戶名稱必須是多少位,密碼錯誤會有提示錯誤或者是否忘記密碼,程序在加載中等等。再例如一些主動的模態,用戶在用手機買東西在主屏上找不到想要的物品,這時會主動調出模態窗進行篩選(亞馬遜就是這麼做的)。

不恰當的模態破壞體驗

不恰當的調出模態彈窗,尤其是在用戶被動情況下非常讓人惱火。當我的設備網絡不佳進入到一個頁面總有一個大大的加載黑框擋在頁面前面,難道你就是想讓我看這個?登錄一個賬號時又出現一個大大的黑框“正在登錄中”,難道我不知道我在登錄嗎?當我輸入信息錯誤又彈出個模態窗,作爲一個爲我服務的軟件爲什麼要這麼強勢的數落我?

不要站在實現模型上設計產品

有些程序不停的告知用戶當前程序的進度,“正在登錄”“記錄已保存”“內容已更新”等等。這些對於程序來說十分重要,出現了這些提示表示一切運行正常,輸入信息執行操作返回信息,程序員們很喜歡看到這些。但這些程序上的瑣事用戶並不關心,他們只想看到結果。所以不要頻繁的用模態來告知用戶當前程序的進程如何從而打擾用戶使用過程。

面對模態彈窗無所事事

用戶在等待加載的過程中只會看待一個大大的“正在加載”模態彈窗無疑增加了用戶等待時間。人在忙碌、有事情做的時候感覺時間過得很快(《100 Things Every Designer Needs to Know About People》裏面對這個理論有很好的證明),所以不要在屏幕中只顯示一個單調的模態彈窗讓用戶無所事事的等待,這樣等待3s用戶都會覺得是一年。

蠻橫的模態讓用戶交出了控制權

人們需要感受到一些盡在控制中,並且希望有更多選擇。人都會犯錯而不恰當的模態抓住用戶錯誤不放,錯一次我彈你一次讓用戶覺得程序凌駕於自身來數落自己而不是用合理的引導來改正錯誤;更有甚者用戶操作後彈出模態,之後只能等模態消失並不能進行其他操作極大的限制了用戶使用自由(當然這種情況有些是必要的,如在進行匯款付費的時候),這都會讓用戶覺得他已經喪失了對軟件的控制能力。

使用其他方式替代不恰當的模態

多使用狀態來報告進程

不要一遍遍的用彈窗來報告用戶現在程序進行到哪了,用戶用軟件是有事情要處理沒空看你的報告,多使用頁面不同狀態的樣式來告知用戶。如:“無法連接服務器”不要報告給用戶,在頁面內容上體現無法連接的狀態樣式,把網絡關掉看看微信是怎樣提示網絡故障的。

讓用戶有內容可以看

有趣味性的加載樣式

很多軟件採用有趣味性的加載動畫,在設計平臺上搜索這些內容會有很多(設計師們彷彿樂此不疲拿加載動畫來炫技)。目的就是讓未加載的空頁面有內容可以看,打發這無所事事的等待時間,優秀的動畫顯示三秒消失後可能用戶還覺得沒看夠。

Flicker
Drippler

顯示一部分緩存內容或採用分步加載

當頁面內容很多往往先顯示出來一部分內容讓用戶有東西可以看,別急,接下來的內容馬上就加載出來了。Medium是個典型的例子。

Medium個人主頁第一步先加載出title
第二部加載出個人的歷史記錄

更高級的空白頁展示樣式

頁面沒有加載出來並不顯示空白的頁面,而是顯示內容前期的雛形和結構樣式,產生一種內容已經加載出來只是沒完全顯示的錯覺。

Facebook的加載過程中顯示了內容的結構樣式
Pinterest的加載過程中顯示了圖片的主色調

提供無模態反饋

綜合以上幾點其實通知用戶的最好方式就是無模態反饋,將提示狀態直接在頁面中顯示。並不刻意將用戶的注意力強行拉到跳出的模態彈窗上,而是保留在操作的頁面上,直接在當前界面反饋結果。用戶可以修改,可以返回可以掌控程序的進程。

Facebook的登錄請求
Tumblr的郵箱驗證提示
MD的報錯設計規範

最後在產品設計中謹慎使用讓用戶跳出當前頁進入模態的情形會大大提高產品的友善度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章