\documentclass[11pt,twoside]{article}\makeatletter

\IfFileExists{xcolor.sty}%
  {\RequirePackage{xcolor}}%
  {\RequirePackage{color}}
\usepackage{colortbl}
\usepackage{wrapfig}
\usepackage{ifxetex}
\ifxetex
  \usepackage{fontspec}
  \usepackage{xunicode}
  \catcode`⃥=\active \def⃥{\textbackslash}
  \catcode`❴=\active \def❴{\{}
  \catcode`❵=\active \def❵{\}}
  \def\textJapanese{\fontspec{Noto Sans CJK JP}}
  \def\textChinese{\fontspec{Noto Sans CJK SC}}
  \def\textKorean{\fontspec{Noto Sans CJK KR}}
  \setmonofont{DejaVu Sans Mono}
  
\else
  \IfFileExists{utf8x.def}%
   {\usepackage[utf8x]{inputenc}
      \PrerenderUnicode{–}
    }%
   {\usepackage[utf8]{inputenc}}
  \usepackage[english]{babel}
  \usepackage[T1]{fontenc}
  \usepackage{float}
  \usepackage[]{ucs}
  \uc@dclc{8421}{default}{\textbackslash }
  \uc@dclc{10100}{default}{\{}
  \uc@dclc{10101}{default}{\}}
  \uc@dclc{8491}{default}{\AA{}}
  \uc@dclc{8239}{default}{\,}
  \uc@dclc{20154}{default}{ }
  \uc@dclc{10148}{default}{>}
  \def\textschwa{\rotatebox{-90}{e}}
  \def\textJapanese{}
  \def\textChinese{}
  \IfFileExists{tipa.sty}{\usepackage{tipa}}{}
\fi
\def\exampleFont{\ttfamily\small}
\DeclareTextSymbol{\textpi}{OML}{25}
\usepackage{relsize}
\RequirePackage{array}
\def\@testpach{\@chclass
 \ifnum \@lastchclass=6 \@ne \@chnum \@ne \else
  \ifnum \@lastchclass=7 5 \else
   \ifnum \@lastchclass=8 \tw@ \else
    \ifnum \@lastchclass=9 \thr@@
   \else \z@
   \ifnum \@lastchclass = 10 \else
   \edef\@nextchar{\expandafter\string\@nextchar}%
   \@chnum
   \if \@nextchar c\z@ \else
    \if \@nextchar l\@ne \else
     \if \@nextchar r\tw@ \else
   \z@ \@chclass
   \if\@nextchar |\@ne \else
    \if \@nextchar !6 \else
     \if \@nextchar @7 \else
      \if \@nextchar (8 \else
       \if \@nextchar )9 \else
  10
  \@chnum
  \if \@nextchar m\thr@@\else
   \if \@nextchar p4 \else
    \if \@nextchar b5 \else
   \z@ \@chclass \z@ \@preamerr \z@ \fi \fi \fi \fi
   \fi \fi  \fi  \fi  \fi  \fi  \fi \fi \fi \fi \fi \fi}
\gdef\arraybackslash{\let\\=\@arraycr}
\def\@textsubscript#1{{\m@th\ensuremath{_{\mbox{\fontsize\sf@size\z@#1}}}}}
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\def\abbr{}
\def\corr{}
\def\expan{}
\def\gap{}
\def\orig{}
\def\reg{}
\def\ref{}
\def\sic{}
\def\persName{}\def\name{}
\def\placeName{}
\def\orgName{}
\def\textcal#1{{\fontspec{Lucida Calligraphy}#1}}
\def\textgothic#1{{\fontspec{Lucida Blackletter}#1}}
\def\textlarge#1{{\large #1}}
\def\textoverbar#1{\ensuremath{\overline{#1}}}
\def\textquoted#1{‘#1’}
\def\textsmall#1{{\small #1}}
\def\textsubscript#1{\@textsubscript{\selectfont#1}}
\def\textxi{\ensuremath{\xi}}
\def\titlem{\itshape}
\newenvironment{biblfree}{}{\ifvmode\par\fi }
\newenvironment{bibl}{}{}
\newenvironment{byline}{\vskip6pt\itshape\fontsize{16pt}{18pt}\selectfont}{\par }
\newenvironment{citbibl}{}{\ifvmode\par\fi }
\newenvironment{docAuthor}{\ifvmode\vskip4pt\fontsize{16pt}{18pt}\selectfont\fi\itshape}{\ifvmode\par\fi }
\newenvironment{docDate}{}{\ifvmode\par\fi }
\newenvironment{docImprint}{\vskip 6pt}{\ifvmode\par\fi }
\newenvironment{docTitle}{\vskip6pt\bfseries\fontsize{22pt}{25pt}\selectfont}{\par }
\newenvironment{msHead}{\vskip 6pt}{\par}
\newenvironment{msItem}{\vskip 6pt}{\par}
\newenvironment{rubric}{}{}
\newenvironment{titlePart}{}{\par }

\newcolumntype{L}[1]{){\raggedright\arraybackslash}p{#1}}
\newcolumntype{C}[1]{){\centering\arraybackslash}p{#1}}
\newcolumntype{R}[1]{){\raggedleft\arraybackslash}p{#1}}
\newcolumntype{P}[1]{){\arraybackslash}p{#1}}
\newcolumntype{B}[1]{){\arraybackslash}b{#1}}
\newcolumntype{M}[1]{){\arraybackslash}m{#1}}
\definecolor{label}{gray}{0.75}
\def\unusedattribute#1{\sout{\textcolor{label}{#1}}}
\DeclareRobustCommand*{\xref}{\hyper@normalise\xref@}
\def\xref@#1#2{\hyper@linkurl{#2}{#1}}
\begingroup
\catcode`\_=\active
\gdef_#1{\ensuremath{\sb{\mathrm{#1}}}}
\endgroup
\mathcode`\_=\string"8000
\catcode`\_=12\relax

\usepackage[a4paper,twoside,lmargin=1in,rmargin=1in,tmargin=1in,bmargin=1in,marginparwidth=0.75in]{geometry}
\usepackage{framed}

\definecolor{shadecolor}{gray}{0.95}
\usepackage{longtable}
\usepackage[normalem]{ulem}
\usepackage{fancyvrb}
\usepackage{fancyhdr}
\usepackage{graphicx}
\usepackage{marginnote}

\renewcommand{\@cite}[1]{#1}


\renewcommand*{\marginfont}{\itshape\footnotesize}

\def\Gin@extensions{.pdf,.png,.jpg,.mps,.tif}

  \pagestyle{fancy}

\usepackage[pdftitle={A Framework for Cross-Platform E-Commerce Website Development for Multiple Devices and Browsers},
 pdfauthor={}]{hyperref}
\hyperbaseurl{}

	 \paperwidth210mm
	 \paperheight297mm
              
\def\@pnumwidth{1.55em}
\def\@tocrmarg {2.55em}
\def\@dotsep{4.5}
\setcounter{tocdepth}{3}
\clubpenalty=8000
\emergencystretch 3em
\hbadness=4000
\hyphenpenalty=400
\pretolerance=750
\tolerance=2000
\vbadness=4000
\widowpenalty=10000

\renewcommand\section{\@startsection {section}{1}{\z@}%
     {-1.75ex \@plus -0.5ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large\bfseries}}
\renewcommand\subsection{\@startsection{subsection}{2}{\z@}%
     {-1.75ex\@plus -0.5ex \@minus- .2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large}}
\renewcommand\subsubsection{\@startsection{subsubsection}{3}{\z@}%
     {-1.5ex\@plus -0.35ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\large}}
\renewcommand\paragraph{\@startsection{paragraph}{4}{\z@}%
     {-1ex \@plus-0.35ex \@minus -0.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\normalsize}}
\renewcommand\subparagraph{\@startsection{subparagraph}{5}{\parindent}%
     {1.5ex \@plus1ex \@minus .2ex}%
     {-1em}%
     {\reset@font\normalsize\bfseries}}


\def\l@section#1#2{\addpenalty{\@secpenalty} \addvspace{1.0em plus 1pt}
 \@tempdima 1.5em \begingroup
 \parindent \z@ \rightskip \@pnumwidth 
 \parfillskip -\@pnumwidth 
 \bfseries \leavevmode #1\hfil \hbox to\@pnumwidth{\hss #2}\par
 \endgroup}
\def\l@subsection{\@dottedtocline{2}{1.5em}{2.3em}}
\def\l@subsubsection{\@dottedtocline{3}{3.8em}{3.2em}}
\def\l@paragraph{\@dottedtocline{4}{7.0em}{4.1em}}
\def\l@subparagraph{\@dottedtocline{5}{10em}{5em}}
\@ifundefined{c@section}{\newcounter{section}}{}
\@ifundefined{c@chapter}{\newcounter{chapter}}{}
\newif\if@mainmatter 
\@mainmattertrue
\def\chaptername{Chapter}
\def\frontmatter{%
  \pagenumbering{roman}
  \def\thechapter{\@roman\c@chapter}
  \def\theHchapter{\roman{chapter}}
  \def\thesection{\@roman\c@section}
  \def\theHsection{\roman{section}}
  \def\@chapapp{}%
}
\def\mainmatter{%
  \cleardoublepage
  \def\thechapter{\@arabic\c@chapter}
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \pagenumbering{arabic}
  \setcounter{secnumdepth}{6}
  \def\@chapapp{\chaptername}%
  \def\theHchapter{\arabic{chapter}}
  \def\thesection{\@arabic\c@section}
  \def\theHsection{\arabic{section}}
}
\def\backmatter{%
  \cleardoublepage
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \setcounter{secnumdepth}{2}
  \def\@chapapp{\appendixname}%
  \def\thechapter{\@Alph\c@chapter}
  \def\theHchapter{\Alph{chapter}}
  \appendix
}
\newenvironment{bibitemlist}[1]{%
   \list{\@biblabel{\@arabic\c@enumiv}}%
       {\settowidth\labelwidth{\@biblabel{#1}}%
        \leftmargin\labelwidth
        \advance\leftmargin\labelsep
        \@openbib@code
        \usecounter{enumiv}%
        \let\p@enumiv\@empty
        \renewcommand\theenumiv{\@arabic\c@enumiv}%
	}%
  \sloppy
  \clubpenalty4000
  \@clubpenalty \clubpenalty
  \widowpenalty4000%
  \sfcode`\.\@m}%
  {\def\@noitemerr
    {\@latex@warning{Empty `bibitemlist' environment}}%
    \endlist}

\def\tableofcontents{\section*{\contentsname}\@starttoc{toc}}
\parskip0pt
\parindent1em
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\newenvironment{reflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemsep}{0pt}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\itshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{sansreflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\itemsep}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\upshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{specHead}[2]%
 {\vspace{20pt}\hrule\vspace{10pt}%
  \phantomsection\label{#1}\markright{#2}%

  \pdfbookmark[2]{#2}{#1}%
  \hspace{-0.75in}{\bfseries\fontsize{16pt}{18pt}\selectfont#2}%
  }{}
      \def\TheFullDate{2013-01-15 (revised: 15 January 2013)}
\def\TheID{\makeatother }
\def\TheDate{2013-01-15}
\title{A Framework for Cross-Platform E-Commerce Website Development for Multiple Devices and Browsers}
\author{}\makeatletter 
\makeatletter
\newcommand*{\cleartoleftpage}{%
  \clearpage
    \if@twoside
    \ifodd\c@page
      \hbox{}\newpage
      \if@twocolumn
        \hbox{}\newpage
      \fi
    \fi
  \fi
}
\makeatother
\makeatletter
\thispagestyle{empty}
\markright{\@title}\markboth{\@title}{\@author}
\renewcommand\small{\@setfontsize\small{9pt}{11pt}\abovedisplayskip 8.5\p@ plus3\p@ minus4\p@
\belowdisplayskip \abovedisplayskip
\abovedisplayshortskip \z@ plus2\p@
\belowdisplayshortskip 4\p@ plus2\p@ minus2\p@
\def\@listi{\leftmargin\leftmargini
               \topsep 2\p@ plus1\p@ minus1\p@
               \parsep 2\p@ plus\p@ minus\p@
               \itemsep 1pt}
}
\makeatother
\fvset{frame=single,numberblanklines=false,xleftmargin=5mm,xrightmargin=5mm}
\fancyhf{} 
\setlength{\headheight}{14pt}
\fancyhead[LE]{\bfseries\leftmark} 
\fancyhead[RO]{\bfseries\rightmark} 
\fancyfoot[RO]{}
\fancyfoot[CO]{\thepage}
\fancyfoot[LO]{\TheID}
\fancyfoot[LE]{}
\fancyfoot[CE]{\thepage}
\fancyfoot[RE]{\TheID}
\hypersetup{citebordercolor=0.75 0.75 0.75,linkbordercolor=0.75 0.75 0.75,urlbordercolor=0.75 0.75 0.75,bookmarksnumbered=true}
\fancypagestyle{plain}{\fancyhead{}\renewcommand{\headrulewidth}{0pt}}

\date{}
\usepackage{authblk}

\providecommand{\keywords}[1]
{
\footnotesize
  \textbf{\textit{Index terms---}} #1
}

\usepackage{graphicx,xcolor}
\definecolor{GJBlue}{HTML}{273B81}
\definecolor{GJLightBlue}{HTML}{0A9DD9}
\definecolor{GJMediumGrey}{HTML}{6D6E70}
\definecolor{GJLightGrey}{HTML}{929497} 

\renewenvironment{abstract}{%
   \setlength{\parindent}{0pt}\raggedright
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
   \textcolor{GJBlue}{\large\bfseries\abstractname\space}
}{%   
   \vskip8pt
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
}

\usepackage[absolute,overlay]{textpos}

\makeatother 
      \usepackage{lineno}
      \linenumbers
      
\begin{document}

             \author[1]{Coen de  Natris}

             \author[2]{Lelia  Livadas}

             \affil[1]{  University of Liverpool}

\renewcommand\Authands{ and }

\date{\small \em Received: 7 December 2012 Accepted: 3 January 2013 Published: 15 January 2013}

\maketitle


\begin{abstract}
        


The aim of this study has been to identify Human- Computer Interaction (HCI) design methods and techniques for the development of cross-platform e-commerce websites that can be used on multiple devices with different screen sizes and web browsers. The findings presented here are based on a theoretical framework consisting of three categorizations: composition, continuity and consistency. The framework was implemented with the aid of a case study and a prototype implementation that adapts to the user context. The development of the prototype was based on the evaluation of existing e-commerce websites. Identified usability issues were readability and the fact that tasks should be dependent on the user context. The overall results of this study are presented as a set of usability guidelines for cross-platform e-commerce, which highlight the importance of identifying the users? needs as well as the context in which they operate, by offering a common set of functionality between devices and using device specific input mechanisms.

\end{abstract}


\keywords{e-commerce, cross-platform development, mobile devices, human computer interaction, HCI, usability, website design.}

\begin{textblock*}{18cm}(1cm,1cm) % {block width} (coords) 
\textcolor{GJBlue}{\LARGE Global Journals \LaTeX\ JournalKaleidoscope\texttrademark}
\end{textblock*}

\begin{textblock*}{18cm}(1.4cm,1.5cm) % {block width} (coords) 
\textcolor{GJBlue}{\footnotesize \\ Artificial Intelligence formulated this projection for compatibility purposes from the original article published at Global Journals. However, this technology is currently in beta. \emph{Therefore, kindly ignore odd layouts, missed formulae, text, tables, or figures.}}
\end{textblock*}


\let\tabcellsep& 	 	 		 \par
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.\par
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.\par
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. 
\section[{II.}]{II.} 
\section[{Research Design/Methodology a) Case Study Cross-Platform user Experience}]{Research Design/Methodology a) Case Study Cross-Platform user Experience}\par
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 \hyperref[b0]{[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. 
\section[{b) Case Study E-commerce Features}]{b) Case Study E-commerce Features}\par
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 \hyperref[b1]{[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 )\par
heuristic evaluation of five e-commerce sites. All companies are online retailers selling fast moving consumer goods.\par
? Apple (apple.com) : producing electronic consumer goods;\par
? QVC (qvc.com) : home shopping TV channel with an online store;\par
? JC Penning (jp.com) : department store; ? Barnes \& Noble (bn.com) : bookstore; ? Amazon (amazon.com) : online retailer. 
\section[{c) Prototype Cross-Platform E-commerce Website}]{c) Prototype Cross-Platform E-commerce Website}\par
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 \hyperref[b3]{[3]} and \hyperref[b4]{[4]} are being used for this design. Methods that were used for the development of the prototype were based on the theories developed by \hyperref[b5]{[5]} and \hyperref[b6]{[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.\par
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 \hyperref[b7]{[7]}. The prototype had to be able to execute the online shopping tasks. Table  {\ref I} shows an overview of the tasks and how they relate to the design of the prototype.\par
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.\par
Breaking points are crucial in the development of Figure  {\ref 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. 
\section[{III. Evaluation and Analysis of Results}]{III. Evaluation and Analysis of Results} 
\section[{a) Case Study Evaluation}]{a) Case Study Evaluation}\par
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.\par
The second set of statements focused on continuity. Fig \hyperref[fig_2]{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.\par
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.\par
The look and feel of the online store b) Heuristic Evaluation of Prototype\par
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 \hyperref[b8]{[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.\par
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. 
\section[{c) Information Architecture}]{c) Information Architecture}\par
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 \hyperref[fig_3]{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 \hyperref[b7]{[7]}) suggests using the following formula to determine the percentage of usability problems that can be identified by users. 
\section[{d) Prototype Usability Test}]{d) Prototype Usability Test} 
\section[{N=1-(1-L)n}]{N=1-(1-L)n}\par
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.\par
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. 
\section[{? Sign up for a new account;}]{? Sign up for a new account;}\par
? Find the price of a product; ? Find why people are charged sales tax on Internet orders; ? Go to Twitter to post a product review;\par
? On your mobile devices: call customer service.\par
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. 
\section[{i. Website Layout}]{i. Website Layout}\par
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. 
\section[{ii. User Interaction with Smart Phone}]{ii. User Interaction with Smart Phone}\par
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. 
\section[{iii. Navigation Transformation}]{iii. Navigation Transformation}\par
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.\par
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).\par
IV. 
\section[{Conclusions}]{Conclusions}\par
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.\par
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.\par
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. 
\section[{a) Usability Guidelines for Cross-Platform E-Commerce Websites}]{a) Usability Guidelines for Cross-Platform E-Commerce Websites}\par
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. 
\section[{b) Identify user's needs}]{b) Identify user's needs}\par
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. 
\section[{c) Be Context Aware}]{c) Be Context Aware}\par
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. 
\section[{e) Design Fluid Websites}]{e) Design Fluid Websites}\par
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. 
\section[{f) Use device specific input mechanisms}]{f) Use device specific input mechanisms}\par
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. \begin{figure}[htbp]
\noindent\textbf{}\includegraphics[]{image-2.png}
\caption{\label{fig_0}}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{}\includegraphics[]{image-3.png}
\caption{\label{fig_1}EA}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{2}\includegraphics[]{image-4.png}
\caption{\label{fig_2}Figure 2 :}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{4}\includegraphics[]{image-5.png}
\caption{\label{fig_3}Figure 4 :EA}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{3}\includegraphics[]{image-6.png}
\caption{\label{fig_4}Figure 3 :}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{1} \par 
\begin{longtable}{P{0.049244332493702775\textwidth}P{0.31259445843828715\textwidth}P{0.4881612090680101\textwidth}}
Section\tabcellsep Feature\tabcellsep Task\\
\tabcellsep Sign-up button;\tabcellsep Register a new account;\\
Header\tabcellsep Product category\tabcellsep Find the price of a\\
\tabcellsep navigation;\tabcellsep specific product;\\
\tabcellsep Submit form;\tabcellsep Register a new account;\\
Main\tabcellsep Browse product\tabcellsep Find the price of a\\
\tabcellsep catalog;\tabcellsep specific product;\\
\tabcellsep On mobile devices:\tabcellsep Call customer service\\
\tabcellsep Link to telephone\tabcellsep with mobile device;\\
Footer\tabcellsep number; Link to Ordering\tabcellsep Find why people why people are charged\\
\tabcellsep FAQ.\tabcellsep sales tax on Internet\\
\tabcellsep \tabcellsep orders.\end{longtable} \par
 
