hippo's n00b adventures

a technology blog

Archive for the ‘User Interface Design’ Category

“Please, no more Comic Sans!” Google Web Fonts & Typekit

with 2 comments

Phew!  I recently got a new domain name and web host and gave a fresh look to my website (one could say that I’m lazy with my designs, I prefer to call it “minimalist”).  The portfolio part is still incomplete as I have not yet determined how it will be organised (and what I should put in there, for that matter – is there anything really? Haha) but (fingers crossed!) I will complete it before uni starts again.

Anyway, while I was doing all of this I came across this cool tool to add fancy open source fonts to your website.  It’s called Google Web Fonts and it is currently a free service.

Fonts available include the standard open source fonts such as Open Sans, Droid Sans (found on the Android OS) and Ubuntu.

There are also some fancy unique fonts available.  My personal favourites are Questrial and Leckerli One, which I used on my new website (see below!)

It’s quite easy to install these fonts too. There’s no need to upload the font file onto your server and link to them into your code like in the good ‘ol days – just choose the fonts you would like to implement (there is also a handy guide to tell you how much time it will take for the chosen fonts and your web page to load), and copy and paste in the code snippets that they give you into your HTML and CSS code.

If you’re looking for a wider range of fonts and extra features, Typekit is a great service, which has recently been acquired by Adobe.  Typekit offers a wider range than Google’s service.  Corner Store is my personal favourite – reminds me of signs for a milk bar or diner in the 50s.

Typekit offers several pricing plans, including free trial plan. Fonts are installed onto your website in a similar way to Google Web Fonts.  This service also has the option of integrating your custom corporate font and fonts from other foundries.

The range of fonts and features on Typekit is ideal for professional web designers.  But if you’re like me – your typical stingy uni student – Google Web Fonts provides excellent fonts for you to use at your disposal for your website for free.  There’s nothing wrong with your standard Arial or Helvetica, but try these services out if you would like to go beyond your standard Sans-Serif font for your web design.

Just – whatever you do – please stay away from Comic Sans.

Heuristic Evaluation for Interface Designs

leave a comment »

At the moment I’m working on a major project for uni, which is a catalog and order database for telesales consultants of a department store (hypothetical scenario and company by the way).  I was part of the team for designing the user interface.

Being a total n00b (as usual) at Interface Design, I decided to go and do my own research in this area.  Then in one of my other subjects, Web Services Development, I came across a Heuristic Evaluation checklist, made by Jakob Nielsen.

This checklist evaluated an interface design’s usability according to a heuristic or a guideline principle.  I decided to put the 10 Recommended Heuristics into a table similar to this:

Guideline Principle Does it fulfil the principle? If not, how can we improve the design?
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognise, diagnose and recover from errors
Help and documentation

(for a further description of the guideline principle, please visit the Heuristic Evaluation website).

Then use this table to quickly evaluate interfaces similar to what we wanted to achieve for our major project.  We evaluated existing Mail Order Databases and E-Commerce databases.

After our prototype for the database was completed, we decided to use the same checklist to evaluate our own design.  We got other members of the team to fill out this checklist.

We had a simple yet effective method of evaluating our prototype’s usability.  Try it yourself next time you have to design a prototype!  For more info, please visit the Heuristic Evaluation website.

Now that task has been completed, I am currently in the process of working on end user documentation.  Perhaps a future blog post on that as well? xD