頁面打開方式作為鏈接產品路徑的基礎,在設計的過程中,或多或少都會遇到選擇的困擾,尤其是產品功能復雜,層級較多時,如何讓用戶按照自己的意願清晰的瀏覽信息,保持操作連貫性,是值得體驗設計仔細思考與分析的。
近期在所負責的設計項目中,團隊對鏈接操作的打開方式產生了分歧,借此機會整理了壹些案例與資料,就這個問題進行分析探討,也給遇到同樣問題的同行壹些參考意見。
壹、頁面打開方式的類型
網頁中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設計中常用的打開方式則主要有以下三種:
1. 當前頁打開
點擊操作鏈接後,在當前的瀏覽器頁面中進行內容顯示與操作。
[caption id="attachment_294110" align="alignnone" width="1199"]
極創課堂 頁面打開 交互方式 最全面的總結!交互設計[/caption]
2. 新開頁面
點擊操作鏈接後,在瀏覽器中新開壹個獨立的標簽頁面,進行內容顯示與操作。
3. 彈出框
點擊操作鏈接後,在當前的瀏覽器頁面中,彈出壹個小尺寸的對話框,進行內容顯示與操作。
二、當前頁打開 & 新開頁面
首先來說說最具爭議的新開頁面&當前頁打開。在 HTML語言中,target目標有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當前窗口打開」,下圖是這兩個參數的屬性描述。
從這兩個參數的屬性上來看,「當前窗口打開」是系統默認的處理方式。這個打開方式在國外的網站中實現方式比較統壹,用戶也形成了壹致的習慣,但國內的形式則不盡相同,以至於壹直頗具爭議,不同類型網站之間、同壹網站不同場景之間也沒有壹個明確的規則標準可供大家學習和參照。
針對這個問題的討論,可以聽到兩種不同的用戶聲音,並且都站在各自的角度闡述其道理。]
舉個例子,我們以同類型網站(淘寶和亞馬遜)的打開處理方式進行對比,來看壹下用戶習慣、功能場景對鏈接打開方式選擇的影響。
首先,我們確定壹致的功能場景:用戶從首頁中根據各種篩選條件,查找到心儀的商品。來看壹下兩個網站的處理方式:
可以看出基本是兩個極端,差異非常明顯,再來看個有意思的現象,亞馬遜中國的商品搜索方式竟然又和淘寶壹致了,難道鏈接打開方式的差異竟是中外用戶習慣的差異?
這確實占了很大壹部分原因,那麽造成這種差異的原因主要有:
早期的 W3C標準不支持 target=”_blank”(HTML語言中,在新窗口中打開鏈接)的屬性,國外互聯網普及也比國內早,於是用戶慢慢養成了習慣。
默認當前頁面打開讓國外用戶覺得更有「禮貌」。如果用戶想新開頁面,可以鼠標中鍵、按住ctrl點擊鏈接或者右鍵新窗口打開,此時用戶更有選擇權,可以自己決定打開方式;如果默認新開頁面,則讓用戶失去了選擇權。
早期國內互聯網發展較為浮躁,網站想通過新標簽頁打開方式,提高PV。
國內網絡普及晚,部分用戶尤其很多老年人不習慣甚至或許不知道,頁中有個後退前進按鈕、面包屑可用,新開頁面便於他們的操作。
那麽,淘寶中所有的頁面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當前頁打開。
同壹個產品內部,如此區別設計的原因我認為有:
用戶的目的較為明確,查找對象確定。(用戶想要查看的對象是確定的,如購物車中的產品,用戶有明確的目標,找到鏈接打開頁面即可,不像搜索查找商品,需要壹步步縮小範圍甚至比對查看)
鏈接入口常駐在網站的信息欄,用戶可以隨時切換,操作方便,且不存在重新輸入的成本。
關於這兩種打開方式,到底哪種操作更順暢,確實難分高下,就跟「確定和取消哪個在左,哪個在右」是壹種性質的問題,沒有好壞之分,關鍵是要看在哪種場景下使用更合適。
新頁面打開適用的場景:
頁面內容沒有關聯性,且從邏輯上沒有從屬關系,相對獨立。如:產品中的外鏈。
存在多頁面「比較」的操作,需要經常切換。如:淘寶商品詳情。
需要保留住前壹頁的操作不丟失。如:知乎上過濾出來的結果列表。
功能分支存在穿插,當路徑發生交叉時,最好新開頁面。如:產品內部的跳轉鏈接,導致信息關聯的層級發生改變。
具有輔助功能的操作。如:使用文檔(PDF、圖片等)需要來回參照。
當前頁打開適用的場景:
流程性的功能頁面,前後操作存在關聯和影響。如:下單支付、按步驟新增。
同壹層級內容間的操作。如:tab欄的切換。
同壹路徑中的操作,用戶當前的操作會對主頁的內容產生影響。如:編輯壹個配置,用戶操作完,會回到當前頁查看最新結果。
用戶具有明確目的性的操作,當前頁有利於鎖定用戶註意力。如:淘寶中「我的收藏」。
以上是結合功能場景進行的選擇側重,如果就「用戶體驗」壹定要分出個高下,我個人還是比較支持默認「當前頁打開」,從體驗角度分析,「當前頁打開」略勝壹籌的主要原因有以下兩個:
尊重用戶的決定。當前頁打開,將更多選擇機會留給用戶(鼠標中鍵、按住ctrl點擊鏈接或者可以右鍵新窗口打開),壹個具有良好用戶體驗的產品,在用戶做操作的時候,總是能讓他們按自己的意誌做出決定。網站對每個鏈接強制打開新頁面則剝奪了用戶的選擇權,因為不同的人有不同的瀏覽習慣和使用需求。
體驗壹致。保持壹致體驗的設計才能讓用戶產生信任感與安全感。當用戶在操作界面元素的時候,可以順暢的知道、理解,並且能預料到將會發生什麽,不會被分神,也不會被打斷。任何違反這個原則的設計都將會演變成壹種「以設計方意誌為導向」的設計,而不是「以用戶為中心」的設計。
小結
當我們不知道兩種方式如何選擇時,或許「不強制用戶」才是最好的體驗。因為我們面臨的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對於打開方式的習慣也具有多樣性,這個是設計者無法揣測和調查清楚的。
在「兩害取其輕」的情況下,在當前窗口打開鏈接,不失為壹個選擇,尊重用戶自己的決定,讓用戶對交互界面自主可控。
三、彈出框
彈出框(彈層)又叫模態對話框,是指在用戶想要對當前對話框以外的應用程序或內容進行操作時的提示方式。它壹般覆蓋在整體頁面之上,避免了頁面跳轉。
彈出框通常是為了顯示壹個單獨的內容,在不離開整體頁面的情況下有壹些互動,提供信息和交互。
如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個人想法,記錄發布後,很順暢的回到之前的路徑上繼續操作,便捷高效,操作思路清晰。
△
彈出框適用的場景:
內容簡單,沒有復雜的操作,且具有臨時性。如:新增壹個收貨地址,進行簡要的輸入編輯。
更為詳細的輔助說明,是對當前內容的快速擴展。如:縮略圖,點擊放大查看。
因此,彈出框可以較好的實現上下內容層疊的感知,不打擾用戶的主路徑,同時作為頁面承載元素和用戶操作的補充,起到承前啟後的作用。
總結
本文結合這三種鏈接打開方式的頁面交互關系,進行適用場景舉例,並總結每種方式的優缺點,方便在設計中更好的根據不同的場景選擇合適的頁面打開方式。
當然,以上總結也是基於我個人的理解與經驗,沒有統壹的用法和標準,在具體設計實踐中,仍要靠設計者的直覺和經驗來進行綜合考量與判斷。
作為體驗設計師,如何規劃用戶瀏覽路徑,是個需要嚴肅對待的命題。沒有絕對的好與壞,但壹定要結合產品類型、場景、目標用戶等進行具體問題具體分析。
參考文獻
《鏈接打開方式間的博弈:新標簽頁vs當前標簽頁》
《鏈接應該在新窗口打開嗎?》
知乎討論→ /question/22431678
《3種常見的頁面打開方式》
《新窗口打開 VS 當前窗口打開 — 淺談頁面鏈接打開方式》
知乎討論→ /question/19563426/answer/12234132
---來自阿裏巴巴體驗技術團隊(TXD)