UX designer 的好朋友:一個讓你「好像」瞬間變專業的 checklist

最近和某個設計師有段有趣的對話,行走江湖那麼久,很多時候我們因為自己多吃了幾年飯而覺得自己很 senior,事實上其他人卻好像完全不是這麼想 … 到底該怎麼定義 senior 與 junior 呢?

許多人認為資深跟資淺的差別是在於腦子是不是比較靈光,比較有創意有想法 … 我卻有不同的想法,憑良心講,很多時候我覺得 junior 比我們這些老人更有創意,因為沒有包袱跟過往經驗的束縛,他們更能提出有意思的 idea,就好像設計師跟凡人的差別從來也不在於設計師比較 creative,而在於設計師能夠將那些創意具體化的實現,而凡人卻無法。

 

既然如此,junior 和 senior 的差別是什麼呢?

過去我會回答「是經驗,差別在於經驗」,這兩個字聽起來很抽象,經過和大量不同 level 與國籍的設計師交流後,我發現造成兩者之間差別的「經驗」,其實是體現於「對於細節的執行程度」。

「你的意思是說 senior 做事情比較仔細,而 junior 比較隨便嗎?」

一個 junior 的同學憤恨不平的說。

 

沒錯,我就是那個意思(沒有要掩飾)! fancy 的想法人人都有,卻不是每個人都有辦法將這個想法在經過周密的思考後,general 成真正可執行的設計,一個無法將想法 break down 到細節的設計師,恕我直言,你就只是個 PM 而已, 俗語說得好:「少壯不努力,老大當 PM」就是這個道理(毫不意外,每次都要酸一下 PM 就對了)。

「我覺得我自己超仔細的!仔細小天王就是我!」

另一個 junior 已經在一旁暴跳如雷了。

 

很多 PM 也常以為自己的想法超棒,一秒鐘 drive 幾千萬上下 … 但事實證明,這世界上不是只有「你以為」而已。

坊間有太多的演講跟書籍教我們要如何 think big,卻鮮少有人告訴我們該怎麼 dive into details,事實上那卻是最基本,也是最容易用最快的速度讓對方覺得「你真的好專業」的方法,有鑒於每次 internal review 我家小朋友的設計時,我都會重複的拋出一樣的考古題,我特別為他們做了一個 check list,讓他們每次在進行 review 前都先確認自己已經完成了 check list 上所有的項目,而這個 check list 名字,姑且就稱之為「一個讓你 ”好像” 瞬間變專業的 checklist」。

 

分享之前先註明兩件事:

  1. 我們家的 UX designer 負責的是 interaction + visual design,所以這些 check list 上的 item 會涵蓋兩者。
  2. 這東西真的是給 junior 看的 common sense,身為 senior 的新警察如果覺得沒啥用,麻煩把警棍跟電擊棒收好。

 

在與你的主管或是 stakeholder 進行 design review 之前,請先確定以下所有的 item 都已經完成:

  • 如果你只是想討論 concept 而不是完整的設計成品,請用 wireframe
  • 開始製作 mockup 之前請先確定這次 review 的目的是什麼?因為一旦你 present 時使用的是擬真的 mockup,所有人都會瞬間開始 dig 所有的細節。確定這次的presentation 真的要使用擬真 mockup 之後,請確定接下來的每一項都有確實完成。
  • 所有在 mockup 上的 element 都請保持合理的 margin 和 padding
  • 任何很奇怪或是沒有對齊的突兀元素都會讓你的 mockup 看起來很不專業。
  • 不要出現無效的連結
  • 確認所有的 link 都確實可以點擊,特別是那些跟你 presentation 相關的功能
  • 盡可能地 follow 公司制式的 design guideline 和 pattern
  • 不會有人覺得在明明已經有這樣的 pattern 的情況下你還硬是要設計一套新的是一件很 cool 的事情,只會被覺得「真是個 junior」。
  • mockup 上盡可能使用公司產品中真正會出現的圖片
  • 不要使用圖庫裡那些極度美麗的圖片,因為 whatever 上線後根本不會長那樣,你只是在騙自已,很多時候你的 mockup 看起來很乾淨簡潔只是因為用了那些失真的圖片。
  • 盡可能地考慮每種 use case,即使是很極端的 case,不要 propose 只給完美 use case 的 solution

 

