500+ Free Stunning PC Icons
Posted by Michael Gaigg
Set 'Dortmund' at http://pc.de/icons/
Download 500+ Free Stunning PC Icons
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
Posted by Michael Gaigg
- 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
Posted by Michael Gaigg
Google fonts available
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
Code Example
<html> <head> <link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'> <style> body { font-family: 'Tangerine', arial, serif; font-size: 2em; } </style> </head> <body> This text is in <strong>Tangerine</strong>. </body> </html>
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.
<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>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.
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.
<link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'>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.
UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.
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]
Posted by Michael Gaigg
Secret of Pixar's Success
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: use new technology when the time is right and only when it’s absolutely necessary but continuously try solving real problems, not inventing fictitious ones)
- Genius (have a great team)
- Keep learning (Field studies
- Fail early and often (Prototyping)
- Advice (Heuristic evaluation, expert reviews)
- Don’t be afraid of failure (should be part of the company culture to be successfully applied)
- Share (should also be part of company culture, but mostly isn’t)
Esri listens to their Users and changes Pronunciation of its Name
Posted by Michael Gaigg
Esri Emblem
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
Posted by Michael Gaigg
- 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]
Posted by Michael Gaigg
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
Posted by Michael Gaigg
- 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
Posted by Michael Gaigg
- 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 top of the sandwich, like thinking outside the bun hehe.
- The ROI of UX: Proving the Value of User Experience Design (by Erin Lynn Young) - "[...] holistic consideration of the user’s perspective will reap larger returns than other potential business investments", nicely said.
- 5 Web Files That Will Improve Your Website (by Alexander Dawson) - robots.txt, favicon.ico, sitemap.xml, dublin.rdf, opensearch.xml - yes, you can!
- 10 Free Wireframing Tools for Designers (by Grace Smith) - Online wireframing, I love it and you should too.
Redundancy is NOT bad!
Posted by Michael Gaigg
Traffic light hell
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?"
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Go figure: 10 Comic Strips that have Something in Common
- Powerpoint Wireframe Stencils as Free Download
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 3 weeks ago
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...