iT邦幫忙

2019 iT 邦幫忙鐵人賽

2
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 34

[蛻變事實-隨手帳] 聊聊在扮演QA面對RWD網頁的丫里丫雜 (歷練&心得)

  • 分享至 

  • xImage
  •  

昨天分享了一篇 [蛻變事實-隨手帳] 瀏覽器BUG-Safari 問題小筆記
才想起~ RWD網頁在檢閱時也有很多細節
今天有空就來聊聊、分享,曾經有一段時間協助RWD網站做QA時遇見的問題及經驗~
QA(Quality Assurance)= 軟體測試 = 確保產品品質


之前配合做過網站測試,那時候前台畫面協助的規格是:
Desktop: Chrome、Safari、IE最新版本
Mobile:iPhone 6s 、 iPhone 7p、華為mate8(android 6.0) 、HTC newone (android 5.0)

要檢視:UI視覺是否統一、靜態頁面及區塊的文字、點擊效果、動態視覺&操作流暢度、上下頁切換、後台資料更新前台顯示是否正確.......等等等,這要細說就需要真的例出所有作業例表了(=..=)

起初覺得這是一份不難的工作
直到進入工作內容後,工作的行為就是:
檢測 → 點擊 → 等待 → 更新 → 檢測 → bug記錄 → 回報 → 驗證

算是冗長而重復作業的工作內容,而且還有桌機、手機款式及瀏覽器款式&版本問題!
同一個畫面不同的軟體上,都要做一次又一次的操作,而問題還會千奇百怪的出現!

如:我在實機測試可能有問題,但另一邊的前端工程師也用同一款手機卻沒有發現問題。
/images/emoticon/emoticon10.gif/images/emoticon/emoticon10.gif(卡到陰~卡到陰~)


經過這零零散散的工作加總也累積了以下經驗及心得了~

QA網站-準備作業:

  1. 確定網站支援的軟硬體需求(桌機&手機各需要符合什麼?)
  2. 拿到final版的UI、設計guide (如果可以的話啦...雖然通常會邊測邊改)
  3. 拿到網站架構、需求說明文件
  4. 雙方溝通工具方式,如:Trello
  5. 問題反饋工具:錄影、截圖+說明。
  6. Mac檢測各版本IE工具,如:Parallels,這需要購買!如果公司不提供,那就看該怎麼配合取得IE的畫面了。而且重點是:即使是花錢了軟體或用其它線上的免費摸擬軟體,雖可省下大量的時間,但還是不能像實機一樣的準確。
    還有跟上面我提到的卡到陰一樣.....
    也會遇到二台同系統、同版本瀏覽器,還是出現了無可言喻的BUG!@@
    /images/emoticon/emoticon10.gif/images/emoticon/emoticon10.gif(反正就是卡到陰~卡到陰~~~~ 尤其是IE陰最大!)

QA網站-執行過程:

桌機版:

*同一個網站畫面,作業系統不同,結果也會不同
網站測試瀏覽器是Chrome,但可能在Windows、iSO 的作業系統呈現就是會不同。

*作業系統+瀏覽器版本盡可能是實機,結果也會不同
雖然這似乎不可能,但現在網站開發如果是要符合RWD,基本上都已經放棄太舊IE了,都以IE11起跳!(可以當作不支援太舊IE版本的理由嗎?XD)但如果客戶還是有Windows+舊IE使用習慣,就還是需要面對啦~聊聊這件事要怎麼「橋」..(=..=)

*同一個網站畫面,同一個作業系統,不同瀏覽器版本,結果也會不同
如:用Windows,裡的IE11、IE10.... 看同一個畫面,就會出現不同結果。(支援度問題)

手機版:

*每家手機的"原生操作手勢"操作各不同
之前遇見過一個比較困擾的問題,左右滑頻可以切換圖片,當手機上處理過多資料時,這樣的動態非常多見!但遇見「華為mate」這隻手機時,卻被它原生的瀏覽器操作給吃掉了~左右滑動時會變成網頁的上下頁!
這是次經驗讓我體會到,在網站開發前真的要確定好RWD的開發及支援!

