What is necessary for Developer friendly UI?

Transcript

1. What is necessary for Developer friendly UI? k-kuwahara @kuwahara_jsri @clown0082
2. Who I am
3. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Home: ‘૔ෑ, ޿ౡ’, Interest: ‘όεέ, কع, ೔ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
4. Communities staff translator staff staff
5. github.com/riot
6. publicity
7. https://riotjs-jp.connpass.com/event/80806/
8. https://riotjs-jp.connpass.com/event/80806/ ·ۭ͍ͩͯ·͢ʂ
   ͓ؾܰʹ͝ࢀՃ͍ͩ͘͞ʂ
9. back to the subject
10. ⚠Attention⚠ The code of js does not appear in this announcement❗ I'm sorry❗
11. Bad sample of Web page UI
12. From now on, you will see the UI of one EC site of (car) search page.
13. 1. jQuery, Riot.js (2.4.1) 2. PHP (5.6), FuelPHP 3. MySQL, Redis, AWS tools Using Tools
14. First: select conditions page
15. ɹ Header Footer Navigation Bars (13 menus) Margen Sub Condition1 (list) Sub Condition2 (list) Main Condition2 (list) Main Condition3 (list) Main Condition1 (list)
16. …
17. ɹ Header Footer Navigation Bars Margen Sub Condition1 Sub Condition2 Main Condition2 Main Condition3 Main Condition1 Select & Open Select & Open Select & Open Select & Open Get Products !!
18. ɹ Header Footer Navigation Bars Margen Sub Condition1 Sub Condition2 Main Condition2 Main Condition3 Main Condition1 API Call Page move API Call Page move API Call Page move API Call Page move API Call Page move
19. ɹ Header Footer Navigation Bars Margen Sub Condition1 Sub Condition2 Main Condition2 Main Condition3 Main Condition1 toggle
20. It’s too complicated !! Hahaha :)
21. Second: car list page (filter page)
22. ɹ Header Footer Navigation Bars Filter conditions Car lists
23. ɹ Header Footer Navigation Bars Filter conditions Car lists 13 menus and similar conditions before page
24. ɹ Header Footer Navigation Bars Filter conditions Car lists Modal window select filter conditions
25. … Is not it useless?
26. What are bad points?
27. 1. Low performance • Too much information volume • Huge data volume 2. Low usability 3. Useless processing Bad points
28. What do we need for UI design?
29. • Information design • Reduce the amount of information • Simplify • Split into components (tags) • Unity and meaning Summary
30. Have a good JavaScript life!!
31. Thank you for listening my LT !!