vkgyan

Creating a Timeless User Experience

2009-11-12T05:56:00.000-08:00

If we could tear into the fabric of time and look a decade into the future, what kind of experience might we find? It’s easy to imagine the technology would be much more advanced. Something out of a film like Minority Report with holographic touchscreens, or so advanced of an A.I. (artificial intelligence) that the application anticipates solutions without the user having to do much else.

In reality the kinds of products, websites, and applications that survive and continue to be effective are those that that focus on the user experience. The digital world evolves continually, but we need to manage this by making sure we don’t leave the people who use our applications and websites in the dust. In this article we will explore creating a timeless user experience.

Want vs. Need

I can’t count how many times a client has asked for something in the craziest timeline, smallest budget and at the best quality humanly possible. Clients today want it bigger, (or for a device… smaller), faster, innovative, sexy. They look at the competition and say "I want that." Everyone wants to tap into social media. They want an iPhone application, or to do something in Augmented Reality because they just read an article about it. At no point do throwing any of these items into the mix add up to better experiences.

Even something as simple as a redesign of a website "for a refresh" does not get you a good experience. Building experiences with buzzwords and features are a drug, and if Web and UX professionals don’t have a client intervention soon, more useless websites and products are going to crowd out what few good experiences there are. All projects should begin with this question: Do you know what the problem is, and does this (product, website, application) solve that problem for the people that will use it?

Attention! It’s a Limited Resource

Keeping our attention is harder due to the sheer amount of information, products, and applications being put in front of us daily. Choice is taken for granted, where quality is something that is rare to find. Remember when just having an iPhone app was enough to get attention? Now the Apple Store touts thousands of applications.

The applications for the iPhone that are now finding success are those that have focused on the experience and the people using them. It proves that first out of the gates without considering the user experience could mean first to fail or fade away into obscurity.

As time moves on the technology becomes enough for users and saturated with competitive products. The experience becomes the differentiator and continues to add value. Image source: The life cycle of a technology by Nielsen Norman Group

So, what qualities make a great experience? I think a carousel ride can show us.

The Carousel Experience

A recent trip to the local mall with my son sparked my idea on "timeless user experience". He was very excited to put his dollar in and get a token for the ride and he really enjoyed it. I started thinking about carousels and how long they have been around. The experience that kids then had, are the same as kids today. This old piece of technology, in comparison to other options for entertainment available today, is very limited in functionality and features. Yet it still delivers a great experience.

Carousels (term for "horse ballet") have been around in the form we know them since the mid-16th century. Image source: Carousel on Wikipedia

How we can we apply this "Carousel Experience" to creating a product or web application? For one, it is an experience that places the enjoyment and desire for that experience first. The technology or delivery of the experience is not as important as the experience in itself. There is no question how it works (familiar). Finally it is focused and meets the user’s (in this case, children’s) needs. It doesn’t make candy or have embedded touchscreens. It simply does the same thing it’s done for hundreds of years.

Anatomy of a Timeless Experience

Experiences that are timeless stand apart from the rest. Most companies can create a solid Web application or product and make them usuable. There are few that can move past that. You can breakdown the qualities of a timeless experience into three main areas:

Desirable

Simply making something usable is not enough. Something that does it a little better always comes along. Necessity is also somewhat based on context (I could argue anything beyond food, water, and shelter is an extra). An experience that creates the desire to use it because it’s fun, simple, or creates an emotional connection is priceless. If the basic product or service experience is not desirable you can’t add much to can change that.

Familiar

Striking a balance between the "familiar vs. fresh" as Jakob Nielsen puts it is important. As a Web or UX professional working closely your products, websites, or applications causes you to focus on the most detailed elements, which is not how the user approaches it. The typical person interfaces with your website or product much much less and is looking to accomplish a task. They search for those familiar features to get it done and get on with their daily life.

Focused

Creating a goal-driven statement of what a product or application does results in better product experiences. It meets expectations because it is focused on solving the problem it was created to address. There is power in doing one thing and it doing it very well. So many products and services try to do everything. Compare the Twitter experience to Facebook and it’s easy to see the difference. Twitter is clear on what it does, Facebook is cluttered and can’t seem to make up its mind on what it wants to be.

