Episode #161 Dave McFarland - jQuery for Agile Prototyping
Dave is a web developer, author, and teacher. He says that for designers, jumping to the programming side is easy when you have libraries and plugins. JQuery uses a familiar syntax that designers know from CSS. Creating rich, interactive prototypes becomes a reality for designers. Even though the code may not be 100% production-ready, it greatly increases the speed of the whole process. Listen to Jared Spool's interview with Dave to pick up tips on using jQuery for Agile prototyping.
Check out Dave’s full-day workshop from UX Immersion 2012, now in our All You Can Learn Library.
But today we're going to talk about what it's like to be programming as a designer, and all those things. And I have with me here Dave McFarland. Hey, Dave.
Dave McFarland: Hi, Jared.
Dave: Well, it was, you know, introduced by Netscape, I believe in 1995, though I'm not totally sure if that's true.
Jared: Not too long after Netscape had its browser in the world, so it wasn't there for the first versions, but it did appear pretty soon after that, then.
Google Maps is such an incredible example, because it draws in a lot of different technologies, Ajax being one of them, so that you can get this kind of real, immediate interactive feel where you were just grabbing a map and scrolling across, dragging it across your screen.
And for those who are listening to this who are maybe younger and did not live in the days before that, we had other maps like MapQuest, where basically you would click, and then you would wait, and the screen would refresh, and you'd get a new chunk of a map. And then you would click again, and then you would wait, and the screen would refresh, and it was a very kind of staccato rhythm, not a very fun experience, and not very interactive, and certainly slow. And I think Google Maps really changed people's perspective on how immediate the user interface for websites could be and how fast they could react to users.
Jared: Yeah, I remember when Google Maps came out, it was all abuzz. And that was really when this idea of being a front-end developer became fashionable, that you would actually be developing code to run on the browser that wouldn't be running on some server in the background. And it was a different language, and you had different constraints, and you had all these synchronization issues you had to worry about. So that's about the time when that really became very popular. If you could do that kind of magic that Google Maps did, you were really desirable in the marketplace.
Jared: So having these tools really simplifies the programming for something like a Prototype. So if I want to mock up, let's say I wanted to make a message-handling thing, like a Gmail like interface for messages in my application. If I want to mock it up so I have new messages, and composing a message, and sorting the messages and stuff, now that I have these libraries, that becomes much easier to do, right?
Maybe animating them, or hiding them, or showing them for example with a tabbed panel, you'll have lots of different HTML elements on the page, but only some are visible at one moment, like the one tab that you have selected. You can click on another tab and you'll see another panel. So basically, you're hiding and showing HTML elements.
And jQuery uses CSS syntax, or cascading style sheet syntax, for selecting those page elements that you're going to hide and show. So if you're a web designer and you know CSS, then jumping into jQuery, there's all this familiar terrain that you can sort of draw your knowledge. It'll be familiar to start using it, because it's talking the language of CSS that you understand.
In addition, it just has these helper functions. Things like Animate, which will animate something on a screen, or make it fade out or fade in, which are really rather complex things to do programmatically. But all that technical difficulty is hidden behind a single function, and one little line of code does this cool stuff. And so it's really much simpler for designers just to sort of jump on board and start doing pretty amazing things.
Jared: Yes, the folks that I've seen who are now rocking the prototype world, really it almost felt like they had this huge fear about it. Like, they were going to put on a blindfold and just jump off into the deep end. And then they got in there, and they're like, hey, wait a second, this is actually pretty easy. Why do you think there's all this sort of mysticism about how complicated it is?
Jared: And so, the things that jQuery does, as I understand it, there's basic jQuery, and then there's plugins, right? And the plugins aren't created by the same people who created jQuery. They're like open source, people are doing them all the time. Have I got that right?
Jared: It seems to be really cool, because once you get a prototype running that sort of represents what you intend to build and you can sit down with your developers, and you could say, "This is what I'd like to see us build," right? It doesn't even matter if the code you produce as a designer is production-ready. It's no different than if you gave them some sort of specification or some hand sketches or something done in Photoshop, from the perspective of the developer, because they're going to start from scratch with things they need to do for the production-ready environment. But the fact that you can create a prototype that shows what you intend and shows all the interactions--that to me seems really, really powerful.
Dave: Yeah. And I mean, you could develop something that you just sort of hand off and say, "This is exactly what I want." And they could then, if they felt like the code wasn't good enough, they could easily optimize it or rewrite it to fit you know, the technical standards of the organization. But, yes, we are definitely moving far beyond the days where, "Here's my Photoshop files, guys. Why don't you flip through and see this is the next thing that happens on the page when you interact with it."
I mean designers can build fully interactive prototypes. And now it's becoming much more common for designers to not even think of Illustrator or Photoshop as the beginning grounds for web design, but actually just jumping into a text editor and building HTML as the starting point for their designs.
And now he says he lives in TextMate all day and he produces code. And they get ideas done five times as fast. The developers love it because they can go in and they can look at what he did and they know the dimensions of things and they see the interactions of things. Even if they have to convert the code for their own environment, they're able to pick that up really fast.
I was with a team and we were doing sketches, and then we went home for the day. We came in the next day, and one of the guys had worked for a couple hours and he actually had a rough working version of what we had sketched out. I asked him how long he'd spent on it, and he said, "It was only about an hour, because everything we were doing was already ready-made in terms of plugins and base functionality." I said, "Have you been doing this for a long time?" He says, "No, I just picked it up a few weeks ago. I just got into jQuery for the first time. I've never written any programs before in my life. It's just so easy." Do you think that's typical or is that unusual?
They start programming their own. They start making their own plugins. Or they'll take a plugin and they'll rewrite it. I think this sort of entry level enabling technologies are amazing. They help generate a new breed of programmer that we wouldn't normally have, because the barrier to entry was so high in the past, and now it's so low that people can get really jazzed and they start to ramp up their own skill set in a way that's really comfortable for them. They become better and better programmers.
Jared: Yeah, I mean this makes perfect sense to me. Do you have a Trader Joe's near you?
Dave: Oh, yeah.
Jared: We have them here and one of the things that I've recently learned is that you can do amazing things with Trader Joe's stuff, right. One of the first recipes I learned involved taking their tapenade, which is this mixture--I don't make tapenade. It's got...
Dave: Olives, right?
Jared: Sometimes it's olives, vegetables, and--I don't know. It's just this sort of relish, I guess, is what you would think of it as. You take a jar of that and you put it in pasta and chicken, and all of a sudden you've got this amazing dish. It's a restaurant-quality dish. And the thing was, when you were talking about plugins for jQuery, I was thinking of the same thing. I actually don't know how to make tapenade, but I can actually delight my family with this amazing dish that I throw together after work in about 10 minutes for no effort. And they're like, "Oh, my gosh, this is awesome." And I'm like, "Yeah, I emptied a jar of tapenade..."
Jared: "...whatever that is." That's like programming with plugins. I don't know how the plugin works, but it does everything I need it to do, so who cares?
Dave: Right, right yeah.
Jared: Frankly, I don't know how the processor moves bits around but I can get it to do my email. So you know, I don't seem to be handicapped because I don't actually know how that's working.
Dave: Yes. I don't know if you saw this article on the Inc website for Inc.Magazine. I think it was January 2. They had an article, "The Value of the Designer Who Codes." It's about having designers who know how to code, or engineers who are designers as well. They talk about Quora, a social answer network. A lot of the people there are designers and engineers, and they don't use Photoshop. They use text editors to code and design, and since they're all sort of into the technology, they can all talk. They're all on the same page.
Jared: I'm hearing from our clients--and you can tell me if you hear this--is that when you have some organizations that have sort of not been very sophisticated on the front end because the designers don't know how to code and the back end folk haven't done that much with front end development. So they tend to have like that old MapQuest interface, where you click and you wait and you click and you wait.
And then a designer starts to do stuff with just some prototypes in jQuery, and they whip it up really fast. That actually sometimes motivates those back end guys to actually say, "OK, if this guy can do it we should be able to do it." And then suddenly the whole--you know what they say, a rising tide raises all boats. Everybody has suddenly got more front end skills, and they're realizing that this isn't as complicated as we thought it would be.
Dave: Yeah, no, I think that's an excellent point, because I think we talk about maybe designers feeling intimidated about programming. I think there are back end people who are intimidated or at least don't understand the front end experience. They don't understand the interactive experience. Things like PHP is not an event-driven programming language. It's not about somebody clicking on something, or moving their mouse, or interacting with different page element.
Dave: Yeah, yeah, no, I mean at the end of the day, people can start adding all sorts of interesting user interface elements. The ubiquitous slider that we now see on home pages, where you've got some picture and content, and then it -- zoom -- slides away. There's another picture, more content, and you can click and dive deeper into the site. That's like all over the place. And with jQuery, there's a variety of plugins to help with that. And in my workshop, I'll show one of them. Really with some very simple HTML and this plugin, you can put that pretty jazzy effect right on your home page in a matter of minutes.
Jared: That's just amazing to me. It's great. I mean once we get prototypes so effective it really does give us a way to talk about our designs. There's an old saying which is talking about design is like doing interpretive dance about jazz.
Dave: [laughs] Right.
Jared: And having a design that you can actually play with, that you click on things, you can see what it does next, and you can sit down next to your developer and you can say, "OK, this is what I want to have happen." They can take the mouse and they click on it and they can see what it does next, and they go, "Got it." That's got to speed things up by light years.
Jared: Though I guess light years is a distance.
Dave: Yeah. So maybe not light years but light...
Jared: Light something.
Jared: Yes. Some unit of speed.
Dave: Yeah. Programming person-hours.
Jared: Yes. [laughs]
Dave: All right. I will do my best to allow you to be a Ninja.
Jared: OK. Awesome. David, thank you very much.
Dave: All right. Thanks, Jared.
Jared: If you guys are as fascinated by this as I am, then you're going to want to join David in his full day workshop at the UX Immersion Conference. It's going to be in Portland April 23rd through 25th. You can find more details about that by tootling around our website at uie.com. There will be a link to the conference there. And once again, as always, I want to thank you all for encouraging our behavior, and we'll talk to you next time. Take care.