Call to Action, 그들이 무엇이며 그들의 중요성은 무엇입니까?

클릭 유도문안은 행동을 취하라는 초대입니다. 웹 디자인에서 그리고 무엇보다 사용성 분야에서 Calls to Actions는 서퍼가 작업을 수행하도록 유도하는 정확하게 구별할 수 있는 요소입니다. 분명히 웹 인터페이스에서 이러한 요소는 사용성 개념에 대해 생각하는 것만으로도 매우 중요하며 극도로 정밀하게 고려되어야 합니다.

일반적으로 웹 인터페이스에서 클릭 유도 문안은 활성 버튼 모양을 취하며 클릭하면 서퍼가 잘 정의된 작업(결제, 양식에 데이터 입력, 구매 절차 등)을 완료하도록 지시합니다. )

문제의 섬세함을 감안할 때 CTA를 성공적이고 최적으로 만들기 위한 정확한 규칙이 있습니다. 사이트에서 매우 흥미로운 제안을 제공합니다. 스매싱 매거진, 실제 사례와 함께 다소 크고 상세한 그림을 제공합니다.

따라서 전문가와 비전문가를 막론하고 모든 웹 디자이너에게 Cll To Action에 긍정적 또는 부정적인 영향을 미칠 수 있는 측면을 평가하는 것은 매우 중요합니다. 이제 접근성과 사용성에 대한 이야기를 다시 마치겠습니다. 최근 망각에 빠진 용어인데 왜 그런지 모르겠습니다.

웹사이트 및 소셜 네트워크를 위한 (올바른) 카피라이팅

그러나 Call To Action은 그래픽 측면에서만 멈추지 않습니다.

설득 마케팅의 중요한 요소인 만큼 콘텐츠 측면에서도 평가를 받아야 할 것이 분명하다. 즉, Call to Action 뒤에 무엇이 있고 내비게이터가 다른 곳이 아닌 바로 그곳을 클릭해야 하는 이유입니다.

Call To Action은 유도해야 하거나 수행하기를 원하고 다음 범위에 속하는 실제 행동 유도입니다. 설득력있는 의사 소통 사용자가 우리 사이트에 도착하면 우리는 그가 떠나도록 허용해서는 안 되며, 반대로 우리와 사용자 모두에게 이익이 될 수 있는 일을 하도록 사용자를 설득해야 합니다. 이탈률이 10.000%인 일일 방문 99회는 이탈률이 500%이고 전환율이 10 또는 심지어 5%인 일일 방문 10회보다 덜 유용하다는 사실을 직시합시다. .

방문자 수와 이탈률 측면에서 사이트 성능도 사이트 유형에 따라 다르다는 것을 잘 알고 있지만 기업 웹 사이트가 만들어진 것도 사실입니다. "사업하다" 따라서 인형을 빗질하지 않기 때문에 방문자가 "우리 집" 또는 오히려 사이트에 30초 이상 머물면서 우리가 수행하도록 유도한 작업을 수행하는 것이 중요합니다. 그렇지 않으면 우리는 무엇에 대해 이야기하고 있습니까?

예를 들어 기업 사이트의 경우 매우 중요합니다. 연락을 취하다 방문자와 전자 상거래 사이트의 경우 필요합니다. 제품 판매, 정보 사이트의 경우 필요합니다. 주의를 촉진하다 최종 의견을 요청할 수 있습니다. 단지 원하는 결과도 있습니다. 브랜드를 만들다, 시간이 훨씬 덜 걸릴 수 있지만 그것은 또 다른 이야기입니다.

La 행동을 요구하다 의 필수적인 부분입니다 설득력 있는 카피라이팅: 당신은 그를 행동으로 밀어넣기 위해 모든 잠재 고객의 의심을 쓸어버려야 합니다. 나는 그를 속이는 것이 아니라 당신이 판매하는 제품(또는 서비스)의 진정한 가치와 무엇보다 때로는 표현되지 않은 실제 요구 사항을 이해하도록 만들 수 있습니다.

클릭 유도 문안의 접근성은 두 가지 측면, 즉 작업을 식별하는 데 사용되는 레이블의 의미 체계와 이 작업이 수행되는 방식과 밀접하게 연결되어 있습니다.

