Software can be like wine.  Let’s say, a bottle of red wine. How about, a Cabernet Sauvignon, aged 11 years or so, that you forgot about in your wine cellar.  You’ve tried this one before, when it was still young, and it didn’t do much for you.  Now you give it another shot…

You immediately notice hints of oak, vanilla, and traces of blackberries.  It’s a little much to take in, so you let it breathe.  You then notice rich tannins, and more complex aromas that you can’t place.  You look at the bottle, and read label: “Scalable Vector Graphics ~ 1999″.

The Scalable Vector Graphics (SVG) format is nothing new.  Created around 1999, this XML based standard needed to mature a little to really show it’s capabilities.  I’m sure those of you that have been around these interwebs a time or two have come across SVG in the past and were probably unimpressed.  With the web becoming a legitimate platform, and as the underlying technologies (HTML, CSS, and Javascript) and the browser have finally started to mature, the capabilities of SVG can now be realized.  We all know from the mass amount of shiny icons and “web 2.0″ sites out there that vector graphics are really popular these days.  But with SVG, the ability to use and manipulate vector graphics as objects is taking the web past 3.0, all the way to 4.0!!

Here are some examples of pretty compelling uses of the SVG format:

The Raphaël Javascript + SVG Library
http://raphaeljs.com/analytics.html
http://raphaeljs.com/chart.html
http://raphaeljs.com/ball.html

W3C Example w/ Code:
http://www.w3schools.com/svg/tryit.asp?filename=animatemotion_2&type=svg

One of the more famous SVG examples, the cubic spline tiger:
http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg

“What about HTML5?” you might ask.  ”What about the really cool stuff that the Canvas tag can do?”  Well, there is some overlap, but SVG is much more suited to manipulating objects than the Canvas.   The way to view it is that (out of the box) SVG deals with graphical objects (vector graphics, raster graphics, text) and remembers what is rendered, making it easy to re-render.  The HTML5 Canvas is a lower level protocol that is basically a “drawable” region, which makes it very flexible.  One is not better than the other, they are just different mechanisms.  If SVG is a bottle of fine wine, the Canvas is a Cuban cigar.

What you clicked was not what you expected.  It was the new “improved” banner ad; complete with a new twist – the classic bait and switch.  These colorful page headers usually have an embedded video, and usually expand when the user hovers.  The result is that the main navigation and content is, in most cases, either completely covered or pushed down.  And for those quick-clickers like myself, before you know it, you’ve been thrown into some company’s ad revenue stream… without a paddle.

So is this clever a clever mix of advertising and technology, or simply the new and improved popup: impervious to the “browser block”, and capable of intercepting the clicks of unsuspecting users??

As Jeff mentioned on Friday, most of us are here at the SXSW Interactive Conference.  If you’ve never been, it’s definitely worth a look.  The fact that it is held in our hometown of Austin, Texas every year makes it a no-brainer for us, but I personally find a lot of great takeaways… and I’m not talking about free swag.

One of my favorite sessions so far was “The Right Way to Wireframe”, a 2 part series featuring Tod Zaki Warfel, Russ Unger, Fred Beecher, and Will Evans.  This group of designers and design agencies challenged the big names in UX and UI Design to “show your work”, and subsequently put together a design challenge for themselves.  I won’t go too far into detail, because these AWESOME time-lapsed videos will tell the story better than I can:
The Right Way to Wireframe video series

Also, in the spirit of posting trends, Jeff, Kate, and I have been documenting all of the trends we see popping up here at SXSW.  I started compiling these yesterday and thought they might make an interesting post.
Disclaimer: We don’t necessarily think all of these are good trends, but these are our observations. Enjoy…

It seems Javascript Toolkits have infiltrated every nook and cranny of the internet. And it seems like everybody and their nephew has built one.

So which toolkit is the right one for you?  Well, most of the big names have the same subset of features, such as “drag and drop”, animation capabilities, and XML HTTPRequest functionality.  Maybe you need something a little more, like HTML Generation or the out-of-the-box charting functionality of Dojo.  Or, your deciding factor may be licensing.  You may love the features of GWT, but your company doesn’t gel with the Apache License.

I put together the illustration below from the data available on this wiki article to compare all the big guns in the Javascript Toolkit game.  I know I left off some that you may be using, and didn’t list all of the features, but this should be a good snapshot to get you started.  Please let us know your experience with these or any other Javascript Toolkits.

Another thing we would love to know is will you be using one of these toolkits when HTML5 is “fully supported” in all the major browsers… whenever that may be?

Toolkit sites:
Scriptaculous: http://script.aculo.us/
Dojo: http://dojotoolkit.org/
GWT: http://code.google.com/webtoolkit/
jQuery: http://jquery.com/
MooTools: http://mootools.net/
midori: http://www.midorijs.com/

