來唐鳳辦公室見習!?青年學生體檢政府網站數位服務專案(中)

集合啦!網友見面會

kuouu
Sep 21, 2021

本篇文章將會以工程師的視角來寫在這個見習專案的所見所聞

疫情解封之後總算能見到大家,可是好可怕,大家突然變成 3D 的了😖

在上一篇經過一系列使用者研究之後,總算要踏上我們的設計之路了,身為工程師 a.k.a 沒有美感ㄉ傢伙的我揪竟能為團隊貢獻什麼呢?讓我們繼續看下去。

Wireframe: Idea is all you need!

wireframe 中文翻譯是線稿,也就是用一些很簡單的方式呈現網站的基本架構,不需要做得很精美,以能夠溝通討論為主就好了。這裡 Nicole 提出我們可以用工作坊的形式來進行 wireframe 的發想,於是我們就這麼開始了

wireframe 發想工作坊

不知道大家都是怎麼開始畫 wireframe 的呢?

簡單來說就是先畫一個以可行性為優先的版本(A版),再畫一個天馬行空,什麼都可以放進去的版本(B版),最後再討論出一個兼具可行性與天馬行空的版本(C版)。在畫的過程中,我突然想到我之前好像也有做過類似的事情,也就是我幾百年沒更新的個人網站,當時的我沒有 wireframe 的概念,隨便畫一畫就開始刻了,現在則是很有系統的在做這個步驟。

上面的標點是設計亮點,最後會特別拿出來討論,並產出融合の最終版

我還蠻喜歡發想天馬行空版本(B版)的部分,那邊提到能夠用指紋解鎖、或是 FaceID 來當作密碼;客服甚至用遠端操控電腦的方式來進行,超屌。但仔細想想,這好像也不算是天馬行空的想法,safari 瀏覽器能夠用指紋來輸入密碼,而蘋果的客服也早就用遠端操作來解決使用者的問題了,有人做得到,那這是不是也遲早會變成一項成熟的技術。只能說天馬行空不怕做不到,只怕想不出更創新的想法。

機關訪談之呼吸 貳之型:wireframe 提出會議

這次訪談主要是向健保署提出我們發想的 wireframe,解釋其中的設計概念並且詢問是否可行,主要比較大的改動會是:

  • 參考各大需要登入的網站,將登入介面改得更直觀
  • 把註冊流程拆得更細,引導使用者一步一步完成註冊
  • 將元件下載的區域重構,確保使用者在遇到問題時可以找到解決辦法

訪談是由我來負責主導,我自己覺得是有很多可以加強的地方,像是可以多看情況選擇要問的問題,或是適時跳過一些地方以遵守會議訂定時間之類的,但我隨機應變的速度真的太慢,如果有什麼突發狀況我會很慌張,尤其是在這種有重要人士在場的場合,更是讓我的腦袋運轉速度大幅下降,感覺也只能靠不斷練習來進步了,也歡迎大家跟我分享你是怎麼克服類似的問題!

Lo-fi Prototype

Lo-fi (Low Fidelity) Prototype 中文翻譯是低擬真原型,在這個階段需要加上一些互動的機制,按註冊按鈕就真的要跳到註冊頁面,一些 hover 的效果如果有必要也都要做出來。這裡我們使用 Figma 來做我們的 prototype,不得不說在這次見習的洗禮之後我的 Figma 技能大幅提升……

在 Figma 上做 prototype 非常直觀,拉一條線就能有互動的效果。但看到左邊的線了嗎?半個頁面密密麻麻的都是線,而這只是一小部分而已喔😈

再上前線,第二次使用者訪談😅

這次的使用者訪談規劃就比較多了,從招募受測者、篩選、寄信、擬定訪談大綱、實際訪談、設計迭代都有好多可以講,這裡我就把我參與比較多的部分拿出來說明吧!

在招募受測者時,我們主要發放問卷的地方是學校校版,那裡其實就可以招到很多受測者了,但年齡層都會落在二十幾歲。因此我們決定在批踢踢試一試,通過我朋友的幫忙(大!感!謝!),成功把問卷發在 Q_ary 版,也真的有年紀比較大的人來填問卷,推薦大家如果以後需要做研究也可以去那裡看看,招募的使用者年齡層在 18–55 之間,其中又以 25–35 最多。