행동 촉구의 의미 체계는 자명해야 합니다. 버튼, 링크에는 사용자가 수행하려는 작업을 정확히 식별하는 레이블이 있어야 합니다. 최근에 이미지 업로드 작업 호출에서 일부 소셜 네트워크 및 CMS에 의해 변경된 사항을 확인했습니다. 이제 기본적으로 "이미지 선택"이라는 두 개의 버튼이 있습니다. 놀랍게도 "사진 업로드"라는 버튼이 없습니다. 이는 사용자에게 혼란을 야기하며 스크린 리더로 서핑하는 사람은 누구나 비전을 가지고 있다는 점을 염두에 두어야 합니다. seriale 즉, 시각적 브라우저로 탐색하는 사용자에게 일반적으로 나타나는 전체 보기가 부족합니다.

모호한 레이블은 피해야 합니다., 일반적이거나 불명확합니다. 피해야 할 레이블은 "여기를 클릭하십시오"입니다. 스크린 리더를 사용하여 유사하게 레이블이 지정된 클릭 유도문안이 있는 페이지를 탐색하면 활성화하려는 작업의 특성에 대한 유용한 정보를 제공하지 않는 "(링크) 여기를 클릭하세요"라는 끝없이 나오는 연속 음성을 듣게 됩니다. .

피해야 할 또 다른 사항은 속성 남용입니다. title 일부 링크. 신중하게 사용하면 이 속성은 수행할 작업에 대한 유용한 컨텍스트 정보를 제공할 수 있지만 과도하게 사용하면 페이지 탐색을 시련으로 바꿉니다. 실제로 스크린 리더는 각 링크를 자체 제목과 연결하고 요소의 내용보다 먼저 읽습니다.

그래픽 관점에서 보면, 시각 장애가 있는 사용자의 요구를 염두에 두고 작업을 상기시키는 요소는 쉽게 읽을 수 있도록 충분히 큰 글꼴을 사용하여 명확하게 볼 수 있어야 합니다. 가장 중요한 것은 이러한 요소가 시각 장애가 있는 사용자가 페이지에 적용할 수 있는 글꼴 크기의 변경 사항에 적응할 수 있도록 일부 CSS 수준 조정을 사용해야 한다는 것입니다. 마지막으로 색맹인 사람들의 문제를 피하기 위해 텍스트와 배경 사이에 적절한 색상 대비가 있어야 합니다.

nginx: 새로운 웹 서버

자바스크립트와 올바른 사용법

이러한 작업이 트리거되는 방식과 관련하여 JavaScript에 대해 생각해야 합니다.

자바스크립트와 접근성은 양립할 수 없음을 기억하자, 몇 가지 간단한 모범 사례를 존중하는 한. 이러한 우려 사항 중 하나는 JavaScript가 비활성화되거나 지원되지 않는 경우에도 링크에 액세스할 수 있는 방법입니다. 이러한 의미에서 효과적인 링크(사용자를 새 페이지로 안내하거나 리소스에 대한 링크)와 트리거 링크(실제 콘텐츠는 없지만 JavaScript 작업을 "트리거"하는 역할을 하는 링크)를 구분할 필요가 있습니다.

피해야 할 관행 속성에 대한 값이 없는 링크의 href로서 <a href="" id="trigger" >...</a>. Lynx와 같이 JavaScript를 지원하지 않는 브라우저에서는 이러한 링크로 인해 페이지가 완전히 다시 로드됩니다. 물론 JavaScript로 트리거를 완전히 생성할 수 있지만 JavaScript가 지원되지 않거나 비활성화된 경우 링크를 사용할 수 없습니다. 브라우저가 현재 페이지를 누락된 속성 값으로 간주하므로 많은 정적 사이트에서도 이 기술을 사용하여 영구 링크를 생성합니다. href.

