Issuu on Google+


2010 使用者經驗專題設計 User Experience Design Project

評估與重新設計 FTP 軟體 FlieZilla 的下載功能 Evaluate and Redesign the download process of a FTP software - FileZilla

指導老師:鄧怡莘 老師 設計者:夏承捷


前言 ........................................................................................................................................... 3 一、

研究動機與背景 .......................................................................................................... 3

二、

目前介面分析 .............................................................................................................. 4

2.1

Engineering Diagram .............................................................................................. 4

2.2

Work Flow Diagram ................................................................................................ 5

三、

問題評估與修改 .......................................................................................................... 5

3.1

Heuristic Evaluation ................................................................................................ 6

3.2

Competitive Analysis ............................................................................................ 11

3.3

新的設計方向 ........................................................................................................... 12

四、

設計修改 .................................................................................................................... 13

4.1

Scenario ................................................................................................................... 13

4.2

修改後介面 ............................................................................................................... 14

4.3

修改後的工程圖........................................................................................................ 16

五、

使用者測試 ................................................................................................................ 17

六、

結論與檢討 ................................................................................................................ 18


前言

在一些團體中,常會有需要共同分享或是由某個資源提供者將檔案分享給其他人 的需求,而 FTP Client 端軟體是提供使用者連接至某個儲存檔案的站台並下載 或上傳檔案,與平常的下載方式不同的地方在於,FTP 軟體是有特定的站台,使 用者必須先獲得 IP 與帳號密碼,而通常下載時也不會只下載一個檔案而是多個 檔案的批次下載。但現今許多 FTP Client 端軟體都是由工程的角度設計,讓初 次使用的者用者無法輕易的上手,這次的評估與在設計,希望能從使用者的需求 與預想的操作步驟出發,並減少不必要的資訊,在操作上更符合使用者的需求。

一、

研究動機與背景

FTP Client 端的軟體主要的用途是提供使用者上傳與下載檔案,任何人都可以透 過這個軟體連上特定的站台進行上傳或下載的工作,使用者並不一定是工程或資 訊背景,但現有的 FTP Client 端軟體大多介面大多相同,並且是以工程的角度 設計,讓一般使用者一開始使用的時候會遇到許多問題,這次 FTP Client 端軟 體 - FileZilla 評估與再設計,先從分析現有的軟體開始,分析使用的流程與介面 的工程圖,再請專家進行 Heuristic evaluation,經由測試提出各種問題,並針 對問題提出設計的 prototype,再請使用者進行測試,並做修改。


二、

目前介面分析

將 FlieZilla 的操作流程以工程圖方式繪製出來。並利用不同顏色的線條與文字來 表達不同的視窗出現方式或資訊類型。 2.1 Engineering Diagram


2.2 Work Flow Diagram 分析使用者使用的流程,並可大致分為三個階段,第一階段為連接至站台,使用 者必須輸入站台 IP、帳號、與密碼,並連線至所需要的站台,第二階段為尋找 所需的檔案與下載之後儲存的位置,第三階段開始下載之後,觀看下載的進度與 是否下載完成。

STAGE 1 連線至站台

STAGE 2 選擇檔案

STAGE 3 確認下載狀態

三、

問題評估與修改

利用 Heuristic Evaluation 與 Competitive Analysis 來分析 FileZilla 的操作流 程並提出各個問題,將問題整理為各個面向,並根據各個面向去做修改。


3.1 Heuristic Evaluation 請三位專家,根據 Heuristic 的十項準則,針對 FileZilla 進行測試,在執行所 設計的任務過程中,提出各種遇到的問題或建議。 任務步驟

Heuristic Evaluation Principle number Rule description 1 2 3 4 5 6

Visibility of System Status 系統的狀態是否能清楚的了解。 Match between system and the real world 系統是否與實際世界有所配合。 User control and freedom 使用者的操作是否是自由的。 Consistency and Standards 操作是否有一致性與標準化。 Error prevention 是否有錯誤的預防。 Recognition rather than recall 是否提供選項讓使用者去識別而不是需要使用者去回憶項目。


Flexibility and efficiency of use

7

有彈性且有效率的操作。 Aesthetic and minimalist design

8

簡單且有美感的設計。 Help users recognize, diagnose and recover from errors

9

幫助使用者辨識、診斷錯誤、並從錯誤中回復。 Help and documentation

10

幫助的文件是否足夠。

發現的問題 Step 1:請點選檔案或站台管理員圖示,開啟站台管理員功能。 問題描述:圖示不夠簡潔清楚。

違反上列原則號碼: 2, 8

Step 1 問題描述:不知道從何開始使用軟體

違反上列原則號碼: 1,6,10

Step 2:請新增一個名為iaa316的站台,並輸入 Ip : 140.113.75.216 Username : iaa Password : iaa

Step 2

並連線

問題描述:顯示連線的狀態與一般使用的文字有所差異,不