Two Timeless Tales

Sometimes a few brilliant products are able to squeeze out and prove that a timeless UX works best. The Flip and Mint.com are examples of successful experience-driven products.

Flip: Limited features. Unlimited experiences.

The Background: In comparison to other big name video cameras from companies like Sony, the feature set for the Flip seems to fall flat. To name just a few features: A tiny screen (1.5 inches), no tapes or discs, no menus or settings. Even the zoom is nearly worthless.

The Experience: The Flip beats the competition where it counts: It simply shoots videos. There are no mistakes to be made, the interface is a record on or off button. It’s compact and easy to take everywhere. Plug it in and download to your computer (USB). There’s even software ready to go for easy editing or sharing on YouTube.

How it’s timeless: Doing more sometimes means less to people using your product if it doesn’t meet their needs. By creating a very focused set of features that it does very well, and making it a very easy and fun experience the Flip has taken 20% of the market share. I like to think that a timeless UX took 20% of the market share.

Mint: More money. Less problems.

The Background: Mint came into the financial software market as an unknown startup, which is a very large hurdle when you are asking people to trust you with the security of not just their financial information, but every bank and credit card password. More established players like Intuit and most banks and credit card companies have been creating financial software and online experiences for years.

The Experience: Mint has been able to find success by redefining money management. Through a few clicks, Mint brings together all accounts into one place giving people a encompassing view of their finances. There’s a slick interface to manage budgets, and important updates are delivered to email or devices.

How it’s timeless: Taking an innovative approach and simplifying the experience of managing money and making it enjoyable has paid off for Mint, literally. As Peter Merholz from Adaptive Path put it: "Mint.com has 35 employees. Sold for $170MM. That’s $5MM per. That’s the value of UX."

Keep Fighting the Good (Experience) Fight

Web and UX professionals battle everyday for the qualities that make up the timeless experience. Unfortunately concerns like: being first to market, shareholder expectations (profits), trying to one up the competition, and many other factors result in complex, and run-of-the-mill experiences.

Websites and applications with a timeless experience are just that, timeless. They will continue to win the hearts and minds of the people who use them.

How do you create timeless user experiences? What are some important things to keep in mind when designing an effective user experience? Join the discussion in the comments.

About the Author

Francisco Inchauste is a web and interaction designer whose work you can find over at his online presence – Finch. By day, he works as a UX specialist for Universal Mind. He’s written for various design weblogs such as Smashing Magazine. Connect with him on Twitter.

Top 20 Essential Firefox Add-ons for Web Designers

2009-11-12T05:52:00.000-08:00

Top 20 Essential Firefox Add-ons for Web Designers:
Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive.
Let’s look at our top 20 essential Firefox extensions geared for people who build websites.

1. Web Developer

The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

2. SeoQuake

SeoQuake will help you in optimizing your web pages for search engines. It gives you an SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identify issues pertaining to search engine indexing in your web pages.

3. Window Resizer 1.0

Window Resizer comes in handy for testing different screen sizes and monitor resolutions. It quickly and accurately resizes Firefox’s viewport so that you can test to see how your design looks in standard resolution sizes.

4. FireShot

FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

5. Firebug

Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

6. Greasemonkey

The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.

7. ColorZilla

ColorZilla is an incredibly simple extension for Firefox. If you’ve ever wanted to determine what colors are used on a web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.

8. FireFTP

FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.

9. IE Tab

This great add-on for web developers allows you to switch back and forth from IE and Firefox layout engines with a click of a button. This permits you to test and compare how each browser renders your web pages without having to leave Firefox or install IE(vil).

10. Palette Grabber

This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you’re currently viewing.

11. Font Finder 0.5c

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

12. Total Validator

This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

13. Platypus

Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.

14. Dummy Lipsum

An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.

15. Page Diff

Page Diff is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.

16. Aardvark

Aardvark, aimed at front-end web developers, let’s you select web page elements and gives you several options for them, such as removing them from the web page (great for screen shots) or modifying their colors (helpful when printing web pages).

17. Codetch

