Modal Dialogues & Pop Outs Using Keyboard Navigation
VidiEditor uses various dialogs that are displayed on top of the main page or that offer navigation possibilities to sub menus. Those dialogs follow the same rules as far as their design allows it. In general it can be said that following dialogs offering keyboard shortcuts exist:
Form dialogs
Create/edit project
Publish timeline
FCP XML Export
Create / Edit Timeline
Create / Edit Marker
Edit Timeline Start Timecode
Selection of existing elements
Open project
Information
About dialog
Log report
Settings
Pop outs
Project settings navigation
Media management burger menu navigation
Context menus
All these dialogs are not discussed separately as they have a very similar in their behaviour:
Form Dialogs
On these dialogs, the goal is that a user can quickly and easily navigate through the fields and fill them out without using a mouse. These dialogs allow tabbing through the different input fields.
Shortcut | Interaction |
Tab | Forward navigate through all kind of input fields, cancel button, save button. |
Shift + Tab | Backward navigate through all kind of input fields, cancel button, save button. |
Esc | Close dialog without saving. |
Enter | Execute focused input control or button. |
The behaviour of the individual input fields depends on their type - expressed in the following table:
String
Shortcut | Interaction |
Freetext typing | User can just type in the field and it auto-corrects the format if validation is set in. |
Arrow left / Right | Navigate cursor in string. |
Shift + Arrow left / Right | Mark part of the string. |
Ctr + A | Mark complete string. |
Backspace | Delete the marked string. |
Boolean
Shortcut | Interaction |
Enter | Switch status of switch if selected. |
Date Picker
Shortcut | Interaction |
Free-text typing | User can just type in the field and it auto corrects the format. |
Enter key on free-text field | Open date selector pop-out. |
Arrow keys | Navigate in calendar. |
Enter key in pop-out | Use selected as date value. |
Number picker
Shortcut | Interaction |
Free-text typing | User can just type in the field and it auto validates the format. |
Arrow up/down keys | Count number up / down. |
Enumeration / Dropdown
Shortcut | Interaction |
Enter key on field | Open dropdown. |
Enter key on list | Choose selected as value. |
Esc | Close drop down without saving. |
Arrow up | Upward navigate through list. |
Arrow down | Downward navigate through list. |
Arrow keys without pop-out | Navigate through list without pop-out / value switches directly. |
Radio Buttons
Shortcut | Interaction |
Arrow up | Upward navigate to upper radio button. |
Arrow down | Downward navigate to upper radio button. |
Selection of Existing Elements
This is basically a similar behaviour to that of the keyboard navigation in the project bin or search pane. Dialogs designed in this way allow for tabbing through elements - especially navigating in result lists using arrow keys and executing user interactions directly on selected elements. The main dialog designed in this way is the Open project dialog as shown below:
Next list provides an overview about the usable keyboard keys in here:
Shortcut | Interaction |
Tab | Forward navigate through controls: Search field, search button, Grid |
Shift + Tab | Backward navigate through controls: Search field, search button, Grid |
Arrow up | Upward navigation in grid |
Arrow down | Downwards navigation in grid |
Enter | Open Project |
Esc | Close dialog without opening |
Page up | Navigate to previous page |
Page down | Navigate to next page |
Information and Pop-Outs
These dialogs are usually very small and offer only basic functionality. The goal is to support a streamlined navigation so a user can navigate via tabbing or via arrow key in these dialogs and execute button via enter. The functionality might differ slightly in the individual dialogs.