Keywords

1 Introduction

Shopping online has become an indispensable activity in people’s life. Online shopping sites not only provide convenient services to the life of sighted people, but also have invaluable benefits to visually impaired users. At present, the total amount of Chinese blind is more than 6.5 million. One important benefit is that users can get details of clothing much easier than in the shops without others’ help (Takagi et al. 2007). Though e-commerce services anticipate bringing great convenience for blind people, almost all e-commerce webpages have poor accessibility and usability (Fuglerud 2011). Blind people have a strong desire to interact with Web. But when they interact with Web through screen reader, the interaction process is inefficiency and high cognitive loaded (Babu et al. 2010). But blind users cannot understand complex layouts in seconds with assistive technologies (Francisco-Revilla and Crow 2009, 2010). In this study, we try to design an online shopping guide website to meet accessibility and usability needs of visually impaired people.

Accessibility: Accessibility allows users access to system functionality (Goodhue, 1988). Web accessibility guidelines define the requirements a webpage has to satisfy for purpose of providing accessible content. The most widely accepted sets of guidelines are the Web Content Accessibility Guidelines (World Wide Web Consortium 2008). However, strong domination of visually oriented business logic and rapid changes of items are other reasons for many online shopping sites inaccessible (Takagi et al. 2007).

Usability: Accessibility alone is not enough to evaluate webpages. Even if pages are accessible, usability also plays a key role since pages may be difficult to traverse (Vigo et al. 2009). Usability is the degree to which a system conforms to users’ cognitive perceptions of accomplishing a task using the system (Goodwin 1987). Online shopping websites often use modular layouts. Multi-dimensional nature impedes blind users to comprehend information in the pages (Francisco-Revilla and Crow 2009).

Visually impaired users’ frustrations on the web can be categorized as alt text, links, forms, plug-ins, navigation, layout, failures, and other. Among them, navigation is one of the most important factors that can frustrate blind user through screen reader (Lazar et al. 2007).

For complex webpages, such as online shopping sites, “ease of navigation” is one of the important elements for blind usability (Takagi et al. 2007). Navigation consists in moving around in a hypertext documents, deciding at each step where to go next. The main problems for a blind user navigating through screen reader are lack of page context and information overload due to excessive sequential reading (Leporini and Paternò 2008). Takagi et al. (2007) suggested several ways to support landmark-oriented navigation. The suggestions include improvement of HTML/XHTML specification, simplification of navigation interface, integration of transcoding functions and so on.

In order to ameliorate blind people’s information overload and excessive sequencing when using online shopping sites, Takagi et al. (2004) proposed a method called “Blind Usability Visualization” to help designers to recognize their pages’ usability effectively. Mahmud et al. (2007) developed a method to remove information overload by capturing the context of the selected link. Bigham et al. (2009) developed a method to reduce task completion time in interactive Web.

Leporini and Paternò (2004) developed a set of usability guidelines of accessible pages. Eighteen usability guidelines for blind users are grouped four main principles: structure and arrangement, content appropriateness, multimodal output and consistency. Fukuda et al. (2005) raised possible metrics basis on navigability and listenability to evaluate accessibility in usability terms.

2 Prototype Design

2.1 Requirement Summary

Interview summary. We interviewed 9 undergraduate students (5 female, 4 male) from the Special Education College of Beijing Union University in focus group methodology. All students were visually impaired and could use computer and online services skillfully with screen reading software. They all had experience on online shopping.

The complaints about existing webpages included: too many advertisements, poor typed divisions and annoying interaction design such as identifying codes. Therefore, the page should be easily for software to read, unified layout for divisions and few meaningless advertisements. The interviewees showed high expectation for the convenience of online shopping, but in existing websites, they worried that they could not get enough information to support their decision. Therefore, the information should contain all parameters in current websites, and emphasize important information such as material, model and color. The layout should support screen reading software well.

Defects of existing online shopping websites

Confusion in classification.

In some selection page of existing online shopping websites, the order of options in categories has no specific ranking method. Therefore, users may find it hard to perceive the categories logically and have to memorize all options during selection, which would possibly lead to confusion and increment in mental workload.

Excessive options in some categories.

According to George A. Miller, the average limit of human short-term memory capacity is around 7 items. If the number of options in one category is too large (more than 20 in some websites), visually impaired users have to remember all options and then make a choice, in which their memory workloads may greatly increase.

Lack of alternative description for pictures.

The information given by a picture for a garment is far more important than any other goods. However, in most existing online shopping websites, there are no alternative descriptions for pictures, and thus visually impaired users would be probably confused when browsing a page with lots of pictures without descriptions.

