Keyboard - UI Element

‍‍What Is a Keyboard in UI/UX?

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.

Keyboard in UI Design
Keyboard by uinkits

General Keyboard Shortcuts

  • 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)

How To Use a UI Keyboard In Your Design?

  • 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.

When To Use a Keyboard UI Kit

  • 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.

Use the Keyboard UI Element in Your UI/UX Design With uinkits

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!