Your SlideShare is downloading. ×
Building high-fidelity interactive prototypes with jQuery
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building high-fidelity interactive prototypes with jQuery


Published on

Presented at jQuery's 2010 conference

Presented at jQuery's 2010 conference

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • -A lot of the code examples are things that I do often, take 1-2 lines of code, and are powerful.
  • -salesforce evaluates features on 2 metrics utility and usability, give them low/medium/high assessments -The more the user can explore (and fail), the better. Otherwise we don’t know what to fix. -using jQuery you can create rich interactions and it’s FAST and POWERFUL
  • -It’s more likely that dev will implement what designer intended -It’s one thing for a designer to mock up a complex interaction and expect the dev to implement it, it’s another for the designer to prototype it themselves. Often times dev don’t see the value of adding fit & finish touches (such as animation) and need to see it in motion. -If you have static mockups and a written spec, it’ll fall to the bottom of the backlog. If it’s an inherent part of the prototype it will get frontloaded. -When execs see something that looks like it’s finished, it increases pressure to deliver. -A high-fidelity prototype goes a long way in terms of project completion perception
  • -A little history: -salesforce acquired a company that lets you build processes in a visual, drag-and-drop environment -we needed to show a proof of concept to press & analysts in 2 weeks -I designed a similar process visualizer feature, except it was implemented in Flex -there was not enough time to build a demo in Flex (we asked around) -I was asked to come up with a prototype that was similar to look & feel of our feature, but also demonstrated the power of the acquired product and how it would work inside of salesforce -using jQuery I built a demo in 1 week -It was probably a month from the beginning of the project to the time it appeared on TechCrunch -not something that we tested in the lab, was purely a demo
  • -had to sell that this new feature was living in a real org -salesforce has its own XML-like syntax for building user interfaces in HTML called Visualforce -when you create a new Visualforce page you can choose to inherit salesforce’s native page structure, which I am doing here -I’m finding the link I want to override by using the href value, and then overriding its href value with the attr function.
  • -This node doesn’t exist in the tree today -I inserted it into the DOM using jQuery -use Firebug to find the ID of the div I want to insert it after -again, it’s linked to the next page of the prototype flow
  • -these are all things I reuse very often in prototyping: overlays, click states
  • -jQuery UI provides a library of useful widgets built on top of jQuery -one line accordion! -automatically makes <a> tags headers, subsequent div is the header’s content -fillSpace fills height of parent element
  • -simulating contextual actions (typically prototype around a task flow, there may be multiple ways to accomplish a task but tasks are sequential)
  • -tolerance determines what qualifies as an “over” state Examples: fit = draggable overlays droppable entirely Intersect = draggable overlaps 50%
  • -Firefox Web Developer Toolbar plug-in “Display Ruler” feature is indispensable for absolute positioning
  • Transcript

    • 1. Building high-fidelity interactive prototypes with jQuery
      • David Park
      • Senior UI Designer
    • 2. Agenda
      • Why are high-fidelity prototypes important?
      • Visual Process Manager prototype demo
      • Code Walkthrough
        • Overriding links
        • DOM Manipulation
        • Overlays and Click States
        • Accordion
        • Drag & Drop
        • Positioning / Toggle
    • 3. Why are high-fidelity prototypes important?
      • More accurate user test results (especially for complex features)
      What are you testing? Level of Interactivity Utility Mockups Image Maps Usability (simple interaction) Image Maps Code (HTML + CSS) Usability (complex interaction) Code (HTML + CSS + jQuery)
    • 4. Why are high-fidelity prototypes important?
      • Dev can use it as a design spec
      • Demonstrates feasibility
      • Generates excitement and momentum
      “ Getting to done” Perception Mockups High-Fidelity Prototype Dev Complete
    • 5.  
    • 6. jQuery Basics $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); $(&quot; #msg &quot;). show (” normal &quot;); <script type=&quot;text/javascript&quot; src=”jQuery.js&quot;></script>
    • 7. $(&quot; a[href=''] &quot;). attr (' href ', ' ') Overriding Links
    • 8. $(&quot; div#DevTools_child div.setupLeaf:first &quot;). after (&quot; <div class=&quot;setupLeaf&quot;><a href=&quot;;>Processes</a> <span class=&quot;newFlag&quot;>New!</span></div> &quot;); DOM Manipulation
    • 9. JavaScript <input type=&quot;button” onclick=&quot;$(' #mask,#overlay '). show ();&quot; value=&quot;New Process&quot;/> CSS #mask, #overlay {display:none;} #mask {position:absolute;top:0;bottom:0;left:0;right:0;background:black;opacity:.45;z-index:2;} #overlay {position:absolute;top:50px;left:50%;margin-left:-382px;width:765px;background:white;z-index:3;-moz-border-radius: 5px;} Overlays and Click States $(&quot; .layout &quot;). click ( function () { $(&quot; .layout &quot;). removeClass (&quot; selected &quot;); $( this ). addClass (&quot; selected &quot;); });
    • 10. jQuery UI <script type=&quot;text/javascript&quot; src=”jQueryUI.js&quot;></script>
      • Library of widgets and interactions built on top of jQuery
    • 11. Accordion $(&quot; #accordion &quot;). accordion ( {fillSpace:true} );
      • HTML
      • <div id=&quot;accordion&quot;>
        • <a href=&quot;#&quot;>Presentation</a>
        • <div class=&quot;panel&quot;>
          • <img />
        • </div>
        • <a href=&quot;#&quot;>Logic</a>
        • <div class=&quot;panel&quot;>
        • <img />
        • </div>
      • </div>
      • CSS
      • #accordion a {display:block; background-image:url(’…'); padding:5px;}
      • .panel {padding:10px;}
      • .panel img {float:left;margin-right:5px;margin-bottom:5px;cursor:move;z-index:100;}
    • 12. Drag and Drop $(&quot; .panel img &quot;). draggable ( {revert:'invalid', helper:'clone’} );
    • 13. Drag and Drop
      • var dropcount = 0;
      • $(&quot; #diagram &quot;). droppable ({
        • drop:function (event,ui) {
          • if(dropcount == 0) {
          • $(&quot; #mask,#overlay1 &quot;). show ();
          • }
          • else if(dropcount == 1) {
          • $(&quot; #mask,#overlay2 &quot;). show ();
          • }
        • }
      • });
      #diagram function addForm() { $(&quot; #mask,#overlay1 &quot;). hide (); $(&quot; #jform,#jline &quot;). show (); dropcount++; }
    • 14. Drag and Drop Events $(&quot; #jy &quot;). droppable ({ drop :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jY} &quot;); }, }); over :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jYH} &quot;); }, out :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jY} &quot;); }, tolerance : 'touch’
    • 15. Toggle is my best friend <div id=&quot;jform” onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=”…&quot;/></div> <div id=&quot;hover1” onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=“…&quot;/></div> #jform #hover1
    • 16. Conclusion $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;);
      • Overriding links
      • DOM Manipulation
      • Overlays and Click States
      • Accordion
      • Drag & Drop
      • Positioning / Toggle
    • 17. Questions?