圖標呈ç¾å°ä½¿ç”¨è€…喜好度的影響åˆæŽ¢ ï¼ A preliminary study on presentation of graphical icons affect with viewers’ preference

林萱 Hsuan Lin, 謝毓琛 Yu-Chen Hsieh

摘要


本研究在探討ä¸åŒçš„圖標呈ç¾å°ä½¿ç”¨è€…喜好度的影響,實驗設計分為兩階段,第 一階段圖標調查與分æž:çµæžœç™¼ç¾åœ–標呈ç¾ä¸»è¦æ˜¯ç”±åœ–標構æˆã€æ¥µæ€§èˆ‡åœ–標邊 框所組æˆ,圖標構æˆå¯åˆ†æˆç·šæ§‹æˆèˆ‡é¢æ§‹æˆ,極性å¯åˆ†ç‚ºæ­£æ¥µèˆ‡è² æ¥µã€é‚Šæ¡†å‰‡å¯åˆ† 為有邊框與無邊框,經排列組åˆä¸¦æŽ’除 2 種ä¸å¯èƒ½çš„模å¼å¾Œ,å¯çµ„æˆ 6 種ä¸åŒçš„呈 ç¾æ¨¡å¼,分別為:M1(線構æˆ/正極/有邊框)ã€M2(é¢æ§‹æˆ/正極/有邊框)〠M3(線構æˆ/負極/有邊框)ã€M4(é¢æ§‹æˆ/負極/有邊框)ã€M5(線構æˆ/æ­£ 極/無邊框)ã€M6(é¢æ§‹æˆ/正極/無邊框)。第二階段圖標呈ç¾å–œå¥½åº¦è©•ä¼°:é€ éŽçœ¼çƒè¿½è¹¤å„€åµæ¸¬ç ”究åƒèˆ‡è€…觀看ä¸åŒåœ–標呈ç¾çš„第一眼的å‡è¦–點ä½ç½®æ¬¡æ•¸,與主 觀喜好度評分,以了解圖標呈ç¾å°ä½¿ç”¨è€…喜好度的影響。36 ä½ç ”究åƒèˆ‡è€…觀看 30 組刺激物,以å‰è¿°å…­ç¨®åœ–標呈ç¾æ¨¡å¼åŒæ™‚展ç¾;並é€éŽçœ¼çƒè¿½è¹¤å„€åŠ ä»¥è¨˜éŒ„。將研 究åƒèˆ‡è€…的第一眼å‡è¦–點ä½ç½®æ¬¡æ•¸èˆ‡ä¸»è§€å–œå¥½åº¦è©•åˆ†é€²è¡Œçµ±è¨ˆåˆ†æžã€‚研究çµæžœé¡¯ç¤º (M4) é¢æ§‹æˆé…åˆè² æ¥µèˆ‡æœ‰é‚Šæ¡†çš„圖標呈ç¾æ˜¯å–œå¥½åº¦çš„最佳組åˆ;線構æˆé…åˆæ­£æ¥µèˆ‡ 無邊框 (M5) 的圖標呈ç¾æ˜¯å–œå¥½åº¦çš„最差組åˆã€‚研究çµæžœå¯ä½œç‚ºä»‹é¢è¨­è¨ˆå¸«åœ¨è¨­è¨ˆåœ– 標時的åƒè€ƒã€‚ 

 

 

This study aimed to explore how different presentation modes of graphical icons affect the viewer's preference. The research separates 2 stages. First stage, investigation and analysis of icon presentation modes: as indicated by the nding, presentation modes consist of three main features: icon composition, polarity, and border. Through permutation and combination, six presentation modes were obtained as follows: M1 (line / positive polarity / border), M2 (plane / positive polarity / border), M3 (line / negative polarity / border), M4 (plane / negative polarity / border), M5 (line / positive polarity / no border), and M6 (plane / positive polarity / no border). Second stage, experiment of icon presentation modes on user’s preference: thirty-six participants were required to watch thirty stimuli, or graphical icons, presented concurrently in six above mentioned modes. The number of initial xations was recorded by eye tracker; meanwhile, subjective evaluation of preference was conducted and analyzed. As indicated by the experimental results, the icons presented in M4 attracted the most attention; in contrast, the icons presented in M5 attracted the least attention. The ndings herein can be used as a reference by interface designers while icons are being designed. 


關鍵詞


眼球追縱、線構成、面構成、正極、負極、有邊框、無邊框

全文：

PDF

參考文獻


Baxter, M. (1995). Product design: CRC Press.

Beringer, D. B., & Peterson, J. G. (1985). Underlying behavioral parameters of the operation of touch-input devices: Biases, models, and feedback. Human Factors: The Journal of the Human Factors and Ergonomics Society, 27(4), 445-458.

Brunner, T., Reimer,T. & Opwis, K. (2005). Cancellation and focus: the impact of feature attractiveness on recall. Paper Presented at The German Cognitive Science Conference, Switzerland: Schwabe.

Bullimore, M., Fulton, E., & Howarth, P. (1990). Assessment of visual performance. Evaluation of human work: a practical ergonomics methodology, 804-839.

Curry, M. B., McDougall, S. J., & de Bruijn, O. (1998). The effects of the visual metaphor in determining icon efficacy. Paper presented at the Proceedings of the Human Factors and Ergonomics Society Annual Meeting.

Deubel, H., & Schneider, W. X. (1996). Saccade target selection and object recognition: Evidence for a common attentional mechanism. Vision research, 36(12), 1827-1837.

Dewar, R. (1999). Design and evaluation of public information symbols. Visual information for everyday use: Design and research perspectives, 285-303.