Well, at least UI design is slowly catching up.  The demand for a user interface that delivers a rewarding experience and is aesthetically pleasing has never been higher.  Fortunately, the tools and methods for building a well rounded UI are now very numerous.

Wireframes and Mockups have become a standard in the design process, and tools keep popping up specifically for wireframing.  I recently tried out Cacoo, a new web-based wireframing tool.  I have been using different wireframing/mockup tools for the last few years, like Adobe Fireworks and Balsamiq Mockups, so I had an idea of what I was looking for when using Cacoo.  Here are my main likes and dislikes (besides their pastel based theme… just kidding):

Like: Extensive Library - Cacoo has pretty much every general type of UI component you would want to include and then some in it’s “Stencil” library.  Everything from wireframe components (buttons, text inputs, etc…), to UML diagram assets and flow charts, to user icons (good for story boards) . It also has grouping capabilities like in Balsamiq or Fireworks, which essentially allows you to create your own components from 2 or more simple components.  And, like Balsamiq, it features a “Freehand Wireframe” Stencil, which gives your wireframe an unfinished sketch look… useful for keeping visual design out of the conversation until appropriate.

Like: Web based, Collaborative - It’s nice to be able to access your wireframe projects anywhere, and since Cacoo is built in Flash, it’s highly interactive and doesn’t suffer from browser related inconsistencies (does require Flash Player 10).  They also added a feature that I would have never thought of: real time collaboration.  An entire team can discuss and edit the same wireframe in real time.  I haven’t fully tested this feature out, but it looks very promising.

Dislike: Limited Export - As far as I can tell, Cacoo only exports to a flat PNG format (does not have any layer information), so you essentially just get a screenshot of your wireframe.  Comparatively, the latest version of Balsamiq Mockups has the ability to export to XML as well as PNG.

Overall, Cacoo falls in between Fireworks and Balsamiq Mockups in terms of features.  It has a far better library of UI components than Balsamiq, but not quite as extensive set of features as Fireworks, especially the lack of a real free hand draw tool.  It has nowhere near the learning curve of Fireworks, which is a huge plus and I would even go as far as to say that it is as easy to use as Balsamiq Mockups.  The one big thing that Balsamiq has that Cacoo doesn’t is an extensive online community of users and contributers.  There are a ton of free add-ons that can be downloaded at http://mockupstogo.net/.  Also Rich Internet Application gurus , the Midnight Coders have provided a conversion service that creates a full blown Flex application from your Balsamiq mockup.  Pretty sweet idea!

So all things considered, Cacoo is a very solid wireframing tool, and if some of the unique features – like the real time collaboration – prove as useful as advertised, I may be making the switch in the near future.  In the mean time, I’m still holding out for my damn jetpack to show up in the mail!!

Here at UI Trends, we normally cover trends in Web UI’s and occasionally we’ll bring up desktop applications.  But we wouldn’t be doing our jobs if we didn’t step outside of the box every once in a while.

With that in mind, I couldn’t help but write about something that has been bugging me for years.  I know you’ve seen it too and been annoyed.  You’re at the grocery store, and you’re trying to “self checkout”.  You swipe your bank card, then low and behold, you’re asked for your PIN.  You don’t want to enter a PIN!!  You’re trying to earn points on your card.  You’ve been saving and saving and saving up these elusive points for YEARS now; only 50,000 more to go and you can finally get that awesome “foot spa”.  So why in the world would you want to use your card as a debit card and forgo these precious points?

But there is a way!  You may not know it, but there’s an entire world of opportunities, hidden just one click away.  It’s a a whole new menu, that leads to a magical land of free magazine subscriptions, $25 gift cards, and George Foreman grills.  All you have to do is hit CANCEL… what, you didn’t know that??

It’s sad to say, but no one really expects much ease of use from these Self Checkout Systems.  The real problem is that these UI’s are effectively hiding functionality that the merchant would rather not pay for (credit card transactions are usually more expensive to process than a debit card transaction).  And even worse, they’re doing it very inconsistently.  Some have started actually including a  ”Credit” button, but it’s either small and indistinguishable from the number keys on the PIN screen, or you still have to press one more buttons to even see it.  Why not just making it more interesting and have the button randomly jump around the screen?

submission from guest author John Talton

The page curl has been a Photoshop trick for years now.  As Kate wrote previously, the “page curl” or “earmark” is a UI style that can function as a metaphor, implying “turn the page for more”.

Its expensive rendering and lack of dynamic-ability when applying it via a generic template has limited its wide spread use over the years.  But as the web increases its bandwidth capabilities and the need for more unique and flashy graphics continues to rise, this cheep-trick is start showing up more and more.  In most cases, one of the downfalls of the page curl is that the user does not know where it will take them until they click it, since most implementations don’t contain a label.

