Michael Gaigg: Über UI/UX Design

18Sep0

15 Outstanding Examples of Braille in our World

Posted by Michael Gaigg

Braille can be found everywhere. Some findings are real gems, love the McDonalds braille lunch menu which is even advertised on drive-through windows in corporate locations - yes, exactly, didn't know they had driving test in braille yet. I'd actually opt for scratch and smell menus at McDonalds - ok, that's just me 😉

Love the braille bikini as well. Enjoy!

Hong Kong Disneyland (by tandaleo)

Hong Kong Disneyland (by tandaleo)

Wine label (by adactio)

Wine label (by adactio)

Japanese beer (by preetamrai)

Japanese beer (by preetamrai)

Medication (by Thijs van Exel)

Medication (by Thijs van Exel)

Graffiti (by John Kannenberg)

Graffiti (by John Kannenberg)

Monopoly (by Tostie14)

Monopoly (by Tostie14)

Google (by johnbullas)

Google (by johnbullas)

McDonalds braille menu in drive through (by John C Abell)

McDonalds drive through (by John C Abell)

McDonalds lunch menu (by nothingedifying)

McDonalds lunch menu (by nothingedifying)

Bike racks (by alex_lee2001)

Bike racks (by alex_lee2001)

Cake to celebrate the bicentenary of louis braille (by moirabot)

Cake to celebrate the bicentenary of louis braille (by moirabot)

Playboy (by 1980Andrew)

Playboy (by 1980Andrew)

Playing cards (by beerboxerboy)

Playing cards (by beerboxerboy)

Map of Cambridge (by DrNick3)

Map of Cambridge (by DrNick3)

Don't touch (by mako)

Don't touch (by mako)

Bikini (by tussenpozen)

14Sep0

Go figure: Hierarchy of Digital Distractions

Posted by Michael Gaigg

I'm still smiling about David McCandless's Hierarchy of Digital Distractions, a visual representation of digital things that matter to us. Well, some of them more than others.

In the shape of a pyramid the illustration reminds us of the order of importance model as suggested by Maslow's hierarchy of needs where the most fundamental need - earning our bread and butter (any kind of actual work) - is at base. Activities higher in the pyramid require more of our attention and 'trump' the activities below. Moving up in the pyramid means re-prioritizing activities by focusing on lesser important but subjectively more fulfilling needs.

The Hierarchy of Digital Distractions

The Hierarchy of Digital Distractions

So, if you in the midst of a phone call on one of those ancient Landlines, a New Voicemail will catch your attention which in turn will be trumped by a Mobile Phone call in silent vibrating only before the next Text Message comes in which obviously is not as important as a Mobile Phone call. Beware of buying an iPhone though because anything happening on your iPhone will overpower the before mentioned.

An email from a romantic partner will always rule over any skype call and a new message from your online dating service which is in return more important than an @message on twitter, a message on facebook or a new contact on flickr. All this happens is fine until one of your devices crash or your partner shuts the lid of your laptop on your fingers.

What's your funny interpretation?

8Sep0

Design Guidelines: Print Stylesheet

Posted by Michael Gaigg

One of the most elegant techniques in web design is the use of a print stylesheet to control the style of a webpage on a hardcopy. Being so easy and cheap it is by far the most undervalued technique out there.
Often overseen bonuses are

  • adding copyright statements or thank you notes,
  • controlling which elements should not be seen (remove menu, commercials,...) and
  • in general ensure that the printed page is legible (contrast especially for links, fonts, ...).
Results of applying a print stylesheet to the page

Results of applying a print stylesheet to the page

