顯示具有 互動設計 標籤的文章。 顯示所有文章
顯示具有 互動設計 標籤的文章。 顯示所有文章

互動設計//被遺忘的Zero Cal

CA-210每次開啟電源使用,就必須要進行Zero Cal的校正動作。
但是這樣的儀器設計,會造成使用者犯錯,常常忘記要Zero Cal就量測。

「一個好的設計,會讓人遺忘它。」在此是一個很好的例子


這個問題,分成幾種情況。
  • 順利的情況
  1. 開啟軟體→Zero Cal→使用CA-210
  2. Zero Cal→開啟軟體→使用CA-210
  • 不順利的情況
  1. 開啟軟體→Zero Cal開啟軟體→Zero Cal
  2. Zero Cal→開啟軟體→使用CA-210→出錯!

順利的情況,分成「開軟體前Zero Cal」和「開軟體後Zero Cal」,而且這個順序一定要記得執行,否則就會成為有問題的情況。

不順利的情況,是順利情況的問題版本。
  • 在開軟體後一定要Zero Cal的版本中,關閉軟體不見得會讓儀器關閉而需要重新Zero Cal。所以第二次Zero Cal成為了多餘的動作。
  • 在開軟體前一定要Zero Cal的版本中,開啟軟體前就想到要Zero Cal對於工作流程的掌握度比較高,也就是提昇Memorability就可以克服的,但是Usability還有Satisfaction呀。[1]若沒有適當的設計放任程式進行,則程式會崩潰結束執行。剛剛開啟的過程,就必須再來一次,若每次量測都犯這種錯(不是天天都在量所以不見得會記得)每次都要挫折一次。
如果,可以不需要學,自然而然就可以完成Zero Cal的感覺由心中產生,自然使用起來會開心又愉快。


所以
第一件事就是要讓程式知道,目前有沒有必要Zero Cal。
第二件事情,就是讓使用者主動或受指示的來回切換MEAS、0-Cal這兩個Probe的檔位


這個設計跳脫了上述的兩種情況,讓使用者直接量測,再讓程式偵測目前儀器狀況是否完成Zero Cal,再決定是否要Zero Cal。

設計的最後,對於Zero Cal這件事,就只剩下了下圖這個流程。

流程解釋如下
  1. 一開始沒有Zero Cal就打開程式,連線,進入量測畫面,然後量測。
    若發生例外狀況(也就是出錯時)會有兩種情況:
    1. 已Zero Cal→其它問題
    2. 未Zero Cal→先Zero Cal,再量測。

  2. 利用MessageBox讓程式指導使用者要切換Probe的檔位,切成0-Cal,再按下確定。
  3. 完成Zero Cal之後,再指示使用者切回MEAS。
  4. 最後Ready,再次進行量測
未來,程式在每次執行時使用者跟本就不用管是否Zero Cal,心裡只要想著量測這件事,然後執行進行量測的動作即可。至於Zero Cal,程式會幫你記得叫你做。

參考資料:
[1] [HCI] 談人機介面設計與Usability

互動設計//量測值預覽

量測完,這個值若NG是否可以馬上知道?至少要看得見讓有經驗或專業的人可以一眼就看出來,是不是OK的,才不用全部量完才重新再量中心點。

在此,將「返回上一點」的動作完成時,就顯示目前這一點的資料。

互動設計//自動判斷量測

在事件觸發程式設計上,常常看見,按一下按鍵,觸發某個事件的設計。
按下按鍵這樣的動作,若非必要,其實盡可能的減少比較好。

在此的設計是在量測畫面進行時,要如何觸發「抓取量測值取到電腦」的這一個事件。
另外,在此還有一個要考量的事,就是減少IO設備使用的種類。
在量測的時候,使用的輸入設備就是Probe,若因為程式設計師的設計,要你按一下鍵盤的Enter才可以將Probe量測的值抓進電腦,那就有點手忙腳亂的,有時還要有人幫你按。

這不就是程式設計師不了解使用者的結果?

所以,量測時的設計,有兩點要注意
  • 觸發抓值事件
  • 減少IO設備

由於CA-210的Probe因為雜訊的關係,值本來就有些許的跳動,但是,仔細觀察可以發現,使用者拿在手上時,值的跳動會更大,可以當作「類G sensor」來使用,就將抓進來的值進行比對,當值成為某種稱度的相對穩態時,就可以進行抓值。否則,繼續偵測值是否為穩態。

操作上的考量

  • 精確度愈高,穩態就愈難達成
  • 需不需要直接下Delay
  • 偵測多久,使用者覺得太久或太快了

給使用者的回饋
機器進行值的比對與偵測,使用者會渾然不知,所以顯示畫面上必須要設計回饋給使用者,告知目前偵測的進度。

第一個版本
紅綠燈
讓目標圈的顏色從紅色→黃色→綠色。
缺點:只有三個階段(太快),而且顏色與量測的Pattern會太接近(需另外找類似的顏色)。

所以產生了第二個版本。

第二個版本
百分比
在視覺上的設計,則將比對的接近程度設定成百分比,穩態次數愈多,則愈接近100%。
等到100%完成,則抓值。(如下圖)
圈圈為Probe的量測目標。

互動設計//程式知道使用者?

這個程式,會有產線作業人員、專業光學人員、幫忙量測的人員。
bar codechannel
產線作業人員已校正
專業光學人員未校正
幫量測的人員已校正

