Member-only story
The importance of hover states
Exploring UI Design details with technical-academic rigor
This text is based on my hands-on experience designing interfaces for various devices. I hope this article offers valuable insights and inspires you to explore new creative possibilities in UI design.
OBS: Before we dive into what a hover state is and how to use it in your digital product (software), let’s first look at the types of interaction. In the HCI field, there are different types of interaction. Still, in this article, we’ll focus on just two: cursor-based interaction and touch-based interaction, also known as natural interaction.
Cursor-based Interaction
The cursor is the virtual representation of the mouse or pointing device within the operating system environment. It acts as an essential visual indicator, especially in desktop environments and on tablets that use styluses. The cursor should support precise operations and hover states to boost app productivity, simplify interactive tasks, and optimize information display
When designing interfaces that rely on cursor-based interaction, it’s important to keep in mind some guiding principles, which are:
- Function expression: When the cursor hovers over an object or specific area in the interface, a set of standard cursors predefined by the operating system should be used to indicate the interaction status.
- Simplicity: Avoid using unusual cursors. Unless you’re designing a game or an extremely specific system where changing the cursor style is necessary.
- Consistency: Don’t complicate interactions across different devices. Be consistent across all platforms — avoid changing the cursor’s appearance.
Touch-based Interaction
Touch-based interaction is when we use our fingers to interact directly with a device. In academia, this type of interaction is known as NUI (Natural User Interface). But why ‘natural’? Because the interaction happens directly, without the need for input peripherals like a mouse, joystick, or stylus.
NUI (Natural User Interface) leverages several fundamental HCI (Human-Computer Interaction) principles to create seamless…
