Overview of the Nominated Website

User Interface (UI) design can make or break a website and is a key factor that has to be considered when developing a website. A poor UI design affects site usability and creates a negative perception among users (Lieberman, 2009). A study conducted indicated that websites with a poor UI had high rebound rates (Hausman, 2009). This implies that poor website design turns off customers and may adversely affect a business relying on a website to gain new customers. This applies to e-commerce businesses in which most of the transactions are done online. An e-commerce with a poor design is likely to have few visits which lead to poor sales and revenue (Lee, 2010). As such, it is important for web developers to consider UI aspects when developing websites.

Responsive Website Design (RWD) is an essential element of effective UI design which has gained popularity in web development the recent past. With the growth of smartphone technology, many people are using smartphones and tablets to access websites (Osman, 2012). A study indicated that smartphone devices are poised to overtake desktops as the primary tool for accessing websites (Poushter, 2016). Previously, web developers focused on creating websites for desktops. The emergence of smartphones implied that new design approaches had to be adopted to adapt websites to different devices. Many web developers adopted RWD which enabled them to make websites responsive in different kinds of devices. RWD gives responsiveness to websites which enhance their usability in different devices.

In this report, we are going to assess a website in the context of RWD. Emphasis will be placed on evaluating positive and negative UI aspects which could be affecting the usability of the site. With regards to RWD, a device simulator will be used to determine the responsiveness of the website in various kinds of devices. Key issues affecting the website UI design will be identified, and solutions that can be adopted to improve the website will be provided in the recommendation section.

Makezine.com was chosen to be evaluated in this website. It incorporates a blog which provides information on different DIY topics such as art projects, Lego projects, edible innovations, raspberry Pi projects, etc. (Makezine, 2016) The website provides guides on various DIY projects and gives detailed tutorials on different topics. The site main target audience includes people interested in DIY projects.

Makezine has various features which are designed to enhance user experience. Key features integrated into the website include navigation, search feature, comment system, posts, images, RSS feed, social media integration, and login portal. The website has a clear navigation which allows visitors to find information needed quickly. The navigation contains relevant links which are given simple and understandable labels.

Main Features of Makezine.com

Since the website has a plethora of content, a search box is included to enable users to find specific pages and information. The search feature is incorporated in the navigation is available on all pages of the website which enhances user experience (Chen, 2010). Additionally, the search feature gives users options to filter search results obtained.

As a blog targeting DIY enthusiasts, the website provides relevant information in the form of blog posts. The website provides quality web content such as guides, magazines, and posts that are aimed at educating the visitors.  The content provided include information that comes in various forms that are relevant to the audience. As part of the website’s marketing strategy, most relevant content is placed on the homepage.

A comment system is one of the key feature incorporated into the website. From a visitor’s perspective, a comment system is a vital tool that gives them an opportunity to provide feedback after reading a post they like (Cisinski, 2012). Disqus is used to power the comment system integrated into the website. Through this platform, readers can post their comments and reply or vote other readers’ comments.

The website includes spectacular images in its posts. Images are pivotal in attracting visitors to content posted, maintaining reader’s attention, as well as reinforcing the points made in the post (Cyr, 2009). Images are included in each post. Images are also displayed on the homepage with a short post description given at the bottom. The unique images included in the website play a key role in enhancing the visual appeal of the website to the target audience (Phillips, 2009).

RSS feed is another feature offered on the website. RSS is a crucial tool that offers blogs a way of syndicating content and distributing media (Samper, 2008). With new posts being added and existing posts updated frequently, RSS allows readers to remain updated with the new content posted on the website without having to visit it (Ebner, 2007). With the RSS, the website allows users to subscribe to their email newsletter.

The website integrates various social media platforms to improve sharing experience. Content on the website is meant to be shared to increase readership (Bernstein, 2010). Through social media integration, the website makes it easy for readers to share its posts in their social networks (Kaplan, 2010). The website has integrated various social media platforms such as twitter. s.

Additionally, the website has a user portal which can only be accessed by registered users. Users have to create an account and subscribe to one of the packages offered on the website. The subscription gives them access to a range of content including publication of tested projects, in-depth project reviews, skill-building tutorials, and inspirational stories.

Positive and Negative Aspects of the Website

The website has an easy and clear navigation which allows users to navigate and find the information needed. It incorporates sub-navigation which breaks down the menu options into groups. Once a visitor hovers the top-level navigation options, a drop down menu is displayed. This helps users to click the right content. The sub-navigation is simplified as it only has one level (Fang, 2007). This allows break down of navigation into simple decisions. The navigation options are given clear and easy to understand labels. As such, visitors are not confused about the purpose of the options available. The navigation is optimized to be of service to the website’s content. Visitors can have a glimpse of the site’s content by hovering the navigation and make a decision to view specific information. Also, it includes calls-to-action which enhances clarity and emphasis (Shackel, 2009).

