Human- Computer Interaction Assignment Sample

Principles of User Centered Web Design

Human-computer interaction is a wide and a multidisciplinary field of study that primarily focuses on the design of computer interfaces and how they enable interaction with humans, i.e, the users. In today’s world, HCI has grown to almost cover the wide area of all the forms of Information Technology. The field aims to make interactions between computers and human as natural as it is to conversate with a person and yet many products fail to achieve even the basic sense of resemblance to the natural activities. The goal is to audit and figure out what could create an intuitive User Interface. Various attempts have been made in the literature to collate the concepts of Human Psychology, Emotional Design, and data-driven design processes. 

At the core of the HCI, it boils down to understanding what a computer software means to a user, and therefore leveraging that logic for building intuitive designs and interfaces that could create a natural and comfortable experience for the user.

Modern-age websites have realized the importance of simplifying and neutralizing their user interfaces and the behaviour of each element on the website to guarantee a clutter-free and comfortable user environment. For example, E-commerce websites can be considered as virtual versions for real-life grocery stores. Hypothetically, If a person was to enter a grocery store looking to buy a pack of almonds with good nutritional balance, a person is most likely to buy the pack that most easily establishes itself as a “Nutritious Pack Of Almonds”. The e-commerce websites tend to replicate this natural experience of surfing a real-life store by simplifying their search results and limiting their interactions with the things that they are not looking for, to make it easier for them to find the things amidst a pool of hundreds of other commodities just like in a real-life store (Dix, 2017). Thus one could also understand that HCI aims to replicate the experience of natural and real-life interactions while interacting with graphical interfaces on planar screens like on a computer, smartphone or a tablet. For this reason, graphical interfaces on web applications and computer applications have rather been skeuomorphic for a long time, as it intended to replicate shadows and 3d properties of real-world objects. However, as users now in the modern age, spend a similar amount of time interacting with 2d screens that they do while interacting with real-life objects, neomorphic designs that are simpler and more suited for being displayed on planar surfaces are increasingly being adopted by UX designers across the world.

In this report, a library website for the college would be evaluated on qualitative and quantitative aspects of UX using the knowledge in the published literature and by exploiting the definition of HCI, that advocates simplifying Human-Computer Interactions to an extent that user feels comfortable with it. Knowledge derived from researching various models would be leveraged to draw an analysis of usability and user experience as well as data collected from questionnaires and surveys would be interpreted to derive quantitative conclusions. In the end, the issues would be outlined and comments regarding the scope of improvement for the website’s UI would be provided.

To achieve this, an instrumental model would be created using the common knowledge in the UI/UX field as well as by leveraging the published literature on the discipline. But, before devising an instrument to evaluate UI/UX of a website, it is imperative to establish the aim and objectives of the product being evaluated, which in this case, stands to be a website for the University of Canberra’s Library.

Establishing Key Objectives of The Website

It has been stated in the assignment file that the website that has been provided to evaluate as a project is the website of the Library of the University of Canberra. Before devising an evaluation instrument, it would only be justified to understand what is expected from a website like this.

• A Library website’s primary agenda is to provide students with the information of the print resources available in the library’s bookshelves and the resources available in the e format.
• All the information should be searchable and results should be provided in an easily readable format with a clear separation between different entities in the search result.
• The resource available should be labelled online and the resources available offline in the library should be labelled appropriately. I.e, the mode availability should be visible, and readable for the user.
• It should also provide easy access to the internal links like the account information, Study help groups, and other essential links regarding academic purposes.
• While being a website for the college’s library, it should also share a few important links for the information regarding college news, academic facilities, but should limit itself to only important links.

Purpose of This UI/UX Audit of the Website