違反上列原則號碼:

容易看懂。

2

問題描述:ip輸入位置是寫主機,容易誤認為站台名稱

違反上列原則號碼: 2,5

問題描述:預設的帳號與密碼容易讓人誤解以為已經填寫

違反上列原則號碼: 4

問題描述:連線成功時訊息太多且快速閃過無法辨識,

違反上列原則號碼:

不知道已經連線成功

1

Step 3:請設定本地站台資料夾為 我的電腦->( E: ) ->使用者研究 資料夾 問題描述:狀態敘述不足,無法清楚了解現在的連線狀態。 違反上列原則號碼: 1 Step 3

問題描述:沒有提示使用者下一步該做什麼。

違反上列原則號碼: 10

問題描述:本地站台容易使人誤解

違反上列原則號碼: 2

Step 4

Step 4:請選擇遠端站台資料夾為 新目錄->iaatest 資料夾


問題描述:畫面顯示狀態不清

違反上列原則號碼: 1

問題描述:沒有防錯的提示與回復上一步重新操作

違反上列原則號碼: 9,5

問題描述:兩個視窗的樹狀結構讓人混淆,不知道該點上面

違反上列原則號碼:

還是下面,

2,3,4

Step 5:請下載iaatest資料夾中的極機密檔案至本地的使用者研究資料夾。 問題描述:download的狀態顯示太複雜

違反上列原則號碼: 1

Step 5

問題描述:操作方式太多種與之前操作方式有差異,太過自

違反上列原則號碼:

4

問題描述:下載的方式沒有說明,必須依靠經驗

違反上列原則號碼: 4,6,10

Step 6:請從軟體下方的傳輸狀態確認檔案是否已經成功下載。 問題描述:缺少防錯與需要重新下載的提示

違反上列原則號碼: 9

Step 6 問題描述:檔案傳輸完就從序列中消失,不知道是否已經下

違反上列原則號碼:

載完成,必須另外點傳輸成功的視窗

1

問題整理 問題類型

問題描述

系統狀態顯示不清

1. 連線成功時訊息太多,且太快速消失。 2. 兩個樹狀結構讓人搞混。 3. 檔案傳輸完畢從序列中消失。 4. 缺少防錯與需要重新下載的提示。

操作方式提示太少

1. 使用者不知從何開始使用軟體。 2. 下載方式沒有說明,使用者必須依靠經驗。

訊息顯示容易讓人誤解

1. 本地站台名稱與遠端站台名稱不容易理解。 2. IP輸入位置的標示是主機,容易讓人誤解。 3. 預設的帳號密碼讓人誤以為已經填好。


問題的畫面

使用者不知從何開 始使用軟體。站台 管理員圖示不夠明 顯。

雙層的樹狀結構容 易被搞混,本地站 台與遠端站台名稱 不容易被理解。

連線訊息太多且太 快,並且不符合現實 一般使用者用 語。


雙層的樹狀結構容 易被搞混。

沒有下載的按鈕也 沒有提示。

下載訊息太多太 雜,且下載完會從 序列中消失,並且 沒有讓使用者取消 的按鈕。


3.2 Competitive Analysis 目前現存的 FTP Client 有 cuteFTP 與 Cyberduck,CuteFTP 與 FileZilla 較為 相似,但 CuteFTP 將站台列表與本地資料夾結合在一個視窗中,並且下載狀態 資訊較為清晰。Cyberduck 則是在 MAC OS 系統下使用的 FTP 軟體,相較於 FileZilla 有本地資料夾與遠端資料夾兩個視窗,使用者可以兩邊拖曳, Cyberduck 則是提供一個像站台的窗口,只有遠端站台的畫面,而操作方式與 一般網頁上下載方式相同,並且符合 MAC OS 的使用習慣,較不像 FileZilla 是 一個獨立的軟體。

開始的畫面較單純 沒有資料夾或其他 資訊,使用者會將 注意力移至連線上

站台管理員不是彈 出的視窗,並且使 用”書籤”而不是 站台管理員的名稱


瀏覽檔案,只列出 遠端站台的內容, 使用者直接將檔案 拉至 MAC OS 的資 料夾中

下載狀態資訊是彈 跳出的視窗,與一 般網頁下載共用相 同的視窗。

3.3 新的設計方向 為了改善使用者在一開始使用軟體時不知從何開始的困擾,新的設計希望將使用 的三個階段清晰的分別出來,從第一階段的連線、第二階段的選擇資料夾與開始 下載和第三階段的下載狀態檢視,清楚的讓使用者可以了解現在的系統狀態。而 資訊的內容與資訊顯示的方式,應留下使用者必要的資訊,並讓使用者可以自行 選擇是否顯示較詳細的資訊。為了讓使用者使用上更直覺的操作,也將資訊資訊 呈現的方式修改成更簡單、更容易理解的方式。


