· 2020-05-26 · Easy-to-use Prototype Design for UIC LRC Web Interface . BY . YIN Ziyou ....

Easy-to-use Prototype Design for UIC LRC Web Interface

BY

YIN Ziyou l630022086

Media Arts and Design

Submitted to

Dr. Yuan YUAN

A Final Year Project Submitted to the Division of Culture and Creativity in Partial Fulfilment of the Graduation Requirements for the Degree of

Bachelor of Communication (Honors)

Beijing Normal University – Hong Kong Baptist University United International College

May 2020

1

United International College Library

Final Year Project Release Form

Student Name: Yin Ziyou Student No.: l630022086

Student Name: Student No.:

Supervisor: Dr. Yuan Yuan Final Year Project Title: Easy-to-use Prototype Design for UIC LRC Web Interface

Program: MAD Year of the Project: 2019-2020 Declaration: We agree that the full text and images of my Final Year Project may be consulted by any/all

users in electronic format online through Internet connection, and in print version for onsite use at the Learning Resource Center of UIC, for purposes of private study, educational use, scholarship, or research.

We agree that the full text and images of my Final Year Project may be consulted by MAD

program, UIC students and staff in electronic format online through Internet connection for purposes of private study, educational use, scholarship, or research.

Signature: Date: Signature: Date:

1

Acknowledgement

Many people have helped me in this project, and I would like to express my gratitude

to all those who have offered me help.

I gratefully acknowledge the help of my supervisor Dr. Yuan Yuan, who went out of her

way to walk me through all the stages of the project and to give me comments and suggestions,

so as to help me finish this project better. Without her constant help, I would not have finished

my writing so smoothly.

My sincere gratitude is also given to school faculties and students who were willing

to help me finish the experiment voluntarily during the epidemic period of Coronavirus

(COVID-19). Their help enabled me to finish my data collection in time, so as to smoothly

complete the subsequent writing.

My thanks will finally go to my beloved family, who have always been assisting,

supporting and helping me out of difficulties without a word of complaint, which is of

significance in making the thesis a reality.

1

Contents

Acknowledgement ................................................................................................................................. 1

Abstract .................................................................................................................................................. 1

Chapter 1. Introduction ........................................................................................................................ 1

1.1 Pilot Study and Problems Statement ............................................................................................. 2

1.2 Study Objectives ........................................................................................................................... 5

Chapter 2. Literature Review .............................................................................................................. 6

2.1 Web Interface Design .................................................................................................................... 7

2.2 Usability and Web Interface Design ............................................................................................. 7

2.3 Web Interface Design Principles ................................................................................................. 10

2.4 Criteria for Usability Evaluation ................................................................................................. 11

2.5 Research Questions and Statement of Hypotheses ..................................................................... 13

Chapter 3. Methodology and Research Design ................................................................................ 14

3.1 Prototype Design ......................................................................................................................... 15

3.2 Experiment .................................................................................................................................. 18

3.2.1 Tasks and Observation ....................................................................................................... 19

3.2.2 Questionnaire Survey ......................................................................................................... 20

3.2.3 Interview Survey ................................................................................................................ 21

3.3 Data Analyses ............................................................................................................................. 22

Chapter 4. Results of Data Analyses ................................................................................................. 22

4.1 Efficiency .................................................................................................................................... 23

4.2 Learnability ................................................................................................................................. 25

4.1 Satisfaction .................................................................................................................................. 26

Chapter 5. Discussion ......................................................................................................................... 27

Chapter 6. Conclusion ........................................................................................................................ 31

References ............................................................................................................................................ 33

Appendices ........................................................................................................................................... 38

1

Abstract

With the popularization of online libraries in colleges and universities, it is necessary to study

the usability of campus library website. This paper focused on the existing problems of layouts

and functional icons in UIC LRC web interface, with an aim to optimize it based on the

previous research results, and to build a useful library web interface prototype. Design

principles were concluded from the previous study for re-designing the layouts and functional

icons. Tasks and observation, questionnaire survey and interviews were conducted for

examining the three attributes of usability including efficiency, learnability and satisfaction.

The results of this study show that the optimization of layouts and functional icons, basing on

the design principles drawn from the previous studies on web interface design, can improve

the usability of LRC web interface. This study has not only reflected the validity of the

summarized design principles, but also pointed out the importance of subsequent research on

language and information integration in UI design.

Keywords: usability; library website; UIC LRC; web interface; prototype

LRC WEB INTERFACE PROTOTYPE DESIGN

1

Chapter 1. Introduction

The rapid development of Internet and its related technologies pushes the storage and

transmission of information towards automatic and digital directions, resulting in the existence

of large number of e-books and other digital resources, which also brings a lot of attention on

the construction and problems solving of digital libraries or online libraries (Li & Liu, 2019).

Although the targets and contents may be different, these libraries are generally in the form of

website, whose purpose is to provide information and serve users. By using these websites,

people can access to most resources they want without actually stepping into the libraries

themselves, so they not only care about the functionality of these websites, but also emphasize

on the usability (i.e. ease of use), which means people prefer the library websites on which they

can achieve their goals in effective, efficient, and satisfactory manners (Punchoojit &

Hongwarittorrn, 2017).

Specifically, in the context of schools, most faculties and students will have the need to

use school libraries’ websites, which can also be regarded as a kind of online libraries, for their

researches and study. Besides, even though the rate of using mobile devices has increased

greatly in recent years, people’s behaviors of browsing, searching, collecting and sorting on PC

terminal are still more often than that on mobile terminal (see Figure 1), which account for

81.8%, 78.6%, 52.3% and 49.8% respectively (iResearch, 2018). Therefore, faculties and

students are assumed to log on to the school library websites by computers, so as to search, go

through and download various resources. However, many school library websites for PC

terminal are not very satisfactory in the aspect of usability (Yang & Yang, 2015). User interface

(UI) optimization of school library website on PC terminal can help to increase the usability,


2

so that users (faculties and students) are able to get information more quickly and perform more

smoothly. Developing and improving the library websites for the users to have a better using

experience on computers is thus crucial for colleges and universities.

This research chooses the website of the United International College (UIC) Learning

Resources Center (LRC, name of the UIC library) as research subject to try to develop a new

prototype basing on the optimization of its interface referring to some previous literatures that

suggested relevant design principles and guidelines, and to conduct a usability evaluation for

checking the new design.

1.1 Pilot Study and Problems Statement

Before the start of the research, a pilot study has been conducted for finding out the

existing problems of the LRC web interface, and for examining the feasibility of the research.

According to Nielsen (2000), around 80% of problems in a system can be found by engaging

5-6 test users. Therefore, six UIC faculties and students who were available to the researcher

were first selected and interviewed to know what functions of the LRC website are mostly used.

Figure 1 Analysis of users’ typical behaviors of information browsing in fusion scenarios. Source: iResearch Inc. (2018.01) Retrieved from http://www.iresearch.com.cn/


3

The results showed that users often use the LRC website to a) connect to the school VPN, b)

use the professional dictionaries, c) search for print and electronic resources by using several

sets of key words, d) access to databases, and e) check their LRC accounts. Based on these

commonly used functions, five tasks were designed (see Appendix A) for the experiments.

The six faculties and students were then invited to complete the five tasks, and asked to

speak out what they thought about the interfaces they encountered immediately, so that the

problems of the existing interfaces could be found out (Think Aloud Strategy, 2014). Results

from the simple tasks and observation showed two groups of outstanding problems of the

website.

The first group of issues are about layout. In this research, layout can be considered as the

placement of all the web elements. In the homepage (see Figure 2 & 3), a) there is no title for

positioning each block; b) the division of the functional icons in each block of the homepage

Figure 2 Original homepage – Top.

Figure 3 Original homepage – Middle.


4

is not consistent with that in the top navigation bar; c) and the elements displaying in the two

different sections of the homepage are not aligned. Also, in the secondary pages (see Figure 4

& 5), the main contents seem to occupy a relatively small proportion since the side navigation

menu is too wide, while some pages even do not have side navigation.

The second group of issues are about functional icons. In this research, functional icons

can be regarded as the interactive function keys with signs or symbols. The problems found

include:

1) Functional icons are difficult to be identified if without texts below and look

inconsistent.

2) Some misleading icons without actual interactive function appear in the homepage (see

Figure 6);

3) There is no a fixed icon that can navigate to the top of the page in neither homepage

Figure 4 Original secondary page – E-resources.

Figure 5 Original secondary page – Dictionaries.


5

nor the secondary pages.

Through the outcomes of the simple pilot study, it was known that the users’ feelings of

using the LRC interface could be greatly influenced by the layouts and functional icons, so the

research direction has been determined to be about the layouts and functional icons

optimization of LRC web interface.

1.2 Study Objectives

The aims of this project, therefore, are a) to figure out some suitable principles for

designing an easy-to-use library web prototype, b) to develop a new interface prototype for the

UIC LRC website, especially the homepage and some frequently used secondary pages, basing

on the principles concluded for solving the existing problems, c) and to test whether the new

prototype meet the criteria of usability, including efficiency, learnability and satisfaction. The

research will focus more on the overall layouts and functional icons of library websites

according to the problems found in the pilot study so as to effectively optimize the UIC LRC

web interface and develop a useful prototype for it. In chapter 2, related studies are reviewed,

leading to the conclusion of design principles, research questions and hypotheses statement;

chapter 3 is about the methodology, which illustrates the design and the methods used in the

Figure 6 Original homepage – Misleading Icon.


6

experiment for usability evaluation; chapter 4 is the section for data analyses based on the first-

hand data gathered from the experiment; and finally are the discussion and a final conclusion.

Chapter 2 Literature Review

To solve the problems and improve the usability of UIC LRC website, some academic

studies have been reviewed. Looking from the previous studies, there are many works

illustrated about the detailed researches in the fields of web design, UI or user experience (UX)

design, human-computer interaction (HCI), as well as usability evaluation of a system or

prototype.

Some illustrations and explanations of web interface design (ISO, 2010; Kuo & Chen,

2011; Pavlas, Lum & Salas, 2010; Manzoor, Hussain W., Sohaib, Hussain F.K. & Alkhalaf,

2018; Zhang, Small, von Dean & Barcellos, 1999), design guidelines for web interface design

including design specifications or certain factors that have significant impacts on usability

(Arledge, 2014; Islam & Bonwman, 2016; Kuo & Chen, 2011; Lee & Koubek, 2010; Liu, Guo,

Ye, & Liang, 2016; Manzoor et al., 2019; Nielsen, 1994; Pavlas et al., 2010; Salman, Cheng &

Patterson, 2012; Thorngate & Hoden, 2016), and several usability criteria and practical

methods that enable the evaluation of overall usability for the design (ISO, 1998; Nielsen, 2012;

Punchoojit & Hongwarittorrn, 2017; Quesenbery, 2014; Thowfeek & Salam, 2014) were

introduced and proved to be reliable in the studies reviewed. All these can be referred to for

proposing design principles, designing a useful library web interface prototype, and conducting

usability assessment.


7

2.1 Web Interface Design

Lee and Koubek (2010) once declared that “website is a group of interface and functional

attributes that are connected to each other”. As what International Organization for

Standardization (ISO) (2010) defined, user interface is about all components of an interactive

