This document discusses designing scalable web services. It defines scalability and outlines several layers of scalability: user interface, information architecture, platform, data, user, and system. For each layer, it lists factors to consider for flexibility, such as display size, interaction methods, language, conventions, symbols, and time/geographical differences. It provides practical tips, including focusing on users, keeping things simple, separating data from design, using modular components, and data-driven design. Finally, it lists Google's 10 design principles and invites questions.

1. Designing
Scalable Web Service
Tony Kim, Interaction Designer
Feb. 13, 2014

2. Caveat:
We DO NOT cover
“Enginnering matter:
how to build scalable
system”.

3. Tony Kim
Interaction Designer
Google Beijing / Seoul

4. “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

5. Faster Bigger Reliable

6. Under the surface

7. What should be done
over the surface?

8. “Scalable Service continues to
function well when it (or its
context) is changed in size or
volume in order to meet a user
need. ”

9. Scalable Service = Fractal

10. Layers of
Scalability
User Interface
Information Architecture
Platform
Data
User
System

11. Data
# of source Heterogeneity Frequency

13. mlb: Major League Baseball 프로야구: 대한민국 프로야구

15. Pitch. Hit. Run.

16. mlb: Major League Baseball icc: International Cricket Council

17. Platform
Device Format

20. TEXT

21. 39% of US citizens
still use feature phones.
Mobile majority: U.S. Smartphone ownership tops 60%, nielsen research, June, 2013

22. Google Freezone
Indian, Nigeria, Thailand, Sri Lanka, Philippines

23. Information
Architecture
Flexibility Access point Time & Location

24. Add / Remove
Habitat 67, Montreal, Canada

26. Hypertext world

27. Hello World!

28. User Interface
Language Culture / Convention Space

29. 5,000+ languages

33. Call me!
Hello!
Six
Trust me!
Hang Ten
Bottoms-up!
Let’s smoke!

34. Where to display info

35. Google Apps for iOS

36. User Interface
Information Architecture
Platform
Data
● Context
● Display size
● Interaction methods
● Symbolism
● Language
● Convention / Culture
● Time / Geological difference

37. 2560 x 1700
2560 x 1600
1920x1080
Size matters
● Display size

38. http://www.google.com/nexus/
Responsive design
● Display size

39. ● Context
Different context

40. Different structure
● Context

41. ● Interaction methods
Touch, Touch, Touch

42. ● Interaction methods
Consistent but optimized

43. Sochi,
Russia Seoul,
Korea
New York,
USA
5 hours9 hours
● Time / Geological difference

44. 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

45. New York Seoul
User’s timezone
● Time / Geological difference

46. ● Language
RTL Language

47. Arabic style
Persian style
RTLs are NOT the same.
● Culture / Convention

48. ● Language
Google Israel

49. ● Culture / Convention
Google Finance

50. ● Language
A country can have
2+ languages.

51. US 10:19 France 2:3 Germany 3:5
Denmark 28:37 UK 1:2 Nepal 9:11
● Convention
Flags have different ratios

52. ● Language
Plain text
in alphabetical order

53. синхронизироватьSync =
=
● Symbolism
In case, too long

54. ● Symbolism

55. ● Symbolism

56. ● Symbolism
Icon buttons for
frequently used features

57. ● 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

58. Practical tips for
Designing Scalable
Web Service

59. 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.

60. Do 1 thing, but be perfect!

61. Make it one-bite

62. Ignore competition (http://headrush.typepad.com/creating_passionate_users/2006/07/avoiding_the_fe.html)
Kathy Sierra, July 23, 2006
Creeping featurism

63. Separate data from design
Data Design
Interaction

64. Just one image

65. Google Fonts

66. Don’t use text symbols
more »more »

67. Modularize UI components

68. Data driven design

69. Quick
Workshop

70. Re-design Gmail buttons
● Various languages
● Context-aware
● Icon vs. Text
● Use frequency
● Importance

71. Q&A
Tony Kim, Interaction Designer
tonykim@google.com