布萊恩的創業小窩

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

在那些前端工程師必學的CSS裡,今天就來教你那個叫"浮動屬性"的小傢伙~ CSS 的 float (浮動) 屬性 CSS 的 float (浮動) 屬性，是 前端工程師 在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。 何時使用？－float 浮動屬性的使用時機 使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。 如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法） See the Pen Float-example-1 by Tedutw ( @Tedutw ) on CodePen . 承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法）： See the Pen Float-example-2 by Tedutw ( @Tedutw ) on CodePen . 這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況 承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right ;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）： See the Pen Float-example-3 by Tedutw ( @Tedutw ) on CodePen . 你知道 CSS 的浮動屬性總共有三個參數嗎？分別是：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的拉！如上方兩個例子所示。而 none 就是不使用浮動參數的意思。 下方是另一個文繞圖...

想成為前端工程師?今天讓我們一起來了解定位元素! 為了要設計出更複雜的網頁前端版面， 前端工程師 都必須知道 CSS 的所有「position 屬性」。 如下所示，它有一～大堆屬性值，這些屬性值不但不好理解，也不好記憶！而且稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。 別煩惱了！現在將會一個個介紹屬性，如下。也建議各位想當 前端工程師 的學員們把這頁加入網頁書籤中！以便日後方便查詢唷！ See the Pen CSS:Position 範例 by Tedutw ( @Tedu tw ) on CodePen .   CSS：Positioning Elements 定位元素 CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。 所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。   靜態定位（position: fixed） 「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。 靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。 See the Pen position_static by Tedutw ( @Tedutw ) on CodePen .   固定定位（position:fixed） 固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定位，固定定位（posi...