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