a practice of analysis of websites of banks 2014

1. 銀行網頁
使用者經驗初步研究
DESIGN
INFORMATION
&
THINKING
LAB
www.ditldesign.com
-­‐
drhhtang@drhhtang.net
2014
March
21
NTUST

2. 彰化銀行網頁分析
CHB
Current
Website
Analysis

3. 大眾銀行
TC
Bank
中國信託
China
Trust
渣打銀行
Standard
Chartered
澳盛銀行
ANZ
Bank
比較與參考
Reference
&
Comparison

4. 首頁排版
Current
Issue
01
Index
Layout

5. 首頁畫面沒有置中 畫面沒有置中, 給人不穩重的印象, 也顯示該銀行不懂網頁, 顧客怎能相信網銀的安全性

6. 首頁畫面與其他銀行比較
1.大眾
4.澳盛
2.中信
3.渣打
畫面都有置中, 給人成熟穩重的專業形象

7. 畫面太窄
文字太小
沒有充分利用現今寬螢幕的優勢, 只利用了一半的螢幕
文字呈現相對其他銀行顯得太小
不利於彰銀年齡層偏高的主體客群

8. 首頁排版凌亂 視覺動線不佳,不知從何開始尋找所需資訊

9. 首頁排版 - 與大眾銀行比較 首頁只呈現常用資訊, 以標籤的概念將細項收起, 切換標籤則切換內容

10. 首頁排版 - 與中信銀行比較 主要頁面只呈現常用的資訊, 並以區塊清楚排列出每個類別

11. 首頁排版 - 與澳盛銀行比較 將所有資訊集中在同一頁面, 可一次瀏覽所有服務, 無須用滾輪一直往下滑動
mouse-on即可瀏覽細項, 不用跳離該頁面, 減少使用者摸索網站的時間

12. 首頁排版 - 與渣打銀行比較 主要頁面只呈現常用的資訊, 並以區塊清楚排列出每個類別

13. 首頁排版 - 與渣打銀行比較 比較不重要或不常用的資訊等放在下方, 保持主畫面乾淨

14. 銀行各項服務介紹
個人常用功能
廣告和優惠方案
區塊分割清楚, 和銀行服務介紹有關的資訊放在上方橫排, 個人常用的功能擇垂直列在明
顯的LOGO下方區域, 廣告和特惠方案則大塊面呈現在中間和下方區域
首頁排版
L型區塊呈現不同資訊

15. 首頁動畫
Current
Issue
01
Index
MoTon
Images

16. 首頁以動態方式呈現的細節太多
廣告呈現的方式
像病毒連結
缺乏專業形象
同時有四個區塊的動態資訊, 且運動方向皆不相同, 令人分心

17. 快速引導區域
Current
Issue
01
Quick
Guide

18. 快速導引區域 快速導引區域放在網頁最下方, 使用者可能都把整個網頁看完了才會發現

19. 放在顯著位置, 一點進首頁就看得到
快速導引區域 - 與大眾銀行比較

20. 放在顯著位置, 一點進首頁就看得到
快速導引區域 - 與中信銀行比較

21. 放在顯著位置, 一點進首頁就看得到
快速導引區域 - 與澳盛銀行比較

22. 放在顯著位置, 一點進首頁就看得到
快速導引區域 - 與渣打銀行比較

23. 快速導引
常用功能快捷鍵
一進入首頁便有顯示快捷鍵的操作資訊
讓重度使用者可以更快速到達想去的頁面

24. 快速導引
常用功能快捷鍵
a
→
b
See
you
!
Own
bank
Term
rate??
快捷鍵的設計似乎也有巧思在裡面
是容易理解的字母組合, 讓使用者更好記憶

25. 首頁配色
Current
Issue
01
Index
Color

26. 首頁配色缺乏一致性 視覺上混亂不協調, 畫面中的細節都與黃色系主體不搭

27. 一致性的主色彩 顯著的標題色塊, 不同字體顏色, icon, 甚至活動廣告都配合主體紅色系

