1️⃣ [아티클] "더 알아보기" 링크: 더 잘 쓸 수 있습니다

안녕하세요 캡찹님, 잘 지내셨나요? 

화면을 설계하다보면, 사용자에게 알려주어야 할 정보가 너무 많아 곤란할 때가 있어요. 그 정보는 법적으로 공급자가 사용자에게 알려주어야 하는 것일 수도 있고, (모종의 이유로) 그냥 알려주고 싶어하는 것일 수도 있죠. 하지만 화면은 한정되어 있고, 텍스트가 많아질수록 화면은 복잡해지니까, 최후의 수단으로 '더 알아보기' 또는 '자세히 알아보기'를 넣게 되잖아요. 그런데 그 레이블, 더 잘 쓸 수는 없을까요?

오늘의 아티클에서는 '더 알아보기'가 사용자 경험에 어떤 부정적 영향을 끼치는지 알아보고, 그렇다면 어떻게 더 잘 써야 하는지 알아볼 거예요. 마침 작업 중인 화면에 '더 알아보기' 링크가 있다면, 이번 호에 나오는 3가지 방법을 활용해 보시고 뉴스레터 하단의 피드백 버튼으로 공유해주세요. 😊

그럼 오늘도 재밌게 봐주세요.

‘더 알아보기’의 확산은 모바일이 주도한 것으로 보입니다. 모바일에 최적화된 사이트는 보조 콘텐츠를 뒤로 미루는 데 더 능숙해지고 있어요. 그 말은 모든 세부 정보를 기본으로 제공하는 대신, 제목과 짧은 단락으로 스캔하기 쉽고 이해하기 쉬운 콘텐츠 개요를 제공한다는 거죠. 사용자가 더 많은 정보를 원하면 링크를 누르거나 아코디언을 펼쳐 덜 중요한 콘텐츠로 이동할 수 있습니다. 이 디자인 패턴은 모바일에서 확실히 유용하며, 이 글은 ‘더 알아보기’ 레이블에 대한 비판일 뿐 덜 중요한 콘텐츠를 뒤로 미루는 일반적인 관행에 대한 비판은 아닙니다.

먼저 이 문구를 단독으로 사용하는 게 어떤 문제를 야기하는지, ‘더 알아보기’보다 더 자세히 설명하는 것이 왜 가치 있는지 살펴봅시다. 그다음 좋은 웹사이트 예시를 보며 ‘더 알아보기’ 대신 뭐라고 쓸 수 있는지 알아볼 거예요. 예시를 보며 ‘더 알아보기’ 레이블을 직접 다시 써보셔도 되고요.

'더 알아보기'의 문제점

먼저, ‘더 알아보기’라는 레이블이 나오기 전, 화면 내 텍스트가 앞으로 어떤 내용이 나올지 명확하게 알려준다면 ‘더 알아보기’가 사용자 경험에 해롭지 않는다는 데에는 동의하고 넘어갑시다. 이 글은 더 나은 방법을 소개하는 글이라는 점을 기억하세요. 자세한 묘사를 담은(descriptive) 텍스트는 기대치를 명확하게 설정하는 데 도움이 됩니다. 하지만 링크의 레이블이 자세한 묘사를 담고 있음에도 링크의 범위가 모호한 경우가 종종 있습니다. 그럴 땐 이런 질문이 도움이 될 거예요. 레이블이 해당 주제에 대한 전체 페이지로 이동하나요? 아니면 수십 개의 링크가 담긴 랜딩 페이지로 연결되나요? 외부 사이트나 앱 스토어로 연결되나요?

‘더 알아보기’는 단독으로 쓰일 때 그 모호성과 정보의 부실함 때문에 가장 위험합니다. 이는 불확실성을 유발하는데, 사용자가 클릭 후 무엇이 나올지, 새 페이지로 이동하는 시간을 쓸 만큼 그 정보가 가치 있는지 모르기 때문이지요. 이러한 불확실성으로 인해 사용자는 망설이게 되고 인지적으로 긴장할 수 있습니다. 그 중 일부는 불확실한 링크를 평가하기 위해 페이지 파킹*을 할 수도 있고요.

