Keyboard - UI Element

A keyboard gives the opportunity for the user to navigate more easily an app or a website. A keyboard is a combination of elements that can create shortcuts and create a better user experience.

‍

‍

• Show shortcuts cheatsheet: Shift + / 
• Screenshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
• Delete/Exit:  Esc 
• Change font size: Command Shift P(Mac) or Ctrl Shift P (Windows)
• Edit element: Enter
• Copy: Command + C (Mac) or Control + C (Windows)
• Cut: Command + X (Mac) or Control + X (Windows)
• Paste: Command + V (Mac) or Control +V (Windows)
• Duplicate: Command + D (Mac) or Control + D (Windows)
• Undo: Command + Z (Mac) or Control + Z (Windows)
• Redo: Shift + Command + Z (Mac) or Shift + Control + Z (Windows)

‍

• Use keyboards that match the content the users are editing.  
• Adapt the design with the size of the keyword by making the design scalable. Make sure that the keyboard layout and the app interfaces look aesthetically pleasing together.
• Ensure that all interactive elements can be triggered with the help of the keyboard.
• Let the users know when they selected an element with the help of the keyboard with a focus state.
• Ensure that the user has the possibility to “skip to content” and move to the next steps or forward with the help of the keyboard.
• Make sure native elements are used.

‍

• The keyboard should be helpful in any situation that includes entering or editing text, data, or forms. The keyboard should help the user step to the next category, fill in, or even exist it.
• Keyboard should also be used when entering a shortcut, or editing interactive components such as opening links when tapping buttons.
• When selecting inputs from a dropdown.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find keyboards and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