Posts Tagged ‘UX’

品味:讓人愛不釋手的「單頁式」網站

March 22nd, 2013

Ian James Cox

歡迎來到每週一次的「品味」專欄,在這裡,我分享我所看到的種種美好。

近 5 年來,Single-Page Websites 漸漸開始流行起來。這種設計的好處是瀏覽方式單純而直覺,使用者只需用滑鼠不斷向下捲動,就可以從頭到尾欣賞完整個網站的內容,不需要楞在首頁茫茫然,面對一堆點擊不知該從哪裡開始。

也由於是捲動的情境,很多設計師開始加入了有趣的創意,無論是動畫、場景變換、翻頁等效果,都讓一頁式網站的瀏覽體驗變得更加豐富,讓人一玩再玩,愛不釋手。

今天為大家帶來幾個我覺得非常棒的一頁設計,希望能夠給你帶來些啟發。

設計師 Chris Connolly 個人網站

Chris Connolly

chrisconnolly.com 是設計師 Chris Connolly 的個人網站,他用很簡單的幾個段落傳達了他的性格 — 一張低頭微笑的個人照片代表著沉穩的個性,也傳達了樂在欣賞物品 (作品) 的態度。一張由布魯克林望向曼哈頓橋的照片代表了他居住的 Dumbo 區,也是紐約新一代創作者最喜歡的區域。接著他把作品攤開來展示,再用選擇底片的畫面來表達對工作品質的追求,最後放上一張拉花拿鐵的照片,並且註明偶爾也喜歡喝波爾本威士忌來露出輕鬆的一面。所有的內容加上乾淨清爽的單頁式網站,就完成了他的自我介紹。

到此為止,有工作找他的人可以 Email,只是欣賞的人可以在社群媒體上追蹤,一切毫不囉嗦一氣完成,讓人非常欣賞。

電影 Viagem Autonómica 網站

Viagem Autonómica

aviagemautonomica.com 是一家位於 Azores (亞速爾群島) 的獨立製片公司所拍攝的 Viagem Autonómica 電影的宣傳網站,一樣採用場景的切換,帶領使用者一步步進入電影的情結。雖然我看不懂葡語,但這個網站還是讓我體驗到了該部電影的主要精神,再加上預告片,讓人會想跟著主角,一起經歷他的 Azores 探索之旅。

設計師 Ian James Cox 個人網站

Ian James Cox

www.ianjamescox.com 用起來好像在搭雲霄飛車,除了驚奇單頁式網站能夠做到這種程度,當然也對 Ian 的製作能力留下了深刻的印象,你們一定要去體驗一下。

英國節約用水宣導網站

Every Last Drop

everylastdrop.co.uk 把單頁式網站的動畫效果做到了極致,是寓教於樂的最完美示範。希望政府相關單位能夠看看人家的用心,別再盲目的把所有政令宣導都拿去拍街舞 + Rap 了!

以上就是今天分享的好東西,希望你們喜歡。

___

一天中的美好風景,我都分享在 Instagram,歡迎收看

(Inspired by WDL)

10 個一流 UX 開發者的必備能力

May 10th, 2011

上次聊到了為什麼「Art」做不出好 UI,大家的討論非常熱烈,很多回應都非常精彩,幫這個話題添加了不少可以思考的面向。今天我們就接著聊一個一流的前端 UX (User Experience/使用者體驗) 開發者,應該具備什麼樣的能力。注意到這次我用的是 UX 而不是 Art 或是 UI (User Interface),因為使用者體驗才是一個軟體產品最重要的價值,尤其當你是一個從顧客出發的精實創業公司。

不確定 UX 是什麼的人,可以參考一下維基百科的定義

UX 就是使用者對一個產品所產生的感覺,它著重在體驗、情感、有意義的和有價值的人機互動以及擁有感 (也就是當你光拿著一台 iPad 2 就覺得很屌時),但它也包括了使用者對於產品的功能、容易上手程度和效率所留下的印象。(不一定是事實,所以不要再罵蘋果迷了!)

User experience (UX) is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.

