Onboarding UX [OCD]를 개선하기위한 간단한 UI 핵

UI 모형 및 스케치는 사용자 데이터가 이미 존재한다고 가정합니다. 예를 들어, 아래 모형은 사용자가 대화 할 대화 상대, 알림 및 대화 스레드를 가지고 있다고 가정합니다.

이 무료 스케치 리소스를 사용하여 구축 된 간단한 메신저 UI

그러나 사용자가 가입 할 때는 결코 그렇지 않습니다. 처음에는 데이터가 없으므로 빈 연락처 열과 빈 채팅 창이 있습니다.

반짝이는 UI 디자인을 사용하면 정보를 쉽게 사용할 수 있으며 정보를 만드는 방법에 중점을 두지 않습니다.

나는 Dribbble을 많이 흡수하여 b2b 애플리케이션을위한 대시 보드를 설계 할 때이 방법을 어려운 방식으로 배웠습니다. Sketch에서 멋지게 보였지만 고객은 길을 찾을 수 없었습니다.

나쁜 UX는 온 보딩 및 지원 비용을 증가시켜 수익에 직접적인 영향을 미칩니다. 또한 완벽한 픽셀 디자인을 사용하기 위해 고군분투하는 사용자를 보는 것은 좋지 않습니다. 실패했음을 알려줍니다.

기존 솔루션

한 가지 솔루션은 인터페이스와 같은 슬라이드를 사용하여 사전에 온 보딩하는 것입니다. 이것은 모바일 앱의 표준으로 보입니다.

슬랙의 슬라이드 기반 온 보딩 UX

슬라이드 접근 방식의 문제점은 컨텍스트가 없다는 것입니다. 슬라이드에서는 너무 많이 전달할 수 있습니다 (사용자가 보유하는 양은 다른 질문입니다).

제품에 대한 개요를 제공하는 것은 좋지만 제품 작동 방식을 설명하는 데는 도움이되지 않습니다. 제품의 복잡성을 몇 가지 슬라이드로 요약 할 수 없으므로 사용 사례와 관련이 없습니다.

사용자에게 특정 단계를 안내하는 툴팁 기반 솔루션도있었습니다. 이 옵션은 웹 앱에서 더 많이 사용됩니다. 이러한 흐름을 빌드하는 데 도움이되는 유용한 자바 스크립트 라이브러리가 많이 있습니다.

introjs.com/에 대한 툴팁 기반 온보드 데모

툴팁 기반 솔루션이 진행되는 한, 나는 짜증나고 거의 항상 "건너 뛰기 자습서"를 클릭했습니다. Canva와 같은 대기업은 툴 보드 기반의 툴팁을 사용합니다. AppCues라는 제품을 사용하면 코드없이 깔끔하게 도구 설명을 디자인 할 수 있습니다.

일반적으로 잘못 이해되는 피처에는 빛나는 비콘으로 레이블이 지정되어 필요한 경우 관련 정보를 제공하는 비콘 스타일 접근 방식도 있습니다.

가장 눈에 잘 띄지 않는 방법입니다. 17 단계 자습서를 제공하고 실제로 필요할 때 사라지는 툴팁과 달리이 핫스팟 기반 접근 방식은 준비가되면 정보를 제공합니다.

슬랙은 3 가지 형태를 모두 사용한다고 언급 할 가치가있다. 그들의 사용자가 고집하는 것이 당연합니다. 또한 어쨌든 유지가 온 보딩의 편의성에 직접 비례한다는 사실을 암시합니다.

OCD 일명 온보드 중심 디자인

나는 이름을 짓는 것을 좋아합니다. 이름은 생각을 구체화하는 데 도움이됩니다. 이것을 온 보딩 중심 디자인이라고하겠습니다.

나는 해결책을 원했다.

  • 상황과 관련이 있었다
  • 성가신 것이 아닙니다 (아무도 기능이 작동하는 방법을 배우기 위해 17 단계를 취하는 것을 좋아하지 않습니다)
  • 눈에 거슬리지 않게 (비콘처럼)
  • 소비하기 쉽다 (툴팁은 소비하기 쉽지 않음)

결과

나는 단순히 상태 설계를 시작했습니다. 이 기사를 읽기 시작한 동안 본 채팅 디자인은 세 가지 상태로 디자인 할 수 있습니다.

상태 1 : 연락처가 없습니다

상태 2 : 대화 상대가 있지만 대화가 없음

상태 3 : 채팅과 연락처가 모두 있습니다

각 상태의 목표는 사용자를 다음 상태로 진행시키는 것입니다. 사용자가 상태 3으로 진행하면 성공적으로 온 보딩 된 것입니다. 채팅 모형을 고려할 때 각 주별 목표는 다음과 같습니다.

상태 목표 1 : 사용자를 추가하여 연락처 추가

아래 모형에는 한 번의 클릭 유도 문안이 있으며 파란색 플러스 버튼을 사용하면 새 연락처를 추가 할 수 있습니다. 그래픽과 텍스트는 모두 사용자가 해당 조치를 취하도록 우선합니다.

상태 1 — 연락처를 추가하도록 사용자를 프라이밍합니다 (undraw.co의 일러스트레이션).

연락처가 추가되면 두 번째 목표를 시작할 수 있습니다.

상태 목표 2 : 채팅을 시작하기위한 주요 사용자

아래 모형에는 채팅을 시작하기위한 그래픽 입문서가 있습니다. 사용 가능한 기능을 명시 적으로 설명합니다. 다시 한 번, 지금 할 수있는 일이 하나 있습니다 (예 : 메시지 보내기). 이 UI에서 전화를 걸 수도 있지만 두 작업 모두 동일한 목적으로 사용됩니다. 사용자를 3 단계로 안내합니다.

상태 2 — 대화 상대 추가, 대화 시작을 위해 준비

상태 3 목표 : 없음, 사용자가 온보드 상태입니다. 모든 신호가 사라져야합니다

마지막으로 사용자가 프로세스를 몇 번 반복하면 UI가 원래 의도 한대로 보이기 시작합니다.

상태 3 — 사용자가 성공적으로 탑승했습니다

이 접근법의 장점

  • 1 단계의 슬라이드 접근 방식과 비교하여 ODC (Onboarding Centric Design)는 내용을 청크로 표시합니다. 정보는 의사 결정 시점에 사용 가능합니다.
  • 이 방법은 모바일 및 데스크탑 장치 모두에서 사용할 수 있습니다. 이 UI는 간단하지만 복잡한 UI의 경우 핫스팟과 함께 OCD를 사용하여 CTA를 높일 수 있습니다.
  • 이 접근 방식은 사용자의 여정에 대해 생각하도록하여 UX를 처음부터 향상시킵니다.
  • React를 사용하여 프론트 엔드를 작성하는 경우이 접근 방식은 해당 구성 요소 아키텍처와 깔끔하게 맞습니다.

따라서 경험적으로 볼 때 :

주를위한 모형 디자인.
각 주마다 하나의 목표가 있습니다 – 다음 주로 진행합니다.
마지막 상태는 사용자가 온보드 상태 일 때입니다.

읽어 주셔서 감사합니다 :)

안녕하세요,이 기사를 좋아하고 업데이트를 유지하려면 매체, Github 또는 Twitter를 팔로우하십시오.

저는 여러분이 다른 사람들을 도울 수 있거나 전반적인 프론트 엔드, 백엔드 및 개발에 관한 도움을받을 수있는 슬랙 커뮤니티 (2018 년 10 월 6 일 현재 18 명의 멤버)를 운영하고 있습니다. 여기에 가입 할 수 있습니다.