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

User experience of responsive web on multi-device environment

Abstract

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

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.

Fig. 1. List Menu

Fig. 2. Scrolling Menu

Fig. 3. Metro UI

Fig. 4. Change of column

Fig. 5. Scrolling Menu with images

Fig. 6. More button