web-dev-qa-db-ja.com

レスポンシブWebアプリのビデオチュートリアルにどのように取り組むべきですか?

レスポンシブWebアプリのチュートリアル(ビデオなど)を作成する場合、どのサイズでインターフェイスを表示する必要がありますか?モバイル?デスクトップ?別の動画にする必要がありますか?

1
Andy Fleming

ビデオ/チュートリアルのコンテンツは、ユーザーのコンテキストに固有である必要があります。したがって、スマートフォンのブレークポイントの場合、チュートリアルはスマートフォンのインターフェースなどを反映する必要があります。

ヘルプ/チュートリアルの考え方は、ユーザーに回答を与えることであり、ユーザーが1つのブレークポイントから別のブレークポイントにそれを変換する必要がある場合は、より多くの認知的負荷がかかります。

1
Alok Jain

私はあなたが何をしたいのか分かりません、あなたはあなたが見せたいもののシナリオに集中するべきです。動画は画面サイズではなく、アクションごとに分けるべきだと思います。

  • ユーザーがモバイル画面ビューを使用したいと思うのはどのアクションですか?
  • ユーザーがデスクトップビューを使用したいと思うのはどのアクションですか。

ビデオシナリオを設計した後、ツールの選択は、品質に影響を与えるもう1つのトピックです。私自身の経験では、Camstudio(無料のツール)を使用しており、コーデックの選択に注意する必要があります。一部のコーデックでは、ビデオの編集中に品質が低下します。

品質が悪いため(コーデックの問題)、同じフローを2回記録しました。ラガリスは、画面記録の目的で見つけることができる最高のコーデックの1つです。

テキストまたはテキストボックスの操作を入力する場合は、画面の記録が画面の解像度に依存するため、ブラウザーからアクション(少し)を拡大する必要があります。編集中に(特にAdobeツールを使用して)これらのアクションを拡大したい場合、ピクセル化されたビューがあっても全体的なエクスペリエンスは向上しません。

モバイル録音では、ユーザーがどのようなアクションをとるかを明確にする必要がありますか?タッチ、スライド、そしてその方向。

ビデオチュートリアルで頑張ってください。

1
Abektes

モバイルとデスクトップの両方を確実に表示する必要があります(iPad MiniやKindle Fireなどの小さなタブレットの場合は、3番目、中サイズも表示される可能性があります)。デスクトップインターフェースは、少なくとも現在使用中の最小画面サイズ(一般に1024pxとして受け入れられています)に対応できる十分な幅である必要がありますが、最大の効果を得るには、左右のマージンと負のスペースを表示するために広くする必要があります。 Zurb's FoundationやTwitterのBootstrapなどのレスポンシブフレームワークを使用すると、CSSに設定されているメディアクエリブレークポイントを超えてブラウザーのサイズを変更することで、小さい画面幅をシミュレートできるため、個別のビデオを実行する必要はありません。

0
Eddie Prislac