Pages

2011年5月15日 星期日

關於CSS HACK的一些建議

padding-left:5px;padding-left:0\9;*padding-left:5px;

前幾天在社團貼了這段code,一直沒時間好好把它寫完,趁現在沒事要忙來寫一下說明好了。這個狀況是發生在修改同事完成的頁面,姑且把它定義成區塊偏移了5px,在大部分瀏覽器都在他該在的地方,可是有個瀏覽器就是與眾不同,更有趣的是還自己跟自己不同,你應該知道我說哪個吧,不知道的話這篇文章就不用往下看囉。

這個特殊偏移現象只會發生在IE8,IE7不會偏移,至於IE6已經埋在土裡就不考慮了。padding-left:5px;是給所有瀏覽器看的,但IE8硬是多出5px,這時候已經不是去問這是誰寫的問題了,得先解決再說,所以就加了這一行padding-left:0\9;只有IE才看的懂的code,可是這樣會出問題啊,IE7是正常的怎麼辦?於是又多了這行*padding-left:5px;,因為這行code只有IE7看的懂,於是皆大歡喜,可是重點在哪?

重點在順序,一定要由大到小排列,IE8,IE7,IE6。為什麼順序重要,因為串接的關係,越後面出現的權限越大,如果對調順序會造成後面的值覆蓋掉前面的值,這樣會很難發現錯誤,明明程式碼都是正確的,畫面卻完全沒有任何改變,所以才要提醒大家在設定時要注意優先順序。

這樣的問題如果事先有做好瀏覽器的 Reset 通常是不會發生的,我非常少用到HACK的方法,但救急很好用,遇到這樣的問題通常會先跟視覺溝通取得一個較好的呈現方式,不是只能用HACK來解決問題,但如果非用不可就用吧。

2011年5月3日 星期二

如何讓表單更友善

如何讓表單更友善


當用戶按下送出表單卻出現錯誤時,表示你的表單設計出問題了。



構成表單的三個主要元件:

  • 標籤:欄位名稱,姓名,密碼,電子郵件等
  • 欄位:一個輸入框應標示為必填或非必填,通常以星號(*)為提示符號。
  • 提示:幫助提示功能,給用戶更多的提示關於如何格式化他們的信息。 例如,一個幫助提示會告訴用戶什麼密碼要求是:(如下圖所示)。


1.明確標示必填欄位



2.提供明確的錯誤訊息

Yahoo

Gowalla

常用驗證用戶輸入資料方式:

  • Server-side Validation :資料送出後於伺服器端驗證用戶輸入資料是否正確,如錯誤返回錯誤訊息。
  • Client-side Validation :資料送出後於客戶(用戶)端驗證用戶輸入資料是否正確,如錯誤返回錯誤訊息。
  • Real-time Validation :資料透過AJAX直接對伺服器端做驗證,用戶不需送出資料才確認資料的正確性,即時查詢可減少用戶錯誤發生次數,提供更好的用戶體驗。

3.使用客戶端(JavaScript)的資料格式驗證

live validation

4.聚焦表單域視覺風格,讓使用者知道他們在哪裡(底色,加粗框)

wufoo


5.明確顯示完成進度(多頁表單)


如需完成表單分成多個頁面,須明確告知用戶表單頁數及目前完成進度。

ex:Groupon : 有趣的註冊流程


6.記憶/暫存表單資料

用戶在完成表單送出後如有錯誤會將用戶帶回未完成表單,不要讓用戶重新填寫已完成欄位,須將原有已完成資料自動填入。


7.明確定義送出按鈕


讓用戶清楚的知道點擊按鈕後代表的意義,而不是所有按鈕都叫完成或送出。


8.提供取消按鈕前要想清楚

提供用戶取消按鈕須是先確認需求,就購物結帳流程來看,當用戶完成每個結帳步驟表示已確認購物,提供一個讓用戶反悔的按鈕是不是個正確的選擇?


9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

csskarma
Apple : 用戶點擊輸入框提示字元不會消失,如果用戶填表過程暫時離開,回來後還是可以繼續完成未完成表單。


10.確認表單動線


表單動線須一致,這樣可降低用戶填寫表單的困擾,也可讓用戶更專注於完成表單,能有效減少填表錯誤。

2011年4月21日 星期四

iPhone Web App Supported Meta Tags



iPhone Supported Meta Tags



  • viewport

    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

    開發者決定手持裝置的縮放比例設定

    • width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度,也可以直接設定大小,如width=320。
    • initial-scale 畫面是以多少倍的 viewport 來顯示
    • minimum-scale 畫面縮小倍率限制。
    • maximum-scale 畫面放大倍率限制。: 0 < user-scalable < 10.0,預設值0.25。



    • user-scalable 是否允許放大或縮小視窗(預設為YES)。




  • apple-mobile-web-app-capable

    <meta name="apple-mobile-web-app-capable" content="yes">

    定義用戶是否將視窗啟用為全螢幕模式,用戶可透過新增書籤將網頁連結新增為一個桌面ICON,這樣用戶在啟動時就不會出線瀏覽器的上下選單,畫面看起來就像一個App


  • apple-mobile-web-app-status-bar-style

    設定iPhone狀態列的顏色

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    • default:灰色
    • black:黑色
    • black-translucent:黑色半透明(不建議使用)


  • format-detection

    啟用或關閉瀏覽器自動偵測,如將電話自動轉換為連結

    <meta name="format-detection" content="telephone=no">

  • apple-touch-icon

    設定桌面ICON圖片(57px x 57px)

    <link rel="apple-touch-icon" href="img/troie_icon.png" />
    <link rel="apple-touch-icon-precomposed" href="img/troie_icon.png" />

  • apple-touch-startup-image

    載入網頁時的等待畫面(320px x 460px)

    <link rel="apple-touch-startup-image" href="img/wait.png">

