兒童網頁互動式選單按鈕之預設用途 研究與設計

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

王辰心(Chen-Shin Wang)

指導教授 ： 梁成一

大同大學/設計學院/工業設計學系所/碩士(2008年)

摘要

一般多媒體及應用軟體選單都是群組化的放置在螢幕中的一塊區域與工作區域及
背景是分離的，而且選單的按鈕部份也讓使用者很容易的知道那些是可以點選的，那些
是不可點選的，但是隨著科技進步，越來越多網頁尤其是兒童網頁強調互動設計，原有
的按鈕連結已被多數強調動態圖像的互動性選單按鈕所取代，活潑豐富的版面帶給兒童
多元化視覺刺激，因而互動式選單按鈕已與背景結合，也跳脫傳統外觀設計，可是這樣
的設計可能讓使用者來到兒童網頁進行搜尋時，會造成辨視混淆，不知道從何點選起或
不知何者是可點選的現象，反而使得資料搜尋緩慢或學習無助。本研究目的即在提出
一套兒童版網頁首頁互動式選單按鈕之設計原則，能具體達成預設用途成效
性以解決互動式選單按鈕與背景之間產生混淆不清的問題。
本研究分成三個階段：(一) 現況調查：在了解此類互動網頁現況及操作
上的問題；(二) 先期實驗：對互動型態不同的按鈕，以現有網頁實例進行實
測及分析；由先期實驗分析出來的結果分析、文獻回顧、兒童對網頁色彩認
知、資深多媒體設計者意見歸納出兒童網頁互動式選單按鈕的設計原則；(三)
驗證實驗：製作原版修正及新版兒童網頁，並驗證其預設用途之成效，再根
據驗證實驗結果提出適合兒童網頁首頁動態圖像的互動式選單按鈕設計。
本研究在前期實驗和驗證實驗中商請 11 位兒童和 16 位成年人，對互
動式選單按鈕進行目視點選與滑鼠滑動點選，來觀察受測者對於按鈕的數量
及位置是否造成預設用途失敗的狀況， 經由獨立 t 檢定、成對 t 檢定、單因
子區集設計 ANOVA、Friedman test 及質性分析得知：現有網頁中目視點選、
滑鼠滑動點選，其正確率顯著偏低，亦即兒童網頁動態圖像的互動式選單按
鈕設計未達預設用途的成效；歸納整理出設計要素後，後期實驗以互動式選
單背景動態呈現方式、互動式選單按鈕排列方式及其圖像大小規劃新網頁設
計，驗證實驗結果顯示新網頁確實能將正確率提高至 94%，大大增加互動式
按鈕的預設用途性。
本研究顯示：運用圖像特徵來設計互動式選單按鈕以與背景產生區隔，互動式選單
按鈕的圖像大小、動態呈現方式，儘可能一致，並做相對的集中排列，不但可以保持網
頁畫面的活潑性和吸引性，且能在互動性上增加預設用途成效。

關鍵字

兒童網頁、互動式選單按鈕、預設用途

並列摘要

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.

並列關鍵字

Interactive Menu Buttons ； Children’s Web Pages ； Affordance

參考文獻

灣科技大學，碩士論文。

Society of Sport Psychology,24 (1).

2、 Anderson,R. J. (1995). Cognitive Psychology and its Implications:4th Ed., New York:

W. H. Freeman Company.

interface Design.