# Web Design for Science Museum towards Engaging User Experience

Mohd Yamin, Eswati Azni Jaafar

► To cite this version:

Mohd Yamin, Eswati Azni Jaafar. Web Design for Science Museum towards Engaging User Experience. 14th International Conference on Human-Computer Interaction (INTERACT), Sep 2013, Cape Town, South Africa. pp.745-754, 10.1007/978-3-642-40498-6_69. hal-01510548

HAL Id: hal-01510548

https://inria.hal.science/hal-01510548

Submitted on 19 Apr 2017

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
Web Design for Science Museum towards
Engaging User Experience

Mohd Syaheezam Asyraq Yamin¹ and Eswati Azni Jaafar²

MIMOS Berhad, Technology Park Malaysia, Bukit Jalil,
Kuala Lumpur, Malaysia

**Abstract.** Nowadays, exhibition experience is no longer defined by physical visits. Increasing a person's knowledge about a subject tends to increase their interest in it, thus improve attendance and support for the exhibition. This research analyses and conduct comparison studies regarding website elements featured in 30 science museums around the world. Consequently, this produces an overview of one effective model for Website design; a user-centered process that includes techniques for need assessment, methodology, goal/task analysis, user interface design, and finally pre/post prototyping.

**Keywords:** User Experience, Usability, Web Design, Science Museum

# 1 Introduction

As the Internet continues to grow as main sources of information, the design of effective Websites becomes increasingly important. In Malaysia, the level of awareness on issues such as user interfaces and effectiveness regarding website has increased. Some of them even regularly improvise and update their website. However the results are still far from satisfying. Based on the report by "Malaysia Government Portals and Websites Assessment (MGPWA) 2011", only 285 out of the 1,155 websites manage to meet 5-stars rating set by Multimedia Development Corporation (MDEC), a body that oversees Malaysia's Information and Communication Technology initiative. In order to get a 5-star rating, several criteria were put together in MPWGA mostly related to best practice and global standards. This problem also significantly affected other institutions like the Museum and Science Centre. Website is critical as it provides the first impression of an institution. In normal circumstances, Website with great visual design and aesthetic will give more credibility. This report examines the effects of good user interface design for Science Centre Website and whether the implication of user experience design will contribute to number of actual physical visits to the Science Centre.
# 2 Background

Nielsen (2000) stressed that there are two basic approaches to web design, which are: the ‘artistic ideal’ that shows the designer’s self-expression and the ‘engineering ideal’ that delivers solutions to users. Based on that, 3 main areas are considered:

## 2.1 User Experience Issues

Badly designed websites frustrate users and cause them to leave, as they cannot find the required information. Most of them have bad experience when navigating through the website. Reasons cited for the users’ negative experience include outdated information, difficult to use and mostly, not finding what they wanted (Nua, 2002). To encourage users to return, website should be designed to facilitate users in finding what they need and increase satisfaction while accomplishing their tasks (N. Abdelmessih, 2001). The website should be able to provide an engaging experience to visitors.

## 2.2 Design Principle

In order to produce a remarkable design, web designer used to manipulate all elements of design and graphic art. Some of these factors range from elements of space, use and size of images, use of animation, colours, audio and many more. A study by Shenkman and Jonsson (2000) and Tractinsky et al. (2000) suggests that visual appearance is important in users’ preference for website. In similar vein (Tractinsky et al. (2000)) stated that ‘what is beautiful is usable’. The design of visual presentation of web pages is based on an imaginative stimulus that, in the intentions of the designer, should represent the best way to implement this strategy. (Visciola, 2000). In order to develop a good visual presentation, designers should be able to adapt the design principles to the required design.

## 2.3 Usability

According to ISO 9241-11 (1992) usability is defined as the ‘extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use’. Most studies agreed that the measurement of effectiveness of the site normally reflected by the satisfaction level of the users expectations, not the researchers and designers. The quality of user-site interaction is not totally depending on the users’ opinion about a website, but also the perception of the identity of the organization providing it, and as well as the evaluation of its efficiency. In this context, each page element has its influence where strategies for access, navigation and orientation are very important aspects. (Mario, 2004)
## 3 Method

The authors aimed to investigate two issues. Firstly, to find out the main Design and Multimedia elements that could provide good user experience for a science museum website. Secondly, to explore processes that can provide good website experience. In conducting this research, there are several methodologies employed. The methodolog-ical approach in this research is a combination between qualitative and quantitative research as depicted in Table 1 and Table 2 below:

