-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
Building high-fidelity interactive prototypes with jQuery
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></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>
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)
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