Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm a UI/UX designer and work for a start-up creating a web-based application serving a specific target audience. Although not required for my job, I'm trying to teach myself JavaScript and would like some of the JS experts out there to tell me how knowing JS could help a UX designer and in what respect. Also, I'm wondering how challenging it would be to get familiar with it given that I have some basic knowledge in jQuery and ActionScript3.

share|improve this question
2  
You might find this interesting. –  Vitaly Mijiritsky Aug 3 '11 at 3:40
    
i think it's useful to have a good grasp of the technology that will be used to implement your designs, but as @Vitaly points out, JS is a pretty specific tool only really applicable if you are involved in web UI / UX –  Toni Leigh Sep 2 '13 at 6:21

9 Answers 9

The most important reason to learn Javascript is to be able to build what you design. A lot of interaction designers approach their work from a visual standpoint, which worked well for the past decade, but as we move into an era of "web applications" where rich interactivity is increasingly important, it's essential to be able to grasp what kind of behaviour is possible in the browser.

It's also fundamental that you be able to model, to the finest details, how certain interactions work for users. This won't be possible if you don't know Javascript (or a JS library allowing you to do so, like jQuery). And you don't want to leave detailed interaction decisions which fundamentally affect the user experience to a front-end developer who's great at javascript architecture but poor at determining what's important to users.

How far you need to go when learning Javascript is up to you. I don't think most UI tasks require you to understand closures or the intricacies of prototypes since most libraries will cleanly wrap these features in abstractions for you. As long as you can use Javascript to obtain your goals, which is perfectly possible with libraries like jQuery or Mootools, you should be fine.

share|improve this answer

It's the same benefit as knowing how to build a house helps an architect. Understanding the medium one is working with is a good skill to have.

An architect that only knows how to use the pen can still be a good architect, but one that also knows how to pick up a hammer tends to have better insight into the types of building solutions one can come up with.

Specific to JavaScript, I think the main benefit for a web UX designer is that it enables you to prototype directly in the medium of HTML/CSS and JS. You can also better communicate with your UI dev team.

From my own experience, knowing JS has allows us to call out bad vendors who lacked basic UI skills and would claim "That can't be done". We'd just then build the UI ourselves and send it over, leaving them no room to wiggle out of their inabilities.

It also has allowed me to design in code, which is a boon to our IAs and others on the team. We can work much more iteratively. They tweak their wireframes, I tweak the code, and we can go back and forth quickly.

Finally, I think knowing how to build something helps you as a UXer to understand all the individual points of interaction that have to be thought about. I find that it's common for UX people with no code skills to create wireframes that make a lot of sense on paper, but are missing at least half of the interaction specifications required to actually build it.

As for jQuery vs. JS, jQuery is JS--just faster to write. I say learn jQuery and as you learn it, you'll find that you're learning a lot about how JS works as well.

share|improve this answer
    
+1 for "...allows us to call out bad vendors who lacked basic UI skills..." Have done this a few times myself. –  eBeth Aug 4 '11 at 14:29

Having a basic knowledge of any type of technical domain is useful for a designer, you will be able to think what what is possible / not possible, expensive / cheap as you design. For this reason it would be a useful tool. It also may help you prototype solutions for user research (although there are ways to do this that are cheaper than learning javascript).

In terms of actually writing production code, this really depends on the organization you are in. I know some teams where the UX person will stop at wireframing, and some where they will be responsible for wireframing, visual design and front-end HTML / Javascript. I would say the former is more common. I think jobs where you were required to do both would be in the minority.

In terms of learning Javascript? It is actually a really well-designed, intuitive language. There are a ton of books and community resources, and very simple development environment (notepad and browser). So, if you have the knack for programming it would be relatively easy to pick up. Although in terms of depth, a long path to mastery!

If you were thinking about dedicating some significant time to learning JS, I would weigh it up against your other skillsets. For example spending more time learning about User Research may provide more bang for your buck in terms of future UX jobs.

share|improve this answer

Others have answered that you can build what you design - or at least that it is one route to doing this.

This doesn't just apply to web design. I have seen a number of UX people in different companies using javascript to help design, build and test interactive prototype displays of their physical product designs interactively before taking them further. It happens that in each case, they were using Raphael to mock up the display of their embedded device (these are typically fixed segment LCD displays). It's a quick, cheap and powerful way to determine initial viability.

Javascript is just one of many options for being able to build something that allows you to engage with your concept, but it just happens that there are many easily accessible utilities and examples out there that help make the task (and the learning) easier.

If you do want to experiment, I recommend jsfiddle as a useful resource to play around with javascript and various frameworks.

