링크는 어떻게 디자인해요?(UX UI)
링크를 활용하는 다양한 디자인
본 글은 닐슨 노먼 그룹의 <Mini-IA>를 바탕으로 구성했습니다.
요약
점프 링크는 과거에 문제를 일으켰지만, 여전히 사용자를 보고 싶은 콘텐츠로 직접 이동시키는 유용한 도구입니다.
페이지 내 링크란?(앵커 링크 또는 점프 링크)
사용자가 사이트의 다른 페이지가 아닌 동일한 웹 페이지 내의 콘텐츠로 연결되는 링크입니다.
링크는 사용자가 모든 옵션을 탐색하는 것보다 특정 콘텐츠를 탐색하고 싶어 할 때 유용한 역할을 합니다.
[출처:벨로그]페이지 내 링크가 혼란스러운 이유
링크에 대한 사용자의 정신 모델을 충족하지 못하기 때문입니다. 일반적으로 링크는 다른 페이지로 연결되는 기능을 합니다. 이러한 기대를 충족시키지 못할 때 사용자들은 혼란스러워질 수 있습니다.
페이지 내 링크가 유용한 이유
페이지 내 연결은 사용자가 페이지 내용을 탐색하는 데 도움이 됩니다.
사용자가 페이지의 멘털 모델을 형성하도록 돕는 목차 역할
관심 콘텐츠에 대한 직접 접근할 수 있는 기능 제공
검색하는 데 긴 스크롤이 필요한 콘텐츠 내의 검색 가능성 및 참여도를 높임
페이지 내 링크가 사용되는 예시
목차:사용자가 관심 있는 콘텐츠에 직접 접근할 수 있습니다.
맨 위로 이동: 긴 페이지에서 유용한 맨 위로 이동 링크는 스크롤에서 시간을 절약할 수 있는 기능입니다.
색인 및 FAQ: 페이지 상단에 있는 링크 목록은 사용자에게 필요 없는 항목 화면을 스크롤하는 수고를 덜어줍니다.
화면 크기가 미치는 영향
화면 크기가 작아질수록 점프 링크를 사용하는 이점이 증가합니다. 이유는 텍스트의 몇 단락이 데스크톱에서는 한 화면을 가득 채울 수 있지만 모바일에서는 스크롤되는 여러 페이지로 확장되기 때문입니다.
페이지 내 링크를 책임감 있게 사용하는 방법
내용 길이 고려
페이지 내 연결은 페이지의 내용이 긴 경우에만 유용합니다. 사용자는 온라인에서 주의 깊게 읽지 않습니다. 따라서 긴 콘텐츠를 쉽게 관리하기 위해서 콘텐츠를 단축, 재구성 또는 다시 작성할 수 있는지를 고려하세요.
한 페이지에 표시할 정보의 양 고려
한 페이지에 많은 양의 정보를 표시하면 상호작용 비용이 줄어들지만, 사용자가 순서에 맞게 읽지 않거나 해당 항목 중 몇 개만 읽을 가능성이 있는 경우 다른 페이지로 분리하는 것이 더 나을 수 있습니다.
각 개별 콘텐츠 섹션의 길이
콘텐츠 별 섹션의 길이가 짧으면 스크롤 작업이 많이 필요하지 않습니다. 이 경우는 인 페이지 링크를 추가하는 것이 불필요하고 심지어는 해로울 수 있습니다.
한 페이지에 2개 이상의 섹션이 표시되는 경우사용자를 위해 고려해야 할 점
1. 명확한 링크 및 제목 사용하기
긴 콘텐츠는 페이지의 각 영역에서 콘텐츠에 대한 표지판 역할을 하는 여러 섹션으로 구성되면 페이지의 내용을 표시하는데 효과적입니다.
페이지 내 섹션이 많은 경우에는 페이지 내 링크를 통해 이 문제를 해결할 수 있습니다. 링크 목차를 통해 긴 내용을 전부 스크롤할 필요가 없기 때문입니다.
2. 페이지 내 링크 레이블
페이지 내 링크는 페이지 내 다른 링크와 구별되어야 합니다. 구별하기 위해서는 시각적 표시나 이 페이지 또는 문서와 같은 레이블을 사용하여 수행할 수 있습니다.
3. 점프 확인
페이지 내 링크의 텍스트는 링크가 연결되는 페이지 제목과 일치해야 합니다. 글의 섹션의 제목은 사용자의 위치를 식별하는 표지판 역할을 합니다.
링크를 클릭했을 때 섹션을 읽기 쉽게 해야 합니다. 사용자가 페이지 내 링크를 클릭할 때 관련 내용을 상단 가까이 스크롤하여 사용자가 섹션을 최대한 쉽게 읽을 수 있게 해야 합니다.
페이지의 마지막 내용 섹션은 충분히 길어야 합니다. 콘텐츠가 페이지의 맨 위에 나타나지 않고 가운데에 나타날 수 있기 때문입니다.
4. 페이지 내 링크를 고정하는 것을 고려하세요.
메인 콘텐츠의 왼쪽 또는 오른쪽 열
처음에는 눈에 띄지 않을 수 있지만 스크롤에 영향을 받지 않고 계속 표시되는 이점이 있습니다.
페이지 상단의 정적 목차
처음에는 사용자에게 잘 보일 수 있지만 페이지를 스크롤하며 사용자의 시야에서 벗어나게 됩니다.
페이지 상단에 고정 내비게이션 배치는 주의하세요.
일반적으로 내비게이션에 사용되는 영역에 링크를 두면 사용자들은 새로운 페이지로 이어지기를 기대하게 됩니다. 이런 경험은 사용자의 멘털 모델을 깨트립니다.
5. 고정 링크: 사용자의 위치 표시
사용자가 스크롤할 때 페이지 내 링크 목록이 유지된다면 사용자의 현재 위치를 표시해줘야 합니다.
'뒤로' 버튼은?
‘뒤로’ 버튼 기능은 용도에 따라 다르게 처리할 수 있습니다.
목차 & 색인의 경우
뒤로 버튼이 실행 취소로 작용
페이지 내의 이전 위치로 이동
맨 위로 올라가기 링크의 경우
브라우저 기록의 이전 페이지로 안내
맨 위로 올라가기는 링크보다는 명령과 더 유사
아코디언 vs 페이지 내 링크
아코디언 특징
목차, 인덱스를 구현하는 데 사용될 수 있다.
콘텐츠를 직접 제어할 수 있다.
내용의 섹션을 펼치거나 접을 수 있다.
사용자의 입력이 필요하기 때문에 사용자가 입력하지 않으면 내용이 무시될 가능성이 있다.
아코디언 목차는 페이지 내 링크로 구현된 목차보다 사용자에게 더 잘 보인다.
사용자의 읽기 방식을 파악하기
사람들이 모든 내용을 순차적으로 읽는 경향이 있다면, 아코디언을 반복적으로 여는 것은 높은 상호작용 비용으로 이어질 것입니다.
결론: 페이지 내 링크는 좋은가 나쁜가?
긴 콘텐츠가 필요할 때 사용자가 관심 콘텐츠로 바로 이동할 수 있게 하며 사용자 경험을 개선하는데 도움을 줍니다.
페이지 내 링크가 도움이 되는지, 페이지 콘텐츠의 유용성을 높이는지 A/B테스트를 통해 검증해보세요.
작성자: 김정현
긴 텍스트를 가진 콘텐츠에서 페이지 내 링크가 표지판의 역할이 돼줘서 피로도를 줄여주는 기능이라고 생각한다. 근데 모바일에서도 과연 유용한 기능일지 모르겠다.
<관련 글>
