無干擾閱讀體驗

0 評論 11547 瀏覽 6 收藏 19 分鐘

寫在前面:文中所述來自于我在UXLS和WordCamp Zurich的講話,在此,我再次感謝活動組織者的邀請以及他們的籌備工作。

幾個月前,我難以自制的沉浸在Kenya Hara的《White》書中,不論是在混亂嘈雜的列車旅途還是在擁擠不堪的咖啡店里,我全然對周圍的喧鬧充耳不聞。作為設計師,這本書引起我如此料想不到的注意就像是一個啟示。

專注于某件事對大多數人來說原本就是很困難的,特別在智能手機發展如此迅速的今天,難以數計的通知消息充斥著我們的生活。

現在我們擁有Readability,Instapaper,Adblocker這樣的閱讀工具,甚至說我們可以自由的閱讀任何我們感興趣的信息,但事實上呢?閱讀范圍的擴大并不代表我們閱讀質量的提高。最終,仍還有大量的沒被發現的,不引人注目的,沒有被分享的,等待人閱讀的文字存在。

這不是我們所期待的閱讀時代

通過我們設計,重塑讀者閱讀體驗是我們作為設計師的首要工作。

如何打造無干擾閱讀體驗?

打造無干擾閱讀體驗,首先,意味著要排除屏幕上任何可能成為干擾的因素。

The Bird Paradox

我將屏幕干擾這一概念稱之為Bird-paradox。你可能玩過Flappy Bird,可這和無干擾又有什么關系呢?請接著看。

顯而易見,整個游戲都是關于專注力。任何一點點的分心都將導致死亡,受傷,游戲結束,即便已經有大量的游戲攻略告訴你如何玩得更好,但都只有一個核心,不要去關注分數,僅僅是專注專注,不斷的專注。

當然了,設計閱讀體驗和開發游戲不是一回事,但相似的對于專注力的渴求確是一致的。

接下來我們將接著探討如何把讀者從該死的閱讀體驗中解救出來。

版式&內容

顯而易見,版式和內容很大程度上取決了我們所讀所看的意義。

事實上,很多人都說他們已經盡可能的摘選了可讀性高的美妙的文字內容,有時這并不是最重要的,要知道版式所起的作用更值得我們去注意。

請閱讀Matthew Butterick’s practical typography guide

你將會發現這兒有些規則,甚至說訣竅,能完全有效提升閱讀體驗。差勁的排版也并不是看上去多糟糕,只是更容易讓人們分心,放棄閱讀罷了。

幫你還有你的讀者一個忙吧,盡力去找到最合適的版式。

模仿需謹慎

盲目的將物理實體的體驗照搬到數字媒體應用并不是一個好的設計,就如Erik Spiekermann曾說:

在閱讀上,人們總是熱愛他們習慣的。

過去,設計上對于書籍,報紙以及雜志實體的動作效仿能夠被人接受是因為人們對紙媒時代的習慣。但現在不一樣,數字媒體占據了人們的生活,我們已對以數碼產品為媒介的閱讀方式習以為常,也許可以嘗試改變。

就拿翻頁作比方,模仿真實翻書動作的輕擊翻頁一不小心可能會翻到隨意的一頁,讀者就不得不重整思路。而Apple現在就為iBooks用戶就提供了“滾動翻頁”和“輕擊翻頁”的選擇。當然了,如果你希望你的讀者像真實讀書一樣體驗數字閱讀,你就把應用做得像書一樣吧。

固定位置

在網頁設計上,我們大量了使用了固定位置,不論是在全局選項,導航標志還有logo。讓我們看一個例子:Focuslab LLC。一家來自美國的設計工作室:

Focuslab利用色彩,字形表現了他們的品牌,不論你合適滾動屏幕,這個標幅一直都固定在視圖上方。

但是,并不是所有的logo設計都可以如此精美,值得占據這樣大的空間。

當我們重新為Holtzbrinck.com(著名媒體公司)設計師,我們將所有的信息都糅合在同一頁里,所以這是非常長的一頁。因此我們想著必須給頁面增添一個導航,以至于方便用戶又不影響可讀性。所以我們用了其他的方法解決:

當用戶閱覽時不僅可以利用手機自身的操作控制,還可以滑動右邊的進度條調節。既滿足了閱讀體驗又方便操作。