由於已校正channel的命名開頭為尺寸,所以在此有一件隱喻:已知channel,就是已知量測的LCM尺寸。也就是有可能不需要選擇bar code或有可能不需要選擇LCM size。

在此的設計,會因應不同的人員使用軟體,會問使用者必須問的問題。
避免使用者面臨不必要的問題,心中出現「這是什麼??」或「誰知道哇」的情況。

它是如何設計
  • Bar Code Dialog
    將barcode.txt放在與量測程式執行檔相同目錄之下,程式自動偵測該檔案是否存在,則跳出對話框
  • LCM size Dialog
    讓channel命名時規定命名原則為數字即可,在程式執行時,將channel命名字串抓出來分析取出有LCM size的部份。

互動設計//量測順序

已知,量測TFT-LCD時,會定義各式各樣的量測點位,大致上可以分成九宮格(以長寬各為三分之一概分)每一格的定義也不一定是一個點,量測的顏色也不一定只有白色。

為應付一次量測好幾種量測點定義,這裡的設計,為了在不受手持量測影響準確度的情況,量測的速度加快。

舉例的情境

在此使用兩個量測項目,共十八個點做例子。
  • 白色9點,離邊4cm
  • 黑色9點,離邊1/3
黑色白色皆可先量,在此以黑色先量為例子。

定義「簡稱」

白色:R,黑色:B
白色9點:R9
白色9點第3點:R9_3....依此類推

定義「圖例箭頭」

藍色:從1離開
紅色:跨九宮格
其它:不定義。

原本的順序


D1W1→D2→D3→D7→D4→D8→D5→D6→D9(結束D的量測)W2→W3→W7→W4→W8→W5→W6→W9(結束W的量測)

優點

中心點先量,可先卡中心點規格

缺點

左右來回多趟,大尺寸量測需花來來回回的時間。
Probe移動位移大

設計的量測順序


B1→R1→B2→R2→B3→R3→B4→R4→B5→R5→B6→R6→B7→R7→B8→R8→B9(結束B的量測)R9(結束R的量測)

優點

中心點先量,可先卡中心點規格
打破量測量測的分界,將所有點以區域分群,成為9群,各群中的各點再依序量完,左右來回一趟,Probe移動位移小。

缺點

作業人員不習慣,操作過程畫面背景色閃動幅度大。



如何設計
在DNA轉RNA的過程中,有一個Area順序,在TranScripter::setSquence裡,設定其順序,再利用STL的sort做排序就可以做到了。

void TranScripter::setSquence(Cartridge2& _Car, const std::vector<Nucleotide>::size_type& size, const int& msrItemIndex) const
{
    const CPoint center(m_nScrmH/2, m_nScrmV/2);
    const CPoint carPoint(_Car.GetPointPosi());
    const int shift = 5;
    const CPoint aP(center.x - shift, center.y - shift), 
                 dP(center.x + shift, center.y + shift);
    
    //從point判斷area code
    if (carPoint.y < aP.y)
    {
             if ( (carPoint.x >= 0   ) && (carPoint.x <  aP.x) ) _Car.SetSqncArea(AA_02); 
        else if ( (carPoint.x >= aP.x) && (carPoint.x <= dP.x) ) _Car.SetSqncArea(AA_03);
        else                                                     _Car.SetSqncArea(AA_07);
    }
    else if ((carPoint.y >= aP.y) && (carPoint.y <= dP.y))
    {
             if ( (carPoint.x >= 0   ) && (carPoint.x <  aP.x) ) _Car.SetSqncArea(AA_04); 
        else if ( (carPoint.x >= aP.x) && (carPoint.x <= dP.x) ) _Car.SetSqncArea(AA_01);
        else                                                     _Car.SetSqncArea(AA_08);
    }
    else
    {
             if ( (carPoint.x >= 0   ) && (carPoint.x <  aP.x) ) _Car.SetSqncArea(AA_05); 
        else if ( (carPoint.x >= aP.x) && (carPoint.x <= dP.x) ) _Car.SetSqncArea(AA_06);
        else                                                     _Car.SetSqncArea(AA_09);
    }

    //依area code判斷順序的選擇
    if (m_curDnaCellItor->GetMsrPointTotal() == Pn21)
        if (msrItemIndex+1 == m_curDnaCellItor->GetMsrPointTotal()) 
            _Car.SetSqncFrm(1);
        else
            _Car.SetSqncFrm(size + 2);
    else if ( (m_curDnaCellItor->GetMsrPointTotal() == Pn4) || 
              (m_curDnaCellItor->GetMsrPointTotal() == PnGamma) )
        _Car.SetSqncFrm(size);
    else
    {
        if (msrItemIndex <  m_curDnaCellItor->GetMsrPointTotal()/2) _Car.SetSqncFrm(size + 2); 
        if (msrItemIndex == m_curDnaCellItor->GetMsrPointTotal()/2) _Car.SetSqncFrm(1);
        if (msrItemIndex >  m_curDnaCellItor->GetMsrPointTotal()/2) _Car.SetSqncFrm(size + 1);
    }
}

文章分類維度

class design (22) 視覺介面設計 (9) Lv1 class (5) 互動設計 (5) CA-SDK (3) Excel (3) 網誌架構 (2) MFC (1)