Challenges in Interaction Design for Mobile Web : Cariblogger.com

Human Computer Interaction (HCI) is one of the most important key elements in human and computer communication interaction. During the early days of HCI evolution, the interaction between human and computer was not user-centered and only focused to ensure humans are able to operate the computers to complete any given task. Thanks to the rapid development of technology between human and computing, HCI has expanded enormously in the early 1980s. While computing has changed significantly; mobile and ubiquitous communication networks span the globe, and technology has been integrated into all aspects of our daily lives [1]. With the development and widespread use of computer network technologies such as the Internet, HCI have move towards a new stage which is characterized by network and social design [1],[2].

World Wide Web is the premier applications on the global Internet with its key task to search for information using a search engine [3] and with the combination of mobile devices, internet and web technologies; mobile web have emerged to become the all-in-one personal assistant and information resources library for the modern community. Mobile web can be defined as web pages which are written in markup languages like CHTML, XHTML and WML, designed for, or particularly suitable for, consumption on mobile wireless devices such as cellular phones [3]. Since mobile devices with high technology specification now becoming a common marketing strategy and social attraction, data plan for internet access is no longer a luxury. Most of the latest smartphones need internet access to support and operate its application such as social networking apps.

Although it may look and sound simple in both logical and practical views, designing a good HCI design for mobile web is not an easy task. In order to achieve an effective and responsive HCI design for any mobile web or services, the designers need to have an outstanding knowledge and mature experience of the design principles, usability, capability and maintenance management of various kinds of mobile devices and web services to fully understand the behavior of its users.

The focus on HCI is now complemented by a focus on human activities interaction mediated by computer and network technologies [1],[2]. However, the ultimate goal of HCI research is still centered on how to design the computer to help people complete the necessary tasks more safely and efficiently [4].

Problem Statement

Mobile devices can be considered as the new intelligent computer assistant in the modern society. People use mobile devices such as Smartphones and Tablet to read email, surfing on the go, store documents, hosting services, personal planner, work organizer and many other purposes. However, in mobile computing environments, mobile devices are constrained with limited functionality such as small browser screen, low bandwidth speed, limited computing power and many more which may restrict the services provided for mobile web surfing [5],[6]. Since most of current web pages were fully optimized for large screen desktops, physical constrains existed in a mobile devices will forced the content to scrambled in a smaller screen resolution. Plus, content loading especially for images and videos will be extremely slow in mobile web. These are few from many turning point examples on how mobile web could contribute to poor user experience and satisfaction factor while accessing any web content.

With the increased coverage of high-bandwidth wireless networks, and the availability of hand-held devices to browse the web over these networks, the mobile web is expected to become even more important in the future [3]. Thus, it was important to take in our considerations to re-look and reconsider HCI design to at least reduce most of the constraints available in mobile web development and environment.

Interaction Challenges

There are many challenges which need to be clarified and overcome in the effort to improve mobile web?s interaction design. In this chapter, we will discuss six examples of current challenges in providing an effective mobile web interaction.

A. Types of Mobile Devices	The first challenge in providing good HCI design in mobile web is the types of mobile devices itself. There are different types of mobile device available in the market which comes with disparate computing system, hardware specification, sizes and many others. In order to provide an effective mobile web environment, a web page must be designed to fits and work perfectly in all types of mobile devices available in the world since different types of devices comes with different capabilities which can be influenced by both hardware and software specifications.
B. Smaller Screen Resolution	A different type of device comes with different sizes of screen resolution. Since most of current web pages were optimized for larger screen, web content in mobile will be rendered to fit current screen resolution which will result to poor and low visual appreciation and experience. Although current new mobile devices have come out with a larger screen and can display desktop websites content perfectly, it is still not an appropriate solution since user needs to zoom in and out to make the content visible. Moreover, user needs to perform numerous operations including a series of time-consuming and tiring scrolling through an entire page to view their interested content [5].
C. Browser Compatibility	Designing HCI for mobile web is a hectic job when it comes to browser rendering and compatibility. Since all browsers have different rendering engine, each of web pages need to be assigned or coded with a specific script to force web content to be rendered according to its original design. However, to reduce the severity of this problem, web designers must avoid from building non-standard web syntax or language and need to follow the latest specification released by the World Wide Web Consortium (W3C).
D. Navigation Menu	Navigation menu in mobile web is one of the most crucial elements in any website development. Designing a responsive and intuitive navigation menu is quite a challenge since a mobile web will be viewed with in a smaller screen. Designers need to come out with a good content structure and management to ensure that the viewers will not lost in navigation. Wang and Sajeev [8] suggested that information for larger screen can be well displayed in a smaller screen by doing segmentation of information into many small presentation units to fit and effectively organize the details into the small screen of mobile devices with attention to help users to easily navigate from one screen to another. In recent web development, web developers have listed out few options which can be considered as a creative solution to organize navigation menu in mobile web. These options can be seen used in current mobile application such as expanding menu, tabbed menu and side menu.
E. Images and Videos	Images and videos are important to provide, represent and visualize information context. However, mobile devices? graphical presentations such as images, diagrams, maps, drawing and logos is still quite restricted compared to desktop computers [7]. Large images and heavy videos which are dedicated to be viewed in desktop screen will obviously wasting users? mobile bandwidth. Even though, downscaling and compression could be seen as one of the best solution; the compressed end product may lose details and thus may affect its context information and inadvertently resulted to poor user browsing experience. In a research study done by Rosenbaum et al [10], their findings indicated that vector images are more suitable for presentation of large graphical content on small mobile device since it can offer better quality especially for scaling operations and faster to load. Author believe that there should be more similar studies related to web images and video compression should be conducted to ensure the possibility to improve large graphical content in future mobile web development.
F. Loading Time	Mobile devices do offer mobility in connection assessment. However, the connectivity are known to be unstable and intermittent since most of mobile devices are built in smaller hardware capacities such as slow network speed and low bandwidth. Thus, mobile web need to be designed and developed to support intermittent connectivity by keeping page size small to fasten its loading time. This can be achieved by adapting any good web development practice and recommendations by removing unnecessary code, optional tags or compressing the embedded scripts to reduce web resources size.

