Thursday, October 16, 2014

Evaluating HCI Aspects of a website


Introduction

Usability is a fundamental concept for Interaction Design research and practice, since the dawn of Human-Computer Interaction as an inter-disciplinary endeavor. It satisfies users’ needs in an efficient and effective way.

The prominence of HCI in the current and future of website development is not to be taken lightly. It has been shown that a large percentage of the design and programming strength of projects go into the actual website design. The interface is a fundamental part of making the site more successful, safe, useful, and functional and in the long run, more agreeable for the user.

The tools and techniques that have been developed have contributed vastly towards reducing costs of design and development and increasing productivity. Savings have been created through decreased task time, fewer user errors, greatly reduced user disruption, reduced load on support teams or staffs, the elimination of training, and avoidance of changes in maintenance and redesign costs. However the iterative design has been proven now to be more efficient and cost effective, and this is why software usability comes into the picture form the early phases of design; it is also checked throughout the different production processes. This comes in accordance with the user-centered design, and as pointed by, software products including websites only meet the goals of their producers once they have met those of the users; hence businesses should align the two and ensure that their software products suites the key scenarios of use.

Our report is structured as follows. Next section we will begin with a brief on website usability guidelines and then we will describe the different evaluation methods. At there we will give brief description about two evaluation methods namely heuristic evaluation and task based evaluation. After that we will then have a case study for an existing website. At there we will break down it into two parts. In part one we will describe a brief introduction on the website that we selected for our evaluation. And the next part we will present our results for the website we selected for evaluation using the two evaluation methods (Heuristic and Task based evaluation). Finally to overcome issues and problems (to reduce issues in some certain level) that we identified from evaluation we will present our alternative design in the next section.

Website usability guidelines

The research who was done by Neilson and Hackos clearly emphasized that for software to be usable, it has to comply with the following five attributes namely memorability, efficiency, learnability, user’s satisfaction and few errors. Our key objective here is to study usability of web content; we better focus on how those attributes were further explained by Nielsen, after adapting them for web navigation and other main functionalities in the selected website (Venosc). According to Neilson and Hackos research they summarized above attributes as fallows. Users should be able to learn the basic navigation options of a web page and to find their desired content easily. They also should be able to reach such content in an efficient and quick way, and be able to remember the navigation options if they happen to return to the website after a while. Users should also be guided to follow the right links until they reach their preferred content, and if they happen to make mistakes during this process, they should be able to recover by going back to their previous page or content effortlessly.

But when we see beyond there are divergent factors that make website navigation problematic. The content and the structure of the websites are typically built after the inner structure of the content providers, rather than the users' needs. Moreover the content itself often needs to be upgraded in the web, specially when it is originally intended to be provided in a printed form. Finally, web pages are sometimes not subject to the same quality measures for printed materials, due to the lower cost of creating the former. To motivate users for efficient access to the contents large websites also we can provide shortcut keys in parallel to the navigation procedure for experienced users.

Evaluation Guidelines

Usability evaluation can broadly be categorized into inspection and testing methods. In the former, experts study and report usability issues, while in the latter, issues are discovered by observing the users during their interaction with the interface. Four narrower evaluation categories were listed by Nielsen in 1994: formal, informal, empirical and automatic. We will focus on the informal and empirical evaluations here, as the first one has been abandoned in favour of the formal methods and/or grouped into other methods such as cognitive walk, which is beyond the scope of our evaluation.

Heuristic Evaluation (Informal)