The kind of evaluation done for this website is Heuristic evaluation. To put it in simple words, the website is tested on various parameters to establish its user-friendliness and usability. The field of HCI, Human-Computer Interaction, promotes a friendly and comfortable experience for any interface. The primary aim of any User Experience audit should be to evaluate the product based on aspects like difficulty experienced and time consumed by a new user to execute the primary tasks that a product is supposed to do (Ibanez, 2019). Thus, further in the audit report, The UI/UX of the website be evaluated qualitatively on its parameters like visual appearance, ease of understanding, delivery of the message, separation of information, aesthetics, consistency and familiarity while Quantitative analysis would be done based on the answers gathered from survey questionnaires designed to probe users regarding the user experience of the website.

This audit would provide the areas that the website’s interface is acceptable and the areas where the website’s interface and experience should be improved.

Thus the purpose of this audit could be summarized as:

• Evaluating User Friendliness concerning the Audience
• Evaluating the emotional response that it generates in the user
• Identifying key areas that perform well
• Identifying the areas that need improvement to execute their primary goals

Establishing the Audience for The Evaluation

As it is a website for the library of an academic institution that offers a range of courses of various levels like undergraduate and postgraduate, it is given that the website would receive traffic with diverse Intelligence and Intellectual Quotient. The audience would include research scholars, teachers, assistants, Freshman and Sophomore year students as well as Postgraduate and Diploma students from varied backgrounds like Arts, Engineering, Medicine and Business.

Thus, the user interface should be easy and generic enough to be easily understandable and navigable by a wide kind of audience. (Ishir, 2018).

Devising the Evaluation Instrument and Executing Evaluation

The evaluation Instrument is a set of questions that are farmed to provide a quantitative and qualitative analysis of the UX/UI to come to a holistic conclusion. The instrument is based on Jacob Nielsen’s 10 Usability Heuristics for User Interface Design and Shneiderman’s Eight Golden Rules.

Visibility Of The Status:

This parameter advocates that the system should be able to keep users informed about what is happening on the page through appropriate feedback systems like animations, colour changes, Input controls as well as via status bars, Progress Bars, and Navigational Elements like arrows.

Argument:

Upon Landing on the provided URL of the website, the information that is displayed on the centre is an image that says “Ask for Advisor”. The first thing that a user seeks after landing on a product page or on a website is the validation that one has landed in the right place. The message delivered by the image “Ask for advisor” is rather an attention grabbing image and deters one’s attention away from the centre Tab that says “UC Online Library”, thus potentially confusing a user after landing on the website. The pre-selected tab in the informative carousel is the “Online Study Help” tab which is designed in such a way that it takes attention in the sequence after the Primary Image. Thus, further depriving the user of any re-assurance of landing on a Library website for a few more seconds before the attention of the user is directed to the centred tab that represents the Online Library.

Furthermore, the carousel, unlike a dotted progress bar, comes with an unusual progress bar that can potentially take time to become familiar with, which may add to the confusion of the user regarding the happenings on the page. Adding to it, the navigational elements like directional arrows are translucent and may fail to provide the appropriate contrast on a screen set on low brightness, eventually becoming hard to locate and identify (Manzari & Trinidad-Christensen, 2013).

Quantitative analysis:

On asking 20 subjects who had never visited the website page, 14 subjects (Group 2) said that they could not spot the centre tab “UC Online Library” in the first 3 seconds and 6 subjects (Group 1) said that they were reassured that they had landed on a Library’s website in the first 3 seconds.

Matching System With the Real World:

Concepts of HCI advocates that a system should potentially speak the user’s language using concepts, phrases and words familiar to them, rather than using system-oriented terms.

Quantitative analysis

A group of 20 new users were asked to answer on a scale of 1-10, 1 being easily understandable and 10 being very difficult, about the level of difficulty they faced while understanding the phrases, vocabulary and words used on the page.

6 users gave a score between 3-5 on, while 10 users gave a score below 3 and four users experienced slight difficulty and scored between 5-7 on a scale of 10. Thus it can be seen that majority of the users are comfortable with the level of words used.

Aesthetic and Minimalism in Design

The concept advocates that dialogues should not contain any information that could be deemed irrelevant or rarely needed. Every Extra Unit of information on-screen competes for a real estate on the screen and diminishes relative visibility of other elements, eventually adding up to the clutter and chaos (Nielsen and Jakob, 1994)