\caption{\label{tab_0}Table 1 :}\end{figure}
 			\footnote{© 2013 Global Journals Inc. (US)} 		 		\backmatter   			 
\subsection[{Acknowledgment}]{Acknowledgment}\par
This research was conducted as part of an MSc in Computing Dissertation project at the University of Liverpool. 			  			  				\begin{bibitemlist}{1}
\bibitem[Nielsen et al. ()]{b12}\label{b12} 	 		\textit{},  		 			J Nielsen 		,  		 			R Molich 		,  		 			C Snyder 		,  		 			S Farrell 		.  		2000.  	 	 (E-commerce User Experience: Search [Online) 
\bibitem[ (2012)]{b2}\label{b2} 	 		\textit{},  		 \xref{http://dx.doi.org/10.1108/02635570610661606}{10.1108/02635570610661606}.  		 \url{http://dx.doi.org/10.1108/02635570610661606}  		May 2012. p. 16.  	 
\bibitem[ (2012)]{b15}\label{b15} 	 		\textit{},  		 \xref{http://dx.doi.org/10.1007/978-3-642-16488-0_7}{10.1007/978-3-642-16488-0\textunderscore 7}.  		May 2012. p. 11.  	 
\bibitem[Calvary et al. (2003)]{b9}\label{b9} 	 		‘A Unifying Reference Framework for multi-target user interfaces’.  		 			G Calvary 		,  		 			J Coutaz 		,  		 			D Thevenin 		,  		 			Q Limbourg 		,  		 			Bouillon 		,  		 			J Vanderdonckt 		.  		 \url{http://www.sciencedirect.com/science/article/pii/S0953543803000109}  	 	 		\textit{Interacting with Computers}  		2003. May 2012. 15  (3)  p. 8.  	 
\bibitem[Huang et al. ()]{b1}\label{b1} 	 		‘Categorizing web features and functions to evaluate commercial web sites: An assessment framework and an empirical investigation of Australian companies’.  		 			W Huang 		,  		 			T Le 		,  		 			X Li 		,  		 			S Gandha 		.  	 	 		\textit{Industrial Management \& Data Systems}  		2006. 106  (4)  p. .  	 
\bibitem[Paterno et al. (1997)]{b13}\label{b13} 	 		\textit{ConcurTaskTrees: A Diagrammatic Notation for Specifying Task Models},  		 			F Paterno 		,  		 			C Mancini 		,  		 			S Meniconi 		.  		 \url{https://sosa.ucsd.edu/teaching/cse294/winter2008/reference\textunderscore paper.pdf}  		1997. Jun 2012. p. 7.  	 
\bibitem[Wäljas et al. (2010)]{b0}\label{b0} 	 		‘Cross-platform service user experience: a field study and an initial framework’.  		 			M Wäljas 		,  		 			K Segerståhl 		,  		 			K Väänänen-Vainio-Mattila 		,  		 			H Oinas-Kukkonen 		.  		 \xref{http://dx.doi.org/10.1145/1851600.1851637}{10.1145/1851600.1851637}.  		 \url{http://doi.acm.org/10.1145/1851600.1851637}  	 	 		\textit{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. p. 21.  	 
\bibitem[Paternò and Zichittella ()]{b14}\label{b14} 	 		‘Desktop-to-Mobile Web Adaptation through Custom-izable Two-Dimensional Semantic Redesign’.  		 			F Paternò 		,  		 			G Zichittella 		.  	 	 		\textit{Human-Centered Software Engineering}  		2010. 6409 p. .  	 
\bibitem[Markup Validation Service W3C ()]{b8}\label{b8} 	 		‘Markup Validation Service’.  	 	 		\textit{W3C}  		2012.  	 
\bibitem[Wroblewski (2012)]{b4}\label{b4} 	 		\textit{Multi-Device Layout Patterns},  		 			L Wroblewski 		.  		 \url{http://www.lukew.com/ff/entry.asp?1514}  		2012. Jul 2012. p. 4.  	 
\bibitem[Wroblewski (2012)]{b16}\label{b16} 	 		\textit{Multi-Device Layout Patterns},  		 			L Wroblewski 		.  		 \url{http://www.lukew.com/ff/entry.asp?1514}  		2012. Jul 2012. p. 4.  	 
\bibitem[Frost (2012)]{b3}\label{b3} 	 		\textit{Responsive Navigation Patterns},  		 			B Frost 		.  		 \url{http://bradfrostweb.com/blog/web/responsive-nav-patterns}  		2012. Jul 2012. p. 9.  	 
\bibitem[Marcotte (2010)]{b10}\label{b10} 	 		\textit{Responsive Web Design'. A List Apart},  		 			E Marcotte 		.  		 \url{http://www.alistapart.com/articles/responsive-web-design/}  		2010. May 2012. Accessed. p. 12.  	 
\bibitem[Winckler and Palanque (2003)]{b6}\label{b6} 	 		‘State Web Charts: A Formal Description Technique Dedicated to Navigation Modelling of Web Applications', Interactive Systems. Design, Specification, and Verification’.  		 			M Winckler 		,  		 			P Palanque 		.  		 978-3-540-39929-2\textunderscore 5 (Ac- cessed: 10.  		 \url{http://dx.doi.org/10.1007/}  	 	 		Lecture Notes in Computer Science  		2003. Jun 2012. 2844 p. .  	 
\bibitem[Heim ()]{b7}\label{b7} 	 		\textit{The Resonant Interface, HCI Foundations for Interaction Design},  		 			S Heim 		.  		2008. Boston: Pearson Education.  	 
\bibitem[Winckler and Vanderdonckt ()]{b5}\label{b5} 	 		‘Towards a User-Centered Design of Web Applications based on a Task Model’.  		 			M Winckler 		,  		 			J Vanderdonckt 		.  	 	 		\textit{Proceedings of 5th International Workshop on Web-Oriented Software Technologies IWWOST 2005},  				 (5th International Workshop on Web-Oriented Software Technologies IWWOST 2005)  		2005.  	 
\bibitem[Nielsen (2003)]{b11}\label{b11} 	 		\textit{Usability 101: Introduction to Usability},  		 			J Nielsen 		.  		 \url{http://www.useit.com/alertbox/20030825.html}  		2003. May 2012.  	 
\end{bibitemlist}
 			 		 	 
\end{document}
