JoeOkami
回到案例列表

03

Wi-Fi Planner Pro

同一張熱點圖要服務兩種尺度的判讀需求 —— 小型辦公室與大型廠區。資訊密度是這個案子的全部。

Wi-Fi Planner Pro 介面:訊號熱點圖疊在平面圖上。

一個直觀、功能強大的 Wi-Fi 熱點圖介面,幫使用者診斷、優化與管理無線網路,不論是小型辦公室還是大型工廠。

TL;DR — 三句話看完

  1. 兩種使用者的差別不在他們看到什麼,在他們是來問什麼。一邊問「我這台 AP 到底該不該移」,另一邊問「哪一段不能斷」。

  2. 難服務的是小辦公室,不是廠區。廠區的人知道 −67 dBm 是什麼意思,我只要不擋路;小辦公室的老闆看不懂,工具得幫他把量測結果翻成建議 —— 而設計風險就在那個翻譯裡。

  3. 資訊密度我只用一條判準:這個資訊會不會改變使用者下一步的動作。不會就收起來。工程端希望參數全攤開 —— 我沒有爭「顯示或不顯示」,我把問題換成「打開這頁的前 30 秒要回答什麼」。

我負責的部分

  • 資訊設計
  • 介面設計
  • 熱點圖視覺系統

平台

  • Web

客戶與時間

  • D-Link

精簡版這是精簡版 —— 只寫了現在回看仍然站得住的幾個決定,沒有逐章展開。想聽完整的過程隨時可以聊。

跟我要完整版
01挑戰與目標

同一張圖,兩個不同的問題

小型辦公室跟大型廠區的差別不在圖,在他們是打開這張圖來問什麼。

小辦公室是單層、一眼看得完,背後的問題很窄:我這台 AP 該不該移? 廠區是多樓層、多區域,中間還隔著金屬貨架跟產線干擾,問題的形狀不一樣:哪一段不能斷? 而且廠區的人常常不是自己要看,是要拿去跟主管或客戶交代 —— 那讓產出變成一份文件,不只是一個畫面。

反直覺的是哪一邊比較難服務。是小辦公室。 廠區的人是專業的:他知道 −67 dBm 代表什麼,也不需要別人幫他解讀,工具能做的最好的事就是把數據給他、不要擋路。

小辦公室的老闆看不懂 dBm,也不該被要求看懂。對他來說,量測結果必須被翻譯成一句建議 —— 而這個產品所有的風險都在那個翻譯裡。講太滿,等於憑不足的證據叫人去搬硬體;講太保守,等於交回去一張很漂亮但什麼都沒回答的圖。把那一句話的分寸抓好,是這個案子裡最難的單一件事。

02資訊架構與流程

決定什麼留在畫面上,只有一條判準

這個資訊會不會改變使用者下一步的動作? 會,就留在畫面上;不會,就收起來。判準就這一條,而正因為只有一條,那一百個小爭議才收得掉。

所以預設畫面只有四樣東西:平面圖、熱點圖、AP 位置、圖例。通道、發射功率、牆體衰減全部收進進階 —— 不是因為它們不重要,是因為「知道現在是哪個通道」不會改變「這台 AP 要不要移」。

工程端不同意,而且理由站得住。他們每一個參數都看得懂,藏起來對他們就是損失;而且一個看不到的功能,事後會被記成一個沒做的功能。

我沒有去爭要不要顯示。 那個問題只能用意見回答,而我們兩邊都有意見。我把它換成另一個問題 —— 主要使用者打開這一頁的前 30 秒,需要被回答什麼? —— 然後不再繼續討論,改用原型跑任務測試。

最後落在:預設精簡,而且進階模式會記住你的設定。專家開一次就不會再看到簡單版;第一次用的人也不會一進來就被淹沒。沒有人永久讓掉什麼 —— 而那通常就代表,這場爭論從頭到尾是關於預設值,不是關於能力。

03介面設計

比較熟悉的色階,贏過比較好的色階

兩種色階被提上來:紅到藍,還有綠到紅。

綠到紅是大家第一個會想到的,因為它不用解釋就對應到「好」跟「壞」。它也有一個已知的問題 —— 那是紅綠色覺辨識障礙最容易整組垮掉的配對,而在一張全部工作就是「分辨不同區段」的圖上,這不是一個小註腳。

最後選的是 紅 → 橘 → 黃 → 綠 → 藍,理由既不是它比較優雅、也不是什麼理論。是這群使用者本來就在讀這個色階。B2B 的網路軟體用這條漸層用得夠久,IT 和工程人員不用看圖例就知道哪一端是哪一端 —— 而在一個「打開來快速回答一個問題」的畫面上,一個不需要去對照的圖例,比一個抽象上站得住腳的配色值錢。

這個決定是跟 IT 和 RD 討論出來的,不是在設計工具裡想出來的,這樣講才誠實。專業使用者腦子裡已經有的那套色階,是一個限制,不是一個偏好 —— 你可以推翻它,但你接下來就得花使用者的注意力去讓他重學一件他本來就會的事,而這個產品沒有那個餘裕。

在找產品設計師嗎?

我目前開放產品設計的職缺機會,進辦公室或遠端都可以。任何一個案例都能細講。