而這次的訪談我也嘗試當了主訪,對象是一位公務員,他對我們的設計有很多建議,有時候會讓我有點難以打斷他,因此在時間掌控上沒有那麼好,不過整體來說還算是順利,訪談經驗 get,好有趣哈哈哈

設計迭代是什麼?跟迴圈有關係嗎?

這是我第一次聽到設計迭代這個詞的想法,因為我記得之前在寫競程時用 c++ 的 vector 有迭代器(iterator)這個東西,雖然已經不記得怎麼用了,總之就是某種在迴圈會用到的東東。而設計迭代我會把它理解成,在經過一系列的研究之後,總結研究的結果,並且根據結果改善設計,有一點點迴圈的感覺(嗎?),我們統整的流程如下:

大家讓我負責帶這個部分的討論,所以這裡我印象很深刻

天真的以為做完使用者訪談事情就結束的我,現在才發現要整理這麼多的回饋也是一件不容易的事情,分辨哪些回饋是值得參考的,哪些是個人偏好、或是在之後高擬真原型就會被解決的。但最後我們還是整理出了幾個還需要被改善的設計,並在接下來的線下見面會簡報中提出初步的解法。

沒錯!終於要來了!線下!見面會!

線下見面會

在全台堅持不懈的努力防疫下,台灣終於在七月底宣布解封,長達兩個月的三級警戒總算是迎來了一線曙光,於是 PDIS 也決定在第三次見面會要以線下形式舉辦。

我們在台北市的社會創新實驗中心舉辦見面會,在台南的我還刻意設提前一個小時的鬧鐘,深怕第一次開會睡過頭的慘劇會再次發生,然後還真的發生了,還好我有超前部署,如果當時抓剛剛好的時間我可能就……

但不得不說宅在家裡這麼久,突然要參加這麼多人的活動還真的有點不習慣(雖然也才二十幾個人),而且發現大家可以同時講話不被干擾了,講話的時候也不會因為網路不穩而斷斷續續,這個感覺非常的奇妙XD

健保署,硬啦!(兩位姊姊都超高,視訊的時候完全看不出來)

雖然都會說出門很麻煩,一直維持遠距開會也就不用南北奔波了,但是實際見面討論真的會比較有溫度,較能看到對方的表情,了解彼此目前的狀況;比較不會因為一些設備影響討論,就算是 5G 也比不上現實世界資訊的傳輸速度;也比較不能打混摸魚了(所以好像是我本身的問題?)

小結

Retrospective Workshop

在迭代設計結束之後,曉曄姊姊主動提出要再來做一次回顧的工作坊,這次我沒有提出什麼問題,只有希望大家可以來多參與一些見習之外的事情,像是什麼 MOPCON 的 vtuber 啊,還是有空來看 AInimal 的 IG 直播啊。

除此之外,大家也有提出一些額外的問題,主要是有關討論時的效率,我其實也有一點點的感覺,但是沒有特別提出來,可能是因為我本身比較會適應新的環境,而且這個問題似乎也有在慢慢變好,不是什麼大問題,安拉!(我要被罵理工直男了嗎?)

提案,不要提問

除了成為 Figma 大師之外,在這個階段學到最多的大概就是這句話了吧。當自己把問題提出來的時候,對方也不見得知道解法,不如先提出一個方案來讓大家討論,如此一來能大幅提升討論的效率,也同時讓對方知道在提出問題之前自己是有先做功課的。

不知道是不是錯覺,這種心法讓我對各種事情有了更多的看法,因為我不斷的訓練自己在看到問題的當下也同時想到解法。

提出問題的同時提出解方,能讓討論更加迅速

下個階段就是 hi-fi prototype 了,也就是將網站的設計圖及流程完整畫出來,身為工程師的我又該如何是好呢?最後的成果發表會(線下)是早上十點開始,在南部的我應該要怎麼辦呢?

欲知詳情請待下回分解……

kuouu