The website UI design integrates HCI principles. Clarity is a key element of the website’s UI. The UI is designed to enable visitors to interact with the website effectively. The design is simple but effective. Different background colors are used for different sections of the website. The header and footer have a white background which reinforces the visibility of logo, navigation options, and footer content. The content section has a gray background and a color theme which matches content displayed.

The main logo and navigation constantly stay at the top of the page when navigating the site which makes it consistent. There is a call-to-action placeholder below the navigation which is separate from the content section. The homepage is divided into two parts. The top part displays three prominent posts with left post given a large space. The lower part is divided into three columns which separate blog posts displayed. The top part features popular posts whose categories are indicated with a hyperlinked red label.

In the homepage, hyperlinked images are used to appeal to users and direct them to featured posts. This is effective in encouraging visitors to take action. However, the first three images at the top have been stretched and look unprofessional. Generally, the layout looks organized, but the incorporation of adverts on the lower part of the homepage creates clutter. An example of this is that an advert appears as a normal post which may cause confusion.

Makezine has a responsive design that can be displayed on different devices. The website layout uses a fluid grid which restructures the layout in different breakpoints. Content and images are scaled to fit in any screen width. The menu is minimized and replaced by an icon in devices with narrow screen width. However, the layout was observed to break in some devices. The following are the results of the responsiveness conducted:

Views of Two Other Reviewers

The website is displayed on a Nexus 5X device as shown in the images above. As seen in the images, the layout has several responsiveness issues. The first three hyper linked images on the homepage appear to be stretched and are not appropriately separated. The placeholder containing these images seems to be static as it does not resize based on the height of the images. When the navigation is opened, it occupies a large space of the screen and can only be closed by clicking the layout outside the navigation.

Makezine website is displayed on an iPhone 6 device as shown in the images above. Various issues were noted in the website layout. As seen in the first image, the first three images on the homepage are not well-aligned. The container does not adapt to the adjusted height of the three images. The navigation also occupies a large space and contains unnecessary content that should be left out to enhance clarity and improve usability.

Makezine website is displayed on an iPad device as shown in the images above. While the layout adjusts to the width of the device, various responsive issues were observed. In the first image, the header is displayed appropriately with the logo being placed in the center and a menu icon provided to enable users to toggle menu. However, the first three images in the lower part of the homepage are not well-aligned and appear to be stretched. The toggled menu is well aligned but contains unnecessary content.

Two of my friends (James and John) who are web developers were also involved in the reviewing the website selected for this paper. James specialized in front-end development while John works as UI/UX designer. Both used Google device simulator to assess the responsiveness of the website. James reported that the website was somehow responsive on some devices, but some elements were not appropriately aligned. John noted that while the website adapted to the width of the various devices tested, it had responsive issues as some layout elements did not adjust well. These assertions align with the observations that I made when testing the website.

The device simulator is an integral part of Google Chrome browser which is used to test the responsiveness of websites. This tool has various advantages which include:

It allows users to test the responsiveness of any website against a variety of devices. The tool has two modes: responsive and specific device. Responsive mode makes viewport resizable while specific device mode makes the viewport to the exact size of the viewport of a particular device (Google Developers, 2017).

Recommendation for Improvement

Built-in device presets: The simulator includes most popular devices. The tool configures emulation of specific device characteristics when selected. It also gives users an option to set device resolution, emulate touch events and auto size text for web pages.

Custom device presets: Google device simulator allows users to add custom device if they find a specific device is not included.

While the tool offers a lot of benefits to testers, it has several limitations that should be considered. These drawbacks include:

Device simulator is not precise in showing the display of websites in various devices. While the device mainly tests the responsiveness of websites, the display shown on the simulator may vary with how a website is displayed on a real device

Device simulator has a lot of features that may confuse the average user. Hence, users have to learn how to use the tool in order to test their websites.

Besides Google device simulator, there are other online tools that can be used to check the responsive of websites. These tools include Responsinator, Am I Responsive, and Responsive Design Checker. Responsinator helps testers to view how their website will be displayed on different Apple devices such as iPhone6 as well as Android phones of various sizes (Responsinator, 2016). Am I Responsive is a website where a tester has to add a website URL to check the site’s responsiveness (Responsivedesign, 2016). One can use the tool to check the responsiveness of a site against various device types. Responsive design checker is a free web tool that allows users to test the site responsiveness on various devices including portrait and landscape mode (Responsivedesignchecker, 2016).

While the website is responsive, it has several issues that need to be resolved in order to enhance its usability. Attention should be paid to the navigation which affects how users navigate the site. The width of the site navigation should be increased to cover the whole screen in devices with small screen width. The menu toggle icon should be displayed even when the menu is displayed. Instead of hiding the icon when the navigation is displayed, the icon should be visible at all times. This will enhance the usability of the site as the user can easily toggle the menu on or off (Zaphiris, 2007). The navigation should also be simplified by removing social media links and email field visible when the menu is toggled. Removing this content will enhance the clarity of the navigation. Additionally, post categories should be added to the navigation as links to help users to easily find information within certain categories (Geng, 2015).

