더 나은 UX 디자인을 위해: 이것을 클릭해도 될까요?

미묘한 변화가 CTR을 높이는 방법

누구나 더 많은 클릭을 원합니다. 더 많은 탭. 더 많은 사용자가 '네, 당신이 나에게 주는 것이 무엇이든 하고 있습니다.'라고 말합니다. 우리는 실제로 사용자가 더 많이 클릭하고 싶게 만드는 몇 가지 방법을 살펴보고 싶었습니다. UX 디자인 이 필요한 곳입니다!

웹 전체에 아주 잘 그려져 있습니다. 사용자가 클릭하도록 하면 미묘한 변화가 큰 효과를 볼 수 있습니다. 우리는 이러한 미묘한 변화가 정확히 무엇이며 전환에 미칠 수 있는 영향을 살펴보았습니다.

글꼴

글꼴은 엄청나게 큰 효과를 줄 수 있습니다. 예를 들어, 2009년에 Tropicana는 대대적으로 브랜드를 변경했으며 그 중 상당 부분은 글꼴을 다시 만드는 것이었습니다. Tropicana 글꼴은 로고이기도 합니다.

Vital Design을 통한 이미지

매출은 순식간에 20% 하락했다.

글꼴은 또한 사람들이 클릭하도록 할 때 신뢰할 수 있는 가장 안정적인 것 중 하나입니다.

일반적으로 고대비의 굵은 산세리프체 글꼴이 효과적입니다.

왜요? 가장 읽기 쉽습니다. 인터넷에 이런 예가 있습니다. Basecamp, BaseCRM, Evernote, mHelpDesk – 이 모든 회사는 고대비, 굵은 산세리프 글꼴로 동일한 모양의 CTA를 가지고 있습니다. 보기 쉽고 읽기 쉽습니다. 그렇기 때문에 회사에서는 세리프 글꼴보다 이 글꼴을 사용하는 경향이 있습니다. (포스터도 마찬가지입니다. 오래전부터 읽을 수 있습니다.) 또한 산세리프체는 컴퓨터에서 읽기가 더 쉽기 때문에 독자가 클릭하기를 원할 때 산세리프체를 사용하는 것이 좋습니다.

그림자 + ​​3D 효과

그림자를 만들고 3D로 만드는 것이 사람들이 클릭하게 만드는 방법은 놀랍습니다. 플랫 디자인의 가장 큰 단점 중 하나입니다. (현재. 다른 하나는 결국에는 정말 구식이 될 것이라는 점입니다.) 정말 평면적일 때는 멋지게 보이지만 클릭할 수 있는 것과 클릭할 수 없는 것을 구분하기가 쉽지 않습니다. Jakob Nielsen은 2012년 Windows 8을 평가할 때 이에 대해 논의했습니다.

사람들은 실제로 버튼처럼 보일 때 더 많이 클릭하기 때문에 둥근 모서리나 그림자를 사용하면 클릭할 수 있는 항목과 클릭할 수 없는 항목을 쉽게 구분할 수 있습니다.

(프로 팁: 키오스크 스타일 버튼이라고 함).

이것은 실제로 흥미로운 문제를 제시합니다. 키오스크 스타일의 버튼은 원래 아케이드 및 기타 장소에서 사용되었습니다. 그래서 우리가 디지털로 전환했을 때 그 기준이 그대로 유지되었습니다. 그건 말이 되지만, 어느 시점에서 3D 버튼이 비스듬하게 깎이기 위해 비스듬하게 3D 버튼이 되기도 합니다. 실제로 어디에서 왔는지 기억하는 사람이 없기 때문입니다. 플로피 디스크 저장 아이콘과 같습니다. 스큐어모픽 루트는 결국 임의적이 되어 더 이상 스큐어모픽이 아닙니다.

이 모든 것은 사람들이 지금 키오스크 스타일의 버튼을 클릭하는 것이 더 편안하다는 것을 의미하지만 플랫 디자인이 몇 년 더 버틸 수 있다면 꾸준한 움직임을 볼 수 있습니다.

움직임

많은 사람들이 클릭 가능한 3D를 만드는 데 움직임을 집중하지만, 첫 번째는 UX 관점에서, 두 번째는 평면 디자인의 의미 때문에 카테고리 자체를 보증할 만큼 충분히 중요하다고 생각합니다.

UX 관점에서

사용자는 자신의 행동에 대한 피드백이 필요합니다. 사용자가 자신이 어디에 있고 무엇을 해야 하는지 이해하는 데 도움이 되는 최고의 방법입니다.

클릭할 수 있도록 만드는 첫 번째 작업은 사용자에게 클릭할 수 있음을 알리는 것입니다.

예를 들어 버튼의 경우 약간의 그래디언트 변경만으로도 놀라운 결과를 얻을 수 있습니다. 예를 들어 Eventbrite 홈페이지는 아이콘에 약간의 그라디언트 변경을 사용하여 클릭할 수 있음을 보여주고 사용자의 위치를 ​​강화합니다.

또 다른 좋은 예는 eTec/Interactive의 웹사이트 홈페이지입니다. 실제로 채우기를 사용하여 사용자에게 무언가를 클릭할 수 있음을 알립니다.

