2016-09-23

讓 RWD 網頁設計,成為您行動優化的第一步!

先前電商筆記有整理一篇文章 〈什麼是 RWD 響應式網頁設計?〉,以影片的方式讓大家快速瞭解 RWD 網頁的呈現,而本篇我們整理了  developers.google.com 所提供的友善行動網站的相關資訊,讓大家更了解 RWD 網頁設計的優勢。RWD 回應式網頁設計是 Google 建議採用的設計樣式 link RWD 的設計能讓瀏覽器配合裝置的寬度調整網頁大小和縮放比例。 如果未提供中繼檢視點元素,行動瀏覽器會預設以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異, 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體, 並且選擇將內容縮放至符合螢幕的大小,或者僅顯示與螢幕大小相符的部分內容,讓內容更容易閱讀。  上圖左邊的部分,是直接將電腦版的畫面等比縮小至符合手機的螢幕,文字與圖片因此過小,導致閱讀上的困難;而右邊的部分,則是有採用回應式的網頁設計,針對手機的螢幕大小,自動將版面做調整,讓內容容易閱讀,才是符合行動友善的網頁設計。為什麼要使用回應式設計? 使用者可以使用單一網址,以更輕鬆的方式分享及連結到您的內容。 可協助 Google 的演算法為網頁正確指定索引編列屬性, 不需要發送訊息指明既有的相對應電腦版/行動版網頁。 無需維護多個內容相同的網頁,減少工程師的處理時間。 降低行動版網站發生常見錯誤的機率。 使用者無需重新導向即可瀏覽最適合裝置大小的畫面, 縮短載入時間。此外,根據使用者代理程式執行重新導向容易出錯, 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。 Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁, 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索), 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引,並確保擷取的內容是最新版本。 資料來源 Google Webmasters > Mobile Friendly Websites讓 Responsive Web Design,成為您行動優化的第一步  也許有些經營者會想說, 已經有了獨立的行動版網頁,還需使用 RWD 的設計嗎? 上述列出的問題,其實多數就是針對將電腦版與行動版分開的比較,當一個網站擁有電腦版與行動版,表示各自有對應的網址,不同網址的流量數據就會分開統計,有如上述提到的,同樣的頁面資料就需要上兩次,分別上給電腦版和行動版,網站維護的成本相對來說是比較高的。 然而經營購物網站,勢必要加強行動版的網頁設計,當我們花了廣告預算替網站導入流量時,卻因為網頁設計導致使用者的離站比例高,這是很可惜的事情。而 Google 也在其行動友善網站的頁面上指出:「回應式網頁設計是 Google 建議採用的設計樣式」。  365SHOP 品牌電商平台,設計的購物網站,也都是使用 Responsive Web Design(RWD) 的方式,同樣也在意行動版網頁的品質嗎?快來優化您的網站吧!  若您對品牌購物網站有興趣,歡迎你透過以下方式與我們聯繫:  365SHOP官網線上填單 |  Facebook粉專私訊 喜歡我們的文章嗎?搶先到網站下方訂閱電子報。

more
2016-03-18

尼爾森最新調查,全台網購人數進入 568 萬人!

