hlb aka

HappyDesigner

Handlino
Handlino http://handlino.com

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

Jungle ➔ /
Handlino http://handlino.com

Jungle ➔ ☺
Handlino http://handlino.com

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
☹

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

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

more: 2, 3

in Flash

in CSS (safari 4 only)

New Era

Design Pattern

accessibility

Only the fearless
can be great!

Pitfall
think twice before doing

1
UI Customization
DO NOT obey browser’s default behavior
(example)

11
OS-like UI
right mouse key, desktop, ...
(Canny Valley)

111
UI Inconsistency

1111
Make it perfect
keep changing and evolving

DO YOUR BEST

Best web UI is not
the best UI

Best UI might be
the API

mashup

How Projects Really Work (version 1.5) Create your own cartoon at www.projectcartoon.com
How the customer How the project leader How the analyst How the programmer What the beta testers How the business
explained it understood it designed it wrote it received consultant described it
How the project was What operations How the customer was How it was supported What marketing What the customer
documented installed billed advertised really needed

Idea Wireframe Mockup Prototype Product

Design Guideline
Handlino http://handlino.com

wireframe: function & layout
Handlino http://handlino.com

mockup: visual & form
Handlino http://handlino.com

prototype: interaction
Handlino http://handlino.com

Of course not.
Handlino http://handlino.com

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