Following the usability heuristics for UI design

While designing, it is extremely essential to avoid usability problems that may arise. Large companies conduct extensive user studies and heuristic evaluations, gathering feedback to ensure every feature on a page is intuitive and enhances user efficiency. This might not always be possible for both corporations and individuals. With smaller budget projects, time restrictions and numerous features to be added, this becomes more difficult. Following Jakob Neilson’s 10 Usability Heuristics for User Interface Design is an effective way to ensure most of the common issues that arise while designing are minimized.

Initial Screening

Evaluating the page by considering simple straightforward questions can assist in creating user friendly pages. e.g.:

“Will the user be able to understand his mistake after reading error messages in the forms?”

The answer to the question is easily a yes or a no.

Yes! Every message has detailed explanation what could have gone wrong

Or

No! there is a message here saying “Error”

Ensuring each and every usability principle is followed will significantly improve the page.

How to keep track of Usability issues?

While prototyping, features should be added with consideration to the usability principles. A check on all the suggested points could be done while creating the initial prototype or once it is complete. To make it simpler to remember these principles initially, I have developed a light weight jquery plugin that can be used to keep track of the responsiveness of the features of a page. It is available here. Using the plugin The plugin can be easily included in a page by adding its class.What it adds to the page is a small movable display area containing a list of heuristics principles, checkboxes to evaluate them and and a text area that opens up on clicking any principles to write comments. You can try it on jsfiddle

Usability Evaluation box

Usability Evaluation box

Text window clicked

TextArea Opened

Plugin in use

Plugin in use

It has the following features:

  • Resizeable
  • Draggable
  • Text/ Comment addition available
  • State Storage (If you check any boxes, this will be stored in the local storage and on refreshing it will be available. Similarly you can add text, open text area which will be stored and so will its position)

Would love to hear feedback on this plugin! So try it and create better user experiences.

JavaScript Templating Engines Basics

With developers realizing the various benefits of templating, their use has become increasingly common. Whether you want to build a Model-View-Controller (MVC) / Model View ViewModel (MVVM) application or even a simple JavaScript application, it is always preferable to have a clean code base to work with. This is where templating comes into picture. While building an MVC application you are almost certainly going to work with a templating engine.  The templates used for web development generally look much like the final output, with the same style and appearance, but the actual data substituted with placeholders.

When do I use templates?

As the logic being executed in the browser increases, the JavaScript front-end codebase becomes complex and very difficult to maintain, this is especially true of Single page Applications (SPAs) . Tempating addresses many common issues that are likely to make your JavaScript into Spaghetti code. Templating is a good solution :

  • When a lot of data is being frequently loaded from the server and the client needs to keep updating the UI.
  • When you want to separate presentation and logic in views so that the code can be easily readable and maintainable
  • When client side HTML rendering is required
  • When complex content needs to be added or updated in a page

How do I use them?

