fbpx

網上商店、網店設計除了美觀,要安全, SEO, 擴展靈活

網店設計是關乎用戶體驗。當建立網店變得愈來愈容易,網店之間的競爭自然愈見激烈。下面我們來探討一下網上商店設計。許多下面我們提到新的網店功能出現在今年中,我們預計它們會更普及。

網店設計以用戶體驗 UX

用戶體驗 User Experience (UX) 是指一個人對使用特定產品,系統或服務的情緒和態度。不管網站網店,用戶愈來愈多是使用手機瀏覽,載入速度快是最重要。愈快瀏覽產品愈多,下單機會愈大。除了網頁寄存伺服器影響速度外,一些網店技術性因素,例如緩衝區使用亦影響結果。AMP 加速行動版網頁技速自 2015 年推出以來,愈見成熟,但大多集中在新聞網站或網誌。2019 年應該看到網店設計開始結合 AMP技術。


網店 HTTPS 加密連線

以前網店 HTTPS 加密連線一般只應用於網店付款網關或者銀行網上理財。Google 在 2014 年宣布提高使用 HTTPS 網站的 SERP 排名,亦有助於使 HTTPS 加密連線更受普及。根據 Alexa 的統計,至 2016 年 6 月,全球排名前 100 萬網站已經有超過 10% 使用 HTTPS. 另一個重要因素是 2017 年 1月起 Chrome 瀏覽器會對要求用戶輸入密碼的 HTTP 無加密連線網站發上不安全警告,這對使用無加密連線的網店會是非常不利。最近有國外非謀利機構 Let’s Encrypt 提供免費 SSL 證書,甚至支援通配符 SSL 證書。一些外國網頁寄存公司例如 ICDSoft , SiteGround 已經為她的網頁託管客戶提供免費 Let’s SSL 證書安裝。HTTPS 加密連線肯定會是 2017 年網店的標準。


從響應式設計過渡到 Progress Web Application

時至今日,移動設備已經非常流行,大部分的網上商店已經亦採用響應式設計 Responsive Design 的商店模板。網上商店設計往後的問題是再如何提升移動設備的用戶體驗。移動設備由於網絡速度較慢,處理器運算能力較低,所以網頁的載入的速度亦較慢。這就影嚮用戶體驗。有些陣營過去幾年的解決方法是網店 Apps 但由於種種原因未能普及,而有些陣營 (以 Google 為首) 的最新解決方法是 Progress Web Application (PWA) 而亦有網店開發商提供插件支援 PWA,取價亦非常公道。2019 應該會有更多大中小網店嘗試採用這個技術。
商店模板


網店設計 SEO 優化結構

建立網店似乎越來越容易,但要做好商店卻越來越難。特別是必須要有效利用 SEO 做網上推廣。2019 年 SEO 仍然會是一個主要題目。SEO 優化結構是網上商店系統一個必須的要求。所謂 SEO 優化結構的網上商店是指平台已經建立一個優良架構,有利進行商店搜尋引擊優化。例如:

  • 支援 SEO Rewrite URL, 讓你可以設定更有義意的 URL 網址名稱。
  • 輕鬆編輯 Meta 描述, Meta 關鍵字等等。
  • 正確處理 HTML 標題標簽 H1, H2, H3 … 等等。
  • 支援 Breadcrumb 麵包屑,讓用戶輕鬆瀏覽類別和產品。
  • 支援產品結構化數據標記 Schema 顯示產品價格,庫存水平,使 SERP片段更加突出。
  • 自動使用 rel =“canonical” 來避免產品違反 SEO 重複內容問題。
  • 對 Slider 的處理應該是將 Sidebar 內容放在主頁內容之後,不管 Sidebar 是放左或放右。
  • 導航的選單不是以 SEO 難以理解的 Javascript 建構。
  • 自動或容易生成網站地圖 Sitemap。
  • 沒有使用移動設備不支援技術如 Flash 技術。

產品篩選器 Product Filter

如果你網店內的產品數目少、分類少,用戶可以利用 breadcumb 來瀏覽產品和分類。

網店 breadcrumb

但如果網店內的產品數目眾多、分類種多,如何方使用戶有效在網店內搜尋瀏覽產品?答案是產品篩選器。產品篩選器既方便了用戶搜尋、又增加了購買的機會、同時亦優化了用戶體驗、促進訪客在網店內的停留時間、對 SEO 搜尋引擎優化有正面的幫助。所以現代化網店都會加入產品篩選器。

