【林克威電商專欄】商品圖是電商最強業務!電商吸引點擊心法

消費者對商品的認識,從「感覺」開始,願不願意點進去看商品,一瞬間就做了決定,所以網頁首圖、商品列表、主圖及商品敘述圖的品質,都與轉化率息息相關。
評論
Shutterstock/TPG Images
評論

新冠肺炎疫情邁入第三年,平台 Taboola 從消費者的購買數據觀察到,相較前兩年動輒 500% 的流量成長,今年電商的流量成長僅 56%,而且電商消費出現以「報復性休閒」、「生活品質優先」、「毛小孩當道」的趨勢,相關商家應緊抓趨勢、專注做好內容與品牌接觸點策略佈局,只要讓消費者「擁有最佳觀看體驗」,就和成立訂單的距離不遠了!

其實,消費者對商品的認識,從「感覺」開始,願不願意點進去看商品,一瞬間就做了決定,所以網頁首圖、商品列表、主圖及商品敘述圖的品質,都與轉換率息息相關。

一、網頁首圖是門面

網頁首圖是指進入網站後第一個看到的視覺畫面,要能帶出品牌的調性、特色,還要營造網站氣氛、體現出商品賣點,而且這也是消費者第一眼判斷商品價值、決定是否繼續瀏覽網站的動機,因此,三大原則要掌握:

(一)忠實呈現細節

無論是顏色、圖樣,或是光澤、質地,都要完整顯現,除了能吸引購買之外,也能避免不必要的客訴。

(二)給消費者想像的空間

主要客群使用商品的照片,就能讓消費者想像,如果是自己穿搭使用,或是小朋友 / 毛小孩玩玩具,還是戶外搭帳篷使用器具的場景,愈真實立體,愈能讓消費者陷入「情境」中。

(三)觸發消費者的感受

蘋果有句名言:「產品帶給人什麼感受(Feels),是最重要的事情。」以媽媽包來說,消費者最在乎的就是容量,若是擠奶器、奶瓶、嬰孩玩具、筆記型電腦、保溫瓶、手機及雨傘… 零零總總一大堆的用品都能放進去,又能輕鬆地拿出來,相信所有的媽媽們都會超想來一個。

若是農產品,則可以強調現採現摘、好山好水的生長環境,或是使用回饋的截圖,就能讓潛在消費者產生共鳴。

二、商品列表要齊全

列表處的主圖,雖然點進去有很多,但往往第一張決勝負。而且,商品的顏色或花紋不同,會給予消費者不同的印象、甚至認為是不一樣的商品。因此,同款式若有三種不同的顏色或花紋,就應該在商品列表將三種都列出,不要讓消費者在點進去之後再選擇。除非準備所有商品的照片有困難,則可以在主圖旁另外標示其他顏色,避免提高消費者離開網站的機率。

三、商品主圖要吸睛

主圖最重要的任務就是吸引消費者點擊進來、了解商品主要的資訊。除了和網頁首圖一樣要注意細節、情境和呈現商品被使用的樣子之外,照片還有一些要注意的撇步:

(一)周邊環境

圖片中除了商品之外,周邊的環境也很重要,因為在消費者的腦中會產生「連結」。例如要販售的商品是「牛排」,就可以將它切片放在砧板上、露出最佳的熟度,在牛排周邊放置鮮蔬點綴,消費者看到就會被吸引,絕對比放置一片生牛排,再搭配白色的背景更有 fu。

(二)配色

顏色是否協調、為圖片加分,也是重要的關鍵。一般而言,相鄰色搭配雖然視覺衝擊力較弱,但會帶來溫馨的感覺,很適合女性消費者會購買的商品;而間隔色會給人愉悅、活潑及明亮的感覺,視覺上的衝擊力較相鄰色強,男、女性消費者都會買單;而互補色具有強烈的視覺效果,可以依產品屬性來決定是否使用,一般男性消費者的產品比較會使用,因為能展現出大氣及沈穩的感覺。

(三)專業的照片

尺寸過小、解析度不足,都是不適當的照片,而且圖片與商品內容需要「高度相關」,讓消費者容易理解商品內容。像購買服飾時,有模特兒穿著衣服的照片,就比較能吸引點擊。

(四)讓使用者可以想像實際商品尺寸與數量的照片

光用數字表達並不夠具體,若是有 50 元硬幣、和其他常見物品一起放置的照片,就能增加消費者購買商品的意願。

消費者只能靠圖片了解商品的資訊,但不能使用過多特效、做成「圖騙」,或是除了 Logo 之外出現一大堆文字,也是大忌。別忘記,流量往往是花錢買來的,主圖不成功,就損失了一半,若是看起來就像便宜貨,消費者怎麼會願意掏腰包呢?

