User Interface in the Jungle ( Xuite )
by Liang-Bin Hsueh on Mar 15, 2009
- 2,361 views
3/13 Xuite
3/13 Xuite
Statistics
- Favorites
- 2
- Downloads
- 38
- Comments
- 0
- Embed Views
- Views on SlideShare
- 1,905
- Total Views
- 2,361
- No comments yet
- Notes on Slide 1
-
Ren Yong Cheng
3 years ago
-
xiaoxiao sun
, PowerPoint Design Trainer
at My own sweet home
3 years ago
User Interface in the Jungle ( Xuite ) — Presentation Transcript
- 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