網店設計 產品篩選器


巨選單 Mega Menu – 靈活豐富適合不同的業務場景

已經推出好幾年並仍未算是非常普及。隨著更多網店模板支援巨選單及更多店主了解巨選單的好處,我們預期 2019 年巨選單將佔主導地位。巨選單不同於傳統的下拉式選單 (使用文本式 “分類” → “子分類” → “產品” 結構),巨選單提供一個充滿了選項的選單面板,讓用戶滾動一個按鈕就展示在網頁上。巨選單允許店主更靈活的選擇要顯示的內容,組合不同內容連結放入選單面板的內容類別內 (可以是產品類別、打折產品、暢銷產品、特色產品、最新產品、HTML 內容、圖像、視頻等等)。巨選單可以使用佈局,排版,甚至圖標和圖像,為用戶提供一個廣泛的選擇範圍,操作方式更簡單易懂。
網上商店設計 巨選單
巨選單優點之一是取消了傳統頁面下拉式選單導航,取而代之是條理分明的巨選單,為用戶快捷提供更重要的信息,或提請用戶注意一些新的和特殊的信息,例如一個特別促銷活動,可以輕鬆適應不同的業務場景。


網上商店設計 Sticky Menu 鎖定選單功能

鎖定選單 Sticky Menu 功能指當你上下流動瀏覽網店時,選單會自動鎖定在頁面頂部。如果你有大量產品或者沒有使用垂直分類選單時,鎖定選單功能會令用戶體驗改善。

網上商店設計 鎖定選單


Layered Slider 分層式橫幅

由於先天限制 (不利搜索引擊) 和後天問題 (移動瀏覽器不支援),過去幾年已很少人用 Adobe Flash 技術來做橫幅Slider。代之是以圖片加上過場效果做成 Flashing 的效果。但在互動效果方面,當然沒有Flash技術靈活。但最新的 iQuery 技術變得非常成熟和能夠解決這個間題。橫幅再不是簡單以圖片製作,而是全面分層式整合文字、插圖、視頻等等的動畫和過場效果的分層式橫幅。用戶無需懂編程式或利用特殊工具。一般是整合在內容管理系統或商店後台。 網上商店設計 分層式橫幅
之前要專業設計師幾佰元的一幅橫幅,現在店主可以利用分層式幅橫將推廣文字圖片信息交疊在底圖下,而底圖可以是幾塊美金的採購圖片又或者自己以手機拍攝,大悄減省成本和嚮應時間。


單頁式快速結帳

以前網店結帳是一步一步進行,例如先確認購物籃產品、套用優惠卷、獎勵積分等等,然後是:
網店設計 結帳

  • 第一步:先登入或者註冊賬戶。
  • 第二步:確認或輸入帳單地址。
  • 第三步:設定送貨地址。
  • 第四步:根據送貨地址計算運費並提供不同的送貨選項讓用戶選擇,選擇的送貨方法之後才可以進行運費計算。
  • 第五步:揀選不同的支付方法,例如信用卡支付、銀行轉帳等等。
  • 第六步:最後是確認條款、加入備註、確認訂單。

過往一些客戶行為的研究發現以上每一步驟都可能會令到客戶放棄購物籃 abandon cart,更甚是一步一步的結帳方式如果有一些輸入錯誤 (例如忘記使用優惠卷) 就要從該步驟重新開始,又例如如果你要選擇改變購物籃裏面的產品內容 (例如多買一個 X 產品),又要從第一步開始。有時是會較浪費時間,甚至令客戶放棄購物。

所以一些新設計網店,為了減少放棄購物籃的比率,張結帳步驟變成一頁式,讓用戶可以隨意,以任何輸入次序輸入資料,並計算自動調整結帳金額。

網上商店 單頁式快速結帳


利用網誌博客實現內容行銷

2017 年內容行銷仍然是網上推廣的重點心法。但如果你是售買生產商的商品,商品描述很可能和其他網店大同小異。網上商店最怕是內容千編一律,除非是像淘寶,eBay 的大型網店市集 Marketplace。其中一個解決的方法就是加入網誌博客功能為網站網店宣傳推廣,定其發佈商品最新消息和使用心得,兼且有效的博客對搜尋排名很有幫助。
網上商店設計 網誌博客
博客不同於靜態資訊頁,博客的特色是可以將文章歸類方便索引,博客文章可以讓讀者加入評論和回復從而促進互動。有些博客甚至會加入相關商品功能方便直接作內容行銷。


