Nowadays, websites are not only be accessed by computers with a large screen. They were mostly accessed via mobile devices such as tablets and smartphones that relatively have smaller screen size. Almost every website has their different style and visual appearance concerning content and information delivery.
Even though they were visually looked different, they were mostly designed and developed by using one of one column, two columns, or three columns layout. The way to properly deliver content and information on a smaller screen size becomes a challenging matter. Responsive Web Design approach allows a single web page to be differently visualized based on the screen size of the accessing device. Such layout changing may affect the amount of information to be displayed on the screen, hence affecting the effectiveness and efficiency of information delivery in a web page. This study compares the effectiveness and efficiency of a web page that is being displayed on a computer screen, tablet, and smartphones.
How the implementation of Materials Design Guidelines and User-Centered Design approaches in the design process may affect the effectiveness and efficiency of content and information delivery of a web page on smaller screens were also evaluated and presented. This research shows that User Centered Design and Material Design Guidelines improve the effectiveness and efficiency of content delivery on both tablet and smartphone. Materials Design Guidelines provide better usability improvement than User Centered Design approach for the smartphone screen regarding content delivery efficiency for web pages designed in three columns layout.
In Responsive Web Design (RWD), the layout of a single web document in can be more flexibly made. When a responsive web is well implemented, it can improve the overall user experience. Responsive web design is probably the best solution to develop custom solutions in delivering information to a broader range of users and devices for a better user experience in web. It is true that information and content delivery of a web page on a device with smaller screen size would limit the number of content that is being displayed, hence reducing the effectivity and efficiency of information delivery.
However, the drop in the usability of content delivery efficiency and effectivity can be reduced by utilizing Material Design Guidelines (MDG) and User-Centered Design (UCD) approach in the transformation process of web page content layout to adapt smaller screen size. However, this research shows that the effectivity and efficiency of information delivery of web pages that are being displayed on smaller screens, e.g., tablet computer and smartphone screen, could be improved by using MDG and UCD approaches.
Both methods yield a slightly different amount of usability improvement on a tablet and smartphone screen. Web page layouts, which are designed to be displayed on the tablet computer and smartphone screen that are designed using UCD, tends to yield better usability than MDG concerning the effectivity and efficiency of information delivery on all the observed web page layouts.