台灣網購人數進入 586 萬人! 根據尼爾森媒體研究最新的 2015 年調查結果顯示,台灣 12-65 歲的消費者有 32.2%在過去三個月曾網路購物,比例持續增加,較前一年增加約 40 萬人,而過去 3 個月平均購物金額也持續雙位數成長,從 2014 年的 6,300 元增加至 7,200 元。 圖片來源:2015年尼爾森虛擬購物行為研究報告 http://goo.gl/bvKFKC 消費者族群大不同 不同族群的消費者網購時青睞的商品也大不相同。以粉領族為例,服裝、包鞋、彩妝品是前三大網購商品,但青熟工作男(30-39 歲),則是以旅遊、休閒、電腦硬體及手機週邊配件等為網購的前三大商品。 另外有趣的是,投入網購成長速度最快的族群卻是 50-65 歲的消費者領先,從 5.2%成長至 6.4%,其次為 40-49 歲,從 25.9%成長至 30%, 都以雙位數速度成長。 但網購一族仍以 20-39 歲為大宗,超過一半 20-39 歲消費者會上網購物。 「行動即時購!」行動下單比例至 13.2% 全台的 12-65 歲消費者透過平板/智慧型手機下單比例從前一年的 9.2%成長至 13.2%,其中女性又較男性更能接受平板/智慧型手機下單,有六分之一的女性會透過平板/智慧型手機購物;此外,有四分之一的 20- 29 歲消費者以平板/智慧型手機下單。 「行動即時」對於年輕消費者來說極具吸引力,在任何零碎的時間,透過行動上網都能夠隨時隨地的購物,尼爾森相信平板/智慧型手機下單的快速成長也是因為業者將介面或 App 設計規劃得更為方便簡單,視覺設計更能刺激消費者衝動購物,若再配合大數據功能進行精準行銷,行動購物成長將會更快速。 參考資料來源:2015年尼爾森虛擬購物行為研究報告 http://goo.gl/bvKFKC 延伸閱讀 行動網站設計原則 - Part6 便利性及裝置外觀尺寸 行動商務之要點 - 行動購物流程設計

more
2016-03-15

行動商務之要點 - 行動購物流程設計

行動購物需求調查 根據資策會在 2015 年公布的「行動購物需求調查分析」,指出有 62.5% 的台灣網友已有行動購物的經驗,而有 32.1%無購物經驗,但是會用行動裝置查詢與瀏覽商品資訊,僅有 5.4%沒有行動購物及瀏覽商品資訊的行為。 調查表示,影響消費者選擇行動購物的正面因素,前五名依序為「可享受隨時隨地購買樂趣(45.9%)、購買流程更方便簡單(41.2%)、售價較一般網購便宜(39%)、有限時限量之促銷活動(30.4%)、附帶優惠多(27.8%)」」,其中第二名為「購買流程更方便簡單」,可見消費者使用手機上網購物時,能夠快速且流暢的完成購物流程,是一件很重要的事情!  行動購物流程順暢度 了解行動購物流程的重要,為此, EZprice 比價網在 2015 年,也提供台灣 15 大網購平台行動購物的流程順暢度排行,將其分為「首購」與「回購」兩種情況分開統計,計算各網購平台完成購物的步驟數量,並將購物流程劃分四個主要階段做審核:「註冊/登入流程」、「立即買/購物車」、「訂購明細/結帳」、「付款步驟」,然而影響購物流暢的關鍵在於「註冊/登入」、「付款步驟」這兩個主要部分。  簡易明瞭的行動購物流程 Point:顯示所有結帳步驟,讓使用者知道目前的結帳進度。 以下使用 365Shop 的作品案例來解說購物流程。 首先將商品都加入購物車後,按下立即結帳: 在尚未登入的狀態時,就會先跳出「註冊/登入」的畫面: 成功登入後,就會進入結帳的流程,總共分成三個步驟。 首先是 Step 1 付款方式,確認訂購清單及付款方式: 再來是 Step 2 填寫資料,以確認訂購資訊: 送出訂單之後,會跳出相關提示訊息,再次提醒消費者: 如果付款方式選擇線上刷卡的話,就會轉到填入信用卡資料的畫面:當所有步驟完成後,就會進入到完成訂購的畫面,成功的交易了一筆訂單。 還記得開頭提到的「購買流程更方便簡單」這項影響行動購物的正面因素嗎?如果要增加網站的訂單轉換數量,那麼就要讓消費者操作的步驟越少越好,簡化不必要的流程,達到轉換最佳化,讓消費者對您的網站愛不釋手! 參考資料來源: 資策會   《行動購物需求調查分析》  EZprice   台灣15大網購平台「行動購物 - Mobile Web」流程順暢度排行延伸閱讀行動網站設計原則 - Part4 交易與轉換