簡單的來說,UX 著重的是讓消費者愛上你的產品,愛到義無反顧,別人說什麼他都回答:「I don’t care!」,那你就成功了。要達到這種程度,當然非常的困難,但是那是每一個創業團隊必須要上下一心、群策群力、有志一同、齊心協力… 啊!反正就是共同努力的方向啦!

剛好昨天讀到一篇很棒的文章「10 Skills to Become a Frontend Developer worth Millions」(這不用翻成中文了吧?),大家有空可以去讀一讀,以下是我加入自己的經驗,幫你們整理的重點:

  1. 永遠在找新工具 — 不要懷疑,UX 還是一個非常年輕的領域,所以新的工具會一直不斷的跑出來。你的工作就是永遠都要對舊工具不滿,不停的找新工具來讓你的工作更有效率、產品更棒。最近出現的好物包括:KISSMetrics/Mixpanel (量測轉換率和 funnels), Usabilla (測試頁面設計) 等等 — 歡迎留言推薦!
  2. 建立流程才是重點 — 除了開發新的介面體驗,你還必須要守護前端程式碼、速度、注意規模化、品質等等,所以建立起一套循環流程 (Iteration Process),你才能事半功倍。
  3. 溝通、溝通、溝通 — 和使用者溝通、和後端開發者溝通,你必須要參與這些會議,因為你是品牌體驗的最終守護者。
  4. 了解工具和目的 — 你必須要非常清楚的知道這些工具是幹嘛的,要幫助你做到什麼。大多的時候我們追求的是轉換率 (conversion),但是到底要轉換什麼,你必須要清楚的了解,而不是別人說了就算。
  5. 美感 — 大多的 UX 開發者都是工程師出身,但是你必須要懂得一些美感,才能很快的製作出 A/B 測試用的各種版本頁面。
  6. 勇氣和說服力就像創業一樣,大多數的轉換率測試會是失敗收場,所以你必須要不斷的嘗試,還要能夠說服團隊裡面其他人,這些測試是有意義的。
  7. 以滿足使用者和提升轉換率為最高榮譽 — 要贏得使用者的愛是很難的,要提升轉換率常常也是一個長期抗戰,你必須要把這兩樣東西視為工作最重要的目標。
  8. 寫人看得懂的程式 — 每個人都會寫機器看得懂的程式,只有最厲害的開發者才能寫出別人都看得懂得 code,記住,不是只有你一個人需要使用這些程式碼。
  9. 速度是最重要的體驗 — 速度是一個網路應用最基本的功能,也是給使用者留下最深印象的體驗,無論如何,你都必須要不斷的優化。
  10. 很快的做出樣版 — 用 Balsamiq 這類的工具很快的做出一些樣板 (Mock-up),讓大家的討論可以更有效率。

以上,就是身為一個 UX 開發者的 10 個必備能力。千萬別忘了,使用者體驗是使用者留下的印象,所以除了轉換率的優化,常常和使用者聊天,確認他們對你的產品和品牌有好的體驗,是非常重要的。如果你一直朝這個方向努力,不但會成為你最大的競爭優勢,有一天甚至可以像 Apple 一樣贏得一群死忠的粉絲,那才是真正拿不走的東西。

加油囉!

PS. 5/20 (五) 1:00pm,我們將在台大國際會議中心舉辦「appWorks Demo Day #2」,參與第二屆 appWorks 育成計畫的 12 個團隊,將在那裡向全世界介紹他們六個月來辛苦創業的成果,請先圈好你們的行事曆,更多資訊過幾天會公布。

(Image via pveugen, CC license)

為什麼你的 Art 做不出好 UI?

April 20th, 2011

最近常常在和創業團隊們討論 UI (User Interface/使用者介面),我發現很多人對於這個東西的誤解很深。想到要做 UI,大家的直覺往往就是先參考「國內外知名網站」 — 這很好,你不應該重新發明輪子,更不能重蹈覆轍。可惜許多人的「參考」,就是去偷人家的設計,卻沒有好好去檢視別人為什麼這麼做,哪些是該學的,哪些是你可以做得更好的。 我最喜歡舉的例子就是這兩個網站:

