DOI QR코드

DOI QR Code

웹 사용자 인터페이스 향상을 위한 풀다운메뉴에서 방향제어가 가능한 애니메이션 기법

Animation Techniques with Direction Control in Pull-down Menu for Improving Web User Interface

  • 조한수 (한중대학교 공학부 모바일IT공학전공)
  • 투고 : 2016.08.05
  • 심사 : 2016.09.20
  • 발행 : 2016.11.28

초록

최근 인터넷을 통한 정보획득이 증가함에 따라 웹을 기반으로 하는 사용자 인터페이스의 중요성이 그 어느 때 보다 강조되고 있다. 본 연구는 웹 사용자 인터페이스 향상을 위하여 풀다운메뉴에서 서브메뉴 슬라이딩 구조를 개선하는 것을 목적으로 한다. 많은 웹 사이트에서 사용 중인 풀다운메뉴의 서브메뉴에 적용된 애니메이션 기법은 매우 단조로운 슬라이딩 구조를 하고 있다. 이러한 문제점을 개선하기 위하여 풀다운메뉴에서 방향제어가 가능한 확대/축소 및 이동 애니메이션 기법에 기반을 둔 새로운 슬라이딩 알고리즘을 제안한다. 연구 결과, 제안한 방법은 기존의 풀다운메뉴와 비교하여 확연히 시각적인 효과를 향상할 수 있을 뿐만 아니라 웹을 기반으로 하는 사용자 인터페이스 구현에도 쉽게 적용할 수 있다. 제안한 기법을 반응형 이미지 슬라이더에 적용하는 실험에서도 좋은 결과를 얻었다. 향후 제안한 기법을 이용한 웹 기반 인터랙티브 콘텐츠를 구현하기 위하여 성능을 고려한 연구가 필요하다.

As obtaining information via the Internet has increased recently, the importance of web-based user interface more than ever is being emphasized. The purpose of this study is to improve the sliding structures of submenu in pull-down menu for improving web user interface. Animation techniques applied to the submenu of the pull-down menus that are being used at many web sites have very monotonous sliding structures. In order to solve these problems, a new sliding algorithm based on enlarging/reducing and moving animation techniques with direction control in pull-down menu is proposed. As a result, the proposed method can not only improve visual effects significantly but be also easily applied to the implementation of the web-based user interface in comparison with the previous pull-down menus. Finally, experiments on application of the proposed sliding algorithm to responsive image slider show that the proposed method can achieve good results. Further studies taking into account performance are needed to implement web-based interactive contents using the proposed method.

키워드

참고문헌

  1. 조세형, "웹사이트 정보품질 및 사용자인터페이스품질이 문화상품 온라인구매의도에 미치는 영향: 고객관여도의 조절효과," 한국콘텐츠학회논문지, Vol.13, No.12, pp.931-944, 2013. https://doi.org/10.5392/JKCA.2013.13.12.931
  2. 최은석, 정승호, 김대용, "WEB2.0 기반 디자인 아이디어 발상 시스템의 사용자 인터페이스 개선," 한국콘텐츠학회논문지, Vol.10, No.1, pp.37-45, 2010. https://doi.org/10.5392/JKCA.2010.10.1.037
  3. J. Park and J. Kim, "Contextual navigation aids for two World Wide Web systems," International Journal of Human-Computer Interaction, Vol.12, No.2, pp.193-217, 2000. https://doi.org/10.1207/S15327590IJHC1202_3
  4. B. Yoo and J. Kim, "Experiment on the effectiveness of link structure for convenient cybershopping," Journal of Organization Computing and Electronic Commerce, Vol.10, No.4, pp.241-256, 2000. https://doi.org/10.1207/S15327744JOCE1004_03
  5. 유병민, "인터넷 정보탐색 과정에서 정보구조와 메뉴디자인의 상호작용 분석," 정보처리학회논문지, 제12-B권, 제4호, pp.473-478, 2005.
  6. 서종환, 김순덕, "네비게이션 디자인에 있어 성별에 따른 선호 스타일 연구," 감성과학, Vol.8, No.3, pp.221-229, 2005.
  7. 배윤선, 이현주, "유니버설 디자인 개념의 웹 네비게이션 디자인에 관한 연구," 디자인학연구, 통권 제66호, Vol.19, No.4, pp.101-110, 2006.
  8. 이중엽, "장애인을 위한 유니버설 웹 유저 인터페이 디자인에 관한 연구," 한국 컴퓨터정보학회논문지, 제12권, 제4호, pp.191-200, 2007.
  9. 이중엽, "유비쿼터스 컴퓨팅 환경에서 노인을 위한 유저 인터페이스 디자인방법 연구," 한국인터넷방송통신TV학회논문지, 제9권, 제6호, pp.245-251, 2009.
  10. http://www.w3.org/Style/CSS
  11. http://www.jquery.com
  12. 조한수, "하이라이트이미지 애니메이션과 계층적 쌓임 구조를 이용한 풀다운메뉴 설계," 한국정보기술학회논문지, Vol.14, No.6, pp.167-177, 2016.