User Experience (UX) – Whole Team Involvement

Sometimes I find that there are multiple ways to describe my job position: user interface designer, user experience designer, and graphic designer can all adequately describe the roles I fill at Rural Sourcing, but what do I actually do? A large part of what I do is help clients discover the best way to visually display and interact with their product. Often I am labeled as the person who just “makes it look pretty.” User experience (UX) is much more than just making something “look pretty.” UX is about making interactions simple and visually providing users with the best solution they will easily understand. Another thing to remember is that it’s not always just about the user; the overall experience should meet as many goals and requirements as possible for both the business and the user. A similar understanding of the role of the UX designer can help businesses, designers, and developers provide the best service to clients.

Developing and designing around a great user experience can be a problem. The best way to achieve a great user experience is through collaboration of everyone on a team. If designers want their designs to be built, they need to be involved through the whole process – especially when issues arise and when the scope changes during development. It’s easier to understand the end of the story if we’re there to hear the beginning, right? Involving designers early, when products are still in the development stage, helps paint a clear picture of what the end product is intended to be. Developers can work out design issues by interacting with designers and collaborating on clear documentation. As quality assurance (QA) testers verify that a project has met its technical requirements, designers can also utilize them through identification of issues with front-end design implementation. The entire project team can benefit from collaboration between designers, developers, and testers. Early team collaboration can help eliminate time wasted on tedious corrections and edits.

Jared Spool, CEO at the world’s largest usability research firm, says that the most common flaw he has found is that companies think “good experience design is an add-on, not a base requirement.” There are always unanswered UX questions that arise, and utilizing a UX designer early can save time on ramp-up and rework for any project. For example, a small change to a design that supports reuse of components can help make development faster, which in turn frees up time for work on more complex areas. Everyone sets out to achieve the best product they can; success can be attained through collaboration between the entire team, early involvement of UX designers, and a cohesive understanding of what UX can bring to a project; so how do you engage your UX designer(s)?

Kelly Shubnell
Associate Programmer Analyst
Kelly Snubnell

The Visual Web

In this blog, I will be examining the concept known as the Visual Web. Take moment and look around you – the web is changing, now more than ever. More and more, websites and even mobile applications are joining what is being called the Visual Web. This begs the question: What is the Visual Web, where does it come from, and what does it mean to you?

First, let’s take a brief look back to the design origins of the web. When websites were first created, they were designed to mimic documents; web pages were essentially sheets of paper in the giant filing cabinet of the internet. Even up until the mid-2000s, almost every web-page was devoted to a singular purpose: relaying text.

Then something subtle occurred. People received ever-increasing access to smart devices and high-quality media. With a camera in every pocket, it was no longer necessary to share these long, in-depth recollections of current events. YouTube had a big red ‘Upload’ button right on the home page. People didn’t have to host their own site just to upload some pictures onto a webpage. As media became more prevalent, the web began to reshape itself into the internet we know today.

connections counter

At the time of this writing, Cisco reports over 12.5 billion devices connected to the internet. That is a lot of devices, each with different form factors, resolutions, input devices, software and hardware. How are you supposed to show your Instagram selfie on 12 billion devices?! Luckily, this new ‘Visual Web’ thing accounts for this using something called responsive design. This means that the flow of the website can change based on the screen it’s on so you always get the best version. On top of that, many sites are designed mobile-first, meaning that the site is built to look good on a phone and then scaled to a larger screen to avoid compromise.

Another huge aspect is iconography. By representing well-known actions or ideas with images, a site can convey a great deal of information in a single element. Of course, people have been making icons for years – you have the floppy disk, the printer, clipboard, scissors, etc., but until recently websites could only display glossy images which were large, didn’t scale well and had a plethora of download issues. The icons used today are simply fonts; they’re rendered exactly the same as the letters you’re reading now, perfect on any screen.