同樣是財經雜誌、幾乎一樣的排版方式,甚至連選用的色調都沒有差別。很明顯的,當初一定是其中一個人先做好,然後另一個人就說,既然他們都這樣做了,一定是深思熟慮的結果,我們就直接拿來抄吧!天啊!你沒有發現這樣的 UI 根本就是使用者的夢魘嗎?請問我一進到這樣一個網站,到底應該要把眼光放在哪裡?是左邊不停跳轉的圖片、中間的「最新出刊」、還是下面的「頭條要聞」?請問「最新出刊」跟「頭條要聞」,又有什麼不同呢?這根本不叫 UI,頂多叫做小學生的美術「著色板」,你把整個畫面塗得滿滿的,可是對使用者來說卻一點功能性也沒有。

最反差的例子,就是本文一開始附上的圖片。那是從 Dropbox 首頁擷取下來的,人家有幾百個功能,累積了 2,500 萬用戶,首頁卻還是嚴守著簡單的原則,非常清楚的讓每個進來的使用者知道,你該點哪裡,這,才配叫 UI。

「可是 Dropbox 是工具軟體,前面兩個是雜誌,不能蘋果比橘子。」你說。

好,我就知道你會這麼說,沒關係,我們再舉一個例子:

Huffington Post 是北美最成功的網路媒體,綜合性的新聞網站,每天有上千則報導、評論,這是人家的首頁。看到了嗎?清楚明白,這,才配叫 UI。

為什麼事情會變成這樣,我常常說是把「排版」和「使用者介面」搞混了的結果。以前雜誌的篇幅有限,所以要把版面填滿,免得浪費紙張。問題是當我們進入了網路時代,這個限制早就消失了,可惜很多的 “Art”,卻還是停留在舊時代的框架當中。

但我一直懷疑還有很多更深層、我沒想到的理由,剛好昨天讀到一篇文章「Why Johnny can’t build a decent user interface.」,給了我很多靈感,所以,以下就是加入了我的經驗,幫大家整理的列表:

為什麼你的 “Art” 做不出好 UI?

  1. 自我感覺良好 — 「身為一個藝術工作者,我認為這個版面就是應該要這樣設計,這樣才有品味、這樣才叫美。我們在這裡還用上了最酷的 HTML5 動畫效果,你看,是不是超炫的?」天啊,先生,你不是在做一件要拿去展覽的藝術品好嗎?
  2. 太聰明 — 「拜託,這明明就很方便,你看,所有你可能會需要用到的功能通通在一個畫面上就可以找到,是不是很方便?什麼?User 不會用?怎麼可能?世界上怎麼會有這麼笨的人類?」– 真的,這世界上 99.9999% 的人,就算有你的智商,也跟你的產品不熟,麻煩你還是將就他們一下吧!
  3. 沒能力 — 說真的,要設計一個「藝術與科技的結晶」,美觀大方又好用的 UI,非。常。非。常。難。所以 1 和 2 的背後,往往就是其實這個人也沒有正確的觀念和知識,
  4. 不重視 — 1~3 還是可以改善的,最慘的莫過於你的組織文化中根本沒有對 UI 優化的重視,從頭到得都沒有去注意消費者是如何使用你的產品,也沒把不斷的改善視為永恆的任務。
  5. 忘了從使用者出發 — 再難用的 UI,當你用了 1,000 次,也變得很好用。往往在我們瘋狂的測試產品的同時,也養成了良好的使用習慣。等到產品推出去了,你也把這樣的 UI 視為理所當然,忘記了大多的使用者其實是比你少用 999 次的。

最後我再說一次,網路業是一個講求轉換率最大化的行業,能夠把最多流量轉換成客戶的人,就是最後的贏家。所以當你在設計 UI 時,第一個必須要考慮 Conversion,然後才是美觀和舒適。能夠全部做到當然最好,如果不能的話,請把轉換放在第一位。至於你的 Art,既然每個都那麼崇拜 Apple,那就請他們好好從研究人家的 UI 設計準則開始吧!

PS. 四月份 appWorks Startup Mixer 來了,本周五 (4/22) 6:30 在 BCDog Cafe,趕快去報名吧

©2020 MR JAMIE.
網站由 Allen Hsu 設計 | Logo 動畫由 Wen Chen 完成