• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User Interface in the Jungle ( Xuite )
 

User Interface in the Jungle ( Xuite )

on

  • 2,898 views

3/13 Xuite

3/13 Xuite

Statistics

Views

Total Views
2,898
Views on SlideShare
2,439
Embed Views
459

Actions

Likes
2
Downloads
38
Comments
0

8 Embeds 459

http://hlb.yichi.org 377
http://iamhlb.com 72
http://static.slideshare.net 2
http://www.slideshare.net 2
http://coderwall.com 2
http://old.iamhlb.com 2
http://feeds2.feedburner.com 1
http://old.hlb.the-hold.handlino.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Interface in the Jungle ( Xuite ) 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