jpreardon.com » Development

Rapid Prototyping with Sinatra

jpreardon — Wed, 09 May 2012 11:00:51 +0000

If you’re looking for a way to prototype an interface, especially one that would benefit from interacting with live data, having a lightweight and easy to use/learn backend is essential. Sinatra fits the bill nicely. It is a Ruby framework for developing web applications. A List Apart has a great tutorial on prototyping with Sinatra, which will get you up and running pretty quickly.

Recently, I needed to cobble together a quick web service to support a hardware project I am working on. The above mentioned tutorial saved me a lot of time. Once I had the service running locally, it was easy to get it deployed to Heroku where the web service was no longer dependent on my laptop running the webserver.

// No related posts

Recommended Data Visualization Tools

jpreardon — Tue, 08 May 2012 11:00:30 +0000

There are a lot of tools available to help create data visualizations–so many that it may be difficult to know where to start. The people at datavisualization.ch have put together an extensive list of their recommended data visualization tools. Rather than simply providing a long list, they have only included the tools they use the most–and a nice filtering mechanism.

via Information Aesthetics

Restaurant Menu UX

jpreardon — Wed, 02 May 2012 11:00:17 +0000

Chances are, you’ve seen your fair share of restaurant menus, enough to appreciate the common elements presented in most menus. While the size, fonts and overall look and feel varies from place to place, the layout of the information generally follows a well known format. This format follows the timeline of the meal, from start to finish (appetizers, entrees, dessert). There are plenty of variations on this, especially when it comes to titling these sections (starters for appetizers), or adding subsections (“from the grill”, “from the sea”), but the linear format almost always present.

Occasionally, and with varying results, some people break away from this format. When poorly executed, it can be confusing for the diner. However, when done well, the menu can offer an additional layer of information in a way that is easy to digest. Take the dinner menu at Fishtag as an example. The reviewer at the New York Times finds it “difficult to navigate”, but I think it has some potential. The food is presented in an order of lightest to heaviest, small and large plates are mixed together. This allows for beverage pairing recommendations in the margins on both sides. The only indicators that a particular plate is an appetizer are the red font color and, of course, the price.

The red font color can be a bit confusing since it seems kind of random at first glance as there is no legend provided for what the red color means. Does it mean spicy? Are these items recommended by the chef? Are these things red because the menu designer thought it would look pretty? It is even more confusing when compared to the beverage menu. Beverages are grouped by type (white wine, rice wine, beer, etc.), then by flavor profile, which matches the pairing suggestions the food menu. Nice. But, the red font color on the beverage menu is used only to set off detailed descriptions of each item.

Granted, the readability of the menu is but one small component of the overall restaurant experience and the staff probably offers some guidance before leaving the diner with the menu. But, a good menu layout is much easier to execute than consistently delicious food and stellar service. So, why not improve on something that is potentially confusing? Perhaps some iconography to designate small plates and italics for the beverage descriptions would let people concentrate on what food and drink to order rather than puzzling over what all this red means.

// No related posts

Effective Task Design

jpreardon — Tue, 01 May 2012 11:00:08 +0000

Jared Spool tells a tale about the importance of task design in user testing. Based on a real example, he speaks to word choice in a UX testing script and how it can skew results. If you’re interested in that, you’ll also want to read his follow-up on task design using an interview based approach.

Formatting International Phone Numbers for Readability

jpreardon — Mon, 30 Apr 2012 11:00:11 +0000

Have you ever tried to read an unformatted phone number? Reading a string of digits with no spaces or other delimiters is difficult. So much so that we tend to write them in a more digestible way. In North America, the common pattern is something like (xxx) xxx-xxxx. The punctuation varies, but the 3-3-4 grouping is pretty much universal. Other regions have their own patterns based on the number of digits they need to dial and how the area or city codes are allocated.