more
2016-02-19

跨螢幕的行動商機

在先前我們的電商筆記部落格討論行動購物的平台選擇〈具有行動網頁的購物網站,才是電商留住消費的關鍵〉,不外乎是要把握蓬勃發展的行動商務。然而想要在電商市場分一塊餅,那絕對不能忽略行動所能帶來的商機。台灣地區行動購物比例高,行動購物已成常態*資料來源:iThome和多個國家相比,台灣地區使用智慧型手機的購物比例偏高,當行動購物的黏著度不斷攀高,提供跨平台消費方式就是各個品牌電商必須要做的事情,因此把握好每個裝置最好的瀏覽體驗,才能有機會掌握跨螢幕的行動商機。Yahoo奇摩 2015 年電子商務紫皮書調查,結果顯示行動購物成長快速,超過三成網購族在過去一個月中曾經在行動裝置上購物,較 2014 年成長三倍,而善用行動裝置逛購物網站或購物網站 App 的消費者也從去年 50% 提高到今年 80%。從上圖可以看出去年使用智慧型手機與平板來購物的比例大幅成長。除此之外,網購不只是屬於年輕族群的消費方式,50~64 歲之間的國人也有 21% 會使用行動購物,遠高於 2014 年只有 8% 的比例。*資料來源:Yahoo奇摩電子商務紫皮書線上與線下,消費歷程的改變 現今的消費歷程不再是單線道,而是由各種裝置、網站、應用程式、社交媒體平台、電子商務商店及實體店交錯構成的複雜網絡。— think with Google 在 2015 年 11 月 think with Google 發佈的〈看智慧型手機如何顛覆亞洲零售產業〉一文,提及網路將購物帶到線上,消費者的購物型態也隨之改變,消費者直接在實體店面做選擇與消費,然而在線上購物的世代,然而現在為線上購物的世代,消費歷程不再是過去僅有的單線道,而是透過各種裝置與平台,進行商品調查與比價,購物歷程愈來越多變化。我們走進多螢幕、跨螢幕的世代,除了專注於單一載具帶來的使用體驗,跨螢幕所帶來的購物組合變化,也是現在不斷再觀察的地方,透過各項數據資料來去看清楚消費者的輪廓。跨平台有什麼商機上圖調查的問題為:多常用手機或平板從購物網站 / 購物網站 App 買東西?其中有 45% 的受訪者表示一個月一次或更多,會使用行動裝置購物,而有 80% 的比例會使用行動購物,只逛不買的比例有 11%。另外有 49% 的比例習慣用手機查詢當日優惠,並有 91% 的比例習慣於網路上購買票券,行動購物同時也可以帶動實體店面的購買,取決於 O2O 虛實整合的活動設計。未來電子商務的成長與變化我們不得而知,但可以知道的是,行動商務不是趨勢,而是目前已經在發生的事,欲把握跨螢幕的商機,請先評估自身的購物平台,對於各螢幕的友善程度,確保消費者瀏覽網站時的流暢度。同場加映 什麼是 RWD 響應式網頁設計?

more
2016-02-02

什麼是 RWD 響應式網頁設計?

