網站規劃從無到有 — 情境探索、需求分析、規格制定,與原型設計

更新 發佈閱讀 10 分鐘
vocus|新世代的創作平台

其實我一直認為一篇文章的啟發性因人而異,就像是這篇關於網站企劃的紀錄可能只對我自己有用一樣。網站規劃是一個創造的過程,我所認知的流程也是,說不定在一個月後這些這些流程我來說也都不管用了,但這就是一個動態的過程,每項產品最佳化的規劃流程絕對不會一致,只能想方設法地將自己認為必要的過程記錄下來,看能不能為下一個產品所用。

情境探索

While I was focused on trying to make the usability of editing data as easy and functional as it could be; Mint was focused on making it so you never had to do that at all. Their approach completely kicked our approach’s ass.

我認爲勝負就是取決在這一階段,一個100分的無用產品,跟一個30分的關鍵解法,孰輕孰重高下立判。

不過當然,我們追求的是100分的關鍵解法。

我們都知道要了解使用者,但是在第一步都會手足無措,尤其是當有機會和User訪談時,確保要做好訪談規劃,分秒其實都是非常寶貴的。

首先需求探索要先關注探索的目標是誰,Client(客戶)和User(使用者)的需求探索並不盡然相同,但若是接受客戶的網站建置的案子,往往不會有足夠的時間去做User reasearch,只能在Client身上萃取出切合他們實際需求的產品規劃。(但Client是否了解他們的User就是另外一件事了)

若目標是User, User research interview因不同階段訪問目的概括可以分為:

產品未上線:

  • Exploratory Interview 
    尚未有產品構想,但有概略方向,從User的情境中去確認我們想要解決的問題是什麼?
  • Validation Interview
    對於產品已經有明確的構想,可以利用prototype驗證此產品是否確實能夠解決User的問題,或是讓User自己走一次使用流程,針對產品做修正

產品已上線:

  • Satisfaction oriented Interview
    有用性測試,了解User認為產品的解決問題的程度和意見回饋
  • Efficiency Interview
    易用性測試,或給予受訪者任務,觀察User完成任務的流程是否如我們預期,可從中歸結出真實的Customer Journey Mapping

雖然不同階段的訪問重點不同,但是大致的流程是相似的:

  1. 確立Target User(目標使用者)
  2. 規劃訪談內容
    - 受訪者必要條件或類型
    - 受訪人數
    - 訪問目的
    - 內容與流程
    - 回饋或報酬
  3. 尋找符合Target User的候選人
  4. 接觸並邀請候選人受訪

關於訪談內容的方法設計可以參考 User Research Basics

訪談的過程有一些要點,聽取User的回應之外,並多嘗試詢問User內心的感受,挖掘每個行動與想法背後的動機。但要注意,User的回答並不一定都是真實的,其實不只是感受,可能甚至連使用者的判斷都是假的,舉范冰《Growth Hacker》中的舉例來說:

案例一、尋問使用者線上服務如果漲價(18 -> 20元),是否還願意購買,使用者普遍回答不願意,但是事實上調漲後的總收入是沒有改變的。

案例二、聊天軟體中常會有陌生人的騷擾訊息,團隊因此欲開發一鍵已讀的功能,並且被女性使用者備受期待,但在實際功能釋出之後,該功能使用率卻極低,再經過多次群體訪談後發現,女性使用者炫耀自己魅力的需求(向朋友展示未讀騷擾訊息),遠比一鍵已讀的需求來的更加迫切。

需求分析

無論哪種類型的Interview在搜集並消化訪談後的資料都可以依序以下的產出,唯一的不同在於,越後面的階段的產品目標和使用者流程應該會更加精確:

  • Persona (人物誌)— 情境中目標使用者的人物代表
    tools. Xtensio
vocus|新世代的創作平台
  • Senario(情境故事法) — 欲解決的問題/情境
  • Storyboard(故事草圖) — 著重使用者在scenario中體驗了什麼
    tools. xkcd, Balsamiq
vocus|新世代的創作平台
  • Customer Journey Map (使用者旅程地圖)— 描述User在體驗過程中接觸的事件與感受
    tools. Balsamiq
vocus|新世代的創作平台
  • User Story Mapping(使用者故事地圖對照)- 可能涵蓋穿插多種Persona活動,列出各環節需要支援的產品功能,加以排序,若功能繁多,要視情況切分產品功能的釋出階段
    tools. Cardboardit, Realtimeboard, Trello
vocus|新世代的創作平台

Customer Journey Map 和 User Story Mapping概念容易被混用,詳細區別可以參閱:

User Story 和 Customer Journey Map
UI 入門班的 QA 時間,有學員問「User Story 和 Customer Journey Map 有什麼不同?」順便把 Persona 和 Scenario 混在一起...blog.akanelee.me