28. 以代表色之紅和綠為主色調, 不論是網頁、文宣品或卡片都一貫使用紅綠色系
一致性的主色彩

29. 一致性的主色彩 在色彩使用上非常用心, 甚至連廣告所採用的顏色大多也都是和整體能夠搭配的藍和綠

30. 一致性的主色彩 整個網站都採用具有高度一致性的藍和綠為主色彩, 搭配灰和白的背景色調

31. 沒有善用圖像與icon
Current
Issue
01
About
icon

32. 沒有善用圖像與icon 應該將按鈕依功能分類, 讓人可更快速找到想要的資訊, 並統一視覺風格

33. icon呈現資訊 使用風格統一的icon, 提升重要功能區塊的醒目程度

34. icon呈現資訊 將重要的服務資訊與圖像結合

35. icon呈現資訊 用顏色和圖像來顯示各種投資標的的當前狀況, 點下方的按鍵便可得到進一步資訊

36. icon呈現資訊 用顏色和圖像來顯示各種投資標的的當前狀況, 點下方的按鍵便可得到進一步資訊

37. 以顏色和icon篩選結果 查詢各服務據點的地圖時
使用者可以點選上方的icon按鍵, 篩選想要的服務據點類型
可以只呈現一種或多種分行位置, 並得到立即的資訊回饋

38. 以顏色和icon篩選結果 查詢各服務據點的地圖時, 使用者可以點選上方的icon按鍵
篩選想要的服務據點類型, 可以只呈現一種或多種分行位置, 並得到立即的資訊回饋

39. 圖示說明理財方案 以各種簡易圖表呈現理財方案的內容
讓用戶一目了然各個步驟和進程

40. 各層資訊於首頁的分佈比重
Current
Issue
01
InformaTon
Distribute
RaTo
on
Index

41. 各層資訊於首頁的分佈比重 網站地圖上, 有出現於首頁的服務 1 / 3
第一層
第二層
第三層

42. 網站地圖上, 有出現於首頁的服務 2 / 3
各層資訊於首頁的分佈比重
第一層
第二層
第三層

43. 網站地圖上, 有出現於首頁的服務 3 / 3
各層資訊於首頁的分佈比重
第一層
第二層
第三層

44. 第一層
第二層
第三層
第四層
無法歸類
外部連結
沒有條理, 看不出各功能的從屬關聯, 最新資訊是否需要佔這麼大面積?
各層資訊於首頁的分佈比重

45. 個人金融
Current
Issue
01
Personal
Finance

46. 個人金融首頁 商品總覽,選項字太小, 且一直受到後方動態banner干擾, 看不清楚

47. 網路銀行使用細節
1.填寫轉入戶名應屬”確認動作”而非進階服務
2.系統也無提供使用者任何提示,為何無法確認新增
填完轉帳資料後若無填寫進階服務的轉入戶名欄位, 就無法確定新增該交易

48. EX
瀏覽基金服務時需要知道台幣帳戶餘額,才能決定要不要下單
而非下單後系統顯示”餘額不足”得再回到台幣帳戶頁面去看到底剩多少
若一次想要操作很多項目,還得另外筆記下來很麻煩
網路銀行使用細節 資產有分很多種類, 卻沒有地方可以``同時顯示”每一個種類有多少錢

49. 以擬人角色提供個人化服務內容
中信網路銀行
設定選項容易理解、好操作設定
使用者可以很輕鬆地自行設定各種提醒
有個人資訊的部分會用***字號並用深紅色
謹慎的處理能讓使用者感到安心

50. 月曆形式查詢最近帳戶動態
中信網路銀行
自己的首頁和暱稱, 以及自己專屬的理財管家
首頁以行事曆的方式呈現最近的帳戶狀態或理財動態, 可以清楚查詢
並會告知更進一步的資訊要至哪裡查找

51. 新手上路頁面 文字說明為主, 看起來很複雜

52. 影片取代複雜文字說明 根據不同需求, 以影片教學方式, 使用者可快速了解銀行服務和使用方法

