使用者條件
app 的目的為提高政大師生對雄鷹的討論熱度。所以我們的目標使用者集中在政大在校生,並以對雄鷹球隊的關注度高低作為區隔變數。
關注度低者對籃球不了解,不喜歡閱讀專業的籃球數據分析,對所謂籃球打得好與不好沒有概念,但是對雄鷹籃球隊沒有負面觀感。
關注度高者「對雄鷹球隊的資訊瞭解程度,以及平常主動獲取雄鷹資訊的頻率」,我們預期我們的使用者對雄鷹擁有較高的關注程度,透過訪談這群使用者,可以瞭解在我們的產品還沒誕生前,使用者會透過哪些管道去獲取雄鷹相關的資訊。而透過訪談關注度分別是高與低的使用者,可以瞭解影響他們「是否會關注雄鷹」有哪些原因。
兩者對於籃球資訊的閱讀習慣與產品使用目的有明顯差異,基於產品目的,我們力求同時滿足兩者需求,並取得平衡。
關注度低者對籃球不了解,不喜歡閱讀專業的籃球數據分析,對所謂籃球打得好與不好沒有概念,但是對雄鷹籃球隊沒有負面觀感。
關注度高者「對雄鷹球隊的資訊瞭解程度,以及平常主動獲取雄鷹資訊的頻率」,我們預期我們的使用者對雄鷹擁有較高的關注程度,透過訪談這群使用者,可以瞭解在我們的產品還沒誕生前,使用者會透過哪些管道去獲取雄鷹相關的資訊。而透過訪談關注度分別是高與低的使用者,可以瞭解影響他們「是否會關注雄鷹」有哪些原因。
兩者對於籃球資訊的閱讀習慣與產品使用目的有明顯差異,基於產品目的,我們力求同時滿足兩者需求,並取得平衡。
訪談研究目的
- 了解受訪者的背景、行為與期待
- 了解受訪者平常接觸雄鷹資訊的管道與行為
- 了解對雄鷹的情緒與心裡想法
- 了解對產品(app)的期待與預期功能
最終訪談對象屬性分佈
圖片僅為示意用
本能、反思、行為層面的期待
情感層面
能使政大一般學生藉由我們app上的資訊(如球員奮鬥故事、生活小事),增加對雄鷹球員的同理心也拉近與他們的距離。 有距離感是最明顯的情緒。 喜歡學校因為球隊而有向心力的感覺,滿足社群情感上的需求。 期望有鮮明的球員風格與包裝,而不是制式化的數據表格。
行為層面
低關注度者不需要太深入、複雜的球賽進階數據。 高關注度者想得到球員、比賽更細節的數據與描述。
反思層面
要產生更多共鳴與推薦,使政大因雄鷹而產生凝聚力。 低關注度的使用者能夠過這個 App,建立對雄鷹球隊的興趣與正面觀感。
高關注度者能滿足於 App 的資訊與操作流暢程度。
資訊架構分析
分析每個資訊架構的優缺點,並分析各個介面用哪一個資訊架構最合適。
Hierarchical tree structure
- 優點
- 缺點
→ 因為是手機App,所以使用Tree當成全域導覽的資訊架構可能會造成空間過於擁擠,使用者點擊不易,可能會在執行階段常常點錯不同的項目,造成易用性的降低。
→我們的app資訊量並沒有那麼龐大,需要放入這麼多導覽連結
- 優點
→ 使用Hamberger去當作全域導覽的話,會比Tree更不佔空間,適合作為以手機為主要載體的雄鷹官方App
→ 首頁可以用Bento Box的資訊架構呈現,跟Drawer不衝突
→是目前極其常見的App設計,不需要重新教育使用者就可以知道如何操作 - 缺點
→ 使用Hamberger的話,需要讓使用者清楚這個是可以點擊的,可能在onboarding或是畫面上的呈現需要注意,必須是有給使用者足夠前饋的。
→ 選項會藏在裡面,使用者沒有點入選項就會沒有看到下面清單的介面
→需注意命名,避免混淆使用者,導致使用者不知道自己想用的功能要在哪個介面才能找到
- 優點
→在商店裡面的訂購流程可以使用這個IA。選擇商品→選擇款式、數量→下單(可參考foodpanda的訂購flow)
→ 如果只有商品購買時使用Nested List,應該不會讓整體產品的資訊架構過深
→ 第二步驟(選擇款式、數量)呈現商品的詳細資訊,例如衣服的正反面、尺寸等等,雖然在訂購流程中多了一個介面,但因為商品的詳細資訊是使用者想知道的,所以不會有浪費版面的問題 - 缺點
→ 進入下一個介面會多一步程序,增加使用者的不便
- 優點
→ 比賽的區塊,其中在數據的子區塊中,由於有很多不同種的數據呈現形式,我覺得可以使用Tab的方式呈現,優點是讓使用者得到明確的前饋,清楚在當前的數據區塊中,他還有哪些選項可以選擇,而不是用Dropdown選單,這樣可能會讓資訊的易發現性降低。
→可以在數據的區塊用tabs和filtered view結合,就像notion表格的排序功能。 - 缺點
→介面設計上需思考tabs的空間,如果tabs過多該如何解決等等問題
→tabs縮減到3-5個以內,各個tabs的命名對比較對籃球不熟的使用者友善一點比較好,後續可以針對怎麼命名做研究
- 優點
→省空間,我們App上各個spoke的相互聯繫需求不高,多是可以獨立的區塊及內容 - 缺點
→多一步沒必要的動作可能造成使用者的記憶性錯誤
→ 麵包屑導覽列,分佈式認知,降低記憶上的負擔
→使用上會需要回到主頁面再進入另一個頁面,容易造成不便
- 優點
→ 球員的區塊,因為一個球員分別有數據、影音、評論、Highlight等不同區塊,這幾個資訊的性質其實差異蠻大的,彼此間應該也不會有需要互相連通的狀況,因此覺得使用Bento Box作為此區塊的資訊架構或許蠻適合的,可以弄成一個球員的戰力分析Dashboard,有點像遊戲中會有的角色介紹與能力面板那種感覺,或許可以吸引平常比較不會看球的粉絲
→ 在球員介面,如果是針對平常對籃球涉獵不深的人,用一個像是商品輪播的介面元件,應該會比較有吸引力,這個算是應用漸進揭露的原則,不要讓使用者一開始就看到超多球員名單而不知道要如何去做選擇
→ 遊戲的角色輪播這種感覺,然後因為要避免選擇想要的球員可能要點擊左右很多次的情況,所以我們會在左下角增加角色大頭貼的小縮圖,然後有好幾個點,他們可以直接點那個點,或著是透過點快速知道想要的球員大概在哪個位置。
→ 比賽專區的入口畫面也可以用bento box統整最近一場比賽的重要資訊,例如用圖表整理出單場最佳助攻、籃板數最多的球員等等。也可用統計圖表呈現每一場比賽的得分(同樣可以用在球員數據介面)。使用者看了整理過的重要資訊後再點擊欄位即可查看詳細資訊 - 缺點
→如果首頁的資訊對使用者來說不是很常用到的,在切換介面時必須經過dashboard這點可能延長了使用者旅程
→多一步沒必要的動作可能造成使用者的記憶性錯誤(同hub-and-spoke)
→Dashboard上過多資訊會造成介面不夠簡潔
- 優點
→在比賽專區呈現數據時,可依據不同篩選標準,有系統地呈現比賽數據 - 缺點
→對籃球比賽沒有概念的使用者可能認為此功能多餘
→使用者可能不知道某個特定資訊在哪個分類裡面,像「球員的一天」可能不知道在「球員」的分類還是在「影音專區」
- 優點
→在影音專區的入口介面,每個影片類別只呈現2部最想推播的影片,並以直列式呈現分類和影片。 - 缺點
- 需要有明顯的指示或者設計至少要能符合使用者的心理模型,讓使用者找到被隱藏起來的資訊
需要使用的導覽體系
我們的首頁上方需要一個全域導覽列,含有關於雄鷹、商店、比賽、球員、影音專區、互動專區。下方搭配多個區域導覽,如比賽底下區域導覽則有數據、未來比賽、過去比賽、直播、評論、搜尋等。以及輔助性導覽,如麵包屑導覽列,放置在內文導覽上方,讓使用者了解所處位置。
我們需要全域導覽,因為全域導覽可幫助使用者了解所處區域與功能,而區域導覽列則可以幫助使用者了解所處區域之功能和各區的資訊內容。我們的主要功能下面有許多次要功能,需要區域導覽使資訊階層以方便檢索。
我們認為不需要附加導覽,我們的介面目前沒有太多複雜的資訊與功能,全域與區域導覽即可方便使用者瀏覽。
我們考慮的其他導覽方式:可以採用社交導覽,如比賽的hightlight專區,根據影片的熱門程度、使用者的分享、投票、該影片的關注度等做排序,推薦瀏覽影片在首頁。
我們需要全域導覽,因為全域導覽可幫助使用者了解所處區域與功能,而區域導覽列則可以幫助使用者了解所處區域之功能和各區的資訊內容。我們的主要功能下面有許多次要功能,需要區域導覽使資訊階層以方便檢索。
我們認為不需要附加導覽,我們的介面目前沒有太多複雜的資訊與功能,全域與區域導覽即可方便使用者瀏覽。
我們考慮的其他導覽方式:可以採用社交導覽,如比賽的hightlight專區,根據影片的熱門程度、使用者的分享、投票、該影片的關注度等做排序,推薦瀏覽影片在首頁。
Card Sorting 樹狀圖
受訪者針對我們的用例做適當分類
本次受訪者為高關注度的女性
差異用例表格
A | B | C | D | |
---|---|---|---|---|
1 | 差異用例 | 我們的分類 | 受訪者的分類 | 差異帶來的啟發 |
2 | 觀看球員與球迷互動片段 | 影音專區 | 球賽相關 | 我們一開始設立「影音專區」是為了讓關注度低的使用者可以在不確定要觀看什麼訊息時可以選擇進入門檻較低的「影音專區」。這次做分類的受訪者屬關注度較高的,注意的重點就直接放在「比賽相關」的資訊以及「球員相關」的資訊。推論我們的假設:「影音專區給關注度低的使用者」應該是對的。 |
3 | 點擊觀看球賽highlight | 影音專區 | 球賽相關 | |
4 | 點擊球員練習日常片段 | 影音專區 | 球員私生活 | |
5 | 點擊觀看球賽highlight | 影音專區 | 球賽相關 | |
6 | 給影音按讚(或傳遞表情) | 影音專區 | 互動 | 受訪者將較遊戲化或是可以操作、互動的部分都列入「互動」。 |
7 | 進入影音區,在影片下方留言 | 影音專區 | 互動 | |
8 | 點擊影音專區,查看所有影片 | 影音專區 | 互動 | |
9 | 通知使用者最新比賽影片已更新 | 通知 | 球賽相關 | 受訪者並未將「通知」特別拉出一類。 |
10 | 通知使用者最新cama優惠 | 通知 | 商品 | 對於受訪者而言,所有商品相關的都在一類。 |
小結
受訪者將「初始設定」排在最高階,其餘的她覺得在同一層。她的「商品」分類跟我們的「商店」基本上是一樣的。對受訪者而言,沒有細分到影音專區或是通知,對她而言用這個app的重點就是看「比賽相關」的資訊、「球員相關」的資訊以及要買紀念品時看「商品區」。和我們一樣有「互動區」,內容大多類似。「比賽」的部分,她沒有像我們一樣細分「未來」、「過去」比賽等等。她說她不太會去找以前的比賽,對她而言近期賽程時間跟直播是她比較關注的。
品牌定位
我們的品牌
雄鷹球隊,UBA 的一支學生籃球隊。
最適合我們品牌的六個形容詞
sporty 、沒有負擔的、有話題性的、帥氣的、有活力的、鮮明強烈的
雄鷹球隊,UBA 的一支學生籃球隊。
最適合我們品牌的六個形容詞
sporty 、沒有負擔的、有話題性的、帥氣的、有活力的、鮮明強烈的
品牌代表人物
高飛,雄鷹的吉祥物
可以優化的地方
根據活動調性去改變它局部的配色,根據不同活動改變配飾或服裝配色等等。
高飛,雄鷹的吉祥物
可以優化的地方
根據活動調性去改變它局部的配色,根據不同活動改變配飾或服裝配色等等。
品牌聲音
(輕鬆好親近的)
(輕鬆好親近的)
- 登⼊問候語
根據使用者上一次登入的時間,去呈現不同的訊息
Welcome back!
好久沒看到你~ - 成功回饋
太好了,得分! - 錯誤回饋
喔喔!失誤了,再試一次吧!
必填的資料沒有填 →
登入時,帳號、密碼輸入錯誤:
帳號不存在 → 你好像還不是我們的粉絲喔!快加入我們吧!
密碼輸入錯誤 → 密碼輸入錯誤
6~12碼,要含英文、數字
註冊的時候密碼不符合規範 → 密碼需含英文、數字,共6~12碼,再想一個吧! - ⼀般訊息
我們列舉 App 中常見的幾個情境,並且設計對應的訊息供參考。
商品區商品已售完 → 商品銷售一空,下次出手要快!
球員動態沒有更新 → 忠實的粉絲,最新的動態都已經看完了! - 嚴重錯誤
(裝可憐的高飛)
高飛在努力的飛,表示它快要到了 - ⾏銷說明
關於產品 →
這個APP能滿足你對雄鷹球隊的各種需求。如果你想要輕鬆地瀏覽,我們有影音、互動專區。若想要了解球員不同於球場上專業的面貌,可以查看球員專區,更貼近他們的日常生活。又或是你對於比賽資訊有著好奇與熱忱,我們也統整了各式數據,讓你輕鬆獲取。一個APP,讓你掌握所有資訊。
品牌視覺詞彙
小結
透過幫我們的產品設計個性,並且在各個用例或功能中加入品牌個性、情緒上的設計,能夠讓用戶在與我們的產品進行互動時,更好理解與接受到操作流程中的回饋。
我們在經過使用者訪談後,觀察他們可能潛在的情感需求,並且替以下流程新增一些設計。
我們在經過使用者訪談後,觀察他們可能潛在的情感需求,並且替以下流程新增一些設計。
所新增的設計 | 所滿足的潛在情感需求 | |
數據載入等待期間,畫面顯示 Q 板高飛在記數據的 GIF。 | 數據載入通常會需要使用者等待一段時間,而這段時間使用者容易分散注意力,而高飛是學生間普遍熱門的吉祥物,我們期望透過高飛認真在記數據的 GIF 讓使用者更感覺到目前是在雄鷹的產品中,也更能融入籃球的情境。 | |
進階數據的切換按鈕,上面加一個球探高飛的 Icon,呈現專業感。 | 初始畫面僅呈現基礎數據是為了符合 Progressive Disclosure 的原則,降低對於低關注度者的雜訊,而高關注度者普遍認為自己是比較專業的,因此透過設計對應心理態度的 Icon 在切換按鈕中。 | |
球員呈現上除了專業照,部分頁面使用 Q 板的大頭貼。 | 目前官網與其他平台呈現的照片,多營造專業的感覺,但對部分同學來說卻帶來一種距離感,我們認為或許在定位上是希望讓同學減少距離感的「雄鷹 專屬 App 」中,或許可以嘗試以 Q 板頭貼去呈現出球員的特色。 | |
球員問答的頁面,選擇配合 Q 板大頭貼與對話框去呈現 | 球員的簡單問答與常見問題當中,我們觀察到官網多是以直接條列大標題、小標題的方式呈現,卻失去了與球員對話的親近感,因此我們設計讓這些問題與回答的呈現,能像是社群軟體的聊天對話框視覺呈現一樣,營造出是兩個人在對話的感覺,藉以拉近球員與學生間的距離感。 | |
在會員註冊成功時,跳出雄鷹想隊球迷說的話,期望不管是什麼時候加入的球迷,都能夠一起陪伴雄鷹這支球隊走過風風雨雨並一起成長。 | 選擇成為一隊球隊的粉絲,通常都會有許多潛在的情緒,可能是感動、期待,我們設計在加入雄鷹會員的每個註冊流程畫面中,呈現的不只是普通的輸入帳號等提示性的句子,在畫面的旁邊也另外設計一些能激發情緒的句子。 | |
在首頁呈現「教練的話」,在每天會呈現不同的子威教練所說的話,因為雄鷹每次練球旁邊都會有一個白板,並且在白板上寫出教練希望他們記住的精神,部分受訪者提到每次經過體育館都會去看一下那個白板。 | 我們設計讓使用者每天進行登錄時,能夠感受到球員每天練球的辛苦,也能感受到他們需要隨時保持著專業的態度進行訓練,透過子威每天教訓球員的一句話,就像是球隊中的小故事、練球趣事一樣,能夠讓使用者在不知不覺中更了解到雄鷹最近的狀況,並拉近距離感。 | |
在最一開始 Onboarding 的流程中,像是高飛在講述故事的流程呈現。 | 讓使用者快速了解高飛是雄鷹的吉祥物,同時高飛的設計是為了傳達什麼精神,同時更有朋友拉另外一個朋友看球的感受,讓高飛來快速帶領使用者了 解 App 中的所有功能。 |
腳本設計
查找特定球員
評估目的:測試使用者是否可以藉由此操作讓更親近球員。
評估目的:測試使用者是否可以藉由此操作讓更親近球員。
查找特定比賽數據
評估目的:測試使用者是否能更容易尋找比賽資訊。
評估目的:測試使用者是否能更容易尋找比賽資訊。
查找球員的貼文
評估目的:測試是否能增加使用者跟球員的互動頻率。
評估目的:測試是否能增加使用者跟球員的互動頻率。