Importance of User Interface Design

The website should incorporate a responsive grid system to become fully responsive. While it adapts its layout depending on device type, the layout breaks in some devices. A responsive grid system can enhance the responsiveness of the site by ensuring each web element in the layout adjusts its size based on the screen width of the device used (Gardner, 2011). A uniform background color should be used in the content section to enhance reduce the clutter of the background image used on the homepage.

Conclusion

In this paper, we’ve assessed interaction and usability aspects of Makezine website. As discussed, the website has a simple and easy-to-use navigation which enables users to find information easily. However, the navigation lacks some options which could help a user to find specific information based on category. The menu also contains unnecessary content and does not incorporate best RWD practices. The website has a unique design which is enhanced by the contrasting colors used. Contrasting appearance enhances visibility of the website content. The website layout breaks when viewed in some devices which undermine site usability and diminishes its appeal to readers.

Therefore, it is imperative for the website issues to be resolved in order to improve its usability. Navigation should be simplified by removing any unnecessary content to enhance its clarity. It should also be optimized for smaller screens. A responsive grid system can be key in making the website responsive fully responsive on all devices. Changes to the website should be user-oriented to ensure improved usability is the end goal that will be realized at the end of the change process.

References

Bernstein, M. S., Marcus, A., Karger, D. R., & Miller, R. C. ,2010, April. Enhancing directed content sharing on the web. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 971-980). ACM.

Chen, Y. H., Hsu, I. C., & Lin, C. C. ,2010. Website attributes that increase consumer purchase intention: A conjoint analysis. Journal of business research, 63(9), 1007-1014.

Cisinski, D. C. ,2012. Blog comment on post “The mysterious nature of right properness”.

Cyr, D., Head, M., Larios, H., & Pan, B. ,2009. Exploring human images in website design: a multi-method approach. MIS quarterly, 539-566.

Ebner, M., Holzinger, A., & Maurer, H. ,2007. Web 2.0 technology: future interfaces for technology enhanced learning?. Universal access in human-computer interaction. Applications and services, 559-568.

Fang, X., & Holsapple, C. W. ,2007. An empirical study of web site navigation structures’ impacts on web site usability. Decision Support Systems, 43(2), 476-491.

Gardner, B. S. ,2011. Responsive web design: Enriching the user experience. Sigma Journal: Inside the Digital Ecosystem, 11(1), 13-19.

Geng, R., & Tian, J. ,2015. Improving web navigation usability by comparing actual and anticipated usage. IEEE Transactions on Human-Machine Systems, 45(1), 84-94.

Google Developers, 2017. Simulate Mobile Devices with Device Mode. [Online]
Available at: https://developers.google.com/web/tools/chrome-devtools/device-mode/
[Accessed 9 September 2017].

Hausman, A. V., & Siekpe, J. S. ,2009. The effect of web interface features on consumer online purchase intentions. Journal of Business Research, 62(1), 5-13.

Kaplan, A. M., & Haenlein, M. ,2010. Users of the world, unite! The challenges and opportunities of Social Media. Business horizons, 53(1), 59-68.

Lee, S., & Koubek, R. J. ,2010. The effects of usability and web design attributes on user preference for e-commerce web sites. Computers in Industry, 61(4), 329-341.

responsivedesign, 2016. responsivedesign. [Online]
Available at: https://ami.responsivedesign.is/
[Accessed 9 September 2017].

Lieberman, H. ,2009. User interface goals, AI opportunities. AI Magazine, 30(4), 16.

Makezine, 2016. Makezine. [Online]
Available at: https://makezine.com/
[Accessed 9 September 2017].

Osman, M. A., Talib, A. Z., Sanusi, Z. A., Shiang-Yen, T., & Alwi, A. S. ,2012. A Study of the Trend of Smartphone and its Usage Behavior in Malaysia. International Journal of New Computer Architectures and their Applications (IJNCAA), 2(1), 274-285.

Phillips, C., & Chaparro, B. ,2009. Visual appeal vs. usability: Which one influences user perceptions of a website more. Usability News, 11(2), 1-9.

Poushter, J. ,2016. Smartphone ownership and internet usage continues to climb in emerging economies. Pew Research Center, 22.

Responsivedesignchecker, 2016. Responsivedesignchecker. [Online]
Available at: https://responsivedesignchecker.com/
[Accessed 9 September 2017].

Responsinator, 2016. Responsinator. [Online]
Available at: https://www.responsinator.com/
[Accessed 9 September 2017].

Samper, J. J., Castillo, P. A., Araujo, L., Merelo, J. J., Cordon, O., & Tricas, F. ,2008. NectaRSS, an intelligent RSS feed reader. Journal of Network and Computer Applications, 31(4), 793-806.

Shackel, B.,2009. Usability–Context, framework, definition, design and evaluation. Interacting with Computers, 21(5-6), 339-346.

Zaphiris, P., & Kurniawan, S. (Eds.). ,2007. Human computer interaction research in web design and evaluation. IGI Global.