Monday, 20 March 2017

Font does matter

Fonts matter. That was the takeaway message from class this week. We first had a brief history lesson on the origin of fonts and the reasons they were designed the way they were. The easiest distinction between fonts is serif vs sans serif. Serif fonts are those that include lines at the end of letters. They were drawn in to prevent marble or stone slabs from breaking right through when letters were carved on them. It took away the stress. It also provides for a place for the overflow ink to go. The default font on Blogger is Times which is a serif font. You can tell by the T... T The line on the bottom of the T and the pointy bit on its left and right end give it its 'serifness.'

The other type of font is sans serif or no serif. They are named (you guessed it) for he lack of lines or pointy bits at the end of letters. This is an example of a sans serif font. Note the T.


So fonts matter and people get very upset when certain fonts are used. For instance, just the mention of Comic sans riles some people up. I personally don't have much of a reaction to different fonts. The most important thing for me is legibility. Another thing to take into consideration is the design. It is one thing to have the right font and another to make sure that it is visible and easy to read and understand. For an example of what not to do, I present the infamous Miss Universe finals.


There are a couple of issues with the design of this card and none of them have to do with the spelling of 'elimination.' Firstly, the information about the 1st and 2nd runner up are in the middle which is the most prominent part of the card. When looking at something like this under pressure and with no time like Steve Harvey did, the eyes immediately filter information. The middle of the card would be important and it would be easy to ignore 'Philippines' because the font is so small and near the corner of the card. It's easy to imagine that Steve saw 1st and Colombia in the same line and came to the wrong conclusion that the winner was Colombia. Also, for whatever reason, the card is not aligned. Did the creator of this card accidentally hit right align for the winner? The following is  much simpler and cleaner design that is significantly easier to read and interpret.

Miss Universe 2015 Results


2nd Runner Up: USA

1st Runner Up: Colombia
WINNER: Philippines

Now this would be much easier to read... even in comic sans.

Bibliography

https://www.reddit.com/r/funny/comments/5bjth1/fonts_matter/
http://olaitankolawole.com/take-a-look-at-the-design-of-the-miss-universe-card/

Sunday, 5 March 2017

Microcopy

Microcopy is small text - often a sentence - found on many websites that contain information to efficiently navigate the website. Bill Beard from the UX magazine Smashing Magazine states that, "it’s the little text that can make or break your user experience." It is most commonly found on forms. Another common location is sign up sheets, loading screens and error messages. Examples of microcopy are the "Forgot Password" messages/links at almost all sign-in forms. These subtle additions significantly elevate the user experience.

For instance the use of microcopy is evident from a screen grab of the Smashing Magazine article 5 Ways to Prevent Bad Microcopy. The right side of the screen contains a section to subscribe to their newsletter. Microcopy contains important, relevant information such as how frequently the newsletters are sent, how to sign up, and the number of people who have already subscribed. 

Another simple example and personal favourite of mine is the Google Chrome page when not connected to the internet. The dinosaur is a metaphor for a time without technology and is equating no internet to it. Secondly, it's a game which gives the user something to do while waiting for his/her laptop to connect to the internet.

Too many hours have been spent playing this game
The use of microcopy is common on loading screens or menus and the following are just samples from some of the games I have on my phone and one from Top Hat.

Reference to the in game currency


War and Peas...

Other common military-ant activities are also used













Microcopy can be used to insert witty text to make light of an error such as the Google Chrome example or to make the site more lively and entertaining as a whole. Inserting such text is an easy way to transform a dull site without a lot of effort. Dull error messages too can be replaced with more interesting messages that convey the same information. They can also be used tongue-in-cheek or with a lot of sass to draw a smile on the user. For instance, the timeout message on 9gag.

I need messages like this when I am doing homework

Or this passive aggressive message from Netflix

I don't need you judging me Netflix
Or the witty messages from Tumblr


Strictly speaking, microcopy does not have a lot of practical value. Websites can still be navigated without it. However, it makes it considerably easier and more enjoyable for the user. It is like a paint job on a car. It doesn't improve the performance in any way but it looks a whole lot better.


Bibliography

https://www.smashingmagazine.com/2013/06/five-ways-prevent-bad-microcopy/
http://scalar.usc.edu/works/netflix-culture/are-you-still-watching
https://uxdesign.cc/the-magic-of-microcopy-a56c5decbe1f#.7hx5896ki