(KBS) Concept 2

Design changes

Simplifying the user flow

Top panel

  • Presets are moved to “More options” on the edit panel
  • Add/edit shortcuts button is moved under options
  • Added description of KBS activation key

Options panel

  • Option panel has two options: “available keyboard shortcuts” and “add/edit keyboard shortcuts”

Available shortcuts

  • “This page” shortcuts: shortcuts that are specific for the current page.
  • Recommended shortcuts: the most usable shortcuts for the current page.
  • View all shortcuts: brings up all the available shortcuts.

Available shortcuts expanded

  • Gives an overview of what shortcuts each category has.
  • Indicates what order keys are modified for each shortcut.
  • User could also access “edit keyboard shortcuts” by pressing the link on bottom of the panel.

Add/edit keyboard shortcuts

  • Ability to customize different categories.
  • The input box beside each option indicates what keys are used for each shortcut, and in what order.
  • Empty boxes show witch available shortcuts are not assigned yet.
  • Keyboard preview helps the user focus on the screen by letting the see their interactions highlighted on the keyboard.
  • By hovering on top of shortcuts, an animation of the keys, and their order appears on keyboard preview.
  • Keyboard preview also shows available, and unavailable options, and “multi-function keys”.
  • “Save” and “More options” buttons are at the bottom right.

More options

  • Keyboard shortcuts activation key: it would be easier for the user to access and modify this key by having it separated, under more options.
  • Slow key settings (time between keys): gives user the ability to set how much time they need between pressing keys (keys like: C then S).
  • Key sound: A click sound indicating when a key is pressed down, and when it is released.
  • Presets: Gives user the ability to create different keyboard shortcut presets for different sates and contexts.

Flow chart

Download

How it would look in the browser

On this page