#120: Support and use "Tile" links

Contents
  1. Motivation
  2. Proposal
  3. Implementation
by Alexander Limi — last modified Aug 23, 2006 10:10 PM

One of the classic, testable usability laws is Fitt's Law, which simply says that the efficiency of a user interface element is directly proportional to its size. Plone currently has a lot of user interface items that could have bigger clickable areas without changing the elements themselves.

Proposed by
Alexander Limi
Seconded by
Myroslav Opyr
Proposal type
User interface
State
in-progress

Motivation

A lot of the user interface elements in Plone only work when you click the links they define instead of the entire UI element. This is bad UI, although most web-based systems work this way.

I have already experimented with changing this for a limited set of items in previous Plone versions; in Plone 2.0 I made the entire item in the navigation tree clickable and it indicates when it is selected with a block of color around itself, so you know you can click (this doesn't work in Internet Explorer because it's a buggy piece of crap, more about that later ;). In Plone 2.1 I made all the portlet items be clickable in the entire area through a display:block definition of the link tag.

It's time to take this to the next level.

Proposal

Because of the limitations (as far as I have found, at least), it's hard to make certain elements entirely clickable through re-defining the link tag only. In a separate project I was involved in, we used a tiny piece of JS to assign clickable behaviour to an arbitrary element, which worked well.

(Note that the normal "read more" or whatever link still remains, so it's not removing links for people that have JS turned off or browsing via lynx or similar — this is merely augmenting the link behaviour, not moving it into JS.)

This also has the advantage of being able to make any area clickable. My pet peeve is that Plone in "Summary view" doesn't accept clicks anywhere within the area of one of the items listed, but only on the links. The interface would be so much more efficient if we could click anywhere within that item's area.

Implementation

We should find a good way to define an area as clickable. In the project I was in, we defined that on the tag itself, and did it explicitly, but this can possibly be improved.

Ideas are welcome, this PLIP is in its infancy still. :)

Pilot implementation

Posted by Myroslav Opyr at Jun 09, 2006 10:17 AM
Alex,

Here is "pilot tile implementation": http://plone.org/products/plone-tiles from Quintagroup. We implemented the feature a bit different then you expected and pulled into Plone-2.1.3 and 2.5 already.

We use "tile" CSS class to mark the element that will be capturing mouse clicks. If "tile" has more then 1 A element, script will look up for 1 that has "primary" CSS class. All the magic is done with Javascript that is executed on page load.

Tile elements get ability to be focused with mouse/keyboard, i.e, behaves like conditional A. Keyboard navigation is not yet complete. You can have nested tiles and they should behave properly. No CSS is applied, thus nothing should break with applying "tile" and "primary" CSS classes.

We are planning to include tile-enabled reimplementations for portlets and some other Plone elements in one of future product releases in nonactive skin layer for reference.

Regards,

m.

Sounds good

Posted by Alexander Limi at Jun 09, 2006 05:15 PM
It's pretty much working exactly as I wanted if your description is correct. Do you have commit privileges to Plone? Would be nice to do this on a plip120 branch. :)

SVN access

Posted by Myroslav Opyr at Jun 09, 2006 07:41 PM
I have commit rights, however I'm behind the idea and I'm mentor only for developer who did heavy lifting - development and browser compliance. The developer (nicknamed piv) doesn't have SVN access yet. We'd prefer to have a few rounds (versions) of the product to spring, and we have a Plone-2.5 site in works (that uses the product heavily) should go into production mid-summer. What are your estimations, when the feature should land in PLIP branch (we expect a lot of HTML elements to get "tile" class then ;)?

As soon as possible

Posted by Alexander Limi at Jun 09, 2006 10:39 PM
Yes, it will involve adding a lot of tile classes as well as testing the behaviour. So the sooner you guys can get it on a branch for testing, the better.

If you're not committing it to the branch for him, piv should send in the contributor agreement, so he can get access.

Thanks!

Please add a review bundle

Posted by Alexander Limi at Aug 22, 2006 05:12 AM
The deadline for the review process for 3.0 is this weekend, I'd like you to add a review bundle so the framework team can have a look at it.

The actual implementation doesn't have to be fully baked (ie. this obviously needs template updates all over), but if you can add the general code, that would be great. Oh, and it shouldn't be a separate product, obviously - it's just JS, right? :)

Some work committed to branch

Posted by Myroslav Opyr at Aug 23, 2006 07:11 PM
The branch https://svn.plone.org/[…]/ was created from https://svn.plone.org/svn/plone/CMFPlone/trunk and tile changes incorporated (http://dev.plone.org/[…]/plip120-tiles?rev=10580).

The templates needs a lot of work still, however some general impression of work to be performed is available at http://dev.plone.org/plone/changeset/10580.

tiles.js makes all .tile elements to react on mouse clicks. After click it emulates the click on contained a.primary element. If there is no a element with .primary class, then first contained available is chosen.

Visual feedback at the moment is outline frame that is surrounding tile element upon click. And tile element gets cursor from contained a.primary element style (usually hand cursor).

What is not yet implemented:
1. Following tile link with keyboard
2. Middle click on tile in Firefox to open in new tab.

What is annoying:
1. There is another tab-able element in DOM, i.e. while iterating over elements of the page with TAB key, tile is selected first and only after next TAB, the a link element is selected.

Suggestions?

FYI: We are planning to add light visual feedback (background changes) while hovering (in Firefox) on tiles to make them more prominent. Another feature to be added is ability to tile form elements (clicking will focus contained form element). However this is totally separate task and will be incorporated into qPloneTiles most probably first and only after proper testing it will be integrated into Plone.