따라서 XHTML 사양의 경우 속성이 href 비워 둘 수 없습니다. 하지만 어느? 많은 사람들이 해시 문자(#)를 채우기로 사용하기로 선택했습니다. 그러나 이 솔루션에도 제한이 있습니다. JavaScript를 비활성화하거나 지원하지 않으면 존재하지 않는 앵커에 대한 참조를 생성하는 효과가 발생하여 비시각적 보조 기술로 웹을 서핑하는 사람들을 혼란스럽게 할 수 있습니다.

물론 해결책은 그 사이 어딘가에 있습니다. 실제로 페이지의 실제 콘텐츠를 가리키는 앵커를 만들 수 있습니다. JavaScript를 통해 생성된 콘텐츠의 경우 다음과 같은 접근 방식을 사용할 수 있습니다.

돕다 이메일은 username@domain.extension 형식이어야 합니다.

JavaScript로 숨길 div의 스타일을 지정해 보겠습니다. JavaScript가 지원되지 않거나 비활성화된 경우 div는 계속 표시됩니다. 이를 숨기려면 문서가 로드될 때 연결할 CSS 클래스를 사용하겠습니다.

.hidden { 위치: 절대; 상단: -1000em; }

jQuery와 Prototype 모두 요소를 숨기는 방법이 있지만 선언을 사용한다는 점을 기억하세요. display: none. 불행히도 이 선언은 JavaScript를 부분적으로 지원하는 스크린 리더에 의해 해석되어 요소의 내용을 읽을 수 없습니다. 이 시점에서 jQuery를 사용하면 다음과 같이 작성할 수 있습니다.

$('#trigger').click(function() { $('#email-help').removeClass('hidden'); });

일부러 선언 삽입을 피했습니다. return false; 일부 스크린 리더는 이벤트를 해석할 수 있기 때문에 click, 경우에 따라 키보드 이벤트와 동일시합니다. 내가 그러한 선언을 삽입했다면 그러한 프로그램은 링크의 목적지를 따르지 않았기 때문에 우리 div의 내용을 읽을 수 없었을 것입니다. 일반 브라우저에서 유일하게 불쾌한 효과는 현재 페이지의 URL에 추가된 앵커를 보는 것이지만 접근성과 유용성에 전혀 영향을 미치지 않습니다.

적절한 수정을 통해 동일한 관찰이 버튼에도 적용되며, 사용 가능한 JavaScript 이벤트의 우연성 차이를 염두에 두어야 합니다.

CTA에 적용되는 첫 번째 사용성 원칙은식별 가능성. 클릭 유도문안은 항상 사용자가 즉시 인식할 수 있어야 하며 그 기능을 쉽게 이해할 수 있어야 합니다. 관련된 두 가지 측면이 있습니다.

• 행동 유도 레이아웃
• 클릭 유도문안 라벨링

각 측면은 서로 불가분의 관계로 연결되어 있습니다. 클릭 유도문안의 레이아웃은 인식에 영향을 주어서는 안 됩니다. 그러나 CSS를 사용하여 수정된 양식의 버튼은 항상 사용자가 "이제 여기를 클릭합니다."라고 생각하게 만들어야 합니다. 실제로 Steve Krug에 따르면 사용자는 자신이 보는 것이 버튼인지 아닌지 생각하지 않고 클릭해야 합니다. 조치는 즉각적이어야 합니다(사용자 경험에 대한 최근 연구에서 확립된 대로 정확히 300밀리초 이내).

대신 두 번째 측면은 클릭 유도 문안이 그대로 정의되는 방식과 관련이 있습니다. 레이블은 간단하고 명확하며 설명이 필요해야 합니다. 예를 들어 Mac OS X 응용 프로그램의 상황에 맞는 메뉴에 있는 "저장" 항목의 번역입니다. 이탈리아어에서는 이 항목이 "녹음"으로 렌더링되었으며 명확성 측면에서 확실히 최고는 아닙니다. 따라서 버튼이 검색 엔진을 실행하는 것이라면 라벨에 "검색" 등이 표시되어야 합니다. 이 경우 상상력은 상식에 양보해야 합니다. 이 경우 관습은 매우 유용합니다.

이 주제에 대해 쓸 것이 여전히 많다는 것은 분명하지만 이 긴 글의 목적은 다른 무엇보다도 사람들이 생각하게 만들고, 수행되고 있는 작업을 인식하고, 무엇보다 단순한 버튼이 귀하에게 연락하거나 이메일 또는 요청을 보내도록 유도해야 하는 것은 그렇게 사소한 일이 아닙니다.

기업을 위한 디자인, 스케치인 "항상 변화에서 시작하라…