Building high-fidelity interactive prototypes with jQuery <ul><li>David Park </li></ul><ul><li>Senior UI Designer </li></ul>
Agenda <ul><li>Why are high-fidelity prototypes important? </li></ul><ul><li>Visual Process Manager prototype demo </li></...
Why are high-fidelity prototypes important? <ul><li>More accurate user test results (especially for complex features) </li...
Why are high-fidelity prototypes important? <ul><li>Dev can use it as a design spec </li></ul><ul><li>Demonstrates feasibi...
 
jQuery Basics $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); $(&quot; #msg &quot;). show (” nor...
$(&quot; a[href='https://na1.salesforce.com/ui/setup/Setup'] &quot;). attr (' href ', ' https://na1.salesforce.com/apex/se...
$(&quot; div#DevTools_child div.setupLeaf:first &quot;). after (&quot; <div class=&quot;setupLeaf&quot;><a href=&quot;http...
JavaScript <input type=&quot;button”  onclick=&quot;$(' #mask,#overlay '). show ();&quot;  value=&quot;New Process&quot;/>...
jQuery UI <script type=&quot;text/javascript&quot; src=”jQueryUI.js&quot;></script> <ul><li>Library of widgets and interac...
Accordion $(&quot; #accordion &quot;). accordion ( {fillSpace:true} ); <ul><li>HTML </li></ul><ul><li><div id=&quot;accord...
Drag and Drop $(&quot; .panel img &quot;). draggable ( {revert:'invalid', helper:'clone’} );
Drag and Drop <ul><li>var dropcount = 0; </li></ul><ul><li>$(&quot; #diagram &quot;). droppable ({ </li></ul><ul><ul><li>d...
Drag and Drop Events $(&quot; #jy &quot;). droppable ({ drop :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src...
Toggle is my best friend <div id=&quot;jform”  onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=”…&quot;/></div> <...
Conclusion $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); <ul><li>Overriding links </li></ul><u...
Questions?
Upcoming SlideShare
Loading in …5
×

Building high-fidelity interactive prototypes with jQuery

4,390
-1

Published on

Presented at jQuery's 2010 conference

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,390
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

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 &amp; 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 &amp; 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 &amp; 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 &lt;a&gt; 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
  • Building high-fidelity interactive prototypes with jQuery

    1. Building high-fidelity interactive prototypes with jQuery <ul><li>David Park </li></ul><ul><li>Senior UI Designer </li></ul>
    2. Agenda <ul><li>Why are high-fidelity prototypes important? </li></ul><ul><li>Visual Process Manager prototype demo </li></ul><ul><li>Code Walkthrough </li></ul><ul><ul><li>Overriding links </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Overlays and Click States </li></ul></ul><ul><ul><li>Accordion </li></ul></ul><ul><ul><li>Drag & Drop </li></ul></ul><ul><ul><li>Positioning / Toggle </li></ul></ul>
    3. Why are high-fidelity prototypes important? <ul><li>More accurate user test results (especially for complex features) </li></ul>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? <ul><li>Dev can use it as a design spec </li></ul><ul><li>Demonstrates feasibility </li></ul><ul><li>Generates excitement and momentum </li></ul>“ 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='https://na1.salesforce.com/ui/setup/Setup'] &quot;). attr (' href ', ' https://na1.salesforce.com/apex/setup ') Overriding Links
    8. $(&quot; div#DevTools_child div.setupLeaf:first &quot;). after (&quot; <div class=&quot;setupLeaf&quot;><a href=&quot;https://na1.salesforce.com/apex/jaguar1&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> <ul><li>Library of widgets and interactions built on top of jQuery </li></ul>
    11. Accordion $(&quot; #accordion &quot;). accordion ( {fillSpace:true} ); <ul><li>HTML </li></ul><ul><li><div id=&quot;accordion&quot;> </li></ul><ul><ul><li><a href=&quot;#&quot;>Presentation</a> </li></ul></ul><ul><ul><li><div class=&quot;panel&quot;> </li></ul></ul><ul><ul><ul><li><img /> </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><a href=&quot;#&quot;>Logic</a> </li></ul></ul><ul><ul><li><div class=&quot;panel&quot;> </li></ul></ul><ul><ul><li><img /> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li></div> </li></ul><ul><li>CSS </li></ul><ul><li>#accordion a {display:block; background-image:url(’…'); padding:5px;} </li></ul><ul><li>.panel {padding:10px;} </li></ul><ul><li>.panel img {float:left;margin-right:5px;margin-bottom:5px;cursor:move;z-index:100;} </li></ul>
    12. Drag and Drop $(&quot; .panel img &quot;). draggable ( {revert:'invalid', helper:'clone’} );
    13. Drag and Drop <ul><li>var dropcount = 0; </li></ul><ul><li>$(&quot; #diagram &quot;). droppable ({ </li></ul><ul><ul><li>drop:function (event,ui) { </li></ul></ul><ul><ul><ul><li>if(dropcount == 0) { </li></ul></ul></ul><ul><ul><ul><li>$(&quot; #mask,#overlay1 &quot;). show (); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>else if(dropcount == 1) { </li></ul></ul></ul><ul><ul><ul><li>$(&quot; #mask,#overlay2 &quot;). show (); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>}); </li></ul>#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;); <ul><li>Overriding links </li></ul><ul><li>DOM Manipulation </li></ul><ul><li>Overlays and Click States </li></ul><ul><li>Accordion </li></ul><ul><li>Drag & Drop </li></ul><ul><li>Positioning / Toggle </li></ul>
    17. Questions?

    ×