Tag Archives: grid

Car Interface

A Car Interface
I see a lot of different problems with car interfaces in general. I see dual screens, touch screens, control knobs, volume buttons, volume sliders. Diversity is not a problem in such, but car interfaces often end up being disappointing.

I would recommend three points:

  1. No complex interactions, no complex gestures. In a moving car, pinch-to-zoom, sliders, double taps can be difficult on nice roads, impossible on bumpy roads.
  2. Putting multiple sections in one screen, a benefit of larger screens, can help interfaces include different sections for different information. More screen real-estate translates to less clutter. Multiple sections lets the driver have multiple screens at disposition, at a glance, without the need for interface navigation.
  3. When interactions are too complex (temperature control, fan control, heated seats, volume, etc.) put them outside of the screen on physical buttons. Then, on the screen, you can show extra information.

Seamless hover

A while ago, I constructed this type of grid layout, or masonry layout, that would be unified by a special hover effect. I first encountered this idea in the wild on the updated Sagmeister & Walsh website, and it pushed me to try and implement this effect, with my own technique and with my own style. This is the story of the seamless hover effect, a web experiment in which I question the unity of large content collections, and I try to figure out how to stitch content together, using a common hover effect for a collection of things. I do have to point out that this technique is only useful in an environment where a pointer exists, such as on a desktop computer.

The seamless hover effects, in a nutshell, takes the coordinates of your mouse pointer, using a bit of jQuery and maths, and uses those coordinates to pile up every selected titles at the location of the pointer. Which means that all the text content is following your cursor, always, however, you only see the text content when your cursor is located inside its respective grid cell. Demo. You will notice before you move the cursor, that everything is placed in a singular grid cell, and that the text clips onto it. The clipping makes use of the overflow property, which is all very compatible across all browsers. Very good.

The effect only needs two basic elements. A tile and a title element. For the best effect, I deliberately squeezed the grid cells together, and for laziness, I made them all the same size. I am sure the same effect could be used in a padded layout or on a masonry grid. I would make for an even more dynamic layout.

Use it, implement it, modify it, cite me if you want, and keep coding.