<table><caption>**Table 1.** The qualitative method used to clarify the issues.</caption><thead><tr><td>Purpose</td><td>Method</td><td>Justification</td></tr></thead><tbody><tr><td>1.To understand the objectives and goals of PSN</td><td>Unstructured Interview</td><td>To gain comprehensive Information about targeted type of users. A set of questions were emailed to PSN, followed by interview session with their personnel.</td></tr><tr><td>2.To explore the experience of site-visitors.</td><td>Observation</td><td>Visual observation of site visitors. Visitors are asked to browse the PSN website and perform a few simple tasks.</td></tr></tbody></table>

<table><caption>**Table 2.** The quantitative method used to clarify the issues.</caption><thead><tr><td>Purpose</td><td>Method</td><td>Justification</td></tr></thead><tbody><tr><td>1. To generalise groups of people.</td><td>Demographics Research</td><td>To identify the potential users of the website.</td></tr><tr><td>2. To get more info on the website users (primary data)</td><td>Questionnaires</td><td>To get the right direction towards the development.</td></tr><tr><td>3. To compare pattern matching trends, gaps and features</td><td>Visual Analysis</td><td>30 science museums around the world has been analysed based on Design Principles, Usability and Aesthetics factors</td></tr></tbody></table>
# 4 Results

In any web development process, the most important step is to understand the users. This is the highest priority during any web design project. Findings are clearly defined below:

## 4.1 Demographic findings

Demographic survey as depicted in Figure 1 showed the number of visitors that visit Pusat Sains Negara (PSN) or National Science Centre in 2011. The survey reveal that most of the visitors come from adults and children category that later can be simplified into 'family category'. Based on this fact, both PSN and researchers agreed to focus on family with children as the main target audience.

<figure><img src="image_2.png" /><figcaption>**Figure 1 :** Demographics analysis for PSN visitors</figcaption></figure>

## 4.2 Online surveys

According to the surveys, 50% of the participants state, “planning a visit to Pusat Sains Negara” as their main purpose of visiting the PSN website. This is important finding, since their decision to proceed with the visits might depend on the website credibility itself. The participants were then asked to evaluate the current PSN website based on 4 main categories – Design, Features, Ease of Use and Errors Prevention. As expected, the total score of the website is 2.5 out of 5. The survey clearly indicate that the PSN website need improvements, in terms of design, layout and also presentation.

## 4.3 Visual Analysis

