This work builds the required conceptual model for implementing adaptation systems intended to provide a personalized navigation experience for any user. To this end, aspects such as the users’ needs, preferences, and navigational behaviour are taken into account in order to select the adaptation techniques to be applied for each particular user. The validity of the proposed conceptual model to provide the necessary components and mechanisms for implementing suitable web personalization systems is shown by means of a case study.

1. Laboratory of Human-Computer Iinteraction
for Special Needs
J. Eduardo Pérez, Xabier Valencia, Myriam Arrue and Julio Abascal
University of the Basque Country (UPV/EHU)
Elaborating a Web Interface
Personalization Process
: www.jeduardoperez.info
: @j_eduardoperez
: juaneduardo.perez@ehu.eusSeptember 7th 2015, Vilanova I la Geltrú (Spain)
Session 9: Interface Design
XVI International Conference on HCI (Interacción 2015)

2. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Adapting the Web
for Accessibility
• Systems for automated adaptation of
web interfaces (transcoders)
– no intervention of content authors
• Invented to help people with disabilities
access inaccessible Web pages
• Provide personalized navigation
experiences for any user
– adapting website content, layout and
structure
Valencia, X., Arrue, M., Pérez, J. E. and Abascal, J. (2013) User individuality
management in websites based on WAI-ARIA annotations and ontologies. Conf. on
Web Accessibility (W4A ’13), article 29.
2
/
18

3. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Motivation
Laboratory of Human-Computer
Iinteraction for Special Needs
• Adapting the Web is a complex process
– not only technologically but also at conceptual level
> Conceptual model for abstraction:
– better comprehension of the adaptation process
– facilitate the design of better modular tools
– adapt the Web for each individual and not for stereotypes
3
/
18

4. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Why adapting the Web
is complex?
A) Process taking into account multiple factors (user characteristics, required
adaptations,…) during different phases (annotation, adaptation,…) [1]
B) Select appropriate adaptations to be applied
– cover full range of diversity among users or basic stereotypes?
> Based on user needs: blind [2], motion impaired [4], …
> Based on user preferences [5]: text size definition, line-spacing, magnification,…
> Based on user behaviour [3]: performance, assistive technology,…
[1] Asakawa, C., Takagi, H. (2008) Transcoding. Web Accessibility: A foundation for Research (Springer), 231-261.
[2] Bigham, J. P., Kaminsky, R. S., Ladner, R. E., Danielsson, O. M. and Hempton G. L. (2006) WebInSight: making web images accessible. ACM Conf. on
Computers and Accessibility (ASSETS '06), 181-188
[3] Gajos, K. Z., Wobbrock, J. O., Weld, D. S. (2008) Improving the performance of motor-impaired users with automatically- generated, ability-based interfaces.
SIGCHI Conf. on Human Factors in Computing Systems (CHI '08), 1257-1266.
[4] Mankoff, J., Dey, A., Batra, U., Moore, M. (2002) Web accessibility for low bandwidth input. ACM Conf. on Computers and Accessibility (ASSETS '02), 17-24.
[5] Richards, J. T., Hanson V. L. (2004) Web accessibility: a broader view. ACM Conf. on World Wide Web (WWW ’04), 72-79.
4
/
18

5. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Conceptual model:
COMPONENTS
Web_Interface
• Presenta5on
• Naviga5on
• Content
Annotated_WebInterface
• Annotated_Presenta5on
• Annotated_Naviga5on
• Annotated_Content
Adapted_WebInterface
• Adapted_Presenta5on
• Adapted_Naviga5on
• Adapted_Content
Personalized_WebInterface
• Personalized_Presenta5on
• Personalized_Naviga5on
• Personalized_Content
Adapta5on_Technique
• Presenta5on
• Naviga5on
• Content
...
User_Model
• User_Needs
• User_Preferences
• User_Behaviour
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta5on_Technique
5
/
18

6. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Conceptual model:
TRANSFORMATIONS
Web_Interface
• Presenta/on
• Naviga/on
• Content
Annotated_WebInterface
• Annotated_Presenta/on
• Annotated_Naviga/on
• Annotated_Content
1
Adapted_WebInterface
• Adapted_Presenta5on
• Adapted_Naviga5on
• Adapted_Content
annota/on
(annota/on_language,
Web_Interface)
Web interface
annotation process
Set of elements the user interact
within an original web site
Original web interface
semantically annotated
Personalized_WebInterface
• Personalized_Presenta5on
• Personalized_Naviga5on
• Personalized_Content
Adapta5on_Technique
• Presenta5on
• Naviga5on
• Content
...
User_Model
• User_Needs
• User_Preferences
• User_Behaviour
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta5on_Technique
6
/
18

7. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Conceptual model:
TRANSFORMATIONS
Web_Interface
• Presenta5on
• Naviga5on
• Content
Annotated_WebInterface
• Annotated_Presenta/on
• Annotated_Naviga/on
• Annotated_Content
1
Adapted_WebInterface
• Adapted_Presenta/on
• Adapted_Naviga/on
• Adapted_Content
annota5on
(annota5on_language,
Web_Interface)
Adaptation techniques selection
and web interface adaptation
adapta/on
(User_Model,
Adapta/on_Repository,
Annotated_WebInterface)
2
Original web interface
semantically annotated
Personalized_WebInterface
• Personalized_Presenta5on
• Personalized_Naviga5on
• Personalized_Content
Adapta/on_Technique
• Presenta/on
• Naviga/on
• Content
...
User_Model
• User_Needs
• User_Preferences
• User_Behaviour
Adapta/on_Repository
• Core_Adapta/on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta/on_Technique
Contains all adaptation
techniques sorted by
needs, preferences and
interaction strategies
Parameters that characterize
a user and determine the
adaptations to be applied
Adapted version of the web
after applying adaptations
7
/
18

8. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Conceptual model:
TRANSFORMATIONS
Web_Interface
• Presenta5on
• Naviga5on
• Content
Annotated_WebInterface
• Annotated_Presenta5on
• Annotated_Naviga5on
• Annotated_Content
Adapta/on_Technique
• Presenta/on
• Naviga/on
• Content
...
Adapted_WebInterface
• Adapted_Presenta/on
• Adapted_Naviga/on
• Adapted_Content
Personalized_WebInterface
• Personalized_Presenta/on
• Personalized_Naviga/on
• Personalized_Content
User-tailored web interface
generation process
preferences_defini/on
(User_Model,
Adapta/on_Repository,
Adapted_WebInterface)
3
User_Model
• User_Needs
• User_Preferences
• User_Behaviour
Adapta/on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta/on_Technique
• Behaviour_Adapta5on_Technique
adapta5on
(User_Model,
Adapta5on_Repository,
Annotated_WebInterface)
2
Contains all adaptation
techniques sorted by
needs, preferences and
interaction strategies
Parameters that characterize
a user and determine the
adaptations to be applied
User-tailored web interface
considering user preferences
Adapted version of the web
after applying adaptations
8
/
18
1
annota5on
(annota5on_language,
Web_Interface)

9. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
[1] Valencia, X., Arrue, M., Pérez, J. E. and Abascal, J. (2013) User individuality management in websites based on WAI-ARIA annotations and ontologies.
Conf. on Web Accessibility (W4A ’13), article 29.
[2] Pérez, J. E., Arrue, M., Valencia, X. and Moreno, L. (2014) Exploratory study of web navigation strategies for users with physical disabilities. Conf. on
Web Accessibility (W4A ’14), article 20.
Categories
Adapta/on
Techniques
for
physically
impaired
users
Content
(1)
Add
hot
area
around
hyperlinks
(2)
Use
stretchtext
in
main
content
(3)
Incorporate
specific
scrolling
icons
on
each
page
(4)
Incorporate
buUons
for
browser
“Back”
and
“Forward”
func5onali5es
(5)
Remove
walking
menus
(6)
Avoid
“click
and
drag”
elements
(e.g.,
spinners)
(7)
Avoid
double-­‐clicking
elements
Presenta5on
(8)
Define
large
clickable
area
for
links
and
buUons
in
a
visible
way
(9)
Define
links
and
buUons
well
separated
(10)
Hierarchically
structure
content
(11)
Break
pages
into
chunks
of
no
more
than
one
or
two
screens
Naviga5on
(12)
Provide
naviga5on
bars
(13)
Provide
quick
access
to
different
topics
within
a
website
(14)
Provide
an
index
with
informa5on
in
the
page
(15)
Create
a
table
of
contents
for
website
(16)
Provide
internal
links
to
important
content
on
the
page
(e.g.,
return
to
the
top
of
page)
(17)
Provide
skip
links
(e.g.,
to
main
content)
(18)
Disable
non-­‐recommended
links
(e.g.,
banners)
> Proposed model is valid for
implementing suitable web
personalization systems?
• Based on 2 previous works:
1) set of 99 adaptation techniques
from literature for application to
cognitive, physical and sensory
impairments [1]
2) study of web navigation strategies
with 11 physically impaired users [2]
>> classify adaptations techniques
Case study:
Physically impaired users
9
/
18

10. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
> Proposed model is valid for
implementing suitable web
personalization systems?
[1] Valencia, X., Arrue, M., Pérez, J. E. and Abascal, J. (2013) User individuality management in websites based on WAI-ARIA annotations and ontologies.
Conf. on Web Accessibility (W4A ’13), article 29.
[2] Pérez, J. E., Arrue, M., Valencia, X. and Moreno, L. (2014) Exploratory study of web navigation strategies for users with physical disabilities. Conf. on
Web Accessibility (W4A ’14), article 20.
• Based on 2 previous works:
1) set of 99 adaptation techniques
from literature for application to
cognitive, physical and sensory
impairments [1]
2) study of web navigation strategies
with 11 physically impaired users [2]
>> classify adaptations techniques
Case study:
Physically impaired users
10
/
18

11. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Adaptation Repository
1) Core_Adaptation_Techniques:
“appropriate for all users with
physical impairments”
>
Content:
(5)
Remove
walking
menus,
(6)
Avoid
click
and
drag
elements
and
(7)
Avoid
double-­‐clicking
elements.
︎>
Presenta/on:
(10)
Hierarchically
structure
content.
>
︎Naviga/on:
(12)
Provide
naviga;on
bars,
(13)
Provide
quick
access
to
different
topics
within
a
website,
(17)
Provide
skip
links
(e.g.,
to
main
content).
Adapta5on_Technique
• Presenta/on
• Naviga/on
• Content
Adapta5on_Repository
• Core_Adapta/on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta5on_Technique
...
11
/
18

12. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Adaptation Repository
2) Behaviour_Adaptation_Techniques:
“observations revealed that specific
pointing devices (joystick, trackball,…)
lack of accuracy on pointing”
>
Content:
(1)
Add
hot
area
around
hyperlinks
and
(4)
Incorporate
buDons
for
browser
“Back”
and
“Forward”
func;onali;es.
>
Presenta/on:
(8)
Define
large
clickable
area
for
links
and
buDons
in
a
visible
way
and
(9)
Define
links
and
buDons
well
separated.
Adapta5on_Technique
• Presenta/on
• Naviga5on
• Content
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta/on_Technique
...
12
/
18

13. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Adaptation Repository
2”) Behaviour_Adaptation_Techniques:
“specific pointing devices (joystick,
trackball,…) were not used to keyboard
specific keys for scrolling interactions”
>
Content:
(2)
Use
stretchtext
in
main
content
and
(3)
Incorporate
specific
scrolling
icons
on
each
page.
>
Naviga/on:
(16)
Provide
internal
links
to
important
content
on
the
page
(e.g.,
return
to
the
top
of
page).
>
Presenta/on:
(11)
Break
pages
into
chunks
of
no
more
than
one
or
two
screens.
Adapta5on_Technique
• Presenta/on
• Naviga/on
• Content
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta/on_Technique
...
13
/
18

14. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Adaptation Repository
3) Behaviour_Adaptation_Techniques:
“performance of numeric keypad users
depends on distance and number of
keystrokes to reach a target”
>
Naviga/on:
(14)
Provide
an
index
with
informa;on
in
the
page,
(15)
Create
a
table
of
contents
for
the
website
and
(18)
Disable
non-­‐
recommended
links
(e.g.,
banners).
Adapta5on_Technique
• Presenta5on
• Naviga/on
• Content
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta5on_Technique
• Behaviour_Adapta/on_Technique
...
14
/
18

15. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Adaptation Repository
4) Preferences_Adaptation_Techniques:
>
Hide/show
specific
scrolling
icons
>
Hide/show
buUons
for
browser
“Back”
and
“Forward”
func5onali5es
>
Define
the
preferred
loca5on
for
scrolling
icons
>
Define
the
preferred
loca5on
for
browser
“Back”
and
“Forward”
func5onali5es
>
Hide/show
accesskeys
for
scrolling/browser
“Back”
and
“Forward”
buUons
>
Hide/show
accesskeys
for
main
content
sec5ons
in
the
website
Adapta5on_Technique
• Presenta/on
• Naviga/on
• Content
Adapta5on_Repository
• Core_Adapta5on_Technique
• Preferences_Adapta/on_Technique
• Behaviour_Adapta5on_Technique
...
15
/
18

16. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Case study:
Results
> Adaptation system implemented based on the
conceptual model including:
• Extended WAI-ARIA language for semantic annotations
• Adaptation repository including adaptation techniques related to core,
behaviour and preferences
• Adaptation process considering transformation in the conceptual model
• Preference definition system for personalized web interfaces
16
/
18

17. INTERACCIÓN 2015Elaborating a Web Interface Personalization Process
Laboratory of Human-Computer
Iinteraction for Special Needs
Conclusions
• We have proposed a conceptual model to facilitate the complex
adaptation process of web sites
• The conceptual model defines main components & phases of the
adaptation process
• The model has been theoretically validated in a case study with
physically impaired users
• An adaptation systems was implemented and is being evaluated
17
/
18

18. Laboratory of Human-Computer Iinteraction
for Special Needs
Thank you for your attention
Questions?
Elaborating a Web Interface
Personalization Process
: www.jeduardoperez.info
: @j_eduardoperez
: juaneduardo.perez@ehu.eusSeptember 7th 2015, Vilanova I la Geltrú (Spain)
Session 9: Interface Design
XVI International Conference on HCI (Interacción 2015)