Contents
3. Main features of the website
3.4 Good web content with a shopping feature
3.5 Safety information and notice
3.7 About us, Visit us and Contact feature
4. Positive and negative aspects related to the interaction and usability of the interface
4.1.2 Easy to access information
4.1.3 Clear presentation of data
4.2.2 Social site icon color change
5. Review layout adjust-ability for various screen resolutions
8. Google chrome device simulator
9. Similar tools are available for testing and reviewing RWD web pages
1. Introduction
Queensland Museum is the conservator of the state’s natural and cultural heritage, taking care of more than one million objects and specimens in collections that tell Queensland’s developing history. Their expert services include resource materials for students for learning online, provide technical and community support to State-wide collections and museums, state-wide loans program, and so on.
Fig 1. Home page
2. Objective of the report
The main aim of this report is to provide a comprehensive review of the Queensland Museum website and provide appropriate support for our observations and feedback on it in accordance with the concept of responsive web design and web development principles. This website will be tested using the system simulator supported by Google Chrome as per requirement.
Additionally, this report describes the website’s main features, with its positive and negative interaction and usability aspects. This report also includes a website analysis based on various screen sizes (large, medium, and tiny display) by using the device stimulation of Google Chrome with brief feedback on other related resources available for website evaluation.
3. Main features of the website
3.1 Clear Navigation
A clear navigation bar is always essential for any website. It guides the user to locate any information they are looking for (Gibbs, 2016). In this website, the main menu was designed at the top of the website which is in white text color with dark color background, and also all navigation was linked to separate page.
3.2 Search feature
The search feature is very important in the website, especially the big website where it is hard to locate every information. In this website just above the navigation bar, the search feature is there from where we can easily locate desired information.
Fig 2. Search option
3.3 Accessibility feature
Accessibility elements include captions to include panel content descriptions, and attributes of scope and headers to specifically link moderators to their respective content (Robbins, n.d).
We may assume that accessibility refers to website consistency in terms of its accessibility to every age groups. In this website we can see navigation bar to locate information easily and search option is there for locating more detail information as well as in body part all important information are available.
Fig 3. Body part
3.4 Good web content with shopping feature
User always want website which have good content. As in Queensland Museum Network website we can see several content like news, blog, event, and so on which makes it good in design. Because of content we can easily know under which topic what type of information are there. If user want to buy any Queensland Museum product than they can easily buy it just by going in shop section. Even certain discount in product are shown in images which make it clear.
3.5 Safety information and notice
In every page notice are displayed because of which user are notified that their all network locations are temporarily closed. Additionally, they also added the safety information for the COVID-19 and user can easily check the current safety measures.
Fig 4. Notice and safety updates.
3.6 Homepage Link
Home page is design in such a way that every user can easily find out information they wanted. There are also a numbers of links in the homepage for the different sections to connect users directly to their desired destination with or without navigation or searching.
3.7 About us, Visit us and Contact feature
About us provides all the information about Queensland Museum including all the service they give, detail of their networks information, history and so on. As per Visit us, it provides the detail of different location. In contact us page we can see Queensland Museum phone number, fax, and mail from where user can contact them easily.
Fig 5. Contact us page
4. Positive and negative aspects with related to the interaction and usability of the interface.
The key thing to bear in mind is that architecture is about communication. When you are designing a website that works well and provides details, but looks ugly or it doesn’t match the brand of the client need, no one will want to use it. Likewise, if you are making a beautiful website but difficult to use or unavailable, people would leave so we need to keep in mind (Beaird and George, n.d).
The usability of the Queensland Museum website can be evaluate as following aspects.
4.1 Positive aspects
4.1.1 Color combination
The idea of defining a color scheme is to give harmony during the entire design. The colors we choose may give some impression, like warm or cool (Gibbs, 2016).
In Queensland Museum website less number of color are used. When Queensland Museum network is selected than whole page themes color is changed into pink color similarly, for Queensland Museum, COBB+ CO Museum, The workshop rail museum, Museum of tropical Queensland different color themes are used.
4.1.2 Easy to access information
To make good website it should have well-organized and easy-to-use pages that help the user with good navigation (Gibbs, 2016).s
In this website different navigation section as well as search option in top are displayed in every pages of the site. As for in body area different images with heading are provided to easy access to particular pages. In footer bar all information about website are given.
4.1.3 Clear presentation of data
Clear presentation can only be achieved by using proper Font color, background color, text color contrast, content design, content visibility, hypertext, and so on (Gibbs, 2016).
In Queensland Museum site it has use following techniques
- Great combination of colors and very minimal usage of contrast colors to enhance the text’s visibility. For example, it has used white color background for dark color text and dark color background for white color text.
- Manage of proper section headings. For example, logo are kept in top left side corner where as search and other social site icon are kept in top right side.
4.2 Negative aspect
4.2.1 Poor navigation bar
Navigation bar are inconsistent. Cascading dropdown are seen when we hover our mouse to certain topic in navigation bar but when we remove our mouse to other part of screen cascading dropdown remain same until we hover mouse to other topic. It would be better if cascading does appear when we hover mouse in other part of the site and only appear when we hover mouse on navigation bar. In fig 6 we can see Cascading dropdown of about us.
Fig 6. About us
In fig 7 we can see Cascading dropdown even when we move our mouse in other part. And it keep on displaying the list until we hover again in next navigation section.
Fig 7. Hover still shown
4.2.2 Social site icon color change
When Queensland Museum network is selected than themes color is changed likewise for Queensland Museum, COBB+ CO Museum, The workshop rail museum, Museum of tropical Queensland it change into different color. Even if changing color was good concept changing the color of social site icon is not so good. User may not always recognized icon since different color are seen in icon.
Fig 8 . Different icon color
5. Review on layout adjust-ability for various screen resolution
In present time use of electronic device has increase day by day. There are different device such as smart phone, tablets, desktop, laptop and so on which has enable the need of responsive website to be compactable with various size of display. In this report adjust-ability of Queensland Museum network to various size of screen resolution is reviewed as follows by using Google chrome device stimulator.
5.1 Large display
Type: notebook/desktop view with display higher than 1280×768 pixels.
Fig 9. Portrait view 1280*768
Fig 10. Landscape view 768*1280
Review
| Positive | Negative | |
| Portrait view | Navigation bar is reshuffled and shown in multiple lines. | Layout are fairly narrow and space between headings in navigation bar are not equal and also lot of empty space is there below footer. |
| Landscape view | Both navigation bar and search option are present in home page. | Page looks little narrow. |
5.2 Medium display
Type: Any mobile device view with display between 480×640 to 700×960 pixels.
Fig 11. Portrait view 480*640
Fig 12. Landscape view 640*480
Review
| Positive | Negative | |
| Portrait view | All the information is rearranged in one column, and the hamburger menu tends to provide fast and easy access for the user. All different museums heading are under “other network museums” drop down menu. | Displayed information are very long and user need to scroll long way down. |
| Landscape view | All the information reshuffled and navigation bar and other information break out into two separate lines. | Layout are little narrow and space between headings in navigation bar are not equal. |
5.3 Tiny Display
Type: Any mobile device view with display between 200×320 to 400×640 pixels.
Fig 14. Portrait view 200*320
Fig 15. Landscape view 320*200
Review
| Positive | Negative | |
| Portrait view | All the information is rearranged in one column, and the hamburger menu tends to provide fast and easy access for the user. All different museums heading are changed into “other network museums” drop down menu. | Displayed information are very long, congested and Search option is blocking other information. |
| Landscape view | All the information rearranged in one column and gives the user a quick and easy access. | Displayed information are very long. |
6. Guest review
6.1 Review person 1
| Question | His/her answer |
| Introduction | Name :Manish Bhattarai Age : 27 Gender: Male Profession: Student (IT background) |
| Device you used? | Laptop |
| Your first impression when you see the website? | It was easy to locate information in navigation bar and I like the color combination. |
| What information you try to find out in website? | I tried to find out some idea about history of museum, its location and some of their collections. |
| What was your level of difficulty to find information? | It was easy. |
| Your first impression of website? | There are many headings which were confusing. |
| Did you find the all information? | Yes, I find the information. |
| Rate website out of 1 to 10? For navigation For clear information For design of page | For navigation= 8 For clear information= 9 For design of page= 8 |
6.2 Review person 2
| Question | His/her answer |
| Introduction | Name :Anita karki Age : 35 Gender: Female Profession: Accountant in finance |
| Device you used? | Mobile phone |
| Your first impression of website? | I like the color combination. |
| What information you try to find out in website? | I tried to find out some idea about their event and exhibitions, and also shopping list. |
| What was your level of difficulty to find information? | It was moderate. |
| What things you don’t like in this website? | Information are very long and details are very congested |
| Did you find the all information? | Yes, I find the information. |
| Rate website out of 1 to 10? For navigation For clear information For design of page | For navigation= 6 For clear information= 5 For design of page= 8 |
6.3 Analysis of Guest review
As per the survey, one guest was using desktop for website which makes easy for him to navigate information where as other guest was using mobile phone which makes her little difficult for navigation due to screen size change. While asking question the guest using desktop says he can find information easily however, guest using mobile phone was having difficult. As per the design of the website both of the guest feel same. Based on this survey we can assume that poor website responsiveness has created usability problems in different screen size.
7. Recommendation
- We need to specify font size and line spacing and number of page section to allow easy reading. The number of columns should also be carefully designed using padding for space, border for content and margin for space between border and other context (Gibbs, 2016).
- To prevent occasional tapping on small devices such as smart phones or tablets, the space between interactive links has to be big enough so space should be always check before and after completing website (Subic, Krunic and Gemovic, 2014).
- While there are millions of ways in which words or notations can be arranged, only a few arrangements make sense. The magnetic names are like Web page elements, or blocks. Even though, the number of these blocks required depends on the size and subject of the site. We always need to be careful on this matter (Beaird and George, n.d).
- The idea of creating a color scheme is to provide harmony to the whole design. The colors we choose can give some impression, like warm or cool. We can use color wheel to select good color combination (Gibbs, 2016).
8. Google chrome device simulator
This tool is one of the easy tool to review the responsiveness of a website in different screen resolution, let us discuss with its advantages and disadvantages.
| Advantages | Disadvantages |
| Allow user to set any pixel ration they want. | CPU and GPU processing are not supported. |
| Both portrait and landscape seen can be checked for review. | Due to the certain behavior of CSS support and API, simulator is unable to detect some behaviors. |
| CSS queries can be inspect. | It cannot override UA for Appcache and does not support MathML. |
| Both code and display screen can be seen together. | It consideration of hardware aspect eliminated. |
| We can easily detect loading time of different pages | It cannot simulate the mobile phone actual color display when it is in dark place or sunlight. |
| It is secure and safe to use. | Multiple website cannot be test at once. |
| It enables network emulation to performe evaluation of website. | |
| Within the available viewing area we can adjust the display to full size. | |
| We can work with local files too. |
9. Similar tools available for testing and reviewing RWD web pages.
As we know that mobile usage accounts for nearly 50 percent of all website traffic, it is therefore important that your site is not only capable of meeting user requirements but also adapting to any smartphone screen. In this case we need to check responsive design of the page. We can find out how the site looks on various devices, including desktops, laptops, tablets and smartphones.
9.1 BrowserStack tools
BrowserStack tools simulator is for testing and reviewing RWD web pages and it is trusted by more than 25 thousand users. BrowserStack tool is live and automated and provides an easy-to-use user interface to test web applications on various browsers and operating systems. We can select number of device with different screen size as in Fig 16 and Fig 17. Even Microsoft, and several other organizations have supported BrowserStack. With its modern IE platform, Microsoft also collaborated with BrowserStack with the purpose of simplifying Internet Explorer tests. In order to use BrowserStack tools user should first login into it.
Another impressive feature is the ability to produce screenshots of what a site looks like on different browsers and platforms, allowing us to get a simple guide line for browser compatibility. And also, user can do parallel testing at a same time in BrowserStack which is not possible to do in Google chrome device simulator.
BrowserStack tools is not free like Google chrome device simulator, BrowserStack give only free trial for one minutes duration. To use BrowserStack user need to pay minimum 29$ per month for both browser and mobile apps testing plans. As per the additional features like local testing, real iOS and Android devices, unlimited interactive app testing and so on extra payment need to be paid.
While comparing between Google chrome device simulator and BrowserStack tools, Google chrome simulator is free for user but BrowserStack tools need to be paid and login is required. However, BrowserStack can provide real device layout including device details like as shown in Fig 16.
Fig 16. BrowserStack tools
Fig 17. List of device.
10. Conclusion
We discuss about critical analysis of the Queensland Museum website according to the responsive web design and web development principle. This website was tested using the system simulator supported by Google Chrome as per requirement. In this report we also review and comments for two participants how they think about website along with analysis between them. Both details of Google Chrome simulator as well as other similar tools to review was discussed. We analysis different positive and negative aspects and also provide recommendation for developing better website.
Reference
Beaird, J. and George, J., n.d. Principles Of Beautiful Web Design, 3Rd Edition. 3rd ed. [Place of publication not identified]: SitePoint.
Robbins, J., n.d. Learning Web Design. 4th ed. p.137.
Subic, N., Krunic, T. and Gemovic, B., 2014. Online Journal Of Applied Knowledge Management
Gibbs, P., 2016. HTML Beginners– Basics Of Web Design. Amazon ASIN.
Uni Assignments For MIT students 
Nice
LikeLike