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 pttrns.com. 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.
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!
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.
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.
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.
I recently discovered webtypography.net which I would recommend to anyone who has to design any interfaces for web based applications.
This area of UI is often overlooked and in my opinion a good baseline grid, the choice of web font and good punctuation cannot be highlighted enough.
Everyone has their typefaces of choice and it is normal to have a couple of good old reliable s for every situation but here are a few that I will be considering for my next project as highlighted by Billy Whited in blog.typekit.com.
Another super cool site I have found that does some amazing web typographical experiments (think chrome experiments for web fonts) is webtypographyforthelonely.com I especially love the opening interactive image.
A good starting point for web typography is Scott Gilbertsons talk that can be viewed below.
Both Smashing Magazine and A List Apart give amazing overviews on the benefits and problems encountered with implementing a baseline grid so I am not going to repeat what they say so much more eloquently.
So here is what I have found to be my baseline grid of choice. fluidbaselinegrid.com
This is to quote their blurb:
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
Not only does it provide a solid baseline grid but it also used normalize.css as a reset to render all browser elements the same.
It also uses respond.js as a polyfill to fix the pesky issue of older IE versions (6/7/8) not recognizing media queries.
And yes before you point it out the headers are not perfectly aligned, but this is something you can go back and fix manually if you are creating a static interface and if not, well then I am sure you are aware of the difficulties of creating a perfect baseline grid in a responsive manner with dynamic information.
I have been using LESS for a while now and recently I had to amend my friends code which was written in plain old fashioned CSS, and I realized just how much faster having a CSS preprocessor as part of my workflow has made me. SO MUCH FASTER.
Both allow you to create variables, nested variables, Mixins, Selector Inheritance and Functions & Operations with the main difference (that I can see) being that SCSS needs Ruby installed where as LESS does not.
I also use Crunch as an editor and to compile minified css. Oh and on a complete side note if you ever need to easier understand or work with messy, illegible css check out Processor, it will have your code looking amazingly pretty in no time.
Both have solid communities behind them so which ever you chose is up to you, but if you have not tried working with one before I would highly, highly recommend it!
I recently discovered font icons and I have to say I simply love them!
The benefits of using them are amazing, they are easy to resize without losing quality, and using CSS you can easily style the opacity, shadow, colour and when browser support gets stronger the gradient also using background-clip.
Chris Coyer gives an awesome tutorial on how to use the correctly on css-tricks here.
There are a number of free font icons available for use on the web or you can simply create your own in illustrator, save your icons as SVG and use a service like icomoon to create your icon font.
As they are loaded as a font in your CSS it cuts down on HTTP requests and saves on file size over image sprites so these will be especially useful for when you need to design for reduced bandwidth or a mobile site.
I first discovered JR and the amazing work he has been doing when I he won the coveted TED prize a few years back, his work is a daily inspiration to make me want to use the power of art and design to change the world for the better, check out his TED acceptance talk below and you can find more information on the projects he is involved in at http://www.jr-art.net