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.4k
What is necessary for Developer friendly UI?
kkeeth
March 30, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
1
76
Visually experience the beauty of mathematics with p5.js
clown0082
0
2.4k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.2k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
510
JavaScript × Mathematics go to Digital Art
clown0082
1
270
In-house study group at YUMEMI
clown0082
0
140
Playing Ionic Logo by p5.js
clown0082
0
180
Skills that employers recommend students to acquire
clown0082
0
230
Walking through the source code of an OSS Library(ESLint))
clown0082
0
320
Other Decks in Technology
See All in Technology
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
AWSでRAGを作る法方
sonoda_mj
1
140
地理情報とAPIのトレンド
nagix
0
160
簡単に始めるSnowflakeの機械学習
nayuts
1
190
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Agile that works and the tools we love
rasmusluckow
325
20k
How GitHub (no longer) Works
holman
305
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Become a Pro
speakerdeck
PRO
15
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
We Have a Design System, Now What?
morganepeng
46
7k
It's Worth the Effort
3n
181
27k
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 !!