Yui Design Patterns


Published on

YUI Design Patterns - Introduction

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 09/30/09 Yodlee®, Inc. Copyright © 2009 CONFIDENTIAL
  • 09/30/09 Yodlee®, Inc. Copyright © 2009 CONFIDENTIAL
  • 09/30/09 Yodlee®, Inc. Copyright © 2009 CONFIDENTIAL
  • 09/30/09 Yodlee®, Inc. Copyright © 2009 CONFIDENTIAL
  • Yui Design Patterns

    1. 2. <ul><li>YUI Overview </li></ul><ul><ul><li>What is YUI? </li></ul></ul><ul><ul><li>Why YUI? </li></ul></ul><ul><ul><li>What are YUI Features? </li></ul></ul><ul><li>YUI Design Pattern Library </li></ul><ul><ul><li>Design Patterns </li></ul></ul><ul><ul><li>Examples from application </li></ul></ul><ul><li>Where can I find more information about YUI Design Patterns? </li></ul>
    2. 3. <ul><li>The Yahoo User Interface (YUI) Library is a collection of JavaScript and CSS core resources that make it easier to build richly interactive applications in web browsers. </li></ul><ul><li>Set of Utilities and controls that enable web developers to quickly create DOM Scripting, AJAX, DHTML websites and web applications. </li></ul><ul><li>Simply a framework of JS, CSS, Design Patterns and Widgets. </li></ul><ul><li>Free software – Just download and use it. </li></ul>
    3. 4. <ul><li>Light and flexible </li></ul><ul><li>Safe and Maintainable </li></ul><ul><li>Fully documented </li></ul><ul><li>Name Spacing included </li></ul><ul><li>YUI IDE Support - Firefox 3/2, IE7/IE6, Opera 9.5, Safari 3.1, Supports the vast majority of browsers that are in general use. </li></ul><ul><li>Avoid Memory leaks, creative standards support and syntax oddities </li></ul>
    4. 5. <ul><li>Core components </li></ul><ul><li>Utilities </li></ul><ul><li>UI Controls </li></ul><ul><li>CSS Components </li></ul><ul><li>Developer Tools </li></ul><ul><li>Build Tools </li></ul>
    5. 6. <ul><li>DOM Collection & Events </li></ul><ul><li>DOM positioning </li></ul><ul><li>CSS Style management </li></ul><ul><li>Browser events such as Mouse click and Key press </li></ul><ul><li>Yahoo User Interface Utilities </li></ul><ul><li>Animation Utility </li></ul><ul><li>Browser History Manager </li></ul><ul><li>Connection Manager </li></ul><ul><li>Data Source </li></ul><ul><li>Drag & Drop Utility </li></ul><ul><li>Image Loader, Color Picker </li></ul><ul><li>JSON ( JavaScript object notation ) </li></ul><ul><li>YUI Loader </li></ul><ul><li>Yahoo Global Object </li></ul><ul><li>Language utilities </li></ul><ul><li>YUI infrastructure </li></ul><ul><li>User Interface Controls </li></ul><ul><li>Button, Calendar </li></ul><ul><li>Charts </li></ul><ul><li>Container </li></ul><ul><li>Data Table </li></ul><ul><li>Layout Manager </li></ul><ul><li>Tab View / Tree View </li></ul>
    6. 7. YUI Library?
    7. 9. <ul><li>Patterns originated as an architectural concept by Christopher Alexander (1977/79). In 1987, Kent Beck and Ward Cunningham began experimenting with the idea of applying patterns to programming </li></ul><ul><li>Design patterns gained popularity in computer science after the book Design Patterns: Elements of Reusable Object-Oriented Software was published in 1994 (Gamma et al.). </li></ul><ul><li>Documentation of Design Patterns </li></ul>
    8. 10. <ul><li>Design Pattern is a general reusable solution to a commonly occurring problem in software design </li></ul><ul><li>The design patterns are language-independent strategies for solving common object-oriented design problems </li></ul><ul><li>Solve a problem that can be used in many different situations – general solution to a variety of similar problems </li></ul>
    9. 11. <ul><li>Reusable templates for interaction design - pattern based approach to UI design </li></ul><ul><li>Ensure consistent designs that follow design best practices – letting you focus on content and user needs </li></ul><ul><li>Designers have reusable foundation to create interface designs, prototyping </li></ul>
    10. 13. <ul><li>Creational Design Patterns </li></ul><ul><ul><li>Ex: Abstract Factory, Factory, Singleton </li></ul></ul><ul><li>Structural Design Patterns </li></ul><ul><ul><li>Ex: Adapter, Bridge, Composite, Decorator, Facade </li></ul></ul><ul><li>Behavioral Design Patterns </li></ul><ul><ul><li>Command, Iterator, Interpreter, etc. </li></ul></ul><ul><li>J2EE Patterns </li></ul><ul><ul><li>MVC, Business Delegate, DAO, Front Controller, TO etc </li></ul></ul>
    11. 16. <ul><li>AlphaNumeric Filter Links </li></ul><ul><li>Animate Transition </li></ul><ul><li>Auto Complete </li></ul><ul><li>Breadcrumbs </li></ul><ul><li>Brighten Transition </li></ul><ul><li>Calendar Picker </li></ul><ul><li>Collapse Transition </li></ul><ul><li>Dim Transition </li></ul><ul><li>Drag & Drop </li></ul><ul><li>Fade Out /Fade In Transition </li></ul><ul><li>Pagination Item / Search </li></ul><ul><li>Module / Navigation Tabs </li></ul><ul><li>Slide Transition </li></ul><ul><li>Spotlight Transition </li></ul><ul><li>Tool Tip </li></ul><ul><li>Write Review </li></ul>
    12. 17. <ul><li>Problem: </li></ul><ul><ul><li>The user needs the ability to look up information alphabetically within a large data set. </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Long lists that require extensive scrolling can place a cognitive burden on the user and may also slow down page rendering. Breaking a list into alphabetical chunks, when appropriate, can make the experience easier and more responsive for the user. </li></ul></ul>
    13. 18. <ul><li>On selection of letter links are filtered </li></ul>
    14. 19. <ul><li>Problem: </li></ul><ul><ul><li>The user needs to be able to navigate up (towards the root page) and have an understanding of where he/she is in relation to the rest of the site </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Display a horizontal list of labels starting with the topmost page and continuing down the site's hierarchy to the current page </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Breadcrumbs provide context relative to the rest of the site </li></ul></ul><ul><ul><li>Breadcrumbs provide a way to navigate up the site hierarchy </li></ul></ul>
    15. 21. <ul><li>Problem: </li></ul><ul><ul><li>The designer needs to communicate that an object is of secondary importance, not available or currently inactive. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Define two states: the brightened (normal) state and the dimmed state </li></ul></ul><ul><ul><li>The dimmed state should be visually distinct from the normal state </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Color changes do not generate the same level of attention in the brain that movement changes generate. How much the dimming and brightening an area of the screen will get noticed is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states. </li></ul></ul>
    16. 22. <ul><li>Problem: </li></ul><ul><ul><li>The designer wants to make a previously dimmed object the point of focus, signal that it is now active now available </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Define two states: the dimmed state and the brightened state. </li></ul></ul><ul><ul><li>Set the brightened state at 100% opacity (alpha) </li></ul></ul><ul><ul><li>Set the animation speed between the state </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Color changes do not generate the same level of attention in the brain that movement changes generate. How much attention the dimming and brightening of an area on the screen will get is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states (greater contrast; more attention). </li></ul></ul>
    17. 23. <ul><li>Problem: </li></ul><ul><ul><li>The user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Design the layout and interaction </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Reducing the number of keystrokes allows for faster user input. </li></ul></ul><ul><ul><li>Showing additional formatting information in the suggested items list (like the email address in the example above) removes ambiguity. </li></ul></ul><ul><ul><li>Continual feedback helps the user narrow in on the correct choice. </li></ul></ul>
    18. 24. <ul><li>Type text in the search box </li></ul>
    19. 25. <ul><li>Problem: </li></ul><ul><ul><li>The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Decrease the size of an object while animating the in-between sizes (tweening). </li></ul></ul><ul><ul><li>Shrink should happen very quickly. </li></ul></ul><ul><li>Rationale: </li></ul><ul><ul><li>Collapsing preserves real estate on the screen. The downside is that its content is either un-readable or less readable. </li></ul></ul><ul><ul><li>Collapse is visually more eye-catching than a Dim Transition, especially when combined with the move transition. Movement is more easily detected in the peripheral than color changes. </li></ul></ul>
    20. 27. <ul><li>Problem: </li></ul><ul><ul><li>The user needs needs to re-arrange the layout of modules on a web page directly with the mouse. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>The complexity lies in the number of event states (we call these event states interesting moments ) that can be used in a specific drag and drop sequence. </li></ul></ul><ul><ul><li>Page generation, Mouse hover over draggable object , Drag initiated, Drag over a valid target area, Drag over an invalid target area, Drag over the original location , Drop accepted , Drop rejected , Drop back on original location </li></ul></ul>
    21. 29. <ul><li>Problem: </li></ul><ul><ul><li>The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Break the list of items into a sequence of pages. </li></ul></ul><ul><ul><li>Provide links to access the previous and next pages of information. </li></ul></ul><ul><ul><li>Provide links to jump to the first and last pages in the set. </li></ul></ul><ul><ul><li>Provide information about what type of object the user is browsing. </li></ul></ul><ul><ul><li>Present links in the following order: First, Previous, Next, Last. </li></ul></ul>
    22. 30. <ul><li>Yahoo Global Object </li></ul><ul><li>Dom Collection </li></ul><ul><li>Event </li></ul><ul><li>Connection Manager </li></ul><ul><li>Data Source </li></ul><ul><li>Animation </li></ul>YUI Core YUI Utilities
    23. 31. <ul><li>AJAX </li></ul><ul><ul><li>Shorthand for Asynchronous JavaScript and XML </li></ul></ul><ul><ul><li>With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page </li></ul></ul><ul><ul><li>Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous </li></ul></ul><ul><li>The Yahoo! UI Library or YUI </li></ul><ul><ul><li>The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX </li></ul></ul>
    24. 32. <ul><li>AJAX </li></ul><ul><li>http://en.wikipedia.org/wiki/Ajax_(programming) </li></ul><ul><li>YUI Patterns </li></ul><ul><li>http://developer.yahoo.com/ypatterns/ </li></ul><ul><li>YUI Documentation </li></ul><ul><li>http://developer.yahoo.com/yui/ </li></ul>