system that provide the users information and controls to accomplish specific tasks.

Accordingly, it can be drawn that web interface design is design for all the components within

a website’s user interface, in which users are the priority, which means the goal of designing a

web interface is to make it more useful for the users. Moreover, Flavian, Gurrea and Orus (2009)

had mentioned that good web design is the significant factor for a successful website.

For designing what people regarded as useful or good web interface, many interactive

elements should be taken into consideration, including layouts, menu, search box, icons,

buttons, tabs, texts, and so on (Islam & Bonwman, 2016; Kuo & Chen, 2011; Manzoor et al.,

2019; Zhang et al., 1999). Among these elements, icons and buttons interact in a similar way,

which can link to other web pages or just be as function keys (Zhang et al., 1999). Meanwhile,

the layout of web pages, so-called placement of web elements, that allows maximum exposure

of the information can help in tracking the eyes of the users (Pavlas et al., 2010; Thowfeek &

Salam, 2014).

Above all, to optimize the web interface is to optimize the interactive elements in the web

interface. In this study, layout and functional icons are the two most prominent elements in UIC

LRC website that have problems currently, so the later prototype design had focused on the

modification of these two elements.

2.2 Usability and Web Interface Design

Usability can be regarded as a factor for assessing a website’s quality (Ranganathan &

Ganapathy, 2002). Nielsen (1994) defines the usability of a website as “the ease with which the


8

user can learn to manage the system and memorize the basic functions, the efficiency of design

of the site, the degree of error avoidance and the general satisfaction of the user”. In other

words, usability of a website can in part determine how easy the users interact with the web

interface (Nielsen, 2012). Furthermore, Lee and Koubek (2010) declaimed that the preference

of the users can “reflect users’ feelings and attitudes about the interface and functional design

of a website, as well as influence their final behavior on that website.” Similarly, Chinese

researchers Liu et al. (2016) also provided evidence from China to show that the aesthetic

design of a website’s homepage has become a key factor that can affect users’ satisfaction and

enhance the ease of use of the website. Therefore, it is quite significant for the researchers and

designers to embed the concepts of usability on the web interface design so as to generate a

better using experience for the users.

In order to improve the usability of web interface design, the design of elements within

the web interface should be paid attention to in the early design stage. Kuo and Chen (2011)

noted in their research that in terms of UI design, there are six aspects that are linked to the

usability of a website, including advertisements, font size and color, easy function keys, layouts,

page color. Among these factors, the most important one they found out is the easy function

keys. Also, they indicated that webpage layout and iconization of tool bar items are what can

affect the quality of the easy function keys (Kuo & Chen, 2011). Visually pleasing screen

layout is thought to enhance the overall usability and satisfaction of a system (Pavlas et al.,

2010; Zhang et al.,1999). Thorngate and Hoden’s research (2016) had proved that the three key

layout features – number of columns, placement of navigation, and visual integration – have

impact on guide usability of the website. Similarly, in what Manzoor et al. (2019) had proposed


9

as the six-attribute metric, layout is one of the six factors that are used to evaluate the university

websites’ usability, since it can in part determine the performance of users. As for the icons in

a website, Salman, Cheng and Patterson (2012) indicated that the properly designed icons can

assist in reducing complexity of an interface and so the mental pressures of the end users. This

opinion was confirmed by Arledge (2014). Arledge concluded in the study of icons that “the

form of an icon has greater influence on its usability than do either style or color” (2014). Icons

can also be categorized into “interface signs” according to Islam and Bonwman (2016). They

wrote in their research article that some studies from scholars like de Souza, Bolchini, Sperioni,

Islam and Tetard indicated that designing “intuitive interface signs” is vital in enhancing the

usability, including user satisfaction, learnability, efficiency, and so on.

Besides, Lee and Koubek (2010) introduced an idea that “pre-use usability”, focusing

more on the interface attributes, and user performance, which is about time and the degree of

successes of task completion, were considered to compose the usability. Therefore, the

usability evaluation of a website should not only emphasize the elements of a website’s

interface, but also the actual using experience, which is also coherent with the opinions of

Punchoojit and Hongwarittorrn (2017), Kalimullah and Sushmitha (2017) and Cheng (2019).

And so, in order to ensure the overall usability of web interface, not only the design itself, like

the design of layouts and icons, or other elements of a website that may influence the usability,

was considered, but also the later usability evaluation of the newly designed web interface

prototype by experiment was conducted.


10

2.3 Web Interface Design Principles

Previous studies showed the importance of web elements in improving the usability of

web interface, and proved that the design of layout and icons is conducive to enhance the

performance of users in using the website. Many scholars, designers and companies, in their

research articles or official websites, have put forward the design principles or guidelines for

designing layout and icons that meet the usability requirements for the specific web interface

design.

When designing the layout of a webpage, number of columns, the area of white space

(negative space), and placement of navigation and core contents should all be taken into

consideration. For the number of columns, the two-column layout of the webpages has a

slightly edge in the usability than single-column or three-column layout, since two-column

design make the differentiation of primary and secondary content clearer (Thorngate & Hoden,

2017). As for the navigation menu, Kalbach and Bosenick (2003) indicated, “users expect the

primary menus of a web site to lie on the top or left of the screen.” More specifically, the

experiment of Thorngate and Hoden (2017) suggested that the navigation menu on the left side

of the page would be more visible than the top navigation bar. Also, it will be faster for the

users to finish the task when putting the core content in the middle of the web page, which is

proved in the research of Liu et al. (2016) and Thorngate and Hoden (2017). Except for the

contents, the background is also important in layout design, because the amount of text and

white space can influence the reading performance (Robins & Holmes, 2008; Schenker, 2014).

According to Ko and Liu (2019), generally, viewers would think the webpage neatness when


11

the white pace occupying 40-60% of the total area of the page. Their research also indicated

that the group at the age of 15-60 would prefer the white space being more than 50%.

To design icons for a useful web interface, the essential things are to make the icons

correctly convey the meanings they are expected to present and to ensure the readability and

clarity of the icons. As what Arledge (2014) had concluded, the form of an icon is what can

have influence on the usability. That means, how the icons look is what matters. First of all,

the icons should be designed in a simple, intuitive, and modern format (Apple, 2020; Google,

2020; Islam & Bonwman, 2016). Each icon should be reduced to its minimal form, expressing

essential characteristics, for too many details can make an icon appear sloppy or unreadable

(Apple, 2020; Google, 2020). Meanwhile, all icons should be the same in terms of size, level

of detail, perspective, and stroke weight, which means they should be in a consistent fashion

(Apple, 2020; Google, 2020; Tencent, 2017). Finally, texts should not be included in an icon.

If there exist a need for explaining the icon, display a label beneath the icon and adjust its

placement accordingly (Apple, 2020; Islam & Bonwman, 2016; Lazard, Byron, Vu, Peters,

Schmidt & Brewer, 2019).

2.4 Criteria for Usability Evaluation

For evaluating the usability of web pages, it is in need to understand the usability criteria,

which means the dimensions or attributes for identifying usability. As defined by ISO (1998),

usability is “the extent to which a product can be used by specified users to achieve specified

goals with effectiveness, efficiency and satisfaction in a specified context of use”. In 2001, the

expert of user experience and usability, Whitney Quesenbery (2014), proposed five criteria for


12

a usable product – effectiveness, efficiency, engagingness, error tolerance and ease of learning.

Following that, Nielsen (2012) had also stated that the usability, an assessment attribute that

evaluate the ease of using the user interface, can be identified by five dimensions: learnability,

efficiency, memorability, errors and satisfaction. Later on, Thowfeek and Salam (2014) had

referred to Shackel’s usability concept in their academic research about student’s evaluation of

the usability of an e-learning website, which showed that usability can be reflected by

learnability, effectiveness, flexibility, and attitude. Punchoojit and Hongwarittorrn (2017),

finally, concluded eight specific criteria of usability in their systematic literature review:

effectiveness, efficiency, learnability (easy to learn), memorability, safety (error tolerance),

utility, satisfaction, and engaging.

Viewing from these studies, it is obvious that learnability, satisfaction, efficiency, and

effectiveness are what most scholars mentioned. The two terms effectiveness and efficiency

can always be blurred. According to Quesenbery (2014), effectiveness is more about whether

the accuracy of users’ completing their goals is high, while efficiency is about the speed that a

user can get the tasks done. Punchoojit and Hongwarittorrn (2017) suggested that efficiency

can be measured by time or steps for completing a task, and learnability can be reflected by

time for learning a task. Similarly, Kalimullah and Sushmitha (2017) and Cheng (2019) also

indicated in their research that usability can be measured by success rate of the tasks and the

time spent to complete the tasks. Shackel’s concept was a bit different from others (Thowfeek

& Salam, 2014). In his theory, learnability can be reflected in the speed of learning a task and

the decreasing of making errors, while effectiveness can be measured by time for learning a

task or be reflected in retention (or “memorability” as defined by Neilsen). And thus,


13

learnability, effectiveness, and memorability are three very similar dimensions. Specifically,

satisfaction is about feeling comfortable and having positive attitudes during the using process,

which are the subjective personal feelings (ISO, 1998). Designers and researchers thus create

some scales to help them accurately measure satisfaction in a qualitative way, such as SUS

(System Usability Scale) (Brooks, 1986) and QUIS (Questionnaire for User Interface

Satisfaction) created by Chin, Diehl and Norman (1988), which had been proved to be reliable

and valid.

In this research, since effectiveness has intersection with learnability and efficiency in

terms of definitions, while learnability and efficiency have clearer and more feasible methods

of empirical measurement, and satisfaction can be measured quantitatively by using scales,

efficiency, learnability and satisfaction are considered as the three core criteria for the

assessment on the usability of UIC LRC web interface prototype. Efficiency can be measured

by the average of the shortest time that needed to complete a task; learnability can be reflected

in the changes of time that needed to complete a task and the reduction of errors happened

during manipulating when repeating; and at the same time, satisfaction can be effectively

examined by using certain scales. Therefore, when evaluating these three criteria, tasks and

observation section is crucial, as well as questionnaire survey and interview survey.

2.5 Research Questions and Statement of Hypotheses

With the guidance of literatures, the design of web interface prototype for the UIC LRC

website was expected to meet the requirements of usability. This research then focuses on the

usability evaluation, so as to confirm the actual usability of the design, and verify the validity


14

of the design principles concluded. Hence, the research question is whether the optimized

prototype, centering on the layout and functional icons, can positively affect the usability,

especially the efficiency, learnability and satisfaction, of the LRC website interfaces. Two

hypotheses were then put forward as followed on the basis of the related literatures reviewed:

1) The optimization of layouts can provide the new prototype a high degree of usability;

2) The functional icons modified can give a high degree of usability to the new web

interface prototype.

Chapter 3. Methodology and Research Design

The development of the web interface prototype needs to put its core users in the center

of development process. Consequently, this research has been carried out amongst UIC

faculties and students, and some methods were applied to examine the two hypotheses of this

study. In the hypotheses, the two independent variables are layouts and functional icons, and

there is one dependent variable – usability, which can be further divided into three attributes –

efficiency, learnability and satisfaction.

Before testing the hypotheses, new prototype for UIC LRC web interface has been

designed following the design principles for optimizing the layouts and functional icons

