클릭을 유도하는 이름 붙이기

웹사이트를 이용할 때 예상치 못한 페이지로 이동할 때가 종종 있습니다. 그 이유로는 여러 요소가 있겠지만, 직접적으로는 버튼이나 메뉴의 이름이 불명확하거나 잘못된 표기로 인한 것이 많습니다. 웹을 현실 세계를 비교한다면, 버튼이나 메뉴는 다른 곳으로 향하는 "문"이며, 버튼에 적힌 이름은 그 문이 어느 곳으로 통하는지 알려주는 "이름"입니다. 오늘은 웹사이트 메뉴 버튼의 이름이 얼마나 중요한지를 알려드립니다. 

웹사이트에 필요한 버튼을 디자인 하기 전, 우리는 주로 아래와 같은 사항을 고려합니다. 

-사용자가 버튼으로 인식하기에 적절한가?

-사용자가 다른 페이지로 이동하는 링크라는 점을 인식하는가? 

-플랫디자인 or 그라데이션을 사용하는가?

-적절한 버튼의 위치는? 

위 사항처럼 버튼의 외형적인 부분에 치중한 나머지, 버튼의 역할과 그에 맞는 이름을 부여해야 한다는 중요점을 잊어버리곤 합니다. 그럼 어떤 부분이 중요한지 함께 알아볼까요?

[버튼의 이름은 사용자의 예측을 반영합니다.]  

예를 들어 화장실 문을 생각해 봅시다. 사용자가 처음 화장실 문과 맞닥뜨렸을 때, 그 문은 사용자에게 문을 넘어 다른 장소로 갈 수 있음을 알려줍니다. 그리고 "화장실"이라는 팻말은 그 방을 묘사하며, 사용자가 그 방에서 무엇을 볼 수 있을지 예측할 수 있게끔 합니다. 만약 여자 화장실을 "남자"화장실로 잘못 표기했을 때, 남자가 그 화장실에 들어간다면 사용자의 예측이 엇갈려 신뢰가 무너지는 현상이 발생하는 것이죠. 이름이 갖춰야 할 요건은 아래와 같습니다. 

1. 행동이나 동작을 묘사할 것 

2. 클릭 후 보일 콘텐츠를 예상할 수 있게 할 것

3. 명확하며, 단순하고, 직관적으로 표현할 것

1. 행동이나 동작을 묘사할 것

적절한 이름은 사용자가 경험하게 될 행동이나 동작을 정확하게 묘사해야 합니다. 간단한 예가 있습니다. 웹사이트의 문서 양식에서 "Submit(제출하기)"의 의미는 문서에 입력한 콘텐츠가 누군가에게 전달될 것임을 알려줍니다. 그러므로 사용자는 제출하기 버튼을 클릭할 때, 정보가 보내질 것을 예상합니다. 그리고 클릭 후, 어디로 내용이 보내졌는지 확인하는 페이지가 등장합니다. 반면 "Save(저장)"는 입력한 내용이 오직 나만 확인 가능하다는 것을 알려줍니다. 개인정보를 업데이트하는 경우가 이에 해당됩니다. 

버튼 이름이 행동과 동작을 묘사하는 The New York Genome Center 웹사이트

2. 클릭 후 보일 콘텐츠를 예상할 수 있게 할 것

앞에 다뤘던 화장실을 예로 들어 보겠습니다. 화장실이라는 이름이 붙여진 곳으로 들어가면, 일반적으로 변기, 세면대, 화장지 등이 있습니다. 문에 적힌 화장실이라는 이름으로 사용자는 다음에 보일 장소를 예측하였고, 방에 들어온 후 적절한 방에 들어왔다는 확신을 합니다. 만약 사용자가 당신의 사이트에서 전화번호나 담당자 이메일 주소를 확인한다고 가정하면, 메뉴 옵션 중 "Contact" 메뉴를 클릭 할 확률이 높습니다. 그리고 클릭과 동시에 방문자는, 클릭한 후 보일 페이지에 전화번호와 이메일주소 등 관련된 내용이 있을 것을 기대하게 됩니다. 따라서 메뉴명은 다음에 보일 페이지를 예상할 수 있게끔 이름을 부여해야 방문자의 혼동을 피할 수 있습니다.

다음에 보일 페이지를 예측가능하도록 만든 Pure fix 사이트

3. 최대한 심플하고 명료하게

웹의 특성상 다양한 국적의 방문자를 고려해야 합니다. 특히 특정 문화를 표현한 것이나 속어는 피하여 모든 사용자에게 명료하게 전달되어야 하는데요. 또한, 이름이 너무 길지 않아야 한 번에 읽히며, 직관적으로 쉽게 이해가 가능해야 합니다. 

이름이 심플하게 표현된 YogurtLabs 사이트

적절한 메뉴명은 사용자들에게 사이트를 이해하는 데 큰 도움이 됩니다. 반대로 적절치 못한 이름은 사용자의 이해를 방해하며, 사이트를 넘어 그 회사를 신뢰하지 못하게 합니다. 사소하게 여길 수 있는 메뉴 버튼은 이처럼 중요한 역할을 수행하는데요. 하루에도 수십 개의 사이트를 넘나드는 방문자를 위해 발전할 웹 환경과 더불어, 사용자를 배려하는 메뉴명을 기대해 봅니다.

자료 출처: Codrops

by 종달새발자국