Interface Design

WK7: Javascript & jQuery Plugins

Half Way

Congratulations on completing 50% of this unit. We hope after much thought, research and problem solving that you’ve designed a futuristic interface in the form of a resolved micro-solution for retail. UX design can be extremely challenging; designing experiences for people (in a futuristic setting no less) is rife with unknowns and questions. That is, however, the role of a UX designer – to dive into a design challenge knowing nothing, or at the very least trying to forget what assumptions you do hold, and investigate an interaction challenge enough until you understand it well enough to be able to solve it.

Assignment 2: UI Documentation & Presentation

The interface you’ve designed should be futuristic enough that there’s no way you’re able to build it yourself especially in the present time. Assignment 2, however, is concerned with creating a website to interface/communicate the concept of your design to a stakeholder. The objective of the site is to communicate the details of your UI solution and demonstrate it in action. To do this, it is a requirement that you use animated and interactive features to the enhance website as an interface for communication. This can be achieved in several ways:

To do this effectively, always keep in mind who you’re communicating with. Your one-page site should be tailored towards convincing your primary stakeholders that your concept is worth their time and money.

What does effective ‘animation and interactive features’ look like?

Web award websites such as awwwards are great sources of inspiration for awe-inspiring web experiences. Here are a few example sites that might fuel some inspiration for using animation and interactive features to enhance your design as an interface:

Libraries and Plugins

The terms library and plugin are used fairly interchangeably when it comes to Javascript, so if you see either term used here we are talking about the same thing. A Javascript library or plugin is a pre-written script which allows for easier development of Javascript-based applications. In fact, you’ve already used a couple; jQuery and Modernizr are both Javascript libraries. So what’s the difference between a Javascript library and a jQuery library? The only difference is that the jQuery library will use and depend on jQuery, meaning you need jQuery to be installed in order to use the jQuery library. We call this a dependency.

So, what are some examples of Javascript libraries and what libraries are most popular? A fantastic resource for seeing what some bigger sites use is Libscore. Libscore analyses the ‘top million’ sites on the internet and lets you know some of the more popular libraries that get used. Yes. Some of the biggest companies in the world use libraries that you can also learn today quite easily.

You’ll notice jQuery and Modernizr high on this list. These libraries are by far well established and extremely common. Many other libraries you’ll notice start with a $. These are jQuery plugins, and thus you can see how much of an impact jQuery has had on the web today. jQuery itself has some plugins that don’t come with it. One of these is jQuery UI.

jQuery UI is a set of additional methods that extend jQuery’s capabilities. They aren’t included with jQuery itself as they are less commonly used – you wouldn’t want to bloat your website with scripts that you aren’t going to use!

Carousel Libraries

Carousels are quite common features on the web so naturally, there are quite a few libraries out there that can help you implement them. There’s lots of argument on the web about the appropriate use cases for carousels and sliders. It’s safe to say that adding a carousel doesn’t always improve your UI. However, when the user knows what to expect from in the content within your carousel it can serve as a great way of layering multiple information sets into one interactive component.

Some great links looking at the usability and UX of carousels can be found here:

One excellent jQuery library used for creating carousels and sliders is slick.js. Let’s have a look at their documentation and have a go at using it with this weeks exercise material.

Exercise Material slick.js Documentation

Some other popular Javascript/jQuery libraries

Exercises

Here’s some HTML markup perfect for trying out a carousel such as slick.js. You can get creative with how you use different Javascript libraries – carousels make a great tool for displaying several interface designs inside a mockup.

Try using slick.js