Design Guideline for a Print Stylesheet

  1. Make page legible
    • Use serif font family (e.g. Georgia)
    • Use points (e.g. 12pt)
    • Ensure good contrast (e.g. color: #000; background: #FFF)
  2. Maximize paper use (e.g. width: 100%)
  3. Hide elements not relevant to print (e.g. display: none)
  4. Add content relevant to print (e.g. spell out links, thank you note)
  5. Use correct markup to reduce amount of styling (e.g. h1, h2,...)

How it works

Embed an extra stylesheet designed for print media into the page.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

This stylesheet takes effect when a user invokes the print function of the browser and overrules style elements in other stylesheets on the page.

Then either provide a button or link that triggers a javascript function to print the page or have the user go through the browser's menu, even print preview would show you the expected layout already.

<a href="#" onclick="window.print();return false;">Print page</a>

I know, evil javascript, but hey, if turned on it works cross-browser (except IE6 with multiple IE versions installed).

Code sample

I recognize that many samples can be found on the web but I also found them incomplete in many cases. I don't claim to be compete myself, but I really like with what I came up with and most of all would like to hear your comments and feedback or even better references or links where you applied it to.

Download sample code

index.htm

<html>
<head>
<style type="text/css" media="all">
@import "main.css";
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="wrapper">
<div id="statement">Legal statement and thank you note.</div>
<div id="header">Header</div>
<div id="content">Content plus <a href="http://link.com/">Link</a></div>
<div id="footer">Footer</div>
</div>
</body>
</html>

main.css


/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
#wrapper {
background: #FFFFFF none repeat scroll 0%;
margin: 0pt auto;
width: 600px;
}
#header {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
#content {
border: 1px solid #CCC;
background: #EEE;
margin: 5px;
padding: 5px;
height: 200px;
}
#footer {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
a:link, a:visited {
border-bottom:1px dotted;
color:#AE4F0C;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#333333;
}
a:hover, a:focus {
border-bottom-style:solid;
color:#D03900;
}
a:focus {
/*background:#FFFFCC none repeat scroll 0%;*/
}
#statement {
display: none;
}

print.css


body {
font-family: Georgia, serif;
background: #FFF;
color: #000;
font-size: 12pt;
}
#wrapper, #content {
width: auto;
height: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: #000;
background: transparent none;
}
#content {
margin: 10px;
}
#header, #menu, #sidebar, #footer, .noprint {
display: none;
}
#statement {
display: block;
border: 1px solid #666;
padding: 10px;
}
a:link, a:visited {
color: #781351;
background: transparent;
text-decoration: underline;
}
a:link:after, a:visited:after {
content: " [" attr(href) "] ";
}

References:

3Sep0

Free book online: The Principles of Successful Freelancing

Posted by Michael Gaigg

I know this might be a little off-topic but nevertheless useful to many of us. The book 'The Principles of Successful Freelancing' of Miles Burke is available for free to download (only valid for the next 10 days starting today), so get it now!

Contents

  1. Considering Freelancing?
  2. Prepare for the Transition
  3. Manage Your Money
  4. Set Yourself Up
  5. Win the Work
  6. Give Great Service
  7. Achieve Work–Life Balance
  8. Where to from Here?

About the author

Miles Burke has been creating web sites since 1994. In 2002, Miles founded Bam Creative, an award-winning Western Australian web company. Miles serves as Chairperson of the Australian Web Industry Association, and has been awarded for his entrepreneurship in recent years; he’s a recipient of the Contribution to the Web Industry award in 2005, winner of the WA Business News’ 40under40 award in 2007, and appears in the 2008 edition of Who’s Who in Western Australia. Miles can also be found writing at Miles’ Blog.

Links for freelancers

Have more useful links? Post them in the comments section.

Suggested reading:
28Aug0

Presentation: Wiki – the right tool for my organization?

Posted by Michael Gaigg

Finally I got my head around posting a presentation I gave last March. The title is "Wiki - the right tool for my organization?" and had the purpose of introducing the concept of a wiki to a group that was about to install a wiki within their department.

Background: About three years ago I went through the effort of evaluating existing wiki platforms, installing/hosting it for our department and keeping it alive for the next two years before it got sacked. I'm here to tell you why it didn't work out in the end.

Characteristics

