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
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
320
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
120
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.9k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
730
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
170
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Facilitating Awesome Meetings
lara
54
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building Adaptive Systems
keathley
43
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Building an army of robots
kneath
306
45k
Side Projects
sachag
455
42k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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 !!