• Home
  • 設計
  • 研究
  • 產業
  • 團隊
  • 教育
  • VIDE 徵求作者
Facebook Twitter Instagram
RSS Facebook Twitter
Vide
  • Home
  • 設計
  • 研究
  • 產業
  • 團隊
  • 教育
  • VIDE 徵求作者
Vide

女人迷網站改版過程分享:註冊/登入頁改版的實際流程是怎麼樣的?

1
By 女人迷設計實驗室 Womany PHD Lab on 2018-02-12 網站設計, 行動設計, 體驗設計

文/ 女人迷網站 設計師 阿努

「87% 的人在第一次註冊失敗後,就會永遠放棄。」(阿努,2017)

好啦,上面那句話是我胡謅的,但不得不承認現實生活的確如此。

我敢打賭你有不少這類回憶:好不容易打完落落長的註冊表單後按下送出,卻被告知「為了防止密碼被破解,你的密碼必須至少有 99 位數,並包含數字、大小寫字母、非字母符號以及女朋友的心」。更過分的是,你剛才辛辛苦苦打完的心血,全部都被清空重置,化為夢一場。

然後你會掩面含淚掉頭離開,不再願意回來完成註冊。

如果你的網站/服務是一個偶像團體,那麼註冊頁就是門面擔當,負責吸引那些只憑第一印象就決定喜不喜歡的潛在粉絲。

萬一門面外貌欠佳,行為又讓人反感,再好的的服務都很難成功出道,一個不小心還可能直接出殯。

擁有一個好門面,可以降低路人轉粉絲的門檻,有效協助你把空虛的瀏覽數變成真實的會員資料。

從去年(註:2016 年)開始,女人迷大刀闊斧地整頓網站介面,期望給讀者更好的體驗,像是為了提供更深度的內容而做的九大興趣頻道更新、為照顧使用者對實體活動的需求,主動開展的活動講座頁改版等。

眾多更新中的其中一項便是註冊頁改版,執行這個小 Project 的團隊組成有:一個 PM、一個設計師(我)、兩個工程師。目標是降低註冊頁跳出率,改善使用者與這個頁面的互動狀況,進而提升註冊人數。

下面是我們原本的註冊/登入畫面截圖,你覺得有什麼可以更好的地方?

▲ 女人迷註冊頁(舊)(圖片來源: 女人迷)

第一步:找出問題,提出目標

我們觀察原本註冊頁的數據與使用者行為,條列出我們認為需要改善的地方,比較大的問題有:

手機版:

  1. 使用者在網站首頁點了註冊後,迎接他的是⋯⋯另一個註冊按鈕?這跟過度包裝的喜餅禮盒一樣不 OK。
  2. 佔據畫面 80% 的那個紅氣球跟網站服務似乎關係不大,裡頭的文案也不太符合性別多元的精神。
  3. 明明是 Active 狀態的登入按鈕,做得像是 Disable 一樣。到底能按還是不能按,你搞得我好亂啊!

桌面版:

  1. 登入跟註冊表單同時存在,彼此爭鋒鬥艷,使用者容易搞不清楚身處何方,也容易產生一種「天啊有好多表格要填我想放棄」的幻覺。
  2. 背景圖仍然佔據了 80%,也仍然跟網站服務不太相干,旁邊的文案不但讓使用者分心,裡面甚至還有早已光榮退休的服務。
  3. 和網站新的設計風格落差太大。女人迷網站在 2016 年時經歷過首頁改版、文章頁改版,設計風格有所變化,但其他頁面還沒全部跟上。

第二步:PM 出流程,設計師進設計

接下來 PM 便會列出需要的畫面與流程,交由我設計 UI 稿。

▲ UI 稿繪製示意(請無視命名)(圖片來源: 女人迷)

我主要做了這些事:

  1. 手機版的流程調整
    拿掉原本的雞肋頁面,讓使用者點擊按鈕後直接進入註冊登入流程。
  2. 電腦版的動作分離
    分開「註冊」與「登入」動作,避免使用者混亂。
  3. 優化註冊表單填寫體驗
    輸入資料的同時,系統會偵測你的資料是否符合規範(如 Email 格式是否正確、密碼是否包含必備元素等),如果發現錯誤會即時告訴你。
    在資料齊全/錯誤被修正前,「立即註冊」按鈕會顯示為 Inactive 不可用狀態,資料全部過關後才會給你按~
  4. 更換背景圖
    以女人迷活動現場的「迷粉」側拍照取代原本圖庫感重的背景圖,進一步突顯女人迷與使用者間的關係。
  5. 同步設計樣式
    調整為與女人迷網站設計風格一致的樣式。

最後成果如下:

▲ 女人迷註冊頁(新)(圖片來源: 女人迷)

