Google Waves Goodbye

Posted August 5th, 2010 in Development, Odds & Ends, UI/UX by Leonardo

A little over a year after it was launched, Google announced that they’re pulling the plug on their Wave product – the emailing, instant messaging, and picture-sharing progeny that was suppose to change the landscape of collaborative, online content. Google Wave allowed users to communicate in real-time and share documents, videos, and re-make epic Pulp Fiction scenes. If you haven’t heard of Google Wave you’re not alone. That’s one reason Google Senior Vice President of Operations, Urs Hölzle, cites for Wave’s fate:

Wave has not seen the user adoption we would have liked. [Google]

Though the product itself will likely be forgotten by the time Apple launches its next iPhone model, Google Wave has truly paved the way for many of tomorrow’s web apps. The principles we’ve seen with Wave will be resurfaced and the ability to drag-and-drop files from your desktop, playback the history of document changes and show real-time, character-by-character typing is just the beginning.

And don’t worry: Google isn’t sitting on their hands with rolling out functionality that proved useful from Wave. Better spell-check and drag-and-drop have already been ported into Gmail, while improvements to real-time collaboration in Google Docs seem to be happening on a very consistent basis.






CSS3 Design Contest Results

Posted July 12th, 2010 in Art & Design, UI/UX by Leonardo

Last month, Smashing Magazine announced a CSS Design Contest encouraging designers to put their creative powers to work and publish experimental CSS3 projects. For judging, Smashing took into consideration the originality of the technique and its uniqueness. To the judges, “The idea mattered more than the execution.”

The winning entry was a colorful pie chart (swappable to pyramid format via slider) illustrating the global usage share of web browsers over the past 6 quarters. My only issue had to do with the UI: the catfish navigation — which looked almost too integrated with the design — failed to resemble any kind of traditional CTA. Not a bad thing for more savvy users, but most may not realize these are buttons that control the morphing effect of on the graph.

Take a look at some of the other winners, all of which are pleasing indications of the great things to come with the impending adoption of CSS3. Keep in mind that the following pieces of awesomeness are very experimental and may not work or look the same across different browsers.

First place: CSS3 Charts [preview]

Second place: CSS3 Rubik’s Cube [preview]

Third place: CSS3D [preview]

Fourth place: CSS3 Monster Blob [preview]

Fifth place: A Rift In Time [preview]

Click here to see even more »






Check it out! NYTimes.com is still awesome.

Posted June 15th, 2010 in Art & Design, UI/UX by Leonardo

The New York Times continues to impress with their ability to integrate elegant and useful tools into their ever-evolving index page. Tonight, they displayed a Twitter ticker below the featured story showing Reader’s Reactions to President Obama’s speech on the Gulf oil spill.

I find this to be a wonderful example of a traditional media company breaking away from traditional UI practices to experiment with the user behavior of their audience. I can only guess that most users visiting the index while this was rolling felt as though they had more information, from an extended source of contributors in real time. It’s a pretty amazing way to incorporate the opinions of captain random alongside the musings of rock-star, online journalists.

The times they are a-changin’.

 






Zoom zoom!

Posted May 29th, 2010 in Art & Design, UI/UX by Leonardo

More awesome jQuery plug-ins just keep on coming. This time I happen to come across a very handy plug-in called Cloud Zoom that rivals commercial image zoom products already standard for many tier 1 online retailers. It’s lean, mean and is impressively browser compatible.

Other useful features include: adding colored tints over the small image on hover (shown above), placing zoom position inside the smaller image (useful if you want to keep the zoom area from obscuring other content) and the ability to apply a subtle, fuzzy blur over the original while zooming.

Peep and download it here.

SliderNav: iPhone Style Contact Lists Using JQuery and CSS

Posted May 25th, 2010 in UI/UX by Leonardo

Need a clever way to organize and present all your popular blog tags? Follow Techi.com‘s lead and use this useful and elegantly designed Slider Navigation. You can find their implementation of SliderNav towards the bottom of their right rail.

SliderNav is a JQuery plugin that allows you to add dynamic, sliding content using a vertical navigation bar. It’s made mainly for alphabetical listings but can be used with anything, though longer words can look a bit awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list. The example I’m linking to below also uses the overflow: auto; property for the actual content so you can use your mouse wheel to scroll through the content as well. (Clever)

The CSS and jQuery is surprisingly easy to understand and implement so don’t be shy and give it a whirl. Click here to view the demo and download the code.

Good UX = Matching the Mental Model to the Conceptual Model

Posted April 13th, 2010 in Art & Design, UI/UX by Leonardo

This informative piece by Susan Weinschenk of UX Magazine reminded me of the first (and best) thing I learned about designing intuitive user experiences: the principle of designing around the mental model. That is, design your product based on how the user’s thought process works for any given task within said product. That might sound a bit complicated, but let’s break it down with a tangible example used in the aforementioned article.

Imagine that you’ve never seen an iPad, but I’ve just handed one to you and told you that you can read books on it. Before you turn on the iPad, before you use it, you have a model in your head of what reading a book on the iPad will be like. You have assumptions about what the book will look like on the screen, what things you will be able to do, and how you will do them—things like turning a page, or using a bookmark. You have a “mental model” of reading a book on the iPad, even if you’ve never done it before.

Based on this, it’s pretty obvious to design your interface based on what the audience’s (or at least the audience that is going to buy your product) mental mode might be. I like the use of Apple’s iPad as an example to illustrate this point, since they’re generally light years ahead of others when it comes to designing intuitive user experiences. Here’s some more of my favorite, well designed products that put user experience at the forefront:

Acura's dashboard and navigation UI

