Touch Friendly Design ' Bringing Life to Lists
Last Updated -
Yesterday I talked about how creating traditional <A> driven navigation can be problematic in today’s touch first world. In yesterday’s demonstration I pointed out how using hyperlinks and a traditional menued navigation scheme can lead to user error when touching a target. Today I wanted to extend my thoughts by showing how even using a hyperlink in a list of links can be just as problematic.
The iPhone has made the use of vertical list common. Often menu options are listed on top of each other with some sort of gradient behind them. This is an iOS convention and creates what is known as pogo sticking as a user jumps from one page to another.
The problem I often see is just the text is the active action item in the list. This means the user has to touch the text itself to invoke the desired action. Of course if the text is large enough, say 24px or more and long enough (think several words) the odds of success can be high. But often this is not the practice. Complicating matters is developers still using <A> tags to link to the target page.
Instead of using a hyperlink that wraps the text my experience is telling me the better way is to bind a click event handler to the container <LI> element. This means no matter what text is contained inside the list item when the user touches anywhere in the list item it will invoke the desired navigation action.
I also recommend adding enough padding to provide a reasonable separation between the text in each list item I have found that at least 6px of padding between text works well. This means a padding-top:3px; padding-bottom:3px; should be used. Of course you can increase those values as needed.
As we built Moesion we ran into this issue. Initially we followed the common guidance of making the text a hyperlink. But quickly I realized this was more folly than good practice. I found myself having to tap, tap, tap to get a response and on top of that I often wanted to touch to the right side of the list instead of the left, where the text is located.
In the above screenshot from the SQL Server Moesion application you can see how varied each list item can actually be. The first column in this table is simply named Id and the 5th column is IsOpenedInNewWindow. So the potential row’s text length is all over the place and completely unpredictable from a client layout perspective. Our Moesion application actually retrieves the information from the server, which our customer has defined their own SQL databases, tables and their column names. So 2 letters to 256+ letters is the potential text length.
So after the initial experiences I decided it was going to guarantee a much higher user experience (meaning the user would successfully touch the desired target) if we abandoned the hyperlink model and opted for a click event hander bound to the <LI> instead. On a side note, this also made adopting a single page application model much easier too.
If we examine the code it looks something like the following:
$("li.sql-column"
).click(function
(e){
e.preventDefault();
e.stopPropagation();
window.location ="{my target url w/params}"
;
});
A pretty simple jQuery click event handler. Adding the e.preventDefault and e.stopPropagation just ensure nothing bubbles up past the <LI> and our click event handler. This can be important when you have nest elements that respond to click (or touch events) differently.
What about search engines. First Moesion is a Line of Business application so search engine ranking inside the application is not desired. But what if I had a public facing web application, like a product catalog? Right now my answer would be to include the hyperlink somewhere within context, but make it not so prominent as to intrude. The other step would be to capture the hyperlink’s click event and stop the default action (more on why in another post). This way the search engine spider can still consume the link and give you the link juice you desire.
$("li.sql-column, li.column > a"
).click(function
(e){
e.preventDefault();
e.stopPropagation();
window.location ="{my target url w/params}"
;
});
Expanding a user’s potential touch area can radically increase your user satisfaction and does not have to impede your search engine strategy. This does require you rely on more modern AJAX techniques over legacy hyperlinking. This is one of the first steps required to start leveraging modern web application architecture. The problem is not limited to just mobile web or web sites, it seems to carry through to many native apps as well. So adopting this strategy for any touch-first application can be very beneficial.