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
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.6k
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
ビギナーであり続ける/beginning
ikuodanaka
3
760
Connect 100+を支える技術
kanyamaguc
0
200
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
330
Featured
See All Featured
KATA
mclloyd
30
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Building Adaptive Systems
keathley
43
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fireside Chat
paigeccino
37
3.5k
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 !!