Category Archives: User Experience

Simple and basic CSS3 properties that change everything

By now the world has pretty much agreed upon the future of HTML5 and CSS3 – This is how new apps will be built, for the web and for multitude of other devices. There is no question native experience on a platform serves the best for the user, slowly but gradually apps are moving to the HTML5 model, primary examples being Facebook app, Netflix, USA Today, Financial times and several business/finance related apps.

CSS3 is awesome, it’s like magic. It suddenly makes your web app look cooler and less stressful. The biggest improvements over previous versions is the support for,

  1. Rounded Corners
  2. Box Shadows
  3. Text Shadows
  4. Gradients

Of course all the above are visible to the user only when they are viewing your app in a browser that supports these CSS3 properties. To lookup which properties are supported in which browser, take a quick CSS3 test.

I’ve been looking to refine the usage of these properties to make them look the best I can and come up with ideal values.

Here’s my current swatch for these properties.

  1. Rounded Corners – this is simple – at 10px border radius it looks like perfection, not more not less.
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
    
  2. Box Shadows – this is a little hard to get to, but with #999 a nice gray slightly blurred shadow, it seems close to perfect.
                -webkit-box-shadow: 3px 3px 10px 0px #999;
                -moz-box-shadow: 3px 3px 10px 0px #999;
                box-shadow: 3px 3px 10px 0px #999;
    
  3. Text Shadows – this is the trickiest part – because there’s more shadow real estate going on, and it’s harder if you have dark text on light color. This also depends on the background color surrounding the text, so adjust the colors according to your underlying theme.
    // light color text needs,
                -webkit-text-shadow: 0 2px 5px #333;
                -moz-text-shadow: 0 2px 5px #333;
                text-shadow: 0 2px 5px #333;
    // dark color text needs,
                color: #111;
                -webkit-text-shadow: 0 2px 5px #999;
                -moz-text-shadow: 0 2px 5px #999;
                text-shadow: 0 2px 5px #999;
    
  4. Gradients – I avoid them as much as I can, but when I need to I use saturated colors to compliment the darker one. Here’s an example of a glossy CSS3 icon using gradients.
    div.appIconCss
            {
                width: 48px;
                height: 48px;
                margin: 20px auto 0 auto;
                padding:5px;
                font-size: 2.3em;
                color: #ffffff;  
                -webkit-text-shadow: 2px 2px 5px #333;
                -moz-text-shadow: 2px 2px 5px #333;
                text-shadow: 2px 2px 5px #333;                   
                -webkit-border-radius: 10px 10px 10px;
                -moz-border-radius: 10px 10px 10px;
                background: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,
    		        from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
    		        color-stop(10%, rgba(255,255,255,0.2)),
    		        color-stop(10.5%, rgba(140,140,140,0.2)),
    		        color-stop(13%, rgba(140,140,140,0)),
    		        color-stop(13.7%, rgba(255,255,255,0)),
    		        color-stop(17%, rgba(255,255,255,1))) #2E79AB;
                background: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side,
    		        rgba(255,255,255,1) 0%,
    		        rgba(255,255,255,0.2) 72%,
    		        rgba(140,140,140,0.3) 74.5%,
    		        rgba(140,140,140,0) 85%,
    		        rgba(255,255,255,0) 95%,
    		        rgba(255,255,255,1) 160%);
            }
    

 

Designing Error Messages

Error messages are an important part of an application. Generally each application/system has a collection of error messages stored somewhere (I would use a dictionary of some sorts). From a UX stand point it’s important to phrase and design error messages and dialogs, in a way that tells the user what ‘exactly‘ just happened. There’s no point in covering technical issues with a generic error message such as “Service unavailable“, when it doesn’t do anything to help the user take any action based on that information. Provide them with what to do when a service is not available. Is the internet connection not available? Is your web service down for maintenance? Is it a windows service on user’s machine that didn’t start correctly on reboot?

Technially it’s always possible to go that one extra mile to figure out and tell the user exactly what just happened and provide them with links to help documentation or provide useful actionable information immediately available, most times, right on the Error Dialog may be.

I recently got this Error dialog, when I was trying to activate a tool, I entered my credentials and bam, I got this error.

It could have been more specific, as in I entered my credentials wrong or the web service it used to authenticate is not available.