*手機瀏覽器使用的大眾習慣
我們都習慣Chrome、Safari,但如果是大陸市場的需求,就會有UC、QQ各家產品的瀏覽器,對於這種聽的沒聽過的瀏覽器,就需要與客戶確認需求,還有自己也要裝看看是否可做驗證(但我沒用過,剛好時間緊迫最後會依主流瀏覽器的為主)

*網站社群連結分享&點擊
網站連結不只在瀏覽器上預覽,更需要一點是放到各社群上做連結點擊,
而每個社群會有自己的內建瀏覽器(預設瀏覽器),就可能影響到你的畫面及操作!

  • 連結丟到 → Line (連結開啓)
  • 連結丟到 → Wechat (連結開啓)
  • 連結丟到 → FB (連結開啓)
  • 連結丟到 → Chrome
  • 連結丟到 → Safari

放進各不同需求社群做連結測試,會有不同情況!所以更要檢視!
不然要RWD幹嘛咧~?

*重複滑、用力點、上上下下的動來動去
手機版的網站最會遇到手勢操作時,動態遇見bug,不是壞掉就是無法支援!
這比起PC更為麻煩,必竟手機處理一些程序不如PC快速,
手勢操作及控制、點擊觸控的大小等等...都影響到使用者的體驗、網站當初規劃的視覺
畫面BUG不管大或小,只要一不對勁就都要回報上去討論問題點。

其它:

*專案負責的大老闆慣用手機(必要時需強化特定手機做加強bug驗證)
雖說老闆習慣不等於大眾客群,但依文化來說老闆的問題總是最重要的!
所以先打聽一下客戶、老闆的使用習慣,我覺得是必要的。

而這習慣也是過去有幾個經驗累積起來的,譬如:
我曾經出過一個視覺稿,而設計審視的企劃覺得我色彩太怪異,後來才確定是對方螢幕色彩顯示力問題。結果輸出沒有問題!而且...這經驗也讓我買下人生第一台MAC(因為公司不提供跟mac相關產品),至少看色準確一點!(但說真的mac開adobe軟體超快的!)

再聊另一個經驗...
曾經出一張圖,但一直被最大的老闆說比例不對,搞到部門老闆們都緊張了起來。我一直想、一直看也不知問題在哪裡,還好本人跟資訊部的IT人員還是有人脈交情,就私下問了大大老闆的螢幕是什麼?IT人員剛好要去大老闆辦公室整理電腦,就順便帶我一起去,一看那螢幕才知...原來是大大大老闆的螢幕比例設定錯誤..../images/emoticon/emoticon20.gif....無言啊~

總而言之~
不管做什麼工作內容,能多問一些:

「這個需求是給誰的?」
「什麼時候用上?」
「情境是在?」
「.......?」

就像是做市場research一樣,多理解一些總是可以把目標做的更準確。
多問、多理解、多思考 ,不管是在執行什麼專業,應該都是必勝三招啊!

參考資料:

如果畫面遇到問題,我們的習慣做法是:
先把bug丟回前端,如果無解前端就會找PM討論,若是bug出現在很重要的部份就會連動到UI,結合起來討論可能改變做法,如果不是主要性功能,唯一解法就是"放棄舊版支援"。

在這段QA的角色經驗下,以前很討厭IE,結果遇到了大陸各家手機、各家都出瀏覽器,要懂要試都試不完的冏境!這些讓我忘了一點點對IE的討厭,
而且如果客戶希望網站能RWD,那幾乎就是IE最新的做開發,反而因為手機的存在,讓我有不這麼討厭它的理由 (XD)

最後~~~
不管做QA/RD/UI/PM 那一個角色,該面對就是面對,目標性就是網站上線。做法千千種,雖然不見得都是最完美,但每一步一腳印總是會積起一些歷練!
像經過過去那段QA的日子,現在遇見自己在走前端這件事,就會多想一些,也會自己多測一些!

今天的假日,雜唸完了啦~
一起繼續加油吧!/images/emoticon/emoticon78.gif


上一篇
[蛻變事實-隨手帳] 瀏覽器BUG-Safari 問題小筆記
下一篇
[蛻變事實-隨手帳] 將Dropbox變成HTML免費網頁空間小筆記
系列文
蛻變事實-UI設計師勇闖前端城35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言