Building high-fidelity interactive prototypes with jQuery

  • 4,044 views
Uploaded on

Presented at jQuery's 2010 conference

Presented at jQuery's 2010 conference

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,044
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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='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>
    • 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?