At this years TED conference John Underkoffler presented about the future of UI. A minority report style interface to computer systems. Whether this will be the most efficient or user friendly way of navigating computers time will only tell, but it definitely a good insight to what might be just around the corner.

Via Singularity Hub

Howies is a clothing company based in Cardigan Bay South Wales. It’s produces fantastic T-Shirts (if not really expensive). Occasionally they do T-Shirts based on web ideas which is fantastic, this Like Bike T-Shirt is a great example, and a fantastic play on the Facebook Like button.

£25 Available on White for men and women.

(Via Howies Blog)

The TweetMeme button is one of the most successful social media buttons, it is served to millions of websites around the web. One of the more unusual points about the TweetMeme button is it’s height, 61px. This height has now been adopted by facebook and digg.

Why 61px?

“Cause everyone knows that 61 pixels is such a normal dimension in the world of social networking – I mean everything’s 61 pixels, right? Cause it’s…a prime number!”

- Twittown

I would like to say that it was due to lots of research and investigation, but it was more of a accident. The button was originally designed to be 60px high but in the quest to fit an extra digit onto the button the font size was decreased and the button height was increased to 61px.

The Standard

The TweetMeme button had a massive adoption rate, and was installed on millions of sites across the web therefore it became the one to beat! Large sites have now put pressure on the other social media sites to produce their buttons to the new standard. Therefore the 61px standard (if you have a better name let me know) is now the default for all social media buttons on the internet.

Anatoly Zenkov (flickr) has created a great little Java app which will record your mouse pointer movements over your screen and then save the image of all your mouse movements. You get some great screenshots (have a look at some of the comments on the flickr post).

You can download the little Java App from here PC, Mac

Here are some of my screenshots below. The best thing about this app is that it makes a great tool for UI testing. You can see where a user clicks and their mouse paths really easily!

I got a lot of feedback from my post last week about optimizing JavaScript, everyone seemed to love the image of the rocket I had. So I decided to give it away free, it was one of those drawings I did years ago.

You can download it now, its available in .ai, .svg and a .png file.

It’s coming up to Christmas again and you should be thinking about wrapping up all those presents that you have brought this year. In this handy blog post I will give you some of my tips and how to wrap the perfect present.

Choose A Colour Scheme

That’s right, why shouldn’t wrapping be like anything else you design? Wrapping should be part of the present you are giving, it would mean a lot more to someone if they know you have taken the time and care to wrap your present properly and professionally.

You ideally want a nice colour scheme of about 2 to 3 colours, try not to over do it. I find the most simple colour schemes are the best, this year I have gone for a red and white colour scheme, as shown above. I would recommend staying with traditional Christmas colours, like white, silver, gold and green. However you might want to try different colour schemes, but you would be hard pushed to get a different colour wrapping paper at this time of the year.

Paper

There are 100’s if not 1000’s of different paper designs available at this time of year, I would say that it is always best to go for a simple plain colour. It gives a much more professional look, ends up being a lot cheaper and won’t have to match the pattern on the join between the two ends.

Always try to go for a high quality paper, the basic rule is the ticker the paper. Particular types of paper like foil are a lot harder to crease, so my advice would be to try and avoid them as much as possible.

Know Your Ribbon

There are many different types of ribbon you can get, here are the 3 basic types:

1. Standard material based ribbon, like the red polka dot one above. This gives your presents a very elegant solution, however it is expensive and not very good for tieing bows.
2. Wired material based ribbon, this is like the material one, but has wires running either side meaning it will keep it’s shape when formed into bows.
3. Paper based ribbon, can be brought in cheap vast quantities. However this ribbon can be tacky if overused.

The most important thing to remember is to buy your ribbon early and buy lots of it. I brought this ribbon at the beginning of November, by the start of December it was all sold out. The especially happens for ribbon in the popular Christmas colours.

Remember after all the present giving has happened to go round and retrieve your ribbon before it goes into the bin, you never know you might reuse it next year.

Tags

Tags are quite easy to get right, especially with services like Moo which is a business card service, however they allow you to print any pattern onto the front of a card. You can get 100 for £13, that’s 13p a card, cheaper than most high streets.

If you can’t find a tag that matches you can use another method of cutting pieces of card out and sticking some of the large off cuts of wrapping on it. It’s best to use double sided sticky tape for this, glue sometimes leaks through (depending on how thick your paper is).

Learn How To Wrap

Lots of people think they know how to wrap a present but you should really learn and practice before starting on the mammoth number of presents you have to wrap. There are lots of online guides, I mostly wrap in the style laid out in the tutorial on eHow. Remember to make the wrapping easier for yourself buy putting things in boxes, it is a lot easier to wrap a box then a circle.

Share

Share your tips and tricks for wrapping in the comments below.

Wrapping Inspiration

