Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What is necessary for Developer friendly UI?
Search
kkeeth
March 30, 2018
Technology
0
1.5k
What is necessary for Developer friendly UI?
kkeeth
March 30, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
19
とある EM の初めての育休からの学び
clown0082
1
3.7k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
170
Visually experience the beauty of mathematics with p5.js
clown0082
1
3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.6k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
620
JavaScript × Mathematics go to Digital Art
clown0082
1
390
In-house study group at YUMEMI
clown0082
0
210
Playing Ionic Logo by p5.js
clown0082
0
280
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
OPENLOGI Company Profile for engineer
hr01
1
34k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
350
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
What’s new in Android development tools
yanzm
0
310
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
A better future with KSS
kneath
238
17k
Code Review Best Practice
trishagee
69
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Done Done
chrislema
184
16k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
For a Future-Friendly Web
brad_frost
179
9.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Applications with DynamoDB
mza
95
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Transcript
What is necessary for Developer friendly UI? k-kuwahara @kuwahara_jsri @clown0082
Who I am
Basic Information const my_info = { Name: ‘܂ݪਔ’, Home: ‘ෑ,
ౡ’, Interest: ‘όεέ, কع, ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
Communities staff translator staff staff
github.com/riot
publicity
https://riotjs-jp.connpass.com/event/80806/
https://riotjs-jp.connpass.com/event/80806/ ·ۭ͍ͩͯ·͢ʂ ͓ؾܰʹ͝ࢀՃ͍ͩ͘͞ʂ
back to the subject
⚠Attention⚠ The code of js does not appear in this
announcement❗ I'm sorry❗
Bad sample of Web page UI
From now on, you will see the UI of one
EC site of (car) search page.
1. jQuery, Riot.js (2.4.1) 2. PHP (5.6), FuelPHP 3. MySQL,
Redis, AWS tools Using Tools
First: select conditions page
ɹ Header Footer Navigation Bars (13 menus) Margen Sub Condition1
(list) Sub Condition2 (list) Main Condition2 (list) Main Condition3 (list) Main Condition1 (list)
…
ɹ 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 !!
ɹ 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
ɹ Header Footer Navigation Bars Margen Sub Condition1 Sub Condition2
Main Condition2 Main Condition3 Main Condition1 toggle
It’s too complicated !! Hahaha :)
Second: car list page (filter page)
ɹ Header Footer Navigation Bars Filter conditions Car lists
ɹ Header Footer Navigation Bars Filter conditions Car lists 13
menus and similar conditions before page
ɹ Header Footer Navigation Bars Filter conditions Car lists Modal
window select filter conditions
… Is not it useless?
What are bad points?
1. Low performance • Too much information volume • Huge
data volume 2. Low usability 3. Useless processing Bad points
What do we need for UI design?
• Information design • Reduce the amount of information •
Simplify • Split into components (tags) • Unity and meaning Summary
Have a good JavaScript life!!
Thank you for listening my LT !!