페이지 네이션? vs 더보기?
그래서 많은 콘텐츠를 어떻게 보여주지?
현재 나는 스타트업에서 디자이너로 일하고 있다. UI 디자이너로는 어느 정도 경력이 쌓였다고 생각했고 프로덕트 디자이너로 롤을 변경하기 위해 기존에 일하던 기업에서 스타트업으로 이직한 케이스이다. 이전 기업에서는 화면 기획서를 전달받아 디자인 리뷰하고 사용성에 맞춰 컴포넌트를 구성하고 배치하는 일을 중점적으로 해왔는데, 프로덕트 디자이너로서 스타트업에서 일하게 되면서는 조금씩! 궁금한 부분들이 생기기 시작했다.
어느 날 화면 기획서에 궁금한 부분이 생겼다!
<페이지네이션 or 더보기>
모바일에서 같은 정보를 리스트 형태로 화면에 보여줄 때 더 많은 리스트를 보여주기 위해 선택한 컴포넌트가 'Pagination'이었다는 점이었다. 해당 콘텐츠는 특정 콘텐츠의 순위와 정확한 숫자를 보여주는 콘텐츠로 유저에 따라 리스트가 많아질 수도 있고 아예 생성되지 않을 수도 있는 가변적인 콘텐츠였다.
출처 : http://blog.sodhanalibrary.com/2015/03/responsive-pagination-using-angularjs.html#.YOZVGRMzY8M처음 내가 들었던 생각과 행동은 아래 1,2,3번으로 연결되어 최종 산출물에 반영되었다!
1️⃣모바일에서 한때 봤던 패턴이지만 요즘은 안 쓰이는 것 같은데! => 레퍼런스 리서치
2️⃣함께 일하는 기획자에게 리뷰 요청 => 답변받아 추가 레퍼런스 리서치
3️⃣주변인들에게 문의 => 페이지네이션과 더보기 버튼에 대한 의견 취합 후 절충안 제시
4️⃣최종 페이지 디자인 완료!
Pagination 모바일에서 한때 봤던 패턴이지만
요즘은 안 쓰이는 것 같은데!
이전에는 모바일에서 Pagination 버튼을 사용하기도 했지만 터치 디바이스 환경에 맞춰 대부분 더보기 버튼으로 처리하지 않나? 라는 생각이 들었다. 실제로 다양한 레퍼런스들을 확인해보니 대부분 모바일 페이지에서는 더 많은 정보를 보여주기 위해 '더보기' 버튼의 형태를 선택해서 보여주고 있었다.
그렇지만, 분명히 기획서의 기획의도가 있을 것이므로 이 부분을 기획자에게 확인해보려고 리뷰 요청을 하였다. 추가적으로는 분명 콘텐츠의 종류와 쓰임에 따라 다른 방식으로 처리해야 할 것 같아 이 부분에 대한 아티클도 함께 찾아보았다.
** 참고 아티클 링크 첨부
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
https://crocoblock.com/blog/pagination-vs-infinite-scroll/
Pagination vs 더보기 버튼?
어떤 걸 선택해야 좋을까!
기획자에게 기획 의도를 문의해보니 제공하는 정보의 종류와 쓰임을 생각했을 때 유저가 정확한 페이지로 이동할 것을 원할 것 같아 Pagination으로 선택했다는 답변이 돌아왔다. 충분히 이해가 되었기도 해서 우선 디자인에 Pagination과 더보기 버튼 두 타입으로 간단하게 테스트를 진행해보았다.
* Pagination 적용 안 더보기 버튼 적용 안
그렇지만 여전히 작업하면서 여러 가지 의문과 생각이 들었다.
1. 보여주는 콘텐츠가 순위 정보인데 '특정 페이지로 이동이 가능하도록' 페이지네이션을 써야 할 정도로 중요한 기능일까?
2. 다른 레퍼런스에서는 순위 콘텐츠를 왜 더보기로 처리하고 있을까?
3. 모바일에서는 페이지 전체를 고려하여 꼭 필요한 기능만 넣고 싶다! <... 간결하게 디자인하고 싶어!!ㅠ>
이러한 고민 끝에 결국 주변 요정들에게 헬프를 요청
요정 1 : 모바일에서는 당연히 더보기 아닌가용, 근데 보여주는 정보에 따라 달라지긴 할 것 같아요, 편집이 필요하다거나 기억해두고 나중에 찾아봐야 하는 정보라면 저라면 페이지네이션을 쓰고 그게 아니라면 더보기 버튼이 낫겠습니다!!
요정 2 : 위의 말에 동의합니다. 다만 기억해두고 나중에 찾아봐야 하는 정보라기엔 보여주는 정보가 순위에 따른 정보이고, 항목도 많지 않기 때문에 저라면 '더보기'를 선택할 것 같아요. 순위에 따른 정보이고 페이지네이션으로 처리를 하게 된다면 '1-10', '11-20'로 순위 리스트가 페이지 단위로 끊길 텐데 유저가 해당 페이지를 기억하는 걸 우선으로 할지 전체의 흐름을 이해하고 붙여서 볼 수 있는 게 좋을지 고민해서 선택하면 좋을 것 같아요.
최종 선택은?
순위라는 정보가 가지고 있는 속성에 대해 놓치고 있었던 부분을 주변 사람에게 물어봄으로써 깨달을 수 있었고 화면 디자인 진행 시에 해당 의견을 반영하여 '더보기 버튼'을 적용하는 것으로 페이지를 수정하였다! 물론 유저가 특정 페이지에 정확히 이동하는 것을 원할 것이라는 의견도 어느 정도 반영하여 유저가 대략적인 화면 내 위치를 기억할 수 있도록 더보기 버튼에 숫자를 넣어 표기하는 형태로 처리하였다.
<최종안>
<최종 결정된 스타일>글을 마치면서...
'모바일은 당연히 더보기!'라는 인식에서 벗어날 수 있었던 계기가 됨
(더보기를 선택했으나 이유를 모르고 패턴 형태로 사용하게 되면 사용성이 떨어질 것 같음)
예전에 쓰였던 컴포넌트들을 왜 사용하지 않게 되었는가? 한번 생각해 보는 것도 도움이 됨
궁금한 부분이 있다면 물어보고 해결하자.
내 생각에, 경험에 따라 결정하지 말자. 당연한 것도 당연한 게 아닐 수 있다!
덧붙이는 말
: 글을 발행하는 시점에서 페이지네이션과 더보기 버튼에 대해 고민했던 프로젝트가 아직 오픈 전이기 때문에 페이지 전체를 공유할 수 없음을 미리 알려드립니다ㅠ
: 해당 프로젝트가 오픈된다면 다시 업데이트하도록 하겠습니당.. :)
기획 글감
<어느 날 화면 기획서에 궁금한 부분이 생겼다>
<어느 날 새벽에 잠이 깨서 글을 쓰기 시작했다>
