Validation of Navigation Guidelines for Improving Usability in the Mobile Web
Total Page:16
File Type:pdf, Size:1020Kb
Accepted manuscript: Validation of navigation guidelines for improving usability in the mobile web. E. Garcia-Lopez, A. Garcia-Cabot, C. Manresa-Yee, L. de-Marcos, C. Pages-Arevalo. Computer Standards & Interfaces. 2017. Validation of navigation guidelines for improving usability in the mobile web Eva Garcia-Lopez*, 1, Antonio Garcia-Cabot1, Cristina Manresa-Yee2, Luis de-Marcos1, Carmen Pages-Arevalo1 1Computer Science Department, University of Alcala, Alcalá de Henares, Spain. 2Maths and Computer Science Department, University of Balearic Islands, Palma de Mallorca, Spain. 1Dpto Ciencias Computación. Edificio Politécnico. Ctra Barcelona km 33.1. 28871. Alcalá de Henares. Madrid. Spain. 2Ed. Anselm Turmeda. Ctra Valldemossa km 7.5. 07122. Palma de Mallorca. Islas Baleares. Spain. 1Phone: +34 918856836 *Corresponding author: [email protected] Validation of navigation guidelines for improving usability in the mobile web Abstract: Traditional navigation guidelines for desktop computers may not be valid for mobile devices because they have different characteristics such as smaller screens and keyboards. This paper aims to check whether navigation guidelines for Personal Computers are valid or not for mobile devices. To do this, firstly an evaluation was carried out by a group of advisors with knowledge in web design, and then empirical studies were conducted with real mobile devices and users. Results show that most of the traditional navigation guidelines are valid for current mobile devices, but some of them are not, which suggests that a similar process is necessary to validate traditional guidelines for mobile devices. The final result is a set of fifteen navigation guidelines for mobile web sites, from which eleven are totally new because they have not been previously suggested by any standard or recommendation for mobile web sites. Keywords: hyperlink; navigation; mobile device; usability guideline; experimentation 1. Introduction Hyperlinks, also known as anchors or <a> HTML tags, are the primary mode of navigation on the web [1]. They connect web objects in a web site and allow users to navigate from the current page to another site on the Internet [2, 3], thus allowing web designers to organize the data on web pages in different ways [4], according to the main purpose of the site or the target audience. 1 Accepted manuscript: Validation of navigation guidelines for improving usability in the mobile web. E. Garcia-Lopez, A. Garcia-Cabot, C. Manresa-Yee, L. de-Marcos, C. Pages-Arevalo. Computer Standards & Interfaces. 2017. Different techniques have been proposed for linking elements between web pages [5-7], but the most discussed have been access keys [8]. However, this method cannot be used on touchscreen mobile devices due to the fact that shortcuts are implemented using a XHTML attribute (called ‘accesskey’) that only works with 0-9, * and # keys of hardware keyboards [9], so they can only be used in a few current mobile browsers. However, when they work in a mobile browser, this alternative can be used in combination with hyperlinks because it can provide shortcuts to expert users, but in this case they have to be designed in such a way that they do not confuse non-expert users and encourage number pressing [5]. Anyway, users should always be able to navigate with hyperlinks when they are using mobile devices [5], and hyperlinks have been proved to be the easiest way to navigate in mobile web sites [6], so using them should be enough and more attention should be paid to their usability. Hyperlinks are one of the top 10 key factors influencing webpage design [10], and represent about 50% of web interactions [11]. On the other hand, the number of web users is increasing, as well as the number of mobile users, so studying the usability of hyperlinks is crucial in order to facilitate the Internet navigation, especially through these devices. According to Nakamoto [12], hyperlinks are highly suitable for improving user interfaces in smart devices, but studies carried out for Personal Computer (PC) interfaces about hyperlinks may not be applicable to this kind of devices because the number of hyperlinks displayed on a desktop PC within a single screen or page is higher than the number of hyperlinks that can be displayed on a mobile device [13]. Because of this, it is necessary to study the usability of hyperlinks in mobile devices separately from the usability of hyperlinks in PCs. 2 Accepted manuscript: Validation of navigation guidelines for improving usability in the mobile web. E. Garcia-Lopez, A. Garcia-Cabot, C. Manresa-Yee, L. de-Marcos, C. Pages-Arevalo. Computer Standards & Interfaces. 2017. There are two main factors to be studied about hyperlinks, which are complementary and influence the efficiency of navigation and, therefore, their usability: the design of links and the structure of links [14-16]. The former includes the appearance of links, such as their style or location on the web pages, as well as their content [17]; and the latter refers to how hyperlinks connect the documents on the web [18]. In this paper we focus on the visual aspects of the hyperlinks, so the literature review will address this topic. This paper shows a strict process of analysis and evaluation to contribute with guidelines for designing hyperlinks in mobile devices in order to improve their usability. This process consists of (1) an evaluation of usability guidelines for detecting which of the traditional navigation guidelines could be applied to mobile devices; and (2) empirical experimentation for validating these guidelines and proposing new or adapted navigation guidelines for mobile browsers. Section 2 presents the related work to this paper, Section 3 describes the first stage of the method carried out (i.e., selection of guidelines), and Section 4 explains the experimentation and results. Section 5 proposes the new guidelines about hyperlinks for mobile devices, Section 6 shows a discussion about our results compared to prior research and finally Section 7 exhibits the conclusions. 2. Background Usability of PC interfaces has been widely studied. There are published studies about different aspects such as formatting, contrast and color [19], line length [20], pictograms and icons [21] or scrolling [22]. However, the differences between PCs and mobile devices makes the interaction of both devices different, so usability may be influenced 3 Accepted manuscript: Validation of navigation guidelines for improving usability in the mobile web. E. Garcia-Lopez, A. Garcia-Cabot, C. Manresa-Yee, L. de-Marcos, C. Pages-Arevalo. Computer Standards & Interfaces. 2017. by the type of device used. This was suggested by several studies, which indicate that the small screen size of mobile devices may negatively influence effectiveness [23], efficiency [23-27] and satisfaction [28], which are in turn the metrics included in the definition of the term “usability” by ISO [29]. This section aims at compiling the guidelines and previous work concerning the visual aspects of the links, and more specifically hyperlinks for mobile devices. It is important to note that the term “guideline” has been considered here as a rule about what to do or not to do, given by an official organization or by a study that has validated it through experimentation. Most of the existing usability guidelines for hyperlinks have been designed for PC interfaces, but usability of hyperlinks in mobile devices should be specifically studied, as some studies demonstrated in other areas [30, 31]. In the following paragraphs, there is a compilation of guidelines for designing hyperlinks, retrieved from different studies, standards and recommendations. These guidelines were retrieved from different standards and documentation from official organizations such as the U.S. Department of Health and Human Services, the World Wide Web Consortium (W3C) and the International Organization for Standardization (ISO). Four documents of this type were found: the HHS Guidelines [32], ISO 9251-151 [33], W3C Mobile Web Best Practices [34] and WCAG 2.0 [35], which was accepted as ISO 40500. Furthermore, different search engines (Google Scholar, ScienceDirect, ACM digital library and IEEE Xplore Digital Library) were used for finding research reports containing guidelines obtained through experimentation. Only one study was found after this process: the Usability of Mobile Websites and Applications by Budiu and Nielsen [36]. The guidelines about hyperlinks found in those standards and recommendations are summarized in Table 1. 4 Accepted manuscript: Validation of navigation guidelines for improving usability in the mobile web. E. Garcia-Lopez, A. Garcia-Cabot, C. Manresa-Yee, L. de-Marcos, C. Pages-Arevalo. Computer Standards & Interfaces. 2017. [Table 1 near here] The main problem with hyperlinks is that their names (or labels, i.e. the text) do not always clearly inform about the content of the target web page [37]. When link descriptions are ambiguous or unclear, users try various links before they can find what they need, thus users do not get the information efficiently [38]. Therefore, the hyperlink names should be meaningful, understandable, unambiguous, descriptive and they should clearly tell what is the content that will be reached [2, 32, 33, 39], and more specifically the text of the link should be the same as the title of the target web page [5, 32]. In general, generic instructions such as “Go”, “Click here”, “More…” or “Next article” should be avoided [33, 36, 40]. In addition, according to Sprengers [39], not only the text of the hyperlink but also the surrounding text must relate to the topic of the hyperlink so that users are given a good sense of what they should and should not expect from clicking on the hyperlink. The guideline about clearly identifying the target of each hyperlink is even more important for mobile devices [36], because it may avoid or reduce delays resulting from following incorrect links [34]. Hyperlinks can link objects (called “special targets”) other than web pages, i.e.