share|improve this answer

As many have pointed out, it helps you build your design.

I'd like to enforce that you should be able to build your design. When I make a carousel or other thing in JS/jQuery, what really matters is how fast it rotates, which direction, how many images, if it should fade, etc. Usually those are just parameters and I prefer the person with the idea play with those parameters until perfected rather than me the programmer.

This is the same in the games industry. The game designer should know enough code to tweak parameters. I.e. coder creates jump-function, designer tweaks how high and how fast. Etc.

Also, instead of putting your time into explaining what and how you want it - you can just do it (or at least a prototype of it).

share|improve this answer

It is useful for you to learn what Javascript can do - e.g.

  • play with the JQuery UI demos
  • read up on form validation using javascript

But unless you are going to seriously program in Javascript (which you might do since its a start up), I don't think that you will get much UX benefit from learning the basics, you'll more likely end up frustrated.

share|improve this answer

Developing an understanding of the core principles of OOP in JS is a fundamental aspect of becoming a more adept UI Developer. As the interactive nature of the web expands into the adaptive web, the ubiquity of JavaScript in UI Development on websites will increase. It is fundamental to learn Javascript and to understand dynamic interactivity as it relates to UI Workflow. I recommend getting a "Missing Manual" on JS/jQuery to better understand the inherent advantages of programming sites with intuitive and clean JavaScript or jQuery

share|improve this answer

When you are holding a hammer, everything looks like a nail.

The people with the aesthetics are designers. Designers tend to know photoshop. The design iterations proceed on photoshop at incredible speed and with great client satisfaction. The client requires nothing more than an image viewer to look at the artwork. Clients are used to this because their other design interactions (advertisements, banners, logos, visiting cards, branding) are exactly like this. For the client, the website is a design problem. But look at the difficulty of converting PSD to HTML. There are any number of specialised agencies that do just that. Just google "psd to html". If the designer does not factor in the complexity of implementing the design, it is likely that some fidelity will be lost at the stage of converting it to html. Plus, the psd to html guys will give the html, css, javascript and images. Putting that in a working application is a third person task, and will again require close review.

Another way to work is to create mockups, using tools like balsamiq. This is typically used for web applications, when the interactions are being fleshed out. Again, the whole balsamiq design will have to manually ported to code. And once implemented, will again require review.

If the PSD part is eliminated, and the designer works directly in the target platform (html, css, javascript and images), few benefits are immediate. First of all the design will be one that works in browsers. Cross browser testing is possibly not such a big deal now as it was a few years ago, but still. What the designer comes up with and shows to the client would be exactly what the client will finally receive. One review cycle is lost and one potential chance of loss of fidelity is eliminated. What remains is for a programmer to take the html, css etc and implement it in some final language. This would also allow the designer to implement and the client to see the interactions. Which is good. Finally, this would allow the designer to help the developer with the implementation. Which is great.

The kind of javascript that a designer needs to learn is simple compared to what the developer might add later. for example, the desginer would probably need to learn how to add (not write, but add) a carousel. The designer need not learn about AJAX or validations. I guess more important than Javascript is that the designer should know CSS, and by that I mean semantic CSS. I have seen people create CSS rules like 'homeheader' and 'aboutusheader', possibly because the header in the home page should be bigger than the one in the about us page... this to my mind is crap. Better way would be a rule like 'header' for all pages, and another rule like 'header > large' which would be applied to the home page header. Also, a designer who knows CSS will be able to create image sprites instead of 50-100 tiny images.

TL;DR A designer who know the UI relevant javascript, and UI javascript libraries/frameworks, and also know CSS, it would reduce the number of approvals and improve the chances that the client gets what she is promised. All the work products created by the designer are immediately useful to the developer, along with assistance from the designer.

share|improve this answer
    
This is a rather outdated way to produce solutions (albeit, still common). It's waterfall and will have all the inherit problems with waterfall web development. As for the 'holding a hammer' metaphor, if you only know photoshop...that's your hammer. –  DA01 Sep 3 '13 at 16:10

I use AngularJS to build what I call "functional mock-ups". AngularJS (and I think EmberJS) add new HTML elements with implied functionality. It makes it really easy to make repeated lists, searching, and keep data values in sync across pages (input text here, have it appear there). It is very easy to learn the basics of Angular if you are just a little familiar with Javascript (the learning curve comes when you start trying to write more custom code).

If you have the time to learn it, it would totally be worth it to a UX designer. You will be able to show actual functionality to your coworkers, and definitely impress people who aren't familiar with frameworks.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.