Overview of the Queensland University of Technology

The nominated website https://www.qut.edu.au/ has been designed for Queensland University of Technology (QUT), Australia. QUT is an Australian University that offers high quality learning, teaching and research capabilities to the students. The courses that are offered by the university are high on demand and there are 50,000 students that are engaged with the university. The university earned total revenue of $ 985 million in 2016 (Qut, 2018).

The website of the university offers the students to look for the courses offered, understand the research processes, and get connected with the Alumni and many more. The report includes an evaluation of the website.  

There are various features that are offered by the website and are as listed below.

• Login functionality is included in the website to allow the users to explore the functionality of the site.
• The website provides the users with the ability to look out for a course from the list of courses offered by the university. Undergraduate courses, postgraduate courses, open online learning courses, PhDs and research degree courses, short courses, and executive education courses are some of the course categories that can be explored.
• Research menu option enlists the progressive approach that is followed by the university to allow the students to explore the options offered.
• Industry option lists out the mechanisms to partner with the university along with the expertise for the industry.
• The details about the university, enrolments, achievements and recognition, and strategic ambitions are covered in the About option in the menu.
• Alumni menu option provides the details about the university alumni and also offers a feature to get connected with the alumni.
• International Students, News and Professional Development are the three other menu options that are included.
• Contact us page provides the mechanisms through which the users may connect with the university administrators.
• The users can also perform search on the site on the basis of the keyword that is entered.
• The privacy and copyright details are included in the footer section of the site.

The first resolution that is used to evaluate the QUT website is the desktop resolution at 2500×1450. The large display presents all the options clearly and allows the user to execute the offered features and functionalities of the site. The use of color scheme and the layout of the website are as per the theme of the site. The navigation between the elements of the site on a page along with the flow between the pages is smooth. The color of the textual elements is consistent.

Home Page of the Site

The logo of the website is displayed at the top of the site on every page.

The website is then evaluated in the medium display and there are two orientations used for this evaluation. The first is the portrait orientation with the resolution as 415×750.

The problem of whitespaces in the large display is avoided in this resolution and all the menu options are visible on the right. Every menu option is easily accessible and the features of the site can be executed in this display. The placement of the elements is even and the layout of the pages is also adequate (Webdesignerdepot, 2016).

The landscape orientation is then used with the resolution as 750×415. The aspects are the same in this orientation are the same as that of the portrait orientation in the medium display.

The tiny display for the evaluation of the website is chosen in the portrait as well as the landscape mode. The portrait mode has been set up at a resolution of 360×640 and that of the landscape mode has been set up at 640×360. The positive aspects of the site in this resolution are the same as the ones highlighted above for the medium display in portrait and landscape orientation.

Main Features of the QUT Website

The large display has a few loopholes in terms with the responsiveness of the site and the UI aspects of the same.

There are too many white spaces on the left and right sections of the web pages which should have been avoided.

Whitespaces on the Web Pages

It is necessary to have all the web pages to maintain consistency in terms of the placement of the elements. However, the Research page on the site does not include the header and menu areas.

Research Page

The consistency principle is violated in this case.

There are a few negative aspects in the site as highlighted in the section above. There is an issue of consistency on the Research page of the site.

The Login option is also not visible at the first glance and it becomes necessary to browse the menu to login to the site.

Login Option on the Site

The tiny display for the evaluation of the website is chosen in the portrait as well as the landscape mode. The portrait mode has been set up at a resolution of 360×640 and the landscape mode is set at 640×360. The negative aspects of the site in this resolution are the same as the ones highlighted above for the medium display in portrait and landscape orientation.

The first user that has been included to review the website is John. He is a fashion designer and is 35 years of age. John does not have technical expertise but uses the web for his work and social networking.

John evaluated the website on his iPhone in the portrait mode with the resolution as 414×736. He liked the color tone of the site and could understand the theme of the site from the logo and the content placed on the site. He, however, was looking for the login option on the site and was disappointed with not finding the option on the main screen.

He also believed that the main screen had too much scrolling and overloading of the content which led to a bit of confusion. He loved the integration of the site with the social media connections and networks placed at the bottom.

The second user that has been included to review the website is Margaret. She is a friend and business analyst in a leading marketing firm. She is 28 years of age. She holds a degree in management and also has technical knowledge of the web services and applications. The primary motive of her use of the web is to carry out her business operations and services.

Positive and Negative Aspects of the Website

Margaret evaluated the site on her desktop and liked the color tone used. She liked the placement of the logo of the site as she understands the importance of branding and marketing in the competitive world. She also liked the security feature included in the site on the login page; however, the design of the login page did not impress her much. She wished to see the footer section on the page with the same consistency as that on the other pages. She also browsed through the different courses offered by the site and looked through the several social media connections integrated as well.

The overall design of the website is good and as per the user interface design principles. However, there are certain loopholes that are present that shall be improved for the overall website improvement. The recommendations are as listed below.

