learning from ui design improvement
TRANSCRIPT
![Page 1: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/1.jpg)
Learning from UI Learning from UI design improvementdesign improvement
Advisor: Yao-Jen ChangeAdvisor: Yao-Jen Change
Presenter: Shih-Kai TsaiPresenter: Shih-Kai Tsai
![Page 2: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/2.jpg)
TargetTarget
Design a prototype for user to set groups
![Page 3: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/3.jpg)
First versionFirst version
UI before dig into programming
![Page 4: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/4.jpg)
Need to improveNeed to improve
real names instead of Role1A, Role1B Buttons of Create Group & Edit Group
should be shorter and wider.
![Page 5: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/5.jpg)
2nd version2nd version
![Page 6: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/6.jpg)
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
![Page 7: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/7.jpg)
3rd version3rd version
![Page 8: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/8.jpg)
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
![Page 9: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/9.jpg)
4th version4th version
![Page 10: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/10.jpg)
Advised by Prof. ChouAdvised by Prof. Chou
有 create/edit groups ,是否也該有 delete ? 有 group 的操作按紐是否也應有 group member
的操作按紐? 畫面的 layout 只有兩個 groups ,如果有 1000
個 groups 時怎麼安排顯示畫面? 應有能搭配論文內容場景的實際 group names 而
非以 group1 & grou2 代替 Edit group 的畫面中每個選項最好名稱能讓人一目
暸然,亦應該有搜尋姓名 , 年齡 , 性別 , 專長 , 等級 , 地區等的選項
試試看如何讓畫面更生動
![Page 11: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/11.jpg)
5th ver. What if add another grou5th ver. What if add another groupp
Add a new row
below
![Page 12: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/12.jpg)
5th ver.5th ver.
Add delete button
![Page 13: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/13.jpg)
5th ver.5th ver.
Modify members Set classes
![Page 14: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/14.jpg)
Advise againAdvise again
雖然 delete group/member 的功能在 edit 之中,但是 delete 的層級應該跟 create 相當
讀者有看到 create 但沒有一起看到 delete 就會覺得奇怪
![Page 15: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/15.jpg)
final versionfinal version
![Page 16: learning from UI design improvement](https://reader036.vdocuments.mx/reader036/viewer/2022062514/5589b69bd8b42a36058b4615/html5/thumbnails/16.jpg)
The closer to human instinct, the better UI you get!