HS2031 Human Computer Interaction | Website HCI Analysis

Introduction

Human Computer Interaction or HCI is a concept that helps to analyze the design patterns and factors of a website or other Human-computer interaction mediums. This assesses the interface accessibility features that are involved in-between the user and the computer (Preece, Rogers and Sharp 2015). This report will carefully study the interface features of two websites, list the interactive features that they deliver, provide HCI based criticisms for both and finally make recommendations that might in the improvement process of the website’s user interface.

Rebel Sport Website

The following URL: https://www.rebelsport.com.au leads to the online business portal or the e-commerce website that Rebel have to sell their sportswear products, all around Australia. Rebel Sports is one of the finest online shopping website for all kinds of sportswear that range from t-shirts, pull-overs, lowers and shoes. The website has tie-ups with quite a handsome number of big names in the sportswear industry.

The web interface is filled with numerous accessibility features that may assist the users or the website visitors to browse efficiently and make their decisions in a hassle-free manner. It can be surely stated as a user friendly website as the options that are provided are clear and robust. The users will be colorfully greeted by the website through its homepage. The homepage, being the most important component of a website helps to depict the overall features of the website. Rebel sports has gone forward to fill their home page with almost every information necessary for a new visitor to be enlightened with before browsing the website. Their tie-ups with some of the most famous sportswear brands has been tactfully depicted in the homepage by placing the logos and web links of all those companies. This will help the website visitors to be more involved and entrust positive beliefs on the website and the business.

The offer sections are brightly represented in the home page. This helps to attract users towards browsing the website and sends out a clear message about the products that they are selling or discounting. Attractive offer promotion banners are put up in the website. The website has also made wise use of carousels to represent various important sections and provided efficient functionalities within them. This is indeed an innovation that they have implemented. The product thumbnails, information/review and purchase optionality are gracefully placed in pre-determined dynamic grids to avoid collision or confusion.

Offer carousel

The website has a set of navigation options available for its users. The primary navigation menu can be accessed in two different forms from the header menu. These are directly visible on the header and can in-turn also be available in a sidebar menu. This navigation menu takes the users to any product category page within the website that they wish to browse. The offer banners also act as navigator elements and land the viewers to specific product pages. The footer navigation links allow the user to navigate the necessary information regarding the website and also browse categorically. Social media links are also provided.

NickSali Website

https://www.nickscali.com.au/ leads into another Australia based e-commerce website doing excellent in their field, by the name of NickSali. They deal in furniture and home decodable products. They primarily exhibit a huge stock of furniture collection on their website ranging from lounges, dining tables, Television Units to Buffet Cabinets, sofas and more. The designs that they sell and exhibit look to be of high esteem. The web design is a unique one and will easily drag the eyes of the visitor at any hour of the day.

The home page of the website is rich in huge ballistic images of the furniture that the company offers. The images are huge enough to cover the whole screen. These images are primarily treated as links to the whole product catalog pages with more information about them or displaying some lucrative offer. The website also has a fixed Search bar, that allows visitors to search for their necessities from the website. The search bar has a nice animation to it, when clicked. The carousel advertisement area at the top of the home page showcases a wide range of offers that the website is promoting. Majorly, the website has a sepia tone to it, due to the ample use of the brownish shade in its pictures. However, they have elegantly used the white color to represent the logo and navigation bar elements, which give a sober look to the website (Mofarah 2013).

Use of high quality images

The website has two primary navigation areas just like most other websites of this era. The header navigation bar allows the users to browse through the most important pages within the website. The drop down menu allows a view of the sub-product menu as well. In the footer area, the newsletter form is present alongside site based information. The product navigation links are also provided at a scroll away from the top, in the home page. The primary navigation bar is situated on a highly transparent background and remains fixed.

Primary Navigation

HCI Analysis

The two website will be criticized based on the three most commonly used HCI principles, below.

As for the Rebel Sports website, they tend to fulfill most of the HCI criteria that can be considered for analyzing an e-commerce website. Their implementation principles are as follows:

• Availability: Rebel sports has a fair enough server uptime as compared to the other website that is being discussed here. They also have a good mobile responsive interface, which automatically scales down as per the screen requirements.

• Clarity: This is where the website performs poorly in some cases. The home page is too crowded with images and information. The adverts and offer links are bulked up in small congested div areas which is surely a negative mark for its analysis. However, the color contrast of black, yellow and white, which has been majorly used is attractive enough to keep the audience settled (Fairchild 2013). The products can also be reviewed by logged in customers, which is a good thing. The website also does too much in the navigation menus, trying to implement two navigation bars in the same place, as the side menu bar was absolutely not required in the desktop website. Also, the lack of a fixed navigation menu and the huge submenu are some drawbacks in modern day websites (Sørum, Andersen and Vatrapu 2012).

Huge Submenu

• Credibility: The website uses the brand logos with whom they have collaborated in purpose of the business and hence this brings in good credibility points before the customers. Also, the images have been used with clarity and offers zoomed view which is a good feature of the website. However, the website does not provide more than just one image of product. This may prove to lead some customers away from the website who would have liked to have a detailed views of the product they are willing to purchase.

In case of the Nick Sally website, the HCI comparisons will be as follows:

• Accessibility: This website too scales pretty nicely when it comes to testing mobile responsiveness. However, the images used in this website are too large to be loaded with agility. This greatly diminishes the server-up performance of the website. Customers may feel tired out by the long waiting time that the website pursues owing to the use of high quality images

Mobile responsiveness

Loading issue

• Clarity: Even though the website uses high quality images of their products and maintain clarity in their representation, they lack points in the design area. The navigation bar when scrolled down to the mid of the website, sometimes gets merged up with other information contents on the website, which is a definite poor design factor (Fairchild 2013). In addition, the product navigation menu, which is located in the middle of the page does not appear on the very first screen which does not provide the customers with enough information on the first look itself. There is no separation between the images and they seems to be piled up on one another while scrolling.

Navigation and info graphic mix up

• Credibility: Very little information is presented for the products that they exhibit. No review section or elaborate information are highlighted in a majority of the products (Baecker 2014).

Recommendations

Both websites are recommended to use better design concepts when it comes to present their navigation menus. They have both failed to utilize the navigation menu design principles. While Nick Sali should try to bring in a background color to the parent navigation bar while scrolling, Rebel should try to make the navigation options look simpler. Nick Sali’s website should try to make their images smaller, both in dimensions and size and further separate each other with borders or margins. This will not only enhance the look and feel of the website but will also reduce the loading time of the website.

Conclusion

The report helps to conclude that HCI concepts are necessary in the process of designing a website. This helps to identify the details of user and computer interaction which otherwise go unnoticed. The websites can then be enhanced based on the findings and recommendations.

References

Baecker, R.M. ed., 2014. Readings in Human-Computer Interaction: toward the year 2000. Elsevier.

Card, S.K., 2017. The psychology of human-computer interaction. CRC Press.

Fairchild, M.D., 2013. Color appearance models. John Wiley & Sons.

Mofarah, M.Y., Tahmtan, Z.S., Dadashi, M.T. and Banihashemian, S.H., 2013. How color affects marketing. Oman Chapter of Arabian Journal of Business and Management Review, 34(975), pp.1-9.

Nickscali.com.au. (2018). Nick Scali | Lounge, Dining & Occasional Furniture | Nick Scali Furniture. [online] Available at: https://www.nickscali.com.au [Accessed 14 Sep. 2018].

Preece, J., Rogers, Y. and Sharp, H., 2015. Interaction design: beyond human-computer interaction. John Wiley & Sons.

Rebelsport.com.au. (2018). rebel | Sports Shoes | Footwear, Clothing and Fitness Accessories. [online] Available at: https://www.rebelsport.com.au [Accessed 14 Sep. 2018].

Sørum, H., Andersen, K.N. and Vatrapu, R., 2012. Public websites and human–computer interaction: an empirical study of measurement of website quality and user satisfaction. Behaviour & Information Technology, 31(7), pp.697-706.