網上商店寬屏幕設計

網格系統 (Grid System) 是一個2維的排版架構用以有效地編排網頁。最流行是 960 px 網格系統, 兼容性最高以 960 px 為設計闊度,適合解像度 1,024 x 768 的電腦顯示屛。如果在解像度較高的顯示屛觀看,你會發現左右兩邊的空間較多,只可以顯示背景圖片不能用於其他用途,例如產品顯示。 網店設計 960px 網格系統

隨著 16:9 或 16:10 電腦顯示屛的普及,網上商店設計師更希望善用左右兩邊的空間,Fluid Grid 設計可以自動調節迎合不同的屏幕寬度,更容易設計出善用左右側空間的模板。

網上商店設計


還是社交媒體

社交媒體網絡的整合已經不是新鮮的事情。利用社交媒體推廣綱上商店需要了解不同的媒體特性。例如:Pinterest是一個圖片分享類的社交網站,用戶可以按主題分類添加和管理自己的圖片收藏,並與好友分享。Pinterest 是繼 Facebook 和 Twitter 後第三個最大的社交媒體網絡,特點是用戶可以很容易將綱上瀏覽時遇到的相片,文本和視頻上載至自己的 Pin Board 與其他人分享。例如在籌辦婚禮派時瀏覽中看到漂亮衣服,只要按一下分享鍵就可以上載婚莎產品相片到 Pin Board 方便以後檢索。 網店設計 pinterest

Pinterest 最近允許企業創建業務頁面,推廣他們的業務網絡。這樣的業務頁面可以作為一個“虛擬商店”。在一個時尚網站案例研究中,發現訪問 Pinterest 的用戶花掉約 $180,相比來自 Facebook 的用戶只花掉約 85 美元多。這些用戶花費更少的時間在產品公司的網站上,而選擇瀏覽公司的 Pinboard。此外品牌的研究已持續顯示 Pinterest 的是比其他形式的社交媒體更有效的促進銷售。在2013年,Pinterest 的引入了一個新的工具,稱為“Rich Pin”,提升客戶瀏覽公司銷售業務頁面時的體驗。業務頁面可 以包括產品的價格,電影或配方成分的評級。我們相信在2014年,越來越多的網上商店會利用 Pinterest 推廣自己的品牌和風格。 網上商店設計社交媒體


更多采用 HTML5 和 CSS3

HTML5 是HTML下一個增訂版本,雖然仍未完全定案,但很多瀏覽器如 Chrome, Firefox 已經逐漸加入 HTML5 添加的新語法特徵,例如 <video> 語法特徵的支援可以完全取代依賴 Flash 技術播放視頻。HTML5 減少瀏覽器對外掛程式的要求,有利於兼容性和穩定性。
html5 css3
CSS 是一種添加樣式如字體,間距等等的語言,好處是令網頁文件結構更靈活和增加可讀性。CSS 被模板開展人員大量應用於網上商店的模板開發。CSS3 是 CSS 下一個增訂版本,雖然仍未完全定案,但很多瀏覽器已經逐漸加入 CSS3 添加的新語法特征。

了解更多網上商店

[初稿發佈於 2013 年 7月26日]
Facebook Comments
摘要
網上商店、網店設計除了美觀,要安全, SEO, 擴展靈活
文章名稱
網上商店、網店設計除了美觀,要安全, SEO, 擴展靈活
描述
網上商店設計、網店設計是關乎用戶體驗。當建立網店變得愈來愈容易,但要做好商店卻越來越難。特別是必須要有效利用 SEO 優化做網上推廣。網店之間的競爭自然愈見激烈。許多下面我們提到的網店功能在今年中普及,我們預計它們會更普及。今日移動設備已經非常流行,大部分的網上商店已經亦採用響應式設計 RWD 和使用模板。
作者
WaiTing LI
發佈者名稱
Well Develop International Limited
發佈者商標

關於 WaiTing LI

SEO專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。我關於宣傳推廣、網店、SEO優化的文章取得很高排名,是搜尋引擎給予我專家效應的結果。

也查看

八達通

八達通網店整合

八達通卡 Octopus Ca …

發佈留言