User Interface in the Jungle

57
Handlino http://handlino.com User Interface Design in the Jungle hlb, the designer of Handlino Inc.

description

My talk for UI Gathering 2009/3/7.

Transcript of User Interface in the Jungle

Page 1: User Interface in the Jungle

Handlino http://handlino.com

User Interface Designin the Junglehlb, the designer of Handlino Inc.

Page 2: User Interface in the Jungle

Jungle ➔ 未開發 / 危險

Page 3: User Interface in the Jungle

Jungle ➔ 探險 ☺

Page 4: User Interface in the Jungle

Handlino http://handlino.com

• web site

• web app

• web application

• web service

Page 5: User Interface in the Jungle

Hardware

Page 6: User Interface in the Jungle

Software

Page 7: User Interface in the Jungle

Webware

Page 8: User Interface in the Jungle

making web UI *is* easy

Page 9: User Interface in the Jungle

Anyone can cook!

Page 10: User Interface in the Jungle

Save as Web Page

Page 11: User Interface in the Jungle

WYSIWYG

Page 12: User Interface in the Jungle

現實

Page 13: User Interface in the Jungle

Handlino http://handlino.com

Page 14: User Interface in the Jungle

Handlino http://handlino.com

• write HTML

Page 15: User Interface in the Jungle

Handlino http://handlino.com

• write HTML

• draw images

Page 16: User Interface in the Jungle

Handlino http://handlino.com

• write HTML

• draw images

• borrow(copy) some javascript codes

Page 17: User Interface in the Jungle

Handlino http://handlino.com

• write HTML

• draw images

• borrow(copy) some javascript codes

• and write some CSS (OMG!)

Page 18: User Interface in the Jungle

uncertainty

Page 19: User Interface in the Jungle

devices

Page 20: User Interface in the Jungle

IPHONE WEB (V)

320 x 416

320 p

x

416 px

IPHONE FULL (V)

320 x 480

320 p

x

480 px

IPHONE WEB (H)

480 x 268

480 p

x

268 px

IPHONE FULL (H)

480 x 320480 p

x

320 px

MOBILE PHONE

320 x 240

320 p

x

240 px

MOBILE

PHONE

240 x 320

240 p

x

320 px

MOBILE

PHONE

240 x 240

240 p

x240 px

MOBILE

PHONE

240 x 176

240 p

x

176 px

MONITOR RESOLUTION

1024 x 768

1024 p

x

768 px

MONITOR RESOLUTION

800 x 600

800 p

x

600 px

Resolutions

Page 21: User Interface in the Jungle

We have browsers

Page 22: User Interface in the Jungle

Browsers have abilities

Page 23: User Interface in the Jungle

Browsers have disabilities

Page 24: User Interface in the Jungle

Browsers have bugs

Page 25: User Interface in the Jungle

Bugs even have their own names!

Page 26: User Interface in the Jungle
Page 27: User Interface in the Jungle

Handlino http://handlino.com

所見非所要WYSINWYW

What You See Is Not What You Want

Page 28: User Interface in the Jungle

Handlino http://handlino.com

所見天曉得WYSIWGK

What You See Is What God Knows

Page 29: User Interface in the Jungle

well,not that easy

Page 30: User Interface in the Jungle

Only the fearless can be great!

Page 32: User Interface in the Jungle
Page 33: User Interface in the Jungle

Pros:More than one way to do it.CPU/memory usage and response time are the only limits

Page 34: User Interface in the Jungle

Cons:More than one way to do it.

Page 37: User Interface in the Jungle

Pitfallthink twice before doing

Page 38: User Interface in the Jungle

1right mouse key

Page 39: User Interface in the Jungle

11OS-like UI

Canny Valley

Page 40: User Interface in the Jungle

111Make it perfect

keep changing and evolving

Page 41: User Interface in the Jungle

Design Pattern

Page 42: User Interface in the Jungle
Page 43: User Interface in the Jungle
Page 44: User Interface in the Jungle
Page 45: User Interface in the Jungle
Page 46: User Interface in the Jungle
Page 47: User Interface in the Jungle

accessibility

Page 48: User Interface in the Jungle
Page 49: User Interface in the Jungle
Page 50: User Interface in the Jungle
Page 51: User Interface in the Jungle
Page 52: User Interface in the Jungle

best UI

Page 53: User Interface in the Jungle

Web UI is not the best UI

Page 56: User Interface in the Jungle

創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣

這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。