I jump right into the characteristics (the slide "Characteristics" is duplicated in the presentation on purpose) because I found understanding them key to a successful implementation. That's why once more I want to emphasize on the issues that need to be met in order to successfully implement a wiki, for example if your company has no culture of sharing content or employees are reluctant to give up ownership of their code, a wiki is most likely not the ideal collaboration tool.

These are the characteristics of a wiki:

  • Perpetual work in progress
  • No one owns the content
  • No specific organization (hyperlinks)
  • Anyone can edit other people’s work
  • Discussion area for each page
  • Version control: list of all changes made to a page

Critical Success Factors (aka truth about a wiki)

Only implement a wiki if you feel comfortable you can meet the following critical success factors:

  • Only 10% contribute; only 1% on a regular basis.
  • Obey the characteristics of a wiki
  • Power to the people
    • Trust the user
    • Authority to change something
    • Refuse defined structures

My previous experience taught me that implementing a wiki into your organization is doomed to fail if one is not aware of their importance and therefore

  • overestimates the reach and participation,
  • neglects the characteristics of a wiki,
  • or doesn't want or cannot give power to the people.

The truth is, only 10% of users contribute to a wiki and only 1% on a regular basis. If you have 100 employees you can expect between 1 to 10 of them to contribute and the rest to consume - which in turn will lead to lesser contribution and lesser consumption over time. Wikipedia works well because there are millions of users where 1% is still significant number to keep up quality content.
The argument of mandatory (or even monitored) participation runs directly against the characteristics of a wiki, is counter-productive and will result in your wiki failing.

Choosing a wiki: What to consider

Obviously there are many criteria and features that will directly affect your choice. I recommend Comparison of wiki software as a starting point for finding the right software but I wouldn't be surprised if you ended up with MediaWiki which is the used by wikipedia for one simple reason (besides its free usage under the GPL license and its huge community): the MediaWiki syntax is widely used and makes actually sense to learn - because it is wikipedia 😉