什麼是 RWD(Responsive Web Design)? Responsive Web Design,簡稱 RWD,也就是響應式網頁設計、回應式網頁設計,這是近年網頁設計開發技術上的趨勢,該技術主要就是在撰寫程式時去設定彈性的畫面設計,讓網頁會自動適應不同的裝置大小,自動變化排版方式,讓不管是用電腦、平板、手機上網的人,都可以有最佳的瀏覽體驗,不需要再拖拉縮放網頁大小,直接呈現最合適的字級與版面設計。 相較於電腦的畫面資訊量,在手機上的資訊量和介面設計上,一定是比電腦來的簡單並重點式的資訊呈現。15 秒快速看懂 RWD 若您正用電腦觀看本文,歡迎動動滑鼠拖拉目前的瀏覽器大小!不可不知 RWD 的優點 (一)開發成本較低:相較於 APP 的開發成本與審核上架時間,RWD 是更具有成本效益的選擇。 (二)利於搜尋引擎排名: Google 已在 2015 年公佈,優化過的行動網頁將會優先顯示在行動搜尋排名上。 (三)管理較容易:不需獨立出電腦版、手機版網頁, 處理兩邊的網站資料,使用 RWD 只要維護一個網站就好。 (四)畫面彈性多尺寸:不管是使用電腦、平板、手機,同一個網站都適用於各種裝置大小,也統一了品牌形象。 (五)利於分享:擁有單一網址連結,可以快速分享出去,點擊就立即進入網站瀏覽。Google Developers 行動裝置相容性測試 設計了 RWD 網頁,更能友善我們的行動裝置,Google 提供以下網頁可以測試網站是否有符合 Mobile-Friendly 設計原則。 https://www.google.com/webmasters/tools/mobile-friendly/   同場加映✨ 品牌電商專屬的功能介紹: https://www.365shop.com.tw/apps_list.php 快讓你的品牌網站擁有多裝置的介面吧!

more
2016-01-28

具有行動網頁的購物網站,才是電商留住消費的關鍵

電商該建置行動網頁還是 App?相信許多電子商務經營的業者,一定都曾思考過,要不要為品牌打造專屬的 App,智慧型手機讓 App 如雨後春筍般的出現,在行動商務的市場,是不是也該把握住 App 的自有銷售通路呢?首先應該先瞭解一下行動網頁和 App 之間各自的優勢,以 App 來說,其最大的優勢在於有推播功能,相較於網頁,可以主動式的推播消息給消費者,如果 App 開發的好,也可以做到更多行動網頁達不到的互動效果。對於品牌來說,以 App 來經營忠誠客戶,是可以考慮的方向,不過談論到推播的功能,在手機上可以自行設定是否要開啟 App 的推播通知,可是成為 App 的致命傷。那麼行動網頁又扮演什麼樣的角色呢?選擇行動網頁的關鍵行動網頁會影響搜尋結果排名:根據資策會在 2014 年針對台灣使用網路的消費族群做調查,有 81% 的消費者在購物前,會先上網搜尋口碑;Google 也在 2015 年公佈,網站行動裝置體驗 (mobile-friendly) 將會影響您的網站搜尋排名,讓優化過的行動網頁優先顯示,也就是說,有設計手機版網頁的網站,在手機的搜尋排名會比較前面。延伸閱讀:你的網站也行動化了嗎?行動流量比例高:近年許多分析報告已統計出,行動端的瀏覽數據已經大幅上升,比例甚至超過 PC 電腦,Micro-Moments 這個詞彙,也因此出現在行動市場上。如果您的網站上裝有 Google Analytic(簡稱 GA),建議觀察一下進入網站的使用者,大多是用什麼樣裝置瀏覽的,也許能成為你優化行動網頁的因素。延伸閱讀:網站的流量從哪來?掌握自有網路通路:在早期,為品牌建置獨立的官網是必要的,因為網路開始讓消費者上網搜尋品牌與產品相關資訊,因此必須建置一個官方網站讓消費者可以獲取資訊。而現在單單只有官網還不夠,因應電子商務之發展,必須將官網結合購物網站,讓消費者直接在你的網站上購物,才能掌握自有網路通路。更重要的是,行動商務佔了電商市場很重要的一塊,因此,已是現在進行式的行動商務市場,還能沒有一個可以給消費者直接購物的行動網頁(手機版網頁)嗎?延伸閱讀:經營電商關心的事-行動網頁成交比例行動網頁購物比例高:Google 台灣區總經理陳俊廷表示,根據調查,台灣使用行動裝置購物的人當中,有將近 7 成(68%)的人透過行動網站購物,3 成左右(32%)的人則透過應用程式來購買。同時也表示,多數消費者在初次購買時習慣從行動網站上來購買,等到成為忠誠客戶後才會下載應用程式來使用,建議電子商務業者兩者都應該重視,提供容易使用且有完整商品資訊的行動頁面,才能夠有效吸引消費者目光,誘發購買動機。(資料來源:iThome文章) 流量是電商平台的首要價值網頁有一項優勢,就是超連結的使用,可以將網站裡各項產品組合運用,主打出不同的行銷活動,並能透過關鍵字廣告、聯播網廣告、LINE、Facebook 等工具做行銷來引導流量,將流量直接引導到網頁內部,可以是首頁或特定促銷頁面,再透過 GA 分析各個廣告流量的成效。但是要做到讓消費者使用 App 並非那麼容易,首先要成功吸引消費者下載 App ,就須考量到是否有足夠的廣告預算或是誘因讓消費者願意下載呢?等成功下載 App 這一步做到了,再來才是談論 APP 使用率、成交率的問題,App下載只是開始,如何讓客戶回流、經營客戶,又是另一項功課。單單透過 App 行銷是很難經營的,否則線上原先主打一商家一 App 的業者,也不會在去年又擬定新的經營策略,推出結合響應式網頁設計的方案規劃。不同的通路平台有著不同的經營策略,沒有流量,平台就等於不存在,先做好各個流量來源該做的事情,再來把握以 App 建立品牌忠誠度這件事情吧!總結來說,品牌電商在投入高成本建置 App 之前,應該先著眼於行動網頁(手機版網頁),才是長久經營之道。

