Peggy Olson이 인터랙티브를 디자인하는 방법

Mad Men 시대에 마케팅 담당자는 자신의 작업이 어떻게 소비되는지 정확히 알고 있었습니다. 대상 청중은 TV에서 광고를 보고, 라디오에서 듣고, 잡지나 광고판에서 보고, 아마도 (달팽이) 우편함에 올 것입니다. 인쇄 광고나 우편물을 계획했다면 디자인하려는 부동산의 정확한 크기를 알고 해당 공간에 맞게 광고를 최적화했습니다. 소비자는 콘텐츠를 디자인할 때 상상했던 그대로 콘텐츠를 보게 됩니다.

Peggy Olson이 현재 광고를 디자인하고 있다면 해당 광고가 어떻게 표시될 것인지, 대상 고객이 광고와 어떻게 상호 작용할 것인지에 대한 맥락을 고려해야 합니다. 그녀의 작업이 그녀가 상상한 방식으로 보여질 것이라는 보장이 없기 때문에 그녀는 자신의 레이아웃과 디자인을 최적화하여 어떻게 보든 영향을 미치도록 해야 했습니다. 그녀는 클릭 유도문안(CTA)이 3인치 화면에서도 명확하고 간결하며 해독 가능한지 확인해야 했습니다.

오늘날 웹 페이지, 랜딩 페이지 및 이메일을 디자인하는 것은 Mad Men 시대보다 훨씬 더 복잡합니다. 오늘날에는 대화형 요소의 차원이 추가되었으며 어떤 장치에서 콘텐츠를 볼지 알 수 없습니다. 전체 크기의 컴퓨터 화면에서 완벽하게 보이는 레이아웃은 태블릿이나 스마트폰에서 보면 완전히 엉망이 될 수 있습니다. 명확하지 않거나 잘못된 위치에 배치된 CTA는 참여율을 떨어뜨릴 수 있습니다.

세 가지 주요 인터랙티브 디자인 모범 사례

오늘날 대부분의 소비자는 모기 수준의 주의 집중 시간을 가지고 있습니다. 그들이 더 흥미로운 것을 클릭할지 여부를 결정하기 전에 그들이 귀하의 콘텐츠에 도달했을 때 약 2초 동안 그들을 연결할 수 있습니다. 이메일, 랜딩 페이지 또는 웹 페이지를 디자인할 때 다음 세 가지 개념을 이해하는 것이 중요합니다.

1. 레이아웃이 참여에 미치는 영향: 참여를 극대화하기 위해 페이지에 요소를 배치하는 방법 알아보기
2. 콘텐츠가 참여에 미치는 영향: 귀하의 콘텐츠와 상호 작용하도록 강요하는 것이 무엇인지 파악하십시오.
3. 시간이 얼마나 중요한지: 내 관심을 끌 시간은 2초입니다

간단해 보이죠? 그렇게 간단하다면 나는 이것을 쓰지 않을 것입니다! 뒤로 버튼을 누르는 시점까지 나를 좌절시키는 매일 접하는 콘텐츠가 얼마나 많은지 말할 수 없습니다. 나는 주머니가 넉넉하지만 디자인 감각이 없는 대기업을 말하는 것입니다.

이제 실용화합시다. 모든 플랫폼에서 참여하도록 페이지 레이아웃을 최적화하는 데 도움이 되는 매우 간단한 몇 가지 팁을 읽어보세요.

눈이 페이지를 스캔하는 방법

가장 먼저 이해해야 할 것은 인간의 눈이 콘텐츠를 어떻게 추적하는지입니다. 내가 대학에서 광고를 공부할 때 우리는 시선이 왼쪽 상단에서 시작하여 대문자 Z 형태의 페이지를 가로질러 추적한다고 들었습니다. 나는 이 이론이 흰 가운을 입은 남자가 종이에 안구 운동의 패턴을 그리려고 시도하는 동안 일부 피실험자가 콘텐츠를 보고 있는 연구에 의해 고안되었다고 확신합니다. 이것은 사람들이 온라인에서 본 페이지에서 어떻게 추적하는지 확인하는 데 사용되는 현재 널리 사용 가능한 히트 맵 기술이 나오기 훨씬 전이었습니다. 그리고 사람들은 인쇄물을 온라인 콘텐츠와 약간 다르게 스캔합니다.

요즘에는 온라인에서 콘텐츠를 볼 때 시선이 여전히 왼쪽 상단에서 시작하여 자본 F 패턴으로 추적한다는 것이 합의입니다. 일반적으로 눈은 먼저 F의 상단 막대를 가로질러 수평으로 추적한 다음 F의 두 번째 막대를 가로질러 마지막으로 F의 수직 줄기를 위에서 아래로 추적합니다.

