Nick Babich의 글 Pagination BestPractices 소개하고자 합니다.
사이트나 앱의 요소 중에서 가장 흔히 간과되는 것이 페이지네이션 컨트롤(pagination control)입니다. 많은 경우 디자이너와 개발자들은 페이지네이션을 나중에 고려할 사항으로 미루곤 합니다. 하지만 사실 페이지네이션은 제대로 활용하기가 상당히 간단하며, 그럼에도 불구하고 뛰어난 페이지네이션을 적용하고 있는 앱이나 사이트는 아직 많지 않은 실정입니다.
좋은 페이지네이션을 분석하기에 앞서, 페이지네이션의 개념을 설명하고자 합니다.
좋은 페이지네이션
페이지네이션은 콘텐츠를 여러 페이지로 나누고, 사용자가 이전 페이지나 다음 페이지로 이동하거나 특정 페이지로 쉽게 접근할 수 있도록 하는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. 구글 검색 결과가 그 좋은 예시가 될 수 있으며, 페이지네이션은 블로그(이전/다음 포스트 링크)와 많은 이커머스 사이트에서도 자주 찾아볼 수 있습니다.
Pagination
원칙 1. 페이지 길이를 적절하게 제공한다
페이지를 지나치게 짧게 구성해서는 안 됩니다. 사이트나 앱의 페이지는 인쇄된 책의 페이지와는 다르게, 물리적인 제약이 없습니다. 인쇄된 페이지는 종이의 크기에 제한을 받지만, 웹 페이지는 높이가 무한하여 원하는 만큼의 콘텐츠를 담을 수 있습니다.
검색 결과 페이지의 경우, 페이지당 25개에서 75개 정도의 항목을 보여주는 것이 일반적으로 안전한 범위로 여겨집니다. 하지만 이 숫자는 대략적인 기준일 뿐이며, 실제 항목 수는 사이트의 콘텐츠와 업계에 따라 달라질 수 있습니다. 예를 들어, 스펙이 중요한 제품군(가전제품, 하드웨어, 자동차 부품 등)에서는 한 페이지에 보여주는 항목 수가 줄어드는 것이 바람직합니다. 전자제품 전문 유통업체인 Best Buy는 보통 페이지당 15개 항목을 제공하는 예시가 될 수 있습니다. 반면, 시각적으로 비교 가능한 제품군(의류 등)에서는 사용자들이 더 많은 항목을 한 페이지에서 잘 처리할 수 있습니다. 예를 들어, eBay는 한 페이지에 300개 이상의 아이템을 보여줍니다.
이처럼 페이지를 짧게 만들지 않아야 하는 이유는 사용자 경험을 최적화하기 위함입니다. 사이트나 앱의 페이지는 물리적 제약이 없기 때문에, 사용자가 한 번에 볼 수 있는 콘텐츠의 양을 적절히 조절하는 것이 중요합니다. 검색 결과 페이지에서 25개에서 75개 정도의 항목을 보여주는 것은 사용자가 정보를 쉽게 스캔하고 원하는 내용을 빠르게 찾을 수 있도록 돕기 위한 것입니다.
결국, 스펙이 중요한 제품군에서는 사용자가 세부 정보를 비교하기 위해 더 적은 수의 항목을 한 번에 보는 것이 유리하며, 시각적으로 비교 가능한 제품군에서는 더 많은 항목을 나열해도 사용자들이 쉽게 처리할 수 있습니다. 이는 사용자의 인지적 부담을 줄이고, 더 나은 탐색 경험을 제공하기 위한 전략입니다.
원칙 2. 클릭 가능 요소의 크기를 크게 제공한다
많은 사이트와 앱에서 페이지네이션 클릭 타깃의 크기가 얼마나 중요한지를 간과하고 있습니다. 클릭 가능한 타깃을 크게 만드는 것은 메뉴 요소나 페이지네이션 요소에 관계없이 모든 종류의 내비게이션 링크에 적용되는 원칙이지만, 페이지네이션 요소에서는 더욱 중요하게 여겨질 수 있습니다. 사용자가 빠르고 쉽게 클릭할 수 있도록 타깃을 충분히 크게 만드는 것은 단순하면서도 기본적인 접근 방식입니다.
특히 모바일 디바이스에서 좋은 사용자 경험을 제공하기 위해서는 각 요소의 크기를 최소한 44 x 44 points 정도로 설정하는 것이 필수적입니다. 이렇게 하면 손가락으로 정확하게 클릭할 수 있으며, 사용자가 실수 없이 쉽게 선택할 수 있도록 도와줍니다.
결국, 클릭 타깃의 크기를 적절히 조절하는 것은 사용자가 원하는 정보를 빠르고 효율적으로 찾을 수 있도록 하는 중요한 요소이며, 이는 전체적인 만족도를 높이는 데 결정적인 역할을 합니다.
왼쪽: 페이지네이션타겟이 크면 유저가 쉽고 빠르게 찾을 수 있도록 도와준다. Image credits: Apple
원칙 3. 현재 페이지를 표시한다
“지금 내 위치는?”이라는 질문은 페이지네이션을 사용하는 사용자에게 필수적으로 답할 수 있어야 하는 중요한 질문입니다. 사용자는 이 질문에 대한 답을 찾기 위해 페이지네이션 요소의 ‘시각적 단서’를 활용합니다. 따라서 현재 페이지를 명확하게 표시하는 적절한 스타일을 적용하는 것이 매우 중요합니다.
사용자는 자신이 현재 어떤 페이지에 있는지를 알아야 하며, 이 페이지는 다른 페이지들과 확실히 구분되어야 합니다. 이렇게 해야 사용자가 쉽게 자신의 위치를 추적할 수 있습니다. 만약 페이지네이션이 명확하게 표시되지 않는다면, 사용자는 혼란을 느끼고 원하는 정보를 찾기 어려워질 수 있습니다.
또한, 색상에만 의존하지 않고 상태를 이해할 수 있는 방법을 마련하는 것도 중요합니다. 색상은 유용한 시각적 단서이지만, 모든 사용자가 색을 인식하는 방식이 다르기 때문에 색상만으로 정보를 전달하는 것은 부족할 수 있습니다. 예를 들어, 색맹 사용자들은 특정 색상을 구별하기 어려울 수 있습니다. 따라서 색상 외에도 페이지 번호, 아이콘, 텍스트 등의 다른 시각적 요소를 사용하여 현재 페이지를 명확히 전달해야 합니다. 이는 사용자들이 페이지네이션을 보다 효과적으로 이해하고, 탐색할 수 있도록 도와주는 것입니다.
원칙 4. 페이지 숫자를 제한하고 구성 요소 간 간격을 넓힌다
페이지네이션 링크는 최대 10개만 보여줘야 합니다. 많은 링크가 한 페이지에 표시되면 사용자는 혼란을 느끼고, 원하는 정보를 찾기 어려워질 수 있습니다. 적절한 수의 링크를 제공함으로써 사용자가 쉽게 탐색할 수 있도록 돕는 것이 중요합니다.
1) 정보의 명확성
링크가 적으면 사용자는 현재 위치를 쉽게 파악할 수 있으며, 다음에 무엇을 클릭해야 할지 명확하게 이해할 수 있습니다. 너무 많은 링크는 시각적인 과부하를 초래할 수 있습니다.
2) 탐색의 용이성
최대 10개의 링크는 사용자가 한눈에 볼 수 있는 범위 내에서 필요한 정보를 찾을 수 있도록 도와줍니다. 이 범위는 사용자가 신속하게 클릭할 수 있도록 하여, 탐색 속도를 높입니다.
3) 일관성 유지
페이지네이션의 링크 수를 제한함으로써, 전체적인 디자인과 사용자 인터페이스의 일관성을 유지할 수 있습니다. 일정한 수의 링크는 사용자에게 익숙함을 제공하고, 사이트의 탐색 방식을 쉽게 이해할 수 있게 합니다.
좋은 사례: 구글은 10개의 링크를 제공합니다
4) 페이지 링크 간격 확보
(1) 실수 방지
링크 사이에 공간을 두면 사용자가 클릭할 때 실수로 다른 링크를 누르는 가능성을 줄일 수 있습니다. 특히 모바일 디바이스에서는 손가락이 작은 화면에서 정확하게 클릭하기 어려울 수 있기 때문에, 여유 공간이 필요합니다.
(2) 사용자 편의성
충분한 간격은 사용자가 링크를 선택할 때 더 편안한 경험을 제공합니다. 사용자는 클릭할 링크를 쉽게 인식하고, 원하는 링크를 정확하게 선택할 수 있어야 합니다.
(3) 시각적 명확성
링크 사이의 공간은 페이지의 시각적 구성 요소를 명확하게 구분해 줍니다. 이렇게 하면 사용자가 각 링크의 의미를 쉽게 이해하고, 혼란 없이 탐색할 수 있습니다.
(4) 접근성 향상
충분한 간격은 접근성을 개선하는 데도 도움이 됩니다. 장애가 있는 사용자나 손의 움직임이 제한된 사용자에게 더 나은 클릭 경험을 제공할 수 있습니다.
나쁜 사례: 페이지 링크가 조금 가깝습니다. 다른 문제는 페이지 숫자가 두 자리수로 넘어가면 구분하기 매우 어려워 집니다.
원칙 5. ‘이전’과 ‘다음’ 링크를 제공한다
대부분의 경우에 이전과 다음 링크는 유저에게 매우 유용합니다. 하지만 괜찮은 페이지네이션 컨트롤을 만들기 위해서는 페이지 숫자를 서로 명확하게 구분하고 충분한 띄어 쓰거나 독특한 스타일링을 해서 페이지를 잘못 누르는 일이 없게 해야 합니다. ‘이전’과 ‘다음’이라는 텍스트 대신에 화살표를 쓴다면 특히 더 주의해야 합니다.
1) 오류 감소
페이지 숫자나 링크가 서로 가까이 있으면 사용자가 실수로 잘못된 링크를 클릭할 가능성이 높아집니다. 충분한 간격을 두면 이러한 실수를 줄일 수 있어, 사용자가 원하는 정보를 더 쉽게 찾을 수 있습니다.
2) 시각적 명확성
페이지 숫자와 이전/다음 링크를 명확히 구분하면 시각적으로 깔끔한 레이아웃을 유지할 수 있습니다. 이는 사용자가 페이지를 탐색할 때 더욱 직관적으로 이해할 수 있게 도와줍니다.
3) 사용자 경험 향상
링크 사이의 간격이나 스타일링은 사용자에게 더 나은 경험을 제공합니다. 사용자가 링크를 클릭할 때 혼란을 느끼지 않도록 하여, 보다 원활한 탐색을 가능하게 합니다.
4) 아이콘 사용 시 주의 필요
‘이전’과 ‘다음’을 화살표 아이콘으로 표현할 경우, 사용자에게 의미가 명확하게 전달되지 않을 수 있습니다. 이 경우, 화살표의 크기나 디자인을 신중하게 선택하여 사용자가 쉽게 알아볼 수 있도록 해야 합니다.
원칙 6. 모바일 기기에 페이지네이션 적용한다
모바일 기기에서 스크린 공간이 제약됨은 우리가 잘 아는 사실입니다. 그리고 우리는 이를 효율적으로 사용해야 합니다. 데스크탑에서는 페이지 리스트를 제공할 수 있어도, 모바일 기기에서는 기본적인 요소, 즉 현재 페이지 숫자와 기본 내비게이션 옵션(첫 페이지, 이전 페이지, 다음 페이지)만 제공해야 합니다.
1) 화면 공간의 제약
모바일 기기는 화면 크기가 작기 때문에, 모든 정보를 한꺼번에 표시하기 어렵습니다. 이로 인해 중요한 정보와 기능을 우선적으로 배치해야 하며, 불필요한 요소는 생략해야 합니다.
2) 사용자 경험 최적화
모바일 사용자들은 빠르고 직관적인 탐색을 선호합니다. 많은 링크나 정보를 한 화면에 나열하면 사용자가 혼란을 느낄 수 있습니다. 따라서 현재 페이지 숫자와 기본 내비게이션 옵션만 제공함으로써 사용자가 쉽게 탐색할 수 있도록 해야 합니다.
3) 터치 인터페이스의 특성
모바일 기기는 터치로 조작되므로, 링크나 버튼이 너무 많으면 사용자가 잘못 클릭할 가능성이 높아집니다. 필수적인 내비게이션 요소만 제공하면 실수를 줄이고, 더욱 원활한 조작이 가능합니다.
4) 우선순위 설정
모바일 기기에서는 가장 중요한 정보와 기능에 집중해야 합니다. 현재 페이지 숫자와 기본 내비게이션 옵션(첫 페이지, 이전 페이지, 다음 페이지)은 사용자가 정보를 찾는 데 있어 가장 필요한 요소이기 때문에, 이들만 제공하는 것이 효과적입니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요