Yahoo! Fantasy Sports web UI

Citizen watches

Google Analytics

Android mobile platform

Vimeo video uploader web UI

Mail Chimp web UI

Xbox Live UI

Design heuristics and folk wisdom

Posted March 30th, 2010 in Art & Design, UI/UX by Leonardo

I’ve accepted the notion that one of the most influential sources behind the world’s heuristics stems from folk wisdom. That is, direction from “They”, as in “Feed a cold, starve a fever” or “Cure your hangover with a bowl of Menudo” where the true source is never really known or explained. And while folk wisdom is prevalent in my traditional, Mexican-Catholic home (which is indeed it’s own, extraordinary brand of Catholic), I’ve always leaned towards trusting more reliable sources such as 1) evidence from testing/research and 2) experience from specialists.

Considering these sources, to what degree, if any, do we trust in folk wisdom for our designs? This great read from the authorities at UX Magazine offers some insight into the origin of heuristics and suggests that we are indeed relying on a lot of unknowns when it comes to UI/UX design.

The one example given for folk wisdom as a source for design heuristics in the aforementioned article sounded decent, but I’m not buying it. That may be because I’ve always worked with folks who push the notion of ‘acting on data, not intuition‘ and verifying that data before doing things like making changes to process flows or adding UI elements to a page. Here’s my advice to you, designer: No matter how talented you are, or what kind of formal training you’ve had make it a habit to be data driven in your design decisions. Get your hands around A/B testing, eye tracking and conducting focus groups and everything will be okay.

Newsletters 101

Posted March 18th, 2010 in Art & Design, UI/UX by Leonardo

A good newsletter will inform, stir interest and sell. As simple as this concept may seem, many organizations seem to struggle with user engagement and I think it has to do with how easy it is to lose site of the impact a good set aesthetics and proper timing can have.

With timing, let’s consider that most organizations send out their communications on a set schedule. To counter this practice, I often argue that the age old philosophy of saying something when you’ve got something to say should apply to email blasts. Users don’t mind getting messages when there’s something intriguing and timely to look at, but they do care when they get a predictable message that doesn’t offer them anything useful — even worse is when the message has too much, bottled up information seemingly forced into the message since they last heard from you.

That’s not to say we shouldn’t take advantage of calendar events, like holidays and birthdays when sending things out. Piggy backing on special events to make a stronger point or improve engagement on call to actions is a no-brainer. Try to send emails that are interesting, relevant and have timely information while getting the the point across without too many words.

When thinking about the “design” of your newsletter, here are some fundamental principles to keep in mind.

1. Match your brand – Your newsletter design should not be a complete departure from the source website. It should also retain consistent branding so that users are familiar with what they’re looking at. If possible, reference the same CSS file.

2. Make a good first impression – Grab the readers attention with a slick, well-designed header and strong copy to match. If you catch the user off guard, with useful information they’re more likely to take that ever important first scroll down the page.

3. Be consistent – Stick to a strong, well laid out template and keep information in the same location from blast to blast. Open with big news, and place fun, interactive buckets towards the bottom.

4. Keep it clean – Do your best to use few of type faces and keep the number of bordered elements (boxes) to a minimum. Also try to use fewer background images for header backgrounds and use large, readable fonts for said headers. Minimalism may not be your cup of tea, but cutting out unnecessary clip art helps with user engagement.

5. Create good separation – Obvious stuff here: Contrast the type face (bold, large for section headers), contrast with over sizing important visible elements, and contrast buckets (layout) with extra wide outset margins to create lots of white space. Stacked layouts, rather than a columned approach is also a good idea .

Beer good.

Posted January 25th, 2010 in Art & Design, UI/UX by Leonardo

One thing I love more than a good beer is a well designed beer website. Yeah, I said it — a website can be better than a beer.

Case in point: Jennings Brewery’s website out of the UK. Slick, transparent PNGs over a massive JPG depicting a refreshing, picturesque mountain setting. Makes me thirsty just looking at it.

Here’s some more CSS powered beer goodness:
beerenberg.com.au
(Austrailia)
flyingdogales.com (Denver, USA)
johnboston.com.au (Australia)
odellbrewing.com (Ft. Collins, USA)

It’s safe to assume that Aussies and Coloradans have a large concentration of beer loving front end designers. Cheers to them.

YouTube Launches Limited HTML5 Support

Posted January 24th, 2010 in Development, UI/UX by Leonardo

2009 showed us the potential and promise of HTML5 and it seems 2010 has already started delivering in a big way — starting wth YouTube. Last week, YouTube announced that users will be able to watch some of the site’s videos without a Flash plugin using the video and audio playback support included with HTML5.

Want to check it out for yourself? You can do so via YouTube’s TestTube site. To get the new player to work be sure to use Chrome, Safari, or ChromeFrame on IE. I should note that this functionality has not been rolled out all of YouTube’s videos. It seems you can only watch videos that aren’t being monetized and haven’t been annotated. Nonetheless, I’m excited to see a “mainstream” media outlet take such a big step towards moving HTML5 into the lime light.

After testing it myself I did experience one bug using Chrome for the Mac (clicking full screen crashed my browser) but the only way I could truly tell it wasn’t a Flash player was by right-clicking and not getting the “about Flash…” dialogue.

All of this got me wondering: Is Adobe freaking out by the idea of media sites no longer relying on the Flash plugin to deliver content? Are they already planning for any kind of revenue loss from multimedia developers shifting focus to doing what they do using HTML5? Probably not, but 2010 should offer many insights into what kind of impact HTML5 will have on content delivery in the long run.

Page 1 of 212