不是每個階段都要如實按照上述,目標是產出完善的User Story Mapping即可。User Story Mapping的架構與詳細規劃請參照《使用者故事對照》,優秀的User Story讓接續的產品開發更具完整性與全觀性。

Strategy : UX Apprentice
Put the detailed feature discussions on hold, and design for the big picture during the Strategy phase. | Learn the…www.uxapprentice.com

從各式Interview中持續產出上述的結構化資料,構思和修正產品真正的樣貌,再持續藉由Interview或是線上data來做驗證,這就是一個不斷迭代(iterate)的過程。

規格制定

一開始的規格制定往往是在原型設計出來之前,利用條列式的方式勾勒出Client/User需求,並由以下的規格制定產生共識:

  • Feature list — 包含需要與不需要的主要功能、類別、支項,若是面向客戶的,可與報價單合併呈現,且記錄要盡可能詳盡,這對雙方來說都是一種保障
  • User Story/Flow— 用文字或圖畫敘述使用者在網站中各項活動的流程與情境,方便檢視是否有遺漏的功能或頁面,最終網站完成時也可以藉由這些User Story/Flow來驗收成果
  • Sitemap — 網站組織架構,可以清楚了解到會有哪些頁面,各自的關聯性為何,利於往後原型設計時的邏輯
    tools. xmind, draw.io, slickplan
  • Overall style — 整體的風格定調,包含色彩盤、字型、風格關鍵字
    tools. creativemarket, coolors
  • Schedule Planning — 以功能或是頁面切分,定好預計的時程規劃,可以甘特圖表達
    tools. elegantt
  • Communication Channel — 面向客戶時,千萬不要小看溝通管道的協調,當客戶找你的時候只會打手機,你就會開始崩潰了
    tools. Slack, Skype, Discord
  • Shared Data — 
    包含多項文件的共享,利於雙方的持續溝通紀錄與追蹤
    e.g. server spec and info, feature checklist, weekly report, google analytics tracking code, etc.
    tools. Dropbox Paper, Google doc and sheet

詳細的規格案例可以參考:

-網站企劃- 將網站需求與功能寫成規格文件 @ 索尼的紅燈人生 :: 痞客邦 PIXNET ::
今天要分享的是,如何將網站需求與功能寫成規格文件,也是就寫成技術人員、工程師、開發商、看得懂的文件。 我相信很多網站企劃和業務一定會遇到,到底要如何將客戶的網站需求寫出來。 寫出來的文件,工程師看得懂嗎? 這樣的東西有辦法估價嗎? 工時…sony1708.pixnet.net

原型設計

所謂的原型通常說的不外乎就是以下三種

  • Wireframe — 外框線稿,基本上不需要過多的設計,僅針對頁面排版與元素做概略式的呈現即可
    tools. Balsamiq, Axure RP
vocus|新世代的創作平台
  • Mockups — 基本上就是完成的平面設計檔,可以藉由一些工具輔助讓mockups中的元件參數精確顯示出來,讓前端工程師方便切版
    tools. Sketch, Zeplin
vocus|新世代的創作平台
  • Prototype — Wireframe和Mockups都可以再製作成Prototype,協助動態互動與流程的確認
    tools. InVision, Axure RP, Balsamiq

三者的主要差別可從下圖解釋

vocus|新世代的創作平台

Prototype 產生後可以持續回第一階段情境探索,帶入進行使用者研究中,反覆淬煉出更好的產品設計。

初學者的 Prototype
Akane Lee with UI Designblog.akanelee.me

上述的論述若有誤,歡迎糾正與討論,一起持續成長🙌🏻