Codetch is a WYSIWYG editor add-on that allows you to edit web pages directly in Firefox. The interface is modeled after Dreamweaver (but thankfully, the price is not).

18. Measure It

Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It’s great for figuring out dimensions of things on a web page.

19. YSlow

YSlow is a web browser utility that benchmarks a web page’s front-end design performance. It will assist you in optimizing your web designs for fast response times by identifying performance issues.

20. CSSViewer

CSSViewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.

What Firefox Addons do you use?

Why do you use them? Join us in the comments!
*Co-authored by Jacob Gube

The Best Free Fonts of 2009

2009-11-12T05:42:00.000-08:00

The Best Free Fonts of 2009:
As this year comes to a close, we can look back and see that 2009 was a big year for typography. We saw more web designs with a focus on type, and there were some pretty amazing fonts released. Here are some of the best free fonts from this past year. A few of the fonts below were released at the end of 2008, but since they didn’t see much action until this year, I included them in the list.

Chunk

Chunk is an ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines. Used mainly for display, the fat block lettering is unreserved yet refined for contemporary use.

Calluna

Calluna supports a very wide range in languages and is a very complete OpenType typeface. Each font counts 723 glyphs.

Vegur

League Gothic

League Gothic is a revival of an old classic, and one of our favorite typefaces, Alternate Gothic No.1. It was originally designed by Morris Fuller Benton for the American Type Founders Company (ATF) in 1903. The company went bankrupt in 1993. And since the original typeface was created before 1923, the typeface is in the public domain.

Sansation

Quicksand

Mentone

Mentone is a new general purpose typeface, an attempt at extending the line of the great sans-serifs of the previous century, Frutiger – Stone Sans – Myriad. The font has round corners and subtle chamfers, which are all but invisible at text sizes, but add an upbeat, irreverent expression at display sizes. The typeface is named after the beautiful bayside suburb of Melbourne, Australia, where the designer lives.

Serif Beta

Goudy Bookletter 1911

Based on Frederic Goudy’s Kennerley Oldstyle.

Titilium

Junction

Junction is where the best qualities of serif and sans serif typefaces come together. It has the hand drawn and human qualities of a serif, and still retains the clarity and efficiencies of a sans serif typeface. It combines the best of both worlds.

Sovba

Sovba is an amiable rounded sans-serif inspired by handwriting. Sovba is useful for a look that is uniquely casual, fresh and smooth. Sovba simplifies character forms down to their basic characteristics, and has a strong, silky smooth forward motion.

How to create a simple web based chat application?

2009-08-21T03:30:00.000-07:00

In this tutorial you will be able to creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website. http://bit.ly/hxESI

Get data from a URL using cURL PHP

2009-08-21T03:19:00.000-07:00

There are times when you need to fetch data from certain URL. This URL can give you RSS feeds or it can be a JSON data. But while writing a script you may often face challenge to fetch the contents from the URL. Some programmers use file_get_contents() function of PHP to get the data from the URL, but by default the http is not supported in the argument of this function. So to get the contents from a URL you have to make a curl request. The procedure to do the same is as follows.

$url='http://twitter.com/statuses/user_timeline/16387631.json'; //rss link for the twitter timeline print_r(get_data($url));

//dumps the content, you can manipulate as you wish to

/* gets the data from a URL */

function get_data($url)

{

$ch = curl_init();

$timeout = 5;

curl_setopt($ch,CURLOPT_URL,$url);

curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);

curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);

$data = curl_exec($ch);

curl_close($ch);

return $data;

}

This is really important function and can be used in multiple ways. In the above example I am fetching my tweets in the form of JSON. You do not need any authentication to do that and hence you can get the output. But some URLs which need to be authenticated may not return anything but an error. So you have to take care of that. This function is pretty basic example of CURL request.

You can enhance this function and have fun.

40 Free And Useful GUI Icon Sets For Web Designers

2009-07-28T23:21:00.001-07:00

40 Free And Useful GUI Icon Sets For Web Designers have a look

Add-ons for Google Chrome

2009-07-28T12:31:00.001-07:00

Increase the functionality of Google Chrome through these bookmarklets.