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

Jungle ➔ /

Jungle ➔ ☺

• web site
• web app
• web application
• web service
Handlino http://handlino.com

Hardware

Software

Webware

making web UI
*is* easy

Anyone can cook!

Save as Web Page

WYSIWYG

Handlino http://handlino.com

• write HTML
Handlino http://handlino.com

• write HTML
• draw images
Handlino http://handlino.com

• write HTML
• draw images
• borrow(copy) some javascript codes
Handlino http://handlino.com

• write HTML
• draw images
• borrow(copy) some javascript codes
• and write some CSS (OMG!)
Handlino http://handlino.com

uncertainty

devices

800 px
1024 px
Resolutions
MONITOR RESOLUTION
800 x 600
MONITOR RESOLUTION
1024 x 768
600 px
768 px
240 px
320 px
240 px
240 px
MOBILE
MOBILE PHONE
MOBILE PHONE
PHONE
MOBILE 240 x 176
320 x 240
240 x 240
PHONE 176 px
240 x 320
240 px 240 px
320 px
320 px
320 px
480 px
480 px
IPHONE WEB (H)
IPHONE FULL (H) 480 x 268
480 x 320
IPHONE WEB (V)
IPHONE FULL (V) 320 x 416
320 x 480 268 px
320 px
416 px
480 px

We have browsers

Browsers have abilities

Browsers have disabilities

Browsers have bugs

Bugs even have
their own names!

WYSINWYW
What You See Is Not What You Want
Handlino http://handlino.com

WYSIWGK
What You See Is What God Knows
Handlino http://handlino.com

well,
not that easy
☹

Only the fearless
can be great!

Guideline?

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

Cons:
More than one way
to do it.

more: 2, 3

motion blur
http://www.flashden.net/item/horizontal-scroller-motion-blur/23377

Pitfall
think twice before doing

1
right mouse key

11
OS-like UI
Canny Valley

111
Make it perfect
keep changing and evolving

Design Pattern

accessibility

best UI

Web UI is not the
best UI

Best UI might be
the API

http://handlino.com/
hlb@handlino.com

Thanks
• http://www.flickr.com/photos/77922700@N00/121752716/
• http://www.flickr.com/photos/9052666@N05/1795564765/
Handlino http://handlino.com