클릭할 수 있는 것과 클릭할 수 없는 것을 사용자에게 알리는 방법을 알아내는 것은 매우 쉬운 방법입니다. 그리고 일이 점점 더 평평해짐에 따라 이 시각적 피드백은 점점 더 중요해집니다. 이상하게도 이것은 Apple이 개선할 수 있는 부분입니다. Apple.ca 홈페이지를 확인하세요.

상단의 링크는 클릭할 수 있는 것처럼 보이며 사용자에게 해당 지식을 재확인하기 위해 약간의 그라디언트 변경이 있습니다. 또한 갤러리 보기 옵션도 클릭할 수 있다고 가정할 수 있으며 이를 강화하기 위한 색상 변경이 다시 있습니다.

그러나 문제는 전체 화면이 실제로 클릭 가능하다는 것입니다! 사용자에게는 매우 직관적이지 않으며 클릭을 많이 하는 사람으로서 페이지가 계속 변경되는 이유를 파악하는 데 시간이 걸렸습니다. 전혀 직관적인 UI가 아닙니다.

평면적 관점에서

따라서 Apple이 100% 성공하지는 못했지만 거의 비슷합니다. 그리고 움직임을 통해 디자이너는 원하는 평면 인터페이스를 구축할 수 있으며 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 알 수 있습니다. 모든 예제가 어떻게 예외적으로 평평한 디자인인지 주목하십니까? 전체 공개 나는 그것을 계획했습니다. 피드백이 있는 한 평면 디자인이 버튼에 작동할 수 있음을 보여줍니다.

다음은 피드백이 없는 평평한(ish) 디자인의 예입니다. 버튼인 것은 분명하지만 피드백이 없으면 약간 내 컴퓨터가 작동하지 않는 것처럼 느껴집니다.

대비 + 색상

안타깝게도 사람들이 클릭하도록 보장하는 특정 RGB 코드는 없습니다. 그러나 따라야 할 몇 가지 훌륭한 규칙이 있습니다. 사용자가 무언가를 클릭하기를 원하면 눈에 띄기를 원합니다. 즉, 브랜드의 색상 팔레트에서 벗어나는 것을 의미하더라도 주변의 다른 것과 극적으로 대조되어야 합니다.

예를 들어 David Hamill은 하이퍼링크에 다른 용도로 사용되지 않는 색상을 사용할 것을 권장합니다. 그의 사이트에서 각 링크는 분홍색으로 표시됩니다. 사용자는 무엇이 링크이고 무엇이 링크가 아닌지 쉽게 알 수 있습니다. 마우스를 가져가면 변경 사항과 결합하여 사용자가 무언가를 클릭할 수 있을 때 정말 명확해집니다.

이런 종류의 색상 및 대비 문제는 CTA(클릭 유도 문안) 및 버튼으로 가장 자주 발생하며 색상의 작은 변화가 수익에 큰 변화를 줄 수 있습니다. 예를 들어 Vibethink는 CTA 및 버튼에 대해 썼고 버튼의 색상과 모양을 변경하면 전환(읽기: 클릭)이 35% 증가했다고 보고했습니다. 그들은 증가된 대비로 인해 사용자가 클릭하기가 더 쉬워졌다고 느꼈습니다.

그러나 그들은 두 가지를 바꿨습니다. 그래서 완전히 과학적이지는 않습니다. 2011년 Hubspot은 빨간색 및 녹색 버튼에 대한 일부 A/B 테스트 결과를 발표했으며 빨간색 버튼이 녹색 버튼보다 21% 더 나은 성능을 보이는 것으로 나타났습니다.

따라서 색상과 대비는 사용자가 항목을 클릭하도록 하는 데 큰 역할을 할 수 있습니다.

마무리

악마는 디테일에 있다. 디자이너, 개발자, UXer 및 마케터로서 우리는 클릭할 수 있는 것을 만들 때마다 사용자에게 무언가를 하도록 요청합니다. 여기를 클릭하십시오. 지원서 제출. 문의하기. 지금 구매하세요. 그것이 무엇이든 간에 우리가 필요로 하는 것은 그들이 가지고 있는 것입니다. 그렇다면 단순화하지 않는 이유는 무엇입니까? 사용자의 클릭을 돕는 가장 좋은 방법은 클릭하기 쉽게 만드는 것입니다. 키오스크 스타일의 디자인으로 버튼을 기대에 맞게 만들고 화면에서 글꼴을 읽기 쉽게 만들고(작은 경우에도) 버튼과 클릭 가능한 콘텐츠에 대한 피드백을 제공하여 사용자의 삶을 더 쉽게 만듭니다.

그게 다야, 정말. 클릭할 수 있는 것을 만들 때 동시에 사용자의 삶을 더 쉽게 만듭니다.

이 게시물을 즐겼습니까? 웹사이트 UX 디자인을 개선하기 위해 사용자 이해 게시물 또는 모든 UX 디자이너가 소유해야 하는 훌륭한 제품 을 읽고 싶을 수도 있습니다!