Given the number of countries in the world, coming up with display rules for each region is a daunting task. Luckily, some folks have already done this so you don’t need to reinvent the wheel. Libphonenmber handles display and validation of phone numbers, and looks to do a nice job of it. Check out the Libphonenumber Java demo if you need some convincing.

Managing Complex UX Deliverables

jpreardon — Thu, 21 Jul 2011 12:30:24 +0000

Sometimes, people forget that the various UX deliverables on a given project are strongly interrelated. By this, I mean that a deliverable influences and informs downstream deliverables, while the downstream deliverables should support and expand on those that were created upstream. This also means that when something new is discovered, all of these fabulous deliverables should be updated as needed. The larger the project, the more important this becomes. Makes sense, right? Right!

Unfortunately, this doesn’t always happen, sometimes due to time or budgetary constraints, sometime due to poor process or laziness. “Checklist Thinking” for UX Professionals: Retaining your sanity in a complex project further explains the importance of process when it comes to deliverables and offers some strategies for making is happen. It’s worth the quick read, if only as a reminder of how all these documents are (supposed to be) tied together.

// No related posts

Advice for Small UX Teams

jpreardon — Wed, 20 Jul 2011 16:53:13 +0000

Out of necessity, people on small user experience teams need to be generalists, especially when they are a team of one or two. UX Matters has some great pointers for small UX teams, from selling yourself to getting things done with little budget to finding a support network. All good advice that can help make you and your tiny team more productive.

Metaphors for Explaining Pair Design

jpreardon — Tue, 19 Jul 2011 23:42:58 +0000

It can be difficult to explain the ways by which things get created. The people at Cooper generally have two roles on their pair design teams: Generators and Synthesizers. But,this nomenclature may not go over so well “with parents or at a cocktail party”, to use their words. So, they’ve gone on to explain their pair design roles, metaphorically. I especially like the the use of Han Solo and Chewie in the pilot/navigator roles.

HOWTO: Tracking Social Engagement in Google Analytics

jpreardon — Mon, 18 Jul 2011 19:13:14 +0000

The social engagement tracking in Google Analytics is great. Google +1 works by default if you use the +1 Button Creator. However, one needs to do a bit of configuration to get tracking working for other things like Twitter tweets and Facebook likes. The popular WordPress plugins for Addthis and Sharethis use Google Analytics Events for tracking social engagement rather than the newer _trackSocial method. So, for the time being, if you want to get track social engagement with Google Analytics social reports, you’ll need to add your own code. Don’t be alarmed though, it isn’t all that difficult. This step by step guide about Tracking Social Engagement with Google Analytics will get you headed in the right direction.

One thing that wasn’t clear (to me at least) was were the javascript code should go for the Twitter event binding. This is important when considering a blog index page where there are multiple tweet buttons on the page that are associated with different posts. Twitter’s code handles this quite well, so long as you put the call to twttr.events.bind and the function extractParamFromUri somewhere where they only get called once. In my case, I created a .js file for these two things, which loads in the header along with widgets.js.

Wireframe Primer

jpreardon — Sat, 16 Jul 2011 15:17:05 +0000

Wireframes are old hat to anyone who has been working on web sites and applications for more than, say, 5 minutes. However, for those that aren’t involved in web design, wireframes can be a bit of a mystery. If you’re growing tired of explaining the role of the wireframe and why nobody should worry about how boxy and devoid of color they are, perhaps you can point people to UX 101: The Wireframe. There, one will fine a succinct explanation of the wireframe, why they are valuable, and what to look for when reviewing them.

jpreardon.com » Development

Rapid Prototyping with Sinatra

Recommended Data Visualization Tools

Related Posts

Restaurant Menu UX

Effective Task Design

Related Posts

Formatting International Phone Numbers for Readability

Related Posts

Managing Complex UX Deliverables

Advice for Small UX Teams

Related Posts

Metaphors for Explaining Pair Design

Related Posts

HOWTO: Tracking Social Engagement in Google Analytics

Related Posts

Wireframe Primer

Related Posts