Journal of Digital Convergence (디지털융복합연구)

The Society of Digital Policy and Management (한국디지털정책학회)
권호 표지
DOI QR코드

DOI QR Code

User experience of responsive web on multi-device environment

멀티 디바이스 환경에서 반응형 웹의 사용자 경험

  • 강재신 (청운대학교 멀티미디어학과) ;
  • 이영주 (청운대학교 멀티미디어학과)
  • Received : 2018.09.04
  • Accepted : 2018.11.20
  • Published : 2018.11.28
Download PDF
⟨ Previous Next ⟩

Abstract

This study investigated how layouts can be arranged to improve the user experience in response to changes in the size of responsive webs in a multi - device environment. The layout elements of the responsive web are largely divided into a header, a main concept image, a main content, a sub-content, and a footer. As the screen becomes smaller, the use of drawers and the menu of the scrolling menus rather than the vertical menus will help improve the user experience. The main concept image should be consistent and not lose readability through the use of system fonts. The main content and the sub content should be prevented from being long in the vertical scroll, and the card UI, the table list and the grid list could be alternatively presented for this purpose. Another problem with vertical scrolling is that the placement of user-selectable menus, such as more or new content corrections, is helpful in improving the user experience.

본 연구는 멀티 디바이스 환경에서 반응형 웹의 크기 변화에 따른 사용자 경험 향상을 위한 레이아웃을 배치 할 수 있는 방법을 알아보았다. 반응형 웹의 레이아웃 요소는 크게 콘텐츠에 따른 레이아웃 형식을 헤더, 메인 콘셉트 이미지, 그리고 메인 콘텐츠와 서브 콘텐츠, 푸터로 구분하였다. 헤더요소는 화면이 작아지면 세로 메뉴 배치보다는 드로워의 활용과 스클롤링 메뉴를 사용하는 것이 사용자 경험 향상에 도움이 된다. 메인 콘셉트 이미지는 일관성을 유지하고 시스템 폰트의 사용으로 가독성을 잃지 않아야 한다. 메인 콘텐츠와 서브 콘텐츠는 세로 스크롤이 길어지지 않도록 해 주어야 하며 그를 위해 카드 UI와 테이블 리스트 그리고 그리드 리스트를 대안으로 제시할 수 있었다. 또 그 밖에 세로 스크롤의 문제는 더 보기나 새 콘텐츠 고침 등의 사용자 선택 메뉴를 배치하는 것이 사용자 경험 향상을 위해 도움이 된다는 것을 알 수 있었다.

Keywords

DJTJBT_2018_v16n11_465_f0001.png 이미지

Fig. 1. List Menu

DJTJBT_2018_v16n11_465_f0002.png 이미지

Fig. 2. Scrolling Menu

DJTJBT_2018_v16n11_465_f0003.png 이미지

Fig. 3. Metro UI

DJTJBT_2018_v16n11_465_f0004.png 이미지

Fig. 4. Change of column

DJTJBT_2018_v16n11_465_f0005.png 이미지

Fig. 5. Scrolling Menu with images

DJTJBT_2018_v16n11_465_f0006.png 이미지

Fig. 6. More button

References

  1. W. Luke. (2007). Mobile first, Seoul : Web Actual Korea.
  2. S. K. Choi. (2011) Proliferation of N-Screen service and future prospect of content business. Seoul : Kocca Focus.
  3. M. Ethan. (2014). Responsive Web Design, USA : Eyrolles.
  4. M. Firtman. (07.22.2014). You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy. https://www.smashingmagazine.com/2014/07/responsive -web-design-should-not-be-your-only-mobile-strategy/
  5. Y. I. Hong. (2011). Layout and grid to complete the design, Seoul : Mijinsa.
  6. Y. J. Lee. (2018). Mobile UI / UX Design Practice, Seoul : Hanbit Academy.
  7. M. K. Lee. (2015). Secrets of good looking things, editing & grids, Seoul : Gilbut
  8. Y. J. Lee. (2018, May). A Study on Grid of Responsive Web, 2018 Korea Academic-Industrial Science Society Spring Conference, 6-8.
  9. D. I. Hoffman & T. P. Novak. (1996). Marketing in Hypermedia CMEs: Conceptual Foundations. Journal of Marketing, 60(3), 50-68. https://doi.org/10.2307/1251841
  10. M. Hassenzahl & N. Tractinsky. (2006). User experience-a research agenda. Behaviour & Information Technology, 25(2), 91-97. https://doi.org/10.1080/01449290500330331
  11. J. Y. Kim. (2013). An Exploratory Study on the User Experience Design Factors Forming Flow with Smart phones, Korean Society For Computer Game, 24(3), 69-178.
  12. S. M. An. (2016) Study on Web-related Spatial Design Research Trend. Journal of digital convergence, 18(8), 481-492.
  13. S. U. Pi & M. S. Lee. (2016). An Exploratory Study on the User Experience of Augmented Reality Advertising. Journal of digital convergence, 14(8), 177-183. https://doi.org/10.14400/JDC.2016.14.8.177
  14. J. Y. Sung. (2016). Developing convergent class model of augmented reality and ar. Journal of digital convergence, 14(5), 85-93. https://doi.org/10.14400/JDC.2016.14.5.85
  15. D. H. Kim & M. H. Kim. (2015). Design of Mixed reality based edutainment system using cloud service Journal of the Korea Convergence Society, 6(3), 103-109. https://doi.org/10.15207/JKCS.2015.6.3.103