The Web has become a commonly used media to convey the information. In addition to conveying the information, a website is also used as an application and even become an information system. At the beginning of the trend of mobile device usage that can access the internet, the companies or information service providers use two different platforms in providing information services and applications on the internet, i.e. desktop and mobile. Initially, website owners provide several website versions to make website’s User Interface (UI) comply with different devices or different browser’s screen resolutions.
They usually create two versions of their websites which is the main one is targeting for desktop users and the other one is for mobile users. Hence the website designers and developers should be better in arranging their contents in such a way that the website can be well-used regardless the variations in user’s platforms, devices, and screen resolutions. Different browser’s resolution size between different devices, especially mobile devices, can lead to a design problem. The problem may occur when a web page is being accessed through a browser which its viewport is below the expected minimum width . This condition may cause critical links, components, as well as some other important information, which should have been presented to users, are being hidden. The needs to do vertical or horizontal scrolling will decrease the deliverable effect of certain values from the website. Moreover, it can reduce the overall website experience for their users . Since its introduction in 2011, responsive design has offered flexibility to adapt UI of a single website to handle different resolution range so that user on different devices can experience the same expected website design by using the HTML5 and CSS3 technologies .
A web page design is considered to be responsive if it uses these three points: a flexible grid, flexible images and media, and media queries. By using media queries, website designers can define certain resolution ranges as conditions to use certain CSS definitions called fixed breakpoints . That way, the designer can match which CSS definition will be applied to a given resolution that will create a better visual experienced for the website users. Nowadays, delivering contents and information towards a wider range of users and handheld devices become a primary need in businesses.
They treat mobile devices to differentiate, improve customer satisfaction, and engage more users towards them. Simple, innovative, and intuitive applications or tools yields to an enjoyable flexibility and increased productivity. Many people are using the Web and Internet to get almost on everything they need, e.g., news, product reviews, cooking recipes, and the like. But today, people are also using the Web to book hotels and flights on their future vacation plan or even buy and sell goods making the Web as a marketplace. They tend to access information and application on the Web by using whatever device they might have. It was ranging from a big and bulky desktop computer, laptop, tablet, to smaller mobile devices.
The differences in device’s screen force content provider to be able to deliver their contents to a broader possibility of consumer devices. However, developing one website version for each device screen resolution and every new device seems to be impractical. Websites come in a different number of column. The typical number of columns used in a web page is a single column page, two columns page, or three columns page. Sometimes it is necessary to make some adjustments to the web page layout when the website is accessed from devices with varying screen sizes or resolutions.
Good layout arrangement will attract users’ attention better. The layout arrangement itself become an important issue when a desktop website is accessed via tablets or smartphones. In a particular case, the use of smaller screen will certainly reduce application usability . It is caused by the differences of screen size between desktop computers, tablets, and smartphones that affecting the amount of information that is being displayed on the device’s screen at a time, hence impacting user’s productivity. User-Centered Design is a user-centric approach that focuses on user’s needs, behaviors, wants, and limitations in the software development process lifecycle. When end users were involved in the design process, they will help to reduce the lag in information system’s usability by focusing on making a product that fit user needs rather than forcing users to change their behavior to accommodate the product .
Material Design Guidelines (MDG) is a design language developed by Google in 2014 that provides best practices on how to put user perception and high level of accessibility into a mobile UI design. MDG allows a user to experience a unified experience across different platforms and devices regardless the screen size of all devices in the hope that users will get a better engagement, better UI/UX and cost-effective with the products . Both UCD and MDG offer a better user experience in using a product, hence making a product quality better. The quality of a product can be measured by its effectiveness and efficiency . The effectiveness of a product is one variable that determines the success of a product . In assessing software product usability, its effectiveness and efficiency of use need to be measured.
This research will try to describe how a web page layout transformation on a responsive web page may affect its usability. This study will also try to explain how UCD and MDG will improve the effectiveness and efficiency of content delivery of a web page when it comes to a tablet or smartphone screens. The effect of the implementation of User Centered Design (UCD) and Material Design Guidelines (MDG) in making a layout arrangement of a web page will be elaborated in this research. The arrangement of web page elements inside a web page layout will be targeting tablet and smartphone screens by referring to the MDG and UCD in the layout design process.