Developing a Video Instruction for Describing the Interface of a Web Application
General Process
Stage 1. Planning and Preparation
- Defining the Goal and Audience:
- clearly articulate the task the video instruction addresses (for example, "show how to create a report in the interface");
- identify the target audience (beginners, experienced users, administrators, etc.);
- consider the technical literacy level of the viewers.
- Analyzing Functionality:
- highlight the key interface elements that need to be shown;
- break the process into logical blocks (for example, logging in → selecting a section → filling out a form → saving);
- note potential "pitfalls" — places where users most often make mistakes.
- Gathering Materials:
- prepare textual instructions or checklists (if available);
- ensure you have access to the current version of the web application;
- check that all demonstration data (logins, test records) are ready and safe to show.
Stage 2. Writing the Script
- Creating the Structure:
- create a step-by-step action plan that will be shown in the video;
- divide the video into meaningful parts with headings (for example, "Step 1. Logging In", "Step 2. Creating a New Project").
- Writing the Voiceover Text:
- formulate clear and concise phrases for each step;
- avoid complex terms or explain them in simple words;
- add hints ("Note: the 'Date' field is filled in automatically").
- Rehearsal:
- go through the entire script in the web application interface to ensure nothing is missed;
- adjust the script if any steps turn out to be too complicated or lengthy.
Stage 3. Preparing for Recording
- Choosing Tools:
- screen recording software (OBS Studio, Camtasia, Screencast-O-Matic, etc.);
- microphone for voiceover (if required);
- video editor for editing (DaVinci Resolve, Adobe Premiere Pro, CapCut, etc.).
- Setting Up the Environment:
- clear the desktop of unnecessary shortcuts and files;
- choose a neutral browser background (if showing tabs);
- disable notifications on the computer and in the browser.
- Test Recording:
- record a short segment to check the sound and video quality;
- set the screen resolution (usually 1920×1080 or 1280×720);
- adjust the microphone and background music volume (if used).
Stage 4. Recording the Video
- Screen Recording:
- launch the recording software and select the area of the screen with the web application;
- perform actions strictly according to the script, without unnecessary clicks and delays;
- move the cursor smoothly so that the viewer can follow it.
- Voiceover (if needed):
- speak clearly and at a measured pace, synchronizing speech with actions on the screen;
- pause between steps to allow the viewer to absorb the information.
- Additional Elements:
- if necessary, add annotations (arrows, frames, text hints) during the recording or later during editing.
Stage 5. Video Editing
- Processing the Material:
- trim unnecessary segments at the beginning and end of the recording;
- remove pauses, mistakes, and repetitions;
- synchronize the audio track with the video.
- Adding Visual Elements:
- insert titles with step headings;
- add click animations (highlighting buttons, cursor blinking);
- place text hints or subtitles (for those watching without sound).
- Final Check:
- watch the video in its entirety, ensuring the logic is intact;
- check the readability of the text and clarity of the image.
Stage 6. Publishing and Testing
- Exporting the Video:
- save the file in an optimal format (MP4, WebM) and resolution;
- select a bitrate to balance quality and file size for comfortable uploading.
- Placement:
- upload the video to a platform (YouTube, corporate portal, LMS, etc.);
- add a description with timestamps (for example, "0:45 — Setting Filters", "2:10 — Saving the Report").
- Testing and Feedback:
- have colleagues or a test group of users watch the video;
- gather feedback: what was unclear, which steps need clarification;
- make adjustments and update the video if necessary.
Tests: Script
Option 1: Recording a Short Video Without Sound
Video Title: User Authorization on the Corporate Portal.
- Launch the browser in incognito mode.
- Enter the URL of the corporate portal: https://my.globaldrive.ru/app/
- Select the required tenant, then choose authorization via Bitrix24.
Tests: Software
OBS Studio
- Screen Recording:
- launch the recording software and select the area of the screen with the web application;
- perform actions strictly according to the script, without unnecessary clicks and delays;
- move the cursor smoothly so that the viewer can follow it.
- Voiceover (if needed):
- speak clearly and at a measured pace, synchronizing speech with actions on the screen;
- pause between steps to allow the viewer to absorb the information.
- Additional Elements:
- if necessary, add annotations (arrows, frames, text hints) during the recording or later during editing.
CapCut
Editing: stitching, splitting, animation, sound effects.
Working Video: Client
Task Statement: Overview of functionality from the client's perspective: how to create and track orders, work with statuses, view necessary information.
Script: Creating an Order
- Can you place an order? (intro)
- Go to the employee profile.
- Open the Assigned Capabilities tab and show the Company Manager role on the regional tenant.
- Display a message that if the Company Manager role is not assigned, it is necessary to contact corporate portal support.
- Show the main sections available to the user with the Company Manager role.
- How to find a product for an order? (intro)
- How to add a product to the cart? (intro)
- How to split pre-order products by supplier warehouses.
- How to combine pre-order products into one warehouse.
- How to view sub-order products.
- How to edit sub-order products.
- How to view the container load in the sub-order.
- How to leave a note when placing an order.
- How to place an order.
Working Video: Manager
Task Statement: Overview from the manager's perspective: how to process orders, manage tasks, interact with the client through the system.
Script: Order Management (Editing)