Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is necessary for Developer friendly UI?

kkeeth
March 30, 2018

What is necessary for Developer friendly UI?

kkeeth

March 30, 2018
Tweet

More Decks by kkeeth

Other Decks in Technology

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