To be covered:- What is HCI? Goal of HCI HCI - An Interdisciplinary Area Concerns in HCI
[Hci korea 2014] designing scalable web service
Transcript of [Hci korea 2014] designing scalable web service
![Page 1: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/1.jpg)
Designing Scalable Web ServiceTony Kim, Interaction DesignerFeb. 13, 2014
![Page 2: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/2.jpg)
Caveat:We DO NOT cover “Enginnering matter: how to build scalable system”.
![Page 3: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/3.jpg)
Tony KimInteraction Designer
Google Beijing / Seoul
![Page 4: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/4.jpg)
“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
![Page 5: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/5.jpg)
Faster Bigger Reliable
![Page 6: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/6.jpg)
Under the surface
![Page 7: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/7.jpg)
What should be done over the surface?
![Page 8: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/8.jpg)
“Scalable Service continues to function well when it (or its context) is changed in size or volume in order to meet a user need. ”
![Page 9: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/9.jpg)
Scalable Service = Fractal
![Page 10: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/10.jpg)
Layers of Scalability
User Interface
Information Architecture
Platform
Data
User
System
![Page 11: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/11.jpg)
Data
# of source Heterogeneity Frequency
![Page 12: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/12.jpg)
![Page 13: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/13.jpg)
mlb: Major League Baseball 프로야구: 대한민국 프로야구
![Page 14: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/14.jpg)
![Page 15: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/15.jpg)
Pitch. Hit. Run.
![Page 16: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/16.jpg)
mlb: Major League Baseball icc: International Cricket Council
![Page 17: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/17.jpg)
Platform
Device Format
![Page 18: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/18.jpg)
![Page 19: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/19.jpg)
![Page 20: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/20.jpg)
TEXT
![Page 21: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/21.jpg)
39% of US citizens still use feature phones.Mobile majority: U.S. Smartphone ownership tops 60%, nielsen research, June, 2013
![Page 22: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/22.jpg)
Google FreezoneIndian, Nigeria, Thailand, Sri Lanka, Philippines
![Page 23: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/23.jpg)
Information Architecture
Flexibility Access point Time & Location
![Page 24: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/24.jpg)
Add / RemoveHabitat 67, Montreal, Canada
![Page 25: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/25.jpg)
![Page 26: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/26.jpg)
Hypertext world
![Page 27: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/27.jpg)
Hello World!
![Page 28: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/28.jpg)
User Interface
Language Culture / Convention Space
![Page 29: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/29.jpg)
5,000+ languages
![Page 30: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/30.jpg)
![Page 31: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/31.jpg)
![Page 32: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/32.jpg)
![Page 33: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/33.jpg)
Call me!Hello!
Six
Trust me!
Hang TenBottoms-up!
Let’s smoke!
![Page 34: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/34.jpg)
Where to display info
![Page 35: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/35.jpg)
Google Apps for iOS
![Page 36: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/36.jpg)
User Interface
Information Architecture
Platform
Data
● Context
● Display size
● Interaction methods
● Symbolism
● Language
● Convention / Culture
● Time / Geological difference
![Page 37: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/37.jpg)
2560 x 1700
2560 x 1600
1920x1080
Size matters
● Display size
![Page 38: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/38.jpg)
http://www.google.com/nexus/
Responsive design
● Display size
![Page 39: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/39.jpg)
● Context
Different context
![Page 40: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/40.jpg)
Different structure
● Context
![Page 41: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/41.jpg)
● Interaction methods
Touch, Touch, Touch
![Page 42: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/42.jpg)
● Interaction methods
Consistent but optimized
![Page 43: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/43.jpg)
Sochi,Russia Seoul,
KoreaNew York,USA
5 hours9 hours
● Time / Geological difference
![Page 44: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/44.jpg)
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
![Page 45: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/45.jpg)
New York Seoul
User’s timezone
● Time / Geological difference
![Page 46: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/46.jpg)
● Language
RTL Language
![Page 47: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/47.jpg)
Arabic style
Persian style
RTLs are NOT the same.
● Culture / Convention
![Page 48: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/48.jpg)
● Language
Google Israel
![Page 49: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/49.jpg)
● Culture / Convention
Google Finance
![Page 50: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/50.jpg)
● Language
A country can have 2+ languages.
![Page 51: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/51.jpg)
US 10:19 France 2:3 Germany 3:5
Denmark 28:37 UK 1:2 Nepal 9:11
● Convention
Flags have different ratios
![Page 52: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/52.jpg)
● Language
Plain text in alphabetical order
![Page 53: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/53.jpg)
синхронизироватьSync =
=
● Symbolism
In case, too long
![Page 54: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/54.jpg)
● Symbolism
![Page 55: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/55.jpg)
● Symbolism
![Page 56: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/56.jpg)
● Symbolism
Icon buttons for frequently used features
![Page 57: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/57.jpg)
● 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
![Page 58: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/58.jpg)
Practical tips forDesigning Scalable Web Service
![Page 59: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/59.jpg)
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.
![Page 60: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/60.jpg)
Do 1 thing, but be perfect!
![Page 61: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/61.jpg)
Make it one-bite
![Page 62: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/62.jpg)
Ignore competition (http://headrush.typepad.com/creating_passionate_users/2006/07/avoiding_the_fe.html)Kathy Sierra, July 23, 2006
Creeping featurism
![Page 63: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/63.jpg)
Separate data from design
Data Design
Interaction
![Page 64: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/64.jpg)
Just one image
![Page 65: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/65.jpg)
Google Fonts
![Page 66: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/66.jpg)
Don’t use text symbols
more »more »
![Page 67: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/67.jpg)
Modularize UI components
![Page 68: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/68.jpg)
Data driven design
![Page 69: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/69.jpg)
QuickWorkshop
![Page 70: [Hci korea 2014] designing scalable web service](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a884bb1a28abf8518b4779/html5/thumbnails/70.jpg)
Re-design Gmail buttons
● Various languages
● Context-aware
● Icon vs. Text
● Use frequency
● Importance