Michael Gaigg: Über UI/UX Design

26Oct0

Stop the Rotating Banner Sliders

Posted by Michael Gaigg

Stop

Stop

I'm not a big fan of the (auto-)rotating banner carousels but I have never been really able to articulate why. So I looked beyond my personal taste horizon and found two excellent points of view by my colleagues Neal Dinoff and Art Zippel.

Analytics

Neal Dinoff (Esri Marketing Analytics Manger) offers some quantitative insights:

Most people visit a website with a specific objective. They scan the homepage for any link they believe will get them closer to accomplishing their objective. Few stay on a homepage long enough to view a slideshow. Using the CrazyEgg analysis of click timing on the Esri.com homepage, the majority of visitors click a homepage link within 5 seconds. Our homepage slides rotate every 7 seconds. That means most visitors to Esri.com never see the second and third slide in rotation. At a conference I recently attended, IBM’s web metrics analyst confirmed their site had the same problem.

and Neal continues talking about organizational motivations of including carousels and explains that

Organizations like homepage slideshows because it's a way of placating everyone who desperately believes their special interest deserves/requires homepage presence. From the user's perspective, they are generally worthless. They don't solve a user problem or meet a user need. Homepage slideshows are usually the opposite of user-centered design.

User-centered Design

Arthur Zippel recently shared an article with a video (5 minutes) talking about how typefaces directly affect readability. As a result Art started looking at autorotating banners from the behavioral side and whether similar effects would apply and add to distraction and overall loss of comprehension:

Because my primary focus here at Esri is the website I'm curious if there is any correlation with the findings in their very specific study and comprehension. We know that website visitors scan content when they are on a web page even when they are on a desktop with no fear of crashing their chair into their coffee cup or being pulled over by the office texting police. We know that distractions play a large role in attention, and that attention plays a large role in comprehension. I think autorotation banners make it more difficult for users to focus on page content because they create a distraction away from page content.

Knowing this, it is worth considering that if, one of the primary reasons for autorotation banners are a desire to manage minimal screen real estate, then is it the most effective solution? From a user-experience perspective, it think the widespread use of autorotation banners is interesting. Based on specific content on a page (link) a user indicates a desire to see additional specific content only to be presented with a distraction (autorotation banner), this doesn't seem like a completely successful experience. And with Halloween coming up, might I say it could even border on diabolical and horrific 😉 Remember, this is an intentional action on the point of those who manage websites.

I am constantly reminded that a widespread, common, popular practice by very large companies has absolutely no intrinsic correlation to UCD best practices. If you believe that companies always conduct valid testing for what they put on a website and that what they deploy is transferable to all other companies and their goals, then I have a bridge for sale.

Solutions

  • Build a meaningful site structure and navigation architecture.
  • Provide relevant headers and content.
  • Use and show links that speak to the user's intention for visiting the site.
  • Spare the huge banner images in favor of smaller, more focused teaser pics.
  • Avoid thinking in organizational terms aka we need to satisfy manager XYZ and put up a nice banner image about his cause.
  • Stop thinking about what could be interesting to your users but rather identify the context in which your target audience looks for something on your page and how they arrived (through search engine, direct mailing, etc.)

Tim Ash offers even more reasons: Rotating Banners? Just Say No!

What are your Thoughts/Experiences?

27Mar0

Esri’s First Homepage – Esri.com Anno 1994

Posted by Michael Gaigg

Esri.com anno 1994

Esri.com anno 1994

Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):

1994 - www.esri.com launched

Gotta love this!

Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link.

Can't believe how far we've come in only 20 years.

24Jan0

Redesigning my Personal Homepage using Balsamiq Mockups

Posted by Michael Gaigg

I've been working for quite some time with Balsamiq Mockups now and it truly made my designer life easier especially because I'm able to:

  • Work through an idea and communicate it and iterate it
  • Use incompleteness to identify holes and relationships
  • Record and reflect what I am hearing and seeing
  • Capture my results and document them

Sure, smaller projects - like my personal homepage - might not benefit as much from mockups than larger ones, but it still helps me to settle on a design quickly (and rather inexpensively) before I get into the hassle of coding.

What is a Sketch?

A simply or hastily executed drawing, especially a preliminary one, giving the essential features without the details.

Beginning

Step 1) Sketch after some initial iterations

Step 1) Sketch after some initial iterations

First and foremost comes the concept. It grew in me over time, a little aha moment included.

I then sketched it using Balsamiq and refined it until I felt happy. Looks pretty much what I had in mind.

At this moment I'm not worried about color schemes, fonts or implementation specifics. I might have something in mind and almost certainly I know technical implications of my designs, e.g. can I include my tweets, even though I sometimes disregard them in favor of not limiting myself.

Most important at this time is that I sketch the WHAT I want to achieve, the HOW comes later.

Evolution

Step 2a) Including my tweets

Step 2a) Including my tweets

Step 2b) Adjusting the tweet element to be less obstructive

Step 2b) Adjusting the tweet element to be less obstructive

I rolled out my personal webpage and was happy... until I strongly felt that my tweets need to appear to give the page some dynamic flavor.

So I went back to the drawing board (my Balsamiq) and sketched out some possible locations for the tweets on the screen.

My goal was to keep the page simple and uncluttered.

Well, something has to give (or maybe not?). I wrestled with myself and convinced the purist in me that tweets would actually add value to the page by showing who I am and what I have to say which in turn could be attractive to whoever visits my site. The objective stayed the same: KISS, keep it simple, stupid.

So I had to find a location and a metaphor to include the tweet section without obstructing the page and overwhelming the message. I found that a speech bubble pointing from my name to the tweets to be the best metaphor.

Result

Step 3) Implementation... the result

Step 3) Implementation... the result

So this is what it boiled down to: http://www.michaelgaigg.com.

Ok, the mockups didn't help me to communicate ideas to my client or convince somebody of a better design choice, but they helped me to iterate through some samples before I dove into coding. It kept me from some of my frustrations of earlier days when I was more concerned about the looks before I actually knew where I wanted to go. It kept me on track and I hope that can be seen.

What do you think of my new personal homepage?

14Nov0

Design Guidelines: ‘About Us’ Page

Posted by Michael Gaigg

IT Solutions About Us page

Example of an 'About Us' page from IT Solutions

There are many reasons for improving the usability of your 'About Us' page. Unfortunately many companies, especially bigger and well-known companies, tend to underestimate the value that comes from a well-designed 'About Us' page or simply assume that there is no need to explain themselves to their users.

The 'About Us' page helps to establish and re-enforce Trust and Credibility. Users of different backgrounds may need to know who is behind the content or service. Should I invest in this company? Apply for a job? Write an article about their service? Order a product?

The best news over all is: a simple link on your homepage is cheap and easy and the benefits of a clean and well-structured 'About Us' page outweigh many times the effort of creating it.

Design Guidelines for 'About Us' pages

  1. Provide clearly visible link on homepage
  2. Label the link either “About ” or “About Us”
  3. Present content in ‘inverted pyramid’ layers:
    • Tagline: Few words or brief sentence summarizing what you do
    • Summary: One to two paragraphs about goals and main accomplishments
    • Fact sheet: Section that outlines key points and other essential facts
    • Details: Subsidiary pages providing indebt information about processes, company structure, philosophy etc.
  4. Disclose address

References