1. Impressive Gift Package Design Inspiration For Christmas
2. Christmas Wrapping Ideas – Channel 4

Twitter is quickly gathering pace and is fast becoming one of the most popular social networks. I have been using Twitter for nearly 2 years, mostly through their use of 3rd part applications like TweetDeck or Tweetie. I thought to myself why do I, and many other ‘power’ Twitter users not use the web interface? So here are some of my suggestions on how I would improve the Twitter UI.

Twitter home page design at the time of writing the article, including some reference points.

I will be focusing on a number of parts of the home page, the main ‘tweet box’, the implementation of the ‘lists’ area, how the data is presented and the integration with search. This is not meant as a critique of Twitter, but more as some helpful suggestions on usability.

Tweet Box

For lack of a better word, the tweebox is the textarea located at the top of the twitter homepage. I would really love to see it improved in a number of really simple ways:

• The ability to press enter to submit a tweet. Tweets aren’t multi lined and there is nothing else to do so why not make enter submit the form instead of press the button. Twitter has this problem in a number of other area’s as well, OAuth screen!
• Autocomplete the usernames in the textbox.
• Auto shortening. Twitter has already partly done this for really long links, but it would be nice if you could have the option to do it on the shorter links as well.

Page improvements

The live update of tweets, you know the little yellow box which tells you how many are waiting, is a fantastic addition. But I think they are missing the key points, why wouldn’t you show the tweet? I just find it really annoying.

The page is currently geared up to just tweeting. Users probably use the Twitter interface more to manage their tweets and accounts, maybe the front page should be geared in that direction.

Other

The lists nor retweets seem to be fully integrated into the UI they just appear to be something strapped onto the edge. It would be great if you could, for example, have tabs across your timeline which listed your most popular lists.

It would be great to hear your thoughts on how you would make twitter better, you never know maybe Twitter is reading this.

Better Twitter

Hopefully my recently released Firefox plugin Better Twitter will solve most of these issues.

I have just seen this posters from Dixons, the electronics retailer, over at Creative Review and i was shocked to see how honest this advertising campaign is, it clearly reflects how Dixons sees itself in the market place.

These posters created by M&C Saatchi in London are Dixons latest effort in advertising on the tube. These adverts do something that most adverts overlook, the recognise Dixons position in the market and how their customers both behave and view them, firmly at the bottom. The cleverest bit of these adverts in to use the easily recognisable fonts of the two major retailers, Selfridges and John Lewis. These, however are really subtle, and without realising this the adverts become really bland. Therefore do they really appeal to everyone, or are they just a bit too complicated, it probably would of been more effective to actually mention these retailers by name.

This problem would become even more apparent if the adverts where only displayed singly, then you wouldn’t get the contrast, and even through the brands which the fonts come from are strong, i don’t think typically consumers easily recognise the font of a brand out of context with their logo.

What do you think?

With it still being April and with all the disasters going on. I thought I would lighten the mood share with you a number of funny links and cartoons/drawings about being a web developer, which I have been collected recently. Please let me know if you find any more.

Dilbert 404 Error Page

South by Sou’wester

The Mind of a Web Developer mingle²

The Brads – WiFi

Small talk with a web designer – The Man In Blue

Web Development Project Management Cartoon – The Project Management Cartoon via Andy Sowards

I design lots of user interfaces for varying different types of products on different platforms. So I find it very annoying when I encounter a product which is functionally brilliant but lacks an easy to use interface. I find the user interface for the popular twitter client Tweetdeck is lacking the necessary interface for it to become a brilliant application.

Loading Tweetdeck

When Tweetdeck initially loads up there are no loading symbols in any of the columns, this is also true when you create a new column or a new search. Ideally Tweetdeck would show a loading spinner to give you the idea that the program is actually doing something.

The Tweets

Each tweet is of a uniformed height which really doesn’t make use of the space available. This becomes even more apparent when you switch on the option of narrow columns. Why can’t the columns be resizable? This would allow you to have as many as you want within the viewport of your screen. One of the biggest flaws in Tweetdeck are in the tweets, links do not have a rollover! There is also no way of knowing if you have actually clicked on the link and it’s opening a webpage.

Notifications

The Tweetdeck notification system is not only annoying, it is also useless, they are trying the mimic the GROWL notification system for Mac, but without any of the benefits. The notifications contain no real information, like who tweeted what, it only contains a count. There is also no way for you to choose the location of the notification, by default it pops up in the top right of the screen. The major place, especially on windows, where important buttons are positioned. There is also no setting to adjust the time the notification would display for.

Summary

Don’t get me wrong, I love Tweetdeck, I use it everyday but i would just like to see a number of improvements so that I am able to use it everyday all day, without continually looking for a new solution for the Twitter client problem.

Do you have any problems with Tweetdeck, any little problems which you think would make a big difference? Or have you found a great replacement for Tweetdeck? Let me know in the comments below.