Heuristic evaluation is a good method of identifying both major and minor problems with an interface. In heuristic evaluation method a small group of experts are asked to evaluate the interface in accordance with a set of usability criterions or heuristics. They added that each of evaluator should conduct the evaluation independently of the others, and they should only be allowed to communicate after completing their evaluation. Under our heuristic evaluation we followed by Nielsen’s ten heuristic guidelines presented as follows.
    • Visibility of System Status
    • Match between the system and the real world
    • User control and freedom
    • Consistency and Standards
    • Error Prevention
    • Recognition rather than recall
    • Flexibility and efficiency of use
    • Aesthetic and minimalist design
    • User can recognize and recover from error
    • Documentation and help

      Normally we experts or evaluators begin heuristic evaluation by visiting the system to get a general feel of its flow and then they should revisit it at least one more time to evaluate the specific components of its interface and their functionalities. As an example you can see that as below.
        

      Problem Found
      Severity
      Heuristic Number
      Violated Heuristic
      Translation for languages doesn't work properly
      3
      #5
      Error Prevention

      Here rating usability problems according to their severity facilitate the allocation of resources to fix the most serious problems. Severity ratings are a combination of frequency, impact, and persistence. Using heuristic evaluation it is easy and cheap and can help in finding many usability issues quickly. But however some issues can be missed, especially the business-specific or domain-specific ones.
      Task based evaluation (Empirical)

      Task based evaluation is part of a formative evaluation to redesign the interface, or the whole application, based on users' responses, experiences and problems. Users carry out some specific tasks which are given by experts or evaluators and it involves the major system functionalities. While the users are doing their tasks, evaluators / observers should document the results such as the number of tasks accomplished, time taken and/or number of pages navigated by each user. And also observers can give help to users to accomplish the given tasks, but however they should take notice with the incidents where help was needed. They also suggested that discussions taking place between the participants afterwards are helpful in collecting their reactions and suggestions for improvements. Also, the observers may ask the participants to be more verbose and explain what they are thinking about at the moment, the actions they are trying to take, and why such kind of actions takes.

      Usually involve five participants for this kind of evaluation. The number of participants is not the only decisive factor here but also the design of the tasks, their goals, the diversity of the participants and their skills play a role in the number of their usability findings. Below we listed the five requirements for a good task based usability test.
        • Setting the test goals
        • Setting the characteristics of the participating sample
        • Setting the scenarios and tasks to be done
        • Setting the measurement criteria
        • Setting the testing environment and needed materials

        Tuesday, March 25, 2014

        Develop a simple Application with Meteor JS

        Introducton to Meteor JS
        Before move on to the sample Application implementation I will give a brief introduction about Meteor JS. Meteor JS is an open source platform built on top of Node JS for building web applications very rapidly (Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices). It uses Node JS to deploy and seamlessly combines packages like Mongo DB (a NoSQL database system), jQuery (a fastest javascript library), etc. Meteor has some set of principles as fallows. 
        • Don't send HTML over the network. Send data and let the client decide how to render it.
        • Write both the client and the server parts of your interface in JavaScript.
        • Use the same transparent API to access your database from the client or the server.
        • On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
        • Make real-time the default. All layers, from database to template, should make an event-driven interface available.
        • Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
        • The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.
        A Meteor JS application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML templates, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how we choose to structure those components in our file tree.
        The only server assets are JavaScript and files in the private subdirectory. Meteor gathers all JavaScript files, excluding anything under the client, public, and private subdirectories, and loads them into a Node.js server instance inside a fiber. In Meteor, server code runs in a single thread per request, not in the asynchronous callback style typical of Node.
        Meteor JS provides the variables called isClient and isServer so that code can alter its behavior depending on whether it's running on the client or the server. Therefore rather using two separate functions to control the client and server side events, we can share only one reusable function for both client and server side.
        HTML files in a Meteor application are different from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load. 
         Sample Application   
        In this simple application I dynamically created tabs to store items within three categories namely breakfast, lunch and dinner. Each tab consists of menu options. For that purpose I designed a navigation menu to handle it.
        To define templates for the application I created a file in the project with the .html extension. In the file, make a <template> tag and give it a name attribute called “loadingTemplate”. Put the template contents inside the tag. Meteor will precompile the template, ship it down to the client, and make it available as on the global Template object. 
        • Fallowing html code will show how to load the template to the html body using meteor syntax.
        <body>
             <div id="outer">
                  {{> loadingTemplate}}
            </div>
        </body>

        • Template object for displaying merchant information is shown in the fallowing html code.

        <template name="loadingTemplate">
        <div class="span6" id="header">
        <table>
        <tr><td><label id="mName"><i class="icon-user icon-black"></i> Merchant Name</label>
        </td>
        <td><label id="mAddress"><i class="icon-user icon-black"></i> Address</label>
        </td>
        <td><label id="mHrs"><i class="icon-user icon-black"></i> Online Ordering Hours (PST)</label>
        </td>
        </tr>
        <tr>
        <td><label id="mDelivery"><i class="icon-user icon-black"></i> Delivery</label>
        </td>
        <td><label id="mFee"><i class="icon-user icon-black"></i> Delivery Fee</label>
        </td>
        <td><label id="pickup"><i class="icon-user icon-black"></i> Pickup</label>
        </td>
        </tr>
        <tr>
        <td><label id="mOrder"><i class="icon-user icon-black"></i> Order Minimum</label>
        </td>
        <td><label id="mMin"><i class="icon-user icon-black"></i> Delivery Minimum</label>
        </td>
        </tr>
        </table>
        <div class="container">
        {{>breakfirstList}}
        </template>
        <template name="breakfirstList">
        <div style="margin-bottom:10px">
        </div>
        <div id="tt" class="easyui-tabs" style="width:600px;height:450px;">
        </div>
        </template>

        The user interface for our example application is shown below. As you can see the tree tabs created dynamically using javascript.
         
        The below javascript code describes how to create the tabs dynamically. The function “addTab” getting a parameter called “title” and it checks that is there having any tab in the given title. If yes the tab is not added to the main menu. Otherwise the tab added dynamically to the main menu and set some attributes to it.
        function addTab(title){
           if ($('#tt').tabs('exists', title)){
               $('#tt').tabs('select', title);
            } else {
                var content = '<div id="'+title+'" style="width:100%;height:100%;">
                                     <div class="accordion" id="accordionid"></div></div>';
               $('#tt').tabs('add',{
                                        title:title,
                                       content:content,
                                       id:title+"M",
                                      closable:false
              });
           }
        }
        The below javascript code describes how to add option type menu list dynamically. The function “bfOptionTypes” takes a parameter called “bfItem” and each item should have item name, description and price and option types. For loop is used to add data dynamically to the html template according to the length of the array.

        function bfOptionTypes(bfItem){
            if (bfItem.optionTypes != null) {
                var bfItemLength = bfItem.optionTypes.length;
                var returnBfItm = "";
                for(var bfi=0;bfi<bfItemLength;bfi++){
                     var getOptions = bfOptions(bfItem.optionTypes[bfi]);
                     returnBfItm += '<h5>'+bfItem.optionTypes[bfi].name+'</h5>'+getOptions;
               }
               returnBfItm += '<br>';
           }
           return returnBfItm;
        } 
        The below javascript code describes how to add option type list dynamically. The function “bfOptions” takes a parameter called “optionType” and each option type should have option name and price. For loop is used to add option types dynamically to the item list according to the length of the array.
        function bfOptions(optionType){
           if(optionType.options != null){
              var bfItemOptionLength = optionType.options.length;
              alert("bfItemOptionLength:"+bfItemOptionLength);
              var returnBFItemOption = "";
             for(var g = 0;g<bfItemOptionLength;g++){
                 var optionValues = optionType.options[g].name+" "+optionType.options[g].price;
                 var groupName = "BFOptions"+optionType.name;
                 returnBFItemOption += '<input type="radio" name="'+groupName+'"       value="'+optionValues+'">'+optionValues+'&nbsp';
             } 
             returnBFItemOption += '<br>';
        }
           return returnBFItemOption;
        }