Post on 17-Jul-2015
Designing Scalable Web ServiceTony Kim, Interaction DesignerFeb. 13, 2014
Caveat:We DO NOT cover “Enginnering matter: how to build scalable system”.
Tony KimInteraction Designer
Google Beijing / Seoul
“Scalability is the ability of a system, network, or process to handle a growing amount of work in a capable manner or its ability to be enlarged to accommodate that growth.”Bondi, André B. (2000). "Characteristics of scalability and their impact on performance". Proceedings of the second international workshop on Software and performance
Faster Bigger Reliable
Under the surface
What should be done over the surface?
“Scalable Service continues to function well when it (or its context) is changed in size or volume in order to meet a user need. ”
Scalable Service = Fractal
Layers of Scalability
User Interface
Information Architecture
Platform
Data
User
System
Data
# of source Heterogeneity Frequency
mlb: Major League Baseball 프로야구: 대한민국 프로야구
Pitch. Hit. Run.
mlb: Major League Baseball icc: International Cricket Council
Platform
Device Format
TEXT
39% of US citizens still use feature phones.Mobile majority: U.S. Smartphone ownership tops 60%, nielsen research, June, 2013
Google FreezoneIndian, Nigeria, Thailand, Sri Lanka, Philippines
Information Architecture
Flexibility Access point Time & Location
Add / RemoveHabitat 67, Montreal, Canada
Hypertext world
Hello World!
User Interface
Language Culture / Convention Space
5,000+ languages
Call me!Hello!
Six
Trust me!
Hang TenBottoms-up!
Let’s smoke!
Where to display info
Google Apps for iOS
User Interface
Information Architecture
Platform
Data
● Context
● Display size
● Interaction methods
● Symbolism
● Language
● Convention / Culture
● Time / Geological difference
2560 x 1700
2560 x 1600
1920x1080
Size matters
● Display size
http://www.google.com/nexus/
Responsive design
● Display size
● Context
Different context
Different structure
● Context
● Interaction methods
Touch, Touch, Touch
● Interaction methods
Consistent but optimized
Sochi,Russia Seoul,
KoreaNew York,USA
5 hours9 hours
● Time / Geological difference
An event in a day becomes two day playing event.
Sochi
Seoul
New York
6:45pm
11:45pm
9:45am
8:45pm
3:45am
11:45am
Feb 13
Feb 13
Feb 13
Feb 14
● Time / Geological difference
New York Seoul
User’s timezone
● Time / Geological difference
● Language
RTL Language
Arabic style
Persian style
RTLs are NOT the same.
● Culture / Convention
● Language
Google Israel
● Culture / Convention
Google Finance
● Language
A country can have 2+ languages.
US 10:19 France 2:3 Germany 3:5
Denmark 28:37 UK 1:2 Nepal 9:11
● Convention
Flags have different ratios
● Language
Plain text in alphabetical order
синхронизироватьSync =
=
● Symbolism
In case, too long
● Symbolism
● Symbolism
● Symbolism
Icon buttons for frequently used features
● Context
● Display size
● Interaction methods
● Symbolism
● Language
● Convention / Culture
● Time / Geological difference
Flexible IA
Responsive design
Touch UI
Graphical elements
RTL language
Convention / Culture
Time / Geological difference
Practical tips forDesigning Scalable Web Service
Google 10 Design Principles
1. Useful: Focus on people, their lives, their work, their dreams.
2. Fast: Every millisecond counts.3. Simple: Simplicity is powerful.4. Engaging: Engage beginners and attract experts.5. Innovate: Dare to innovate.6. Universal: Design for the world.7. Profitable: Plan for today’s and tomorrow’s business.8. Beautiful: Delight the eye without distracting the mind.9. Trustworthy: Be worthy of people’s trust.
10. Personable: Add a human touch.
Do 1 thing, but be perfect!
Make it one-bite
Ignore competition (http://headrush.typepad.com/creating_passionate_users/2006/07/avoiding_the_fe.html)Kathy Sierra, July 23, 2006
Creeping featurism
Separate data from design
Data Design
Interaction
Just one image
Google Fonts
Don’t use text symbols
more »more »
Modularize UI components
Data driven design
QuickWorkshop
Re-design Gmail buttons
● Various languages
● Context-aware
● Icon vs. Text
● Use frequency
● Importance
Q&ATony Kim, Interaction Designertonykim@google.com