Michael Gaigg: Über UI/UX Design

500+ Free Stunning PC Icons

Michael Gaigg — Tue, 31 Aug 2010 17:42:01 +0000

You'll find 10 sets of 1000 high-quality free .png icons in sizes 16x16 & 32x32 for bloggers and web designers to use in private & commercial projects (Creative Commons Attribution 3.0 License). Loving it!

Highlights of Week 32/2010

Michael Gaigg — Mon, 16 Aug 2010 15:54:30 +0000

Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad

How to use the Google Font API

Michael Gaigg — Tue, 10 Aug 2010 15:10:21 +0000

[caption id="attachment_798" align="alignright" width="124" caption="Google fonts available"][/caption] If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

easy to implement (as I will show)
well supported by IE, Firefox, Safari and obviously Chrome
open-source
free (I should have mentioned first huh?)

End Result

[caption id="attachment_802" align="alignnone" width="209" caption="Tangerine font"][/caption]

Code Example








This text is in Tangerine.

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible. The variant parameter can be omitted for use of default.

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android). Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time. The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses. Are you using any other Font library?

Secret of Pixar’s Success [Link]

Michael Gaigg — Fri, 06 Aug 2010 03:09:50 +0000

A friend of mine sent me this link to an article called The Secret Of Pixar’s Success (How to make great movies and billions of dollars) by Helen O'Hara. Lessons learned Besides being an interesting and worthwhile read I'd like to share my lessons learned and how they can apply to web design: Innovate (basically: [...]

Esri listens to their Users and changes Pronunciation of its Name

Michael Gaigg — Tue, 03 Aug 2010 01:36:37 +0000

[caption id="attachment_780" align="alignright" width="154" caption="Esri Emblem"][/caption] This is big!

Background

And here is why: ESRI, a privately held company with more than 2700 employees, was founded in 1969, over 40 years ago. The company name is an abbreviation for Environmental Systems Research Institute and therefore

not pronounced as a word but as distinct letters similar to IBM, SAP and other software companies with an acronym based name. It is thought within the GIS (Geographical Information Systems) circles, and even joked that 'old' users prefer E-S-R-I, while novice users use the 'ez-ree' pronunciation.

(from wikipedia, March 2010, which has its own section called "Pronunciation of company name").

Insides and Myths

Over time a divide elapsed, employees were proud to pronounce their company name E-S-R-I and by doing so showing they are insiders and distinguishing themselves from the 'newbies'. It became part of company culture and identity. Rumor has it that the first week of orientation for new employees is to train them to say "E - S - R - I" spelled out instead of trying to pronounce it as a word (ez-ree), though I cannot personally confirm this. There's also been a rumor of Jack Dangermond [the presiding of ESRI] having a version of the "swear jar" on his desk, and anytime someone says "ez-ree" they have to put a dollar in.

Confusion

Around the world users were confused. While it seemed to be natural to pronounce the company name ez-ree, users found themselves being corrected and lectured: "It's not ez-ree, it's E-S-R-I". Hearing "It hurts me to say "ezree". =)" from employees were not uncommon. Forum threads tried to shed light on the ongoing discussion and various sides were quick to elaborate about the correct pronunciation in (mostly humorous) detail, e.g.

Here in San Antonio, my new home, it is pronounced "ess-ray y'all".
In austria we say: äsri
When I'm in a hurry- I say 'eS-ree', and when I'm trying to sound sophisticated and smart I say 'E-S-R-I'. Isn't that the way it always works?
As for ESRI or esree I have always called it EE ESS ARE EYE.
Lately I've noticed that people, who aren't sure of what they are talking about, pronouce it 'Uhh, [pause] Ezree' or '[PAUSE] Eszree'. The pause before gives it away...
Canadian pronunciation: ez-ree-eh?, or ee-ess-arr-eye-eh?
One thing I've noticed, though, is that the tendency to elide sounds has some people pronouncing E-S-R-I rather like yes-are-eye (without the y). Will the next step in this evolution be yes-rye? (Then the only question will be Do you want that with mustard?)
Down Under we say 'Bloody ezree' when things go ferral.

Change and Resistance

To the surprise of many employees an internal notice from 3/19/2010 read:

[...] we will be transitioning the pronunciation of ESRI to “ezree.” This effort will ensure a consistent name recognition around the world.

What followed was a big uproar from the employees side. Many of us felt robbed of our identity and culture. What seemed to work well for over 40 years should not be changed and trashed that easily!

Success

As it turned out, after merrily 4 months and a hugely successful User Conference with almost 14.000 people (the biggest gathering of GIS professionals ever) the name change was perceived as a relief by the user community. A sense of unity was felt, finally we speak the same language, the confusion was lifted, no more lecturing, no more division between insiders and outsiders, everybody became part of the family. Esri stepped into icy waters and in risk of p***ing some of its own employees off it opened a new world of opportunities by Speaking the Language of Its Users - I'm loving it!!

What do you think?

Have you ever heard of a comparable change / step taken? Could you imaging IBM spelled Ei-bm?

Highlights of Week 30/2010

Michael Gaigg — Mon, 02 Aug 2010 04:37:09 +0000

How Web Designers Can Adopt a Global Mindset (by Christian Arno) - Cultural differences are shamelessly overlooked, depending on your audience that might be ok but you should know... read the article.
User Interface Design Framework (by webalys) - a really nice set of flexible GUI elements, free icon library and a graphic style library.
The Hackday Toolbox – getting you started faster (by Chris Heilmann) - wow, what a great set of resources to get you started with YQL for PHP and JavaScript.
How to Navigate Design by Committee (by Andrew Follett) - Andrew outlines a feasible approach to steering design discussions into a successful direction.
Accessiblity Forum 2.0 (by buyaccessible.net) - promising blog to follow if you are into accessibility.
10 Free Online Books for Web Designers (by Henry Jones) - add to your never ending supply of good stuff.

Designing a Stop Sign [Video]

Michael Gaigg — Fri, 30 Jul 2010 03:10:55 +0000

aka 'Welcome to my life'

Disclaimer: Any similarity to projects and designs living or dead is purely coincidental. PS.: My absolute favorite is the dude swallowing his snack "...and a web address, in case people want more info".

Highlights of Week 29/2010

Michael Gaigg — Fri, 23 Jul 2010 15:50:07 +0000

A Complete Guide to A/B Testing (by Cameron Chapman) - convince yourself and your clients of a design that works better - good summary and tool collection.
It Isn't Minimalism (by Dmitry Fadeyev) - as Dmitry argues: "Simplicity isn’t a design trend, it’s an attribute of good design."
Complete Beginner’s Guide to Content Strategy (by Andrew Maier) - about strategies to abstract, analyze, collect, publish & manage. Nice!
Understanding border-image (by Nora Brown) - nice CSS3 tutorial for custom borders - come on Microsoft, you can do it...
Search Analysis with Google Analytics (by Dave Sparks) - may I introduce, your users. Get to know your users, what they do, what they want, what they are looking for. All invaluable information. Good intro by Dave.
Best Tools for Testing Cross Browser Compatibility (by Joel Reyes) - every designers nightmare, browser compatibility.
10 Tools for Getting Web Design Feedback (by Ben & Jerry’s) -
Drawing the Line: 6 Things You Shouldn’t Tolerate in Projects (by Sacha Greif) - Thank you, thank you, thank you. Can't reiterate enough. We Designers have to show integrity! Thank you.

Highlights of Week 28/2010

Michael Gaigg — Sat, 17 Jul 2010 17:35:57 +0000

7 Warning Signs of a Nightmare Client (by John Urban) - oh, I know the control freak, and well, the extra freebie guy too 40 Great Resources for a Complete Roadmap to Freelancing (by Aidan Huang) - plentyful of good links, not only for freelancers. Putting Content Back on Top (by Felicity Evans) - on [...]

Redundancy is NOT bad!

Michael Gaigg — Wed, 14 Jul 2010 14:44:12 +0000

The original motivation for this article stems from a recent discussion with a customer who argued that UI elements must not be redundant, i.e. there must not be two links on any single page pointing to the same target. His argument was that the link to the contact form - which was embedded in the content - already exists in the header, thus replicating the other link. To me it seemed clear that this "redundancy is bad" theorem doesn't make sense. But how could I argue the opposite?

Be aware of the "Rule"

Over the time I've seen many so-called "rules" appear, most of them are really hard to counter and battle or even detect in the first place. Remember the "Everything-needs-to-be-reached-within-three-clicks" rule? Says who? Why? So the user can reach any target without dropping off? It's not about the amount, it's about the motivation to get there, it's like a bicyclist that needs more strokes uphill but still has enough motivation to get there. I call those rules Lazy-Designer rule, or should I say, don't know better designer?

What is Redundancy?

Redundancy is the amount of information used to transmit a message minus the amount of information of the actual message. One might call this "wasted space" or "overhead".

Unwanted Redundancy

In information theory the amount of information is described in number of bits and data compression is used to reduce or eliminate unwanted redundancy.

Desired Redundancy

But communication over noisy channels with limited capacity pose possibilities of data loss and that's why checksums are added for the purpose of error detection.

Error Detection

Simply put, the basis of communication is sending and receiving a message from a sender over a channel to a recipient. Error detection is the detection of errors caused by noise or other impairments during transmission from the transmitter to the receiver.

Error Correction

Error correction is the detection of errors and reconstruction of the original data. This reconstruction can happen in either of two ways:

Automatic repeat request (ARQ), sometimes also referred to as backward error correction, basically a request for retransmission of data until the correct receipt can be verified.
Forward error correction (FEC), where the additional data (redundant data) that was added is used by the receiver to reconstruct the original information.

Translation into UI Design

The objective of user interface design (=sender) is to communicate a message via the internet (=channel) to the user (=recipient).

Importance of the Message

Without going into details of quantity (information theory and entropy) or quality (importance of a message) it can be said in general that the better message (=content) follows the lesser is more and more precise is better recommendations.

Methods of Error Detection

But how can one assure that the message has actually arrived? That the user found what the designer has intended to present? Or in other words, how can I (=designer) detect that a user has NOT received the message (=error detection) and what can be done to correct (=error correction) it?

Traffic Log Analysis can help finding patterns in user behavior purely based on click-through rates and times.
User Testing helps finding qualitative answers.
A/B Tests compare alternative design choices and their effectiveness.

Methods of Error Correction

More important is how the UI can handle errors in data reception, i.e. the user "didn't get it".

ARQ is almost impossible to implement. How would I know that the user missed our message? Maybe he/she simply wasn't interested (e.g. in clicking the 'contact us' link).
FEC on the other hand seems to be a real alternative. Adding redundancy may help the recipient to overcome the missed message and despite having noise (ads, other UI elements, etc.) being able to continue the task in the most likely way the designer had intended to.

Right Balance

Like mentioned above, it seems natural to enhance the quality of content and balance the quantity between removing content (=data compression or unwanted redundancy) and adding content (=desired redundancy). It's like an intersection having two or more traffic lights (desired redundancy) but surely not traffic light hell like on the satiric image.

On a personal note

I wish Directv would ship all their receiver units with two remote controls. You can't imagine the sudden peace in our house since we ordered a second one. "Babe, where is f...in remote again?", "Will you finally shut down the volume honey?", "Come on, skip the commercials, or are you sleeping already?"