Tedious long names.

The names of garments are as long as 30 Chinese characters, and have no standard rule. There are repetition of meanings, confusion in arrangement and lack of logic in the order of words in a name like that. When users read such a name, they may not only find it hard to memorize, but difficult to know the features of the garment as well.

Excessive and unstandardized garment parameters.

Similar to garment names, parameters in detail information pages also have excessive information and poor classification in different brands. The lack of uniform standard of parameters ignores special needs of visually impaired users, and thus makes it difficult for them to get information they really want from the parameters.

Lack of detailed description in words.

In detailed information pages in existing websites, information showing clothes details and style is in pictures, but not words. For normal users this might be a vivid description, yet for visually impaired users this information is inaccessible. The lack of descriptive words will have serious damage on their online shopping experience.

2.2 Design of the Prototype

For the feature selectin page, the filtering column contained six classes: style, sleeve length, material, fashion, color and price. We developed a unified rule to classify options for each category to avoid confusion. In order to reduce user’s memory workload, we controlled the number of items in one category less than 9. We completed functions of modification, skipping over the next category, and stopping selection for purpose of the improvement of users’ operating efficiency (Fig. 1).

Fig. 1.
figure 1

Design of filtering column

Full size image

For the selection result page, the garment information from result included 6 parts: name, characteristic, picture, price, sales volume and a hyperlink. We develop a unified and standardized naming rule for each garment. Product name consists of brand name and the remaining features not selected in the previous page. The name was put in the first line for each garment so that users can determine whether to continue browsing the rest. We also displayed additional characteristics of garments below their names (Fig. 2).

Fig. 2.
figure 2

Design of selection result list

Full size image

For clothes detail information page, we improved the existing garment parameters by adding information related to tactility to product parameters in this page. Also, we displayed detailed descriptions of garments in words instead of pictures (Fig. 3).

Fig. 3.
figure 3

Design of detailed information page

Full size image

3 Test and Interview Methodology

3.1 Participants

Participants were 10 visually impaired undergraduate students (5 male and 5 female) aged from 20 to 22, who were recruited from the Special Education College of Beijing Union University. All participants had rich experience in computer and Internet and have at least 1 year experience in online shopping.

3.2 Procedure

Participants were asked to browse the 3 pages, and used the functions, and then completed tasks accordingly: in feature selection page, participants were asked to select a combination of features in the filter column, and repeat all features selected after the selection. In the page of selection result list, they were required to browse several clothes in the list and identify the differences. In the page of clothes detail information, participants were asked to browse all detail information about one specific garment and then summarize the features. In the procedure of our test, we used “think aloud” method, which allowed the participants to speak out and express what they thought during their tasks. After the completion of the task of each page, we had a short interview with participants about their opinions and comments about operation, content and process design of tasks in each page.

3.3 Recording and Counting Method

All comments are classified into 3 categories. Comments concerning on such as scanning hot keys or input feedback, would be classified as “operation”; comments on such as classification of filtering in feature selection page or whether brief or detailed description of garments information, would be classified as “content”; comments concerning such as whether they could tell the difference between garments, or how well they understood the details, would be classified as “effects”.

4 Result and Discussion

4.1 Positive Feedbacks

During the interview, some positive feedbacks were given by these visually impaired users to the designs in our prototype. The classification of category in feature selection page was considered clearly and methodical compared with existing websites. The information of garment characteristics in selection result list page was believed to help them to identify garments. They could get unique and accuracy information other than the “tags” such as colors and style. Moreover, the description in detailed information page received much praise and was considered most important among all contents by these participants.

However, there were still many problems revealed in the process of task and the interview, and we put forward some possible solutions to them in the next section.

4.2 Problems and Alternative Solutions

Operation Habits. Tendency to skip back and forth within a page.

Participants said that they just wanted to skip the information unattractive to them or get back to a previous section in a rapid and convenient way. It is inconvenience for them to control the scroll bar as normal users, which means they have to use frequent skip by keyboards to get the structure of this page, as well as skipping information. Design ignoring this habit could cause confusions. For instance, in selection result page, the hyperlink is on the bottom of each table, but when the users skip to it, all information above is also skipped. The users had to skip back to browse the missing information, which led to lots of comments in this page.

The participants preferred switching focus rapidly using “tab” in the keyboard, or other hot keys defined in the webpage. For our prototype, we did not design a direct way to switch focus across the divisions in feature selection page. It seems that our original design of skipping category was still complex and hard to use. Buttons provided excessive focus in the page and much more time to switch using the “tab” key.

