The Development of the Website Based on Initial Requirements by Museum of Art and Craft - Assignment Example

Human Computer Interaction COIS 12036 Student name: Student Number: Due Day: Tutor: 1.0 Introduction 3 1.1 Background 3 1.2 Aims 3 2.0 Low-Fidelity Prototype. 4 Fig 1.0 Body Background, Menu Links and DIVs designed in CSS 4 3.0 User Acceptance Testing. 6 System performance was tested against the requirements and procedures supplied by the MAC management which specified how the tourists visit the business area. The test scenarios were implemented with selected users to determine the performance of the MAC website as follows. 7 3.1 User1 7 3.1 User2 7 3.3 User 3 7 User Acceptance Testing Summary 8 4.0 Features 8 Fig 1.2 Site Map 8 Fig 1.3 Home page with navigational links. 9 4.1 Home page 9 Fig 1.4 Home Page 9 4.2 Pagination 10 6.0 Recommendations. 10 7.0 Conclusion 11 Appendix 12 Page selections 12 Chinese Artifact page 12 Fig 1.5 Chinese Artifact page 12 European Artifact page 12 Fig 1.6 European Artifact page 13 Eastern Artifact page 13 Fig 1.7 Eastern Artifact page 13 Time table page 14 Fig 1.9 Time table page 14 Feedback page 14 Fig 2.0 Feedback page 15 1.0 Introduction 1.1 Background The Museum of Art and Craft (MAC), is government-sponsored museum. They required a web based information system, which could allow tourists to obtain an overview of the museum layout and to find specific details of exhibitions they would like to visit. This report is about the development of the website based on initial requirements and technical details supplied by Museum of Art and Craft. This report will describe the structure of the website, the content in each webpage and how visitors will be able to navigate through the pages in search of the exhibitions of their interest. 1.2 Aims a. Make information available for potential tourists. Information on Museum of Art and Craft exhibitions will be available on the MAC site. This will greatly enhance quick expansion of its tourism market base. b. Assist Museum of Art and Craft to improve on its services through assessment of customer feedback. Clients will be able to post their comments. Such feedback will be helpful to the MAC management to make adjustments and improvements on its services. c. Improve on the Museum of Art and Craft image. The site will assist the Museum of Art and Craft to maintain a warm relationship with its visitors as well as presenting itself to the public through the warm responses via the web site to meet visitors’ expectations. 2.0 Low-Fidelity Prototype. The site was designed in HTML5, JavaScript and CSS3. The features of these technologies offer greater appealing interfaces the visitors of the website; in addition, they enhance better client side interaction of the user with the browser. The targeted browser for the design of the site was Mozilla Firefox and Internet Explorer. The use CSS3 was to add styling/formatting to the webpages that could not have been able to be supported by plain HTML e.g. formatting menus for links while JavaScript was used to open new webpages for display of further details from the specified pages on pop up window. Fig 1.0 Body Background, Menu Links and DIVs designed in CSS The DIVs rounded corners were implemented by use of css3, this feature is not supported in the earlier versions of CSS. Fig. 1.1 Pop-up page opened and formatted with JavaScript. In addition to the CSS formatting, JavaScript was used to format this window display. These formats were; display the content details in new window with the height of 1800 and width 1000, removing the status bar, directional buttons, toolbar and the menu bar on a click of a button on a specified webpage. 3.0 User Acceptance Testing. This part of the report describes the tests, which were carried out concerning the design of the website. To facilitate the design process, several students were selected to illumine the real Museum of Art and Craft website on the level of ease and use, perception levels and the importance of the website for Museum of Art and Craft. Each participant was given explanation in written format and using labels, they were asked to role-play as a client looking for exhibitions in Museum of Art and Craft. The labels were to identify the key areas that acted in place of processes, which visitors could go through to access and experience the MAC exhibitions. The testing method used was the V model of which the processes to arrive to the final product is as illustrated in the figure below: System performance was tested against the requirements and procedures supplied by the MAC management which specified how the tourists visit the business area. The test scenarios were implemented with selected users to determine the performance of the MAC website as follows. 3.1 User1 She was a regular tourist to Museum of Art and Craft exhibitions; she gave out her first time experience to the exhibitions. First she was given assistance to explore the exhibition hall, before; she had no idea on what to look for and when to look for. She easily navigated through the Museum of Art and Craft website prototype which was being tested with ease because of her connectivity with her regular visit to the museum. Menu links were readable and she could be able to select from the provided options. 3.1 User2 He was a new tourist from the East who knew very little about Museum of Art and Craft. He got information from a friend about the museum. He knew more about the eastern culture but little about the Chinese and the European. He was interested in the presented images of the Chinese and European. On selection of Chine artifacts option he was able to navigate back to the home page and forth to Chinese artifacts. He also commented positively on the colors used for the site. 3.3 User 3 User 3 was unsatisfied with static images though he was impressed by the design of the pages. He recommended shot video clips to be embedded in the site as well as a database for customers to have their account for communication with the Museum of Art and Craft personnel. User Acceptance Testing Summary Test ID Date Of Test Tester Status Defect Status Comments 2012mac1 17/09/2012 User1 Pass N/A Navigation Ok 2012mac2 15/09/2012 User2 Pass N/A Navigation Ok 2012mac3 18/09/2012 User3 N/A Static pages Not severe 4.0 Features In this section, the content, which should be presented to the visitors, is highlighted. To start with is the landing page. The page entails the first page displayed to the visitor immediately he/she visits the site. This page consists of MAC logo navigational links to other pages, which would show to the visitor the various artifacts specific to the selected culture. On clicking on the link, navigation will take place on to the page selected by the visitor. The logo on all the pages is standard and similar to that on the home page to as much as possible to keep the visitor on the website. Links are also designed to make navigation for users easier within the site. Testing was done to ensure that there were no broken links or links to external sites which could take the visitor away from the website.The figure 1.2 shows the site map of the website and figure 1.3 the home page with navigational links of the website. Fig 1.2 Site Map Fig 1.3 Home page with navigational links. 4.1 Home page This is the landing page of the website. It is the first page the visitor will meet once he/she lands on the website. Just like visiting the reception, the page provides the directions similar to that which could have been provided by the receptionist. First, it contains a welcome message which provides an overview of the Chinese, European and Eastern cultural artifacts followed by links in green circles to each cultural artifact. A menu is also included containing links to the cultures, direction to the welcome page, time table for the opening days and lastly to the visitor feedback. On reading this text, a visitor can select a page of her/his choice to view content. Fig 1.4 Home Page 4.2 Pagination Page nation was included on the web pages containing respective artifacts. This was intended to ensure that the user would be glued to the page of her interest by selecting other content which could not be displayed within the set margin dimensions of the respective page. 6.0 Recommendations. Based on the users’ experiences, the design of the website should include embedded video, which could make the site more interesting to the visitors because of the varied stimulating senses. This could be as well take advantage of one of the richest features of HTML5 in the display of web content. In addition, the website should be upgraded to accommodate more visitor interaction by use of server side scripting language such as PHP and a database for storing data and retrieval of information relevant to the expectations of the visitor. 7.0 Conclusion The mandate for the design of Museum of Art and Craft was to assist in prividing information to tourists visiting the museum.The goal was to allow visitors to obtain an overview of the museum layout and to find specific details of exhibits they would like to visit. To achieve this the website was developed with the layout specified by Museum of Art and Craft which was to partition it into sections of the chinese, european and eastern artifacts. In addition, time table and contact pages were also included for visitors’ feedback.Lastly, users were also involved in the testing of the prototype of the website. This was done to gather information on their perception, ease of use of the website and recomended areas of improvements. Appendix Page selections Chinese Artifact page When a Chinese link is selected from the home or any page containing this page link on the website, a visitor is directed to the Chinese artifacts page which contains the images of the artifacts. Additionally, this page contains links to other pages such as home, contact, European culture, the Eastern culture and the time table. Fig 1.5 Chinese Artifact page European Artifact page When a European link is selected from the home or any page containing this page link on the website, a visitor is directed to the European artifacts page which contains the images of the artifacts. Additionally, this page contains links to other pages such as home, contact, European culture, the Eastern culture and the time table. Fig 1.6 European Artifact page Eastern Artifact page When a Eastern link is selected from the home or any page containing this page link on the website, a visitor is directed to the Ea artifacts page which contains the images of the artifacts. Additionally, this page contains links to other pages such as home, contact, European culture, the Eastern culture and the time table. Fig 1.7 Eastern Artifact page Time table page This page allows the visitor to check the days of opening hour of Museum of Art and Craft (MAC) and the cost for adults and children under 12 years Fig 1.9 Time table page Feedback page This page allows the visitor to send his/her feedback to Museum of Art and Craft (MAC), such feedbacks are important to allow the managers improve on the services to the visitors. In addition, a time table page is included which shows days and the time of Museum of Art and Craft operation, which is important to the visitors’ convenience. Fig 2.0 Feedback page Read More