What is necessary for Developer friendly UI?

by kkeeth

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who I am

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Communities staff translator staff staff

Slide 5

Slide 5 text

github.com/riot

Slide 6

Slide 6 text

publicity

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

back to the subject

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Bad sample of Web page UI

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

First: select conditions page

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

…

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ɹ 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

It’s too complicated !! Hahaha :)

Slide 21

Slide 21 text

Second: car list page (filter page)

Slide 22

Slide 22 text

ɹ Header Footer Navigation Bars Filter conditions Car lists

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

… Is not it useless?

Slide 26

Slide 26 text

What are bad points?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

What do we need for UI design?

Slide 29

Slide 29 text

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