• 沒有找到結果。

(user interface ,UI)設計細節的探討。

第一階段,上傳照片:

3.3.2 註解類型(Annotation Type )

本工具除了要讓使用者標記照片外,還希望可以幫助使用者在大量的照片

3.3.3 權限(permission)控管

本論文一開始希望可以有網路社群的功能,因此參考 OKFN Annotator 工 具的權限設定管理,雖然最後網路的社群功能並沒有實做出來,但是我們還是

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 18 ~

表格 5 權限簡化內容 Permission 內容

read:誰可以看到這個註解。

admin:誰可以修改此註解的權限。

update:誰可以編輯此註解。

delete:誰可以刪除此註解。

第二階段編輯註解頁面,如 Fig-11。

Fig- 10 註解編輯頁面 第三階段,搜尋照片:

3.3.4 Input

本論文在搜尋輸入關鍵字的部分,分成兩大類。第一種為單一關鍵字的快 速搜尋,如同 Google 搜尋一般;第二種為應用前面註解類別的特性的「多重 搜尋」。為了讓搜尋更為精準,這兩種搜尋都會讓使用者選擇註解的類型,如 Fig-11。在快速搜尋的部分,使用者填完關鍵字可以選擇下面的類型按鈕,增 加搜尋的精準度。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 19 ~

Fig- 11 搜尋輸入介面

當使用者想設定多個搜尋條件的時候,我們也有設計 UI 讓使用者輸入,

根據條件輸入欄位中,則可以使用各個欄位相對應的類型來進行更精準的搜 尋。

3.3.5 Output

搜尋結果的顯示我們在這邊分成兩部分:第一,搜尋結果總覽的部分;第 二,點選搜尋結果,進入單張照片觀看註解部分。以這種方式呈現主要是參考 Google 搜尋結果的呈現方式,在 Google 網頁上呈現搜尋結果的總覽,再根據 使用者的選擇,連結到所要的網頁。目前我們的做法也會如同 Google 搜尋,

如 Fig-12。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 20 ~

Fig- 12 搜尋結果頁面 3.3.5.1 總攬頁面

此頁面頂部為 3.3.4 節的 input 畫面,按下搜尋按鈕之後,系統會將搜尋 結果直接在下方顯示。這邊使用 AJAX(Asynchronous JavaScript and XML)技 術,當使用者送出表單向網頁伺服器(web server)做請求的時候不必傳回新的 頁面,直接藉由 JavaScript 處理來自 sever 的回應。這樣的做法減少了 server 與瀏覽器之間的資料傳輸量,同時許多處裡可以在用戶端(client)上完成,減 少 server 負擔,讓回應更為快速。除了效能的需求,這樣設計也更為直覺,

使用者如果需要再次搜尋並不用重新回到上一頁。

顯示的部分會將每張照片的註解顯示出來,並將符合搜尋的註解強調 (highlight)出來供使用者觀看,確認是不是他想要的註解,如同 Google 每個 連結下的文字說明。此外還會有配合後端(back-end)的推薦系統,顯示這次關 鍵字的相關推薦搜尋,希望可以符合使用者期望。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 21 ~

3.3.5.2 細部註解頁面

這部分的頁面與第二階段標記照片的頁面外觀是相同的,顯現出照片的各 個註解。因為這是搜尋的結果,我們希望設計出像 Google 一樣,可以強調 (highlight)搜尋結果的 UI 設計。原本的設計是使用者將滑鼠移動到照片上才 會顯示出內部註解,現在我們增加一段 JavaScript code 去觸發這個動作,在 搜尋頁面 load 進來的時候可以直接顯示註解並且看到符合搜尋的註解內文,

達到強調的效果,比使用者去移動滑鼠來觀看註解直觀。

3.3.6 Date Picker

不管是在註解的撰寫或是搜尋條件的輸入,只要是要填寫時間的地方,本 工具都使用 JQuery Datepicker 讓使用者選擇,如 Fig-13。

Fig- 13 Datepicker

這樣的設計並除了網頁安全設計所說「不要輕易相信使用者輸入的資料」

的防範,而是日常生活中使用的日期格式過多,同一天的日期有不同的表示方 法,有西元、有民國,年度的位置有在前、有在後…等等,每個使用者的習慣 不同。引入 Datepicker,除了讓使用者有選取代替輸入的便利性,更重要的 是有防呆機制(Fool-proofing):免除使用者輸入錯誤的日期,如:2/30 或起

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 22 ~

始日起晚於結束日期,如:2014/7/30~2013/6/01。避免須要進行錯誤資料清 洗(Data Cleaning)步驟。

行照片註解的 CRUD( create, read, update and delete)操作。首先從使用 者的角度切入使用者情境(User story),然後討論實作的流程,以及最後根據

相關文件