more
2016-01-07

經營電商關心的事-行動網頁成交比例

根據資策會MIC在2015年初公布「行動購物需求調查分析」當中,提及目前仍有近七成消費者使用行動網頁進行購物,建議在規劃網站內容以及功能時,可以優先考量網站易用性,讓消費者建立良好的使用習慣。先前在「銷售報表」,一目瞭然一文當中,提及訂單裝置分佈的圖表,透過圖表可以了解你的網站消費者,是利用什麼樣的裝置下訂單的,請看以下說明:*資料來源:365Shop從這張圖表當中,最先可以看到每個裝置系統的下單比例,瞭解前幾名最多的裝置系統,再進一步的分析此圖表,劃分成電腦、平板、手機三種載具,就會發現各裝置的下單比例。 電腦(藍色標記):Windows+Macintosh 45%+?%平板(橘色標記):iPad 14.6%手機(紅色標記):Android+iPhone 37.5% (23.4%+14%)經過劃分之後,可以了解電腦、平板、手機,三種裝置的下訂單比例約為 45%、14.6%、37.4%,就能知道該網站下單的裝置,平版加上手機總共 52%,行動購物的成交比例已經佔了五成。而下圖資策會也預估行動購物的趨勢,未來行動商務在整體的電子商務營業額當中,比例將會逐漸提高。 *資料來源:資策會在 SmartM 一文當中(原文),整理 Criteo 的報告提及幾個 key point:ㄧ、全球行動商務佔整體電商交易額的 1/3二、行動購物網頁是否優化,轉換率差很多三、行動商務優化後,兩者交易額差 41%不論是以現在的行動消費趨勢來看,還是行動網頁購物的比例都是必須注重的部分,這也是為什麼「行動商務」主題會從電子商務當中延伸出來獨立討論,365Shop 的部落格也獨立出行動網站這個分類主題來做分享。如果想在電商領域當中站穩腳步,那麼行動商務一定不能忽視,行動網站設計已是必備條件,優化行動購物網站也是必須要做的事情。延伸閱讀:網站的流量從哪來?你的網站也行動化了嗎?行動網站設計原則 - Part4 交易與轉換

more