In a recent project, I was evaluating the design of a set of mobile web pages. The company had outsourced a new ecommerce section of their web site to a new company, and had asked the outsource company to replicate their current user interface. New features and pages were added while maintaining core design.
The outsource company did just that. They created a web site that was visually indistinguishable from the main site. But the user experience was demonstrably much worse than the main site.
The problem? The developers were following best practices for the regular web, but largely ignored the various best practices for coding found in, among other places, in my UI Design Guidelines for Mobile Web Development.I didn't get the chance to view their code (this is sometimes tough to come by for a user experience consultant), but the evidence is that they performed one or more of the following non-UI sins:
- tables as web layout, causing extra processor load
- percentage sizes for layout (table or CSS), causing extra processor load
- separate CSS, causing an extra http request and content that moves as different parts load
- images contained in CSS, causing yet another http request along with content movement
- large pages with possibly hidden elements, causing memory overflows
- complex CSS, with dozens or even hundreds of selectors, many unused, causing memory overflows and extra processor load
Although each of these does not touch the user interface, they have a profound effect on the user experience.
In the case in question, item transversal time grew by more than 800%. That is, pushing the down button caused the item highlight to move down, but up to 2 seconds later. Of course most folks just push down until the proper item is highlighted, which won't work for this system.
Further, page size was so large that back and home functions frequently failed, claiming that the page could not be displayed. So the only way to start over was to .... exit the browser. Obviously the browser design made this worse, but the largest problem remained in the web code.