基于眼动视觉跟踪技术的新闻类APP界面可用性研究
|
摘要
目的分析用户在真实动态浏览新闻类APP的视觉规律及典型界面设计的可用性评价,提出有利于提升用户体验的新闻类APP界面设计建议。方法分析现有的3款新闻类APP界面的信息构架和图文布局,归纳为两点式、四点式、五点式的信息构架,以及左文右图、右文左图、上图下文和上文下图4种图文构建方式,通过眼动视觉跟踪技术,对眼动指标(轨迹图、热点图、焦点图、网格图)及行为指标(误操作、犹豫点)进行分析,针对用户浏览时的表现,以用户访谈的形式询问用户的理解和操作行为,进行新闻类APP界面可用性评估。结果提出了更有利于新闻类APP阅读的界面设计建议。结论此次可用性评估测试是基于APP的动态眼动仪测试,是具有普适性的新闻类APP用户界面设计的可用性评估方法。
The work aims to analyze the visual law of users in real dynamic browsing of news APP and the usability evaluation of typical interface design, so as to put forward suggestions on news APP interface design that are conducive to improving user experience. The information architecture and graphic layout of the existing three news APP interfaces were analyzed and they were summarized into two-point, four-point and five-point information architecture. There were four ways to construct pictures and texts, including the text on the left side of the right picture, the text on the right side of the left picture, and the text on the top and bottom of the picture. Through eye tracking technology, cross-eyed dynamic index(locus figure, hot chart, focus graph, grid graph) and behavior index(wrong operation, hesitation point) were analyzed. For user's performance during browsing, the user's understanding and practice were asked in the form of user interviews for the purpose of news APP interface usability assessment. The interface design suggestions that were more conducive to news APP reading were proposed. This usability assessment test is a dynamic eye-tracker test based on APP, and it is a usability assessment method for news APP user interface design with universal applicability.
The work aims to analyze the visual law of users in real dynamic browsing of news APP and the usability evaluation of typical interface design, so as to put forward suggestions on news APP interface design that are conducive to improving user experience. The information architecture and graphic layout of the existing three news APP interfaces were analyzed and they were summarized into two-point, four-point and five-point information architecture. There were four ways to construct pictures and texts, including the text on the left side of the right picture, the text on the right side of the left picture, and the text on the top and bottom of the picture. Through eye tracking technology, cross-eyed dynamic index(locus figure, hot chart, focus graph, grid graph) and behavior index(wrong operation, hesitation point) were analyzed. For user's performance during browsing, the user's understanding and practice were asked in the form of user interviews for the purpose of news APP interface usability assessment. The interface design suggestions that were more conducive to news APP reading were proposed. This usability assessment test is a dynamic eye-tracker test based on APP, and it is a usability assessment method for news APP user interface design with universal applicability.
引文
[1]杨东润.数字媒体中的交互设计对用户体验的影响--以资讯类手机APP应用为例[J].传媒,2015(12):45-47.YANG Dong-run.The Influence of Interaction Design in Digital Media on User Experience:Take the Information Mobile APP as an Example[J].Media,2015(12):45-47.
[2]刘珊珊.关于网站页面布局的最新方法研究[J].信息与电脑(理论版),2011(2):77.LIU Shan-shan.Research on the Latest Methods of Web Page Layout[J].China Computer&Communication,2011(2):77.
[3]NIELSEN J.Usability Engineering[M].Pittsburgh:AcademicPress Inc,1993.
[4]JACOB R,KARN K.Eye Tracking in Human-computerInteraction and Usability Research:Ready to Deliver thePromises[J].Mind,2003,2(3):4.
[5]彭兰.眼动研究方法在新闻传播领域的应用[J].广播电视传播研究,2010(12):97-104.PENG Lan.Eye Tracking Technique in Journalism and Communication Studies[J].Research on Radio and Television Communication,2010(12):97-104.
[6]董海斌,王丽梅,孙浩章.网页界面设计中的平面视觉元素[J].包装工程,2010,31(2):89-91.DONG Hai-bin,WANG Li-mei,SUN Hao-zhang.Plane Visual Elements in the Web Interface Design[J].Packaging Engineering,2010,31(2):89-91.
[7]常方圆.基于眼动仪的智能手机APP图形用户界面设计可用性评估[J].包装工程,2005,26(8):55-59.CHANG Fang-yuan.Usability Evaluation of Smart Phone Application Graphic User InterfaceBased on Eyetracker[J].Packaging Engineering,2005,26(8):55-59.
[8]李亭.基于用户体验的智能手机APP界面设计研究[D].太原:太原理工大学,2015.LI Ting.Research of Smart Phone APP Interface Design Based on User Experience[D].Taiyuan:Taiyuan University of Technology,2015.
[9]刘婷,侯文军.基于视觉行为的手机新闻APP图文布局设计研究[J].北京邮电大学学报,2016,18(3):6-13.LIU Ting,HOU Wen-jun.Graphic Layout Design Study of Mobile News APP Based on Visual Behavior[J].Journal of Beijing University of Posts and Telecommunications,2016,18(3):6-13.
[10]兰岚,赵刚,李娜.基于网页界面的视觉构成要素分析[J].艺术与设计,2009(2):31-33.LAN Lan,ZHAO Gang,LI Na.Discussion on Visual Basic Elementsofthe WebInterface[J].Art and Design,2009(2):31-33.
[2]刘珊珊.关于网站页面布局的最新方法研究[J].信息与电脑(理论版),2011(2):77.LIU Shan-shan.Research on the Latest Methods of Web Page Layout[J].China Computer&Communication,2011(2):77.
[3]NIELSEN J.Usability Engineering[M].Pittsburgh:AcademicPress Inc,1993.
[4]JACOB R,KARN K.Eye Tracking in Human-computerInteraction and Usability Research:Ready to Deliver thePromises[J].Mind,2003,2(3):4.
[5]彭兰.眼动研究方法在新闻传播领域的应用[J].广播电视传播研究,2010(12):97-104.PENG Lan.Eye Tracking Technique in Journalism and Communication Studies[J].Research on Radio and Television Communication,2010(12):97-104.
[6]董海斌,王丽梅,孙浩章.网页界面设计中的平面视觉元素[J].包装工程,2010,31(2):89-91.DONG Hai-bin,WANG Li-mei,SUN Hao-zhang.Plane Visual Elements in the Web Interface Design[J].Packaging Engineering,2010,31(2):89-91.
[7]常方圆.基于眼动仪的智能手机APP图形用户界面设计可用性评估[J].包装工程,2005,26(8):55-59.CHANG Fang-yuan.Usability Evaluation of Smart Phone Application Graphic User InterfaceBased on Eyetracker[J].Packaging Engineering,2005,26(8):55-59.
[8]李亭.基于用户体验的智能手机APP界面设计研究[D].太原:太原理工大学,2015.LI Ting.Research of Smart Phone APP Interface Design Based on User Experience[D].Taiyuan:Taiyuan University of Technology,2015.
[9]刘婷,侯文军.基于视觉行为的手机新闻APP图文布局设计研究[J].北京邮电大学学报,2016,18(3):6-13.LIU Ting,HOU Wen-jun.Graphic Layout Design Study of Mobile News APP Based on Visual Behavior[J].Journal of Beijing University of Posts and Telecommunications,2016,18(3):6-13.
[10]兰岚,赵刚,李娜.基于网页界面的视觉构成要素分析[J].艺术与设计,2009(2):31-33.LAN Lan,ZHAO Gang,LI Na.Discussion on Visual Basic Elementsofthe WebInterface[J].Art and Design,2009(2):31-33.