10가지 무료 CSS 및 JavaScript 온보딩 사용자 인터페이스

온보딩의 목표는 새로운 사용자가 인터페이스에 익숙해지도록 하는 것입니다. 이것은 다양한 스타일로 제공되며 올바른 방법은 없습니다. 그러나 사이트와 앱이 온보딩을 수행하는 방식을 연구하면 자신의 작업에 대한 아이디어를 얻을 수 있습니다.

또한 이러한 무료 CSS 및 JavaScript 온보딩 UI를 사용하면 시작하는 데 도움이 되는 영감과 코드 스니펫을 모두 제공하는 많은 아이디어를 얻을 수 있습니다.

1. 회전 목마 슬라이드

회전식 캐러셀 온보딩은 화면 공간이 제한된 모바일에서 매우 인기가 있습니다. 그러나 이 효과는 정보를 신속하게 가져와야 하는 웹 사이트에서도 잘 작동할 수 있습니다.

내가 의미하는 바를 보려면 Nick Wanninger가 만든 이 회전식 슬라이드 데모를 확인하십시오.

Flickity와 몇 가지 기본 CSS 코드를 사용하여 만든 완전 무료 온보딩 예제입니다. 이것은 모바일과 데스크탑 모두에서 작동하므로 반응형 솔루션이 필요한 경우 탁월한 선택입니다.

2. 일일 UI 반응

간단한 실습 디자인으로 Jack Oliver는 이 React Daily UI 펜을 처음부터 만들었습니다. 그리고 그것은 내가 본 가장 세련된 온보딩 경험 중 하나입니다.

인터페이스는 실제 사용을 위한 것이 아니기 때문에 더미 텍스트를 제공하지만 매우 깨끗하고 페이지에 거의 모든 것을 넣을 수 있는 충분한 공간이 있어야 합니다.

한 가지 주목해야 할 점은 스와이프로 모바일에서 이 기능을 사용할 수 없었고 현재로서는 탭만 인식하는 것 같습니다. 그러나 클릭 전용 솔루션의 경우 정말 좋습니다.

3. 온보딩 화면

이 펜은 온보딩을 위한 놀라운 인터페이스를 제공할 뿐만 아니라 부팅할 사용자 지정 애니메이션도 있습니다.

개발자 Jeff Ham은 인터페이스에 대한 자신의 방법을 알고 이 깨끗한 온보딩 화면을 만들었습니다. JavaScript를 사용하여 "다음 화면" 애니메이션과 사용자 클릭/탭에 대한 토글 이벤트를 만듭니다.

이 인터페이스에 추가된 멋진 기능 중 하나는 하단에 있는 파란색 다음 버튼입니다. 이를 통해 사용자는 일반 보기에서 큰 CTA로 화면별로 진행할 수 있습니다. 이렇게 하면 전환하는 사람의 총 수가 증가하고 전반적인 경험의 품질이 향상될 것입니다.

4. 보드알

이 Boardal 스니펫은 자주 볼 수 있는 것이 아니기 때문에 다소 독특합니다.

사용자가 사이트를 더 빨리 통과할 수 있도록 온보딩 콘텐츠가 포함된 모달 창을 사용합니다. 테스트용으로만 제작된 맞춤형 디자인이며 온보딩 프로세스를 개선하는 가장 멋진 방법 중 하나입니다.

이것은 모달 효과에 의존하기 때문에 데스크탑에서 가장 잘 작동합니다(작은 화면에는 적합하지 않음).

따라서 디자인이 마음에 들고 사이트의 온보딩을 쉽게 개선할 수 있는 방법을 원하신다면 Boardal에게 기회를 주십시오.

5. 가이드 투어

일반적으로 온보딩은 사용자에게 새 페이지와 기능을 소개하는 단계별 프로세스로 간주됩니다. 하지만 개인적으로 가이드 투어가 훨씬 더 유용하다고 생각합니다.

간단한 스니펫을 시작하고 싶다면 이 가이드 투어가 완벽합니다. Bootstrap 구성 요소에 의존하고 "다음" 버튼이 있는 작은 도구 설명을 사용하여 둘러보기를 진행합니다.

