8/25/2012

Heuristic Evaluation

今天上課Todd 帶我們大家試著跑了一遍heuristic evaluation 的方法,先附上 Reading List

他的流程大致如下:
  1. 先定好幾個scenario
  2. 選定一個方向的usability heuristic ( 可以使用這10大usability heuristic[http://www.useit.com/papers/heuristic/heuristic_list.html],不過今天我們是用considerable system [http://www.codinghorror.com/blog/2006/03/making-considerate-software.html] 的條件來檢驗 ),
  3. 將每個scenario 都在系統上實際操作一次,每次操作的時候只專注在跟這次選定的方向有關的usability,
  4. 把所有scenario 都實際操作過一次後,進行一次討論、整理跟歸納。
  5. 換下一個usability 重複2-5 的動作!
操作過程有一些地方要特別注意:
  1. 在每個session結束後討論,不要等所有的面向都測試過一遍之後再討論!( 我們今天就犯了這個錯誤了!!!) 這樣做的原因是避免大家忘記之前遇到的問題!!
  2. 每個session 都必須要完整的重新操作所有的流程,不可以偷懶!
  3. usability test 需要有多個使用者來參與,才會有比較好的結果,建議的數量大約是3-5 人左右,太少的話diversity 不夠,可能無法找出夠多的usability problem,人數過多的話,通常也不會增加太多找到的結果,太過浪費時間跟金錢。

等一下來補上優缺點分析!

1/11/2012

html5 touch event on android/ipad

最近系上的收發件要電子化,既然要做,當然就連無紙化也要一起做啊!參考了ups 之類都有一個電子的收發,所以我就弄了html5 的簽名板。

但是常用的mouse down, mouse move, mouse up event 在android 上卻不能跑QQ
查了一下才發現有專門給這類觸控的event:  touchstart, touchmove, touchend

但是在ipad 上跑都ok,android 系列卻一直都有問題。google 以後
後來改完以後,大致上包括下面幾個

  1. preventDefault()  ,(參考網頁)
    在android的browser上,touchstart  touchmove 都有default的,如果沒有prevent的話,touchmove只會fire一次!
     $('#canvas').bind('touchstart', function(e) {
           e.preventDefault();
           draw = true;
           var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
           draw( touch.pageX - this.offsetLeft ,  touch.pageY - this.offsetTop) ;
    }
     $('#canvas').bind('touchmove', function(e) {
           e.preventDefault();
           var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
           draw( touch.pageX - this.offsetLeft ,  touch.pageY - this.offsetTop) ;
    }
  2. touchevent 的 location (參考網頁
    在 iphone/ipad 上可以直接用
    e.touch.pageX/Y
    來取得touch的位置,但是在android 上,pageX 跟pageY要用
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    來取得才會對!(jquery 的event 有重新包過,所以要拿originalevent

至於繪圖的部份我是參考  Create a Drawing App with HTML5 Canvas and JavaScript  (javascript)的code,不過他每次move都會重新畫圖(我不確定為什麼要這麼做,有一點沒效率),等等改完code 測試OK 再放上來好了!

還有關於mouse position,我一開始canvas的size是用 style='width:100px;height:200px' 這樣的方法做的,但是這樣它做的事情卻是"縮放"canvas 來達到設定size的效果,try 了很久換成用 這樣的方式才終於正常!