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
とある EM の初めての育休からの学び
clown0082
1
1.6k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
140
Visually experience the beauty of mathematics with p5.js
clown0082
1
2.9k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.5k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
580
JavaScript × Mathematics go to Digital Art
clown0082
1
350
In-house study group at YUMEMI
clown0082
0
190
Playing Ionic Logo by p5.js
clown0082
0
250
Skills that employers recommend students to acquire
clown0082
1
280
Other Decks in Technology
See All in Technology
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
540
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
380
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
220
QAエンジニアが スクラムマスターをすると いいなぁと思った話
____rina____
0
130
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
780
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
140
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
350
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
MIMEと文字コードの闇
hirachan
2
1.5k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Designing for Performance
lara
605
68k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
How to Ace a Technical Interview
jacobian
276
23k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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 !!