Only want to give you a sneak peek of the new design I’m working on for nlapse.com

The User Experience when downloading music from an online music store like iTunes or Amazon MP3 Store is important, but there is also other important part that is often forgotten. The quality of the downloaded product.
The times when you had to browse a retailer “offline” store looking for music is long over. Now is possible to buy music online at a decent quality. But the old CDs have the Album Art and other cool stuff to increase the quality of the product, resulting in a pleasant User Experience.

With downloaded music, you lose part of these related materials. Almost everybody that offer music to download online forget about it. But with a little bit of common sense the downloaded music can be also an enjoyable experience.

The first issues that bother customers of online music stores are the identifiers, tags and metadata embedded on the downloaded files. The present Standard is ID3.
In the ID3 metadata can be embedded information like: Song Title, Artist, Album, etc. These ones are the most common, but there is other metadata that make the downloaded music more enjoyable, like: Artwork and Lyrics, these two are the most forgotten.

One good example of good practice a great User Experience for downloaded music is the Albums Ghost I-V and The Slip from Nine Inch Nails. On these products, the use of metadata to increase the final User Experience is just unbeatable: including several Artworks, the lyrics and comments related to every song, also a companion PDF file with the Album Artwork to print.

Why is this important Again?

Any step to increase the final User Experience of your products is reflected in the perception of the customer, and they are certainly willing to recommend the products to their friends. Increasing, of course, the distribution and reach of such products; using the best way possible: Word of Mouth.

Almost all decent Media Player today are designed to display this metadata in a nice way, so the user can enjoy their media with a better Experience. Saving the user of typing and filling this metadata on a product they already bought is nice step on the right direction.

If you are distributing downloadable media online, try to make the Final User Experience enjoyable. Cause the customers may be more time interacting with the downloaded files than with your distribution channel/website/store.

We now understand better how our brain and memory works; but at the same time our lives have grown a lot more complicated. We have to remember more things than before: Login credentials, phone numbers, appointments, PIN numbers and a big etcetera.

User Experience can help users not to remember another thing, or not to remember the path to get to what they want. A simple example to illustrate this is, and you’ll agree: sometimes, you don’t remember the exact url of the article you are looking for, but, your remember exactly the search terms you put on google to found it. This happens very often.

Making, for example, all the info/features your have easy to find and access will save a lot of time to the user and increase the satisfaction of finding what they are looking for quickly. Resulting, in a better User Experience, on your product.

Also the user know that the information/feature they want resides on your website or application and the only thing they remember is that is easy to get to it. That will make a great feature for your users and is certainly more probably that your users recommend your product/service to their friends if they had a good User Experience.

So, let’s do something for decrease the amount of things the users have to remember on our next project. Give the user the possibility to use the stuff they already have. Implementing Facebook Connect can be a day savior for a lot of users that are scared of another sing up form.

Minimizing the things to remember on your product/service/website will make it more usable and your users will get more satisfaction using it.

Since the first Xerox GUI all User Experience has been locked to the ‘Desktop’ metaphor, is time for a change. But what can be the next metaphor?

Lately

With the advent of mobile communications, the first intents were to squish the same old metaphor into mobile devices, resulting in the unusable User Experience we have in mobile devices today. Lately are starting to appear some initiatives with better User Experience like the iPhone, but there is still a lot of room to make things better.

The desktop in the other hand is petrified in the same old metaphor with almost no signals of changes in these 30 years. The current Desktop GUIs, like Windows, Mac OS, KDE, Gnome among others are still not able to move in other direction.

The companies are starting to realize the importance of having a great User Experience for their services and products and taking steps in the right direction… but is too little to late. Is a fact that the best User Experience win; and the ones with a poor one will perish, more in these hard times when consumers will take a second (and sometimes a third) look before pull out their wallets.

People or Developers

What is holding the change? Well, this is a vicious circle where Users don’t like disruptive changes and the Developers knowing that (and willing to sell their products) don’t make any significative innovation on the User Experience and User Interface.

Also the current OSs are designed in concordance with the old metaphor, making more difficult to make any change at all. With a new metaphor is also needed a new concept of Operating System to match this new metaphor.

More like we are now

The old stuff work back in the day when things where disconnected and sporadic; all that changed. Today we have real-time lives and social networks and we are able to connect to the internet almost from everywhere.

The current work flow is “Open an App to do a task” giving the application the principal role. This application centered design of the current OSs is constraining the innovation in the User Experience. The applications are “boxed” in their “windows” and frames and rarely expand outside.

The new metaphor have to reflect our current state, have to interconnected, open, manageable and powerful; to make the right impact in our lives.

We really need this new Operating System and as soon as possible.

Update: More Discussion at IxDA.