사용자는 짜증이 나거나 더 이상 신경 쓰지 않는 경우 언제든지 둘러보기를 종료할 수 있습니다. 이것은 선택적인 투어가 되므로 이 과정에 짜증을 내는 사람들이 줄어들 것입니다.

전반적으로 이것은 내가 선호하는 온보딩 방법이지만 설정하는 데 약간의 노력이 필요합니다. 그러나 이 데모는 최소한 시작할 템플릿을 제공합니다.

6. 재료 투어

한 가지 대체 둘러보기 방법은 특정 기능을 강조 표시하는 자동 진행 둘러보기입니다.

내가 찾은 가장 좋은 예는 Gregor Adams가 만든 이 펜입니다. 재료 지침을 기반으로 하며 강조 표시된 원을 사용하여 페이지의 일부를 표시합니다. 이 기술은 기능이 많은 매우 복잡한 인터페이스가 있는 경우에 적합합니다.

전체 페이지를 어둡게 하여 한 번에 한 영역에 초점을 맞춥니다. 이것은 사용자의 관심을 즉시 사로잡는데, 이는 바로 온보딩을 잘하기 위해 해야 하는 일입니다.

이것이 모든 웹사이트에 적합하지 않다는 것을 알고 있지만 인터페이스가 마음에 든다면 시도해 볼 것을 적극 권장합니다.

7. 안드로이드 앱 온보딩

모바일 앱은 일반적으로 웹사이트보다 온보딩 프로세스가 더 필요합니다. 모바일 UI 디자이너는 작은 화면에 기능을 집어넣는 것이 일반적이며, 이는 가이드 소개 없이 사용자를 압도할 수 있습니다.

Mat Swainson이 작성한 이 온보딩 가이드는 스마트폰 앱에서 수행할 수 있는 작업의 작지만 웅변적인 예입니다.

Android 모델을 기반으로 하지만 확실히 사용할 수 있는 유일한 스타일은 아닙니다. 모바일 웹 브라우저에서도 작동하는 기본 스와이프를 지원하는 방식이 마음에 듭니다.

또한 상단의 작은 진행률 표시기는 멋진 터치입니다. 확실히 간단한 온보딩 페이지이지만 영감을 찾고 있다면 저장해 둘 가치가 있습니다.

8. 아이오닉 인트로

Ionic으로 할 수 있는 일이 많이 있으며 이 펜이 하나의 좋은 예입니다.

개발자 Clifford Fajardo는 JavaScript 프레임워크에서만 실행되는 온보드 Ionic 인트로를 만들었습니다. 탭, 스와이프와 같은 모든 모바일 상호 작용을 지원하며 해당 기능을 원하는 경우 더블 탭 옵션도 지원합니다.

Ionic은 주로 모바일 개발에 사용되며 모바일 웹사이트에서도 잘 작동합니다. 이 온보딩 화면이 모든 웹사이트에 적합하다고 말할 수는 없지만 잠재고객의 50% 이상이 모바일에서 오는 경우 확실한 선택입니다.

9. 수직 형태

약간의 젤리 UI 애니메이션과 실제 단순한 디자인으로 이 세로 형태는 독특한 대접입니다.

CSS flex 속성을 일부 사용자 정의 JavaScript 및 CSS 애니메이션과 함께 최대 효과로 사용합니다. 물론 내용이 약간 얇아서 자세한 온보딩 방식으로 많은 것을 제공하지 않습니다.

그러나 이 인터페이스를 사용하여 많은 노력 없이 실제로 자신의 것으로 만들 수 있으므로 상상에 많이 맡깁니다.

10. 가이드 투어 툴팁

가이드 둘러보기 예제가 하나 더 있지만 이 예제에서는 페이지에 고정된 전체 도구 설명 상자를 사용합니다.

스니펫을 확인하면 특정 인터페이스에 내장되어 있지 않다는 것을 알 수 있습니다. 오히려 사용자를 위한 조언 및 진행 단계가 포함된 떠다니는 도구 설명일 뿐입니다.

이 UI를 일부 고정된 툴팁 위치 지정 스크립트와 결합하면 모든 주요 기능을 가리키는 툴팁을 사용하여 인터페이스에서 이 항목을 쉽게 이동할 수 있습니다. 이 템플릿이 작동하려면 몇 가지 실제 사용자 정의가 필요하지만 간단한 UI의 경우 아름답습니다.