Usability of Grid Menu on Small SmartPhones

[mtbvfrAgainBlocked]

Good morning,

It would appear that more thorough testing, for usability, is required on small SmartPhones.

For small SmartPhones like the iPhone 3GS, the API of the Grid widget needs extending to allow the Grid Menu to be positioned and resized as required because the default size and position and the default size of the Grid Menu elements are NOT User Friendly on such a small mobile device.

Another problem I have with the Grid Menu is that the ‘itemHeight’ Property can’t be set for the DropDownLists of the Filtering section.

Also, the first Input element, of the Filter section of the Grid Menu, should not have the Focus when the Grid Menu opens as this causes the Keyboard to appear which should not happen until a User actually taps on the Input element.

I have managed to create solutions for most of these problems but, as you will see from the following page (the Grid Menu jumps around), the User Experience could be so much better if these oversights, in design of the Widgets, were addressed by having the API improved.

The modifications, I added to increase the height of the Item Divs of the first Grid Menu DropDownList, appear to be causing the Hovering to be out of synchronisation for the Desktop Browser and the Selection to be out of synchronisation for Mobile Safari. It may just require an adjustment to the ‘max’ and/or ‘stepping’ properties of the Vertical Scroll Bar but I don’t think that should be necessary if the ‘itemHeight’ Property could be set.

Thank you, Michael.

[Peter StoevKeymaster]

Hi Michael,

We will consider your suggestions and if we find them valid, we may make some changes in a future version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mtbvfrAgainBlocked]

Hi Peter,

In addition to the problems I raised in the first post; when you Select an Item from the DropDownList and that Item is positioned over either of the Input elements or the Filter or Clear buttons (Spans), the Input element or Button receives the Focus, after the DropDownList closes, which causes the associated event handler to be activated.

Again, this is a problem with Mobile Safari. On the Desktop there isn’t a problem.

How can this be prevented?

Thank you, Michael.

[Peter StoevKeymaster]

Hi Michael,

It can’t be prevented, because we put the Focus in the Input. That will allow the user to type a filter value directly without having to click/tap. We will consider whether this is more convenient for users on mobile, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mtbvfrAgainBlocked]

Hi Peter,

But if a User selects “empty”, for example, then they would not be wanting to enter any filter value.

Also, your answer is not correct because on the desktop, for example, the Input elements (class=”filtertext1divItemsGridCrit” & class=”filtertext2divItemsGridCrit”) do not receive the Focus after making a selection from the DropDownLists.

After making a selection from the first DropDownList, the element that becomes the Active Element (document.activeElement) is the following.

<div style="background-color: transparent; -webkit-appearance: none; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: relative;" tabindex="0">

In the DOM this element comes after the following element.

<input type="hidden" name="filter1divItemsGridCrit" value="empty">

Again, this is a Touch Interface problem.

If the the Input elements (class=”filtertext1divItemsGridCrit” & class=”filtertext2divItemsGridCrit”) are under an Item selected from one of the DropDownLists, then, these Input elements receive the Focus.

The best I can come up with is the following but it is not consistent and 400 milliseconds is too long.

For the Open event:

$('#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(3)>input,#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(6)>input,#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css('display','none');

For the Close event:

setTimeout(function(){$('#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(3)>input,#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(6)>input,#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css('display','');},400);
$('#filter1divItemsGridCrit>div').focus();

Thank you, Michael.

[mtbvfrAgainBlocked]

Hi again Peter,

As confirmation that the problem is related to the Mobile Safari Touch Interface, I just ran a small test.

I placed an Input (type = text) below one of the other DropDownLists and when I opened the DropDownList and selected an Item that was Above (on top of) the Input element, the Input element received the Focus.

Hasta pronto, Michael.

[Author]

Posts