優化學生對使用師大APP功能之體驗

改善介面功能凌亂不一的問題并且移除部分功能性不大、不常使用的工具

#發現問題

重複、不統一、複雜……

在使用師大APP的過程中,不難發現有許多重複性的功能以及功能歸類名稱與師大網站系統名稱不統一的問題,這難免會讓使用者產生疑慮,甚至造成使用上的混淆。

再者,師大APP介面的一些圖標並沒有點擊功能,而這樣的圖標散落在APP頁面的各個角落内無非會造成使用者錯誤判斷而進行無效的點擊。

此外,師大Day Pass 是學生進入校園的身份驗證工具之一,但是打開Day Pass頁面的過程過於繁瑣,使用者在通過檢關時常常因爲來不及打開頁面而影響檢關的動綫流暢度,進而使學生捨棄使用師大Day Pass,選擇使用其他工具通過檢關。

#定義問題

我將師大APP介面重新調整並歸類,保留使用者會常用的功能,並刪除一些作爲學生的我認爲實用度不高的功能。同時,我將日常工具(如:Day Pass)的按鍵另外放大,并且同步了師大APP和師大網頁系統上使用的名稱。

#幫助使用者認識、偵錯並從錯誤中恢復

從登入APP的界面開始,我發現其中並沒有設置「忘記密碼」的功能,這意味著凡是忘記密碼,使用者將無法通過APP找回密碼;另外,師大網頁的校務行政登入口是以方形格子為設計,我覺得兩者既為相同的系統,或許應該統一其介面上的設計。

#系統不一致

進入首頁之後,位於名字左邊的視覺符號,容易誤導使用者認爲那也是功能之一,隨後進行點擊,但實際上它只是一個標誌,並沒有任何功能;此外,頁面上方顯示的溫度及地點的功能也是必要性極低,因此我認爲這部分也可以刪減。

#彈性與使用效率

在原本的APP設計上,進入學生專區之後就能看到琳瑯滿目的功能,而這些功能也沒有依照排列邏輯可言。相較於師大網頁上將各種功能分歸為教務相關系統、學務相關系統、宿舍相關系統等等,在兩者都使用過的情況下,使用者難免會因爲使用的便利性上存在誤差而影響學生使用此APP的意願。

#系統不一致

在「設定」的介面中,每個按鈕的專屬識別標示都長得一樣,但是「登出」的識別標示卻有別於他者,所以我覺得需要重新整理這個頁面。

#尋找解法

為師大APP介面重新設計更清楚的視覺識別符號,並統一風格和色調,更清楚的引導使用者點擊適當的按鈕,並讓使用者更了解在使用功能的時候是否正確。

#設計成果

(左:Before 右:After)

登入介面之修改

重新調整登入頁的視覺,並加入「忘記密碼」的按鈕,讓忘記密碼的使用者可以直接通過按鈕重新找回或修改密碼。

(圖1) 登入首頁對比

APP首頁之功能

我重新為介面設計統一風格的視覺標示,並以同等色調為基礎。在功能排版上,我將經常使用或較為重要的功能保留並按照使用率排列及調整大小,讓使用者更有效率的找到自己要用的功能;我將Day Pass原需經過反復點擊的過程摒除,直接將其放大並設置於首頁,同時添置學生證上的資訊。這樣不僅讓便利性提高,使用者的資料更能一目瞭然,方便查證。

(圖2)首頁功能對比

功能重新分類

我依據師大行政系統上的排列,為APP重新歸納和統整,雖然使用操作上會增加一個步驟,但是使用者反而能更有根據及頭緒的找到自己所需的功能。

(圖3)功能分類對比

加入視覺識別

考慮到使用手機時拇指最靠近下方,因此在「設定」的設計上采用「以下方跳出」的方式,因此使用者能夠快速的找到按鈕並點擊。同時,我為每個功能加入對應的識別標示,讓使用者更能直覺的瞭解其按鈕之功能。

(圖4 設定按鈕介面)

#心得分享

在整個改良過程中,我花了許多時間在分析和理解每個功能按鈕,同時也有詢問身邊朋友使用師大APP的意見,再針對視覺及呈現效果的關係上做出深刻的思考。雖然這是我第一次實際操作Figma 及 UI/UX , 因此還有許多美中不足之處,但最後的成品我個人還算滿意。通過這份作業,我對於每個介面的實用性、美觀性都有了更多方面的衍生思考,也讓我更瞭解我目前的能力。也許別人能做的我不一定能做到,但或許我想到的別人也未必想得到。雖然這次我對師大APP做出改良,但或許反而會造成我沒能思考到的問題,還請大家不吝指教,讓這次的改良能更加完善。

--

--