四、商品敘述圖是導購

每一個商品裡,都會有長長的圖片文案,也是「說故事」的劇本所在,它就是全年無休的「導購」,負責「洗腦」和「說服」消費者,讓他們決定購買,若是做不好,就算主圖美美的,讓消費者點擊進來,但最終可能因為內容很糟而選擇不買單。

要讓商品敘述圖讓消費者一直想滑下去,除了商品資訊、功用、效果、比較、為什麼值得購買(打到消費者的痛點)、相關見證,甚至是法律背書,都應該全部放上去,展現出推人去買的功力。業主需要讓使用者完整理解到商品的內容,不會有想像與現實的差距,搭配短秒數的影片及不同角度的商品照片,也都有助於強化商品的魅力。

一般而言,商品會愈賣愈多,很難再有時間去修改,所以第一次就要做好做滿、盡善盡美,把訴求講清楚。

另外,首圖的 banner、提示框(是否接受 cookie、特價通知的廣告框或資料上的小提示等)及滾動視差也都是學問,想要提升圖片的 SEO,除了圖片要專業之外,也需要增加圖片 alt 及圖片 title 的說明,並加入產品圖片到產品結構化的資料內。而且,圖片的大小及檔案格式也會影響到網頁載入速度,間接影響到消費者是否願意等待的意願。

根據統計,在 2021 年第一季,全世界消費者花在手機購物應用程式上的時間上升 49%,更別說 Google 從 2020 年已開始採用行動版優先索引,手機上的使用者體驗非常重要,甚至會連動影響到電腦版 SEO 的搜尋排名,這也是業主需要注意的地方。

點擊率高的電商主圖並非一定是最好看的,或許只是因為這張照片最能展現商品的賣點,而讓消費者認為這個商品自己必須擁有。而商品敘述圖中,文案則能清楚地展示商品優勢、讓消費者有加入購物車的衝動。除了點擊率高之外,業主也可以思考「什麼樣的主圖最吸引自己」、「什麼樣的主圖會讓自己買單」,切記,惟有融入消費者生活的圖片,強調細節、增加想像及感受,才能真正獲得共鳴!

加入 INSIDE 會員,獨享 INSIDE 最精采每日趨勢電子報,未來還有會員專屬內容。 點擊立刻成為會員

責任編輯:Mia
核稿編輯:Chris

延伸閱讀:



蛻變敏捷開發組織並不難! AWS Amplify幫前端工程師從雲端快速建立REACT程式

台灣企業勢必需要明確轉型策略,搭配適合的雲端工具作為入場券,一來降低數位化門檻、二來減少摸索資源的浪費。
評論
shutterstock_1451794139.jpg
評論

打造敏捷開發流程、加速前後端工程師的協作效率,是許多企業在面臨疫情之後,認為亟需將彈性元素納入為企業文化當中。雲端運算服務領導業者 AWS 台灣,觀察到前端工程師主要負責處理最貼近用戶的 Web、行動應用程式,但他們往往需要與後端團隊合作過程,遭遇耗費大量討論時間,才能處理使用者介面事項。

為了降低前後端的溝通成本,有些前端工程師在掌握介面管理能力之後,開始橫跨到後端的伺服器、資料庫開發經驗,甚至進一步培養技能,成為能負責測試、安全、效能多面向的全端工程師。

有的人會透過 Side Project(利用業餘時間開發有興趣的專案)或參加 Hackathon(黑客松)方式,運用 AWS 雲端工具嘗試自行擴展後端,並建立簡單易用的工具程式。究竟,AWS 平台提供哪些資源幫助前端工程師擴展更多元的技能樹?

掌握入門教學!前端工程師如何將 REACT 程式快速上雲

前端工程師運用 AWS Amplify,快速在雲端建立 REACT 應用程式

事實上,AWS 的入門課程指出,運用 AWS Amplify 在雲端建立 React 應用程式及服務集,只需五個學習歷程,包含建立 React 應用程式、初始化本機應用程式、新增身份驗證、新增 API 和資料庫、新增儲存體。如果想快速了解 REACT 程式快速上雲的方法及示範教學,本文節錄 AWS QUICKSTART 學習資源內容,幫助前端工程師更快掌握重點。

首先,何謂 AWS Amplify?AWS Amplify 是一項全托管 Front-End Web & Mobile 服務,採取無伺服器模式,在後端建立、部署和託管單一頁面 Web 應用程式或靜態網站的 Git 型 CI/CD 工作流程,加速開發過程直接整合其他 AWS 服務。舉例來說,像是整合封裝好的 Library 資源、或運用一些 Components UI 軟體去配置後端,以及利用 Admin 的 UI 做資源上的管理。

