2015-12-04

行動網站設計原則 - Part1 首頁與網站瀏覽

因應智慧型手機的成長,使得行動網站的設計不得不提升與優化,友善的行動網站設計才可以留住消費者。 在先前分享的文章  你的網站也行動化了嗎?,當中分享了 Google 針對行動版網站的提供的相容性測試。 而本系列文章也要根據 Google 的多螢幕網站攻略中,所分享的行動網站設計原則,挑選一些項目來和大家分享。 行動網站設計原則- Part1 首頁與網站瀏覽  將使用者直接導入手機版網頁 當使用一進到網站的時候,千萬不能再出現,直接把電腦版的網頁畫面,原封不動的搬到手機上這樣的錯誤了! 也不要讓使用者一進入網站看到的是電腦版,還要手動點選切換成手機版模式,會降低使用者繼續逛網站的意願。 所以一定要確保網站會自動調整成不同螢幕尺寸該有的版面配置。 將選單至於首頁顯眼處,並保持選單精簡有力 提供回到首頁的捷徑 提供點選LOGO就可以回到首頁的捷徑,是方便使用者返回首頁很好的做法,雖然微小卻很必要的細節。  把站內搜尋功能放置在顯眼位置 一展開選單就可以看見搜尋框在最上方顯眼的位置,並用顏色等樣式做到醒目的設計,讓使用者可以快速找到。  以上解說案例是來自於365Shop的 精選案例 - Aigle 法式百年經典膠靴。更多文章推薦:行動網站設計原則 - Part2 產品頁面行動網站設計原則 - Part3 登入與帳戶資訊行動網站設計原則 - Part4 交易與轉換行動網站設計原則 - Part5 表單輸入方式行動網站設計原則 - Part6 便利性及裝置外觀尺寸

more
2015-12-09

行動網站設計原則 - Part2 產品頁面

在購物網站當中,產品的呈現頁面相當重要,可說是決定使用者購買與否的關鍵。 在產品頁面推薦更多相關產品點進單一產品的介紹頁面,所提供的資訊不能只有單一個產品,一定要提供其他相關產品,讓消費者有更多的選擇,這也是引導消費者可以在你的網站上多停留,能夠多瀏覽產品的方式。 提供藉由 Email 或社群網站分享產品訊息的選項產品也要和社群有緊密的結合,在產品頁面上放上分享產品的選項,讓產品有更多的曝光機會。 提供商品評論區供使用者瀏覽並留下評論根據尼爾森的調查,約有七成的消費者「喜歡在購買商品前先閱讀網路評論」,所以說消費者的真實回饋,可是很重要的購買參考依據,就讓消費者自動為你的好產品打廣告吧! 提供產品相關促銷訊息在購物網站都會舉辦一些促銷的活動,此時在產品頁面上,一定也要放上相關的促銷活動訊息,不僅做到活動提示的功能,也可以引導消費者做更多的購買。 以上解說案例是來自於365Shop的 精選案例 - 寶藝 BoSkin 網路熱銷人氣品牌。更多文章推薦:行動網站設計原則 - Part1 首頁與網站瀏覽行動網站設計原則 - Part3 登入與帳戶資訊行動網站設計原則 - Part4 交易與轉換行動網站設計原則 - Part5 表單輸入方式行動網站設計原則 - Part6 便利性及裝置外觀尺寸

more
2015-12-25

行動網站設計原則 - Part6 便利性及裝置外觀尺寸

為行動網站製作完整的專用網站對行動裝置有友善的設計,可以讓使用者在你的網站上停留更久,而且擁有行動版網站,也可以提高行動搜尋的排名。行動網站已是必備,歡迎參考先前的文章:你的網站也行動化了嗎? 避免讓使用者雙指收合縮放畫面設置行動網站的目的就是讓使用著在行動裝置上可以方便瀏覽,此時就不應該再讓使用者需要用雙指收合縮放畫面了,如果讓使用者必須放大畫面才可以閱讀內容,很可能會讓他們漏看了重要訊息、號召性的文字。 讓使用者在同一個瀏覽器視窗上就能完成一切動作避免讓使用者在點選網站連結或號召性文字時開啟新視窗。如果接續的動作都是在網站內部,那就讓使用者在原瀏覽器視窗完成就好,不需另開新視窗,否則使用上會有中斷的感覺。像是點選產品時,不需要另開新視窗,直接在原頁面切換到產品的頁面內容即可。這邊還有要注意的一點是,如果是連到外部的網址,那就必須另開新視窗,才不會把使用者引導到外部網站去,找不回原來的網站頁面。 避免使用「完整版網站」字詞有些網站會放上切換不同版本網站的連結,如果使用「完整版網站」這個字詞時,會使得使用者假設行動版網站的內容是簡化版本、擁有不完整的資訊。因此建議使用「電腦版網站」來替代「完整版網站」這個字眼,告知使用者兩個版本的網站都提供完整服務。(圖片來源:博客來行動版網站)以網站設計來說,即便是再微小的改變,只要是對於使用者來說是順暢、良好的使用體驗,那就一定要把握每一個細節,設計完善的行動網站,相信一定會有所回饋。以上解說案例是來自於365Shop的 Coleman 戶外露營第一品牌。更多文章推薦:行動網站設計原則 - Part1 首頁與網站瀏覽行動網站設計原則 - Part2 產品頁面行動網站設計原則 - Part3 登入與帳戶資訊行動網站設計原則 - Part4 交易與轉換行動網站設計原則 - Part5 表單輸入方式

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
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-03-04

Google 推出好用工具「Resizer」免費測試 RWD 響應式網頁畫面

行動科技不斷進步,智慧型手機早已是用戶使用的主流,在當今行動的世代,行動網頁與 App 都不斷的在行動市場上競爭。 Google 從 2015 年公布網站行動裝置體驗將會影響網站的搜尋排名,到今年 Google Design 推出 Resizer 多裝置的檢測工具,可見 Google 對行動裝置的重視,行動網站優化勢在必行,若想要在行動商務市場掌握更多的商機,品牌購物網站本身也必須越做越好,才能成為消費者喜愛的線上購物平台。Google 推出 RWD 檢測工具 Resizer Google Design - Resizer  http://design.google.com/resizer/ Resizer 可以幫助網站測試在電腦、平板及手機上顯示的畫面,不用再拿著各種裝置一個一個的檢查畫面,只要一個電腦螢幕就可以檢閱完所有裝置的 UI 畫面呈現,對於設計人員和開發人員來說,真是一個很實用的工具呢!Google Resizer 使用說明說明一、輸入網址 在頁面中上方的欄位,輸入欲檢測的網站網址,下方多裝置的畫面即會帶出裝置實際的畫面呈現。 說明二、PC電腦版畫面檢測 點選 PC 電腦的 icon,而下方橫條帶出的數字即是各種畫面尺寸,可以點選並切換畫面來檢閱。 電腦版的檢測畫面如下: 說明三、手機板畫面檢測 點選最右邊的 icon,就可檢測平板、手機各種尺寸的畫面,其中還包含翻轉畫面時的尺寸,如下圖:  除此之外,在尺寸切換的橫條中間,還會顯示裝置的對應名稱。這樣的使用工具,是不是很方便呢? 延伸推薦: 什麼是 RWD 響應式網頁設計? 跨螢幕的行動商機

more