Templates can be used for various purposes and are a good choice in many situations to substitute plain HTML. A few simple examples where templates might be helpful are mentioned below.

  • While writing HTML, it is common to have code that can be rewritten as a loop over variable data. In such a situation, templates should pop into your head. E.g. A very common use case is a list of items. Lists can have 100s of elements. Below is an expected HTML output:

    <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> <li>Ice-cream</li> <li>Yogurt</li> <li>Sugar</li> ... </ul>

    Templates can greatly simplify this task. Using Handlebar.js, we can rewrite this to handle any number of elements. The template file looks like this

    <ul> {{#each item}}    <li>{{name}}</li>  {{/each}} </ul>

    Data fed to the template will be of the following format

    { item: ["Coffee","Tea","Milk","Ice-cream","Yogurt","Sugar"] }

    This can also be extended to a list of objects for which you want to output the same, even complex  structure.

    {{#each items}}{{name}} - {{cost}}{{/each}}

    Data for this list would have a format like the one below

    {  items: [ {name: "milk", cost: "$10"}, {name: "eggs", cost: "$5"} ] }

    • Instead of using javascript or a helper library to update the HTML when values are modified or added after ajax calls, you can use templates, which remarkably cleans up the code. e.g. Suppose the ajax call returns a list of grocery items and their ids and a HTML list needs to be created.Traditional jquery method:

      var list=""; for(var i=0; i< grocery.id.length; i++) { list += "<li id= grocery-"+ grocery.id[i]+"'>"grocery.name[i] + "</li>";} $(“#grocery-list”).append(list);

      Using Templates, a much cleaner separation of code and structure can be achieved.

      {{#grocery}} <li id=”grocery-{{id}}">{{name}}</li> {{/grocery}}

      Now the data can be easily passed to this template and it can be appended at the right place.

      • When there exists a chuck of code or structure that is being repeated in many places, you can create a template that can be reused.

Which one should I use?

There are a lot of templating libraries out there: Dust,Mustache,Handlebar, Underscore,EJS, Haml. You need to choose the right library for your purpose. Few things you should consider when deciding on a templating language:

  • Syntax: Can I easily understand the output my template will produce? Is creating the template intuitive?
  • Community: Does the language have a well-supported and active community?
  • Documentation: Is the documentation comprehensive?
  • Performance: What is the memory and CPU overhead?
  • Error prevention: How easy is it to debug errors in the code?
  • Standard: Is the language upto date with the latest industry trends and will it have future sustenance?

  One nice and relevant page I found to decide which templating language to use is http://garann.github.io/template-chooser/

Writing better web applications with CSS Preprocessors

Creating the front-end of a web application is fairly simple. With the growing number of utility plugins and libraries, a lot of functionality can be added by writing few lines of code and without consideration about the its construction. But problems generally arise when code is written without structure and ignoring the possibility and extent of changes in the future. Though writing CSS is easy,it can get really messy if not done right.

Scenario: Changing the Colour Scheme of a page
Let’s say I suddenly decide my new favourite colour is green and want to change my perfectly blended blue UI to keep up with my taste. The problem statement is pretty straightforward.  But do I actually manually change every shade of colour on all elements in my CSS files? Every tiny button? In a sizable application, altering data for the vast number of elements would be pretty much a waste of time.There has to be a better method and there is available in the form of CSS Preprocessors. A number of them are currently available: LESS, Sass, Stylus, Swith CSS, etc., with the former two a little more popular than others in their group. A CSS Preprocessor is primarily intended to make authoring CSS more productive, systematized and dynamic.

Lets see how Sass addresses the issue of changing a color scheme. The new main syntax of Sass is known as “SCSS”, and is a superset of CSS3’s syntax. So basically when you write CSS, you are writing valid Sass. But Sass has additional features that allow it to do powerful things.

In Sass we can define variables that can be used throughout the style-sheet. During translation, the variables are replaced with their values in the generated CSS document. As a result we can define certain colors that can be used throughout our page. We can darken and lighten these colors to create a complete color theme.

 style.scss

$primary_color:#3e879f; //Create variables that can have global Scope
ul.sidebar_menu {
  li {
  padding: 4px 0;
  margin: 2px;
  background-color: darken($primary_color,20%);
  border: 2px solid lighten($primary_color,35%);
  }
}

Compiled style.css

ul.sidebar_menu li {
padding: 4px 0;
margin: 2px;
background-color: #214956;
border: 2px solid #b0d4e0;
}

Here is a mock website I created.The color scheme has been designed using Sass and “darken” and “lighten” functions.

Blue website

Mock website with blue theme

By just changing the values of 2 variables- $background_color and $primary_color, the whole look of the website has got changed.

Green website

Mock website with a green theme

Though native css has implemented variables, it is still an experimental technology and the compatibility will all browsers is not guaranteed.

Sass has a ton of other amazing features.

  • Mixins: repeatable code written in one section of the file that can be inserted anywhere. Sass also allows the use of operators(+,-,/,*)
    Sass Code

    @mixin button-dimensions($height,$font) {
    width: $height*3;
    height: $height;
    font-size: $font;
    }
    .small {
    @include button-dimensions(20px,10px)
    }
    .medium {
    @include button-dimensions(30px,14px)
    }

    CSS Output

    .small {
    width: 60px;
    height: 20px;
    font-size: 10px;
    }
    .medium {
    width: 90px;
    height: 30px;
    font-size: 14px;
    }

  • Nesting: so you can make your css modular and easy to understand.
    Sass Code

    header {
    background: darken($primary_color,35%);
    padding: 2px 40px;
    height: 90px;
      .logo {
      float: left;
      padding-top: 12px;
    }
    }

    CSS Output

    header {
    background: #0c1a1f;
    padding: 2px 40px;
    height: 90px;
    }


    header .logo {
    float: left;
    padding-top: 12px;
    }

  • Conditionals (If-else statements) and Loops (for & each statements)
    SASS Code

    p {
    @if 2 + 4 == 2 { border: 1px solid green; }
    @else { border: 1px solid blue; }
    }

    CSS Output

    p{
    border: 1px solid green;
    }

  • Functions: To return the computed values
    SASS Code


    @function my-calculator ($number1, $number2){
    @return $number1 + $number2
    }
    p {
    padding: my-calculator (10px, 5px);
    }

    CSS Output

    p {
    padding: 15px;
    }

  • CSS Authoring Frameworks like Bourbon and Compass that allow you to include predefined functions for common tasks like setting background gradients and border radius in your Sass. The generated CSS takes into consideration browser compatibility.

And many more features you should take advantage of.

Cons: Nothing!

Most of the CSS preprocessors have these functionalities available in one form or the other. So lets start using them already and write css faster and systematically!