대화형 디자인 소개(및 3가지 뛰어난 예)

요즘에는 거의 모든 사람들이 웹사이트를 가지고 있습니다. 따라서 웹사이트를 돋보이게 하려면 디자인과 관련하여 A 게임을 가져와야 합니다. 사람들은 특정 요구 사항에 맞게 조정되고 자신이 중요하다고 느끼게 만드는 사이트를 원합니다. 그런 경험을 제공하지 못하면 빅리그에서 경쟁하지 못할 수도 있습니다.

대화형 디자인은 각 사용자에게 맞춤화되고 그들의 요구를 예상하는 웹사이트를 만드는 것입니다. 이 기사에서는 대화형 웹 디자인에 대한 간단한 단기 집중 과정을 제공하고 몇 가지 예를 논의합니다.

얘기하자!

대화형 디자인 소개

대화형 웹 디자인과 관련하여 중요한 차이점이 있습니다. 사람들이 이 개념에 대해 이야기할 때, 그들은 주로 초개인화를 언급합니다. 예를 들어, Facebook 계정에 로그인하면 플랫폼에서 사용자의 생각/느낌을 묻고 이름으로 사용자를 참조합니다.

이것은 대화형 디자인의 한 예입니다. 반면에 사람들이 대화형 UI(사용자 인터페이스)에 대해 이야기할 때 챗봇 및 Slack과 같은 텍스트 기반 경험을 의미합니다.

어쨌든 대화형 디자인이라는 용어는 많은 영역을 포괄합니다. 그러나 모두 한 가지 공통점이 있습니다. 이는 사용자에게 보다 개인화된 경험을 제공하는 것을 목표로 한다는 것입니다. 이것이 좋은 이유는 다음과 같습니다.

• 신뢰를 구축하는 데 도움이 될 수 있습니다. 대화형 디자인은 사용자가 환영받는 느낌을 줄 수 있으며, 이는 신뢰를 불러일으키고 더 많은 전환으로 이어질 수 있습니다.
• 수집한 데이터를 유용하게 사용할 수 있습니다. 오늘날 대부분의 웹사이트는 사용자로부터 일부 개인 정보를 수집합니다. 대화형 디자인을 사용하면 이 데이터를 실용적으로 사용할 수 있습니다.

대화형 디자인을 채택함으로써 어떤 웹사이트가 이점을 얻을 수 있는지는 방문자에게 제공하는 상호작용 수준에 따라 다릅니다. 사용자가 어떤 식으로든 사이트와 상호 작용해야 하는 경우 보다 개인적인 경험을 제공하기 위해 대화형 디자인을 살펴보는 것이 좋습니다.

다음 섹션에서는 대화형 웹 디자인 및 UI의 몇 가지 예를 보여 드리겠습니다. 우리는 그들이 올바르게 하는 것과 그들의 접근 방식을 웹사이트에 어떻게 적용할 수 있는지에 대해 이야기할 것입니다.

3 대화형 디자인을 사용하는 웹사이트의 예

대화형 디자인은 광대한 분야이므로 웹사이트에서 이를 구현할 수 있는 몇 가지 방법이 있습니다. 이 섹션에서는 개인화 및 대화형 UI에 대해 각기 다른 접근 방식을 사용하는 세 가지 예를 살펴보겠습니다.

1. 버즈워시 스튜디오

Buzzworth Studio의 웹사이트는 고도로 개인화된 경험을 제공하는 훌륭한 문의 양식 경험을 제공합니다. 연락처 페이지로 이동하면 START A PROJECT 클릭 유도문안을 클릭할 수 있습니다.

그런 다음 페이지에서 어떤 종류의 프로젝트를 시작하고 싶은지 묻습니다.

예를 들어 마케팅 옵션을 클릭하면 SEO , PPC 캠페인 또는 둘 다 중에서 선택할 수 있습니다.

선택을 마치면 웹 사이트에서 대략적인 예산과 그에 따라 달라지는 일정을 제공합니다.

연락처 페이지에 관한 한, 이 경험은 우리가 만난 가장 매력적인 경험 중 하나입니다. 예산을 책정하기 전에 몇 가지 질문을 하면 프리랜서를 고용하기 전에 프리랜서와 대화를 나누는 것처럼 느끼게 됩니다.

또한 더 철저한 프로젝트 제안을 작성하기 전에 알고 싶어할 수 있는 세부 정보를 추가할 수 있는 간단한 양식도 포함되어 있습니다.

대화형 디자인과 연락처 페이지는 특히 포트폴리오 페이지와 잘 어울립니다. 가장 큰 과제 중 하나는 잠재 고객이 편안함을 느끼도록 하는 것이며 페이지를 고객에 맞게 조정하는 것이 이를 수행하는 좋은 방법입니다.

더 인터랙티브한 클라이언트 온보딩 경험을 만드는 데 성공하고 싶다면 Typeform을 사용하는 것이 좋은 방법 중 하나입니다. 얼마 전에 이 플랫폼을 사용하여 세련된 설문조사를 만드는 방법에 대해 이야기했지만 이 예와 유사하게 이 플랫폼을 사용하여 잠재 고객에게 질문할 수도 있습니다.