concluded form the reviewed literatures. And then, a three-stage experiment, aiming for

gathering the data about efficiency and learnability and satisfaction of the new web interface

prototype to examine the hypotheses, which engaged 30 faculties and students, has been done

by using the newly designed prototype.


15

3.1 Prototype Design

The design principles and guidelines for re-designing the web layouts and functional icons

summarized from the literatures were listed in chapter 2. Based on those principles and

guidelines, a series of primary and secondary interfaces corresponding to the five most

commonly used functions were designed.

First of all, for the layouts, the homepage retained the original single-column layout, and

the navigation bar was still designed at the top of the page right below the header, but the

original alignment of the tabs, icons and other contents, and the white space areas of the page

have been changed to make the interface look neater and clearer (see Figure 7). Meanwhile,

the core contents, which are the searching bar and tabs for the commonly used functions, were

put in the middle of the homepage to make them more obvious. At the same time, titles of each

Figure 7 New prototype homepage – Top.


16

section for better navigating the users were also added on the homepage (see Figure 8).

Secondly, the layouts of the secondary pages have also been modified a lot (see Figure 9).

The layout of each secondary interface was designed into 2 columns. The secondary navigation

menu in each page was placed on the left side of the page, and the size and position of the left

Figure 8 New prototype homepage – Middle.

Figure 9 New prototype secondary page – Summon.


17

navigation was adjusted to be a little narrower. Besides, the header, top navigation, and footer

were reserved to be consistent with those of the homepage. The margins of the secondary pages

were also designed to be the same as the homepage, so that the core contents were more

centralized and conspicuous.

Finally, most icons were re-designed. The icons in the LRC website consist of system

icons and icons designed specifically for the functions served by LRC (so-called “customized

icons” as defined by Google). The optimization of the system and customized icons was

basically to change the forms of the icons that were not easy to understand or recognized, such

as “Borrow, Renew, Return and Request”, “Course Reserved” and “My Account”, etc. At the

same time, the design specification of icons has been done by modifying each icon into a

consistent fashion, such as adjusting the fillets to the same size, unifying the horizontal and

vertical scales of each icon, and so on (see Figure 10). Moreover, the texts for explaining the

icons were included as label beneath the icons. Lastly, fixed icon for positioning back to the

Figure 10 Functional icons re-design and specification.


18

top of the page was also added in the homepage and the secondary pages (see Figure 11).

3.2 Experiment

After the design was completed, the usability of the new design was then evaluated

through the experiment, since experiment is helpful in studying casual relationships and can

avoid time influence on experimental variables (Babbie, 2015). The whole process included

three stages: the first stage was tasks and observation, the aim of which was to test the

efficiency and learnability of the new prototype; the second stage was the questionnaire survey

based on the using experience, whose main purpose was to examine the satisfaction of the new

prototype; and the final stage was in-depth interview, whose aim was to better understand the

users’ feelings about the optimized layouts and functional icons when using, and to find out

what they think were conducive to affecting usability.

The target samples of the experiment were selected by combining the use of convenience

sampling and snowball sampling, that is, the researcher selected the first group of target users

who were available to participate in the experiment, and then let them recommend other

qualified participants. Although 5 test users are enough for figuring out 80% of the problems

Figure 11 Footer and “Back to Top” icon.


19

(Nielsen, 2000), in order to make sure the statistical significance and to lower the possibility

of statistical error, which is to ensure the samples can represent the population, a total of 30

target users were invited to participate in the experiment. Meanwhile, to ensure a certain degree

of randomness for reducing the possibility of statistical error, faculties and students were

invited from different academic divisions or departments.

Experiment required the use of online screen sharing and voice call, which was carried

out one-to-one by researcher and each target user. Target users, thus, could use their own

devices and choose a comfortable and undisturbed space for the experiment. As for ethical

considerations, it was emphasized to all participants that the recorded contents would not be

published publicly without the permission of them, and that if relevant information is needed,

anonymous processing will be conducted. Consequently, this study has ensured that the users

involved were not disturbed and has protected users’ privacy to a large extent.

3.2.1 Tasks and Observation

Observation is good for knowing the real situation as much as possible (Babbie, 2015).

According to the literatures reviewed in chapter 2, efficiency can be measured by the speed of

completing a task, while learnability can be reflected by the decrease of time needed to

complete a task and the reduction of errors happened in the iterations. These data were directly

measured or calculated by the researcher during tasks and observation.

Before starting, researcher sent the HTML file of the new prototype to the test user with

a document of tasks description (Appendix A) attached, the same as the one for pilot study, so

that the user could run the prototype and read the tasks him or herself. By doing the tasks, the


20

participants had encountered all the new design elements (layouts and icons). During the

observation, the test user was asked to tell about what he or she was thinking when

manipulating, so that the hesitations, confusions and other instant feelings could be displayed

obviously (Think Aloud Strategy, 2014). Time and processes for everyone to finish each task

were calculated and recorded by the researcher. The whole process was controlled within 30-

40 minutes, and the effective time of each task was 8 minutes, otherwise, the task would be

regarded as not completed or failed.

After operation, several parameters were obtained for subsequent data analyses: a) the

length of time for completing each task in the three iterations; b) the shortest time to complete

each task, i.e. the speed of task completion that can be used to evaluate efficiency; c) the

differences of time needed to complete each task in the three iterations, which can be used to

evaluate learnability; d) and the frequencies of errors or fails happened in the completion of

each task in the three iterations, together with the time differences, serving as the reference

value of learnability.

3.2.2 Questionnaire Survey

Although doing observation can directly test the efficiency and learnability, and roughly

know participants’ satisfaction of a system, it is not enough for accurately examining users’

satisfaction. Questionnaire survey were then conducted for testing the satisfaction

quantitatively. After the tasks and observation section, questionnaire (Appendix B) was given

out to each participant for gathering his or her overall feelings on the new prototype, and

pinions on the layouts and the icons.


21

To ensure the reliability and validity of the questionnaire, the questions were set by

adjusting the items from SUS (Brooks, 1986) and QUIS (Chin et al., 1988). According to

Brooks (1986), SUS has been verified to have both reliability and validity. Meanwhile, Chin et

al. (1988) had proved the reliability of QUIS (version 5.0). There were 10 questions included

in the questionnaire, which were designed based on the two independent variables (layouts and

functional icons) and the overall using experience, and by using 5-point Likert scale. The first

two questions are about the overall using experience; the following four questions are about

user’s satisfaction with the independent variable layouts; and the last four questions are for

testing the user’s satisfaction with the independent variable functional icons. The total score

ranges from 10 to 50. The higher the total score, the higher the satisfaction.

Finally, it took each participant around 5 minutes to finish the questionnaire survey. Since

the whole experiment has been conducted one by one and in a one-to-one format, the

questionnaire surveys consequently yielded a 100% response rate and 100% completion rate,

which means all the collected data have been found suitable for analyses.

3.2.3 Interview Survey

In order to further understand how the users felt about the new prototype and to get more

insights of the users, especially about the two independent variables to be studied (layouts and

functional icons), the 30 participants were then invited to have in-depth interview surveys right

after they finished the questionnaires. Because the whole experiment was in one-to-one fashion,

conducting one-to-one interviews could let each participant complete all the stages in a

relatively concentrated time so as to provide convenience for both researchers and participants.


22

Interview questions (Appendix C) were semi-structured basing on the tasks manipulated

and the items on the questionnaire, and interviewee (or participants) answered accordingly.

During the process, notes were taken, and the whole process was auditory recorded for further

checking the notes. In the end, each interview lasted for about 20 minutes on average.

3.3 Data Analyses

After the one-to-one experiment with 30 participants, the following data about the three

attributes of the dependent variable – usability – were collected:

1) Quantitative data recorded in the tasks and observation section (see Appendix D),

including each participant’s operation time of each task in the three iterations and the

number of errors made by each participant in each task;

2) The scores of questionnaires filled in by the test users (see Appendix E);

3) The interview transcripts which had recorded each user’s feelings on the overall using

experience with the new prototype, as well as their opinions on the design of layouts

and functional icons, and their suggestions for further improvement (see Appendix F).

All the quantitative data were then put into SPSS for calculating, so the results from the

quantitative analyses reflected the overall efficiency, learnability and satisfaction of the new

prototype were gained. Meanwhile, the interview transcripts were put into NVivo to code and

obtain the high-frequency words (see Appendix G).

Chapter 4. Results of Data Analyses

Through the analyses of the quantitative data gathered in tasks and observation section


23

and questionnaire surveys, the results showed that the new prototype of the LRC web interface,

with the design focused on optimizing the layouts and functional icons, had a high degree of

efficiency, learnability and satisfaction. In the sections below, details of the results among the

three attributes are further illustrated.

4.1 Efficiency

The user’s operation speed, which is the shortest operation time of each task, suggests that

the new prototype’s efficiency was in a high level, for the means (average values) of both the

shortest operation time and the reasonable minimum operation time (i.e. the durations that

almost everyone could complete the corresponding tasks in) are all very short. These figures

would be more illustrative when combined with the specific steps required for finishing each

task. The related data are presented in Table 1.


24

Table 1 Five Tasks and the Steps and Minimum Time Needed for Completing Each Task

Task Goal

Steps Needed Mean of the Shortest

Operation Time

(Seconds)

Reasonable Shortest

Operation Time a

(Seconds) Minimum Mean

1 Find out the link that connects to the school VPN

2 2 8.53 15

2 Use the professional dictionaries to check a word’s definition

3 3 8.37 15

3 Search for literatures using several sets of key words

8 9 37.63 60

4 Access to databases 3 4 6.67 13

5 Check the loan history

5 6 14.73 25

Note: a Reasonable Shortest Operation Time was the minimum operation time measured by seconds that almost everyone can finish the task in.

Generally, the shortest operation time of each task increased or decreased with the increase

or decrease of steps needed. Although it seems from the data of task 1, task 2 and task 4 that

the operation time required decreased with the increase of steps, these data collectively reflect

that the tasks that needed about four steps to be finished can be completed within 10 seconds

on average when users using the new prototype, which indicates the high efficiency. In addition,

even though it took the longest time to complete task 3, the data still prove the efficiency of the

new prototype, since this task contains a lot of time-consuming typing processes. Viewing from

the reasonable shortest operation time of the third task, almost everyone could complete the

task within 60 seconds. Therefore, we can draw a conclusion that the optimization of layouts

and functional icons could bring the new prototype high efficiency.


25

4.2 Learnability

As for the learnability, the data gathered shows that the new prototype was relatively easy

to learn, since the operation time of each task showed great reduction in general, and the

decreases in the frequencies of making mistakes were obvious. The mean of operation time of

each task and the average frequencies of making errors are shown in Table 2.

Table 2 The Averages of Operation Time and Frequencies of Errors Made in Each Iteration

Task Goal

Mean of Operation Time (Seconds)

Mean of Frequencies of Errors Made

1st Operation

2nd Operation

3rd Operation

1st Operation

2nd Operation

3rd Operation

1

Find out the link that connects to the school VPN

127.03 20.10 8.77 3.33 .10 .10

2

Use the professional dictionaries to check a word’s definition

46.87 13.23 8.63 1.60 .00 .00

3

Search for literatures using several sets of key words

