Introduction OBILE e-commerce is growing exponentially. The Internet is no longer bound to desktops and wired connections. Today it is possible to use mobile devices such as the iPhone, Blackberry and Android-based phones to do purchases online. Ecommerce retailers have started using this advantage and have developed content and delivery mechanisms for this new platform. Many of these retailers already have an online store for a personal computer environment and need to develop a new platform for mobile devices. A possible alternative approach is the development of a cross-platform e-commerce website. The scope of this research was to study usability issues that traditional e-commerce websites generate when used in an environment with multiple devices that have different screen sizes and web browsers. Traditional websites are defined as websites that have been developed for personal computers, such as laptops and desktops. The focus of this research is on e-commerce websites, which are used in a business-to-consumer relationship, also known as online stores or web shops. Devices included in this research are smart phones, tablets, laptops and desktops. The emphasis is on the usability issues generated by the user interface of these e-commerce websites. An e-commerce website consists of a multiple tier architecture. Excluded from this research are the usability issues caused by other tiers than the presentation layer. The overall aim of this study was to identify Human-Computer Interaction (HCI) design methods and techniques for the development of cross-platform ecommerce websites that can be used on multiple devices with different screen sizes and web browsers. These HCI design methods and techniques have to address the usability issues that can be found when using traditional websites in a cross-platform environment. # II. # Research Design/Methodology a) Case Study Cross-Platform user Experience The focus of this study was on the user interface to determine characteristics and the current issues of a given website when used on different devices. The evaluation of Amazon.com was based on the theory is developed by [1], which describes a framework for developing cross-platform applications. The framework is based on three key elements: composition, continuity and consistency. All three elements were used as criteria for the evaluation of Amazon's online B2C services. Sources of information were reports provided by the company Amazon, observations and expert reviews. # b) Case Study E-commerce Features The second case study was conducted to determine the features that are required for an ecommerce web site to better understand the crossplatform service composition as discussed in the first case study. The features were based on the theory developed by [2]. This case study focused also on determining a common page layout for e-commerce websites. The Amazon website was compared with four other online stores, whose e-commerce websites have been evaluated to determine which features they have in common. The method used for this comparison is a ( D D D D D D D D ) heuristic evaluation of five e-commerce sites. All companies are online retailers selling fast moving consumer goods. ? Apple (apple.com) : producing electronic consumer goods; ? QVC (qvc.com) : home shopping TV channel with an online store; ? JC Penning (jp.com) : department store; ? Barnes & Noble (bn.com) : bookstore; ? Amazon (amazon.com) : online retailer. # c) Prototype Cross-Platform E-commerce Website A prototype was designed to address the findings of both case studies. The selected design technique for the prototype is responsive web design. HCI principles defined by [3] and [4] are being used for this design. Methods that were used for the development of the prototype were based on the theories developed by [5] and [6], using Concur Task Tree (CTT) and State Web Charts (SWC) notation. The main section of the website design was based on the visual principles: complexity and order. Deng and Poole (2012) argue that the best result for a successful ecommerce website is based on a high degree of order and a moderate complexity. The prototype had to support the tasks that were being executed during interviews. The tasks were based on a limited set of features, which represented all the different functionalities of the website according to the 80/20 rule as defined in [7]. The prototype had to be able to execute the online shopping tasks. Table I shows an overview of the tasks and how they relate to the design of the prototype. The user interface is normally part of a multi-tier architecture in the real world where different layers are used for transactions, databases and so forth. This research focused only on the user interface itself and therefore no interactions with other layers were implemented. As a result, the search functionality and the actual user registration have not been supported. Breaking points are crucial in the development of Figure 1 : Activities that you can perform in an online store responsive web designs. Determining how many breakpoints are required is depending on the layout of the website. An iterative method has been used to determine the amount of breakpoints for the layout of the cross-platform e-commerce website. The first iteration starts with one breakpoint. The case study highlighted that websites without breaking points become unreadable for screen sizes that are used for smart phones. The first breakpoint is 768 pixels. The reason to select this point is the fact that the first and second generations of iPads have screen sizes of 768 pixels by 1024 pixels. Any device with smaller screen size than the first and second generation of iPads can be considered a smart phone. Reducing the screen size to less than 786 pixels can help identify other breakpoints. After identifying the first break point a HTML template was created that served as a basis for all the web pages for the prototype. Each web page is a copy of the template plus some additional features required for that specific page. # III. Evaluation and Analysis of Results # a) Case Study Evaluation A survey has been conducted to analyze the case study. The questionnaire served two goals. The first goal was to gain feedback from people about the user context in which they use e-commerce websites. The second goal was to understand which of the following aspects are important for cross-platform ecommerce website design: composition, continuity and consistency. Participants were recruited amongst friends and colleagues plus the social networks FaceBook, LinkedIn, Yammer and an online community from the University of Liverpool to conduct a survey. In total, 39 people completed the survey. Three sets of statements were asked in relation to cross-platform composition, continuity and consistency. Participants had to answer them with true or false. The first set focused on statements related to the composition of a crossplatform e-commerce website. The results are shown in The statements about the composition suggest that the majority of the participants would like to perform the same tasks on every device. Another observation is that the uses of device features like a camera and especially a microphone is not a hard requirement for cross-platform e-commerce websites. One of the reasons can be found in the case study where the camera and microphone features were tested. The noise level was considered too high in, for example and the store and barcode scanning only makes sense when you are close to the physical product. Even when you are close to the product, the store puts its own barcodes over the original codes, hence that this feature did not work anymore. The second set of statements focused on continuity. Fig 2 shows the responses. The results suggest that the participants like to have their data available on all devices and the majority likes to Based on the results, the conclusion can be drawn that the participants find the ease of use more important than the aesthetics of a website. The results do not show whether a website has to be exactly the same on every device or can be slightly different. The results of the questionnaire are in line with the case study when it comes to continuity and consistency. They differ from a composition of the features perspective. During the case study, a traditional website and a native app were used and both had different features. The participants in the questionnaire preferred that the available features were the same for every device. The look and feel of the online store b) Heuristic Evaluation of Prototype The heuristic evaluation of the prototype took place in two steps. The first step was to validate the code using the Markup Validation Service and CSS Validation Service that has been made available by [8]. The prototype passes the Markup Validation and generated error during the CSS Validation. Main reason why it did not pass is because the CSS validation is using browser specific language. This is the trade off for a cross-platform application that needs to support multiple devices and browsers. The second step was to test the prototype in different web browsers, with device emulators and on physical devices. The prototype works well in portrait mode and meets the basic requirements when it comes to web browsers and code validation. It does not display properly in landscape mode. The decision was made not to fix the landscape orientation issue in a second iteration. At this point, it is unknown what the user preference is for using applications on smart phones in relation to the orientation. The positions of the buttons and text on the device are made for portrait orientation. Furthermore, the screen to unlock the device and the home screen are in portrait orientation and forces users to start in this position. This suggests that the portrait orientation is the "natural" orientation in the eyes of the manufacturers. On the other hand, certain applications perform better in landscape orientation, such as applications to watch videos or playing games. # c) Information Architecture The prototype has been verified against the information architecture. This was done by comparing the actual website to the navigation model. Links and buttons had to be on the expected pages. Figure 4 demonstrates that all links going out from the home page need to be made available. usability test was to generate concerns regarding the user interface. These concerns could be used to refine the design during future research activities. Nielsen (cited in [7]) suggests using the following formula to determine the percentage of usability problems that can be identified by users. # d) Prototype Usability Test # N=1-(1-L)n Where: N = Percentage of problems found L = proportion of usability problems found by a single participant. 31% as suggested by Nielsen n = number of user Five participants were recruited for interviews. They were able to identify 85% (=1-(1-0.31)5) of the usability problems. All participants had online shopping experience and were familiar with smart phones, tablets and personal computers. Two of them were IT experts. All five users also responded to the survey. The usability tests were conducted in the office or at home because the survey highlighted that these are the locations where people shop online. Participants in the usability test had to execute the following simple tasks using the prototype on their personal smart phone and PC. First all tasks were executed on their PC and then on their smart phone. They were observed while executing the following tasks and afterwards interviewed. # ? Sign up for a new account; ? Find the price of a product; ? Find why people are charged sales tax on Internet orders; ? Go to Twitter to post a product review; ? On your mobile devices: call customer service. All the participants were positive about the simplicity of the prototype site. It provided them with a clear overview and was readable on all devices. Three of them pointed out that they liked the consistent color scheme. Their overall impression of the website was good and indicated that they would use it again if it became a real web store site. # i. Website Layout The test also highlighted three problems in usability. The first problem is related to the structure of the website. The layout is based on a model based on a header, main section and footer. The participants did not find the footer easily when they were using their smart phones. They missed an indication that more information was available at the bottom of the page. The website shows a scroll bar when visited with a PC, indicating that more information is available at the bottom. # ii. User Interaction with Smart Phone The second problem is related to input mechanisms for the interaction between the smart phone and human beings. Four of the participants tried to swipe between the left side navigation and the main page. Participants explained that they expected swipe functionality because this would be more intuitive on a smart phone. This functionality was not available in the prototype. # iii. Navigation Transformation The third problem is related to the navigation transformations, and influences the ease of navigation. The menu bar in the header changed into a menu button. Two participants had difficulties with finding the product catalog on their smart phones that became visible after clicking on the menu button. Potential future customers do not see the product catalog immediately when they visit the site for the first time with their smart phones. Hiding the product catalog behind a button takes away the information about which products are being sold. In line with the above observation is the feedback that was received about hiding links. If first time visitors had used their smart phone then they would not have known that more information was available compared to first time visitors using devices with a larger screen. This suggests that all features have to be available on all devices. Additional feedback was received about search functionality during the usability test. This was the starting point for four participants to find the requested information. Furthermore, all participants indicated that it would be nice if the website would be able to offer product filters to minimize the search results (for example, price range). IV. # Conclusions The aim of this study was to identify Human-Computer Interaction (HCI) design methods and techniques for the development of cross-platform ecommerce websites that can be used on multiple devices with different screen sizes and web browsers. These HCI design methods and techniques had to address the usability issues that can be found when using traditional websites in a cross-platform environment. The study demonstrated that e-commerce websites could be used on multiple devices with different browsers by combining responsive web design with off-canvas layouts and HCI navigation transformations. Using this combination can solve usability issues found in traditional e-commerce websites. A case study related the usability issues to a theoretical framework, which consists of three categorizations: composition, continuity and consistency. Composition defines that the tasks should adapt to the user context. Identified usability issues were readability and tasks should be dependent on the user context. The evaluation of the prototype demonstrated that the readability issue can be solved with responsive web design but the task distribution shouldn't take place. Every device should offer the same features when it comes to e-commerce websites because they are only used in locations, which don't affect usability. The questionnaire confirmed that people like to visit ecommerce websites at home. Continuity describes that an amount data has to be available on every device. Consistency means that the look and feel is the same across multiple devices. The case study highlighted the fact that consistency is hard to maintain when using device specific applications and websites. Resolving this issue was achieved by developing a single website as a prototype that adapts to the user context. The development of the prototype was based on the evaluation of existing e-commerce websites. A case study was used to evaluate the available features and to define a common layout. Two groups of features were identified: one related to the purchasing process and another related to providing additional information about the This was used as input for the design phase. The identified features were transformed into a task model, followed by a navigation model and finally into a conceptual design for the prototype. During the design process, the decision was made to make a difference in the available features depending on the device. The questionnaire and the feedback on the prototype showed that users like to have all features available on all devices instead of a differentiation per device. Furthermore, the decision was made to transform the horizontal navigation menu into a left navigation fly-out menu. The evaluation of the prototype demonstrated that users had difficulties with understanding the function of the menu button to find the product catalog. The chosen layout in the design phase for the prototype was based on the common layout, which was identified by the case study. It was based on a header, main and footer section. Participants had difficulties with finding the footer on the smart phones. # a) Usability Guidelines for Cross-Platform E-Commerce Websites Based on the findings of this research, five usability guidelines for cross-platform e-commerce applications are recommended. They have a clear relevance to websites that are developed for multiple devices with different screen sizes and web browsers. Some of the guidelines can be applied to websites designed for a single type of device. # b) Identify user's needs The design phase should start with understanding the tasks that users need to execute. Ecommerce websites have primary tasks and secondary tasks. The primary tasks relate to the purchasing process and the secondary tasks provide additional features to the users. The tasks model will translate into a navigation model and finally into a conceptual design. # c) Be Context Aware The device itself and the environment in which users execute their tasks define the context. Devices like smart phones and tablets have a smaller screen size compared to laptops and desktops. The environment is defined by the locations where the users prefer to shop online. The design of a cross-platform website has to fit in different contexts of use. Usability testing should be performed in every context. d) Offer all functions on every device It is unknown in which context the users will access the website for the first time. To make sure users have the best experience in any context, it is recommended that all tasks can be executed on every device. Users need to have immediate visibility on product information when they visit the web site. # e) Design Fluid Websites The website has to adapt to the context to make sure it is readable and easy to navigate. A fluid website has this ability. It is based on a grid, which is able to respond to different devices. Images and typography resize depending on the used screen sizes. Designers should use navigation transformations to create a basic layout for devices with a smaller screen. # f) Use device specific input mechanisms Every type of devices has different ways for interaction. Some devices use a touch screen and others a keyboard and mouse. Users should be able to use device specific features to navigate intuitively through the website to increase the user experience. Designers should not use device specific features to introduce new tasks for a specific device type. ![Fig 1. ](image-2.png "") ![Framework for Cross-Platform E-Commerce Website Development for Multiple Devices and Browsers](image-3.png "EA") 2![Figure 2 : Data synchronization when using multiple devices for online shopping activities continue their tasks when switching devices. The third set of statements focused on consistency. Fig 3 summarizes the responses.Based on the results, the conclusion can be drawn that the participants find the ease of use more important than the aesthetics of a website. The results do not show whether a website has to be exactly the same on every device or can be slightly different.The results of the questionnaire are in line with the case study when it comes to continuity and consistency. They differ from a composition of the features perspective. During the case study, a traditional website and a native app were used and both had different features. The participants in the questionnaire preferred that the available features were the same for every device.](image-4.png "Figure 2 :") 4![Figure 4 : Information architecture versus the prototypeThe expectation of the usability test was to gain more insight from users on the acceptance level of cross-platform e-commerce websites regarding the ease of navigation. Interviews were conducted to analyze the usability of the prototype. The goal of the](image-5.png "Figure 4 :EA") 3![Figure 3 :](image-6.png "Figure 3 :") 1SectionFeatureTaskSign-up button;Register a new account;HeaderProduct categoryFind the price of anavigation;specific product;Submit form;Register a new account;MainBrowse productFind the price of acatalog;specific product;On mobile devices:Call customer serviceLink to telephonewith mobile device;Footernumber; Link to OrderingFind why people why people are chargedFAQ.sales tax on Internetorders. © 2013 Global Journals Inc. (US) ## Acknowledgment This research was conducted as part of an MSc in Computing Dissertation project at the University of Liverpool. * Cross-platform service user experience: a field study and an initial framework MWäljas KSegerståhl KVäänänen-Vainio-Mattila HOinas-Kukkonen 10.1145/1851600.1851637 Proceedings of the 12th international conference on Human computer interaction with mobile devices and services, MobileHCI '10 the 12th international conference on Human computer interaction with mobile devices and services, MobileHCI '10 2010. May 2012 21 * Categorizing web features and functions to evaluate commercial web sites: An assessment framework and an empirical investigation of Australian companies WHuang TLe XLi SGandha Industrial Management & Data Systems 106 4 2006 * 10.1108/02635570610661606 May 2012 16 * Responsive Navigation Patterns BFrost 2012. Jul 2012 9 * Multi-Device Layout Patterns LWroblewski 2012. Jul 2012 4 * Towards a User-Centered Design of Web Applications based on a Task Model MWinckler JVanderdonckt Proceedings of 5th International Workshop on Web-Oriented Software Technologies IWWOST 2005 5th International Workshop on Web-Oriented Software Technologies IWWOST 2005 2005 * State Web Charts: A Formal Description Technique Dedicated to Navigation Modelling of Web Applications', Interactive Systems. Design, Specification, and Verification MWinckler PPalanque 978-3-540-39929-2_5 (Ac- cessed: 10 Lecture Notes in Computer Science 2844 2003. Jun 2012 * The Resonant Interface, HCI Foundations for Interaction Design SHeim 2008 Pearson Education Boston * Markup Validation Service W3C 2012 * A Unifying Reference Framework for multi-target user interfaces GCalvary JCoutaz DThevenin QLimbourg Bouillon JVanderdonckt Interacting with Computers 15 3 8 2003. May 2012 * Responsive Web Design'. A List Apart EMarcotte 2010. May 2012 12 Accessed * Usability 101: Introduction to Usability JNielsen 2003. May 2012 * JNielsen RMolich CSnyder SFarrell 2000 E-commerce User Experience: Search [Online * ConcurTaskTrees: A Diagrammatic Notation for Specifying Task Models FPaterno CMancini SMeniconi 1997. Jun 2012 7 * Desktop-to-Mobile Web Adaptation through Custom-izable Two-Dimensional Semantic Redesign FPaternò GZichittella Human-Centered Software Engineering 6409 2010 * 10.1007/978-3-642-16488-0_7 May 2012 11 * Multi-Device Layout Patterns LWroblewski 2012. Jul 2012 4