四、

設計修改

4.1 Scenario 利用 Scenario 的方式,根據使用者的使用情境,來設計出符合使用者需求的操 作流程與功能設定。

Persona 小芮 女性 22 歲 大學畢業的社會新鮮人 會計公司的新職員

STAGE 1 取得站台資訊並連線 小芮是剛從會計系畢業的社會新鮮人,剛應徵上一間會計公司,一進公司,主管 Email 告訴他可以先到公司的 FTP 站台上下載以前公司所做的各種報表資料作為 參考,信上寫著公司 FTP 的 IP 與給予他的帳號密碼。首先他開啟 FTP 軟體,一 開始看見的是他自己電腦的視窗,右半邊是灰色的畫面,並顯示未連線至任何站 台,他開始尋找哪裡可以連線至 FTP 站台,他看見可以輸入 IP 與帳號密碼的地 方,於是他輸入了 IP 與帳號密碼,並按下快速連線,軟體跳出一個視窗,提醒 他這是他第一次連接到此站台,並問她是否要儲存並命名這個站台,他想說以後 應該會常常使用這個軟體,於是便儲存這個站台為「公司報表下載」。 STAGE 2 選擇檔案與儲存位置 此時他迅速的連上公司的 FTP 站台,並出現已連線成功的資訊,映入眼簾的是 站台內的各個資料夾,於是他選擇了年度報表的資料夾,進入資料夾中,選擇了 一個檔案,此時旁邊的下載按鈕從原本的灰色變成可以使用的綠色,他按下了下


載紐,系統跳出一個視窗,並詢問他是否要將檔案下載現在所選的資料夾中,他 勾選了【下次不顯示這個提示】並按下確定開始下載。 STAGE 3 下載狀態與確認下載是否完成 當他按下確定之後,畫面出現檔案開始下載的進度圖示,此時他卻發現他抓錯了 檔案,他看見下載進度旁邊有一個紅色的取消按鈕,她按下按鈕,系統跳出一個 警告訊息,詢問他是否要取消傳輸或是繼續傳輸,他選擇取消傳輸。並重新選擇 正確的檔案開始下載。 下載完成時旁邊原本的取消傳輸按鈕變成開啟檔案所在資料夾,並顯示了傳輸成 功,他點了開啟檔案所在資料夾,並執行檔案測試是否成功。 4.2 修改後介面 軟體畫面 畫面開啟時,上方為 快速連線與我的站 台列表,使用者第一 使用者也可以使用下

次使用可以在快速

方的站台圖示,直接點

連線的地方設定 IP

選已儲存的站台進行

與帳號密碼進行連

連線。

線。

在未連線成功前使用 灰色的畫面,避免擾亂 連線之後,畫面分割為

使用者的視覺。

左右兩部分,左方為使 用者的硬碟,右方為遠 端站台

顯示連線的狀態與進 度


連線成功顯示遠端站 台資料夾

連線成功後下在與上 顯示連線狀態

傳按鈕才能使用

直接將下載狀態顯示 於檔案旁邊

可以展開或收起的詳 細下載狀態資訊,使用 者可以依照個人需求 選擇是否開啟


4.3 修改後的工程圖


五、

使用者測試

請三位使用者,依據下列兩個任務的步驟,測試修改後的軟體介面,並在過程中 觀察它們操作上的錯誤或困擾,在使用者完成任務之後,進行簡短的訪談,確認 所收集到的問題與使用者心中對於修改後的介面的看法或問題。

測試 USER 人數:三人 使用者

USER1

USER2

USER3

年齡

35

23

23

性別

工作

網路工程師

學生

學生

是否曾使用過 FTP 軟體

Y

Y

Y

是否順利完成任務

Y

Y

Y


整理後的問題

六、

結論與檢討

經過這次的使用者測試的過程,專家挑選出的問題較為細節的部分,比較缺乏整 體系統狀態的建議,較難有大方向的修改建議,在經過了使用者測試之後,原本 希望減少訊息顯示,成為較符合使用者需求的訊息顯示,但結果也並不一定符合 使用者的需求,使用者並不一定是會看訊息的顯示,而是會看整體畫面的變化來 判斷系統的狀態。而使用者測試的使用者挑選,則應該也挑選完全沒有使用過 FTP 軟體的受試者,因為受試者都會因為曾經使用過相關軟體而習慣於原本即使 設計不良的軟體,而不會發現不方便的問題,因此在選擇使用者測試的時候也應 該要選擇更多樣化的使用者。 經過了這次的再設計,漸漸了解了使用者為中心的設計,並不能完全因為自己的 意見而修改系統,而在修改時也必須考慮到各個方向,才不會修改了一個問題卻 發現產生更多的問題。而不僅僅修改資訊的呈現,還必須從使用者整個使用的情 境去選擇介面呈現的方式,與所必要呈現的資訊。


Software Redesign