Mobile Web Applications: DESIGN FACTORS by: Vishal Y. Vaidya | www.UsabilityFactors.in | [email_address]

Mobile Web Applications : Design Factors As we know, there are several limitations. A recap! Mobile websites designs has its own limitations & need to be designed based on some specifications / best practices. Screen ‘Real Estate’ issues : resolution limitations as compared to desktops / notebooks / netbooks. Browsers: Various browser renders site differently on different devices. Hardware limitations: Processor speed, RAM, ROM, Form factor Expensive Data Usage : Data usage charges may be heavy. Connectivity issues: Bandwidth, Network reach. Limited Interaction possibilities: Less-friendly pointing device. Also see: Usability Factors in Mobile Applications

Screen ‘Real Estate’ issues : resolution limitations as compared to desktops / notebooks / netbooks.

Browsers: Various browser renders site differently on different devices.

Hardware limitations: Processor speed, RAM, ROM, Form factor

Expensive Data Usage : Data usage charges may be heavy.

Connectivity issues: Bandwidth, Network reach.

Limited Interaction possibilities: Less-friendly pointing device.

Mobile Web Applications : Design Factors 1. Semantic Markup: The way we design our code for conventional desktop-based web is NOT the same when it comes to the “mobile web”. The capabilities of the devices and the browsers it contains, has major impacts on the way content gets displayed. So, ideally, you should use a “clean & semantic” markup to make your site display in almost the same form on all the devices, without major difficulties for the end-user. If the code isn’t clean & semantic, the website may not look the same on all the target devices as it is expected to be & may create usability issues for the end-users, motivating them to leave the site as soon as they want. Clean, semantic markup is a ‘foundation to the usable mobile website’.

Mobile Web Applications : Design Factors 2. Separate Content from Presentation factor: Typical mobile web users are more keen on the information they like to see on the mobile websites, as their browsing behavior is mostly ‘information seeking behavior’. For such users, presentation is secondary , as compared to ‘ content being primary reason ’ behind the mobile web browsing. Users are using web on their mobile devices, generally for their immediate needs, like locating the nearest café or a Bank ATM available in the closest proximity. For such users, functionality or the content is more important than anything else. Considering this, along with a clean & semantic markup, a clear segregation of “Content” and “Presentation” is required. We can enable websites to reach users faster, with clean, valid markup and CSS for the presentation purpose .

Mobile Web Applications : Design Factors 3. Alternative Content – “ALT” tags: With more of ‘information-seeking behavior’ along with ‘pay-for-bandwidth’ scenario, users may not prefer to download images on their mobile browsers, as it saves download time & money for them. Such factors makes us prefer to provide an alternative content for all the images used across the website. Providing an “ALT” tag makes the application more useful for those who have disabled “load images”. In any case, for mobile web or desktop-based interfaces, you MUST provide the alternative content, to make your application “usable”.

Mobile Web Applications : Design Factors 4. Form Fields - Labels: Filling up form fields in the mobile browser is bit tough as compared to conventional desktop-based website forms. Entering information in the form field without knowing what it should be filled with, is literally impossible for the end-user. So to assist users, like ‘ALT’ tags for non-text content, form fields also needs to have “label”, that clearly defines the form field and instruct the users about the information required in the respective form field .

Mobile Web Applications : Design Factors 5. Navigation: Unlike desktop web, navigation elements on the mobile web applications are generally an “adaptation”, that suits mobile web environment at its best. Navigation design for desktop web and mobile web has different design considerations. Do not repeat the complete navigation on every page & reduce the links and keep only those which are relevant. Also, provide other ways to navigate the website, such as “Access Keys” and tap the hardware capabilities if you know the TG & their devices. Also see : Usability Factors in Mobile Applications

Mobile Web Applications : Design Factors 6. Use Heading tags – H1, H2, ….. : Devices have their own browsers & they render the same sites differently. In such cases, styling given to the text / content on the pages may not actually display as you desire. In such cases, heading tags like H1, H1, H3…..can help you to make the important headings, text to stand out & helps users to read the content effectively – as they tend to have a ‘scan-through’ behavior.

Mobile Web Applications : Design Factors 7. Environmental Factors & Color Contrasts: Designing websites for mobile devices has several considerations, including the environmental factors, such as lighting conditions . When someone who is using the application the day-light, he may not be able to use the application effectively, if the right color contrast is not created in the application design. Also see : Usability Factors in Mobile Applications Note: Compare these two screenshots. Readability is higher in the 1 st one.

Thank You! Your valuable suggestions / feedbacks are welcome. Please e-mail them at [email_address] About Author: Information Architect & Usability Analyst with Internet Media Solutions company, bc web wise