Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Â
Mobile Web Application: Design Factors
1. Mobile Web Applications: DESIGN FACTORS by: Vishal Y. Vaidya | www.UsabilityFactors.in | [email_address]
2.
3. 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â.
4. 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 .
5. 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â.
6. 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 .
7. 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
8. 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.
9. 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.
10. 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