웹페이지에 여러 개의 ‘더 알아보기’가 있는 경우 사용자는 그것들이 같은 페이지로 연결되는지 아니면 다른 페이지로 연결되는지 궁금해할 수 있습니다. 다시 한 번 말하지만, 불확실성과 인지적 부담은 사용자 경험에 좋지 않습니다. 더 나쁜 건 여러 개의 ‘더 알아보기’가 같은 페이지로 연결되는 경우, 사용자가 클릭을 낭비했고 같은 페이지가 제공되었다는 사실에 실망할 수 있다는 것입니다. 실망과 혼란을 겹겹이 쌓는 것이지요.

마지막으로, 독립형 링크에 설명 키워드가 없다는 건 접근성 측면에서 심각한 문제입니다. 시각 장애가 있어 스크린 리더*나 돋보기를 사용하는 사용자는 ‘더 알아보기’ 링크가 무엇을 가리키는지 확인하기 위해 앞부분으로 돌아가 내용을 다시 훑어볼 수 없습니다. 대부분의 스크린 리더 사용자는 ‘더 알아보기’나 ‘자세히 보기’ 링크를 이해하는 데 도움이 되는 시각적 맥락 없이, 스크린 리더가 그 링크를 읽는 것을 듣게 됩니다.

따라서 ‘더 알아보기’ 대신 자세히 묘사하는 레이블을 쓰면 여러 면에서 이점을 얻을 수 있습니다:

• 접근성이 좋아집니다.
• 사용자가 링크를 더 매력적이고 잠재적으로 더 설득력 있다고 느낍니다.
• 사용자가 클릭에 자신감을 더 갖게 됩니다.
• 더 많은 키워드가 검색 엔진 최적화(SEO)를 돕습니다.
• 의미 있는 링크는 그 자체로도 페이지를 스캔하는 사용자에게 도움이 됩니다.

Pugetsound.edu: 세 추천 스토리 아래에 모두 ‘더 알아보기’ 또는 ‘더 보기’ 링크가 있었을 수도 있습니다. 대신, 사용자가 클릭하면 표시되는 내용이 명확하게 설명되어 있지요.

Rei.com의 이메일: 사용자는 주황색 밑줄이 그어진 링크를 스캔하면 흰색의 큰 제목을 읽지 않고도 무엇이 나올지 알 수 있습니다.

Barclays.co.uk: 사용자는 기부를 앱으로 할 수 있을 거라고는 예상하지 못했을 겁니다. 또는 Barclays Pingit이 돈을 주고받을 수 있는 모바일 앱이라는 사실을 몰랐을 수도 있습니다. 어느 쪽이든 ‘기부앱 정보 보기’ 버튼은 사용자에게 서비스를 알려주는 데 도움이 됩니다.

Mq.edu.au: 이 페이지는 앞서 설명한 세 번째 방법을 사용해 ‘더 알아보기’를 주제마다 놓는 대신 제목을 링크로 쓰고 있습니다.

'더 알아보기' 또는 '자세히 보기'를 독립형 링크 레이블로 사용하는 경우, 사용자에게 불확실성을 야기하고 접근성에 좋지 않다는 점을 기억하세요. 이 아티클에 나온 세 가지 대안, 예시들을 참고해 레이블에 설명 키워드를 추가하고 사용자에게 더 유익하고 매력적인 정보로 만들어보세요.

Katie Sherwin은 미디어 컨설턴트, 코디네이터를 거쳐 현재 닐슨 노먼 그룹에서 시니어 UX 스페셜리스트로 일하고 있어요. 무려 7년 넘게 닐슨 노먼 그룹에 근무하며 다양한 UX 강의 영상과 아티클을 만들었어요.