그래서 이것은 무엇을 의미합니까? 즉, CTA가 대문자 F 패턴의 어딘가에 있어야 하거나 아기에게 콧수염을 길러야 합니다. 처음 2초 동안 시청자의 시선을 사로잡는 위치에 메인 CTA를 배치하기 위해 의식적으로 디자인 결정을 내립니다.

실제 디자인 재해

여기 Act-On의 제 동료 중 한 명이 저를 도와준 실제 디자인 재앙을 살펴보겠습니다. 아래 예는 온라인에서 접한 실제 콘텐츠에서 가져온 것입니다. 나는 Actomatic이라는 가상의 회사를 사용하여 사람들이 저지르는 가장 일반적인 실수와 이를 수정하는 방법을 보여주었습니다.

예 1: CTA를 보기 위해 스크롤하지 마세요.

내가 보는 가장 흔한 놓친 기회는 공유할 방법이 없거나 접은 부분 아래 페이지 하단에 묻혀 있는 공유 버튼이 있는 콘텐츠입니다. 폴드는 화면 하단에 있는 가상의 선입니다. (이 용어는 신문을 반으로 접던 시절에서 유래한 것입니다. "접이식 부분 위"는 더 나은 위치, 더 나은 독자층을 의미했습니다.) 평균 크기의 노트북 화면에서 접힌 부분은 화면 상단에서 480픽셀일 수 있지만 iPhone의 경우 상단에서 100픽셀 떨어져 있을 수 있습니다. 페이지 콘텐츠를 배치할 때 이 점에 유의하십시오.

블로그나 여러 페이지로 된 기사에 대해 이야기하는 경우 대부분의 사람들은 헤드라인(좋은 경우)과 콘텐츠의 처음 두 문장을 읽은 후 공유할 준비가 되어 있다고 추측할 수 있습니다. 가장 먼저 게이트 밖으로 나갑니다. 사람들은 동료들이 이미 다섯 번이나 공유한 것을 본 콘텐츠가 아니라 신선한 콘텐츠를 공유하기를 좋아합니다.

콘텐츠 상단과 하단에 공유 버튼을 두거나 스크롤할 때 콘텐츠 옆에 공유 버튼을 두는 것이 좋습니다.

저는 아주 잘 알려진 회사와 함께 일했는데 기사의 상단과 하단에 공유 버튼을 추가했을 때 공유율이 400% 이상 올라갔습니다.

예 2: 오, 내 눈!

너무 바빠서 어디를 봐야할지 모를 정도로 콘텐츠에 도달한 적이 있습니까? 공유할 동영상, 작성할 양식, 일부 사본, 여기저기서 몇 개의 링크가 있었을 수도 있습니다. 아래 페이지에 도착하면 어디서부터 시작해야 할지 모르기 때문에 전혀 관여하지 않을 것입니다. 이 예제는 이 페이지에서 가장 중요한 것이 무엇인지 알려주지 않습니다. 당신은 내 관심을 끌고 참여하는 데 2초도 안 남았는데, 당신은 나를 놓쳤습니다.

여러 CTA가 있는 경우 해당 요소의 논리적 순서가 무엇인지 매우 명확하게 지정하십시오. 필요한 경우 번호가 매겨진 설명선으로 철자를 지정하십시오. 이 페이지에 온다면 다음과 같은 질문을 할 것입니다.

레이아웃은 임의의 공백과 이상한 글꼴로 인해 계획되지 않고 엉성해 보입니다. CTA는 확실히 접은 부분 아래에 있습니다.

Actomatic에 조언을 제공하는 경우 이 페이지를 통해 달성하고자 하는 것이 무엇인지 묻는 것으로 시작할 것입니다. 여기서 목표는 무엇입니까? 여기서 주요 목표는 사람들이 블로그에 가입하고 짧은 비디오를 보고 공유하도록 하는 것이라고 가정합니다. 그렇다면 약간의 변경이 필요합니다.

1. 기본 CTA가 스크롤 없이 볼 수 있는 부분 위에 있는지 확인하세요. 공유 버튼과 구독 버튼은 모두 접힌 부분 아래에 있습니다.
2. 방문자가 블로그에 가입하고 비디오를 공유하기를 원한다는 점을 분명히 하십시오.
3. 회사에 대한 정보를 추가합니다.

이제 살펴보겠습니다.

새롭고 향상된 버전은 약간 다른 레이아웃, 더 적은 글꼴, 회사 및 비디오에 대한 짧은 설명, 블로그 구독 장벽이 낮습니다. 하단에 링크와 연락처 버튼도 추가했습니다. 눈이 자연스럽게 페이지를 스캔하는 방식을 따라 처음 2초 동안 독자가 ​​볼 수 있는 정보의 양을 최대화하기 위해 레이아웃을 어떻게 최적화했는지 주목하십시오. F 패턴 이론에 따르면 시청자가 페이지의 요소를 받아들이는 순서는 다음과 같습니다.