230.67 51.43 38.10 3.50 .00 .00

4 Access to databases

41.97 13.30 6.80 1.23 .00 .00

5 Check the loan history

66.93 19.93 15.00 1.10 .00 .00

It can be seen directly from the data that, on the whole, the average operation time of each

task had decreased in the three iterations, especially from the first operation to the second one.

Meanwhile, the average frequency of making errors clearly reflected that although participants

had made several errors in the first trial, except for 6 participants who made errors in the second


26

operation and one who erred in the third operation (see Appendix D), almost all participants

had made no mistakes in the second and the third operation. That is to say, most participants

could learn to find specific targets after two times of operations, and almost all people could

master the operations skillfully after three times of operations. Therefore, the learnability of

the new prototype is relatively high, which means, the optimization of layouts and functional

icons can make the new prototype easy to learn.

4.3 Satisfaction

From the outcomes of the questionnaire surveys, it is obvious that participants actually

had a high degree of satisfaction with the optimized prototype in general, because no matter

viewing from the total score of the questionnaire, or from the sub-score of each item or each

variable, the value was very high. The average scores are shown in Table 3.

Table 3 The Average Score of Each Variable and Items in the Questionnaire

Variable/Item Average Score Overall Feelings 8.267 1. I like the interface as a whole. 4.100 2. I think that I would like to use the system frequently with this interface.

4.167

Satisfaction of the Layouts 16.767 3. The experience that I have had with these layouts has been satisfactory.

4.067

4. I think the organization of information on screen is very clear. 4.167 5. I found the various contents in each layout were well integrated. 4.167 6. I thought there was consistency in the layouts. 4.367 Satisfaction of the Icons 16.433 7. The overall quality of the icons is good. 4.467 8. I felt very confident recognizing the icons. 4.133 9. I find it easy to remember names and uses of an icon. 3.967 10. The function icons compared favorably to others I have encountered. 3.867 Total 41.467


27

The average total score of 41.467 indicates a high degree of overall satisfaction.

Looking at the sub-score of each item, the average score of the tenth question was the lowest,

followed by that of the ninth, but they were just a little lower than 4, while the average scores

of other items were all above 4. The average total score of each variable also reflects that target

users were generally satisfied with the new layouts and the new functional icons. Although the

first two items are not directly related to satisfaction of layouts and functional icons, the average

total scores of them can still reflect the satisfactory feelings of the two variables to a certain

extent. Therefore, it can be drawn that the optimization of layouts and functional icons can

make the new prototype highly satisfactory.

Chapter 5. Discussion

Through the study of target users’ performance with the new prototype and the detailed

results from quantitative data analyses, the new prototype was proved to have high efficiency,

learnability, and satisfaction, which means the new prototype was easy to use. That means the

two hypotheses of this study can be basically confirmed to be tenable. In order to further ensure

the rationality of the two hypotheses and to tell whether the design principles are reliable, there

exists a need of looking at the insights of participants.

Efficiency

The efficiency of the prototype was high according to the performance and comments of

the participants. Many of the participants, in explaining why they thought the using experience

good during interviews, had mentioned about the influence of the layouts, and the presentation

of functional icons on efficiency. Specifically, some participants identified how the position of


28

main contents and the consistency of the layouts helps in performance. User 25 told that the

core information in each page “is easy to be captured, so that some tasks can quickly be done”;

user 13 commented similarly, “The entrances of the mostly used functions are placed in the

prominent positions, making the performance convenient and quick”; user 11 and user 29

thought in common, “Header, footer and main navigation are consistent in each page, while

each secondary page had side navigation with the same position, so the operation can be faster.”

These comments verify the design principle concluded from the statements of Kalbach and

Bosenick (2003), Liu et al. (2016) and Thorngate and Hoden (2017). For the functional icons,

participants agreed that the functional icons are “easy to understand and intuitive”, and the text

below accelerates the recognition of icons to some extent; five participants also indicated that

the existence of the “back to top” icon made the operation more convenient to some extent.

Their common opinion is coherent with the design principles summarized or proposed by

Apple (2020), Google (2020), Islam and Bonwman (2016), and Lazard et al. (2019).

Learnability

The comments of the participants recorded in the interviews illustrate why the newly-

designed prototype was easy to learn, including the factors of simple and consistent layout

design, and the well-presenting functional icons. Participants commonly thought that they

could soon handle the tasks because “the interface is overall clear and concise”, although they

needed some time for learning. User 13 explained in depth that the secondary pages “are unified

into basically 2-column design, and the header, the footer, and the top navigation bar are in the

same position in all the pages, such consistent layout design could be conducive to getting

familiar with the interface quickly.” The comment ensures the reliability of the design


29

principles summarized from the studies of Kalbach and Bosenick (2003) and Thorngate and

Hoden (2017), and at the same time, adds the importance of making sure the conciseness and

consistency of layouts. Meanwhile, participants agreed on the recognizability of the new

functional icons. Many participants said that the forms of the icons and the text descriptions

can match together; user 11 also mentioned concretely that the forms of the icons can “make

me roughly know what the corresponding functions of the icons are, so I can soon be more

familiar with each function”; user 12 even provided an example, “the form of icon ‘catalogue’

helps me remember that it is related to searching all the collections in LRC, and distinguish it

from other functions.” Therefore, designing the icons to be in their minimal forms and in a

consistent fashion, as what Apple (2020), Google (2020), Islam and Bonwman (2016), Lazard

et al. (2019), and Tencent (2017) suggested, can actually enhance the learnability of the

interface.

Satisfaction

For the overall user experience, the comments reflect a relatively high degree of

satisfaction and that the using experience was relatively smooth. Specifically, for the feelings

of layouts, the participants generally thought that the layouts were clear, neat and simple, which

made them visually comfortable. In addition, as user 7 explained, “the searching bar, some

commonly used buttons or icons, and the main body were placed in eye-appealing positions in

each page”, and some participants pointed out that there is enough distance between two blocks

in a page, and the margins are wide enough, so making the information conspicuous and the

whole interface visually clear. These comments highlight the significance of placing the core

contents in the middle of the page and leaving enough negative space when designing the


30

layouts, which match the statements of Ko and Liu (2019), Liu at al. (2016), Robins and

Holmes (2008), Schenker (2014), and Thorngate and Hoden (2017). As for the functional icons,

almost everyone thought them not difficult to be identified, since, as what they mentioned, the

appearances of the icons look unified and simple, and can convey the meanings they were

supposed to convey, and the icons, with the texts below or labels helping users better

understand them, are obvious in the page. These opinions match the design principles

summarized from the previous literatures or guidelines of Apple (2020), Google (2020), Islam

and Bonwman (2016), Lazard et al. (2019), and Tencent (2017) that the optimization had

referred to.

These findings matter because all of the above comments qualitatively emphasize how the

optimization of layouts and the re-design of functional icons that followed the design principles

help in increasing the efficiency, learnability and satisfaction of the LRC web interface

prototype, and so have a positive impact on the usability, which in turn highlight the reference

value of the design principles proposed.

Nevertheless, the results of observation and interviews still showed some potential

problems that may have impact on usability. Firstly, some participants suggested to “adjust the

relative size of texts and icon” to improve the visual balance, or to reduce the less commonly

used functional icons and to increase the more commonly used functional icons in the

homepage, since the two blocks with functional icons in the homepage (see Figure 8) have

occupied a relatively large proportion. Secondly, the text beneath an icon would somehow

make users rely on the explanation of the icon rather than the icon itself, and so if there are

confusing texts, the interface may not achieve the goal of shortening the operation time.


31

Besides the problems of layouts and functional icons, some participants commonly commented

that they were confused about the categories of the main navigation, and thought that there was

a discrepancy between each category and its pull-down menu. All these findings supplement

what were not considered in the principles and the problems that can be focused on in the future

design and research.

Chapter 6. Conclusion

LRC websites provides convenience for UIC faculties and students’ researches and study.

However, poor UI design will affect the overall usability of the website, which can add extra

burden to faculties and students when they are undertaking the challenging academic

researches. In this study, through the usability assessment on efficiency, learnability and

satisfaction by tasks and observation, questionnaire surveys and interviews, the optimization

of layouts and functional icons basing on the design principles drawn from the previous

literatures on interface design was confirmed to have improved the usability of LRC web

interface. The results had not only proved the validity of the summarized design principles, but

also complemented the significance of the area of each block and the relative size of texts and

icon in interface design, and so on.

The most remarkable thing in this study is that this study complements the influence of

specific library web interface elements on the specific attributes of usability – efficiency,

learnability and satisfaction, but not just showing the influence of interface aesthetics design

on the overall usability of a website. Such discovery is important, because if the design

principles summarized in this study can be applied to other similar library web interfaces, it


32

will help to improve the usability of them, so as to enhance users’ research enthusiasm.

Nonetheless, since the present research only aimed at the problems found in the pilot study,

which are about the layouts and functional icons, the study results still pointed out the parts

that can be further study, such as the language, which has affected users’ understanding, and

the naming of each category in the navigation bar and the classification of its pull-down menus,

which were not in line with users’ cognition. Last but not least, there have been few previous

studies on interface design or user experience of college or university library website, so the

research on these aspects and users’ habits of using such websites can continue to deepen.

Lastly, since this research was conducted during the epidemic period of Coronavirus

(COVID-19), there were some inevitable limitations. For the technical part, there was no

professional UI lab or eye tracking equipment for usability evaluation, and all the testing works

were conducted online through screen sharing, therefore, there were inevitable errors or flaws

by using unaided eyes. In terms of samples, the reasonability of the samples was partly affected.

First of all, the examination could only be conducted online, so the sampling could only through

the non-probability methods. Also, because of the need for remote testing, the three stages of

the entire experiment were concentrated together for one test sample, lasting a relatively long

time, resulting in only 30 samples who were willing to engage. All these can be paid attention

to and optimized in the future studies.


33

References

Apple. (2020). Human Interface Guidelines. Developer.apple.com. Retrieved February 7, 2020,

from https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-

images/custom-icons/

Arledge, C. (2014). Filled-in vs. Outline Icons: The Impact of Icon Style on Usability.

Brooks, J. (1986). Smart Phone Applications for People with Brain Injury. United Kingdom:

Agency for Clinical Innovation.

Babbie, E. (2015). The Practice of Social Research (14th ed). Boston, MA: Cengage Learning.

Chin, J. P., Diehl, V. A., & Norman, K. L. (1988, May). Development of an instrument

measuring user satisfaction of the human-computer interface. In Proceedings of The

SIGCHI Conference on Human Factors in Computing Systems (pp. 213-218). ACM.

Flavian, C., Gurrea, R., & Orus, C. (2009). Web design: a key factor for the website success.

Journal of Systems and Information Technology.

Google. (2020, Jan 29). Iconography. Material Design. Retrieved February 7, 2020 from

https://material.io/design/iconography/system-icons.html#

ISO. (1998). 9241-11:1998(en). Ergonomic requirements for office work with visual display

terminals (vdts) — Part 11: Guidance on usability. Iso.org. Retrieve 13 March, 2020 from

https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en

ISO. (2010). 9241-210: 2010. Ergonomics of human system interaction-part 210: Human-

centred design for interactive systems (formerly known as 13407). International

