適切に設計されたWebサイトのチュートリアル/ヘルプシステムの例は何ですか？
バックグラウンド
私の会社はオンラインヘルプ/チュートリアルシステムで長い間遅れていた作業を開始しており、目標はそれをより活気のある統合されたインタラクティブなものにすることです。私たちは、データ収集、共有、集計のための複雑なフォームとツールを備えた、医療情報の大規模なデータベースを持っています。説明が必要なものはたくさんあります。 最良のデザインは説明する必要はありません ですが、残念ながら私たちのケースでは、多くのものがイラストを必要とするほど複雑です。
私たちの現在のシステムは、基本的なスクリーンキャプチャビデオ（マウスの動き、クリック、ときどきズームイン/ズームアウト）でツールとフォームを説明する長い形式のビデオ（各2〜10分）であり、ナレーターが彼/彼女を説明していますやりすぎ。当然のことながら、これらの長い動画は長すぎてわかりづらく、誰もそれをじっと見たくないという不満がありました。そのため、チュートリアル/ヘルプシステムをよりインタラクティブで活気のあるものにすることに関心があります。
提案
現在の提案では、これらの長い動画を、10〜30秒で1つの機能を説明する一連のパンチの効いた小さなナレーション付きのアニメーション（Flashで作成）に置き換えます。短く、甘い、そしてうまくいけばもっと消化しやすくて面白い。ユーザーが1つの機能のヘルプの表示を終了したら、次のスニペットを見るか、ツール/フォームの操作に戻ることができます。
ここでは予算が問題になるため、このプロジェクトをできるだけ単純にすることが問題です。実際、これが「短いアニメーション」の提案の理由の1つです。サイトの機能は数か月から数年にわたって微調整され、変更されるため、更新された情報を含む10分の動画全体を再録画するために多くのリソースを費やす必要はありません。/graphics;変更された機能に関連する小さなアニメーションを更新するだけです。
質問
いくつかの質問が発生しました-私たちは正しい方向に進んでいますか？ Flashを使用してチュートリアルアニメーションを作成していますか？予算内でソフトウェアチュートリアルを簡単に作成するために利用できるDIYビデオスクリーンキャプチャツールは何ですか？ Webページに組み込まれているインタラクティブなヘルプ/ヒントについてはどうですか？ -しかし、UX StackExchangeには特に適切なものはありません。
しかし、私はこの質問は次のとおりだと思います：
ウェブ上で見た、美しく、よく設計された、使いやすいヘルプ/チュートリアルシステムの例は何ですか？
基本的に、私は「ヘルプシステムのインスピレーション」を探しています。私はビデオ/アニメーションヘルプの統合と、ページに直接組み込まれているインタラクティブヘルプの両方の例を見つけようとしています-後者の場合、私はいくつかの中で見た小さなヘルパーヒントのいくつかを考えていますFacebookやGmailなどの場所では、どちらも新しい機能を説明するために少しのヒントを使用しています。さまざまな優れたヘルプ/チュートリアルのユーザーエクスペリエンスデザインオプションを紹介する記事を見つけたいと思いますが、私は絶対に何でも開いています。
私たちは、この分野を探求し始めており、私たちのWebアプリケーションを支援しているところです。 Klaviyo と呼ばれる興味深いWebベースのヘルプシステムを調べています。これにより、ページ要素などのコンテキストに応じてヘルプの吹き出しを設定できます。使いやすさや機能だけでなく、追加のブラウザー拡張機能（Flashなど）を必要としない、IE6での作業（Webアプリケーションの要件によっては必要になる）など、さまざまな理由で有望に見えます悪の）。彼らのホームページは、「ヘルプ」ツアーの例から始まります。
これは完全な答えではなく、いくつかのヒントです：
チュートリアル動画にフラッシュを使用することは、各動画のコンテンツを定期的に更新する必要がない、つまりほとんど更新する必要がないと確信している場合にのみ有効です。フラッシュは定期的に更新するのが面倒で、無数の更新要求をフラッシュプログラマーに送信すると、最終的にコストが高くなります。残念ながら、アニメーションのチュートリアルコンテンツを作成するための良い代替手段はありません。むしろ、学習プラットフォームに組み込まれたツールを最大限に活用する方法を検討することをお勧めします。
評価に値する無料のオープンソース学習プラットフォームの1つは Moodle です。コンテンツ管理システムのように構築されているため、さまざまなことを行うためのユーザー提供のプラグインとツールがあります。原則としてテーマシステムでは外観を完全にカスタマイズできるはずですが、一般的にはそれほど魅力的でも派手でもありません。時間をかけてその機能の使用方法を学ぶと、安定していて、更新が簡単で、スケーラブルなフル機能の学習システムを構築できます。
特定の質問に答えるために、 Software Smitten は、適切に設計されたヘルプシステムのいくつかの例をブログに投稿し、これらのシステムで何が機能し、何がより良くできるかについて議論しています。
完全な開示：私はSoftware Smittenの作者です。
あなたのUIは何で書かれていますか？
何度か試してみたアイデアの1つは、オートメーション（たとえば、WPFやSilverlightで利用可能）を使用して実際のUIをチュートリアルモードで駆動することです。これは、ヘルプシステムの実際のUIまたは "スニペット"（より良い用語が必要な場合）のいずれかです。
これは、UIのルックアンドフィールが変更された場合にチュートリアルが古くなるという問題を解決しますが、自動化を最新に保つ必要があることを意味します。
残念ながら私はあなたにこの例を示すことはできません。経営陣がそれぞれのケースで異なるルートを進むことを決めたからです。
Help Console を使用します
それはかなり良いです、そして編集することは非常に簡単です。ほとんどのユーザーにドキュメントの更新を許可します。これは危険に思えるかもしれませんが、実際にはより明確で優れたマニュアルになります。
アプリの小さなツールチップなどを配置したり、関連ページへのリンクを設定したりすることもできます。