圖標呈現對使用者喜好度的影響初探 ／ 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).