Standardization Organization (ISO). Switzerland.

Islam, M. N., & Bouwman, H. (2016). Towards user–intuitive web interface sign design and


34

evaluation: A semiotic framework. International Journal of Human-Computer Studies, 86,

121-137.

Kalbach, J., & Bosenick, T. (2003). Web page layout: A comparison between left-and right-

justified site navigation menus. Journal of Digital Information, 4(1), 153-159.

Kuo, H. M., & Chen, C. W. (2011). Application of quality function deployment to improve the

quality of internet shopping website interface design. International Journal of Innovative

Computing, Information and Control, 7(1), 253-268.

Ko, C., & Liu, Y. (2019). Old and Young Users’ White Space Preferences for Online News Web

Pages. IEEE Access, 7, 57284-57297.

Lee, S., & Koubek, R. J. (2010). The effects of usability and web design attributes on user

preference for e-commerce web sites. Computers in Industry, 61(4), 329-341.

Liu, W., Guo, F., Ye, G., & Liang, X. (2016). How homepage aesthetic design influences users’

satisfaction: Evidence from china. Displays, 42, 25-35.

Lazard, A. J., Byron, M. J., Vu, H., Peters, E., Schmidt, A., & Brewer, N. T. (2019). Website

designs for communicating about chemicals in cigarette smoke. Health communication,

34(3), 333-342.

Li, Y., & Liu, C. (2019). Information resource, interface, and tasks as user interaction

components for digital library evaluation. Information Processing and Management,

56(3), 704-720. doi:10.1016/j.ipm.2018.10.012

Manzoor, M., Hussain, W., Sohaib, O., Hussain, F. K., & Alkhalaf, S. (2019). Methodological

investigation for enhancing the usability of university websites. Journal of Ambient

Intelligence and Humanized Computing, 10(2), 531-549.


35

Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability

Inspection Methods, John Wiley & Sons, New York, NY.

Nielsen J. (2000, March). Why You Only Need to Test with 5 Users. Retrieved 23 April, 2020

from https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Nielsen, J. (2012). Usability 101: introduction to usability. Useit.com. Retrieve 23 April, 2020

from https://www.nngroup.com/articles/usability-101-introduction-to-usability/.

Pavlas, D., Lum, H., & Salas, E. (2010, September). The influence of aesthetic and usability

web design elements on viewing patterns and user response: An eye-tracking study. In

Proceedings of the Human Factors and Ergonomics Society Annual Meeting (Vol. 54, No.

16, pp. 1244-1248). Sage CA: Los Angeles, CA: SAGE Publications.

Punchoojit, L., & Hongwarittorrn, N. (2017). Usability studies on mobile user interface design

patterns: A systematic literature review. Advances in Human-Computer Interaction, 2017.

Quesenbery, W. (2014). The five dimensions of usability. In Content and Complexity (pp. 93-

114). Routledge.

Ranganathan, C., & Ganapathy, S. (2002). Key Dimensions of Business-To-Consumer Web

Sites. Information & Management, 39(6), 457-465.

Robins, D., & Holmes, J. (2008). Aesthetics and credibility in web site design. Information

Processing & Management, 44(1), 386-399.

Salman, Y. B., Cheng, H. I., & Patterson, P. E. (2012). Icon and user interface design for

emergency medical information systems: A case study. International journal of medical

informatics, 81(1), 29-35.

Schenker, M. (2014). How to Make Whitespace Work on the Web. webdesignerdepot.com.


36

Retrieve 07 February, 2020 from https://www.webdesignerdepot.com/2014/07/how-to-

make-whitespace-work-on-the-web/

Think Aloud Strategy. (2014). In Teacher Vision. Retrieved 23 April, 2020 from

https://www.teachervision.com/skill-builder/problem-solving/48546.html?page=1.

Thowfeek, M. H., & Salam, M. N. A. (2014). Students’ assessment on the usability of E-

leaming websites. Procedia-Social and Behavioral Sciences, 141, 916-922.

Thorngate, S., & Hoden, A. (2017). Exploratory usability testing of user interface options in

LibGuides 2. College & Research Libraries, 78(6), 844.

Tencent. (2017). 空心图标是否比实心图标难以识别？ [Are Hollow Icons More Difficult

to Recognize Than Solid Ones?]. Zhihu.com. Retrieved February 7, 2020 from

https://www.zhihu.com/question/24254417/answer/187322014

Zhang, P., Small, R. V., von Dran, G. M., & Barcellos, S. (1999, January). Websites that satisfy

users: A theoretical framework for web user interface design and evaluation. In

Proceedings of the 32nd Annual Hawaii International Conference on Systems Sciences.

1999. HICSS-32. Abstracts and CD-ROM of Full Papers (pp. 8-pp). IEEE.

IResearch Inc. (2018, February 28). 移动端和 PC 端界限更加模糊，融合成为互联网时代

最鲜明的特征. [The boundary between mobile terminal and pc terminal is more blurred,

and integration becomes the most distinctive feature of the internet era]. Soho.com.

Retrieve 23 April, 2020 from http://www.sohu.com/a/224528915_445326/.

IResearch Inc. (2018). 融合场景下用户典型资讯浏览行为分析[Analysis of users’ typical

behaviors of information browsing in fusion scenarios] [digital image]. Retrieved from

http://www.iresearch.com.cn/.


37

杨裕宁, & 阳阳. (2015). 高校大学生对校园官方网站的满意度调查分析——以广西民族

大学为例. [A Survey of University Students' Satisfaction with The Official Website of

Campus - Taking Guangxi University for Nationalities as An Example]. 智富时代 ,

000(05X), P.326-327.


38

Appendix A

Tasks Design

1) You are at home during holiday, but you want to use campus network to find some

electronic materials. Please use UIC LRC website to solve this problem.

2) You want to know what the term “morphogenesis” means. Please use UIC LRC website to

solve this problem.

3) You are doing APP design, which will be related to user interface, and user experience or

interactive design. You want to find some useful materials or guideline (no matter print or

electronic) in these fields, but you do not want them to relate to mathematics. Please use

UIC LRC website to solve this problem.

4) You are interested about some environmental problems that existing in 1900s and how they

were encountered. Your friend/colleague tells you that you can find some previous studies

on the topic you are interested in by some databases like EBSCOhost, ProQuest, or JSTOR.

Please use UIC LRC website to solve this problem.

5) One of your friends asked you about a book of design that you had borrowed from the

Learning Resource Center (UIC library) before, but you forgot about the title of the book.

Please use UIC LRC website to solve this problem.


39

Appendix B

Questionnaire Design for Satisfaction Assessment

This questionnaire is set to gather your opinions on the whole interface, including the

layouts and icons design, of a newly designed prototype based on 5 tasks, which is for a

research project I am conducting as part of my academic study. This questionnaire will include

10 questions and may spend you a maximum of 10 minutes. There is no right or wrong answer.

I am interested in how you feel.

By participating in this survey, you are indicating that you may choose not to answer any

question that you find intrusive or offensive, but it will help me if you can response to as many

questions as you feel comfortable with. The contents will not be published without your

permission. If there is any need like those, I will contact you immediately for your consent.

Thank you very much for your understanding and cooperation. I really appreciate your

help!

Note: Circle “○” the number according to your inner feelings. If you strongly agree with

the statement, you can circle “5”; if you totally disagree with the saying, you can circle “1”; if

you do not have any specific feeling, you can circle “3”.


40

Strongly

Disagree

Strongly

Agree

Overall Feelings:

1. I like the interface as a whole. 1 2 3 4 5

2. I think that I would like to use the system

frequently with this interface.

1 2 3 4 5

Satisfaction of the Layouts:

3. The experience that I have had with these

layouts has been satisfactory.

1 2 3 4 5

4. I think the organization of information on

screen is very clear.

1 2 3 4 5

5. I found the various contents in each layout

were well integrated.

1 2 3 4 5

6. I thought there was consistency in the

layouts.

1 2 3 4 5

Satisfaction of the Icons:

7. The overall quality of the icons is good. 1 2 3 4 5

8. I felt very confident recognizing the icons. 1 2 3 4 5

9. I find it easy to remember names and uses

of an icon.

1 2 3 4 5

10. The function icons compared favorably to

others I have encountered.

1 2 3 4 5


41

Appendix C

Instruction and Questions for Interview Survey

I am Yin Ziyou, a year-four student from Media Arts and Design Programme. As you

know I am conducting a research for the Final Year Project about the usability of a newly

designed interface for the UIC LRC website. Thank you for taking time for this interview

survey today. I will be asking some questions on how you feel about the interface (especially

the icons and buttons) you have just experienced.

This interview survey may last for around half an hour and in a semi-structured format.

You can feel free to clarify any doubts during the whole process. The interview will be recorded

by both audio recorder and notes for further analyses. Those contents will not be published

without your permission. If there is any need like those, I will contact you immediately for your

consent.

Thank you again for your understanding and cooperation. I really appreciate your help!

1) What do you think about the experience of using this interface? Why?

2) Did you come across any difficulties of completing the tasks by using this interface?

3) What do you think about the layouts? Are they visually clear or messy? Could you explain

why?

4) What about the icons? Are they easy or hard for you to recognize? Why do you think that?

5) Could you please share more about your feelings on some examples of the new layouts

and functional icons?

6) If you can make some change to improve the web interface you experienced, what will

you suggest to make them better?


42

Appendix D

Raw Data Gained from Tasks and Observation

Raw Data: Each Test User’s Operation Time of Each task and Frequencies of Errors Made in Each Iteration

User Task Time 1a Time 2b Time 3c Time Mind

Time 1 Errorse

Time 2 Errorsf

Time 3 Errorsg

1 1 60 15 8 8 2 0 0 1 5 26 25 15 15 0 0 0 1 2 15 12 10 10 1 0 0 1 3 332 75 43 43 5 0 0 1 4 130 20 5 5 3 0 0 2 1 20 5 3 3 1 0 0 2 3 170 35 21 21 2 0 0 2 4 9 8 8 8 0 0 0 2 2 48 13 8 8 1 0 0 2 5 70 23 15 15 2 0 0 3 2 15 6 6 6 1 0 0 3 1 60 6 8 6 3 0 0 3 4 25 20 4 4 1 0 0 3 3 353 60 47 47 7 0 0 3 5 80 23 15 15 2 0 0 4 4 18 9 6 6 0 0 0 4 3 285 50 40 40 3 0 0 4 1 162 13 8 8 4 0 0 4 5 55 23 20 20 2 0 0 4 2 90 16 9 9 5 0 0 5 3 187 38 35 35 5 0 0 5 4 46 5 4 4 2 0 0 5 2 30 6 8 6 3 0 0 5 1 225 6 3 3 6 0 0 5 5 379 37 23 23 14 0 0 6 2 140 45 8 8 4 2 0 6 3 220 45 15 15 8 0 0 6 5 60 20 23 20 3 0 0 6 1 86 69 15 15 7 1 0 6 4 114 112 40 40 5 3 0 7 1 41 7 5 5 2 0 0 7 4 8 5 5 5 0 0 0 7 3 100 25 20 20 3 0 0 7 2 15 9 6 6 3 0 0 7 5 98 24 11 11 4 0 0


43