Lastly, Visual Web sites are fast. Using content delivery networks, front-end code can be held on a central repository. This is so that if you browse to a site that uses a library you’ve already encountered, your browser can recognize the repository and load the library from cache. This is much faster, and saves a lot of data in the long-run. Many of these websites also use a one-page design so that most or all of the site is hosted on a single page; this prevents the browser from reloading everything when you click a button or link, and also means the site can respond to you in real-time.

So what does it all mean? Faster, cleaner browsing wherever you go and more access to the content you enjoy without the clutter. Plus accessible information in the form that fits you most. The truth is, it’s hard to say for sure what the limits are. People are finding new ways to use and improve the Visual Web every day, and it’ll soon evolve into yet another discernable version of the internet. Just be sure to pay attention; things are about to get really cool.

Christopher Johnson
Junior Associate Programmer Analyst
Christopher Johnson

Marionette JS

In my last blog entry, I wrote an article titled, “Backbone.JS Models and Collections” about using BackboneJS in the construction of an admin tool for a fantasy sports website. Another key component involved in the development of the page was MarionetteJS. MarionetteJS is an application library for Backbone.JS. It is primarily used to simplify the construction of bulky JavaScript applications. It contains a collection of design patterns for use with Backbone.JS. Within this blog entry, a very simplistic example of how these technologies were used will be shown.

To begin, a Home View was created where the players will be displayed. A basic example of this is shown below:

module.Views.HomeView = Marionette.Layout.extend({
	initialize: function () {

	},
	regions: {
		'playersTable': '#playersTable'
	}
});

Marionette and Backbone was used in conjunction with HandlebarsJS templating. A more in-depth explanation of Handlebars may be a good blog topic for another day. However, for the purpose of this blog, I will give a basic example of what a Handlebars template looks like. With all of the code examples contained in this blog, it is assumed that the developer will be using Marionette in combination with Handlebars. An example of a template used to display a table of players is shown below:

<script id=”player-row-template” type="text/x-handlebars-template">
	<td><b>{{FirstName}} {{LastName}} ({{TeamAlias}})</b></td>
</script>

<script id=”player-table-template” type="text/x-handlebars-template">
	<table>
		<thead>
			<tr>
				<th>Player Name</th>
			</tr>
		</thead>
		<tbody id="iterate"></tbody>
	</table>
</script>

An example of how a list view of players would be created is documented below:

module.Views.PlayersTableItemView = Marionette.ItemView.extend({

	initialize: function (options) {
	},
	tagName: 'tr',

	getTemplate: function () {
		return '#player-row-template';
	},
});

module.Views.PlayersTableView = Marionette.CompositeView.extend({
	initialize: function (options) {
		this.collection.on('change', this.render, this);
		this.collection.on('reset', function () {
			this.render();
		}, this);
	},
	getTemplate: function () {
		return '#player-table-template';
	},

	itemViewContainer: '#playerViewContainer',

	itemView: module.Views.PlayersTableItemView,

	appendHtml: function (containerView, itemView, index) {
		this.$(this.itemViewContainer).append(itemView.el);
	}
	}
});

Make sure that the Home View is visible.

var view = new module.Views.HomeView();
region.show(view);

Then Backbone.JS collection of players is passed into the view.

module.Views.players = new module.Views.PlayersTableView({ collection: playerCollection }
);
view.playersTable.show(module.Views.players);

The collection has models with attributes that correspond to “FirstName”, “LastName”, and “TeamAlias.” These attributes were placed within the Handlebars template shown above. For example, if a player’s name was “John Smith” and he played for Miami, the template would be used to display “John Smith (MIA)”. This is repeated for each model within the collection.

In conclusion, Marionette is a great tool to be used in conjunction with Backbone.JS in any JavaScript endeavor dealing with large amounts of data. Along with the help of Handlebars, Backbone.JS and Marionette can be used to simplify the somewhat daunting task of making such a large scale web application.

Grant Johnson
Junior Associate Programmer Analyst
Grant Johnson