53. 影片取代複雜文字說明 依據不同需求
以“達人”的影片教學方式, 讓使用者了解銀行的服務和使用方法

54. 影片取代複雜文字說明 依據不同需求
以“達人”的影片教學方式, 讓使用者了解銀行的服務和使用方法

55. 互動式的試算功能 全以表格、文字呈現

56. 互動式的試算功能
中信銀行
運用拉bar與圖像呈現, 容易理解且操作簡單
可以任意調整每個項目的細節, 並立即得到回饋

57. 常用頁面資訊陳列方式不佳
Current
Issue
01
Bad
Layout
for
The
Frequent
Used
Pages

58. 金融看板利率查詢 利率查詢是經常使用的功能, 卻沒有辦法直接從首頁點進來
標題選項的字根內文一樣大, 很難吸引使用者注意

59. 金融看板證卷網路下單
卷軸
裡面還有
卷軸
畫面擁擠, 分割零碎, 第二層卷軸操作不便

60. 金融看板基金理財 畫面擁擠, 分割零碎

61. 中信銀行基金理財 畫面清爽, 分類明確, 一目了然

62. 其他值得參考的細節
Current
Issue
01
Other
Details
worth
to
take
a
look

63. 以不同色調區隔不同用戶族群 創智理財、中小企業理財及優先理財之頁面色調非常不同
並以文字標語點出使用情境和用戶的需求, 讓不同類型的用戶得到專屬感受

64. 以不同色調區隔不同用戶族群 創智理財、中小企業理財及優先理財之頁面色調非常不同
並以文字標語點出使用情境和用戶的需求, 讓不同類型的用戶得到專屬感受

65. 畫面排版一致 切換到次要資訊時, 網頁排版與主要資訊畫面相同
使用者對網站的理解不會被打斷, 使用上不會有跳來跳去的感覺

66. 以展開方式呈現細項 保持畫面乾淨

67. 步驟清楚、注重細節 各種申請步驟標示清楚, 並儘量簡化流呈
另外更將「專人與我連絡」的服務直接呈現在旁邊
讓不熟悉電腦操作或是想了解更多資訊的使用者有另一個選擇
太過細節的內容以mouse-on顯現, 不會讓介面過於雜亂, 卻能提供同樣足夠的資訊

68. 清楚告知流程步驟 在申請等需要多個步驟的頁面, 會告知使用者總共有多少流程要進行、現在進行到哪裡
讓使用者能充分掌握目前狀況, 耐心且安心地操作下去

69. 以表格式說明清楚明瞭 各據點的服務項目以表格打勾的方式說明, 能夠依據自己的需求前往各分行不會白跑
另外也以顏色區分, 藍色為硬體設備, 綠色則為人員服務的部分

70. 貼心的細節 每個服務介紹頁面的最下方, 都會附上客服專線和搜尋分行的連結
若看完介紹後還有疑問/想要申辦, 能立即與銀行取得連絡或前往鄰近的據點辦理
特別提醒列印電子帳單所需要的軟體及列印設備 並附連結
讓不熟悉電腦操作的使用者減少操作的困難並降低錯誤率

71. 資訊順序清晰
1.
2.
3.
首先介紹用戶使用某項功能的權益和優點
接著再詳細說明該項服務的細節和內容
最後在頁面下方才是讓用戶申請的連結資訊
順序：吸引 →了解 →行動

72. 找尋各種推廣方案的機會 每個類別最常被問的問題, 會附上優惠的方案訊息或是推廣某項服務的優點
表面是「回答問題」實際上則是藉此推廣用戶之權益

73. 整體修改建議
資訊歸類
讓畫面更簡潔
使用者可在最短時間內了解網站架構
重新評估資訊的重要性
以調整每個種類的服務在首頁上所佔的比重
視覺上做出重要程度的分別(ex大字比較重要)
將視覺風格統一
字體 / icon / 顏色

74. 報告至此結束
謝謝
By
Anne
Chen
Hsien-­‐Hui
Tang