• The login functionality shall be present on the main screen in medium and tiny display of the site.
• The whitespaces shall be avoided in the large display and the site shall be responsiveness as per the resolution of the site (Beverly, 2016).
• There is also an issue with the consistency of the site as the Research page does not include the menu option. Also, the login page does not include the footer section. The consistency of the website shall be maintained and the header, title, menu and footer sections shall be kept the same across all the pages. Only the body section shall be allowed to be modified as per the content (Cavoukian, 2016).
• There are certain screens on the site that have too much navigation and scrolling, such as the main screen on the portrait mode. The over-loading of the content shall be avoided.

The implementation of all of these steps will enhance the usability and performance of the site.

The tool that has been used for the evaluation of the website is Google Chrome simulator.  It is the device that provides the users with the ability to have a virtual experience of the desired device. The developers, designers and testers may use this tool to view the behavior of the site in different aspects. The custom resolution can be set up as per the requirement (Microsoft, 2016). There are specific pros and cons that are associated with the tool that has been included in the section below.

• Enhanced customization is provided with an option to enter the desired resolution.
• CSS media queries can also be enquired and inspected to understand the behaviour and responsiveness of the site (Google, 2016).
• The users can browse through the different tabs without any hindrance.
• The tool is available at a non-stop basis and comes with a free of cost.
• The screenshots can also be captured from the tool so that the set of errors and flaws can be recorded with ease.
• There is no issue of subscription or licensing.

• The tool provides a virtual experience of the different tools and the exact look & feel cannot be obtained.
• It will not allow the user to test the involvement of the networking condition or the behaviour of other applications installed in the device and such similar scenarios.

MobiReady is the tool that is similar as Google Chrome device simulator and offers a set of interesting features. The tool comes with the features, such as customizable screen resolution, flexible images, customer layout, and many more (MakeUseOf, 2010).

The tool provides the users with the ability to test the application on the different resolutions. This prevents the business units to invest in the specific tools for this purpose. There are several responsiveness principles that have been defined along with the UI principles and guidelines. The flexible images can also be validated and verified with the aid of the tool. CSS media queries and layouts can also be verified using the tool.

• The tool is cost-effective in nature as it allows the business units to not spend on the specific tools to test the web applications.
• There are abundant customization options that are included in the site (Guru99, 2016).
• HTTP response headers and other technical features of the site can also be tested with the aid of the tool.
• The tool is easy to use and comes with a wide set of features.
• The tool comes with free of cost and does not have any licensing issues.

• There is a problem of look and feel associated with the tool as the exact look and feel cannot be obtained (Hpe, 2012).
• There is an issue with the scaled images in the applications that cannot be tested adequately.

Conclusion

Responsive Web Design (RWD) is an approach that is followed in the design of the web sites and web applications (Knight, 2011). The approach is followed to enhance the user experience and usability of the web applications. In case of the website of QUT, a website evaluation has been done on the basis of the user interface and responsive web design principles. The website includes the required set of features and there are positive aspects on the site in terms of the color scheme, layout, and content placement. There are a few areas of improvements as well that shall be included to enhance the website performance. These include the placement of login option, avoidance of the whitespaces, consistency of the elements and scrolling on the main screen. The website shall be modified as per these points so that the user experience and user behavior is improved. 

References

Beverly, B. (2016). 1st ed. [ebook] Available at: https://www.cc.gatech.edu/projects/PageSleuth/references/p309-zimmermann.pdf [Accessed 8 Jan. 2018].

Cavoukian, A. (2016). 1st ed. [ebook] Available at: https://www.ipc.on.ca/images/Resources/pbd-user-interfaces_Yahoo.pdf [Accessed 8 Jan. 2018].

Hpe. (2012). Emulators vs. Real Devices for Mobile Application Testing – The Answer Might Surprise You. [online] Available at: https://community.hpe.com/t5/All-About-the-Apps/Emulators-vs-Real-Devices-for-Mobile-Application-Testing-The/ba-p/5506993#.Vy9qBDB97IV [Accessed 8 Jan. 2018].

Google (2016). Simulate Mobile Devices with Device Mode | Web Tools – Google Developers. [online] Available at: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en [Accessed 8 Jan. 2018].

Guru99 (2016). [online] Available at: https://www.guru99.com/real-device-vs-emulator-testing-ultimate-showdown.html [Accessed 8 Jan. 2018].

Knight, K. (2011). Responsive Web Design: What It Is and How To Use It – Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ [Accessed 8 Jan. 2018].

MakeUseOf. (2010). MobiReady: Test How Mobile Friendly Your Website Is. [online] Available at: https://www.makeuseof.com/tag/mobiready-mobile-friendly-websites/ [Accessed 8 Jan. 2018].

Microsoft (2016). Simulate Popular Mobile Devices for Testing. [online] Available at: https://www.asp.net/mobile/device-simulators [Accessed 8 Jan. 2018].

Qut (2018). QUT: A University for the Real World. [online] QUT. Available at: https://www.qut.edu.au/ [Accessed 8 Jan. 2018]. 

Webdesignerdepot. (2016). The opportunities and challenges of responsive design. [online] Available at: https://www.webdesignerdepot.com/2012/11/the-opportunities-and-challenges-of-responsive-design/ [Accessed 8 Jan. 2018]