Recent Works

Although there were many approaches in providing a better user experiences, most of them are adaptive solution focusing more in creating different set of website design version to suits both larger and smaller screen which led to different view and does not give the same look and feel of the original desktop web site [6],[11].

Guirguis et al [6] also have proposed a prototype model based on Joomla CMS as a case study which offers browsing adaptation, media adaptation and use a smart technique with the template engine to minimize the processing overhead and reduce the amount of transferred data over a wireless channel to facilitate the web content production for both desktop and mobile web users without creating two versions of website.

In recent web development, Marcotte have come out with a theory and practice of Responsive Web Design (RWD) in an article in A List Apart [12]; a web design community website with the special interest in web standards and best practices. RWD has created a strong foundation in web design evolution by focusing on the development of creating a responsive web design which are able to adapt, response and overcome most the mobile web constrains discussed above which is types of devices, screen sizes and browser compatibility.

RWD can be considered as a successful approach to utilize web design structure using CSS media queries to provide an optimal viewing experience from desktop PC to mobile devices. Currently, there are many RWD framework have been created and widely used to support and provide responsive web design such as Twitter Bootstrap [13], Skeleton [14], Foundation Zurb [15], Gumby [16] and others.

Summary

Mobile browsing has many limitations originating from its physical design [11] resulting to poor user acceptance and experience in accessing web content in mobile web. However, huge potential in mobile web need be to fully explored by first eliminating existing constrains and interaction challenges. This is where HCI fundamental and design principle comes into action. While there are several issues in mobile web can be tackled using numbers of existing approaches discussed in chapter IV, there are still other problems such as graphical images sizes and loading time which need to be explored.

REFERENCES
[1] Rogerio DePaula,?A new era in human computer interaction: the challenges of technology as a social proxy,? in Proceedings of the Latin American conference on Human-computer interaction (CLIHC ?03). ACM, New York, NY, USA, 219-222.
[2] Liam J. Bannon,?Re-framing HCI: from human-computer interaction to human-centred interaction design,? in Proceedings of the 9th ACM SIGCHI Italian Chapter International Conference on Computer-Human Interaction: Facing Complexity (CHItaly), Patrizia Marti, Alessandro Soro, Luciano Gamberini, and Sebastiano Bagnara (Eds.). ACM, New York, NY, USA, 17-18 2011.
[3] Jindal, A.; Crutchfield, C.; Goel, S.; Kolluri, R.; Jain, R., ?The mobile web is structurally different,? INFOCOM Workshops 2008, IEEE , vol., no., pp.1,6, 13-18 April 2008
[4] LiuXiaoHui, Interaction Design? Beyond Human-Computer Interaction, Beijing Electronics Industry Publishing House, 2003.
[5] Yunpeng Xiao; Yang Tao; Qian Li, ?A New Mobile Web Presentation with Better User Experience,? Networks Security, Wireless Communications and Trusted Computing, 2009. NSWCTC ?09. International Conference on , vol.1, no., pp.137,141, 25-26 April 2009
[6] Guirguis, S.K.; Hassan, M.A., ?A smart framework for web content and resources adaptation in mobile devices,? Advanced Communication Technology (ICACT), 2010 The 12th International Conference on , vol.1, no., pp.487,492, 7-10 Feb. 2010
[7] Huang, Kuo-Ying. ?Challenges in human-computer interaction design for mobile devices,? in Proceedings of the World Congress on Engineering and Computer Science, vol. 1, pp. 236-241. 2009
[8] L. Wang and A. S. M. Sajeev, ?Roller interface for mobile device applications,? in Proceedings of the Eight Australasian Conference on User Interface, 2007, pp. 7?13.
[9] Mark Dunlop and Stephen Brewster,?The Challenge of Mobile Devices for Human Computer Interaction?. Personal Ubiquitous Comput. 6, 4 (January 2002), 235-236.
[10] R. Rosenbaum, H. Schumann, and C. Tominski,?Presenting large graphical contents on mobile devices ? performance issues,? in Proceedings of IRMA?04, 2004.
[11] Chen-Hsiang Yu and Robert C. Miller,?Enhancing mobile browsing and reading,? in CHI ?11 Extended Abstracts on Human Factors in Computing Systems (CHI EA ?11). ACM, New York, NY, USA, 1783-1788.
[12] Marcotte, Ethan (2010, May 25). ?Responsive web design?. A List Apart.
[13] M.Otto and J.Thornton (2011, August). Twitter Bootstrap [Online]. Available: http://twitter.github.com/bootstrap/
[14] Foundation Zurb. [Online]. Available: http://foundation.zurb.com/
[15] Skeleton. [Online]. Available: http://www.getskeleton.com/
[16] Gumby. [Online]. Available: http://gumbyframework.com/

Source: http://cariblogger.com/2013/04/challenges-in-interaction-design-for-mobile-web/

brazil usps Dick Van Dyke pro bowl victoria azarenka Royal Rumble 2013 senior bowl