The model of quality assessment of automatically adjusted responsive web pages and applications
The paper presents a model, which can be applied to Graphical User Interface testing. The model is dedicated especially to web pages and web applications created using Responsive web design. The procedure is based on expert method and cognitive walkthrough. The paper outlines contain the descripti...
Збережено в:
| Дата: | 2013 |
|---|---|
| Автор: | |
| Формат: | Стаття |
| Мова: | English |
| Опубліковано: |
Інститут проблем штучного інтелекту МОН України та НАН України
2013
|
| Назва видання: | Искусственный интеллект |
| Теми: | |
| Онлайн доступ: | http://dspace.nbuv.gov.ua/handle/123456789/85215 |
| Теги: |
Додати тег
Немає тегів, Будьте першим, хто поставить тег для цього запису!
|
| Назва журналу: | Digital Library of Periodicals of National Academy of Sciences of Ukraine |
| Цитувати: | The model of quality assessment of automatically adjusted responsive web pages and applications / M. Plechawska-Wojcik // Искусственный интеллект. — 2013. — № 3. — С. 300–306. — Бібліогр.: 16 назв. — англ. |
Репозитарії
Digital Library of Periodicals of National Academy of Sciences of Ukraine| id |
irk-123456789-85215 |
|---|---|
| record_format |
dspace |
| spelling |
irk-123456789-852152015-07-22T03:02:31Z The model of quality assessment of automatically adjusted responsive web pages and applications Plechawska-Wojcik, M. Интеллектуальные системы планирования, управления, моделирования и принятия решений The paper presents a model, which can be applied to Graphical User Interface testing. The model is dedicated especially to web pages and web applications created using Responsive web design. The procedure is based on expert method and cognitive walkthrough. The paper outlines contain the description of responsive web design, used methodology, GUI evaluation process and the application description. У статті наведено модель, яка може бути застосована для тестування графічного інтерфейсу користувача. Особливо модель призначена для веб-сторінок та веб-додатків, створених за допомогою використання технологій адаптивного веб-дизайну. Процедура заснована на методі експертного і когнітивного покрокового огляду. У статті наведено опис адаптивного веб-дизайну, методології, що використовується, процесу оцінки графічного інтерфейсу користувача інтерфейсу та додатка. В статье представлена модель, которая может быть применена к тестированию графического интерфейса пользователя. Модель предназначена особенно для веб-страниц и веб-приложений, созданных с ис- пользованием технологий aдаптивнoгo (отзывчивoгo) веб-дизайнa. Процедура основана на методе экспертного и когнитивного пошагового обзора. В статье изложенo описание отзывчивoгo веб-дизайнa, использованнoй методологии, процессa оценки интерфейса и приложения. 2013 Article The model of quality assessment of automatically adjusted responsive web pages and applications / M. Plechawska-Wojcik // Искусственный интеллект. — 2013. — № 3. — С. 300–306. — Бібліогр.: 16 назв. — англ. 1561-5359 http://dspace.nbuv.gov.ua/handle/123456789/85215 519.4 en Искусственный интеллект Інститут проблем штучного інтелекту МОН України та НАН України |
| institution |
Digital Library of Periodicals of National Academy of Sciences of Ukraine |
| collection |
DSpace DC |
| language |
English |
| topic |
Интеллектуальные системы планирования, управления, моделирования и принятия решений Интеллектуальные системы планирования, управления, моделирования и принятия решений |
| spellingShingle |
Интеллектуальные системы планирования, управления, моделирования и принятия решений Интеллектуальные системы планирования, управления, моделирования и принятия решений Plechawska-Wojcik, M. The model of quality assessment of automatically adjusted responsive web pages and applications Искусственный интеллект |
| description |
The paper presents a model, which can be applied to Graphical User Interface testing. The model is dedicated
especially to web pages and web applications created using Responsive web design. The procedure is based
on expert method and cognitive walkthrough. The paper outlines contain the description of responsive web
design, used methodology, GUI evaluation process and the application description. |
| format |
Article |
| author |
Plechawska-Wojcik, M. |
| author_facet |
Plechawska-Wojcik, M. |
| author_sort |
Plechawska-Wojcik, M. |
| title |
The model of quality assessment of automatically adjusted responsive web pages and applications |
| title_short |
The model of quality assessment of automatically adjusted responsive web pages and applications |
| title_full |
The model of quality assessment of automatically adjusted responsive web pages and applications |
| title_fullStr |
The model of quality assessment of automatically adjusted responsive web pages and applications |
| title_full_unstemmed |
The model of quality assessment of automatically adjusted responsive web pages and applications |
| title_sort |
model of quality assessment of automatically adjusted responsive web pages and applications |
| publisher |
Інститут проблем штучного інтелекту МОН України та НАН України |
| publishDate |
2013 |
| topic_facet |
Интеллектуальные системы планирования, управления, моделирования и принятия решений |
| url |
http://dspace.nbuv.gov.ua/handle/123456789/85215 |
| citation_txt |
The model of quality assessment of automatically adjusted responsive web pages and applications / M. Plechawska-Wojcik // Искусственный интеллект. — 2013. — № 3. — С. 300–306. — Бібліогр.: 16 назв. — англ. |
| series |
Искусственный интеллект |
| work_keys_str_mv |
AT plechawskawojcikm themodelofqualityassessmentofautomaticallyadjustedresponsivewebpagesandapplications AT plechawskawojcikm modelofqualityassessmentofautomaticallyadjustedresponsivewebpagesandapplications |
| first_indexed |
2025-07-06T12:22:52Z |
| last_indexed |
2025-07-06T12:22:52Z |
| _version_ |
1836900232156151808 |
| fulltext |
ISSN 1561-5359 «Искусственный интеллект» 2013 № 3 300
4P
UDC 519.4
M. Plechawska-Wojcik
Lublin University of Technology, Poland
Poland, Nadbystrzycka 38d, 20-618 Lublin
The Model of Quality Assessment of Automatically
Adjusted Responsive Web Pages and Applications
M. Плехавска-Вуйцик
Люблинский технический университет, Польша
Польша, 20-618 Люблин, Надбыстрзицка 38д, 20-618
Модель оценки качества автоматически настраивающихся
отзывчивых веб-страниц и веб-приложений
M. Плехавска-Вуйцик
Люблінський технічний університет, Польща
Польща, 20-618 Люблін, Надбистрзіцька 38 д
Модель оцінки якості адаптивних веб-сторінок
та веб-додатків
The paper presents a model, which can be applied to Graphical User Interface testing. The model is dedicated
especially to web pages and web applications created using Responsive web design. The procedure is based
on expert method and cognitive walkthrough. The paper outlines contain the description of responsive web
design, used methodology, GUI evaluation process and the application description.
Key words: responsive web design, RWD, RWD, GUI usability, user experience.
В статье представлена модель, которая может быть применена к тестированию графического интерфейса
пользователя. Модель предназначена особенно для веб-страниц и веб-приложений, созданных с ис-
пользованием технологий aдаптивнoгo (отзывчивoгo) веб-дизайнa. Процедура основана на методе экспертного
и когнитивного пошагового обзора. В статье изложенo описание отзывчивoгo веб-дизайнa, использованнoй
методологии, процессa оценки интерфейса и приложения.
Ключевые слова: адаптивный веб-дизайн, RWD, RWD, удобство графического интерфейса,
удобство работы.
У статті наведено модель, яка може бути застосована для тестування графічного інтерфейсу користувача.
Особливо модель призначена для веб-сторінок та веб-додатків, створених за допомогою використання
технологій адаптивного веб-дизайну. Процедура заснована на методі експертного і когнітивного покрокового
огляду. У статті наведено опис адаптивного веб-дизайну, методології, що використовується, процесу оцінки
графічного інтерфейсу користувача інтерфейсу та додатка.
Ключові слова: адаптивний веб-дизайн, RWD, RWD, зручність графічного інтерфейсу,
зручність роботи.
Introduction
Computer market gain certain stability. According research [1] most of people (in USA)
own laptop or desktop computer. However, more and more people buy also smartphones and
tablets. This trend of rapid adoption of smartphones and tablets will be continued in the near
future. That is why it is very important to adapt web applications and web paged to require-
ments of growing number of mobile users. Nowadays it is more important than never to design
cross-channel websites [2], websites prepared to be accessed from a myriad of different devices.
The Model of Quality Assessment of Automatically Adjusted Responsive Web Pages...
«Штучний інтелект» 2013 № 3 301
4P
Responsive web design (RWD) can be treated as a solution to the problem of necessity of
automatically pages adjustment to all type of devices, like desktop computers, notebooks, tables
or smartphones. The term “Responsive web design” was proposed by Ethan Marcotte in 2010 [3].
In 2012 “responsive design” was declared to be the second development trend of the year [4].
The goal of RWD is to deliver a quality experience to users no matter how large or small
the display they use is. But RWD is not only about changing the way elements are displayed in
a web page: RWD is also about how to provide easy reading and navigation with a minimum
of resizing, panning, and scrolling across a wide range of different devices. Responsive web
design mixes three different techniques, fluid grids, flexible images, and media queries, all of
them based on the use of CSS (Cascading Stylesheets).
GUI of the responsive design web page needs to be checked and tested by users working
on different type of devices. The site designed in this way should be adjusted to different kind
of screen resolutions (computer monitors, smart phones, tablets, etc). It should be readable
with a minimum of resizing, panning, and scrolling.
To check users’ viewing experience GUI quality evaluating methods might be used.
During such case study users experience also needs to be regarded.
Novice users interacting with a system for the first time prefer simple actions and
ease of learning [5], but their behaviour and work quality changes as their experience with
the system increases. This is an important point of view when evaluating GUI quality over
time, but to setup such a study requires observation over time and lots of resources [6],
which are often hard or even impossible to obtain.
An expert analysis in combination with cognitive walkthrough seems to be the most
reliable method in case of assessment of responsive design web page GUI quality. As it is
shown in the studies [7] in most cases group of several experts using the adequate
methodology is able to detect and correct over 85% of errors in software – this applies also
to errors in GUI quality. It should be noted that testing can never completely identify all
the defects within software [8].
1 Responsive application
The example web page was created using Foundation framework dedicated to responsive
web design. The web page should be readable with a minimum of resizing, panning, and scrol-
ling. It was created to present user interface navigation mechanism and to get know users viewing
experience.
The web page is simple, it does not have extensive functionality. It contains several
main sections:
– Articles – extended thematic articles including photos.
– Gallery – several galleries each containing a collection of photos
– Form – typical web form composed of several questions.
The home page contains news shortcuts and links to the remaining contents of the page.
The menu section is placed on the left side of the page. Mobile and smartphone
users, however, can see the menu at the top of the screen to make it more readable.
Fig. 1 presents an example screen of the web page. The screen contains the section of
articles. Fig. 1a) presents a screenshot taken on a computer and fig 1b) – on a mobile phone.
The same page is displayed slightly different at those devices. The location and look of menu
is different as well as the size of figures.
Differences between web pages adjusted to computers and to mobile phones can be also
seen in Fig. 2 and 3. Those figures present mockups of the two chosen web pages. Fig. 2a) and
Fig. 3a) present mockup dedicated to computers and tablets with resolution of minimal width
768 px, whereas Fig. 2b) and Fig. 3b) show mockups dedicated to smartfphones with small
screens (maximal width: 767 px).
Plechawska-Wojcik M.
«Искусственный интеллект» 2013 № 3 302
4P
a) b)
Figure 1 – Sample screenshot of the web page (source: own work)
a) b)
Figure 2 – Sample mockup of the home page (source: own work)
a) b)
Figure 3 – Sample mockup of the gallery page (source: own work)
The Model of Quality Assessment of Automatically Adjusted Responsive Web Pages...
«Штучний інтелект» 2013 № 3 303
4P
It is important to design the application well. One need to consider different resolutions at
this stage to be sure that the displayed page will be adjusted to desired resolutions and equip-
ments. Properly done project can be easily transformed into an application using responsive web
design.
One should consider a place and layout of menu, construction of navigation and a way
of pictures display.
The page is always adjusted to the screen resolution, so horizontal scroll is never dis-
played. The menu dedicated to mobile phones also differs – it has a form of the dropdown list
and it is located at the top of the web page. Menu dedicated to higher screen resolution devices
has a form of list and it is located at the left side of the web page. Also the size and location of
figures is different.
2 Applied methods
2.1 Expert analysis
Expert analysis is one of the most widely used method used in application testing.
Experts, while using the application, check and mark the predefined areas. Those areas are
defined to help to examine application compliance with interface design guidelines (such
as Nielsen-Molich heuristics [9]) and to detect potential problems.
Each of those predefined areas can be divided into several more detailed sub-areas.
What is more, they usually have detailed questions assigned to help experts to cover more
important aspects of GUI quality [10].
During the analysis the whole tested system is treated as a black box where only the inputs,
outputs and specification are visible. Consequently, experts run only the functional testing.
They focus on executing the system functions and accessing their input and output data [3].
Therefore system functionality is determined by observing the outputs to corresponding inputs
and the implementation details are not considered [8].
Contrary to the widespread assumption, experts usually do not acquire better results
in performing specific tasks in the tested system. They usually do not know the system
before testing, they have no experience regarding this particular application. However, their
expert status is based on extended experience with different kind of software. This fact, as
proven by studies [11], [12], allows them to perform tasks faster than the novices and to
spend less time handling the errors. Moreover, experts know user interface design fundamentals
and principles.
2.2 Cognitive walkthrough
Simplified cognitive walkthrough is one of the expert methods of usability and GUI
quality testing. It emphasizes the ease of interface learning as well as viewing experience
during the initial contact with the system [10]. This methods might be successfully used in
combination with the expert analysis method.
This method is based on few tasks, which user will perform during his work with an
application (e.g. making a purchase) [13]. Each task is divided into individual steps, which
are analyzed according to the following questions:
– Does the user know what to do during the analyzed step?
– If the action performed by user is correct, is he aware of it?
– If the action performed by user is correct, does he feel he is getting closer to reach
the goal?
The difficulty of each step is usually evaluated using a Likert scale of 1 to 5, with 1
meaning ‘very easy’, 5 – ‘very difficult’.
Plechawska-Wojcik M.
«Искусственный интеллект» 2013 № 3 304
4P
In contrast to other GUI quality assessment methods, the main goal of the cognitive
walkthrough is to study the flow of the processes undertaken by user.
Cognitive walkthrough method has gained its popularity due to the ability of performing
relatively quick analysis at low cost. Moreover, it may be used at different phases of the appli-
cation design. However, cognitive walkthrough is sometimes regarded [5] as a method which de-
tects potential problems with the interface instead of already existing problems. Therefore, it is
also used in conjunction with other general tests as an addendum identifying potential problem
areas.
3 The testing method
In order to obtain the results in a web page testing, the conglomerate of expert analysis
and cognitive walkthrough was proposed.
The expert analysis criteria are presented in Table1 and Table 2. Table 1 shows the
detailed list of areas and subareas with questions assigned to each point. The group of main
areas contains: Application interface, Navigation, Data structure and Data input. The list is
a modified version of the list called “LUT list” which we proposed in [14]. Modification
consists in adjusting sections concerning different devices and resolutions. Accordingly,
Table 2 presents the grading scale used to assess each evaluated assessed area.
Table 1 – The expert analysis list of predefined testing areas with questions assigned
Application interface
Is the layout readable?
Is it adjusted to different resolutions?
Is it adjusted to mobile devices?
Is it consistent?
Layout
Does it support task implementation?
Navigation
Is the access to all elements of menu easy and intuitive?
Is the use of menu easy?
Ease of use
Is the localization of menu intuitive?
Menu hierarchy Isn’t the menu hierarchy too complicated?
Is the navigation structure intuitive and understandable for users?
Is the navigation well adjusted to the screen resolution?
Navigation
structure
Is it well planned?
Screen elements Do they support the navigation?
Data structure
Is the access to all sections of an application easy and intuitive? Ease of use
Is the access to all functions of an application easy and intuitive?
Information
hierarchy
Isn’t the information hierarchy too complicated?
Is the information structure understandable?
Is it consistent?
Information
structure
Is it well planned?
Data input
Is the data validated by the form elements?
Do the forms have elements acting as hints for the input data (e.g. on
format or data range)?
Data
Can an average user fill in the form easily?
Are they designed in a readable way?
Are they adjusted to the mobile devices?
Forms
Do they allow user to input all of the necessary data?
The Model of Quality Assessment of Automatically Adjusted Responsive Web Pages...
«Штучний інтелект» 2013 № 3 305
4P
Table 2 – The grading scale applied to the expert analysis list
Grade Description
1 Critical usability errors were observed, preventing normal usage or discouraging user from using
the application.
2 Serious usability issues were encountered, which may prevent most users from task realization.
3 Minor usability issues were observed, which if accumulated may have negative impact on user performance.
4 Single minor usability issues were observed, which may have negative impact on user work
quality (e.g. poor readability).
5 No usability issues influencing either user performance or work quality were identified.
The cognitive walkthrough involves three scenarios containing tasks to perform for
users. They are:
– Run the web page, find the specified article
– Find and display the specified photo in the gallery
– Fill out the data form
need to performed those task and answer several questions. They are:
– The type of used device
– The screen resolution
– The type of web browser
– Number of moves to accomplish the task
– Number of mistakes
– Additional remarks
The results of analysis performed using those two methods will present the users
experience and GUI quality of prepared responsive design web page.
4 Proposed analysis process
Responsive web page should be analyzed in a special way. The analysis process is
recommended to be conducted by experts experienced with GUI quality analysis.
The example of the analysis process could be described using the presented application.
The analysis could be composed of two steps. The first one is an expert analysis, the second
one – the cognitive walkthrough. Both analyses were performed using the survey.
The first section enables to analyse the GUI quality, divided into four areas: Application
interface, Navigation, Data structure and Data input.
The second section regards the cognitive walkthrough composed of three tasks. They are
presented in Fig.4. According the presented BPMN (Business Process Modelling Notation)
process, users have to find the specified article, find and select the specified photo in one of
galleries and also fill out and submit the data form.
Figure 4 – The testing process of the web page (source: own work)
After fulfilling their tasks, users would be asked about their viewing experiences during
accessing web page on different devices. What is more, they could give information about number
of moves and mistakes they done. They should also share their opinion about responsive web
design.
Plechawska-Wojcik M.
«Искусственный интеллект» 2013 № 3 306
4P
Summary
Responsive web design enables to create web pages, which can be viewed on different
devices in similar way. Of course, due to devices diversification, it is impossible to obtain exactly
the same web page look and user experience on all devices. However, the exact page look is no
more desired result. The aim is to adapt the page to different users’ scenarios, not for different
screens. Website needs to adapt to users’ interaction patterns changes.
Responsive web design helps to obtain this goal. Users do not need to install anything
extra or to set any properties. They can use one common interface. However, one should be
aware that the only thing certain about the future is that web design is not predictable. Its
development will alway be adjusted to the technology and device trends.
Future works will include a case study on presented responsive web design project. The
analysis process will regard both methods: Expert analysis and Cognitive walkthrough.
Literature
1. Smashing Magazine, 2013. Internet: http://www.smashingmagazine.com/. (Visited 8/2/2013).
2. Resmini, A. Pervasive Information Architecture: Designing Cross-Channel User Experiences /
A. Resmini, L. Rosati. – Morgan Kaufmann Publishers, 2011.
3. Marcotte E. Responsive Web Design. A list apart, 2010. issue 306. Internet : http://alistapart.com/ article/
responsive-web-design. (Visited 2/2/2013).
4. Grannell C. 15 top web design and development trends for 2012. net magazine. Internet :
http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012. (Visited 2/2/2013).
5. Shneiderman B. Designing the user interface. – Addison-Wesley Longman, 1998..
6. Phung, Q.M. Identifying Usability Problems in relation to User Experience with System and Tests, 2007.
7. Krug, S. Don't Make Me Think! A Common Sense Approach to Web Usability. – Que, New York, 2000.
8. Pan J. Software Testing. – 1999. http://www.ece.cmu.edu/~koopman/des_s99/sw_testing. (Visited 10/2/2013).
9. Nielsen, J., Molich, R., 1990. Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf., 249-256.
10. Laskowski M. Proposals for application interface testing methods. Informatyka Automatyka Pomiary w
Gospodarce i Ochronie Środowiska 4b/2012: 21–24 (in Polish), 2012.
11. Howden W.E. Functional program Testing and Analysis. McGraw-Hill, 1987.
12. Jochen P. Errors in computerized office work: Difference between novice and expert users / P. Jochen et al. //
ACM SIGCHI Bulletin. – 1991.
13. Wharton C. The cognitive walkthrough method: A practitioner’s guide / Wharton, C., et al. // Usability
inspection methods. – New York, NY: John Wiley & Sons Inc., 1994.
14. Milosz M. Quality Improvement of ERP System GUI Using Expert Method: a Case Study / Milosz M.,
Plechawska-Wojcik M., Borys M., Laskowski M. // 6th International Conference on Human System
Interaction, in print, 2013
15. Dillon A. An empirical comparison of the usability for novice and expert searchers of a textual and a
graphic interface to an art-resource database / A. Dillon, M. Song // Digital Information. – 1997.
16. Koyani S. Research-Based Web Design & Usability Guidelines / S. Koyani, R.W. Bailey, J.R. Nall. –
Computer Psychology, 2004.
RESUME
M. Plechawska-Wojcik
The Model of Quality Assessment of Automatically Adjusted
Responsive Web Pages and Applications
The main goal of the presented case study was to assess capabilities of Responsive
Web Design (RWD) and to determine the user experience of RWD web pages. The case
study was based on two methods (expert analysis and cognitive walkthrough) applied on
web experienced users using different devices like computers, smart phones, tablets.
Obtained results confirm the effectiveness of RWD. Low number of errors and
quickly completed tasks prove that RWD can be successfully applied in practice.
The paper is received by the edition 18.04.2013.
|