布萊恩的創業小窩

5. 按鈕在版面上的順序位置 循序漸進的按鈕順序如同使用者和系統之間的對話，在  UI  設計的過程中，不斷反問自己或換位思考，使用者點選按鈕的步驟，會希望達成什麼目的，並進行相對應的設計。比如：上一頁/下一頁的按鈕，左右方向的箭頭按鈕是常見呈現方式。 6. 避免過多的按鈕分散注意力 為了增進  UX  使用者體驗，會在同個頁面上增加各式各樣的按鈕，一不小心數量會比預期來得多，便會產生分流降低點擊率。比如：如果主要目的是想讓使用者點選頁面下載按鈕，使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開，確保使用者點選到目標按鈕。 7. 加入音效或動畫產生互動 藉由人的五官體驗，在按鈕的設計上傳達聲音與動態效果加深使用者的體驗，試著營造出如同按鈕圖示呈現的舒適情境，當使用者點選時，產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時，通常會認為系統沒有接收到指令，而不斷的重複點選，便會導致多次不必要的操作。 方便點選的按鈕還有許多值得探討的  UI  設計技巧，以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節，探索各個細節對目標的點選，更能達成自己所理想的轉換成效。 本文為下篇，上篇請看此 連結

按鈕在網站上出現的頻率是相當高的，猶如實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（ UX ），如何透由按鈕的佈局轉換為交易，並進一步提升營收。 雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。 按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。 UI/UX  設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明： 1. 互動式的按鈕設計 建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。 線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固， UX  使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。 以下是大多數用戶熟悉的幾個按鈕示例： 帶有方形邊框的按鈕 帶圓角的按鈕 帶陰影的按鈕 幽靈按鈕 除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。 2. 方便搜尋版面上的按鈕位置 使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。 為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。 3. 指令清楚的按鈕標示與說明 帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠...

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 4 篇，第 3 篇請點此 連結 用A/B測試改善 UI 設計 的例子終於要在今天分享完成啦,希望大家都將收穫滿滿~ 範例24：嘗試銷售「好處」而不是功能 克里斯‧古利博（Chris Guillebeau）在《100美元創業》（The $100 Startup）一書中寫道，人們真的很在乎愛情、金錢和自由，也希望同時能減少壓力、衝突和麻煩。 人們在挑選產品時，考慮的點除了性能外，更在乎這個產品能如何帶給他們好處 －－ 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在，也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容，說明能為顧客帶來哪些好處吧！   範例25：謹慎設計「沒有符合的產品」的網頁 如何在網頁上呈現數據是一套學問，只是許多 UI 設計 擅長表現 1000 個以上的數據，結果卻忽略了「零數據」的情況－－當使用者想搜尋符合特定條件的商品未果時，跳出的「搜尋到 0 個商品」。或者另一個情況：當初使用者查看您的網頁時，在沒有任何引導的情況下操作，導致顯示 0 數據，這會有讓使用者感覺被忽略的風險。 此時，有 sense 的 UI 設計 師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面，讓使用者感受這個網頁是有人性的，營造暖心的 UX 使用者體驗！ 推薦閱讀： 改變 UI/UX 竟讓友情加溫、麵包烤更香！Netflix 紀錄片揭露設計師巧思   範例26：讓使用者能選擇「不參加」 傳統行銷策略上，會只有一個寫著「我想要...」的方框（check box）以供勾選，若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選，常讓使用者一不留意就「被答應」了 。 更好的做法是將正反向的選擇各放一個方框，告訴使用者「你可以要也可以不要」，然後再替使用者默選其中一項。 因為此舉可以減緩當使用者不想參與時的牴觸感，亦可可讓使用者潛意識產生「所有人都照原樣進行，那我也這樣做吧」的想法，進而讓我們的目的更容易達到，還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。 範例27：保持一致性，避...

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 3 篇，第  2  篇請點此 連結 前面改善 UI 設計 的例子你都看懂了嗎?準備好了我們繼續往下看~ 範例17：顯示出項目的即時動態 在 UI 設計 中，常會以不同方式表現出項目的不同狀態，例如：E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。 即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作   範例18：把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」 想像一下若是眼前的網頁上有兩個按鈕，其中一個標示「能替你省下一大筆錢！」，另一個寫著 「點這裡註冊」，肯定大部分使用者都會被前者吸引。 前者就是所謂「能帶來好處的按鈕」，能替使用者產生價值；而後者則是「任務導向的按鈕」，代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。   範例19：直接操作比多階層下拉式選單更直覺 直接處理畫面上的資訊，有時會比使用整合工具列還直覺，如多階層下拉式選單（context of button）雖然十分常見，但過多的階層可能會增加操作的步驟，所以下次在煩惱 UI 設計 該如何處理時，不妨考慮減少階層或直接操作的方法。   範例20：若當下就可以操作，就不要再多開分頁！ 當我們希望使用者做有價值的動作，如：留下聯絡方式、基本資料等，最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層，會比讓使用者連結到別頁輸入資料來的好。 精簡流程、讓使用者花最少的時間就能了解頁面資訊，並將簡單易懂的表單放置於該頁面上。除了方便性，也可藉此讓使用者預估填寫所需的時間，會更加增加使用者填寫的意願。   範例21：以過渡形式表現操作導致的 UI 介面改動 當使用者在與 UI 介面互動時， UI 設計 成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為，也能協助使用者理解介面的使用方式 其實在變化過程中增加一些動態變化，也能達到尊重使用者的效果：故意延遲、以過渡形式表現尺寸或位...

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 2 篇，第 1 篇請點此 連結    改善 UI 設計 例子的分享才剛開始呢,繼續學習吧! 範例9：清楚描述 TA (目標客群)，而不是宣稱「適合所有人」 網站是瞄準特定族群還是面向普羅大眾？即使鎖定客群的策略有風險，讓網站在短期內失去一些潛在客戶，但誠實與公開透明才是與消費者信任的基礎。 網站清楚描述產品或服務的目標族群畫面，可以讓網站吸引到相似特質的使用者，同時透露出的「排他性」會讓使用者感到自己是被重視的，並建立出親近感。 範例10：不會有人被優柔寡斷吸引，多使用肯定語氣吧！ 當你收到一封語句充滿「也許、可能、說不定」的信件，以及收到一封肯定且充滿信心語句的信件，哪個寄件人會讓你覺得比較能信任？相信大部分的人都會認為答案明確的信能讓人安心吧！ 優柔寡斷會降低信任感，如果網頁上常使用問句或不確定性的字詞，例如：有興趣嗎？想購買嗎？會讓消費者覺得你對產品或服務信心不足，這時候可以使用更具權威性、專業性的語句，像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。 範例11：善用色彩對比度來凸顯號召性用語 醒目的行動呼籲性（CTA，Call-to-action）可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA：如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性，提升被使用者注意到的機會。 範例12：標示出產品的原產地 為產品添加名稱、圖片與原產地標示都能展現出 UI 設計 中獨特性的方法。特別是提到國家、地區或城市，因為這正如人們自我介紹來自哪裡一樣，是一個非常人性化的交流方式，也會顯得更加友善。 另外，說明原產地故事也能讓產品與產地名聲達到雙贏。 範例13：別讓使用者填太長的表單 人類天生就牴觸勞動密集的行為，這個理論同樣適用於讓顧客填寫表單，每多一個表格就增加使訪客轉身放棄的風險！並不是每個人都能飛快地打字，更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答，並盡可能減少表格數量。 如果必填欄位真的為數眾多，可以嘗試讓最重要的資訊先讓使用者填寫完，提交後再出現一個單獨的頁面，請使用者繼續填寫第二...