Netbooks are trendy and the next big war will be in the netbook OS where JoliCloud, Android, Moblin and the OS in the CrunchPad are already gaining terrain.

That’s why nlapse is experimenting with a totally new take on the netbook OS, centered in tasks instead in applications and the focus is in the user needs on the go. So take a sneak peak of it.

Remember: this is only a very first approach (still no name). All feedback is welcome, here in the comments and also in twitter with @nlapse.

Months ago I have started using OpenOffice for my “Office” work: Documents, Letters, Taxes, etc. After a month or so I give up with OpenOffice and started to use IBM Lotus Symphony, which is also based in OpenOffice but with a revamped UI, after 2 months or so I give up again. Then, I start to use some of the Online Office web applications, from Google Docs, Zoho, ThinkFree passing by Buzzword, Sliderocket and Blist, I have tested the most popular ones. Days ago I get back to Microsoft Office. Let´s see why.

A bit of history

In the beginning, there was Wordstar and Supercalc for the old MS-DOS, next come Corel WordPerfect and Quattro Pro, then, Microsoft Office for Windows came and the party is almost over.

Is no secret that one of the most used programs today is for Office purposes, things like typing reports, expenses plans, or sales presentations is just as common as drink coffee in any office now days.

Online Office

First of all I don´t want to wait 1 minute to open and seek a document, next, the lack of features. But all is not that bad. For example Buzzword (recently acquired by Adobe) is by far the best Online Word Processor out there, is simple, quick, nice designed, intuitive UI/UX, and with Flex there is just better that all the AJAX mumbo jumbo present in the other applications (Google Docs, I am talking about you).

Online Office software have a key to success that is (starting now check Office Live from Microsoft) not very common in Desktop Office Software, and that is, Collaboration, yes collaboration.

With Online Office apps maybe we can finally be free from the hassle of never ending attaching versions of documents to our email (is almost as the old chain letters). And improve the way we work with others.

Let´s say the true here: Who use Google Docs or Buzzword for every day documents creations? The answer is: not many. Why? Because is hard to get thing the way you want in the on Online Office applications.

Offline Office

Desktop Office Software have all the features and speed of… well… desktop applications. And even when the good ones are expensive, you always can get OpenOffice or Lotus Symphony for free.

I (and you too, certainly) still prefer use a desktop application for my daily office work, is just way easy to click on a document file, open it and start editing. No web application can beat that, and we are used to it.

Finally

The Desktop Office Software will be here with us for long time, maybe because people are used to it or the lack of features in Online applications. But something is true, Online Applications have the Collaboration thing that can, in the long way, win the race.

Keep flowing.

As my last article makes some waves out there, just read some of the comments here, here and here. I want to state that I am not against using tables on web pages, just against using the elements in a way they are not mean to. Also encouraging to the web entrepreneurs (the intended audience for this site) to use best practices on their projects. Why? Cause on the long way the good practices pay: when you have to add features, correct some bugs, scale the app, etcetera, etcetera… etcetera.

This list of website represent successful websites that are using good practices right now, and are doing something to make the web a better place.

The list

1. Yahoo.com – Clean and a perfect Grid Design example
2. Blogger.com – None and very complex design If you ask me
3. Microsoft.com – None, more complicated design
4. Skyrock.com – I don´t even know this website, but they are doing great
5. Wretch.cc – I don´t know what they say but they use not tables, very complex design
6. Youporn.com – Well, they are about porn but taking care of web standards
7. UOL.com.br – What you say about complex layouts again?
8. Dailymotion.com – Eat that! YouTube
9. Allegro.pl – 0 tables involved
10. 163.com – This one too
11. AOL.com – One of the once-I-was, make the switch
12. WordPress.com – Guess what!, None as expected
13. WP.pl – Hey Poland, what are you eating these days?
14. Netlog.com – As a blog platform… was expected
15. Terra.com.br – Go Brazil Go!
16. Passport.net – He he, I see what you are doing here Microsoft!
17. Apple.com – What do you expect!?
18. Xanga.com – One more here
19. Globo.com – Brazil has now 3
20. Adobe.com – Otherwise I am going to uninstall the CS Suite
21. 6.cn – What a name!, no tables
22. Mozilla.com – Ja!
23. Digg.com – Dare you!
24. Tudou.com – Asia, once more
25. One.lt – One, one… one more to count
26. iG.com.br – Brazil, there must be some anti table/pro CSS law down there?
27. Download.com – Okay CNet, stay that way.
28. 56.com – Numbers in the name but not tables in the game
29. Youku.com – One more YouTube clone without the tables, WTF?
30. Divx.com – Finally 30!

Divx.com is the site number 136 by Alexa Rankings (today), so about the 22% of the most popular websites are NOT using tables as the main structure. They have from simple to very complex designs and layouts, and all have the same problem like every web developer out there, cross browser issues, but still there are trying.

