布萊恩的創業小窩

本篇為「想使用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：不要害怕重複顯示引導指示，只要放在不同位置就好 ...

本篇為福斯UI設計篇，關於Audi的UI設計，請點此  連結  以及 此連結 這篇除了提到福斯與UI設計的關係,還要告訴你,這品牌近期做了那些突破! 不落後於 Audi，福斯跟進「數位優先」視覺辨識 ▲ 新的福斯LOGO設計由原本的「仿3D」變回2D平面icon，就可零違和地嵌入於更多裝置的 UI 視覺設計。 而 2019 年 7 月，德國的另一間汽車公司-福斯汽車也宣布將推出全新 LOGO。同年的 9 月 10 日，在法蘭克福國際車展前夕的「福斯之夜」上，福斯正式發布了全新的品牌標誌——也是將原本的立體風 Logo「平面化」，他們進而表示，品牌接下來將會有完全嶄新的商業策略！ ▲ 福斯LOGO進化史-一切的LOGO變化都是為了符合當時的 UX 由以上影片我們可以看到：福斯Logo的進化史，都是與當時的UX有關。 而去年2019 年，最新的 LOGO 整體造型，依然使用字母「V」和「W」上下組合的形式，不過變得更簡單直觀。原先設計成浮雕概念的立體造型，改為平面化 2D 風格，「V」和「W」兩個字母中間的空隙變大，「W」的底部和外部圓圈完全脫離，留下了空間。 其實「扁平化」是現代數位時代的設計趨勢，除了福斯，許多知名廠商的 LOGO 也都改頭換面、採用扁平化的設計，如 Google、YouTube、Netflix、ebay、Citroën等。 扁平化設計為去除陰影、漸層和反射光澤等3D要素，通常使用高亮度的色彩，搭配無襯線字體，呈現出簡約現代風格。目的是為了減少不必要的裝飾元素，而將核心元素明確傳達。 除了LOGO， UI 設計也正流行扁平設計。 同時，這種簡約的設計無論在傳統印刷輸出、電視或螢幕相對較小的智慧手機上，都能更好更快地呈現，也更符合現今數位化的潮流。   新LOGO也是新戰略 值得注意的是，福斯這次不只換了Logo，連品牌識別聲音也換了。在過去，福斯汽車的廣告，結尾都是低沉渾厚的男性嗓音，但福斯大這次大破例，請到了德國著名的女演員露易絲‧海爾姆（Luise Helm）獻聲，打破多年聲音形象，改以溫暖、愉快、自信的女性聲音取代。 以後的福斯廣告，都將使用女聲來宣讀「福斯」品牌名了。 ▲ 福斯熱門主打車...

奧迪最新的UI設計竟也能讓使用戶和品牌做互動?一起來看看它是怎麼做到的! 本篇為Audi篇的下集，上集「為落實“數位優先”的UI設計...Audi竟將LOGO壓扁了!（上）」請點此 連結 字體 ▲ 新 Audi Logo 與字體搭配的準則。 新的 Audi 字體也隨著新的 logo 曝光！ Strichpunkt 表示：隨著新的「簡潔有力」的清新風格的 Audi logo。 ▲ Audi 標語的使用範例（總是以小型字體出現在畫面的角落）。 圖標 ▲ 各式新的 Audi UI icons 為線條化設計，靈感來自精確的車輛工程設計圖 而用於網站、app、車用數位裝置的 2D 線條線條化圖標，Strichpunkt 表示設計靈感是來自 在Audi 車輛研發設計時，工程師繪出的精確的工程設計圖。 ▲ 新的 Audi UI icons使用範例 影片 ▲ Strichpunkt 替出現於新 UI 介面上的 Audi 影片立下「S 型曲線」原則：「一開始強而有力的加速啟動，然後在結束時迅速減速」。 而所有出現在數位裝置上的 Audi 形象影片動作，也都遵循著 S 型曲線模式，Strichpunkt 表示「一開始強而有力的加速啟動，然後在結束時迅速減速。」 奧迪也為此新視覺辨識制定了品牌指南，製作「 Audi 品牌指南網站 」，各式資源開放給大眾免費瀏覽、下載，包含全新設計的 Audi Logo、字體、形象圖片、影片，甚至連 HTML 原始碼、被淘汰的設計都在上面，讓用戶能親自感受參與他們品牌的重塑過程。 現在，Strichpunkt 將在子網域上啟動一個互動式工具，使用戶們都可以模擬奧迪風格的設計、字型、排版，背景和顏色。而之後，該工具會告訴他們其模擬作品是否符合 Audi 的設計原則與方針。 是不是沒想到UX和UI設計也能有這種功能！ ▲ 各式新的 Audi 廣告，應用了所有 Strichpunkt 為 Audi 打造的 Logo、構圖、字體、等元素。 Strichpunkt 表示：這一連串的互動式工具，都是為了讓新的 Audi 品牌設計方針能「更平易近人」，與 Audi 的新品牌識別「acces...