1. 회사 로고
2. 헤드라인
3. 공유 및 구독 버튼
4. 하단의 탐색 섹션

교류할 이유를 줘

이제 레이아웃이 모두 정렬되었으므로 콘텐츠와 상호 작용할 이유를 제공해야 합니다. 귀하가 양식을 작성하거나 귀하의 콘텐츠를 공유하기를 원하시면 그렇게 해야 할 설득력 있는 이유가 있어야 합니다. 그래서 물어볼게, 나한테 뭐가 들어있니?

그 질문에 대한 답을 모른다면 당신은 숙제를 하지 않은 것입니다.

사람들이 콘텐츠와 상호 작용하는 주된 이유는 콘텐츠에서 정서적으로나 물질적으로 일종의 만족을 얻기 때문입니다. 당신의 콘텐츠가 좋으면 또래들 앞에서 내가 박식해 보이기 때문에 공유할게. 당신이 방금 출시한 새로운 위젯을 내가 처음 알게 된다면 자존심이 상할 테니까 당연히 내가 먼저 보게 된 사실을 공유할게.

귀하가 비영리 단체이고 귀하의 콘텐츠가 특별한 일을 한 사람에 대한 기분 좋은 이야기일 수 있습니다. 그 콘텐츠를 공유하면 기분이 좋아지고 자비로워집니다. 양식을 작성하면 iPad를 받을 수 있는 기회를 제공하면 내 개인 정보를 제공할 가능성이 훨씬 높아집니다.

트릭은 청중이 참여하도록 강요하는 것이 무엇인지 아는 것입니다. 정서적 보상인가, 물질적 보상인가, 아니면 둘 다인가? 고객의 입장이 되어 청중을 위한 참여 전략을 수립하십시오.

간단하게 유지

저는 최근 성공적인 소셜 마케팅 캠페인에 대한 사례 연구를 발표한 컨퍼런스에서 연설했습니다. 앞면에 #KeepItSimple이 프린트된 티셔츠를 입었습니다. 나는 내가 설교하는 것을 실천하려고 노력합니다.

저는 극도로 복잡한 대화형 콘텐츠를 만든 고객과 매우 단순하게 유지하고 거의 항상 단순한 것이 승리하는 고객과 함께 일했습니다. 간단하게 유지하는 방법은 다음과 같습니다.

• 온라인에서 읽기 쉬운 Trebuchet과 같은 글꼴을 선택하십시오.
• 한 페이지에 너무 많은 글꼴과 크기를 혼합하지 마십시오. 제목은 한 가지 크기, 본문은 한 가지 크기입니다.
• 가능하면 하나의 명확한 CTA로 유지하세요.
• 중요한 내용은 접은 부분 위에 두세요.
• 진입 장벽을 가능한 한 낮추십시오(정말로 필요한 것이 이메일 주소뿐인 경우 누군가의 첫 아이를 묻지 마십시오).

당신의 숙제

이 기사의 끝에 숙제가 있을 것이라고 말한 적이 없습니다! 숙제가 있을 거라고 했다면 여기까지 읽었을까요? 어 허. 비판적인 시각으로 방문 페이지 중 하나를 살펴보고 개선의 여지가 있는지 자문해 보시기 바랍니다.

• 노트북과 휴대기기에서 랜딩 페이지 중 하나를 봅니다. CTA로 이동하려면 스크롤해야 합니까? 모바일 장치에서 잘 표시됩니까?
• 회사에 대해 전혀 모르는 친구에게 방문 페이지 중 하나를 보도록 요청하고 그들이 보는 동안 솔직한 피드백을 제공하도록 요청하십시오. 그들이 가장 먼저 알아차리는 것이 무엇인지, 회사가 무엇을 하는지, 페이지에 있는 주요 CTA가 무엇인지 말하도록 요청하십시오.
• 모든 중요한 요소가 F 패턴 내에 있는지 확인하십시오.
• 가능한 한 많은 플랫폼에서 최대한 많은 브라우저로 페이지를 테스트하십시오. Safari는 Chrome과 같은 요소를 렌더링하지 않습니다. Firefox는 Internet Explorer(IE)와 같은 요소를 렌더링하지 않습니다. 그리고 다른 버전의 IE는 콘텐츠를 완전히 다르게 표시할 수 있습니다.

이것을 해내기 위해 광고 레이아웃과 디자인에 대한 학위를 가질 필요는 없습니다. 하지만 현재 콘텐츠를 비판적인 시각으로 바라볼 의지가 있어야 합니다.

노력할만한 가치가 있습니다.