mirror of
https://github.com/microsoft/PowerToys.git
synced 2024-11-24 04:12:32 +08:00
Added links to figures and software referenced
This commit is contained in:
Deondre Davis
parent
dce4b2288b
commit
ba7a598b2e
@ -70,69 +70,69 @@ Outcome from Using VGC for IT Guidance: A successful VGC would enable IT & admin
|
||||
|
||||
The following subsections of **1.5.** describe insights into the user experience of capturing a recording with existing software.
|
||||
|
||||
|
||||
###### *Figure 1.5.1 - Original state of example screen to be recorded.*
|
||||
|
||||
*Figure 1.5.1 - Original state of example screen to be recorded.*
|
||||
|
||||
|
||||
#### 1.5.1. Xbox Game Bar
|
||||
|
||||
Xbox Game Bar is a native Windows application that allows users to record their full screen by simply pressing the key binding: Win + Alt + R, for both starting and stopping the recording. A minimalistic recording widget is displayed while recording (Figure 1.5.2), yet removed from the final recording when played in the app’s gallery (Figure 1.5.3). Note that the gallery is accessed through the Xbox Game Bar menu (launched via Win + G), which includes a host of various options, settings, and metrics. To trim the recording, Xbox Game Bar’s interface has the user click through its gallery window, File Explorer, the Movies and TV app, and the Photos app before trimming functionality can be accessed (Figure 1.5.4).
|
||||
[Xbox Game Bar](https://www.microsoft.com/en-us/p/xbox-game-bar/9nzkpstsnw4p?activetab=pivot:overviewtab) is a native Windows application that allows users to record their full screen by simply pressing the key binding: Win + Alt + R, for both starting and stopping the recording. A minimalistic recording widget is displayed while recording (Figure 1.5.2), yet removed from the final recording when played in the app’s gallery (Figure 1.5.3). Note that the gallery is accessed through the Xbox Game Bar menu (launched via Win + G), which includes a host of various options, settings, and metrics. To trim the recording, Xbox Game Bar’s interface has the user click through its gallery window, File Explorer, the Movies and TV app, and the Photos app before trimming functionality can be accessed (Figure 1.5.4).
|
||||
|
||||
###### *Figure 1.5.2 – Xbox Game Bar Recording Widget*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.2 – Xbox Game Bar Recording Widget*
|
||||
###### *Figure 1.5.3 – Gallery Window in Xbox Game Bar*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.3 – Gallery Window in Xbox Game Bar*
|
||||
###### *Figure 1.5.4 – Trimming video via Xbox Game Bar. Note that the editing process takes the user through File Explorer, Movies & TV, and Photos before accessing the trimming functionality.*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.4 – Trimming video via Xbox Game Bar. Note that the editing process takes the user through File Explorer, Movies & TV, and Photos before accessing the trimming functionality.*
|
||||
|
||||
#### 1.5.2. ScreenToGIF
|
||||
|
||||
ScreenToGIF is a free application that allows users to record a section of their screen. The launch menu (Figure 1.5.5) features a minimalistic set of options, and the recording interface (Figure 1.5.6) allows the user to drag and modify the bounding box around the desired content prior to recording. Note that there was a noticeable delay in the time from stopping the recording to opening the editing window as compared to other applications. Also note the verbose set of functionalities and editing options available in ScreenToGIF’s editing window (Figure 1.5.7).
|
||||
[ScreenToGIF](https://www.screentogif.com/) is a free application that allows users to record a section of their screen. The launch menu (Figure 1.5.5) features a minimalistic set of options, and the recording interface (Figure 1.5.6) allows the user to drag and modify the bounding box around the desired content prior to recording. Note that there was a noticeable delay in the time from stopping the recording to opening the editing window as compared to other applications. Also note the verbose set of functionalities and editing options available in ScreenToGIF’s editing window (Figure 1.5.7).
|
||||
|
||||
###### *Figure 1.5.5 - ScreenToGIF Launch Menu*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.5 - ScreenToGIF Launch Menu*
|
||||
###### *Figure 1.5.6 - ScreenToGIF Recording Interface*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.6 - ScreenToGIF Recording Interface*
|
||||
###### *Figure 1.5.7 - ScreenToGIF Editing Window*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.7 - ScreenToGIF Editing Window*
|
||||
|
||||
#### 1.5.3. Camtasia
|
||||
|
||||
Camtasia is a paid software that provides users with an extensive set of high-end recording and editing features. The recording interface (Figure 1.5.8) offers a rich set of controls and settings that enable the user to capture a multitude of different media assets. The editing window (Figure 1.5.9) includes a verbose set options ranging from trimming capabilities to CGI and transition effects. Note the video export options (Figure 1.5.10) Camtasia supports offer popular MP4 formats and social media sharing options, in addition to GIF support under ‘Custom production settings’.
|
||||
[Camtasia](https://filmora.wondershare.net/filmora-video-editor-bing.html?msclkid=98c2e7e5340f15bf2c9cb8853f3ed3af&utm_source=bing&utm_medium=cpc&utm_campaign=Filmora_SS_pid(1107)_US_Bing&utm_term=camtasia&utm_content=3.%20CP-Camtasia) is a paid software that provides users with an extensive set of high-end recording and editing features. The recording interface (Figure 1.5.8) offers a rich set of controls and settings that enable the user to capture a multitude of different media assets. The editing window (Figure 1.5.9) includes a verbose set options ranging from trimming capabilities to CGI and transition effects. Note the video export options (Figure 1.5.10) Camtasia supports offer popular MP4 formats and social media sharing options, in addition to GIF support under ‘Custom production settings’.
|
||||
|
||||
###### *Figure 1.5.8 - Camtasia's Recording Interface*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.8 - Camtasia's Recording Interface*
|
||||
###### *Figure 1.5.9 - Camtasia's Editing Window*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.9 - Camtasia's Editing Window*
|
||||
###### *Figure 1.5.10 - Camtasia's video export options*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.10 - Camtasia's video export options*
|
||||
|
||||
#### 1.5.4. Snip and Sketch
|
||||
|
||||
Snip and Sketch is a native Windows application that allows users to select sections of their screen to capture images of. While Snip and Sketch does not include recording functionality, we note this application because it captures the essence of simplicity and efficiency we hope to replicate in Video GIF Capture. Snip and Sketch’s intuitive interface (Figure 1.5.11) is quickly launched via the OS level key binding: Win + Shift + S. By selecting each option, the user easily becomes familiar with the range of applications. Once a section is captured, the image is immediately copied to the clipboard for usage in other applications. Snip and Sketch’s typical interaction time only takes a matter of seconds.
|
||||
[Snip and Sketch](https://www.microsoft.com/en-us/p/snip-sketch/9mz95kl8mr0l?activetab=pivot:overviewtab) is a native Windows application that allows users to select sections of their screen to capture images of. While Snip and Sketch does not include recording functionality, we note this application because it captures the essence of simplicity and efficiency we hope to replicate in Video GIF Capture. Snip and Sketch’s intuitive interface (Figure 1.5.11) is quickly launched via the OS level key binding: Win + Shift + S. By selecting each option, the user easily becomes familiar with the range of applications. Once a section is captured, the image is immediately copied to the clipboard for usage in other applications. Snip and Sketch’s typical interaction time only takes a matter of seconds.
|
||||
|
||||
###### *Figure 1.5.11 - Snip and Sketch Selection Interface*
|
||||
|
||||
|
||||
|
||||
*Figure 1.5.11 - Snip and Sketch Selection Interface*
|
||||
|
||||
### 1.6. Opportunity for Impact
|
||||
|
||||
Given the software discussed in **1.5 - Existing Landscape**, we aim to target Video GIF Capture as a lightweight, Windows native alternative to more verbose, feature-heavy applications like ScreenToGIF and Camtasia. Following Snip and Sketch’s intuitive and simple styling, Video GIF Capture should enable users to quickly ramp-up on its usage, and offer concise, efficient recording/editing options for common use cases as described in **1.3 – Narrative / Scenarios**. By leveraging Windows native UI, we can create a familiar interaction experience that feels at home with similar Windows applications like Snip and Sketch, Xbox Game Bar, the Movies and TV app, and the Photos App. With an explicit focus on screen recording, we aim to streamline the user interface so that the overall time spent on the application can be comparable to Snip and Sketch’s fast interface, yet functionally equivalent to lightweight workloads on ScreenToGIF and Camtasia.
|
||||
Given the software discussed in [**1.5 - Existing Landscape**](#15-Existing-Landscape), we aim to target Video GIF Capture as a lightweight, Windows native alternative to more verbose, feature-heavy applications like ScreenToGIF and Camtasia. Following Snip and Sketch’s intuitive and simple styling, Video GIF Capture should enable users to quickly ramp-up on its usage, and offer concise, efficient recording/editing options for common use cases as described in [**1.4 – Narrative / Scenarios**](#14-narrative--scenarios). By leveraging Windows native UI, we can create a familiar interaction experience that feels at home with similar Windows applications like Snip and Sketch, Xbox Game Bar, the Movies and TV app, and the Photos App. With an explicit focus on screen recording, we aim to streamline the user interface so that the overall time spent on the application can be comparable to Snip and Sketch’s fast interface, yet functionally equivalent to lightweight workloads on ScreenToGIF and Camtasia.
|
||||
|
||||
## 2. Definition of Success
|
||||
|
||||
@ -165,44 +165,44 @@ Video GIF Capture is for power users and developers who are looking to tune and
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | On launch, display region capture selection options: Rectangular Selection, Window Selection, Full Screen Selection, Exact Coordinates Selection & Cancel. Styling should resemble that of the Snip and Sketch tool (Figure 1.5.11) and possess the options layout of the Selection Menu Mock-Up (Figure 3.2.1). | P0 |
|
||||
|1 | On launch, display region capture selection options: Rectangular Selection, Window Selection, Full Screen Selection, Exact Coordinates Selection & Cancel. Styling should resemble that of the Snip and Sketch tool ([Figure 1.5.11](#figure-1511---snip-and-sketch-selection-interface)) and possess the options layout of the Selection Menu Mock-Up ([Figure 3.2.1](#figure-321---mock-up-of-video-gif-capture-selection-menu)). | P0 |
|
||||
|2 | Dim the background so the screen capture menu is in focus. | P0 |
|
||||
|3 | Default mode is Rectangular Selection. | P0 |
|
||||
|4 | Transition to the other selection modes via clicking the option’s corresponding button in the menu. | P0 |
|
||||
|5 | Alternatively transition to the other selection modes via the Tab key. | P0 |
|
||||
|6 | To cancel selection mode and close the VGC app, click the cancel button or press the OS-Level Key Shortcut: Win + Shift + R. | P0 |
|
||||
|7 | Alternatively cancel selection mode and close the VGC app via pressing the ESC key. | P0 |
|
||||
|8 | Once a region has been selected. Transition the menu interface to populate with options for recording as illustrated in Figure 3.2.3. | P0 |
|
||||
|8 | Once a region has been selected. Transition the menu interface to populate with options for recording as illustrated in [Figure 3.2.3](#figure-323---mock-up-of-video-gif-capture-recording-interface-prior-to-recording). | P0 |
|
||||
|
||||
#### 3.1.3. Rectangular Selection
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | In this mode, click and drag cursor over the desired region, displaying a highlighted border for visual confirmation like that of Camtasia’s bounding box in Figure 1.5.8. | P0 |
|
||||
|2 | Transition the selection menu to populate with recording options (Figure 3.2.3). | P0 |
|
||||
|1 | In this mode, click and drag cursor over the desired region, displaying a highlighted border for visual confirmation like that of Camtasia’s bounding box in [Figure 1.5.8](#figure-158---camtasias-recording-interface). | P0 |
|
||||
|2 | Transition the selection menu to populate with recording options ([Figure 3.2.3](#figure-323---mock-up-of-video-gif-capture-recording-interface-prior-to-recording)). | P0 |
|
||||
|
||||
#### 3.1.4. Window/Application Selection
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | In this mode, move the cursor across the screen, highlighting whatever window the cursor is currently hovering over. | P0 |
|
||||
|2 | Clicking on desired window causes it to come in focus, displaying a highlighted border for visual confirmation like that of Camtasia’s bounding box in Figure 1.5.8. | P0 |
|
||||
|3 | Transition the selection menu to populate with recording options (Figure 3.2.3). | P0 |
|
||||
|2 | Clicking on desired window causes it to come in focus, displaying a highlighted border for visual confirmation like that of Camtasia’s bounding box in [Figure 1.5.8](#figure-158---camtasias-recording-interface). | P0 |
|
||||
|3 | Transition the selection menu to populate with recording options ([Figure 3.2.3](#figure-323---mock-up-of-video-gif-capture-recording-interface-prior-to-recording)). | P0 |
|
||||
|
||||
#### 3.1.5. Full Screen Selection
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | In this mode, simply click the screen to confirm the recording selection. | P0 |
|
||||
|2 | In the case of multi-monitor displays. The screen that the cursor is currently located when clicking will be captured, displaying visual confirmation around the perimeter of the screen like that of Camtasia’s bounding box in Figure 1.5.8. | P0 |
|
||||
|3 | Transition the selection menu to populate with recording options (Figure 3.2.3). | P0 |
|
||||
|2 | In the case of multi-monitor displays. The screen that the cursor is currently located when clicking will be captured, displaying visual confirmation around the perimeter of the screen like that of Camtasia’s bounding box in [Figure 1.5.8](#figure-158---camtasias-recording-interface). | P0 |
|
||||
|3 | Transition the selection menu to populate with recording options ([Figure 3.2.3](#figure-323---mock-up-of-video-gif-capture-recording-interface-prior-to-recording)). | P0 |
|
||||
|
||||
#### 3.1.6. Exact Coordinates Selection
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | In this mode, an additional drop-down panel from the selection menu should appear that displays the inputs: X, Y, Height, Width, and Confirm (Figure 3.2.2). | P0 |
|
||||
|2 | A highlighted rectangular border will be produced on the screen, of dimensions “Height” x “Width”, with the top-left corner of the border located at coordinate (X, Y) on the screen. Visualization equivalent to Camtasia’s bounding box in Figure 1.5.8. | P0 |
|
||||
|1 | In this mode, an additional drop-down panel from the selection menu should appear that displays the inputs: X, Y, Height, Width, and Confirm ([Figure 3.2.2](#figure-322---mock-up-of-video-gif-capture-expanded-selection-menu-for-exact-coordinate-selection)). | P0 |
|
||||
|2 | A highlighted rectangular border will be produced on the screen, of dimensions “Height” x “Width”, with the top-left corner of the border located at coordinate (X, Y) on the screen. Visualization equivalent to Camtasia’s bounding box in [Figure 1.5.8](#figure-158---camtasias-recording-interface). | P0 |
|
||||
|3 | The inputs can be adjusted textually via their corresponding text fields in the drop-down. | P0 |
|
||||
|4 | The inputs can also be adjusted manually via click-and-dragging the displayed tooltips along the highlighted border. | P0 |
|
||||
|5 | Dragging the tooltips located on the border’s corners will preserve the region’s current aspect-ratio while adjusting its size. | P0 |
|
||||
@ -212,60 +212,60 @@ Video GIF Capture is for power users and developers who are looking to tune and
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | Populate the selection menu with recording options: Record, Cancel (Figure 3.2.3) | P0 |
|
||||
|1 | Populate the selection menu with recording options: Record, Cancel ([Figure 3.2.3](#figure-323---mock-up-of-video-gif-capture-recording-interface-prior-to-recording)) | P0 |
|
||||
|2 | Keep the highlighted border around the selected recording region but remove the dimmed background effect that was created when the selection tool was activated. | P0 |
|
||||
|3 | Allow the user to interact with the system as needed to prepare for the initiation of the recording. | P0 |
|
||||
|4 | Allow the user to manually modify the recording region prior to the initiation of recording via click-and-drag functionality on the highlighted border like Camtasia’s bounding box in Figure 1.5.8. | P0 |
|
||||
|4 | Allow the user to manually modify the recording region prior to the initiation of recording via click-and-drag functionality on the highlighted border like Camtasia’s bounding box in [Figure 1.5.8](#figure-158---camtasias-recording-interface). | P0 |
|
||||
|5 | When ‘Play’ is selected, lock the highlighted border so that it can no longer be adjusted. | P0 |
|
||||
|6 | When ‘Play’ is selected, overlay the screen with a visual count-down, immediately followed by the initiation of the recording. | P0 |
|
||||
|7 |Alternatively start recording by pressing the OS level short-cut: Win + Shift + R. | P0 |
|
||||
|8 | When recording begins, transition the recording menu to the active state as depicted in Figure 3.2.4 | P0 |
|
||||
|8 | When recording begins, transition the recording menu to the active state as depicted in [Figure 3.2.4](#figure-324---mock-up-of-video-gif-capture-recording-interface-during-recording) | P0 |
|
||||
|9 | While the recording is active, the user is free to interact with the system as desired. | P0 |
|
||||
|10| When the user selects the ‘Stop’ button, the recording is ended and loaded into an editor window like that depicted in Figure 3.2.5. | P0 |
|
||||
|10| When the user selects the ‘Stop’ button, the recording is ended and loaded into an editor window like that depicted in [Figure 3.2.5](#figure-325---mock-up-of-video-gif-capture-video-editing). | P0 |
|
||||
|11| Alternatively stop the recording and load it into an editor window by pressing the OS level short-cut: Win + Shift + R at any time while recording. | P0 |
|
||||
|
||||
#### 3.1.8. Editing
|
||||
|
||||
|No. | Requirement | Pri
|
||||
| - | - | - |
|
||||
|1 | Load the recording from section 3.1.7 in an editor window as described in Figure 3.2.5. | P0 |
|
||||
|2 | A scrub bar should be loaded to trim the recording. Scrubber UI should resemble that of the Photos app in Figure 1.4.4. | P0 |
|
||||
|1 | Load the recording from [section 3.1.7](#317-recording) in an editor window as described in [Figure 3.2.5](#figure-325---mock-up-of-video-gif-capture-video-editing). | P0 |
|
||||
|2 | A scrub bar should be loaded to trim the recording. Scrubber UI should resemble that of the Photos app in [Figure 1.5.4](#figure-154--trimming-video-via-xbox-game-bar-note-that-the-editing-process-takes-the-user-through-file-explorer-movies--tv-and-photos-before-accessing-the-trimming-functionality). | P0 |
|
||||
|3 | On the right-hand menu, display a selection menu for either Video or GIF. | P0 |
|
||||
|4 | Under the ‘Video’ menu, display options to adjust resolution quality and save the video (Figure 3.2.5). | P0 |
|
||||
|5 | Under the ‘GIF’ menu, display options to adjust the resolution, frames-per-second, and save the GIF (Figure 3.2.6). | P0 |
|
||||
|4 | Under the ‘Video’ menu, display options to adjust resolution quality and save the video ([Figure 3.2.5](#figure-325---mock-up-of-video-gif-capture-video-editing)). | P0 |
|
||||
|5 | Under the ‘GIF’ menu, display options to adjust the resolution, frames-per-second, and save the GIF ([Figure 3.2.6](#figure-326---mock-up-of-video-gif-capture-gif-editing)). | P0 |
|
||||
|6 | ‘GIF’ menu should allow the user to save the GIF to the clipboard.| P0 |
|
||||
|7 | The settings icon should display the PowerToys settings menu for VGC when clicked (Figure 3.2.7) | P0 |
|
||||
|7 | The settings icon should display the PowerToys settings menu for VGC when clicked ([Figure 3.2.7](#figure-327---mock-up-of-video-gif-capture-powertoys-settings)) | P0 |
|
||||
|
||||
### 3.2. Design Mock-Ups
|
||||
|
||||
###### *Figure 3.2.1 - Mock up of Video GIF Capture selection menu*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.1 - Mock up of Video GIF Capture selection menu*
|
||||
###### *Figure 3.2.2 - Mock up of Video GIF Capture expanded selection menu for exact coordinate selection*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.2 - Mock up of Video GIF Capture expanded selection menu for exact coordinate selection*
|
||||
###### *Figure 3.2.3 - Mock up of Video GIF Capture recording interface prior to recording*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.3 - Mock up of Video GIF Capture recording interface prior to recording*
|
||||
###### *Figure 3.2.4 - Mock up of Video GIF Capture recording interface during recording*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.4 - Mock up of Video GIF Capture recording interface during recording*
|
||||
###### *Figure 3.2.5 - Mock up of Video GIF Capture video editing*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.5 - Mock up of Video GIF Capture video editing*
|
||||
###### *Figure 3.2.6 - Mock up of Video GIF Capture GIF editing*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.6 - Mock up of Video GIF Capture GIF editing*
|
||||
###### *Figure 3.2.7 - Mock up of Video GIF Capture PowerToys settings*
|
||||
|
||||
|
||||
|
||||
*Figure 3.2.7 - Mock up of Video GIF Capture PowerToys settings*
|
||||
|
||||
### 3.3. Open Considerations
|
||||
|
||||
* DRM considerations.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user