第三步:檢驗成效

還記得我們一開始說的目標嗎?降低註冊頁跳出率、提升註冊人數——可惜我們還在持續蒐集新頁面的數據,現階段無法跟大家分享成效。不過別擔心,我不會富堅,屆時數據出來會回來補上的 😛

One More Thing

改版前一定要請 PM 跟工程師確認畫面總共有哪些,才能有效避免遺漏!

這次註冊頁改版過程中,我與 PM 沒有仔細地跟工程師確認畫面與流程,所以全部畫完後給工程師才發現有漏網之魚沒有畫到~~

好在這次專案的設計並不複雜,所以補個畫面並不會造成時程延宕,但如果是更大的專案就不敢想像了啊。

因此必須再度提醒:PM、設計師跟工程師一定要當好朋友,隨時同步彼此的工作進度啊啊啊!

授權來源:女人迷設計實驗室〈註冊/登入頁改版的實際流程是怎麼樣的?〉

APP設計 UI UI 設計 改版 登入 網頁設計 註冊
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Previous Article設計思考驅動創新:Netflix 案例
Next Article 「支付」的體驗要怎麼設計呢?
女人迷設計實驗室 Womany PHD Lab

我們是打造女人迷產品的設計實驗室,PHD = People Happy Design!讓我們一起設計讓人快樂的服務和作品,用設計改變世界! 女人迷:https://womany.net/,女人迷 PhD Lab Medium http://bit.ly/2E7pfcD

Related Posts

日誌研究的執行經驗分享 Tips for conducting Diary Studies

為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事

OpenHCI 人機互動工作坊十年有成,跨領域攜手展望人機共生未來

1 則留言

  1. kassey on 2018-02-23 10:37

    換那個活動背景也沒比較好,沒有任何說明根本不知道是甚麼

    Reply

Leave A Reply Cancel Reply

近期文章
  • 日誌研究的執行經驗分享 Tips for conducting Diary Studies 2019-12-13
  • 培養全方位醫療顧客經驗管理(Customer Experience Management)經理 – 第一個跨域醫療服務設計整合課程在輔大開跑 2019-11-16
  • 用戶研究的三個謊言 2019-10-24
  • 不靠大數據,從粉絲的小數據讀出關鍵需求 2019-09-23
  • 為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事 2019-09-9
最受歡迎文章
By VIDE 編輯2019-12-13

日誌研究的執行經驗分享 Tips for conducting Diary Studies

By VIDE 編輯2019-11-16

培養全方位醫療顧客經驗管理(Customer Experience Management)經理 – 第一個跨域醫療服務設計整合課程在輔大開跑

By VIDE 編輯2019-10-24

用戶研究的三個謊言

By 奧沃市場趨勢顧問2019-09-23

不靠大數據,從粉絲的小數據讀出關鍵需求

By Lil Andy2019-09-9

為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事

文章分類
  • Featured (221)
  • 專欄 (21)
  • 教育 (93)
    • 工作坊 (49)
  • 未分類 (7)
  • 洞察 (269)
    • 數據分析 (42)
    • 消費者洞察 (125)
    • 研究調查 (144)
  • 產業案例 (299)
    • 交通 (30)
    • 公共服務 (46)
    • 城市 (82)
    • 政府 (28)
    • 旅遊 (68)
    • 日常生活 (146)
    • 金融 (21)
    • 銀髮 (33)
  • 組織文化 (133)
    • 團隊介紹 (40)
    • 組織溝通 (94)
  • 設計 (518)
    • 服務設計 (155)
    • 物聯設計 (35)
    • 網站設計 (86)
    • 行動設計 (116)
    • 設計思考 (128)
    • 設計方法 (103)
    • 通用設計 (38)
    • 體驗設計 (179)
關於 VIDE
VIDE 創誌是一個聚焦洞察與設計,關心教育發展並鼓勵創新的媒體平臺。
VIDE 代表 Value,Insight,Design,Education。源自於拉丁文 videre,意思是「看到」。

VIDE 持續透過介紹國內外創新案例、概念發想與設計思維與實踐方法,並邀請創新設計團隊、組織、社群成為 VIDE 的內容與活動合作夥伴。期許自己能成為國內重要創新設計的媒體代表,協助建構臺灣創新設計的產業鏈與生態系。
追蹤 VIDE
Facebook: https://facebook.com/videmedia
Twitter:https://twitter.com/vide_tw
RSS:https://vide.hpx.tw/feed

聯絡:editor@vide.tw 或 02-2511-7626
地址:10459 台北市松江路158號11F-1
2015-2017 VIDE 創誌 - 帶你看見創新設計 / 悠識文化股份有限公司

Type above and press Enter to search. Press Esc to cancel.