書簽

書簽和固定位置的設定有著很多相似之處,但實質卻全然不同。因為,它最初并不是設定好的,而是根據讀者的需要所決定。

盡管書簽對可讀性沒有太大價值,但對于應用自身來說又非常的重要。當用戶需要做個標記方便聯系上下文閱讀時,書簽就必不可少。

側邊欄

當設計師開始他的設計時,首先,他會專注于將最重要的內容展示出來,此時,他也許會對自己的作品充滿敬畏又相當滿足。直到一個自以為聰明的同事路過,建議性的說了一句:“誒,我覺得這里空白的地方可以加更多的東西,來一個側邊欄吧,人們都喜歡!”

于是,設計師仿佛打開了潘多拉魔盒,將空白的地方不斷填滿不斷填滿,直到原本設計面目全非。

我覺得Oliver Reichenstein說過一句非常好的話:

你覺得你需要側邊欄,只是因為你自己就是個側邊欄,如此微不足道。

如果你真的非得要添加個側邊欄,我只能說你至少要確保它不會礙眼。動畫效果,圖片,還有醒目的邊幅都會分散讀者的注意力。

我再說一句,一旦你有了這個想法,請你一定要堅決的放棄,毫不猶豫的退格刪除你寫下的編碼。忠告!

簡潔動畫

在我先前的文章Transitions中,我有提到如何有效利用切換和動畫。就閱讀的要求而言,任何移動,搖晃,彈跳都可能會影響閱讀。

而在長篇文章的閱讀中聰明的利用動話,適當的嵌入多媒體信息又可提升讀者閱讀體驗。因此很難形容什么樣的設計才是最好的,但我必須告訴你:在沒有任何動畫的影響下,讀者關閉了當前頁面的閱讀,只能證明這篇文章不好。

以The Verge為例,當前這是一篇關于星戰迷友的文章。當你使用不同的設備(OS X,Windows,Android)閱讀時,閱讀的界面和設計會有不同,但設計上真算得上是不錯的體驗。此處查看原文。

令人憂心的是,人們在看到第一個動畫后,后文再次出現的動畫不再那么有吸引力,而且還可能分散讀者的注意力。

如果某些內容需要強調,我建議還是用盡可能簡潔的動畫吧。

廣告

Brad Frost曾說廣告就是垃圾,而我通過在廣告工作的經驗,確信在此我們應該客觀一些。廣告并不壞,惡心人的僅僅是糟糕的廣告和糟糕的廣告布局,我們對此避之不及。太多理由證明廣告有時候是組成完整網頁的一部分,只是廣告從業者有些過頭,給我們的屏幕添載了太多無用的信息。

慶幸我們知道怎么屏蔽廣告,通過安裝Adblocker,而那些迷信“更多的廣告更好的生活”的人們也將發現他們處在一個無止境的黑洞。

廣告無處不在,我想我們有必要開始解決這個問題。首先,不要像Forbes Magazine那樣:

好吧,只有過分癡迷于冰淇淋的經理會將這樣全然無關主題內容的廣告添加到頁面上,而且就算點開了,也可能會發現這個品牌在你的國家根本不存在。

那些重視自己時間的人也做了一些改進:

 

固定的標題欄,極具誘惑的箭頭還有底部的橫標。所有的功能似乎都完備了,但也十足的吸引了讀者的注意力。

結果就是:放棄了閱讀。首先,整個頁面內容看起來太廉價了,讓人分心,沒有效率而且有不適感。第二,這種設計不僅攪擾了原文作者的內容而且讀者閱讀起來也很困難。人們也許會像最初那樣用工具移除視覺“噪音”,或者找到其他更合適的閱讀方式。

不得不承認,除了廣告,要完全的注意力高度集中保持閱讀是非常困難的,在手機上更是如此。在此我想給你一些建議:

不要讓讀者猜這是不是廣告。

Quartz Magazine僅僅只在文章頁面的底部展示廣告,這似乎是非常聰明的做法。

他們嘗試過很多不同的設計了解到只有當廣告非常棒的時候,才有可能被人們接受。而且質量代表著一切。

廣告在今天的時代面臨著很大的挑戰,對此我也沒法給出最佳答案,我只知道我們還能做得更好。通過精心的設計,選擇合適的廣告,我相信我們能在用戶閱讀體驗和合作伙伴的工作中得到保證。