8 1 58 10 8 8 1 0 0 8 2 11 11 11 11 0 0 0 8 5 32 26 22 22 0 0 0 8 3 96 52 57 52 3 0 0 8 4 175 10 5 5 5 0 0 9 5 23 14 6 6 0 0 0 9 1 40 8 4 4 1 0 0 9 4 13 5 6 5 0 0 0 9 3 180 72 39 39 2 0 0 9 2 51 13 5 5 3 0 0

10 3 57 35 33 33 0 0 0 10 1 119 134 10 10 3 2 0 10 5 30 33 22 22 0 0 0 10 2 30 7 5 5 2 0 0 10 4 111 8 6 6 7 0 0 11 5 79 26 19 19 0 0 0 11 4 12 10 8 8 0 0 0 11 3 140 40 34 34 4 0 0 11 2 46 17 5 5 5 0 0 11 1 289 60 6 6 12 2 0 12 1 82 88 80 80 2 4 3 12 5 46 22 15 15 2 0 0 12 4 78 11 10 10 5 0 0 12 2 190 10 5 5 13 0 0 12 3 256 175 40 40 12 2 0 13 4 15 4 3 3 0 0 0 13 3 240 23 25 23 1 0 0 13 5 60 15 13 13 0 0 0 13 2 33 13 8 8 1 0 0 13 1 107 5 3 3 4 0 0 14 5 20 11 6 6 0 0 0 14 3 110 42 35 35 0 0 0 14 2 75 8 8 8 0 0 0 14 1 117 10 5 5 3 0 0 14 4 27 10 8 8 0 0 0 15 5 62 25 23 23 0 0 0 15 2 63 17 15 15 1 0 0 15 1 284 10 8 8 4 0 0 15 4 121 15 13 13 4 0 0 15 3 480 61 45 45 11 0 0 16 5 20 19 8 8 0 0 0 16 4 12 6 5 5 0 0 0


44

16 2 18 20 6 6 1 0 0 16 1 246 30 7 7 3 2 0 16 3 430 80 40 40 3 2 0 17 2 24 19 10 10 0 0 0 17 5 160 20 14 14 2 0 0 17 1 185 15 5 5 5 0 0 17 4 52 26 5 5 3 2 0 17 3 433 36 37 36 8 0 0 18 2 25 13 6 6 0 0 0 18 5 39 9 9 9 0 0 0 18 3 125 41 41 41 1 0 0 18 4 65 5 5 5 0 0 0 18 1 241 12 4 4 6 0 0 19 2 46 27 9 9 0 0 0 19 1 107 6 10 6 2 0 0 19 4 9 39 6 6 0 0 0 19 5 57 20 22 20 0 0 0 19 3 366 70 56 56 7 0 0 20 4 6 5 4 4 0 0 0 20 3 81 55 43 43 0 0 0 20 5 66 23 11 11 0 0 0 20 2 17 15 13 13 0 0 0 20 1 169 5 4 4 3 0 0 21 2 36 9 8 8 0 0 0 21 3 320 50 48 48 1 0 0 21 5 50 15 15 15 0 0 0 21 4 80 12 10 10 0 0 0 21 1 241 10 10 10 4 0 0 22 2 6 6 6 6 0 0 0 22 4 6 6 4 4 0 0 0 22 5 15 10 10 10 0 0 0 22 1 141 25 10 10 2 0 0 22 3 480 43 30 30 2 0 0 23 1 66 3 3 3 2 0 0 23 5 65 19 16 16 0 0 0 23 2 13 6 6 6 1 0 0 23 3 198 60 55 55 4 0 0 23 4 26 13 4 4 1 0 0 24 5 31 16 8 8 0 0 0 24 3 480 32 38 32 2 0 0 24 1 240 11 4 4 4 0 0 24 4 45 8 4 4 1 0 0


45

24 2 180 13 12 12 2 0 0 25 4 3 3 3 3 0 0 0 25 3 149 30 25 25 2 0 0 25 1 60 6 3 3 3 0 0 25 2 40 16 14 14 0 0 0 25 5 58 15 10 10 1 0 0 26 1 39 6 5 5 1 0 0 26 3 140 50 42 42 0 0 0 26 2 15 9 9 9 0 0 0 26 5 23 13 14 13 0 0 0 26 4 9 8 5 5 0 0 0 27 4 18 4 4 4 0 0 0 27 1 109 5 5 5 2 0 0 27 5 29 15 15 15 0 0 0 27 3 120 52 50 50 2 0 0 27 2 63 13 12 12 1 0 0 28 1 7 6 5 5 0 0 0 28 3 30 27 27 27 0 0 0 28 2 10 8 13 8 0 0 0 28 4 6 4 7 4 0 0 0 28 5 12 18 14 12 0 0 0 29 4 10 4 4 4 0 0 0 29 2 54 10 10 10 0 0 0 29 1 90 7 8 7 3 0 0 29 5 143 25 23 23 1 0 0 29 3 240 48 46 46 5 0 0 30 2 7 10 8 7 0 0 0 30 4 10 4 3 3 0 0 0 30 5 120 14 13 13 0 0 0 30 3 122 41 36 36 2 0 0 30 1 120 10 6 6 5 0 0

Note: a Time 1, b Time 2, c Time 3 were the operation time measured by seconds in each iteration; d Time Min was the least time measured by seconds in the three iterations; e Time 1 Errors, f Time 2 Errors, g Time 3 Errors were the frequencies of errors made in each iteration.


46

Appendix E

Outcomes of Questionnaire Survey

Q1 Q2 Overall Q3 Q4 Q5 Q6 Layouts Q7 Q8 Q9 Q10 Icons Total User 1 4 4 8 4 4 5 5 18 4 3 3 4 14 40 User 2 5 5 10 5 5 5 4 19 5 5 5 5 20 49 User 3 4 5 9 5 5 4 5 19 5 3 4 4 16 44 User 4 5 4 9 4 4 4 5 17 4 4 3 4 15 41 User 5 4 5 9 4 4 5 5 18 4 5 4 3 16 43 User 6 4 3 7 3 4 4 4 15 4 4 4 4 16 38 User 7 4 4 8 3 4 3 4 14 4 4 4 4 16 38 User 8 4 4 8 4 5 4 5 18 5 5 5 3 18 44 User 9 5 5 10 5 5 5 5 20 5 5 5 4 19 49 User 10 4 3 7 4 3 4 4 15 4 3 4 3 14 36 User 11 4 3 7 3 4 4 3 14 5 4 5 4 18 39 User 12 3 3 6 3 4 4 3 14 5 5 4 3 17 37 User 13 4 4 8 4 4 4 4 16 5 3 4 4 16 40 User 14 5 4 9 5 4 3 4 16 5 5 3 5 18 43 User 15 4 4 8 5 3 5 5 18 5 5 3 4 17 43 User 16 4 5 9 4 3 4 4 15 5 3 4 4 16 40 User 17 4 4 8 4 3 4 5 16 4 5 4 4 17 41 User 18 4 5 9 4 5 4 4 17 4 4 4 4 16 42 User 19 4 4 8 4 4 4 5 17 4 5 4 4 17 42 User 20 4 4 8 4 4 4 4 16 4 4 3 3 14 38 User 21 4 4 8 3 4 5 5 17 4 3 3 4 14 39 User 22 4 5 9 4 5 4 5 18 4 4 3 4 15 42 User 23 5 5 10 4 4 4 4 16 5 4 4 4 17 43 User 24 4 4 8 4 4 4 4 16 5 5 4 4 18 42 User 25 4 4 8 4 5 4 5 18 4 3 5 4 16 42 User 26 4 4 8 4 4 4 4 16 4 3 4 3 14 38 User 27 3 4 7 4 4 3 3 14 4 4 4 3 15 36 User 28 4 4 8 5 5 5 5 20 5 5 4 5 19 47 User 29 4 4 8 4 5 4 4 17 5 4 5 4 18 43 User 30 4 5 9 5 4 5 5 19 4 5 4 4 17 45


47

Appendix F

Transcripts of Interview Survey

Q1 Q2 Q3 Q4 Q5 Q6

User 1 对于使用体验

基本满意，使

用感良好。特

别是 margins，

感觉设计合

理，排版整

洁；提示信号

可以更明显，

字体大小也可

以适当调整

操作刚开始具

有一定难度，

但难度是由于

对网页提供的

服务和信息不

熟悉导致的，

与界面没有太

大关系

排版布局视觉

清晰，最好的

点在于背景与

主题内容区分

明显；主题内

容很好聚焦

总体来说图标

视觉上的一致

性较强；首页

的图标部分有

色彩变化或大

小变化的交互

提示；有文字

的辅助提示有

利于图标的辨

认和使用；但

图标作为独立

个体辨识度还

有待增强

喜欢各级页面

的色调统一以

及页面布局排

版基本统一，

方便了熟悉的

过程；图标使

用率不高，但

是整齐的排列

和一致的设计

样式使得视觉

上舒适度很高

部分二级界面

中的主题内容

字体大小或字

体颜色可以适

当调整，使核

心内容更突出

Q1 Q2 Q3 Q4 Q5 Q6

User 2 使用流畅，满

意度高；界面

和信息的位置

整体改动不太

大，但界面更

整洁好看

使用上没有太

大难度，难度

与是否完成过

相关操作有关

视觉上很清

晰，但“my

account”界面的

菜单栏像表

格，看不太懂

每个菜单按钮

的名字，如果

两个横向菜单

栏分开可能会

更好

图标设计还不

错，总体可辨

认；形式比较

好看，有很好

地表达含义，

传达它想传达

的意思

首页的图标

大，显得占位

有点多；界面

统一性强

下拉选框如果

统一设计成直

角会更好；可

适当减少 icons

交互区的占

位；其他问题

不大，总体操

作使用感良好


48

Q1 Q2 Q3 Q4 Q5 Q6

User 3 整体使用挺满

意的；本来对

于图书馆的服

务不太熟悉，

通过这个任

务，觉得依靠

比较合理的版

面设置，也了

解了一些图书

馆的服务内容

对于有些任务

的描述不太熟

悉，主要基于

对于图书馆的

信息分区不太

明确，很少使

用 LRC 的相关

界面

信息排布挺清

晰的，有一定

的图标，信息

分类也很清

楚，还有大小

的标题对于区

块进行描述

图标设计得挺

清晰，除了一

两个基本不用

的图标之外，

其他图标都可

比较准确地辨

认出来

整体上看，界

面排布很清

晰，主要内容

很突出，但是

背景为图片的

部分可以对比

更明显一些；

icons 比较少

用，buttons 用

得比较多，但

基本都能辨认

Dictionary 的功

能很好用，但

功能按钮可以

和 E-resources

以及 E-journal

放在一起，因

为二级界面他

们也都在同一

个界面中

Q1 Q2 Q3 Q4 Q5 Q6

User 4 感受良好；主

要是任务不熟

悉，可能用时

较长，影响整

体体验

有困难；在做

第一个任务的

时候，信息分

区与认知上的

不符；难度与

UI 本身没有太

大关系

界面清晰，色

块大、明显、

简洁，对比明

显，图标部分

够大，显眼；

首页搜索栏下

方图片背景造

成相互干扰，

影响视觉感受

图标风格一

致，符合认知

习惯；部分图

标相似，区分

主要靠文字

