Learning from UI design improvement Advisor: Yao-Jen Change Presenter: Shih-Kai Tsai
Target <ul><li>Design a prototype for user to set groups </li></ul>
First version <ul><li>UI  before dig into programming </li></ul>
Need to improve <ul><li>real names instead of Role1A, Role1B  </li></ul><ul><li>Buttons of Create Group & Edit Group shoul...
2nd version
Need to improve <ul><li>Normally we put the buttons at the buttom instead of the two sides  </li></ul><ul><li>change the b...
3rd version
Need to improve <ul><li>button of search is on the right hand side of the text area  </li></ul><ul><li>Take out the drop d...
4th version
Advised by Prof. Chou <ul><li>有  create/edit groups ,是否也該有  delete ? </li></ul><ul><li>有  group  的操作按紐是否也應有  group member ...
5th ver. What if add another group <ul><li>Add a new row  </li></ul><ul><li>below </li></ul>
5th ver. <ul><li>Add delete button </li></ul>
5th ver. <ul><li>Modify members </li></ul><ul><li>Set classes </li></ul>
Advise again <ul><li>雖然  delete group/member  的功能在  edit  之中,但是  delete  的層級應該跟  create  相當 </li></ul><ul><li>讀者有看到  creat...
final version
<ul><li>The closer to human instinct, the better UI you get! </li></ul>
Upcoming SlideShare
Loading in …5
×

learning from UI design improvement

1,025 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,025
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

learning from UI design improvement

  1. 1. Learning from UI design improvement Advisor: Yao-Jen Change Presenter: Shih-Kai Tsai
  2. 2. Target <ul><li>Design a prototype for user to set groups </li></ul>
  3. 3. First version <ul><li>UI before dig into programming </li></ul>
  4. 4. Need to improve <ul><li>real names instead of Role1A, Role1B </li></ul><ul><li>Buttons of Create Group & Edit Group should be shorter and wider. </li></ul>
  5. 5. 2nd version
  6. 6. Need to improve <ul><li>Normally we put the buttons at the buttom instead of the two sides </li></ul><ul><li>change the blue shades into lighter blues. -Gmail blue (Hex: #3c3ecff) </li></ul><ul><li>add search boxes -People love searches </li></ul>
  7. 7. 3rd version
  8. 8. Need to improve <ul><li>button of search is on the right hand side of the text area </li></ul><ul><li>Take out the drop down menu </li></ul><ul><li>- not instinctive </li></ul>
  9. 9. 4th version
  10. 10. Advised by Prof. Chou <ul><li>有 create/edit groups ,是否也該有 delete ? </li></ul><ul><li>有 group 的操作按紐是否也應有 group member 的操作按紐? </li></ul><ul><li>畫面的 layout 只有兩個 groups ,如果有 1000 個 groups 時怎麼安排顯示畫面? </li></ul><ul><li>應有能搭配論文內容場景的實際 group names 而非以 group1 & grou2 代替 </li></ul><ul><li>Edit group 的畫面中每個選項最好名稱能讓人一目暸然,亦應該有搜尋姓名 , 年齡 , 性別 , 專長 , 等級 , 地區等的選項 </li></ul><ul><li>試試看如何讓畫面更生動 </li></ul>
  11. 11. 5th ver. What if add another group <ul><li>Add a new row </li></ul><ul><li>below </li></ul>
  12. 12. 5th ver. <ul><li>Add delete button </li></ul>
  13. 13. 5th ver. <ul><li>Modify members </li></ul><ul><li>Set classes </li></ul>
  14. 14. Advise again <ul><li>雖然 delete group/member 的功能在 edit 之中,但是 delete 的層級應該跟 create 相當 </li></ul><ul><li>讀者有看到 create 但沒有一起看到 delete 就會覺得奇怪 </li></ul>
  15. 15. final version
  16. 16. <ul><li>The closer to human instinct, the better UI you get! </li></ul>

×