淺談遊戲化產品設計

Gamification 指的是「遊戲化」，主要是在原本生硬的產品/服務加上一些好玩的元素，並且引導使用者在不知不覺中完成我們期望的行為。「Gamification for Webapps」 投影片中介紹兩種遊戲驅動力：「約定」與「社會地位」，並使用幾個現實生活中常見的產品/網路服務/行銷活動作為範例，讓大家更了解遊戲化的強大威力。

對遊戲化主題有興趣的人，歡迎繼續閱讀下列兩份資料。投影片中遊戲驅動力的靈感正是來自於TED演講 The game layer on top of the world ：

1. [TED] Seth Priebatsch: The game layer on top of the world

2. Gamification 遊戲化是在 Play 蝦米 Game

Gamification 遊戲化是在 Play 蝦米 Game from Bob Chao

read more...

超理性使用者介面設計 - Data-driven A/B Testing @ Webconf Taiwan 2013

創下 NT$1,300 門票四分鐘完售紀錄的 Webconf Taiwan 圓滿落幕囉！這次的活動會場分為技術軌與設計師軌，今年很榮幸受邀在設計師軌分享「超理性使用者介面設計 - Data-driven A/B Testing」。

A/B Testing 是大流量網站改善介面的秘訣。根據現場調查的結果，只有少數聽眾（目測約五位）執行過類似的實驗。A/B Testing 的理論根據是統計學的假設檢定，有效的測試能夠以數字呈現出每個頁面上的像素、色碼、排版的使用者回饋，讓設計師不再只是憑感覺做設計，配合實驗的佐證才更專業！

超理性使用者介面設計 - Data-driven A/B Testing from Clay Liao

read more...

[分享] 網頁 UI 設計苦手的實用工具包

在許多中小企業或是個人工作室裡製作網站經常是一條龍式的「垂直整合」：工程師得身兼架設伺服器、資料庫甚至是... 介面設計。介面設計對許多缺乏美感的阿宅工程師來說這是一大挑戰，因為多數的情況下老闆/產品經理看不懂 Database schema ，但是卻能一眼看出網站漂不漂亮。以下分享一些個人常用到的工具/資源給有相同困擾的工程師。

免費工具

Pencil Project

Pencil Project 是正港免費的 Wireframe 軟體，也是我目前使用的主力工具。它需要下載安裝，支援 Windows、Mac、Linux 平台，也提供 Firefox 外掛。使用草稿除了非常方便溝通外，使用 Pencil Project 預先定義好的 UI 元件也能避免老闆/客戶/產品經理想出太前衛的介面。

Cacoo

與 Pencil Project 不同的是，Cacoo 是一個「網站」工具，只要有瀏覽器就能使用。Cacoo 提供付費加值功能，如果是個人使用的話，免費版本也算很夠用了。

付費工具

Balsamiq

Balsamiq 可以做出高品質的手繪風格草稿設計圖，介面很容易上手。不考慮價格的話，Balsamiq 絕對是首選推薦軟體。註冊 Balsamiq 帳號可以獲得 30 天試用期，您一定要試試看！

Mockingbird

Mockingbird 也是網站形式的工具，可以線上免費試用，如果要取得所有功能需要付費。

其他工具

Yahoo! Design Pattern Library

非專業的 UI 設計人員常常用錯 UI 元件，其實每個 UI 元件都有其背後隱含的意義，而這些細節往往是介面好壞的關鍵。如果沒有受過專業的 UI 設計訓練的話，請趕快上 Yahoo! Design Pattern Library 惡補一下。裡面有對介紹每個 UI 元素與建議用途，有了這些背景知識，設計出的介面絕對會更上一層樓！

Flickr

使用高品質的圖可以讓網站的質感大加分，不過臨時要用才出外景可能趕不上專案時程。Flickr 提供大量高品質的圖片，但是要特別注意照片的授權。如果是公開用途的話，在 Flickr 搜尋的時候別忘了將 "Only search with Creative Common-licensed content" 選項打勾，以免不小心侵權喔！

IconFinder

一些漂亮的小圖示可以達到畫龍點睛的效果。對於許多缺乏美感，無法使用 Photoshop 自製 Icon 的阿宅工程師來說，直接來 IconFinder 找素材是最快的了。

UI Cloud

有時候要做一個 UI 元件（如搜尋框、下載按鈕），但是又不曉得該如何設計樣式才會好看，此時 UI Cloud 可以幫上忙。在 UI Cloud 可以找到各種不同的 UI 元件設計，非常適合設計新手找靈感。

Reference

1. 製作wireframe的免費工具
2. 讓你的簡報脫胎換骨 ─ 《簡報藝術2.0》
3. 60 User Interface Design Tools A Web Designer Must Have
4. imockups for ipad - $6.99
5. 網頁設計，怎樣最美？
6. 網頁介面設計師的好用工具們
7. [簡報] 用原型驅動設計@WebConf2013
8. 那些mockup沒告訴你的事@WebConf.tw 2013

read more...

誰在追蹤你的上網行為？讓 Mozilla Collusion 告訴你

當我們上網時，許多公司也在背後忙著記錄所有的瀏覽/點擊行為，即便開啟私隱模式或不使用個人帳號登入也無法完全躲過各種追蹤技術。藉由這些訊息，網路公司可以分析並辨識出每個獨立的用戶。如今的網際網路不只知道你是一隻狗，還知道你喜歡吃哪一個牌子的狗食！想要在上網同時保有自己的隱私是愈來愈困難了。

好消息是，這些資訊能讓我們上網更有效率：它讓廣告更為精準，也讓網站得以提供個人化訊息；但是反過來說，它也可能遭到有心人利用甚至侵犯隱私。事實上這些追蹤蒐集而來的個人資訊已經成為一個龐大且成熟的產業，「搜尋引擎沒告訴你的事 The Filter Bubble: What the Internet Is Hiding from You」這本書裡有更深入的探討。

然而技術本身是中立的，端看使用資訊的人是誰。Gary Kovacs 的 TED 演說 "Tracking the trackers" 提醒我們，即便憑個人之力無力扭轉大局，但我們至少有權知道哪些網站正在追蹤自己的上網行為。

要找出這些資訊並不難，事實上，它們都被記錄在瀏覽器中，只不過沒有相關技術的一般網民實在難以接觸。Firefox 的 Mozilla Collusion 外掛可以協助我們分析解讀這些生硬的資料，並且以視覺化的方式即時地呈現出正在追蹤我們上網行為的網站。

使用 Mozilla Collusion

下載安裝 Mozilla Collusion 後啟動 Firefox 瀏覽器，在選單列中點選 [Tools] -> [Collusion Graph] 就可以啟動 Mozilla Collusion：

Mozilla Collusion 視窗呈現所有正在追蹤上網行為的網站與它們之間的關係，每開啟一個網站就會即時更新關係圖，如此我們就能清楚地看到上網背後複雜的追蹤行為：

上圖是造訪了幾個較知名網站的結果，背後的追蹤網站已經有這麼長長一串。下次造訪一些不知名 論壇 網站前可得留意背後那些虎視眈眈的眼睛喔！

read more...