透過 AWS 增加雲端技能 在組織發揮你的影響力

AWS Amplify加速Develop、Deliver 與 Manage流程

AWS Amplify 主要優勢展現在三大項工作階段,分別是 Develop、Deliver 和 Manage。Develop 部分可利用 CLI(Command-Line Interface)或 Admin UI 設定後端,使用 GraphQL 或 REST API 設定也是可行的,進而快速建構一個前後端專案。此外,開發者還能搭配 AWS 其他服務,例如使用 AWS Authentication 全托管認證服務,或 DataStore、Storage 等多項 Feature Categories。

到了 Deliver 階段,若是要透過 AWS Amplify 執行 Web Hosting 任務,可拆解出三個流程。首先是將 Repository 與 AWS Amplify 進行連結,這邊可整合 Amplify Console 提供的支援資源包含 Github、Bit Bucket、Gitlab、以及 AWS 的程式碼代管工具 AWS CodeCommit。一旦連結以後,開發者可透過自己的 Configuration,决定在各個不同的 Build 要執行什麽樣的指令,最後再透過 Deploy 方式,幫助工程師進行前端的 Hosting。

在最後一個 Manage 階段,開發者則可利用 AWS Amplify 的 Admin UI,以開啓瀏覽器方式,透過視覺化介面統一管理資源。例如在 Admin UI 介面左側選單,涵蓋 Content、User Management 的區塊,讓參與專案但沒有 AWS Console 權限的使用者,可利用 E-mail 方式邀請使用者進到 Admin UI,進行一些設定或觀看其他相關資源;甚至在 Set Up 區塊還有相關選項,例如要針對 Data Modeling 或 APP User 做權限管理,以及可連結到 AWS 其他服務。

運用開放資源 AWS Amplify Framework,打造高效能應用服務

AWS QUICKSTART 學習資源還介紹到另一個 AWS 提供的開放資源 Amplify Framework,一樣可利用 Amplify CLI 的方式,配置 Web 和行動應用程式的前後端,以及開發者需要用到的服務,讓應用程式更易於構建,並獲得安全、高性能的使用體驗。

Amplify CLI 一樣有支援多個不同 Category,例如較常使用的幾個 Comment Line,像是Amplify Init 指令做初始化或創建幾個不同資源;或是 Amplify Status 指令,隨時在開發過程查看各個 Category 狀態;甚至專案結束後,可利用 Amplify Delete 直接把 Amplify 所創建的資源做一次性删除。另外也可透過 AWS Amplify Client 利用比較抽象化方式,讓開發者直接利用 Component 實現想要完成的項目。

填寫表單 找到適合你的快速上雲服務與工具!

實際示範給你看,設定 React 程式可以如此簡單

假設前端工程師現在要快速部署一項有驗證功能(Authentication)還要搭配 Rest API、GraphQL、Analytics 等服務的應用,如何快速設定 React 程式?在 AWS QUICKSTART 的學習資源後半段,有詳細說明要啟動這類型專案的操作方法。

開發者可以先利用 AWS Lambda Function 結合 Amazon API Gateway 方式,創建出一個 Rest API,到了 Authentication 階段,則使用到 AWS Cognito 的服務,接著針對 GraphQL 需求,可利用 AWS AppSync 服務,以及最後如果有 Analytics 的需求,也可以串聯 Amazon Pinpoint 工具。Amazon Pinpoint 是一項彈性而可以擴展的行銷通訊服務,開發人員可利用 Amazon Pinpoint API 追蹤 Web 使用者的行爲,或是針對 APP 推送、電子郵件、簡訊點擊行為蒐集到具體的資訊。

在這整套流程示範之後,值得特別強調的是,AWS AppSync 是一項全托管的服務,能及時更新,甚至在使用者離線時仍可以持續去創建和修改數據。一旦設備連上線之後,這項應用程式就可重新連線,並接到後端同步數據,達成彈性、自動化擴展或減縮各式 API 的請求。

打造第一個你在 AWS 上的應用程式

AWS 最後強調,Amplify 是相當適合建構出一個靜態 Web、Apps 服務模式,例如說像是打造部落格,或者是一項 APP 內的代辦事項應用等;加上 Amplify 具全托管服務特色,可串聯上述 AWS 在雲端所提供的資源,都能在部署過程加以整合,加速開發流程及效率,並且有效節省開發資源。如果想用低門檻的雲端解決方案,其實前端工程師是能在開發流程更靈活配置資源,甚至為公司的商業、服務模式挖掘出創新價值。

了解更多:AWS 開發者系列