菜单栏等设计

整齐整洁；子

页面左侧菜单

栏方便了交

互；区分开了

子页面菜单栏

和主菜单栏

Title 可以字体

再大些；Back

to top 按钮在短

页面可以不需

要

Q1 Q2 Q3 Q4 Q5 Q6

User 5 页面使用满

意；页面简洁

清晰；没接触

过的功能指引

还不够

困难在于对功

能的不熟悉，

没用过的功能

会习惯性打开

熟悉的页面；

没有页面混乱

或者看不懂图

标造成的一些

操作困难

整体页面布局

整齐清晰，主

题内容及搜索

栏显眼，每个

子界面的顶部

主菜单栏和左

侧子菜单栏都

在同一个位

置，显得统一

性很高

有部分相似的

图标需要依赖

文字去区分；

基本上没有辨

认问题，特别

是系统图标

首页中部的图

标有点大，布

局显得有点单

调；配色可能

对于页面视觉

的感受造成一

定的影响；喜

欢”back to top"

这个功能图标

可能考虑在首

页增加一些吸

引人的内容或

与 LRC 相关的

活动，减少一

些图标链接的

设置


49

Q1 Q2 Q3 Q4 Q5 Q6

User 6 使用体验一

般，给我不功

不过的感觉；

没有经验的人

刚开始做任务

需要花时间学

习；会有一个

迷惑的过程

第一次做任务

的时候找每个

功能所在的分

区可能会有一

定的困难，但

是还比较好记

住位置

页面布局还是

很清晰的，知

道什么东西在

什么位置

对于系统图标

或者其他图标

都能大概辨认

出意思，文字

可以辅助理解

首页图标的部

分可以占比小

一些，不然显

得有点满

可能要再对受

众的操作需求

进行深入调

查，把常用的

功能或者最想

要了解的内容

放在更显眼的

位置

Q1 Q2 Q3 Q4 Q5 Q6

User 7 使用体验还是

可以的；一开

始任务不熟

悉，使用一次

后上手很快

困难在于功能

分区不太清

晰，与内容整

合的方式有

关，与界面布

局或图表设计

没有太大关系

页面布局总体

的视觉效果还

行，简洁清

晰，最常用的

搜索栏和功能

按钮都放在了

页面中心最显

眼的位置，子

页面中也有很

清晰的菜单

栏、搜索栏以

及 icons 或功能

按钮

图标都挺好辨

认的；图标本

身设计很简

洁，有配文让

图标的识别更

清晰

对于页面布局

和图标的整体

感受是简洁，

特别是像

library 这种网

页，实用的、

简洁的设计更

好

顶部主菜单栏

的每个

category 集合

了很多内容，

不熟悉分区的

人使用体验可

能不会太好，

可以在这方面

进行优化（比

如作细分，或

者对于一些内

容的名称做更

改）

Q1 Q2 Q3 Q4 Q5 Q6

User 8 整体使用体验

让人满意；页

面内的所有东

西都很清楚，

例如“advanced

search"里面的

条目栏很整

齐、简洁

使用没有太大

的困难，挺顺

利

优点：清晰简

洁；感觉栏目

或功能键都有

对齐；背景和

主体也很突

出；把常用的

功能都放在比

较好找到的地

方。缺点：图

标设计虽然看

着很清晰，但

是作为功能链

接放在首页下

方占位优点太

大了

辨认图标很容

易，几乎没有

误解；配文和

对图标的理解

是一致的，感

觉图标还是能

让人比较直观

地知道每个功

能的含义或者

区别

整体使用流

畅，感觉设计

能符合使用者

的需求，例如

功能键和图标

都很醒目直

白；排版对

齐，在视觉上

给人感觉很舒

服

图标占位比较

大，感觉突然

视觉冲击有些

大，可以在配

色和大小排布

上进行调整


50

Q1 Q2 Q3 Q4 Q5 Q6

User 9 整体使用满

意；主体和背

景突出；菜单

栏分类名称会

对使用造成迷

惑

返回首页界面

多个途径，可

以提示更明显

页面右上角 My

Account 和

Search 放在一

起可以再区

分，页面内容

之间都有呈现

对齐，视觉上

清晰舒适

图标清晰好辨

认，稍有疑惑

的图标都可以

借助文字辨认

出含义

可以快速完成

任务，指引到

位；图标和功

能按钮也很好

找

中央搜索栏可

以窄一点；常

用的功能很多

收在菜单栏

category 的下

拉页面，可以

考虑在首页多

放些图标或功

能按钮作为链

接；少用的服

务可以不用图

标链接，放在

没那么显眼的

位置

Q1 Q2 Q3 Q4 Q5 Q6

User 10 使用体验基本

满意；图书馆

网站是以搜索

和信息提供为

主的网站，这

个界面设计排

版布局清晰

完成任务没有

遇到太多的困

难，都挺好

找；但有些功

能的归类不太

符合认知，比

如 “Remote

Access to E-

resources” 我

认为应该是放

在 “Services &

Facilities”这个

category 里面

版面设计在视

觉上是很清晰

的，有清晰的

菜单栏以及显

眼整齐的搜索

栏；子页面也

有整齐清晰的

左侧菜单栏等

辅助使用；但

是首页下方中

间两个以图标

链接为主的分

区可以合并在

一起，并且减

少一些使用频

率不高的功能

链接

图标认知没有

障碍，都挺好

辨认

菜单栏与

Footer 部分的

功能分类相

同，一一对

应，使用比较

方便；同时有

“Back to Top”

的图标设计，

便于使用者找

寻信息

可以整理一下

菜单栏的

categories，下

拉界面中的信

息很多且分类

有些乱；Footer

也可以改成菜

单栏的一个补

充，不一定要

重复菜单栏中

可提供的功能

链接；可以对

所有功能条目

增加按字母 A-

Z 搜索的功能


51

Q1 Q2 Q3 Q4 Q5 Q6

User 11 体验还行，个

别功能不太好

找

整体操作没有

太大的困难，

主要是常用功

能不是都放在

映入眼帘的位

置，菜单栏每

个类别的信息

归类不太符合

认知

Footer 的字体

有点小，主菜

单栏和首页中

的两个图标分

区大小不太均

衡，有点不平

衡的感觉；但

每个页面的

header 以及主

菜单栏、Footer

位置都很统

一，一定程度

上使操作便捷

图标都挺好辨

认，形状和功

能描述能对上

号，可以大概

知道图标对应

的功能是干嘛

用的，能够让

使用的人可以

比较容易地熟

悉每个功能

News 部分的几

个与 LRC 相关

的图标只有文

字提示标签，

没有统一的下

方文字说明，

最好能统一

可以在考虑一

下整体的配

色，让视觉感

受更好一些

Q1 Q2 Q3 Q4 Q5 Q6

User 12 使用体验一

般，找东西不

好找

分区不明确导

致有些操作很

迷茫，和界面

布局关系不是

太大，但是和

功能或链接的

展示方式有关

系

界面在布局上

还是整齐清晰

的，没什么毛

病

图标很好辨

认，是这个网

页界面的一个

优势，图案设

计得很好理

解，一定程度

上告知了使用

者某个图标对

应的服务，比

方说

“Catalogue”那

个图标帮助我

记得这是和搜

索所有纸质和

电子馆藏有关

的功能，和其

他功能，比如

“E-resources”这

类搜索所有可

以使用的电子

资源的功能，

是不一样的

首页搜索栏和

菜单栏的布局

大小和下面图

标部分的大小

不太一致，显

得有些重心下

移；子页面中

没有这个问

题，布局挺

好，整体一致

性也挺强

更喜欢左侧的

菜单栏，可以

考虑在首页增

加


52

Q1 Q2 Q3 Q4 Q5 Q6

User 13 使用流程是满

意的；“Remote

Access to E-

resources” 命

名以及放置的

category 不太

好，导致一开

始可能会有操

作上的疑惑和

卡顿

完成任务没有

太大的困难，

操作指引符合

使用类似网站

的使用习惯

总体上给人视

觉感受是清晰

的。学生或老

师使用 LRC 网

站最常用的功

能就是查资

料，搜索栏放

在首页中心最

显眼的位置很

大程度上方便

且加速了使

用。功能按钮

之类的也设计

在了很清晰的

位置；每个分

区看上去是上

下对齐的，

Header &

Footer 还有导

航在每个页面

中维持一致

性，操作和记

忆就可以更

快。

图标好辨认，

只是可能不会

很常用

没有太多其他

感受，视觉上

排版、图标以

及功能键都没

有什么问题，

清晰可辨认

分区和命名逻

辑不符合认知

或使用习惯

Q1 Q2 Q3 Q4 Q5 Q6

User 14 整体感觉

satisfactory；基

本在进入首页

后第一个呈现

的页面中就能

完成大部分的

任务，icons 以

及 functional

buttons 提供的

quick links 也设

计得挺好

“remote access

to e-resources”

不知道入口在

哪里（太深

了），首页下面

的图标中没

有，感觉有点

frustrating；不

确定

“databases”是

不是在“e-

resources”，靠

猜测，没有直

接的入口

It's visually

clear overall；

两个设计成图

标的链接分区

很简约，给整

个设计营造了

一个视觉放松

的区域，但是

放得太近了，

可以稍微分隔

开

图标都挺好辨

识，但是

graded reader

和 new titles 两

个图标反而是

texts 有点迷惑

基本上没有什

么补充的了，

主要还是之前

提到的点，排

版还是很整齐

的，一致性也

做的挺好

页面 title 可以

更大；常用的

主要功能可以

都设计成图

标，然后把图

标的位置往上

移，或者在

News&Activitie

s 的分区那里增

加一个侧方小

导航，链接到

每个分区


53

Q1 Q2 Q3 Q4 Q5 Q6

User 15 整体的操作，

如果我熟悉下

来，会觉得很

方便很满意,

但是首次使用

时，对英文的

理解会影响操

作

操作或界面使

用不太难，只

是英文命名和

理解的不太一

致，解读比较

困难

布局挺好，很

简约

图标很显眼而

且挺好辨识，

不会有不知道

是什么的情况

整体的排版和

图标设计很清

晰，整个浏览

变得很快很舒

服

可以再考虑配

色问题

Q1 Q2 Q3 Q4 Q5 Q6

User 16 界面整洁，留

白多，轻松舒

服，功能与设

计的感受统一

（信息服务类

网站）

对于第一次使

用网站的人来

说可能需要一

个“help”按钮或

者一些类似自

动客服的功能

视觉清晰，分

区之间的距离

合理，界面简

单，统一性

强，喜欢这种

风格

图标很好辨认,

图案含义与文

字能匹配，没

有认知误差

图标可以再小

一点，可以在

两个以图标为

主的分区加一

些类似概述的

文字来帮助理

解

可以设计一些

扁平化的动态

图标以吸引用

户

Q1 Q2 Q3 Q4 Q5 Q6

User 17 使用体验挺好

的，操作步骤

和整体的设计

都挺简单的

没有很多的困

难，但是有些

功能藏得太

深，不够直接

Visually clear,

menu and footer

remain

consistency, the

searching

section is

obvious

They are

relatively easy

to recognize

because what

they present can

reflect its

meaning that

shown as texts

Functional

buttons are

convenient to be

used

可以减少常用