In the other hand

What are doing these ones: Google.pl, Amazon.com, IMDB.com, Seznam.cz, photobucket.com, Megarotic.com, Imageshack.us, Google.com.mx, Yandex.ru, onet.pl, go.com, BBC.co.uk, imagevenue.com, sohu.com, craigslist.org, megavideo.com, free.fr, Google.co.in, fc2.com, livejournal.com (just one in the Log In/Register Box), deviantart.com, Google.cn, Google.co.jp, taobao.com, Google.com.ar, rambler.ru, Google.ca, Google.co.vn, Mininova.org (offline at the moment of the photo), adultfriendfinder.com, Google.com.pe, ebay.de, metroflog.com, veoh.com, Google.co.ve, Google.com.tr, Geocities.com, Google.com.sa, Google.it, googlesyndication.com, vnexpress.net, Google.com.eg, Google.co.th, fotka.pl, vkontakte.ru, sendspace.com, ebay.co.uk, mixi.jp, badoo.com, badongo.com, cnn.com, bebo.com, tom.com, discuss.com.hk, mediafire.com, yourfilehost.com, maktoob.com, kooora.com, multiply.com, iwiw.hu, Google.sk, rakuten.co.jp, Google.ae, gamespot.com, perfspot.com (yeah, sure), 4shared.com, rediff.com, depositfiles.com, about.com (for sure), Google.com.ph, usercash.com, Google.com.au, Google.ro, dantri.com.vn, centrum.cz, zshare.net, invisionfree.com (just one).

Who cares?

Is true, I know, the average Joe and Jane out there, don´t even know that they can see the source code of a website if they want to. Also, the big chairs several floors over your head, in your company, give a shit about it! The standards and good practices not lead to more revenue… yet.

Finally

It´s up to you what tools or practices you use in your work. I give you that, but… think about blind people and accessibility for just say one example, just for a moment, think it. What will heard a blind people when enter in your page? And answer you can answer yourself: “A nonsense speech inside a tags soup”. I am sure that´s not what you want. Do you?

Keep flowing.

PS: I don´t really care about my grammar errors here, at the end of the day, you understand me, Don´t you? When people have nothing to say they… suddenly… find some spelling or grammar details, and open their big mouth!

As we move in a world of XHTML, CSS, AJAX, Microformats, Semantic Web, etc. You may think that tables are only used to display… well… tabular data, no you are wrong! Take a look at this list of top sites from Alexa and see who are still in the middle age of web design. Here I am looking only at the home page of every site, may be worst when you click your way inside the site.

Tables are bad? Since when?

Well I am not going to tell the “The History of Tobacco”, you can read some over here. But I want to bring a few things for you: light, understandable, accessible and quasi-more SEO friendly code.

The list

1. Yahoo.com – Clean
2. Google.com – Tables inside
3. YouTube.com – You don´t believe how many they have
4. Live.com – Only one… Hmm… not bad at all
5. MSN.com – Only one… Amazing!
6. MySpace.com – A place for tables… and friends?
7. FaceBook.com – Here hang out the tables too.
8. Wikipedia.com – Tables, tables, tablepedia over here
9. Hi5.com – Only two
10. Orkut.com – OK, you too
11. RapidShare.com – One
12. Blogger.com – None, Zero, Niente, No tables around
13. MegaUpload.com – What you think?, yes you are right, there are countless tables inside
14. Baidu.com – Two on the home page, one table every 20 visible characters
15. Friendster.com – Not as much as you think
16. Yahoo.jp – Okay here we come again, back to 1995, Y! on the basics
17. Microsoft.com – None, can you believed?
18. QQ.com – table is their second CSS declaration, after body of course
19. Fotolog.com – Yes this one too
20. Ebay.com – Everybody knows
21. Google.fr – Tableu à´la carte.
22. Mail.ru – Yes in the old Russia, the websites layout the tables
23. Google.com.br – Ou Brasil tableleirou (here too)
24. Skyrock.com – None, Nicht, Null, 0 tables here
25. Sina.com.cn – Hele ale table too
26. Google.de – Of course, they have too
27. Google.cl – * (for now on I will write only an “*” when Google comes)
28. Google.co.uk – *
29. Google.es – *
30. Flickr.com – You don´t noticed but they are, they are

Finally

From the 30 more popular sites on the world and only 4 are using tableless layouts. Who cares anyway, the users? Nah! XHT hu ha hu who? a user have just said near you.

Stop hunting those IE CSS tricks and bring back your Frontpage 98 my friend designer, we are still in web 0.8889… not really but… think about it.

Keep flowing.

Update: And now… Top 30 popular websites are NOT using tables as main design structure. What is the real problem out there?