留言
avatar-img
Amor on PM 產品經理反思筆記
4會員
9內容數
Amor on PM 產品經理反思筆記
你可能也想看
Thumbnail
當我們蒐集完所有感興趣的職缺後,你是否已經摩拳擦掌,要把準備許久的履歷發給對方了呢?等等!這裡有個陷阱,就是在投遞履歷之前,我們必須明白:「想用同一份履歷打動所有面試官,這是不可能的!」
Thumbnail
當我們蒐集完所有感興趣的職缺後,你是否已經摩拳擦掌,要把準備許久的履歷發給對方了呢?等等!這裡有個陷阱,就是在投遞履歷之前,我們必須明白:「想用同一份履歷打動所有面試官,這是不可能的!」
Thumbnail
「那麼我們該怎麼做?」小玉有些擔心地問道。 「先不要管它,」李天明微笑著說,「只要定期定額地公開購買飛虎科技的股票就行了。股市的波動是正常的,我們現在的策略是持續買入,等待合適的時機反彈。」 小玉聽了這話,神色稍微緩和了一些,但依然有些憂慮,「可是,如果這種狀況持續下去,我們會不會面
Thumbnail
「那麼我們該怎麼做?」小玉有些擔心地問道。 「先不要管它,」李天明微笑著說,「只要定期定額地公開購買飛虎科技的股票就行了。股市的波動是正常的,我們現在的策略是持續買入,等待合適的時機反彈。」 小玉聽了這話,神色稍微緩和了一些,但依然有些憂慮,「可是,如果這種狀況持續下去,我們會不會面
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
同時,李天明也在公司內部進行了一些戰略調整,重點發展公司的新產品線和市場拓展計劃。這一系列的舉措開始顯現出效果,公司的業績逐漸好轉,股價也穩步回升。黃董事長看到這樣的變化,心中也漸漸放下了擔憂。他明白,或許李天明的這個決定真的是正確的。雖然他不再是公司的最高領導者,但在新的團隊帶領下,飛
Thumbnail
同時,李天明也在公司內部進行了一些戰略調整,重點發展公司的新產品線和市場拓展計劃。這一系列的舉措開始顯現出效果,公司的業績逐漸好轉,股價也穩步回升。黃董事長看到這樣的變化,心中也漸漸放下了擔憂。他明白,或許李天明的這個決定真的是正確的。雖然他不再是公司的最高領導者,但在新的團隊帶領下,飛
Thumbnail
PRD 老是寫不完?這篇用實戰範例與 WBS、驗收標準等技巧,教你如何面對變動需求,也能做出全團隊都能對齊的好文件。
Thumbnail
PRD 老是寫不完?這篇用實戰範例與 WBS、驗收標準等技巧,教你如何面對變動需求,也能做出全團隊都能對齊的好文件。
Thumbnail
你是否感嘆辛苦完成的作品缺少一個完美的展示舞台? 你是否希望自己的設計作品,能被更多知音看見與分享? 現在, 捷可印「設計開箱」徵稿活動,向每一位捷可印用戶發出徵稿邀請,只要您願意分享你的作品或是印刷品開箱文,每篇作品一經採用即可獲得現金禮券回饋。 現在只要將您的設計作品或印刷品開箱文投稿至捷可
Thumbnail
你是否感嘆辛苦完成的作品缺少一個完美的展示舞台? 你是否希望自己的設計作品,能被更多知音看見與分享? 現在, 捷可印「設計開箱」徵稿活動,向每一位捷可印用戶發出徵稿邀請,只要您願意分享你的作品或是印刷品開箱文,每篇作品一經採用即可獲得現金禮券回饋。 現在只要將您的設計作品或印刷品開箱文投稿至捷可
Thumbnail
當產品經理(PM)負責SEO專案時,我們的目標是使負責的網站產品在搜尋結果頁面(SERP)中排名靠前或是維持前幾名,幫助網站增加自然流量和潛在客戶。本文將分享我如何以產品經理身份負責年流量數千萬的網站執行SEO,並成功於半年的時間內,將網站排名從 2024年2月最低的 10.4名提升至5月的 6.2
Thumbnail
當產品經理(PM)負責SEO專案時,我們的目標是使負責的網站產品在搜尋結果頁面(SERP)中排名靠前或是維持前幾名,幫助網站增加自然流量和潛在客戶。本文將分享我如何以產品經理身份負責年流量數千萬的網站執行SEO,並成功於半年的時間內,將網站排名從 2024年2月最低的 10.4名提升至5月的 6.2
Thumbnail
本文作者由自己在金融服務產品經理工作經驗與心得濃縮而成,深入淺出介紹金融服務的產品分類與特色,涵蓋零售業務(存款、轉帳、貸款、信用卡)和財富管理業務(投資、保險),並從產品經理的視角,分析各個產品線的關鍵和發展趨勢。
Thumbnail
本文作者由自己在金融服務產品經理工作經驗與心得濃縮而成,深入淺出介紹金融服務的產品分類與特色,涵蓋零售業務(存款、轉帳、貸款、信用卡)和財富管理業務(投資、保險),並從產品經理的視角,分析各個產品線的關鍵和發展趨勢。
Thumbnail
經歷一番石沉大海的投履歷過程後,現實的殘酷決定徹底改造自己的履歷以及自傳內容。以應徵職位的工作內容以及人格特質去著手,將自己過去的經歷與職務內容作連結,提高共鳴。 最終朋友們驗收後都是一面倒的好評,除了些許語病跟贅字外,沒有什麼大問題。 至於104投遞的效果如何呢?只能說換自己有了挑面試公司的本錢。
Thumbnail
經歷一番石沉大海的投履歷過程後,現實的殘酷決定徹底改造自己的履歷以及自傳內容。以應徵職位的工作內容以及人格特質去著手,將自己過去的經歷與職務內容作連結,提高共鳴。 最終朋友們驗收後都是一面倒的好評,除了些許語病跟贅字外,沒有什麼大問題。 至於104投遞的效果如何呢?只能說換自己有了挑面試公司的本錢。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News