想改善 UI 設計 卻不知如何下手嗎?試試看A/B測試吧,今天給你機會了解你! UI 設計 的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計 ，先幫忙把常見的網頁排版都測完，幫助 UI 設計 師/網頁設計師們省下許多功夫！ 什麼是A/B測試？ A/B 測試（A/B Test）運用了統計學的原理，顧名思義就是眼前有「A 版」與「B 版」兩種方法，為了測試哪種方法能獲得更好的市場反應，將 2 種版本同時上線，將消費者導入 A 或 B 版網頁做測試。 A/B 測試的優點在於可以得到實際的數據，而非依靠主觀意見來決定網站的架構與 UI 設計 ，也能不落傳統思維的俗套。只是各個版本需運行一段時間，待累積足夠的數據，才能確保測試的準確性，也需耗費不少成本。 範例1：嘗試使用單欄排版取代多欄 多欄式排版的  UI 設計 有分散頁面焦點的風險，而單欄式排版可以更好地安排內文敘述，同時從上而到下引導讀者的視覺動線也更加直覺，也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。 範例2：在行動呼籲前先給予誘因 在 UI 排版上，先給予像是「送禮」等誘因，是一種基於互惠原則的有效說服策略，同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然，但嘗試表現出友善的態度，如一封感謝信、小紀念品等，也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整，也許會在未來帶來出乎意料的好處。 範例3：嘗試合併類似功能的欄位，避免版面破碎化 範例4：讓社群證明價值，不要自吹自擂 社群的廣泛好評對於提高轉化率是很好的說服策略，當客戶看到其他用戶支持並討論您的產品服務，會增進他們想深入了解的動機。 嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明，並放在網頁上吧！ 範例5：不要害怕重複顯示引導指示，只要放在不同位置就好 ...