這裡有幾個可以作為 check 的參考:

  • 圖片的形狀:當圖片是動態生成的時候,我的 mockup 在放了 長=寬、長>寬、長<寬 的圖片是什麼樣子?
  • 字數和產品數量:當文字或產品數量是動態生成的時候,最多跟最少的數量限制是多少?
  • Responsive design
  • 尚未進行任何設定時,這個產品 by default 的 experience 是怎樣?
  • 當產品是要靠動態生成 content 時,沒有 content 的 experience 是怎樣?
  • 第一次使用這個產品的用戶的 experience 是怎樣?

確定你已經盡可能地思考過所有的 error handling,無論是用哪種工具,確認你的文件有著非常有組織,任何人都能一目了然的 flow。有些時候你就是無法站在所有 stakeholder 面前 present 你的設計理念,他們很有機會會用 email 的方式拿到你的設計,確定你的設計在那個時候他們還是看得懂。

 

真的不需要做出超級擬真的 prototype

Prototype 只是一個幫助溝通的工具,如果你真的做不出來就不要做,不需要花很多時間在上面,那種時候只需要做一些靜態的 mockup 然後描述清楚你想要的 interaction 就可以了。

如果你想要在 mockup 上放 icon 或是插畫,double confirm 你是不是真的需要他們!

icon 和插畫在 UI 上是被拿來幫助人們更了解這個功能的含義,這世界上沒有比直接用文字寫出來更好的方法,如果你 icon 的存在沒有辦法幫助 user 辨識,請不要放。

這裏有個錯誤的案例:

00

 

在這個案例裡,基本上甚至沒人注意到那些 categories 旁邊有放 icon,user 也無法只透過那些 icon 了解它的含意。因此,一旦你擁有使用 icon 或是插畫的慾望,請先確定你的情況有沒有符合以下的情境:

  • 空間很有限實在放不下文字,必須得用一些比較小的 icon 來表現。
  • 這是一個通用的 icon,完全不需要提示的情況下大家都能了解那是什麼(像是 download 的 icon)
  • 文字實在太多了,有些比較重要的部分需要用插圖來吸引人注意。

 

不管是 icon 還是插畫都是用來直接傳遞 key message,不管這個 icon 畫得有多麼漂亮,只要 user 無法立刻知道他的意思,那它就 fail 了。確定非用 icon 不可之後,這裏有一些設計 icon 時需要注意的小技巧:

  • icon 必須要清楚簡潔,不要放一大堆不相關的元素在裡面,即使很漂亮也不行。

a

在這個案例裡,key message 是「資料分析」,即使 A1 這個 icon 比較漂亮也比較完整,但是其實光看到 A2,user 就已經能夠抓住含義了,筆電的圖在此處的存在實在沒什麼必要,反而會有點失焦。

b

在這個案例裡,即使這三個 icon 的意圖都是要傳達用戶可以透過電腦做某些事情,但是當這三個 icon 放在一起的時候,你會發現電腦的存在真的很重複,試著把不斷重複/相關度較低的元素刪掉,將重點 focus 在這些 icon 之間跟彼此不一樣的 metaphor。

  • 如果你需要需要一整個 set 的 icon 或是插畫,確保這些 icon 彼此之間的 style 是一致的,這裏有一個不好的案例:

c

很明顯的,最右邊那個 icon 完全不是同個家族的,不管他被設計的有多漂亮,都會讓人瞬間有種「真的很不專業」的感覺。

  • 一旦大部份的人都無法一眼看出你設計的 icon 是什麼意思,那就意味著這個 icon 真的不 work,別再掙扎,用文字就行了!這裏有一個不好的案例:

d

毫無疑問的,紅色框框裡面那個 icon 我到現在都不知道是什麼意思?是鋼筋水泥的鳥瞰圖嗎?

以上是我目前能想到的一些幫助 junior 工作的小撇步,如果能夠養成習慣在 present 設計前先 walk through 一遍這個 check list,present 過程中再適時的夾雜幾個感覺很高大上的英文單字(但是英文的數量要控制好,量太大會有反效果可能會被討厭)… 保證可以讓人瞬間有一種「這個人好像很 senior 耶」的感覺。

然而如果你皺著眉,說這個 check list 好長,有沒有更精簡的版本?唔,那你可能比較適合去當 PM。

本文章已獲得作者 Kit Lin 授權,原文:UX designer的好朋友:一個讓你「好像」瞬間變專業的 checklist

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter