What is necessary for Developer friendly UI?

Transcript

1. What is necessary for
   Developer friendly UI?
   k-kuwahara @kuwahara_jsri @clown0082
   

   View Slide

2. Who I am
   

   View Slide

3. Basic Information
   const my_info = {
   Name: ‘܂ݪ੟ਔ’,
   Home: ‘૔ෑ, ޿ౡ’,
   Interest: ‘όεέ, কع, ೔ຊञ’,
   Workplace: ‘Yumemi, Inc.’,
   Skillset: ‘JS, Node.js, PHP, Ruby’
   }
   

   View Slide

4. Communities
   staff
   translator
   staff
   staff
   

   View Slide

5. github.com/riot
   

   View Slide

6. publicity
   

   View Slide

7. https://riotjs-jp.connpass.com/event/80806/
   

   View Slide

8. https://riotjs-jp.connpass.com/event/80806/
   ·ۭ͍ͩͯ·͢ʂ
   ͓ؾܰʹ͝ࢀՃ͍ͩ͘͞ʂ
   

   View Slide

9. back to the subject
   

   View Slide

10. ⚠Attention⚠
    The code of js does not appear in
    this announcement❗
    I'm sorry❗
    

    View Slide

11. Bad sample of Web page UI
    

    View Slide

12. From now on,
    you will see the UI of one EC site
    of (car) search page.
    

    View Slide

13. 1. jQuery, Riot.js (2.4.1)
    2. PHP (5.6), FuelPHP
    3. MySQL, Redis, AWS tools
    Using Tools
    

    View Slide

14. First: select conditions page
    

    View Slide

15. ɹ
    Header
    Footer
    Navigation Bars (13 menus)
    Margen
    Sub Condition1
    (list)
    Sub Condition2
    (list)
    Main Condition2
    (list)
    Main Condition3
    (list)
    Main Condition1
    (list)
    

    View Slide

16. …
    

    View Slide

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 !!
    

    View Slide

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
    

    View Slide

19. ɹ
    Header
    Footer
    Navigation Bars
    Margen
    Sub Condition1 Sub Condition2
    Main Condition2 Main Condition3
    Main Condition1
    toggle
    

    View Slide

20. It’s too complicated !!
    Hahaha :)
    

    View Slide

21. Second: car list page (filter page)
    

    View Slide

22. ɹ
    Header
    Footer
    Navigation Bars
    Filter conditions
    Car lists
    

    View Slide

23. ɹ
    Header
    Footer
    Navigation Bars
    Filter conditions
    Car lists
    13 menus and similar
    conditions before page
    

    View Slide

24. ɹ
    Header
    Footer
    Navigation Bars
    Filter conditions
    Car lists
    Modal window
    select filter conditions
    

    View Slide

25. … Is not it useless?
    

    View Slide

26. What are bad points?
    

    View Slide

27. 1. Low performance
    • Too much information volume
    • Huge data volume
    2. Low usability
    3. Useless processing
    Bad points
    

    View Slide

28. What do we need for UI design?
    

    View Slide

29. • Information design
    • Reduce the amount of information
    • Simplify
    • Split into components (tags)
    • Unity and meaning
    Summary
    

    View Slide

30. Have a good JavaScript life!!
    

    View Slide

31. Thank you for listening my LT !!
    

    View Slide