Tooltips become Coachmarks


Tooltips offer UI designers the reassurance that even if there is some ambiguity as to the function of a link, label, button or call to action we can sleep easy in the knowledge that we can add a tooltip with additional information to reassure our users that they are making the correct choice. Tooltips should not be used as a primary source or information but more as a secondary source to supplement icons and labels etc to help our users better navigate a section of our design.
Tooltips in mobile and touch interfaces can sometimes be accessed by the first tap displaying the tooltip and the second actually executing the action however this can be cumbersome and is not always preferable. Another way to add this additional information to a mobile device is through the use of coach marks. A nice overview can be seen here on While coach marks should be used selectively they are a great way to either initially introduce a user to an interface features or to demonstrate that there is additional functionality available.



Microsoft Megathon Malaga 2013


This weekend I took part in Microsoft’s Megathon which was held in the technology park in Malaga close to where I work. The aim of the weekend was to design and create an application in 2 days and then via peer voting the winner of the competition would be elected, and we won!

I was partnered with two very talented JavaScript developers, Victoria and Carlos, and we decided to create an application for Windows 8 using HTML5 and JavaScript. There were over 60 developers present and we were the only ones who decided to use this technology.



We developed a social shopping application whereby the user can create and share wish lists, for example wedding or birthday that can be shared among selected friends, who then in turn can via paypal split the cost of the item among themselves or mark an item as purchased so that you do not receive duplicate gifts.

As this was my first experience designing for Windows 8 I researched the guidelines and Microsoft provide very clear UX guides which can be viewed online here.

After we figured out the inital information architecture and created a quick wireframe I started writing the HTML5 and CSS front end of the application while the developers got started working on the JavaScript backend code. For me this was a challenging task as I have not worked in Blend before, and after several attempts trying to re-position items using Blend I changed my mind about using Blend and just coded directly in Visual Studio and then built the application and ran it every time I wanted to check the progress, possibly not the most time effective method but one that worked out just fine for me.

Another issue I had was debugging, I have to admit that if an element is slightly out in a web app/site I just open my developer tools in the browser and can quickly identify which elements need to be fixed and then fix it. Windows 8 apps don’t seem to have this functionality added.

When I had created the HTML5 and CSS then the developers added the functionality with JavaScript.

There were some other really strong contenders at the event, namely Flippa created by a team of my colleagues at CSC and BabyTube which also contained a team member from CSC. Overall a really strong presence from my UX team with all of our members who participated placing in the top 3.