2021 年 7 月 19 日

網頁設計的趨勢|強調使用者體驗才是真理

前言

常能在設計界聽到一句話說:「好的使用者體驗設計帶你上天堂」。而最近炙手可熱的UI/UX設計,也就是在強調UI(使用者介面)和UX(使用者體驗)的重要性。不過先前我們已經介紹過UI和UX的關係了。所以我們今天主要來深入探討影響UX的重要因素和如何它們如何幫助您改善您的網頁設計。

首先先來介紹什麼是UX,也就是我們說的使用者體驗,指的是使用者與公司網站、服務、或產品之間的互動,所產生的感受、看法。以網頁訪客的角度來說,一個簡潔並且動線清楚的網頁,不僅可以讓他們在初始就對品牌擁有一個好印象,甚至可以更有效達成網站目標(購買率、顧客轉換率等);而做為一位UX設計師,我們的主要工作便是從用戶的角度為出發,擔任品牌和顧客溝通的橋樑,讓用戶最終可以獲得他們想要的結果。

以下我們將UX設計分成三個階段,分別是使用者洞察(顧客到底想要什麼?)及建立網頁架構(我們該如何設計以符合顧客需求)和產品回顧(我們是否有達到最終目標?)以下介紹影響這些的要素:

UX 設計

1. 使用者歷程


簡單來說,就是設計師要站在消費者角度去操作整個頁面,嘗試找出消費者的癥結和需求,並以此下去設計整體網頁架構

A. 建立使用者情境

首先,你必須先去了解你的目標客群是誰?他們擁有著什麼痛點?以及你的網站是否能滿足他們的需求或是解決他們的問題?舉例來說:倘若在疫情時期我有需要快篩的需求,那我是否能在網站中快速找出附近是否有相關的快篩點,以及交通、費用等相關資訊

B. 為使用者設計情境圖

再者,你必須去思考使用者抵達你的網站後,它會從哪裡開始,並且去完成它的目標,像是可能要找尋附近相關快篩站的話,必須先使用搜尋框輸入目的地(或是直接拖曳至相關地點)     並且選取你最符合需求的地點           查看聯絡資訊等,這段歷程追求的是快速直接的抵達目的地。

C. 開始著手設計你的網頁

在了解完消費者的整體需求後,你便可以開始思考要將這些功能擺至哪些位置,頁面該如何配置?以上述的舉例,我可能會將搜尋功能放置在上面顯目的地方,並且將重要資訊盡量呈現清楚,避免消費者還要查詢其他相關網站。

2.簡潔的頁面設計


網站的首頁相當於對人的第一印象,也通常是使用者停留時間最長的頁面,因此在首頁的頁面安排上要盡可能地簡潔明瞭(Keep it short and simple),只放最重要的內容就好,除此之外,要讓其他的頁面是容易回到網站首頁的。網站首頁的架構設計落在UX的身上,UX需要知道使用者進入你的網站時會需要使用到哪些功能,想要獲得哪些資訊,來架構你的Menu選單和層級。而像是根據網站設計系列|如何有效的運用網站設計中的留白這篇文章指出,適當的留白不僅可以大幅提升頁面的質感,更能夠在重要的時刻抓住瀏覽者的目光。而以下有另外幾個小撇步可以幫助提升網站頁面:

  • 簡單的配色設計:通常不要在頁面放置超過4個顏色,這樣只會造成瀏覽者眼花撩亂的效果,選擇簡單明亮的配色或是強烈的撞色較能凸顯品牌特色或是帶給瀏覽者深刻的體驗。
  • 文字的運用: 文字的運用不外乎就是字體的選用、字重粗細的應用、字間距的設定等等,一個設計的好壞,往往可以從文字的使用感受出來,屬於魔鬼藏在細節中的設計重點。
  • 元素的排列: 網頁上除了文字以外,還會有影片、動畫、圖片及其它元素,用來改善使用者體驗或提供有用資訊。如何安排這些元素的分布,不僅會影響到瀏覽者的感官體驗,更是影響傳遞重要資訊的一大原因。

3. 設立良好的關鍵字


在網站中設立良好有用的關鍵字,不僅可以幫助潛在用戶快速搜尋到你的網頁,更是能大大提升SEO優化,但這裡也要注意,不要為提升而胡亂塞入過多的關鍵字,這樣不僅會看起來過於刻意,可能甚至會導致反效果。而以下這篇文章有更深入的介紹如何建立關鍵字及其應用。
延伸閱讀:2021 SEO 6大優化操作重點|SEO 最完整攻略)

4. 利用A/B TEST進行測試

常常會有許多網站做的很精美以後,卻始終提升不起網站轉換率和停留率等等成績。這時你就可以仰賴所謂的差異化測試,將你認為的重要影響因素重新設計後,製作成兩個甚至是多個不同的頁面並利用追蹤工具去定位追蹤,即可以透過數據分析去判斷問題點。以下提供兩個市面上免費並且常用的追蹤工具

  • google 最佳化工具安插程式碼:這應該是市面上目前最多人使用的追蹤工具,放置追蹤碼在網址後面,即可透過Google Analysis(也就是俗稱的GA)來觀測成效報告書。
  • lihi因為它是A/B TEST分流短網址,透過此軟體即可快速追蹤不同網站並做出分析報告。

結語

想要創造良好的消費者體驗,可能要來自於不斷的反覆與UI設計師、使用者以及品牌方溝通和修改才得以創造完美的使用者頁面,不過相信這一切也都是值得的!

最新文章
友站連結