Criteria

  • Cost (open source license)
  • Programming language (PHP, C#, Java)
  • Data backend (File system or DB)
  • Extensibility & user community

Features

  • WYSIWYG editing & Syntax
  • Version control & Discussions
  • Permissions & Security

Keys to get a wiki going

Once you've decided to go ahead and install a wiki, what can be done to make it successful?

  • Find dedicated helpers
  • Partner with groups/people related to your mission
  • Offer structural templates for new pages
  • Add some content to major categories
  • Do lots of marketing
  • If possible, offer training

Do you work with wikis?

What are your experiences? Do you use a wiki in your company? How do you use it?

3Aug0

Website Analytics I: Browser Support

Posted by Michael Gaigg

Which browser platform should we design for? To most web developers this question is a nightmare and dilemma at the same time, but yet again we face it almost on a daily basis. Just to show you how difficult an answer might be is the disparity between two projects I'm involved in, one for a federal government body that by definition only supports IE6 and another that is expected to be finished in 6 months and therefore was hoping to target IE8. Are these expectations realistic?

Analytics

Let's have a look at some website analytics that were collected over the past year (July 2008 - July 2009), taken from Fanposter.org, a social media website with over 5000 registered users from almost 100 countries and collected through Google Analytics.
Note: While I'm aware that the audience of this website might not be representative for all age groups or countries/regions, it still provides valuable hints about browser usage and trends.

Lesson 1: Internet Explorer on the fall

Internet Explorer is historically bundled with Microsoft Windows Operating Systems. IE6 was released August 27, 2001 just months before WinXP; IE7 was released October 18, 2006 and included with Windows Vista and Win Server 2008; IE8 final was released March 19, 2009 and will be included with Windows 7.

Figure 1: Website Analytics, Browsers Comparison

Figure 1: Website Analytics, Browsers Comparison

The combined total market share for Internet Explorer over the past year was 76.5% but the trend shows a clear decline over the past months from 74.0% in May to 68.8% in June and 53.9% in July.

Will this trend continue to hold true?

A lot will depend on the upcoming release of Windows 7 in October 2009 with Microsoft's power in reaching the people to upgrade their browsers. But almost certainly Microsoft will loose its dominant position of 95% in 2002 and 2003 (IE5 & IE6) or over 75% in the past year to its numerous very capable competitors.

Lesson 2: IE8 on the rise

Figure 2: Website Analytics, Browsers Comparison, Internet Explorer

Figure 2: Website Analytics, Browsers Comparison, Internet Explorer


When comparing the 3 current versions of Internet Explorer out there (IE6, IE7 and IE8 with IE5 and lesser not appearing in the analytics anymore and therefore being disregarded) it seems to be evident that IE8 is on the rise. Though the really surprising observation is that this increase cannot be accounted to users abandoning IE6 but rather to users upgrading their version of IE7. How come? The answer seems to lie in fact that many companies and their IT departments as well as governmental bodies still continue to hold on to and enforce the use of IE6. Can Microsoft overcome these - mostly security-related - concerns through IE8?

Lesson 3: IE6 might not die as soon as we all may wish

Figure 3: Google Trends

Figure 3: Google Trends; The spikes D, E & F indicate the introductions of Beta 1 (March 5, 2008), Beta 2 (August 27, 2008) and Final respectively.


As discussed above IE6 is still a requirement for many users. A quick look at Google Trends reveals that searches for IE6 (Figure 3: blue line) have been pretty stable over the past 4-5 years while searches for IE7 (Figure 3: red line) are declining and searches for IE8 (Figure 3: yellow line) are in the lead. This goes hand in hand with the observations in Lesson 2 above.

In the meantime let's join the numerous battles to kill IE6 like Norwegian Websites Declare War on IE 6 and IE Death March or more seriously at Bring down IE6. Joke or not, IE6 will be around for some more time and therefore needs to be considered if we want it or not.
It won't even help that Digg is discussing to drop support for IE6 or YouTube Will Be Next To Kiss IE6 Support Goodbye. Both sites don't need users that cannot upgrade IE6 e.g. due to limitations at work because exactly these users have limited access restricted by their companies anyway.

Lesson 4: Firefox stays on top

A very interesting observation is the fact that Firefox does a really great job in staying on top of things and keeping their user base up to date. In the last month of the observation period less than 5% of all Firefox users had a version lesser than 3, or in other words, the great majority of Firefox users was using version 3 and higher. And with versions 3.7 and Firefox 4 in the making, a huge base of motivated developers and fascinating plug-ins the future looks bright. Firefox's marketshare seems to climb steadily also, as of July 2009 it showed 32.1% (20.5% average over the past year) with the majority Windows versions and only 0.6% on Mac and 0.2% on Linux. Obviously we all love the high commitment to standards compliancy that makes developing web apps a blast, right?

Firefox 4 Mockup (Win Vista)

Firefox 4 Mockup (Win Vista)

Lesson 5: Chrome & Safari

Google Chrome was released December 11, 2008 and first received as Google's never-ending battle against Microsoft (see graphic by Federico Fieni) but more likely just another smart move to keep users on the web - the faster, the better - or like Ben Parr explains "Revenue = Amount of Time on the Web".

Google vs Microsoft: Chrome

Google vs Microsoft: Chrome

As far as marketshare is concerned, Chrome rose to 2.3% in July according to my analytics. This is still fairly small but not to be underestimated. In terms of testing Google's developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome". But what about Safari?

Safari accounts for 1.3% in the yearly average (with 1.2% on Mac and the rest on Windows). Should we test Safari with a marginal share like this? It really depends on your budget and company structure which might require unjustified additional resources for your QA team. Do the math for yourself: 1% of 10k visitors are 100 potential customers - is it worth the effort?

Lesson 6: Opera is the misunderstood genius

Opera shows an average of 1.1% with an unexpected peak in July 2009 - I need to continue observing where and why that came from. Needless to say, Opera is strong in European countries like Russia and on mobile devices such as mobile phones, smartphones and PDA's (personal digital assistants). It's a shame that Opera is not further ahead, it has been and still is innovator and spearhead in terms of new useful features as well as standards compliancy and implementation.

What are your experiences?

Without giving any decisive conclusions I'd like to hear your experiences or analytics to this subject. For which browser platform do you design for? What do you tell your clients when they ask you this question?

2Jul0

Free book online: Search User Interfaces

Posted by Michael Gaigg

Marti Hearst generously made her upcoming book "Search User Interfaces" available for reading online. She is definitely not a newcomer to the scene and the book for sure not a Best-Of compilation, moreover the book is written in an academic fashion that backs up its theses usability studies, log studies, or some other form of proof (like it!) - like Harry Brignull states: "Caution: actual thought may be required when reading this book."

Contents: Search User Interfaces

The book has two main parts: search fundamentals (Chapters 1-7) and advanced topics (Chapters 8-12).

0: Preface
1: Design of Search User Interfaces
2: Evaluation of Search User Interfaces
3: Models of the Information Seeking Process
4: Query Specification
5: Presentation of Search Results
6: Query Reformulation
7: Supporting the Search Process
8: Integrating Navigation with Search
9: Personalization in Search
10: Information Visualization for Search Interfaces
11: Information Visualization for Text Analysis
12: Emerging Trends in Search Interfaces
References
Index

Suggested reading:
16Jun0

The Three-?-stick

Posted by Michael Gaigg

The Three-?-stick is going around ... and and so it came around. Björn from the Webzeugkoffer (excellent webdesign blog in German) picked up the stick by answering 3 questions that I will answer now too:

The three questions

Which Editor do you use for (X)HTML and CSS?

I'm using Macromedia Dreamweaver. I'm still stuck at MX 2004, but I really got used to the color coding and other superficial things - it's like toothpaste, once you are hooked you'll never change again (don't ask for the trade pls).

...and notepad 😉

Which little tool became a true time saver for you?

Can't live without Firebug - seriously, can't live without it. That's not a little tool? Ok, what about ColorSet, love that also.

Flash - what do you think of that technology?

Call me a purist, but I'm really into DHTML. Unless somebody convinces me otherwise I can do what I need to do with HTML a JavaScript library like jQuery, Dojo, YUI or even the Facebook JavaScript Library.
I disliked flash when it got into 'mode' a century ago and still think that flash intros should die. Accessibility is still an issue also.

On the flipside our company created a really powerful ArcGIS API for Flex for building Rich Internet applications on top of ArcGIS Server, our internet mapping server. I might need to reconsider some of my previous believes.

I forward the three-?-stick to

15Jun0

ColoRotate – 3D color scheme generator with social component

Posted by Michael Gaigg

Following up my blog entry on How to Create a Color Palette for your Website I stumbled over a fascinating color scheme generator: ColoRotate.

Screenshot of ColoRotate

Screenshot of ColoRotate

What is ColoRotate

Set into motion by Michael Douma, the executive director of the Institute for Dynamic Educational Advancement, ColoRotate is a Flash-based application with a custom 3D display engine for visualization. When other palette generators are primarily focusing on the 2D color wheel, ColoRotate uses a prism to display color, luminescence, saturation, and brightness all in once. I found it very easy and intuitive to use and was able to produce a harmonious color palette within seconds (well, not that it was for any special purpose) and export the colors as CSS to my clipboard.

Community

Lazy registration

Lazy registration


Lazy registration with filled out information

Lazy registration with filled out information


Here comes the part that I love: Sign in using your google account to save and share schemes. Yes, that means one can in reverse search, get inspired and re-use existing user-generated schemes.

Loving it.

Note on the side: Loving even more the lazy registration process 🙂

Facit

Go, check it out. It's not just another tool in your design toolbox. Look out for the Creative Suite 4 (CS4) plugin to come and start showcasing your palettes and discuss them with the community.

Page 19 of 24« First...10...1718192021...Last »