技術(shù)資訊
減少新開窗口提升可訪問性
2009-04-20 08:19:00
論證完使用target=_blank并非絕對(duì)錯(cuò)誤之后,分場(chǎng)景探討如何減少新開窗口。自有意識(shí)注意這個(gè)問題,是看到藍(lán)色經(jīng)典Plod大叔在04年提倡不亂彈窗的奔走相告。
拋開某些不合邏輯意圖不論,為什么大量使用彈出頁面?因?yàn)樵O(shè)計(jì)師擔(dān)心用戶迷失方向。為什么用戶會(huì)迷失方向?因?yàn)閷?dǎo)航系統(tǒng)不夠好。為什么導(dǎo)航系統(tǒng)不夠好?因?yàn)楫a(chǎn)品功能太多太亂。為什么功能太多太亂?因?yàn)樾枨鬀]控制好。為什么需求沒控制好?因?yàn)樘嵝枨蟮娜俗约阂矝]想清楚。
說白了,很多場(chǎng)合都不僅僅是設(shè)計(jì)師的問題,因此只能選擇不斷妥協(xié)用劣質(zhì)方案堆砌豆腐渣結(jié)構(gòu)體系??旃?jié)奏中有些事情沒法避免很正常,但設(shè)計(jì)師應(yīng)該盡責(zé)做到迭代式的全局統(tǒng)籌重構(gòu)。
應(yīng)該強(qiáng)制target=_blank
1、文件下載鏈接
2、文件打印鏈接
3、非主線任務(wù)并打斷進(jìn)程的鏈接
以上參考淘寶的老包同學(xué)在08年總結(jié)符合國(guó)情的鏈接新窗口打開中的應(yīng)用場(chǎng)景。下載各種文件、打印各種文檔,需要前后對(duì)比的幫助,注冊(cè)表單的隱私條款都有必要target=_blank。
能夠定論target=_blank必然提升用戶體驗(yàn)的場(chǎng)景很少,并且個(gè)人認(rèn)為隨著客戶端技術(shù)的發(fā)展,會(huì)被逐步取代。比如lightbox這個(gè)ajax應(yīng)用,給設(shè)計(jì)師帶來了“查看大圖不用再新開窗口”的全新設(shè)計(jì)理念,這在以前是不可想象的。
可選擇target=_blank
1、跨域名鏈接
2、跨應(yīng)用平臺(tái)鏈接
3、布局改變鏈接
主域名更換比如友情鏈接、網(wǎng)志內(nèi)嵌的關(guān)鍵詞外部鏈接等,而跨應(yīng)用平臺(tái)的鏈接通常也得更換二級(jí)域名。如果全部不新開窗口,為了避免意外跳出,應(yīng)該先提醒用戶這是外部鏈接;如果部分新開窗口,那么應(yīng)該有統(tǒng)一規(guī)則進(jìn)行約束,并明確告知將opens new window。見過三類案例:
msdn例子,icon告知用戶這是站外鏈接。
gblog例子,icon告知用戶這是站外鏈接,同時(shí)可以點(diǎn)擊target=_blank。
egloos(韓國(guó))例子,觸發(fā)時(shí)才icon告知用戶這是站外鏈接,也可以點(diǎn)擊target=_blank。
來自sitepoint的Neil Turner文章補(bǔ)充了三種形式,大同小異。值得一提的是,有個(gè)使用title提示open in new window的案例,其實(shí)也符合使用Title提升可訪問性中提到“操作指引”的應(yīng)用。
版面改變?nèi)缌斜眄撆c內(nèi)容頁的區(qū)別,用戶需要在內(nèi)容頁長(zhǎng)時(shí)間閱讀,每次都返回列表進(jìn)入其實(shí)更不方便。最典型是Google大概在06年初做出的改進(jìn),給搜索結(jié)果列表鏈接默認(rèn)target=_blank,這個(gè)例子幾乎同時(shí)滿足以上三個(gè)條件,并且提供默認(rèn)設(shè)置自定義改回去,100%保險(xiǎn)。
不能強(qiáng)制target=_blank
1、導(dǎo)航鏈接
2、tab條目鏈接
3、返回操作鏈接
4、翻頁鏈接
5、表單
特殊的網(wǎng)站地圖、索引表也屬于導(dǎo)航,都應(yīng)該給用戶最大的控制可能。不管全局導(dǎo)航、局部導(dǎo)航、輔助導(dǎo)航、上下文導(dǎo)航,還是友好導(dǎo)航,都建議杜絕target=_blank。比如wordpress程序的sidebar容器內(nèi),幾乎所有站內(nèi)鏈接都是導(dǎo)航,target=_blank會(huì)嚴(yán)重影響可訪問性的流暢感。
tab是很常見的頁面內(nèi)容組織形式,但不管直接隱藏顯示、異步加載顯示,還是類似導(dǎo)航的跳轉(zhuǎn),都不建議target=_blank,因?yàn)榇藭r(shí)用戶更加期望模塊內(nèi)的變化,或者在當(dāng)前窗口載入新頁。
另外,導(dǎo)航鏈接與返回操作鏈接有部分重合,比如面包屑導(dǎo)航,分級(jí)往回點(diǎn)其實(shí)就是返回操作。在任何頁面進(jìn)行返回操作都代表當(dāng)前頁面已經(jīng)不需要了,因此不能新開窗口。這個(gè)返回包括點(diǎn)擊logo返回首頁,同時(shí)也是能碰到的典型錯(cuò)誤之一。
表單的場(chǎng)景比較寬泛,比如注冊(cè)、登錄、搜索都應(yīng)該杜絕target=_blank。大量字段的數(shù)據(jù)表單提交有條很重要的可用性規(guī)范,點(diǎn)擊返回應(yīng)該能保留數(shù)據(jù),這點(diǎn)wordpress后臺(tái)錄入很出色。
總結(jié)
基本可以廣義概括為只要影響訪問、操作流暢度的鏈接,都不建議target=_blank。其實(shí)不管什么規(guī)則,只要沒有清晰邏輯傳達(dá)給用戶,都會(huì)造成意外。只不過設(shè)計(jì)難點(diǎn)在于,無法準(zhǔn)確判斷這個(gè)意外是否在用戶所期待的可接受范圍之內(nèi)。
既然用戶所期待是否需要target=_blank的場(chǎng)景不好判斷,但是應(yīng)該強(qiáng)制、不能強(qiáng)制這兩類常見錯(cuò)誤場(chǎng)景相對(duì)容易達(dá)成共識(shí),因此個(gè)人認(rèn)為還是容易找到解決問題的思路。簡(jiǎn)單例子不再贅述,有機(jī)會(huì)另補(bǔ)充。
? 一葉千鳥(轉(zhuǎn)載請(qǐng)留原文鏈接,更新于2009年04月17日11點(diǎn))
原文:http://blog.rexsong.com/?p=6063
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2019-03-14 17:54:32] 百度編輯器超鏈接默認(rèn)彈出新窗口
- [2011-12-31 13:22:13] 如何控制彈出窗口的大小、尺寸、位置等的樣式
- [2009-04-01 22:29:00] 看彈出窗口和浮出層的使用體驗(yàn)
- [2008-10-30 10:58:00] 各個(gè)知名網(wǎng)站的登錄窗口
- [2011-12-31 13:03:30] 如何讓彈出窗口在網(wǎng)頁后面
- [2012-07-22 18:52:37] dede圖片上傳選中后 圖片選擇器窗口不能關(guān)閉
- [2012-03-19 23:42:03] 網(wǎng)站登錄窗口的設(shè)計(jì)
- [2009-04-16 22:22:00] 新開窗口應(yīng)該瀏覽器控制
- [2012-05-03 18:18:29] 彈出窗口樣式
- [2012-05-15 19:29:01] 彈出窗口代碼
- [2008-05-09 13:46:00] 模式化窗口
- [2008-09-04 11:03:00] 頁面新開窗口的一點(diǎn)補(bǔ)充
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
海信網(wǎng)絡(luò)科技 青島好的網(wǎng)站優(yōu)化公司 搜索引擎 html和css 網(wǎng)站建設(shè)的步驟有哪些 青島開發(fā)區(qū)建站公司 青島網(wǎng)站建設(shè)公司哪家好 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 H5定制設(shè)計(jì) 微信開發(fā) IT資訊 色彩心理學(xué) 網(wǎng)站設(shè)計(jì)趨勢(shì) 青島網(wǎng)站SEO 網(wǎng)站設(shè)計(jì)資訊 青島網(wǎng)站優(yōu)化 版面布局 官網(wǎng)建設(shè) 青島網(wǎng)站案例 用戶界面 php程序 企業(yè)建站 青島網(wǎng)站營(yíng)銷 力圖數(shù)字科技 空白和簡(jiǎn)潔的設(shè)計(jì) GOOGLE 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 css 網(wǎng)站策劃 網(wǎng)站建設(shè),手機(jī)網(wǎng)站