Learning from UI Learning from UI design improvementdesign improvement

Advisor: Yao-Jen ChangeAdvisor: Yao-Jen Change

Presenter: Shih-Kai TsaiPresenter: Shih-Kai Tsai

TargetTarget

Design a prototype for user to set groups

First versionFirst version

UI before dig into programming

Need to improveNeed to improve

real names instead of Role1A, Role1B Buttons of Create Group & Edit Group

should be shorter and wider.

2nd version2nd version

Need to improveNeed to improve

Normally we put the buttons at the buttom instead of the two sides

change the blue shades into lighter blues. -Gmail blue (Hex: #3c3ecff)

add search boxes -People love searches

3rd version3rd version

Need to improveNeed to improve

button of search is on the right hand side of the text area

Take out the drop down menu

- not instinctive

4th version4th version

Advised by Prof. ChouAdvised by Prof. Chou

有 create/edit groups ，是否也該有 delete ？ 有 group 的操作按紐是否也應有 group member

的操作按紐？ 畫面的 layout 只有兩個 groups ，如果有 1000

個 groups 時怎麼安排顯示畫面？ 應有能搭配論文內容場景的實際 group names 而

非以 group1 & grou2 代替 Edit group 的畫面中每個選項最好名稱能讓人一目

暸然，亦應該有搜尋姓名 , 年齡 , 性別 , 專長 , 等級 , 地區等的選項

試試看如何讓畫面更生動

5th ver. What if add another grou5th ver. What if add another groupp

Add a new row

below

5th ver.5th ver.

Add delete button

5th ver.5th ver.

Modify members Set classes

Advise againAdvise again

雖然 delete group/member 的功能在 edit 之中，但是 delete 的層級應該跟 create 相當

讀者有看到 create 但沒有一起看到 delete 就會覺得奇怪

final versionfinal version

The closer to human instinct, the better UI you get!