For Visual Analysis, the first method use is Screen Real Analysis, which is based on ‘Homepage Usability: 50 Websites Deconstructed’ (Neilsen And Tahir, 2002). As a
benchmark and comparative studies, 30 science museums around the world has been selected as depicted in Table 3. This museum were selected based on recommendation from Museum Planning website (http://museumplanner.org/worlds-top-10-science-centers/) and from PSN benchmark.

<table><caption>**Table 3 :List of Science Centers**</caption><thead><tr><td>No</td><td>Science Museum</td><td>URL</td></tr></thead><tbody><tr><td>1</td><td>Citi des Sciences et de l'Industrie</td><td>http://www.cite-sciences.fr/fr/cite-des-sciences/</td></tr><tr><td>2</td><td>Science Museum, London</td><td>http://www.sciencemuseum.org.uk/</td></tr><tr><td>3</td><td>Shanghai Science and Technology Museum</td><td>http://www.sstm.org.cn</td></tr><tr><td>4</td><td>National Science and Technology Museum Taiwan</td><td>http://www.nstm.gov.tw/english/</td></tr><tr><td>5</td><td>Museum of Science and Industry, Chicago</td><td>http://www.msichicago.org</td></tr><tr><td>6</td><td>Pacific Science Center, Seattle</td><td>http://www.pacificsciencecenter.org</td></tr><tr><td>7</td><td>Museum of Science, Boston</td><td>http://www.mos.org</td></tr><tr><td>8</td><td>Science City, Kolkata</td><td>http://www.sciencecitykolkata.org.in</td></tr><tr><td>9</td><td>Ontario Science Center</td><td>http://www.ontariosciencecentre.ca/</td></tr><tr><td>10</td><td>Deutsches Museum, Munich</td><td>http://www.deutsches-museum.de/</td></tr><tr><td>11</td><td>California Science Center Los Angeles, Los Angeles</td><td>http://www.californiasciencecenter.org/</td></tr><tr><td>12</td><td>Scientific Center Kuwait</td><td>http://www.tsck.org.kw/</td></tr><tr><td>13</td><td>Orlando Science Centre</td><td>http://www.osc.org/</td></tr><tr><td>14</td><td>Maryland Science Center</td><td>http://www.mdsci.org/</td></tr><tr><td>15</td><td>Science Center</td><td>http://www.sciencecenter.org/</td></tr><tr><td>16</td><td>Petrosains</td><td>http://www.petrosains.com.my</td></tr><tr><td>17</td><td>Exploratorium</td><td>http://www.exploratorium.edu/</td></tr><tr><td>18</td><td>Scitech</td><td>http://www.scitech.org.au/</td></tr><tr><td>19</td><td>Chicago Children's Museum</td><td>http://www.chicagochildrensmuseum.org</td></tr><tr><td>20</td><td>Children's Discovery Museum</td><td>http://www.childrensdiscoverymuseum.net/</td></tr><tr><td>21</td><td>Children's Museum</td><td>http://www.cmhouston.org</td></tr><tr><td>22</td><td>Children's Museum</td><td>http://lsc.org/</td></tr><tr><td>23</td><td>Liberty Science Center</td><td>http://www.pleasetouchmuseum.org/</td></tr><tr><td>24</td><td>Please Touch Museum</td><td>http://www.childrensmuseum.org/</td></tr><tr><td>25</td><td>Children's Museum Indianapolis</td><td>http://www.nhm.ac.uk/</td></tr><tr><td>26</td><td>Natural History Museum</td><td>http://www.cdm.org/</td></tr><tr><td>27</td><td>Children's Discovery Museum</td><td>http://www2.fi.edu/</td></tr><tr><td>28</td><td>The Franklin Institute</td><td>http://www.calacademy.org/</td></tr><tr><td>29</td><td>California Academy Of Science</td><td>http://www.puppet.org/</td></tr><tr><td>30</td><td>Center for Puppetry Art</td><td>http://www.brooklynkids.org/</td></tr></tbody></table>
One of the most important aspect to compare is pattern matching – trends, gaps and features. All ‘estate’ in the websites were scanned properly and then being colour-coded one at a time. Results as depicted in figure 2 below:

<figure><img src="image_3.png" /><figcaption>**Figure 2 :** Summary of screen real estate for 30 museum websites</figcaption></figure>

Visual Analysis on the 30 science centers websites shows that most of the websites have a contrast point (visual differentiation between two or more elements) and also good balance (overall distribution of the visual weight), but most of them suffer badly when it comes to the flow principle which is (the path the users' eyes take through the design). Most of the design failed to combine the design elements in proper manner.

## 5 Design and Development

Before starting any design process, it is important to establish a clear direction on the new website. Based on the discussion with PSN and the websites comparison depicted in Table 1, two main attributes are derived based on these keywords:

<table><caption>Table 4 : Keywords based on feedback from PSN</caption><thead><tr><td>ATTRIBUTE</td><td>KEYWORDS</td></tr></thead><tbody><tr><td>Corporate</td><td>Accurate, government agency, formality, MPWGA guidelines, Services</td></tr><tr><td>Playful</td><td>Imagination, exploration, curiosity, enjoyment, fun, wow factor, futuristic</td></tr></tbody></table>

Based on the two attributes above, a design matrix has been composed that is illustrated in Figure 3 below:
<figure><img src="image_4.png" /><figcaption>Figure 3: Design Matrix for the new website</figcaption></figure>

For the development of a new website, *scrolling innovation* has been implemented. It enables user to move some of the graphic elements in different way, or change its size, colour or content whenever user scroll down the website. Another effect implemented in order to enhance user experience is *parallax effect*. It is a technique that featured layered images that moves around the website in different perspectives, which resulting in a nice and interesting 3D illusion. This effect can be achieved using jQuery scripting, CSS3 and HTML5.

<figure><img src="image_5.png" /><figcaption>Figure 4: Sketches and prototypes</figcaption></figure>
Before starting with the actual design development, it is important to start with simple sketches. Researchers has decided to come out with 3 forms of prototypes (Design1, Design 2 and Design 3) as illustrated in figure 4.

A pre and post-test is then conducted before proceeding with the final prototype. Pre-test analysis implies that ‘Design 2’ is preferred as the most smooth and comfortable design. 62% of the participants also agreed with the use of ‘scrolling innovation’ while 85% believed that the use of parallax effect has improved their experience as stated in Figure 6.

<figure><img src="image_6.png" /><figcaption>Figure 5: Post Test at Usability Lab MIMOS</figcaption></figure>

<figure><img src="image_7.png" /><figcaption>Figure 6: Analysis for user acceptance of prototypes</figcaption></figure>
# 6 Result

Research findings conclude that it is best to define the elements based on Design Principles, Aesthetics and Usability as stated in Theoretical Framework. The relevant elements then tested either using quantitative or qualitative methods. Based on the Jesse James Gareth's (2003) model of user experience, there are a few processes that have to be conducted starting from strategy, scope, skeleton, structure, to surface. Each process is supporting each other and should be completed one at a time. Based on the questionnaire in Pre Test session, 62.5% from 32 respondents stated that Design 2 would provide them an engaging experience. 85% of them decided that they will visit Pusat Sains Negara (PSN) after browsing the website. In conclusion, an engaging website experience will influence visitors to actual physical visits thus increasing the credibility of the institution. In order to adapt exceptional experience in science museum website, it is always a good practice to consider the latest trends and new approaches in web design. For this research, both innovation scrolling and parallel effect has been integrated into the website design. As a results, the website management to offer a new dimension in terms of engaging user experience to visitors.

# 7 Conclusion

Experiments uncover that the combination of design principles, aesthetic, and usability has the potential to improve the quality of science museum websites. The success of a website is not only judged by aesthetic value but also on its ability to provide an engaging experience to users. In this paper, researchers presented a framework on how to provide an engaging website experience for Science Museum which consists of data from design principles, usability and aesthetics evaluation. Web designers should experiment with lots of new ideas to offer something unique. Continuous research on how to provide best user experience should be encouraged. Hopefully this research will spark more interest from designers or developers to join in the bandwagon in terms of producing a more engaging websites design and development.

# References

1. Alben, L.: Quality of experience: defining the criteria for effective interaction design (1996)

2. Barnett, L.A.: *Playfulness: Definition, Design, and Measurement*, Play and Culture, Vol. 3 (1990)

3. Blythe, M.A., Overbeeke, K., Monk, A.F., Wright, P.C.: *Funology: From Usability to Enjoymment* (2003)

4. Collis, B.: Information Technologies for Education and Training. (2002)

5. Fogg, B.J.: *Stanford Guidelines for Web Credibility*: Persuasive Technology Lab. Stanford University (2009)
6. H. Adelsberger et al. (Eds.).:Handbook on Information Technologies for Education and Training (2005)

7. Jacobsen, T.: Individual and group modelling of aesthetic judgment strategies. British Journal of Psychology (2004)

8. Jesse James Garrett.:The Elements of User Experience: User-Centered Design for the Web (2002)

9. Graham, Lisa.: Basics of Design: Layout and Typography for Beginners – Second Edition.Delmar (2005)

10. Nielsen, J. Tahir, M.: Homepage Usability: 50 Websites Deconstructed. Indianapolis .New Riders (2001)

11. Pandir, M., Knight, J.: Homepage aesthetics: the search for preference factors and the challenges of subjectivity. Interacting with Computers (2006)

12. Park, S., Choi, D., Kim, J.: Critical factors for the aesthetic fidelity of web pages: empirical studies with professional web designers and users. Interacting with Computers (2004)

13. Q. Chen, W.D. Wells : Attitude toward the site, Journal of Advertising Research (1999)

14. R.H. Fazio, J. Chen, E.C. McDonel, S.J. Sherman.: Attitude accessibility, attitude-behavior consistency, and the strength of the object-evaluation association, Journal of Experimental Social Psychology (1982)

15. Shenkman, B.O., Jonsson, F.:Aesthetics and preferences of web pages. Behaviour & Information Technology (2000)

16. Steve Krugg .: Don't Make Me Think! A Common Approach to Web Usability .Second Edition. Paperback ( 2006)

17. Q. Ma, L. Liu .: The Technology Acceptance Model: a metaanalysis of empirical findings, Journal of Organizational and End User Computing (2004)

18. Tilghman, B.R. : *Reflections on aesthetic judgement*. British Journal of Aesthetics (2004)