And while many websites have used it in the past, its notable that Google is now using it in its Chrome browser, Slashdot.org has adopted it for a sponsor link on their poll, and it’s starting to show up in applications as well, such as Google Maps for the iPhone.

As I was getting ready for the trip a few weeks ago, I wanted to setup a blog so I could keep everyone up-to-date of my travels and whereabouts. I was going to go with either a new WordPress setup, or through Tumblr, but Russ suggested I check out a new popular micro-blog Posterous. I checked it out and was pretty pleased with its ease of use, but a little dissapointed with the features it doesn’t have. Here are some of my main likes and dislikes:

Like: Easy to Post – Posterous’ main feature is that it’s extremtly easy to submit new posts. All you really have to do is send an email or an SMS message, with or without media attachments, and Posterous will add a new post to your page.

Like: “Zero Setup” – You don’t even have to sign up for an account. You email post@posterous.com and they setup your account for you.

Like: Social Media Sync - You can easily setup Posterous to update your social media sites, such as Facebook and Twitter. You can even select which sites to update every time you send an update by changing the email address you post to.

Like: Image formatting - Posterous takes all your images and puts them together in a nice format, consisting of a main image view (one image at a time) and a collection of thumbnails for every image you added to the post.

Like: Overall Clean UI – The Posterous UI is easy to navigate, and your blogs are easily customizable.

Dislike: Lack of Post Formatting – Part of the problem is that users are most likely posting through email or text, so not having many options for customization through email or SMS is understandable. The real problem is that the Posterous online posting/editing is not very robust, which brings me to my next dislike…

Dislike: Online Posting/Editing – Sadly, Posterous is NOT WordPress, and therefore is a little bit lacking in the area of formatting. There is a rich-text editor, but you can’t actually import media. The other problem is that if you want to edit a Posterous post that you submitted through email and contained images, Posterous just inserts a single custom HTML tag to reference the all the images. Basically, you can move around the image area, but you cannot separate or annotate individual images. This part is a huge pain, but if you’re not expected WordPress, then you’ll be ok.

So overall, I really liked using Posterous for its ease of use, clean layout and ability to sync with social media sites. But Posterous definitely lacks in a few areas that may or may not be a deal breaker for your needs. If you’re looking for ease of use, Posterous is great. If you’re looking for WordPress, well… CRIKEY!!!  Use WordPress.  And while you’re at it, throw another shrimp on the barbie.   OK, I’ll stop with all the cliche Australian slang.

submission from guest author John W. Burris

Ahhh… Internet advertising. This new medium has transformed the
practice and standards of advertising. Advertising can now be valuable
and useful for content consumers. The infamous “JK Wedding Entrance
Dance” video is an example of how advertising provided a useful
service for consumers while creating revenue for the advertiser,
Amazon.com. How? Relevance. Relevance actually adds value to the
advertisement.

However, the display of relevant ads can be deceptive. Take, for
instance, Google’s “Sponsored Link” section that preludes the search
results. The shaded background and the hardly noticeable description
to the right of the title are justified by their “relevance” to the
term being searched for. Is this a useful service to consumers, or a
dangerously deceptive advertising practice? Let’s take a serious term
such as cancer:

The first “result” is for an “Advanced Cancer Treatment” linking to
Issels.com. Here’s the problem. “The Issels Treatment is considered
ineffective against cancer by the American Cancer Society”.
(Wikipedia) That’s right. Google is hocking snake oil. Bing is guilty
of the exact same practice:

So the question is this: Is the integration of design, content and
advertising destructive? As I sit here smoking this mild and
refreshing Pesterfield cigarette, I think that the design industry
should address this. After all, I will be here for a long time since 9
out of 10 doctors agree that the Pesterfield brand has less damaging
chemicals than any other leading brand of cigarette.

One of the biggest challenges a UI Designer can face on a daily basis is balancing Information Density. The big problem is fitting the right amount of necessary information to make the UI effective without making the interface visually cumbersome.

One simple solution to the information density problem that doesn’t require removing functionality or adding complex navigation is using Functional Callouts.  Callouts (or tooltips,  captions, balloons… whatever you want to call it) aren’t a new invention by any means, but adding actionable items and rich media to a callout is a relatively new trend. And this isn’t quite the same as a Designed Tooltip, in that Functional Callouts can provide the user with added navigation and/or related items.

The main drawback is that putting actions in a callout can result in hiding valuable functionality from the user.

The most widely used example of these types of UI components has to be Google Maps:
Also, certain software frameworks like Flex and Prototip are making it easy to add advanced functionality to their respective callouts and tooltips.

References:
Google Maps: http://maps.google.com
Flex Store Example: http://www.adobe.com/devnet/flex/samples/fig_callout/
Prototips 2: http://www.nickstakenburg.com/projects/prototip2/