brunch

매거진 UX 디자인의 모든 것

라이킷 75 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 18. 2016

좋은 무한 스크롤을 만드는 UX 5원칙

UX 디자인 배우기 #36

Today UX 아티클

UX Planet에 올라온 Nick Babich의 글 Infinite ScrollingBest Practices를 전문 번역한 글입니다.

Infinite Scrolling Best Practices

by Nick Babich

uxplanet.org

무한 스크롤링(infinite scrolling혹은 endless scrolling)은 유저가 엄청난 양의 콘텐츠를 끝없이 스크롤해서 보게 해주는 테크닉입니다. 이 테크닉은 스크롤을 내릴 때마다 계속 페이지를 리프레시 해줍니다.

무한 스크롤링

이 테크닉을 사용하면 유저는 아무런 방해나 추가적인 인터랙션 없이도 리스트 항목을 계속 스크롤해서 볼 수 있습니다.

항목은 유저가 페이지를 스크롤해서 내리면 등장합니다. 페이스북의 뉴스피드에서 이용되는 것으로 유명하며, 구글의 이미지 검색 결과 페이지와 트위터의 타임라인에서도 이용되고 있습니다. 매력적으로 들리긴 하지만, 이 테크닉은 모든 사이트나 앱에 두루 적용할 수 있는 해결책이 아닙니다.

좋은 무한 스크롤을 만드는 5가지 원칙

좋은 무한 스크롤을 만드는 것은 불가능한 과제가 아닙니다. 다음 가이드라인을 기억하고 따르면 됩니다.

내비게이션 바는 계속 잘 보이게 한다

무한 스크롤을 이용할 때는 내비게이션 바가 계속 보이게 만드는 것이 가장 좋습니다. 그러면 유저가 사이트나 앱의 다른 영역으로 빠르고 쉽게 찾아갈 수 있습니다. 만일 내비게이션 바에 접근하기 힘들다면, 유저는 리스트 저 아래에 내려가 있을 때 전부 스크롤해서 다시 올라와야 하는 불편이 있습니다.

페이스북의 상단 네비게이션바는 항상 잘 보입니다

모바일 디바이스의 경우: 모바일 스크린은 훨씬 더 작기 때문에 내비게이션 바가 스크린에서 비교적 큰 부분을 차지하게 될 수 있습니다. 만일 스크린이 스크롤하는 피드라면, 내비게이션 바는 사람들이 새로운 콘텐츠를 보려고 스크롤할 때는 숨겼다가, 위로 가려고 내릴 때는 보여주면 됩니다.

페이스북은 스크롤링 방향에 따라 네비게이션바를 숨겨서 일부 세로 공간을 확보했다.

푸터(footer)가 있다면 “더 보기(Load more)” 버튼을 이용한다

무한 스크롤링은 유저가 페이지 푸터(footer)에 접근하는 것을 방해합니다. 그리고 사실 이는 인피니트 스크롤링의 가장 주요한 디자인 문제 중 하나이기도 합니다.

유저가 리스트 하단에 접근할 때마다 계속 새로운 항목이 로드되기 때문에, 다음 결과가 로드되기까지 퓨터는 1, 2초 정도밖에 못 보고 밀려나게 된다. 유저가 푸터에 접근하는 것을 막는 것입니다.

예를 들어 빙 이미지(Bing Images)를 보면, 푸터에 “더 알아보기(Learn More)”나 “Help” 같은 링크가 있지만, 유저는 실제로 무한 스크롤이 멈출 때까지 이 중 어떤 링크도 클릭할 수 없을 것입니다. 아마 시간이 꽤 걸릴 것입니다.

Image credit: Bing Images

만일 당신의 사이트나 앱에 푸터가 있고, 당신에게 (혹은 유저에게) 중요하다면 “더보기” 접근법을 이용해야 합니다. “더 보기” 버튼을 클릭하기 전까지 새로운 콘텐츠를 자동으로 로드하지 않는 것입니다. 이렇게 하면 추가 항목의 온디맨드 로딩을 매우 심플한 인터페이스와 최소한의 인지 부하만으로도 제공할 수 있을 것입니다.

인스타그램도 푸터에 쉽게 접근할 수 있도록 “더보기” 버튼을 사용하고 있으며 유저가 “더 보기” 버튼을 클릭하고 또 클릭하도록 강요하지 않습니다.

인스타그램에서 쓰인 것과 같은 “결과 더 보기” 버튼은 푸터에 계속 접근 가능하게 해주면서도 무한스크롤링의 많은 장점을 제공하고 있습니다.

뒤로 가기 버튼을 누르면 유저가 직전에 있던 지점으로 가게 해준다

때론 무한 스크롤을 적용했다가 큰 사용성 문제가 생기기도 합니다. 현 스크롤 위치가 ‘상태’로 기록되지 않는 것입니다. 만일 유저가 리스트의 링크를 따라 들어갔다가 다시 뒤로 가기 버튼을 눌러서 나오면, 그들은 원래 보던 페이지 지점으로 돌아갈 것이라고 기대합니다.

하지만 유저가 이전에 리스트의 결과를 보던 위치는 유지되지 않게 됩니다. 즉 브라우저의 백버튼은 보통 스크롤 위치를 리셋 해 버려 페이지 최상단으로 가게 해준다는 것입니다. 유저가 제대로 된 “리스트로 돌아가기” 기능이 없어서 금세 불편을 느끼는 것도 놀랄 일이 아닙니다.

사파리의 뒤로가기 버튼

유저가 단지 ‘뒤로 가기’를 눌렀다고 해서 기존에 있던 위치도 돌아가지 못하게 하면 안 됩니다. 유저가 리스트에 있는 특정 항목의 페이지를 방문한 후에 브라우저의 뒤로 가기 버튼을 눌렀을 때 기존 리스트에서 보고 있던 지점으로 돌아갈 수 있게 해주는 것은 매우 중요합니다.

플리커(Flickr)는 브라우저의 뒤로가기 버튼을 누르는 행동을 유저의 기대와 일치시키고 있습니다. 이 앱에서는 유저의 스크롤 위치를 기억해 두었다가 유저가 뒤로가기 버튼을 누르면 원래 위치로 돌아가게 해줍니다.

Image credit: Flickr

특정 항목을 북마크 할 수 있게 해준다

무한 스크롤의 가장 흔한 단점 중 하나는 특정 항목이 떴을 때, 그 항목을 북마크를 하는 것이 불가능하다는 것입니다. 가장 좋아하는 결과를 나중에 볼 수 있는 심플한 북마크(혹은 “저장하기”)는 유저에게 매우 강력한 툴입니다. 유저는 사이트나 앱에서 북마킹 기능을 제공하기만 하면 이용합니다. 예를 들어 핀터레스트(Pinterest)는 유저가 독창적인 아이디어를 저장하도록 도와주는 북마킹 툴을 사용합니다.