Category Archives: Usability

NBCNews.com Changes Again

It looks like I wasn’t the only one who thought that nbcnews.com’s last redesign was a disaster. Less than six months after radically redesigning their site, nbcnews.com has changed yet again, but this time for the better.

Gone is the layout designed only for mobile devices, with huge images everywhere and stories seemingly randomly scattered about. The latest design is closer to their old layout where stories are categorized, with a better use of space. They also left out a feature of the design prior to the last layout where a block of code above the header was hidden, forcing you to scroll up to see it after the page loaded. Anyone else using that pattern? I don’t think so.

So far, out of nbcnews.com’s last three layout changes, this is the best. We’ll see what they do next. Latest layout:

NBC_News_-_Breaking_News_&_Top_Stories_-_Latest_World,_US_&_Local_News_-_2014-09-11_09.38.17

Nbcnews.com Creates the World’s Least Usable (and possibly the ugliest) News Website

Nbcnews.com (formerly msnbc.com) has a history of terrible design choices. One of the worst, which I wrote about back in 2010, involved some ridiculous header that remained invisible when the site loaded unless you chose to scroll the page up. While I had no doubt that they would continue their tradition of making bad design choices, I was shocked to see their newest debacle.

Unfortunately I don’t have any images of the old layout to show you, but here’s a quick capture of their new layout as compared to the old:

Breaking_News_&_Top_Stories_-_World_News,_US_&_Local_NBC_News_-_2014-02-05_12.15 Breaking_News_&_Top_Stories_-_World_News,_US_&_Local_NBC_News_-_2014-02-06_13.24

Seems like whoever is in charge over there is really excited about mobile devices since it’s painfully obvious that the site has been designed to target smaller screens. In fact, it appears as if Nbcnews.com has totally forsaken desktops. Now, they have some Frankenstein hybrid of their old site mashed up with Pinterest. Hope you like images with your news because the site is loaded with them. Loads and loads of large images (which we all know mobile devices love to load quickly because they’re lightweight and don’t eat up data charges). And good luck trying to find anything easily. Categories seem to be randomly ordered, and the search page looks like a typical 404 page not found page, except that it’s not — it’s really their search, just optimized for mobile devices (hooray!).

I’d be curious to know if Nbcnews did any research or used focus groups to hone their new site, or whether this was all created without feedback. Don’t get me wrong though, I’m all for a decent mobile-friendly website, but don’t ignore desktop users in the process of building one.

The Flick Scroller

Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.

I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.

I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.

Demos

A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.

Quick Tip – Firefox’s Responsive Design View

Several months ago I transitioned from using Firefox as my primary browser to Chrome. I wasn’t sure if I’d be able to make the switch, or if there was any point in changing, but I did. Among the reasons for my switch was the fact that Firefox has always been, and continues to be, an enormous memory hog. No matter how many time Mozilla announces that the latest version of Firefox is less memory hungry it doesn’t seem to matter on any PC I use. Firefox routinely gobbles up anywhere from half a gig to a gig and half of memory. The nail in the coffin was when Google killed off support for their toolbar (which I used all the time) so it was then that I decided I’d have a go at using Chrome full time.

My biggest requirement was that I needed a tool similar to the excellent Firebug add-in to do development work. Being that Chrome has a developer console built-in without the need for an extension was a big plus and it was quite easy to make the jump after that. Plus, Chrome is very fast at everything it does.

My two biggest gripes with Chrome are a) no print icon (still!) and b) no basic way to get a list of the sites I most recently visited. For example, on Firefox you can click the down arrow at the end of the address bar and see a quick list of recently and frequently visited sites. On Chrome you have to either open a new tab or start typing to do this.

However, there is a new feature in Firefox that I like and hope to see in all other browsers soon: Responsive Design View. Responsive Design View (RDF) has been in Firefox since version 15 arrived a few months ago. Basically what RDF allows you to do is easily re-size your browser to see how a site looks at different sizes without having to re-size the window and messing up all your other open tabs. In Mozilla’s words, “With the Responsive Design View, you can work on your designs without constantly pulling out your mobile phone to see how it looks. And, you can try out your designs without shrinking your browser’s tools, toolbars and other tabs.” This is a great little tool for developers and designers. My only suggestion is that they allow you to edit the profiles they’ve included, instead of just listing the resolutions. For example, instead of just “960×720”, I’d like to name that “iPod Touch”. That and the ability to save specific resolutions instead of having to drag the side of the window every time I need a resolution that isn’t listed in the drop down menu. Now I have yet to do much in the way of responsive design, however I can see this being a very valuable tool to have when the time comes. Worth checking out.

Free Tools to Make a Web Developer’s (and Designer’s) Life Easier

Who doesn’t love free stuff? Most of the time the saying “you get what you pay for” applies, but every once in awhile sometimes you do get a free lunch. Whether it’s testing jQuery code, checking to see how a site looks in different browsers, or coming up with a color scheme, the following free tools have been extremely valuable in helping me get my work done.

VirtualBox

Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really.  In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.

So why is this great? Continue reading