For feature selection page, to support frequent skipping across divisions, we can decrease the number of focus in the page by replacing buttons with combo box and multiple choice checkbox, and then allow shortcut keys to skip back and forth. In this way, each press of the “tab” key can skip exactly one category, and hot keys can be used to switch across divisions. For selection result page, we can change the position of hyperlinks to the top of each table, and thus the words of the hyperlinks must change to clothes name. In this way, it will be clearer when visually impaired users skip to the hyperlinks and easier to browse other information about the same garment. Moreover, switch by shortcut keys should also be supported in this page, so that users can skip the clothes that are not attractive to them.

Expectation for feedback. We noticed comments about feedbacks of operations were mentioned quite a lot in feature selection page. Apart from feedbacks given by screen reading software, additional information especially designed for blind users to remind their options. It is worth mentioned that the feedback can also take place when all choice are made and the users want to confirm them. For our prototype, we added confirmation after each choice, which might contradict with reading software according to some of the participants. Simplification should be made to refine the feedback information.

Content requirements: Tendency for a wider range of selection.

Participants would like more categories for selection, such as ratings or sales record, and more options for existing categories like color and style. The more detailed the selection, the more information users receive and the more precise their feeling about the garment, thus the more possible to find a satisfactory garment. In our original design, we chose fewer options to decrease mental workload, yet the participants did not care about that. Compared with the benefits of wider range of selection, the additional mental workload was not worried by the participants.

Since the increasing amount of information in categories wouldn’t cause mental overload, we can use full options in categories just the same as other clothes online shopping websites. Also, we can add more categories into the filtering column, such as ratings of seller credit and sales record. Moreover, order of the categories can be changed as well according to the relative importance from the view of visually impaired users. Multiple choices are also allowed for improvement.

Demand for information content: brief in title, explicit in detail. Two kinds of information about clothes were provided: short and brief information in title (usually words or phrases) in selection result list, and long information as a paragraph in clothes detail pages. For titles, participants would like a brief title with exactly “key words”, which only show the distinguishable features of clothes. For descriptions in detailed information page, participants all hoped the descriptive paragraph to be as precise as possible, containing details such as detailed pattern or ornaments of clothes.

Higher ranking for more important information. The information order is quite important to visually impaired users, for the only way to indicate importance by screen reader is the reading order, and other UI design cannot apply to these users. If the order is confusing, visually impaired users may find it hard to understand the structure and hence cannot get important information they want. In detail information page, participants suggested that more important information, including comments, descriptions and sales record, should rank higher. Therefore, the only way to display information importance clearly and rapidly in a text-based webpage for visually impaired users is ordering.

In selection result page where we display sales amount as well as credit rating of sellers or prices for each clothes, we can design a changeable order method, in which users can get different rankings as they wish. In this way different requirements of “important information” would be satisfied. In detailed information page, we give higher ranking of detailed description of garments, and add a new division of comments. The new order of display would be: price, sales amount, detailed description, parameters, comments, seller and stock information.

Comments from other customers or volunteers. For visually impaired users, the comments for a garment are vivid descriptions that provide information from a different aspect. Comments from other customer or volunteers can provide additional descriptions, usually in garment quality, credit of seller or even delivery time about a garment, thus may alleviate their worries to some extent. In the interview, many participants requested a higher ranking of the comments among all divisions, which showed the importance of comments from their point of view.

In existing online shopping websites, comments about goods are written by other customers, which usually concern service quality and price. We would display these comments as well in our pages. For visually impaired users, we discovered a special way of interaction between customers and the “volunteers”. These volunteers are usually sighted relatives or friends of visually impaired people. They have already played an important part in the decision making for visually impaired people in clothes shopping. At present, visually impaired users would send the information to those volunteers by instant messaging software; then, volunteers provide feedback to customers including comments about information that is hard for them to access. Visually impaired people have enough confidence in the personalized service given by volunteers. Thus, if we add comments given by those volunteers, more information focusing on the need of users would be shown, such as the fabric comfort or color matching.

Alternative explanation for terms or original concepts. Some blind participants said they had no idea about special or original concepts that was familiar to us normal users. With the pictures the styles were visible to normal users, but for visually impaired users, the detailed meaning was not clear as its name implied. Some participants suggested we describe people suitable for this style.

To solve this problem, we can add information about “suitable people” in detailed information page. Words or phrases can be used to describe people that suit the clothes or style well. The description should include age, gender, profession and body size or height.