A Study and Design on Affordance of Interaction Menu Button for Children’s Website

• Main Authors: Chen-Shin Wang, 王辰心
• Other Authors: Cherng-Yee Leung
• Format: Others
• Published: 2008
• Online Access: http://ndltd.ncl.edu.tw/handle/54137534317984807905

碩士 === 大同大學 === 工業設計學系(所) === 96 === Traditionally, most of the multimedia and application software place the menu in one cluster isolating from the workspace and background. At the same time, buttons on the menu are generally easy for users to distinguish between the clickable ones and nonclickable ones. However, with the technological advances, a large number of websites are now emphasizing on the interactive function especially websites targeted at children. On these websites, button links are replaced by interactive buttons with moving images. The vivid interactive screen design has provided the visual stimulus to children. At present,interactive menu buttons are integrated with the background and have transcended the traditional screen design. Unfortunately such design may very well confuse users of children’s websites. Users may not be able to istinguish between clickable button links and the non-clickable ones. As a result, data search on these websites are slow and ineffective. The purpose of this research is to propose a set of design principles for interactive menu buttons of children’s websites so that the website browsing meets affordance and solves the issues of confusion between interactive menu buttons and background. The research has three phases: (1) Survey of status quo: this phase is aiming at understanding the current situation of interactive web pages and potential operation issues; (2) Pre-test: experiment and analysis of various interactive buttons on existing web pages are conducted; the result obtained from the pre-test, bibliography, children’s cognition to the color of the websites, and opinions of the senior multimedia designers are combined to conclude the design principles of interactive menu buttons for children’s web pages; (3) Post-test: the original web pages and new version of children’s web pages are produced to verify its effectiveness in meeting affordance. The results of the post-test are served as references to propose the interactive menu button design for the moving images on the home page of children's web pages. Eleven children and sixteen adults attended the pre-test and the post-test. These participants proceeded with visual browsing and mouse clicking of the interactive menu buttons. Whether the number and location of the buttons would cause failure of affordance was observed. With the help of independent t test, paired t test, one-way blocked ANOVA, Friedman test, and qualitative analysis, the following conclusions were made: the accuracy rate of visual browsing and mouse browsing of existing web pages is significantly towards the lower end. That is, the design of the interactive menu buttons failed to meet the effectiveness of affordance. Design constituents obtained from the pretest results were then applied to the new web page design in the verification experiment. The dynamic presentation of the interactive menu background, new layout of the interactive menu buttons and improved size of the graphics have helped increase the accuracy rate to 94% which has significantly enhanced the affordance of the interactive buttons. The study shows that the graphic characteristics can be applied to the design of interactive menu buttons to clearly distinguish from the background. Meanwhile, the graphic size of the interactive menu buttons and dynamic presentation should be consistent wherever possible. The buttons should be laid out in a relative cluster. All these design factors are helpful in enhancing the vividness and attractiveness of the web pages and meeting the affordance of interaction.