功能的操作步

骤；考虑调整

页面配色提高

明亮度

Q1 Q2 Q3 Q4 Q5 Q6

User 18 使用满意度中

等偏上；主菜

单分类太泛，

advanced search

这个功能好

用，入口也挺

好找

难度更多在于

很多链接的命

名和用户理解

的意思不太对

应，其他还好

首页视觉上还

算清晰，但是

子页面更好，

有侧方导航，

返顶按钮，整

体视觉的一致

性强，简约

图标占位优点

大，个别相似

的基本靠文本

区分，但是系

统图标挺好

的；总的来说

看上去还是比

较简单好辨认

的

功能键的设计

比较好用，例

如：search，

my account，

back to top，还

有包括一些标

签按钮和选框

视觉上已经挺

好了，就是配

色可以明亮一

些，最好在首

页能有一个固

定在侧方的导

览/导航


54

Q1 Q2 Q3 Q4 Q5 Q6

User 19 我觉得可以一

开始适应之

后，整套的操

作都比较顺

滑。对于查找

资料来说，比

原先的 LRC 更

加简单。

我觉得还好，

因为正常来

说，在图书馆

查找电子和纸

质资料本身就

比较麻烦，比

如其中的分类

什么的。不过

可以通过输入

栏里面的提示

了解内容及功

能，让人能够

比较轻松地上

手。

整个页面的布

局比较简洁大

气，但是我觉

得里面有一些

割裂感。可以

看出来，就是

整个规划都是

比较平面的那

种，几个板块

分的也比较明

显。太合适。

图标都设计得

挺好的。然后

图标触发后区

域变小也比较

奇怪。触发后

变成绿色，如

果在其他地方

也有绿色呼应

一下会比较好

吧。比如最下

面列表框。

在主页的轮播

图片上面的那

个圆好像不是

很圆。然后

quick links 右下

角的 back to

top 不是很清

楚，如果是浅

灰底深灰字的

话，可能会好

一点。

感觉最下面的

那个列表可以

更精简一点，

比如做个伸缩

框；感觉它不

用占用太大的

空间。

Q1 Q2 Q3 Q4 Q5 Q6

User 20 整体使用感受

是满意的，分

区比较清晰；

有搜索栏，方

便了很多操

作，Footer 也

有对应的链接

没什么困难，

就是一开始找

VPN，和理解

的不一样

整体上是清晰

的，不是很密

集，有留白，

分类有标题，

简洁；子页面

有子菜单栏，

很清楚

辨认难度不

大，有些特别

好辨认，相似

的还是看得出

来有区别，结

合文字能理解

没啥看法，图

标风格很统

一，看上去也

挺舒服，但是

可以更新颖

视觉上很舒服

了，对齐和留

白都挺舒适，

配色也还行，

可以考虑色调

再高点

Q1 Q2 Q3 Q4 Q5 Q6

User 21 基本上是满意

的，没有太多

的问题

找 VPN 会混

淆，不知道是

在主菜单中的

哪个 category

主页面的板块

很清楚，图标

区域稍微有点

大；子页面没

什么问题，挺

好的；整体性

挺强

大部分都挺好

辨认，几个相

似的需要借助

文字理解，但

是能看出不同

没什么想法

了，都挺好的

图标区域可以

小一点点


55

Q1 Q2 Q3 Q4 Q5 Q6

User 22 非常满意，觉

得学会了操作

有一些困难；

“Advanced

Search” 很少会

留意到这个功

能，没想到这

个功能的用途

是可以多关键

词检索

蛮清晰；搜索

栏的标签不是

在一个层级关

系的；图标部

分把几个分区

的链接整合在

一起了，虽然

使用上会方

便，但是有可

能造成使用者

的疑惑

基本上系统图

标以及其他特

定的图标都挺

好辨认的

没什么需要补

充了，功能键

图标都很显眼

清楚，整体问

题不大

把主菜单的

How to 变成多

个教学视频，

涵盖更多常用

的功能教学，

放在首页中更

显眼的位置

上，让大家可

以自主学习使

用

Q1 Q2 Q3 Q4 Q5 Q6

User 23 相对还是满意

的，画面设计

挺好看，E-

resources 和 E-

journals 不知道

怎么区分，高

级搜索如果没

有提示比较不

好想到有弹出

界面

有一些，比如

Databases 的入

口不知道去哪

里找，没有提

示在 E-

resources 里面

视觉清晰，颜

色不混杂，和

校徽一致；布

局够大，图标

很大图标设计

很漂亮

明显不相似的

图标很好辨

认，相似图标

可以看出区别

的点，依靠文

字辅助辨认

图标相对于

Texts Below 有

些大，但是有

对齐，可以考

虑适度调整

我觉得可以在

左边可以加一

个隐藏的导

览，鼠标触及

就可以弹出

来，作为辅助

菜单，方便查

找目标

Q1 Q2 Q3 Q4 Q5 Q6

User 24 整体体验还可

以，熟悉任务

的话可以挺流

畅地完成

搜索栏上的文

字可能不会认

真留意，导致

不知道用哪个

功能

视觉上是比较

清晰的，菜单

栏的 categories

标签大小一

样，很整齐；

整体界面很整

洁；图标区域

视觉上很明显

图标的辨认蛮

顺利，首页图

标的配文看不

太懂

对分类不熟

悉，会让人迷

惑

在首页和子页

面有对于相关

功能的使用指

引


56

Q1 Q2 Q3 Q4 Q5 Q6

User 25 使用感觉大致

满意，对于各

种功能信息的

展示比较清

晰，结构清

晰，用户界面

挺好看

使用上没有什

么困难

视觉上清晰，

有比较清晰的

分级和分类

好辨认，图标

的设计很清楚

地反映了它的

功能

功能按钮的使

用性和文字有

关，菜单栏和

标签栏的文字

提示不够直

观，但是其他

的按钮，比如

"my account"

"back to top"，

挺好用

在分类界面可

以更直观地体

现这个分类的

作用；希望配

色可以再考虑

明亮一些

Q1 Q2 Q3 Q4 Q5 Q6

User 26 比较满意，没

用过的服务会

犹豫在什么位

置找

有点困难，我

觉得"remote

access to e-

resources"是在

Services 里面，

“All Fields”

下拉选框不知

道是什么意

思，其他没什

么难度

视觉清晰, 搜

索框的基本功

能都很显眼，

主菜单里面的

信息在 Footer

有清晰的展

示，比较清楚

对我来说图标

都挺好辨认

的。部分图标

结合文字之后

都能正确理解

他们的含义，

大部分图标仅

看图案就知道

对应功能，比

如"My

Account"

功能键的文字

大小合适，有

返顶按钮会比

较方便

可以尽可能多

放图标，把常

用功能都做成

图标，不常用

的功能的图标

去掉，分类也

可以再结合学

生和老师的理

解进行调整

Q1 Q2 Q3 Q4 Q5 Q6

User 27 使用体验一般

般，没有特别

吸引的点，但

是使用上没有

造成太大困难

找东西不算太

难，可能没用

过的一些功能

在找寻的时候

思考时间比较

长

视觉上还是很

清楚舒服的，

就是导航栏分

区让我有点费

解

图标整体设计

还挺好看的，

没有太大的辨

认问题，无功

无过的感觉

功能键和图标

挺好用看得清

右上角的搜索

功能很重要，

对于不熟悉功

能的同学会比

较方便使用；

VPN 命名及分

区不合理，可

以考虑放在

Services 里面


57

Q1 Q2 Q3 Q4 Q5 Q6

User 28 Overall

Satisfactory.

The design is

clear and clean,

so all the

functions are

shown clearly in

each page.

Not much. They

are generally

easy to finish.

The layout is

visually clear

because they are

align, and there

is reasonable

white

sapce(negative

space). Also, the

layouts in

different

secondary pages

are all in two-

column design,

which make the

menu more

obvious and

easier for the

user to access to

The icons are

overall easy to

be recognized.

They are big

enough, and the

patterns can

reflect what the

texts below

show, which

means the

meanings can

match what they

present.

Layouts, as

what I

mentioned, are

quite consistent

and visually

clear; the icons

can be

recognized

easily; the

functional

buttons are

placed in some

obvious place

like below or on

the right side of

the searching

bar; and all the

elements look

align

Maybe the

further

optimization

can cosider

more about the

logic of menu

and the

flowsheets of

the pages

Q1 Q2 Q3 Q4 Q5 Q6

User 29 基本满意，操

作还好，没有

太多设计混乱

造成的阻碍

第一次接触的

任务，如果不

是非常明显的

（入口比较深

的），需要多花

时间

排版我觉得很

清晰，条条框

框，哪里是什

么看上去挺一

目了然的。

图标除了大了

点没什么问

题，挺好辨认

的，能和文字

联系上

功能键，图

标，链接，很

显眼，基本上

想找东西不会

因为看不见看

不清而找不

到；排版也挺

一致的，每个

页面都知道是

和图书馆相关

的, 所以使用

起来还是很方

便很快的

我觉得已经挺

好了，How to

可以变成单独

的页面进去之

后有每个功能

的指南


58

Q1 Q2 Q3 Q4 Q5 Q6

User 30 整体使用还是

挺满意的，设

计上挺符合使

用需求的，找

东西挺方便

一开始不太熟

悉功能的区

分，不能明确

每个菜单底下

有什么，需要

多看几遍

排版我觉得很

整齐，每个页

面布局基本上

都是一样的，

顶部菜单，底

部 Footer，子

页面还有左侧

的导航，用起

来挺方便，看

着也比较舒服

所有的图标都

比较显眼，给

辨认提供了便

利吧，具体的

辨认我觉得也

没有什么问

题，能看懂

排版还可以，

就是选择功能

的时候，觉得

字体可以再大

一些；功能键

上面的字也可

以再大一点

我会希望一开

始就看到活动

消息（相当于

海报式展示），

搜索栏的位置

可以变动；标

题可以再大一

点


59

Appendix G

Coding Results of Interview Transcripts – Frequency Table of the Keywords

Question Responses Content Frequency Detail_1 Frequency Detail_2 Frequency 1 30 Overall

Satisfaction 28 Positive 22

Neutral 5 Negative 1

Reasons 28 2 30 Degree of

Difficulty 14

Reasons 32 Unfamiliarity

11

Problems of Guidance

2

Information Classification

7

Language 7 Design 5

3 30 Overall Feelings

26 Advantage 40 The Consistency of The Layouts

14

Core Contents

12

Alignment of Interface Elements

10

Distance and Title Guidance

5

Problems 15 The Proportion of Different Blocks

8

4 30 Overall Feelings

0 Advantage 44 The Appearances of The Icons

28

Icons Are Conspicuous

6


60

Convey the Meanings

28

Texts Below or Labels

13

Problems 14 5 30 Design 23

Other 7 Other Advantages

3

Other Problems

4

6 30 Design 13 Layout Design

8

Functional Icons Design

5

Other 23 Information Classification

5

Guidance 5 Colors 7 Font Size 6

· 2020-05-26 · Easy-to-use Prototype Design for UIC LRC Web Interface . BY . YIN Ziyou ....

Documents

Transcript of · 2020-05-26 · Easy-to-use Prototype Design for UIC LRC Web Interface . BY . YIN Ziyou ....