頁碼

當你瀏覽網頁時,通常都會希望能夠快速的瀏覽直到找到你需要的信息。不幸的只是那個設計頁碼的人沒法完全考慮到你的需求。最后你只能無止盡的點擊下一頁:

也許你能夠設計出最漂亮的翻頁按鈕,但沒有人會在乎。要知道,人們打開網頁不是為了點下一頁,他們需要的是實用信息。人為的增加更多的頁面是非常愚蠢的,有些人可能會覺得這樣閱讀會更加舒適,但讀者真的不想去抱怨不停的滾動頁面還是沒找到自己想要的。

一些表明,用戶接受滾動,但某些情況下,比起單頁瀏覽,用戶更喜歡通篇瀏覽,找到自己需要的頁面。

給讀者想要的

在我們開始閱讀之前,實在有太多的鏈接了!

 

      • 導航條
      • 上/下一篇
      • 評論
      • 相似的文章
      • 博客鏈接
      • 等等

如果沒有讀者,Techcrunch這樣的公司也沒法存在。但是,在Techcrunch最近的設計中,僅僅占據頁面三分之一的正文內容,你確定這是讀者需要的么?

在選擇過多的今天,就好比你去一家餐廳,這里有成百上千中可口的菜肴供你選擇。該從哪里開始呢?該吃漢堡還是披薩?真的很難抉擇。

而且不論你做了什么選擇,你都會想覺得也許別的選擇會更好。

過多選擇,過多浪費。

用戶在閱讀時也有同樣的感受,他們總在想也許下一篇文章要比現在讀得要好,不斷的思想掙扎,產生了過度認知。

從信息的索取上來看,人們習慣于循序漸進。在多數情況下,他們更喜歡直接通過搜索引擎而不是信息量巨大的網頁來尋找自己所需要的信息。用戶唯一關心的也僅僅是那些內容對他而言是有用的。

Mandy Brown寫作一篇文章,在最后一個章節曾說,必須得最終每一個讀者的需求。從吸引他閱讀到讓他獨自閱覽,直到最后提供給他有價值的信息。

圖片

圖片對于我們閱覽網頁時的體驗有很大的影響,因為他們能夠快速有效的給我們大腦直接的反應:情緒。

然而,我們卻很少討論到如何有效地利用圖片,并且不使讀者分心。舉個例子:

 

有個來自Kissmetics分析說,圖片的位置對于人們瀏覽網頁的行為有著直接影響。他們發現必須保證頁眉圖片是單純明了的,不會使人分心,否則,不論你什么時候開始閱讀,他都可能會影響你。

另一個有趣的事實是關于內嵌圖片和標題。據說標題的閱讀次數比實際正文要多300倍次。所以,你最好保證這些標題不會有什么更吸引人注意的變化。

內嵌圖片最好安排在正文的右側,這將利于讀者更舒適的閱讀。要知道,讀者的視線要不停的從行與行之間進行轉換。

對比下圖中內嵌圖片的布局,是否覺得我說的話很有道理?

 

看看這幅圖?更特別了,那我們該如何利用這種大尺寸的圖片呢?

很明顯,這種圖片會利用他們的視覺優勢分散讀者的注意力。

但這種圖片對文章來說有用么?根本是垃圾。誰要知道他們在交談什么?他們是在展示他們用了很貴的筆么?這些人的電腦是來自于1999么?天啊。

這類圖片充斥在我們周圍,我也真誠的希望在你讀我的文章時沒有影響到你。所以是,在我們使用圖片是務必要謹慎,要知道除了造成干擾,這些圖片還會是網頁載入的時間變得更慢。

寫在最后

最后,我真的很想說,不論是在考試,求職面試還是發表演講這樣任何對我們來說意義非凡的時刻,人們可能只用了那么幾分鐘就斷定了我們的能力,表現,甚至是遇見了我們未來的模樣。分分鐘都顯得那么重要。

而當我們充滿期待的進行我們的設計項目時,也是在這分秒之間作出了很多重要的決定。

所以,我們勢必要減少閱讀中可能的干擾,給用戶提供更本質更實用的閱讀體驗。引領信息時代進一步發展

source:ui.cn

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!