Let a wireframe be an app in the iframe

在 Firefox OS 平台上,一個 App 其實就是一個 iframe。Gaia 團隊成員 (Front-end engineer,簡稱 F2E) 會小心翼翼的檢閱著 UX 設計出來的 wireframe (示意圖),對照 Gecko Developer (以下簡稱 Dev) 提供的 API,把 App 的功能一個個實作出來,成為 Firefox OS 手機裡真實存在的一個 App。wireframe 是 UX 理想上的操作流程,iframe 裡的 HTML/JavaScript/CSS 則是 F2E 實際上能達到真實效果。

讓 wireframe 變成活生生的 iframe、變成一個讓使用者覺得好用的 App,需要 UX + F2E + Dev 的跨越自身知識領域的溝通,因此,我們無不想盡辦法讓對方瞭解我們的心意。今天就來跟大家聊聊我開發「設定 (Settings app)」過程中一些有趣的對話。

或許你從未仔細留意過手機的藍牙設定,我一直以為它就跟無線網路設定類似,只是一堆裝置開關連線而已…直到我看到 wireframe。

恩,找到的裝置可以點一下配對,然後他就顯示已配對 (Paired),而已經配對的裝置可以點一下取消配對 (Unpair)…,看起來OK。

第一版 wireframe 的畫面(1)第一版 wireframe 的畫面(2)

Dev:疑?說好的連線呢?
我:啊?Paired 不是嗎?
Dev:不,我是說連線 (connected)。
我:所以你是說 paired ≠ connected?
Dev:是啊~我們只是互加了好友,當然不等於在一起。

嗯哼~!有道理。

Dev:而且,我無法察覺她是不是在附近 (Not in range),就算我們是朋友(Paired)
我:為什麼?你都可以搜尋得到附近的裝置了!
Dev:那是他們願意被搜尋到,但如果他們設定狀態顯示為離線 (就像正妹一樣),你沒有丟訊息給她看看,是不會知道她是不是真的不在。
我:原來藍牙網絡就跟社群網絡是一樣的道理啊…

顯然 UX 跟我一樣不常使用藍牙,但我們都很熟悉社群。所以經過一番溝通後,UX 給了我新的 wireframe。

恩,找到的裝置直接點一下就連線,然後他就顯示已連線 (Connected)。而進階設定裡面可以看到配對過的裝置,可以取消配對…。配對、連線都有了!

第二版的示意圖(1)第二版的示意圖(2)

UX:嘿~我的使用者才不在意他們只是朋友,既然茫茫機海中看到你了,就直接在一起吧。
我:是啊,為什麼要去理解「配對才能連線」這種事呢,太複雜了!
Dev:是可以啦…
UX:至於好友 (配對)列表,他可以去「進階設定」裡看。
Dev:可是,你知道看不到也可以在一起嗎…?
UX&我:(大驚) 這是今年暑假最淒美的人鬼戀情嗎?
Dev:是的,其實大多數情況下,連線都是這樣發生的。已經配對過的裝置,現在可能是看不到的,但卻可以連線,因為我們知道彼此的存在 (address)。(羞)
路人:奇怪,為什麼我從來都沒意到這件事情呢…啊!我知道了~因為我都會在配對裝置列表上看到它。
Dev:沒錯!
UX:所以配對列表是很重要的啊… 那應該要突顯它才是。
路人:那有可能我不認識你,也看不到你,但你卻要求跟我連線嗎?
我:這是被冤鬼纏上嗎…
Dev:不,這是一方認定分手 (刪除所有記錄),一方低調要求復合 (隱形要求連線)。可能的,但我們得先從朋友 (pair) 做起,好嗎?
在確定眾人皆瞭解後,UX 又重新設計了第三版。
第三版 wireframe 的畫面

至於這是不是最終版的設計呢?請容許我賣個小關子。

「使用者經驗設計」是一個漸進式的過程,在目前技術可行的前提下,讓使用者有最直覺、最完整的體驗。一個按鈕的位置、選單的層級、還有文字說明,都是被討論過,甚至實作後再加以修改的。不斷地檢討與改進,才能夠成為好用的 OS 。

你,可曾用心瞭解過藍牙 (你所開發的app) 的小世界呢?

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *