As part of the recent enhancements to the Openwave
Mobile Applications Directory, we've developed a new set of test criteria
to ensure the quality of the XHTML based applications within the
directory. The criteria are laregely based on the
XHTML-MP Style Guide, and while not exhaustive serve to ensure not only reliablity for
applications, but also a baseline of usability.
The application criteria are broken down into the following
sections:
The criteria for Application Performance, Navigation, and Content Display apply for all pages/sites
whereas the criteria for images and forms would only apply on certain sites/pages
Application must NOT return "404" Responses on any link
Application must NOT return "500" Responses on any link
Application must NOT return "Compile Error" on any link
Application must NOT return "Page cannot be displayed"
Application must NOT time out
The above criteria are designed to ensure that there are not application level errors in mobile websites.
There are several conditions which can cause these errors, including bad links, unexpected input, application
server hiccups, and malfored http requests. It is up to your application to handle unexpected requests and
respond gracefully, rather than with the default HTTP error codes.
Every page must contain visible content
This is pretty much self explanatory. Even pages that preform an HTTP redirect should contain at least the link that is being redirected to in the event a browser does NOT support the meta-refresh tag
Every page must contain at least one obvious action (link, submit button, etc?)
Not all devices will render softkeys in a way that is visible to the end users. Therefore every page must have either a link or a submit button visible on the page (in addition to any sofkeys that may also be employed)
Text must be visible and legible
There are a number of factors to keep in mind with this criteria. First of all, in some instances,
using the <small> tag will caused text to be rendered in a font size that may be too small to read legibly. If color is applied to text via a style property, it should be a color that is visible in contrast to the background or image that the text may display on top of
Links must be visible both when idle as well as when active
Use caution when applying color both to links as well as to backgrounds. Some devices will not respect color applied to a link (other than the defaults) so if the background of a page is blue, links may not be visible
Title Attribute for page must NOT exceed 1 line in length
Some devices will wrap the contents of the <title> attribute of a page. This means that an extra line of display will be used for the title
Charicter entities must display properly (e.g. not  )
Character entities that are not properly escaped will simply render as text.
Application should display in local language whenever possible
Applications that are localized will have much more meaning to the end user and will generate more usage. Be sure to look at the http-accept-language header to get a hint for what
Content within table cells should word break in logical places (e.g. no 1 character lines?)
When using tables for content layout, absolute placement control is not always possible, and line breaks may occur in the middle of words for very small columns. Avoid building tables with many narrow columns.
Phone numbers must be dialable (e.g. using WTAI or tel:)
Whenever presenting a phone number to a user, ensure that it is dialable by using the <a href="wtai://wp/mc;5555551212">555-555-1212</a> type syntax
Content should optimze to use full display of device (e.g. don't send pages with breaks after 8 lines of text to a 12 line device)
When a device with a large display access your device, make use of the display as fully as possible. Avoid breaking content into default small chunks that require users to click on a "next" or "more" link more than absolutely necessary
Applications should use ordered lists to present navigation menus
Using orderd lists <ol> is a smple way to present lists in a way that are simple to navigate
for users and is efficient in terms of coding to provide visual guides for users
When using an ordered list for links, accesskey attribute must also be applied
The "accesskey" attribute will bind a key accelerator to the items in your numbered list.
This allows users to simply press the '7' key on the phone keypad to select the 7th link on your page
Navigation lists should NOT contain more than 9 items, with 10th item being 'More?'
Since the phone only has 10 keys on it, making lists 9 items long ensures every item has a key
accelerator associated with it, and the "more" link is always in the same location on every page
Whitespace must be inserted between each link (in form of a line break, etc?)
Some devices will not automatically insert space between links, resulting in links running
together without any visible separation
Pages more than 2 levels deep in an application should have a "home" or "main" link
(returning to the top level of the app)
Navigating back up through an application by repeatedly pressing the "back" key
on a phone may not be intuitive. Providing a simple way to get to the top level
of an application ensures that users do not become lost in the lower levels of content
Applications that require users to login should remember users when the return to the application
Remembering users increases usability and likelihood that they will return again and again. In most
cases users can be remembered by settting a cookie. Under certain circumstances such as with financial
applications, remembering users may not be desireable.
When collecting user input, appropriate format masks should be used (e.g. to force input mode to numeric)
This can be done by applying the -wap-input-format: style property to your input element.
<input style="-wap-input-format: NN\/NN\/NNNN" name="date" size="10"/>
No more than 3 radio buttons should be used in a single group (use select element for larger lists)
Instead of a list of <input type="radio" name="choice">, simply use a <select name="choice">
with a list of <options> this will take up less space on the display and provide a more usable
experience as it will reduce overall scrolling on your page
Options in a select element must not exceed one line in height
If you use long text within an <option></option>, the overall size of the select element
may grow to accommodate the maximum size needed to display any given element, using up white
space on the display even when the element is not active
Forms that require collection of multiple inputs should group inputs on pages (not place each on their own page)
This suggestion is counter to the WML recommendations, but since xhtml browser will render multiple form widgets on a
single screen, grouping inputs onto one or two pages does provide a better user experience.
When collecting user intput in a text field a description of the desired input should be provided (e.g. "MM/DD/YYYY")
Provide users with guidance of what type of input you expect to receive. Since local scripting is
lacking, there is no way to validate input before it reaches your application. Giving guidance can help
ensure that your application runs smoothly
Images must contain alt text
The alt attribute is a required attribute for the image tag. Some devices will fail to
display any content on the page if alt text is not specified for all images
Images must display
Be certain that the images sent are in a content type that is in the HTTP-ACCEPT header for the device
Width/Height attributes must always be assigned
By assigning the height and width attributes to an image, the browser is able to more efficently
layout the page even before the image arrives
Images should NOT exceed display width
Images wider than the display may be scrollable on some devices, on other deviecs they may get cropped,
and yet other devices may automatically re-scale the image.
When using Images as links, Sufficient space must be present so link activiation is visible
If images are used as links and no space is left between the images, there is no visual feedback for the
end user when a link is selected. Either place images in table cells, or place a non-breaking space between
each image/link
The test criteria listed above will evolve over time to include additional tests as information and knowledage about
application usability for XHTML-MP sites continues to develop. Familiarizing yourself with these criteria early in the
design process of your application will likely lead to a smoother QA process down the road and a better experience
for the users of your applications. If you've got any questoins or wish for clarification on any of the points above,
don't hesitate to drop the Openwave Developer Services team a line from our feedback form
