Michael Gaigg: Über UI/UX Design

16Aug0

Highlights of Week 32/2010

Posted by Michael Gaigg

29Jul0

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".

Tagged as: , , , , No Comments
13Jul0

Highlights of Week 27/2010

Posted by Michael Gaigg

As always, send me your link or mention it in the comments. Anything related to this blog is much appreciated by all of us. Thanks!

2Apr0

Highlights of Week 13/2010

Posted by Michael Gaigg

17Mar0

Web Design: Sexy versus Conservative

Posted by Michael Gaigg

Paris Hilton - sexy versus conservative

In this post I try to keep true to my promise to add some spice to the world of web design and usability: I will try to investigate the cons of designing "sexy" versus "conservative".

So far clients still owe me a consistent definition of what they mean by asking for a "sexy" or "conservative" user interface. I guess I have a hunch and we all probably feel the difference but eventually it boils down to subjective interpretations.

Photo credits: AlphaX/X17, Adrian Varnedoe, A. Than/Pacific Coast News

Motivation

Just for a moment think of who you would rather want to have a long-lasting relationship with? The Paris Hilton on the left of the photo (sexy) or the Paris Hilton to the right (conservative)? Ok, probably neither, but for the sake of the argument?

In the words of one of our consultants: make the design 'sexy' for our marketing department and 'conservative' for our users. What now? Really?

Let's try to look at the cons of either side in an unbiased way by using a funny dating analogy:

The Bad of too Sexy

Designing too sexy gives everything away for free and leaves you with nothing to hold in reserve

Users know within seconds whether a site is right for them or not, they smell the scent of usefulness and determine that what is offered is worth further time investment. One might call initial attraction a success but it is human nature to want something more if we cannot have it.

So keep certain things a mystery. Don't give everything away upfront or for free. It's OK to tease though.

A 'slutty' design may lower your general value

Your users may feel that they have a higher intrinsic value than you do. Therefore you are not really worth further attention or a long-term relationship.

Design for emotions but keep in mind that trust is only built when your users can take you serious.

Sexy design may show your less than desirable aspects

Surely skillful designers know that it is important to emphasize the attractive aspects of your business and hide the less attractive characteristics. But, trying to pretend being somebody or something that you are not will come across as fake and unreal.

Stay true to your values and represent who you are. Don't pretend to be young or sexy if you aren't.

The Bad of too Conservative

Designing conservatively may indicate a low self-esteem

'Playing it safe' can be caused by many things: traditions, missing innovation, dusty policies, organizational structures, stubborn managers. Whatever it is, it will be felt by the users and could be interpreted as old-fashioned, slow (to deliver), outdated or simply lame.

Being bold is important (having a skilled designer helps too). Engage modern technology and trends like the social web.

Designing conservatively may indicate discomfort with your own business

You might have a hard time defining your business or telling an attractive story of who you are or what you do. This means you are not wholly comfortable or happy with what you represent and therefore choose to show as little of yourself as possible. Holding back is very risky because users (clients) might not understand who you are and don't know why they should get engaged or continue spending their time on your site.

Work hard to make your content/service attractive rather than the appearance. Don't hold back with something that helps engaging users.

Designing conservatively may not catch your users

Design must stand out because it will make YOU stand out. In times where everybody and everything is available on the web it's more important than ever to be unique in your offering, precise in how your business is different (or better) to others and clear in your message. Your front-end should clearly communicate all that! Designing too conservative may ultimately result in fewer visits and engagements.

Be unique and clear about your offerings and communicate it through your user interface.

Conclusion

The purpose of (most) web designs is to engage people and build relationships. That's why appearance is so important and that's why you should not design in stereotypes (aka 'sexy' or 'conservative').

Try to be clear about what you offer and honest in how you present it.

Like with anything in life, make sure to do your homework, learn about your target audience (think google). This will tell you how to dress appropriately and make the date between you and your users a pleasurable experience and hopefully a long-lasting one as well.

What's your opinion? How do you design? Why?

5Mar0

Highlights of Week 09/2010

Posted by Michael Gaigg

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:
22May0

Beware of the Frankenstein Design

Posted by Michael Gaigg

Frankenstein Design

Frankenstein Design

"It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open..." (Chapter 5). Sounds familiar to us geeky programmers out there? Yes, and the root of all evil are clients that design their webpage from a sushi menu, picking whatever they like.

Usually I encourage my clients to look around, get inspired and show me what they like. It gives me a sense of how they think and into which directions they want us to go. But never forget: Clients identify problems, designers provide solutions! Understand why the client shows you a specific page or design element and what exactly they like in it. Don't feel pressured to include every detail in your final design otherwise you wake up at 1am facing a yellow-eyed creature and you'll end up with a Frankenstein Design.

Warning Signals

What are warning signals that your project might face a Frankenstein Design?

  • Client mentions Stakeholders too often. Money makes the world go round, but will eventually ruin the user experience.
  • Client fell in love with a bad design. Try to build solid knowledge about good and bad design principles so you can explain the pro's and con's of a particular design.
  • Client needs to please too many interests. It's understandable that every party involved wants to see their logo on the page, but honestly, one is enough 😉
  • Client decides on a color scheme. Besides corporate colors clients feel strongly about certain colors that either clash with your design, psychological theory or existing color schemes or are simply bad taste altogether.
  • Client has no idea at all. That means trouble! Not now, but once you are done. Guaranteed.
  • Got more?

What you can do

  • Listen. Hear what the client tells you and try to understand why they say it.
  • Feel. Sense what the underlying need is and translate it into design elements.
  • Talk. Speak up, don't shut up, don't wait until it's too late.
  • Fight. Pick your battles, don't let rules overrule what you think is right, at least voice it.
  • Reconsider. Don't get hooked to an idea too strongly, be open to erase your white-board drawings and start over.
  • Document. Make notes, sketch ideas, capture screens, summarize. Send these notes out.
  • CYA. Cover your ass, seek consensus and approval, set it in stone through written acknowledgments (mockups help).

Send me your experiences? What is missing on this list?

23Jan0

Powerpoint Wireframe Stencils as Free Download

Posted by Michael Gaigg

The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?

Powerpoint Wireframes

In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.

Free Download

Download Powerpoint Wireframe Stencils

During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.

Powerpoint Wireframe Stencils

Example Usage

Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for the Homepage of Eva Gaigg's redesigned webpage actress.at

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for a page inside the navigation architecture, in this case videos but also applicable for photos and other presentation items.

Mockup for the response form, probably a critical part of the application since this will be the butter on the bread.

Next Step: XHMTL Prototype

Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.

Help me to improve the stencils

I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates 🙂

Page 4 of 512345