Easterby, R. S. (1970). The perception of symbols for machine displays. Ergonomics, 13(1), 149-158.

Fleetwood, M. D., & Byrne, M. D. (2002). Modeling icon search in ACT-R/PM. Cognitive Systems Research, 3(1), 25-33.

Götz, V. (1998). Color & Type for the screen: RotoVision.

Gittins, D. (1986). Icon-based human-computer interaction. International Journal of Man-Machine Studies, 24(6), 519-543.

Goonetilleke, R. S., Lau, W. C., & Shih, H. M. (2002). Visual search strategies and eye movements when searching Chinese character screens. International journal of human-computer studies, 57(6), 447-468.

Ho, C.-H., & Lu, Y.-N. (2014). Can pupil size be measured to assess design products? International Journal of Industrial Ergonomics, 44(3), 436-441.

Horton, W. K. (1994). The icon book: Visual symbols for computer systems and documentation: John Wiley & Sons, Inc.

Huang, H., & Lai, H.-H. (2008). Factors influencing the usability of icons in the LCD touchscreen. Displays, 29(4), 339-344.

Huang, K.-C., & Chiu, T.-L. (2007). Visual search performance on an lcd monitor: effects of color combination of figure and icon background, shape of icon, and line width of icon border. Perceptual and motor skills, 104(2), 562-574.

Huang, K.-L., Chen, K., & Chang, J. (2010). Kansei Evaluation on the Visual and Hearing Image of Interface Design. Paper presented at the Kansei engineering and emotion research international conference.

Landa, R. (2010). Graphic design solutions: Cengage Learning. Lansdale, M. W., & Ormerod, T. C. (1994). Understanding interfaces: a handbook of

human-computer dialogue: Academic Press Professional, Inc.

Lee, W., & Benbasat, I. (2003). Designing an electronic commerce interface: attention and product memory as elicited by web design. Electronic Commerce Research

and Applications, 2(3), 240-253.

Lin, Y., Zhang, W., & Watson, L. (2002). A study of ergonomic measurement indices in evaluating human-machine interfaces. Paper presented at the Proceedings of

the Human Factors and Ergonomics Society Annual Meeting.

Lindberg, T., & Näsänen, R. (2003). The effect of icon spacing and size on the speed of icon processing in the human visual system. Displays, 24(3), 111-120.

Mirzoeff, N. (2002). The visual culture reader: Psychology Press. Memon AM, Banerjee I, Nagarajan A. (2003) GUI ripping: Reverse engineering of graphical user interfaces for testing. Proceedings of the 10th Working Conference on Reverse Engineering, November 2003. IEEE Computer Society Press: Piscataway, NJ, 260–269.

Näsänen, R., Karlsson, J., & Ojanpää, H. (2001). Display quality and the speed of visual letter search. Displays, 22(4), 107-113.

Näsänen, R., & Ojanpää, H. (2003). Effect of image contrast and sharpness on visual search for computer icons. Displays, 24(3), 137-144.

Nagamachi, M. (1995). Kansei engineering: a new ergonomic consumer-oriented technology for product development. International Journal of Industrial Ergonomics, 15(1), 3-11.

Rainie L., Fox S. (2012). Just in time information through mobile connections. Pew Research Center's Internet x0026 American Life Project [Internet]. 2012 May 11, 2013. Available from: http://pewinternet.org/∼/media//Files/ Reports/2012/PIP_Just_In_Time_Info.pdf.

Rosbergen, E., Pieters, R., & Wedel, M. (1995). Undirected visual attention to advertising. A segment-level analysis, 1995-1999.

Schiffman, L., Bednall, D., O'Cass, A., Paladino, A., & Kanuk, L. (2005). ConsumerBehaviour (ed.). Australia: Pearson Education Australia.

Schiffman, L. G., & Kanuk, L. L. (2000). Consumer Behavior, 7th: Prentice Hall, Inc. Sears, A. (1991). Improving touchscreen keyboards: design issues and a comparison

with other devices. Interacting with computers, 3(3), 253-269.

Shimojo, S., Simion, C., Shimojo, E., & Scheier, C. (2003). Gaze bias both reflects and influences preference. Nature neuroscience, 6(12), 1317-1322.

Simion, C., & Shimojo, S. (2006). Early interactions between orienting, visual sampling and decision making in facial preference. Vision research, 46(20), 3331-3335.

Stanfield, R. H. (1985). Advertising Manager's Handbook: Chicago, Boston and London: The Dartnell Corporation.

Wolfe, J. M., Oliva, A., Horowitz, T. S., Butcher, S. J., & Bompas, A. (2002). Segmentation of objects from backgrounds in visual search tasks. Vision research, 42(28), 2985-3004.

Wong, W. (1993). Principles of form and design: John Wiley & Sons.

å”大崙 , æŽå¤©ä»» , & 蔡政旻 . (2005). 喜好與視線軌跡關係åˆæŽ¢â”€ 以色彩喜好排åºä½œæ¥­ç‚ºä¾‹ . Chinese Journal of Psychology, 47(4), 339-351.

張悟éž. (1993). 從èªçŸ¥å¿ƒç†çš„è§€é»žä¾†æŽ¢è¨Žè¦–è¦ºè³‡è¨Šè¨­è¨ˆçš„æ–¹å‘ : 工業設計雜誌. 21(1), 2-11.

黃國樑 , & 陳國祥 . (2013). 智慧手æŒå¼è£ç½®åœ¨äº’動介é¢ä¸­ä¸åŒæ„Ÿå®˜è¨­è¨ˆè¦ç´ 與感性æ„象的åˆæŽ¢ . æ„Ÿæ€§å­¸å ± , 1(2).