2011年4月16日 星期六

神奇的藍色筆芯

Step 01 首先用藍色筆描繪出你想畫的東西。



Step 02 用顏色較深的筆(2B)描繪邊框,然後掃描或用相機拍下來。



Step 03 用Photoshop開啟圖檔

Image -> Adjustments -> Black & White(中文版自己猜吧)


Step 04 濾除藍色草繪線條

Preset 下拉選單選擇 Blue Filter


Step 05 完美的手繪框線完成



Finish

2010年10月19日 星期二

Where are you come from?

When....

  • 發了10000封eDM有多少人點擊?
  • 張貼在Facebook的連結是不是有效?
  • 廣告貼在yahoo還是google好?
  • 花錢請部落客推文效益如何?

How ....

Click Me 然後照下面的說明填入資料
















有了連結就可以貼到任何你想(該)貼的地方








Then...





2010年9月12日 星期日

「使用者經驗設計」系列之四:以系統化方法評估設計的易用性


第一場由交通大學 傳播研究所 李峻德副教授主講,非常專業的解說,只是跟現實環境不符,李教授也提到很多理論跟實際要面對的問題會有所衝突,既然理論無法解決或解釋現有環境的問題是不是該檢討理論本身是錯誤的,如果把現實因素排除不考慮這樣得出的結果是不是正確,答案的正確性是不是會嚴重偏離呢?

第二場由神達電腦 行動通訊部門人機介面處 使用者經驗研究員 王秀娟主講,提到非常多現實環境在操作使用者研究會遇到的問題,也看出目前業界不重視使用者的心態,我們總是抱著有做總比沒做好,這是個不錯的想法,偏離幾個百分點是可以接受的,但如果這幾個百分點就是跟其他品牌的差距呢?A是個不錯的選擇,只是A+更好。

2010年5月31日 星期一

[iSearch 愛搜尋] SEO同好會會後心得

很精采的一場活動。小小的場地上演了一場精采的SEO秀,感謝awoo用心舉辦這樣的活動,每個小細節都做的很好,下次可能要用搶的了,不過聽說寫心得就能取得參加資格,我也來用心一下囉。

SEO+UEO的完美結合-SEO領袖awoo 林思吾(Jose)

阿物國際總經理Jose精采的開場,從不同角度分析讓與會者對SEO及UEO有了初步的認知,原本以為只會談到皮毛,但Jose的大方分享值得給他一個最熱烈的掌聲,不只談理論,連如何實作都毫不保留的分享,精采的數字分析,淺顯易懂的案例解說,本來對SEO一知半解的人相信經過這次活動會有更深入的體會。

頂尖網管人食夢黑膜分享他看到的SEO世界

從不同的工作層面來解讀該如何參予SEO,直接點出SEO不是一個人或一個TEAM可以獨立完成的,必須是不同部門分工合作的結晶。分享中提到一個很重要卻常常被忽略的觀念,好的SEO是建構在WSO之上,沒有WSO,SEO只是空談。後段提供了一些未來趨勢分析及如何使用工具來讓SEO更加完善。

SEO硬是要做的10件事情與3個SEO大撇步-王國連(Mr.King)

從網站架構的底層開始分析做好SEO該完成哪些工作,可惜的是時間太短無法做更詳細的說明,提到一些比較技術面的方法,無法做一些簡單的DEMO,不過與會者大部分都不是技術人員,應該不用做到這麼詳盡的解說。很簡單的帶過一些重要的技術,礙於時間限制也只能這樣囉。

Sorting Study現場帶您一起動手做-awoo廖玟珊(Ingrid)

這是今天唯一的收穫,並不是前面的講者講的不好,每個都非常精采,對一個想進一步了解SEO的人來說。我不是個初學者,所以只要能學會一點東西就該滿足了。Ingrid透過詳細的解說讓與會者了解何謂Card Sorting,很久以前就瞭解這個方法,只是一直沒有機會實作,透過這次會議的實作過程讓我對Card Sorting有了更完整的認知,也更清楚在一個網站規劃或改版時運用的時間點。順便提供一個我發現的小問題,我不知道其他組是不是有相同問題,也許是太趕了,活動一開始大家都是一臉疑惑不知道該怎麼做,應該是有點趕所以大家還沒反應過來吧,這是我看的的狀況,提供參考囉。

對這次活動想更清楚的了解請點擊這個連結
http://blog.awoo.com.tw/2010/05/isearch-report/