【PM Sharing】淺談介面設計＆流程設計

在時賦科技中可大致分為PM team以及RD team兩組夥伴。而PM Sharing可視為我們每週PM team的一個分享會，內容不侷限在嚴肅的發言，可以包括各種對客戶的吐苦水、學習各行各業做事技巧的時光，當然也包含手邊工作近況討論，以及每週將會訂定一個主題分享關於專案管理的各式Tips！

預計接下來將會持續不定期地和大家分享關於我們Sharing的精華供大家參考、討論～

本次分享的主題是關於「介面設計＆流程設計討論」，為了給使用者有更好的體驗，著手在Wireframe時要注意的眉眉角角很多，以下就來一一破解在介面設計上的小巧思吧～

一、提示視窗的按鈕

我們在日常生活中最常遇到的應為「提示視窗」（Alert、Popup），看似簡單的一個小視窗但背後卻藏著各種關於介面設計的小巧思，提示視窗是一種「以文字與使用者對話的使用者介面」，通常出現的時機是詢問使用者接下來的操作為何？同意或不同意等等，但要考慮到使用者並不希望正在介面進行中的工作被打擾，文字的提示內容與按鈕的文字該如何呈現變得格外重要，哪一種呈現方式才不會讓使用者做出錯誤的判斷呢？這就是在介面設計時需要站在使用者的角度去設想的地方了！

另外，按鈕擺放的位置也會影響使用者的行為，甚至如何引導他們去完成設計師希望他們做的事。 通常若有正負兩種行為的按鈕，會讓「正向行為」的按鈕擺放在右邊，「反向行為」在左，這是因為人們習慣由左而右閱讀，這樣的安排能夠讓人們讀完所有訊息後，視線停留在「正向行為」的按鈕上。

以下為常見的例子，詢問使用者：「確定要取消編輯中的內容嗎？」

但以上兩種情況皆容易讓使用者混淆，亦無法剎那間直白的理解按下後系統到底會做何行動，如此一來，使用者可能誤選到與自己原先要執行的動作不相符的選項。

因此，應改以更直觀的設計：

此設計展現出右方按鈕設計與同意上方描述的行為一致的動詞也就是「捨棄」，因為是具有破壞性的操作，所以使用紅色以加強警示；另外左邊按鈕使用不同意上述行為的詞語，也就是「取消」，藉由此設計讓使用者更直覺的點下欲執行的按鈕。

進一步延伸：警告框的按鈕文字，純粹提示用意

有時，警告框只是要告知使用者系統狀態的改變，並沒有要求使用者選擇執行哪個動作，此時設計按鈕可以簡單地放上「好」即可（如下圖），避免使用針對對話框的動作的詞彙如「返回」、「關閉」等不必要的解釋，因為這是理所當然的。

二、選項按鈕

不同種類的按鈕設計，都源自於現實生活中的物件。按鈕設計成各式各樣的形狀，將無形的功能連結到過往的生活經驗，賦予那個動作獨有的「體驗」。

而在選項按鈕的設計上大致可分為四種按鈕：

(圖示出處原文)

• Radio button 為收音機的圓形按鈕，過去收音機的按鈕通常是一整排好幾個，一次只能點選一個，如果按了暫停，先前按下去的按鈕就會自動跳起來。
  而用於現今的按鈕設計，通常在填寫資料時的性別選項「男」、「女」、「非二元性別」做單一的選擇時使用。
• Checkboxes 是用來選取列表中一個或多個選項。
  例如在問卷中調查使用者喜歡的音樂類型有哪些「搖滾樂、抒情、情歌、獨立樂團」等等。
• Single checkbox 可視為選項只有「是」、「否」兩種選擇，為單選按鈕設計。
  舉例來說在加入會員時填寫資料後，最後通常會詢問是否同意本公司寄送相關活動通知至您的email。
• Toggle switch 是模擬老式電源開關，推動小桿子能夠切換兩種模式。
  最常見的像是wifi的開與關、白天模式與夜間模式的切換等等。

三、搜尋欄位

在設計搜尋欄位的運用時，可以想想在什麼情境下使用者會想利用搜尋欄位來尋找內容，而在搜尋的欄位中，可以在欄位上提示使用者在搜尋欄位的部分，例如：「請輸入歌手、歌曲、歌詞和其他內容」，這種方式能輔助使用者知道在欄位上可以輸入什麼，加快使用者尋找相關資訊及內容。

在做專案時，為了因應不同的需求及條件，在做介面設計時是需要考慮到不同的使用情境及使用方式，在什麼樣的功能中放置最佳的元件配置，都是PM在前期規劃頁面定義時需要注意的，例如避免雙重否定的詞彙，取而代之的是使用可讓使用者預期到結果的動詞。藉由以上的設計過程，可讓使用者有更佳的使用體驗。