2. 랜드봇

두 번째 예에서는 대화형 UI를 살펴보겠습니다. Landbot과 같은 플랫폼은 텍스트 상호 작용을 중심으로 구축되었기 때문에 매우 문자 그대로 대화형 디자인 개념에 접근합니다.

Landbot은 이전 예만큼 잘 알려져 있지 않을 수 있지만 그렇다고 해서 테이블에 흥미로운 것이 없다는 의미는 아닙니다. 한마디로 챗봇 기반의 랜딩페이지를 생성할 수 있는 서비스입니다. 이전에 WordPress용 Facebook 기반 챗봇을 설정하는 방법에 대해 이야기했지만 이 플랫폼은 시작하기가 훨씬 쉽습니다.

웹사이트 자체는 대화형 UI의 마스터 클래스입니다. 깨끗하고 현대적인 디자인을 사용하는 단일 채팅을 중심으로 모두 구축되었습니다.

대화의 각 단계에서 챗봇에 응답하는 방법을 선택할 수 있습니다. 미리 결정된 옵션을 사용하기 때문에 챗봇은 프로그래밍하기가 훨씬 쉽습니다. 또한 대화형 UI가 지루할 필요가 없다는 훌륭한 예이기도 합니다.

대화형 디자인에 대한 Landbot의 접근 방식에서 두 가지 두드러진 점을 제거해야 합니다. 첫째, 웹사이트에 대화형 UI를 포함하려면 시선을 사로잡아야 합니다. 사용자가 입력할 때 표시되는 색상, 글꼴 및 작은 애니메이션을 사용하여 관심을 끄는 무언가를 만들 수 있습니다.

둘째, 대화형 UI는 전환을 유도하는 데 유용할 수 있습니다. 예를 들어, 챗봇을 사용하면 강력한 클릭 유도문안(CTA)을 전달하여 사용자가 원하는 조치를 취하도록 유도할 수 있습니다.

이러한 유형의 기능을 구현하려면 약간의 기술 지식이 필요할 수 있지만 그 결과는 노력할만한 가치가 있습니다. 언제든지 나만의 Landbot 챗봇을 만들고 이를 사용하여 사용자를 웹사이트로 유도하거나 그 반대로 실험할 수 있습니다.

3. 코디

마지막 예에서는 다른 대화형 UI를 살펴보겠습니다. Cody는 Chop Chop 대행사의 간단한 챗봇의 쇼케이스입니다. 그들의 사업은 챗봇 제작을 중심으로 이루어지므로 그들이 할 수 있는 일을 과시하려는 것은 당연합니다.

Landbot의 예와 달리 Cody는 노골적인 마케팅에 덜 적합합니다. 대신 중요한 정보를 제공하면서 친구와 대화하는 듯한 느낌을 주려고 합니다. 예를 들어, Cody는 사이트에서 쿠키를 사용하는 것이 문제가 되지 않는지 묻습니다.

여기서 대화형 UI는 매우 간단합니다. 배경은 깨끗하고 텍스트 거품은 매우 절제되어 있습니다. 이것은 콘텐츠를 빼지 않고 전문 웹사이트에 추가되는 것을 볼 수 있는 챗봇 유형입니다.

여기서 중요한 점은 대화형 UI가 마케팅에만 집중할 필요가 없으며 챗봇에 재능을 추가할 수 있는 방법이 많다는 것입니다. 예를 들어 고유하고 개인적인 느낌이 들도록 얼굴과 이름을 지정할 수 있습니다. 마찬가지로, 대화가 Google에 질문하는 것처럼 덜 캐주얼하게 느껴지도록 사용하는 언어를 최적화할 수 있습니다.

결론

웹 디자인에 관해서는 구독할 수 있는 생각의 학교가 많이 있습니다. 머티리얼 디자인, 유동적인 모양, 손으로 그린 ​​요소 등이 있습니다. 그러나 대화형 웹 디자인은 단순한 추세 이상입니다. 각 방문자에게 고유하게 맞춤화된 경험을 제공할 수 있다면 극소수의 사이트에서 비교할 수 있는 이점이 있습니다.

대화형 디자인의 가장 좋아하는 몇 가지 예를 다시 살펴보겠습니다.

1. Buzzworth Studio: 개인화를 통해 연락처 양식도 더 재미있게 만들 수 있습니다.
2. Landbot: 대화형 UI의 눈길을 사로잡는 예를 제공합니다.
3. Cody: 이 간단한 챗봇은 기계가 아닌 실제 사람과 대화하는 것처럼 느끼게 하는 데 탁월합니다.

웹사이트에서 대화형 디자인을 구현하는 가장 좋은 방법은 무엇이라고 생각합니까? 아래 의견 섹션에서 의견을 공유하십시오!

Art Alex/Shutterstock.com의 기사 이미지 축소판