色彩對比

在開發網站經驗中,我們有時候希望能讓使用者能夠擁有更多的控制權,如讓使用者自行修改網站的背景顏色或字體顏色,若您遇到的使用者是熟悉網站顏色搭配的則通常不會有太大的問題,但當你遇到不太會配色的使用者時,配出來的字體顏色與背景顏色太接近,造成網站的可讀性降低,不只流失了拜訪者,也讓你的網站整體美感變得不好。

若你的會員有上千個,我們總不可能逐個頁面去檢查配色吧? 這個時候就需要一個"色彩對比分析演算法" 來解決這個問題。

對顏色熟悉的朋友都知道在RGB顏色模式中, R代表RED, G代表GREEN, B代表BLUE,若以rgb(x,y,z) 作為顏色產生的含數來看,x,y,z 的值必須介於0-255之間。紅色代表rgb(255,0,0), 綠色代表(0,255,0),…以此類推。

假設使用者輸入了兩種顏色,你想要知道這兩個顏色的配色是否恰當,根據W3C的建議,我們可以使用以下演算法

我們主要透過兩個指標來判斷,分別是:亮度差異色彩差異

W3C 所建議的亮度差異應大於 125, 而色彩差異則應大於 500(也有人建議400)。若兩色比對的結果小於這些指標則表示不符合。

色彩亮度公式
色彩亮度係以下列公式計算所得:
((紅色值 X 299) + (綠色值 X 587) + (藍色值 X 114)) / 1000
背景色亮度與前景色亮度的差異應大於 125.
註: 這個演算法係由轉換 RGB 值為 YIQ 值的公式中所取得. 這個亮度值得出了色彩的知覺亮度.

色彩差異公式
色彩差異係以下列公式計算所得:
((紅色值 1, 紅色值 2) 的最大值 - (紅色值 1, 紅色值 2) 的最小值 ) + ((綠色值 1, 綠色值 2) 的最大值 - (綠色值 1, 綠色值 2) 的最小值 ) + ((藍色值 1, 藍色值 2) 的最大值 - (藍色值 1, 藍色值 2) 的最小值 )
背景色與前景色的色彩差異應大於 500.

 

參考資料:

1. 親和資訊解決方案 http://ais.z6i.org/web/resources/contrast_analyser/

這幾天在Facebook看到朋友分享了一張圖片,
覺得對網站管理應該滿有幫助的,
於是花了一些時間去研究這兩種Test的使用時機.
這張圖是長這個樣子的 (圖片取自: https://www.facebook.com/UXLabsIndia)

AB Test And usability
AB Testing 與 Usability Testing 的使用時機

 

HOW MANY

當你想知道一件事情的效率有多高, 有多好, 或者比較兩個活動所帶來的效益時, 我們會用A/B Testing來做測試,在Google上搜尋, 可以找到Google Adsense對於 A/B Testing的定義如下:

A/B 測試是指測試兩種 (或多種) 不同情況的成效:情況 A 或情況 B。要找出哪一種 AdSense 廣告設計可為您帶來最多收益,A/B 測試就是您的最佳選擇。舉例來說,您可以測試「戶外」色調和「海濱」色調,看看哪一種成效比較好,或是拿 728×90 超級橫幅廣告與小型 468×60 橫幅廣告做比較。

那麼 A/B 測試要如何進行呢?有兩個重點:

-兩種情況之間只能有一個相異的部分
-這兩種情況必須同時執行

當我們對自己的網站做一些行銷活動的時候,如:發送電子報,會想知道這些活動所帶來的效益。試想狀況如下:我在電子報中放了三個不同的按鈕(每個按鈕都是不同的活動圖片),透過統計這些按鈕被點擊的次數來了解客戶的喜好,這種時候就適合使用A/B測試。

WHY

那甚麼時候我們會用到"可用性測試" Usability Test呢? 當你的問題是屬於"為甚麼"的時候。如:為甚麼使用者不是用我的應用程式?為甚麼使用者不進行註冊來留言?等等諸如此類的問題,可用性測試就能夠為您的問題提供一些答案。

根據維基百科的,可用性測試的定義如下:

可用性測試(Usability testing),是一項通過用戶的使用來評估產品的技術,由於它反應了用戶的真實使用經驗,所以可以視為一種不可或缺的可用性檢驗過程。也就是說,可用性測試是指讓用戶使用產品(服務)的設計原型或者成品,通過觀察,記錄和分析用戶的行為和感受,以改善產品(服務)可用性的一系列方法。它適用於產品(服務)前期設計開發,中期改進和後期維護完善的各個階段,是用戶中心設計的思想的重要體現。
可用性測試是可用性評估方法中最為常用的一種,作為人機互動研究的一個重要領域,已經被廣泛研究。

簡單來說,其實我們常把Google Analytics的Tracking Code安裝到網站中,透過GA後台就可以看到很多使用者的使用數據(亦包含了使用者網站流程),幹這些事其實目的就是為了做可用性測試,看看你的網站到訪者到底有多「黏」你的網站。黏度越高表示你提供的內容對使用者來說是有價值的。跳出率(Bounce Rate)越高代表了你的網站雖然吸引人點了進來, 但很快就跳出去了(表示內容不符合期望)。透過不斷的分析與調整,我們可以從數字看出一些端倪,了解使用者離開或停留或使用的原因,以提高網站的「易用性」與「轉換率」。

在GOOGLE找到了一篇關於設計簡單快速的可用性測試供大家參考:http://uedc.163.com/4151.html

當各大智慧型手機大廠正在爭奪市占率的同時,
內容提供者也一直在思考到底應該投資於Android還是iOS,
亦有些企業選擇同時開發兩種平台, 但開發手機App其實需要投入不少的資源.
為了讓不擅程式開發的內容提供者能夠快速的擁有自己的App,
Miiroad提供了一個免費且方便的平台, 讓內容提供者迅速跨入Social-Local-Mobile (社群-位置服務-行動)的領域.

Miiroad提供了幾種模板讓使用者選擇: 商店, 活動, 診所, 甚至目前最流行的婚禮APP也能夠在Miiroad上找到.

婚禮APP
使用Miiroad的服務可以讓您的婚禮更添創意

 

目前為市場推廣期,招募結婚新人大放送,開放給50對新人,
可以免費幫新人做一支專屬於的婚禮app,(價值3999元)做為宣傳用,
這支app有報名喜宴的功能和分享婚紗照及塗鴉牆等等功能,
當然您也會免費擁有這支app,還可以獲得統一超商200圓禮卷,
如果您有意願,請林小姐 iris聯絡: 02-8219-2977

http://www.wretch.cc/blog/miiroad
http://www.wretch.cc/blog/miiroad/21703320
http://www.miiroad.com/wedding-app.php

婚禮APP是現在越來越流行的結婚夯物
從之前流行的流行電子婚帖
到雙方的成長MV.感恩MV……等
現在有結合新人的感人成長故事.新人的美美婚紗照.電子婚帖….等
更可以讓新人的親友團們直接透過手機平板直接留言變成小型親友論壇
也可以讓親友直接在APP裡上傳親友們在結訂婚當天所拍的照片
讓新人可以輕輕鬆鬆收集屬於自己那天的幸福
迷路的[享幸福APP] 更提供報名功能
讓新人可以直接利用手機及平板來統計欲要參加結訂婚的親友數量或是特殊飲食狀況