Argument:

On analysing the landing page a lot of links that could be found on the home page of the university’s website can be found as well. While this is a dedicated page for the library, tabs related to the core functions of the library are significantly outnumbered by the tabs and dialogues that carry general functions of the university. These general function tabs are also present on the home page of the university’s website which is in the essence just a click away.

Further, the core function of the Library’s online portal is to provide students with the facility to search the soft and physical databases for relevant journals, books and academic material for a topic. The search bar is not present on the first page and one has to scroll down in order to access the function. This may add to the confusion, chaos and may leave a fresh user paralysed for a few seconds before one figures out the way (Vermeeren, 2010).

To put my argument to perspective:

Out of 17 Navigation Buttons found on the Bar and carousel in total, 14 belong to the general functions of the university and 3 belong to the function of Library.

14 Navigation functions belonging to the general function category(Group 2) are marked with red and 3 that directly serves functions of a library are marked with green (Group 1).

On asking 20 subjects If the landing page of the library’s website was too cluttered to be understood, I solicited answers in terms of the score on a scale of 1-10. Where 1 denoted absolute minimalism and 10 denoted absolute clutter.

Ten subjects answered between 4-6(Group 1), Six Answered between 6-8(Group 2) and Four subjects gave a score between 2-4(Group 3).

Errors Encountered

A careful design that prevents error messages is even better than designing aesthetically-pleasing error messages. Usual errors like “Gateway error” or “Error 404” creates hindrances between forming a seamless User Experience. 

Analysis:

No such errors were encountered while testing the various functions and landing pages of the university. Hence it can be safely concluded that the website is carefully designed.

Possible Solutions to Identified Issues

Issues regarding the visibility of status can be potentially fixed by increasing the contrast of the navigational elements like arrows (Schlecht, 2019). Further, the primary image that appears on the landing page could be replaced with something relevant to the Library. The centred Tab that says “UC Online Library could be changed positions with the “Online Study Help” so that It takes the attention in the first few seconds after landing on the page.

To make it more aesthetic and minimal, the functions and the buttons that do not align with the function of the Library could be reduced. As there are 14 functions or buttons, that are not directly related to core functions of the library. By reducing these functions, Negative space could be improved on the web page that would help separate and identify different elements on the page even more.

References for Human- Computer Interaction

Dix, A., (2017). Human Computer interaction, foundations and new paradigms. Journal of Visual Languages and Computations. Available at: https://sci-hub.tw/https://doi.org/10.1016/j.jvlc.2016.04.001#

Ibanez, L., (2019). User experience: Shneiderman’s golden rules of interface design. Medium. Available at: https://medium.com/theagilemanager/user-experience-shneidermans-golden-rules-of-interface-design-5c041ba09bb3

Ishir, (2018). Evaluate your website’s UX with these 10 questions. Medium. Available at: https://medium.com/@ISHIRInc/evaluate-your-websites-ux-with-these-10-questions-a4c3fc16b56e

Manzari, L., Trinidad-Christensen, J., (2013). User centered design of a web site for library and information science students: heuristic evaluation and usability testing. Information Technologies and Libraries. 

Nielsen and Jakob., (1994). 10 usability heuristics for user interface design. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/

Schlecht, D., (2019). Your step by step guide to heuristic evaluation in UX design. Available at: https://careerfoundry.com/en/blog/ux-design/what-is-a-heuristic-evaluation-in-ux/

Vermeeren, A. P. O. S., Law, E. L. C., Roto, V., Obrist, J., and Vaananen-Vainio-Mattilia, K., (2010). User experience evaluation methods. Proceedings of the 6th Nordic Conference on human computer interaction extending boundaries. Available at: https://sci-hub.tw/https://doi.org/10.1145/1868914.1868973

Remember, at the center of any academic work, lies clarity and evidence. Should you need further assistance, do look up to our Computer Science Assignment Help