10無料のCSSとJavaScriptのオンボーディングユーザーインターフェイス

オンボーディングの目標は、新しいユーザーにインターフェースを知ってもらうことです。 これにはさまざまなスタイルがあり、正しい方法はありません。 しかし、サイトやアプリがどのようにオンボーディングを行うかを研究すれば、自分の仕事のアイデアを見つけることができます。

そして、これらの無料のCSSとJavaScriptのオンボーディングUIを使用すると、開始に役立つインスピレーションとコードスニペットの両方を提供するアイデアがたくさんあります。

1.カルーセルスライド

回転式カルーセルのオンボーディングは、画面スペースが限られているモバイルで非常に人気があります。 ただし、この効果は、情報をすばやく取得する必要があるWebサイトでも同様に機能します。

Nick Wanningerによって作成されたこのカルーセルスライドのデモをチェックして、私が何を意味するかを確認してください。

これは、Flickityといくつかの基本的なCSSコードを使用して作成された完全に無料のオンボーディングの例です。 これはモバイルとデスクトップの両方で機能するため、レスポンシブソリューションが必要な場合に最適です。

2.毎日のUIに反応する

シンプルな練習デザインとして、ジャックオリバーはこのReact DailyUIペンをゼロから作成しました。 そして、それは私が見た中で最も洗練されたオンボーディング体験の1つです。

インターフェースは、実用的な実際の使用を目的としていないため、ダミーテキストを備えていますが、非常にクリーンで、ページにほとんど何でも収まる十分なスペースを残しておく必要があります。

注意すべき点の1つは、スワイプを使用してモバイルでこれを機能させることができなかったことです。現時点では、タップを認識しているだけのようです。 しかし、クリックのみのソリューションの場合、それは本当に素晴らしいです。

3.オンボーディング画面

このペンは、オンボーディングのための素晴らしいインターフェースを備えているだけでなく、起動するためのカスタムアニメーションも備えています。

開発者のJeffHamは、インターフェースの使い方を知っており、この完璧なオンボーディング画面を作成しました。 JavaScriptを使用して、「次の画面」のアニメーションとユーザーのクリック/タップのトグルイベントを作成します。

このインターフェースへの素晴らしい追加の1つは、下部にある青い次へボタンです。 これにより、ユーザーは、プレーンビューで大きなCTAを使用して画面ごとに進むことができます。 これにより、コンバージョンに至る人の総数が増え、全体的なエクスペリエンスの質が向上すると思います。

4.ボード

このBoardalスニペットは、よく目にするものではないため、かなりユニークです。

オンボーディングコンテンツを含むモーダルウィンドウを使用して、ユーザーがサイトをより速く通過できるようにします。 これは、テスト専用に作成されたカスタムデザインであり、オンボーディングプロセスを改善するための最もクールな方法の1つです。

これはモーダル効果に依存しているため、デスクトップで最適に機能することに注意してください（小さい画面には理想的ではありません）。

したがって、デザインが気に入って、サイトのオンボーディングを簡単に改善する方法が必要な場合は、Boardalを試してみてください。

5.ガイド付きツアー

通常、オンボーディングは、ユーザーに新しいページと機能を導入する段階的なプロセスと見なされます。 しかし、個人的にはガイド付きツアーの方がはるかに便利だと思います。

簡単なスニペットを開始したい場合は、このガイド付きツアーが最適です。 Bootstrapコンポーネントに依存し、「次へ」ボタンが付いた小さなツールチップを使用してツアーを進めます。

ユーザーは、イライラしたり気にならなくなったりした場合に、いつでもツアーを閉じることができます。 これにより、オプションのツアーになるため、プロセスに煩わされる人が少なくなります。

全体的に、これは私の好みのオンボーディング方法ですが、設定には少し手間がかかります。 ただし、このデモでは、少なくとも最初のテンプレートが提供されます。

6.マテリアルツアー

別のツアー方法の1つは、特定の機能を強調する自動進行ツアーです。

私が見つけた最も良い例は、GregorAdamsによって作成されたこのペンです。 これは材料ガイドラインに基づいており、強調表示された円を使用してページの一部を紹介しています。 この手法は、多くの機能を備えた非常に複雑なインターフェイスがある場合に最適です。

ページ全体を暗くすることで、一度に1つの領域にフォーカスを合わせることができます。 これはすぐにユーザーの注意を引き付けます。これはまさに、優れたオンボーディングのために行う必要があることです。

これがすべてのWebサイトにうまく適合するわけではないことはわかっていますが、インターフェイスが気に入った場合は、試してみることを強くお勧めします。

7.Androidアプリのオンボーディング

モバイルアプリは通常、ウェブサイトよりもオンボーディングプロセスを必要とします。 モバイルUIデザイナーは、機能を小さな画面に詰め込むのが一般的です。これは、ガイド付きのイントロなしでユーザーを圧倒する可能性があります。

Mat Swainsonによるこのオンボーディングガイドは、スマートフォンアプリでできることの小さいながらも雄弁な例です。

これはAndroidモデルに基づいていますが、使用できるスタイルは確かにそれだけではありません。 モバイルWebブラウザでも機能するネイティブスワイプをサポートする方法が気に入っています。

さらに、上部にある小さな進行状況インジケーターはいい感じです。 確かにシンプルなオンボーディングページですが、インスピレーションを探しているなら節約する価値があります。

8.イオンイントロ

Ionicでできることはたくさんありますが、このペンはその良い例の1つです。

開発者のCliffordFajardoは、JavaScriptフレームワークのみで実行されるIonicイントロをオンボードで作成しました。 タップ、スワイプなどのすべてのモバイルインタラクションをサポートし、その機能が必要な場合はダブルタップのオプションもサポートします。

Ionicは主にモバイル開発に使用され、モバイルWebサイトでも非常にうまく機能します。 このオンボーディング画面がすべてのWebサイトに適合するとは言えませんが、オーディエンスの50％以上がモバイルから来ている場合は確実な選択です。

9.垂直フォーム

わずかなゼリーUIアニメーションと本物のシンプルなデザインを備えたこの縦型は、ユニークなご馳走です。

CSSフレックスプロパティをいくつかのカスタムJavaScriptおよびCSSアニメーションとともに完全に使用します。 確かに、私はコンテンツが少し薄いと思うので、詳細なオンボーディングの方法で多くを提供していません。

ただし、このインターフェイスを使用して、それほど労力をかけずに実際に独自のインターフェイスを作成できるため、想像力に大きく委ねられます。

10.ガイド付きツアーのツールチップ

これがもう1つのガイド付きツアーの例ですが、これはページに固定された完全なツールチップボックスを使用しています。

スニペットをチェックアウトすると、特定のインターフェースに組み込まれていないことがわかります。 むしろ、それはユーザーのためのアドバイスと進捗手順を備えた単なるフローティングツールチップです。

このUIをいくつかの固定ツールチップポジショニングスクリプトと組み合わせると、ツールチップがすべての主要機能を指すように、インターフェイス内でこのことを簡単に移動できます。 このテンプレートを機能させるには、実際のカスタマイズが必要ですが、シンプルなUIの場合は美しいです。