flippable user interfaces for internationalization
DESCRIPTION
The language reading direction is probably one of the most determinant factors influencing the successful internationalization of graphical user interfaces, beyond their mere translation. Western languages are read from left to right and top to bottom, while Arabic languages and Hebrew are read from right to left and top to bottom, and Oriental languages are read from top to bottom. In order to address this challenge, we introduce flippable user interfaces that enable the end user to change the reading direction of a graphical user interface by flipping it into the desired reading direction by direct manipulation. This operation automatically and dynamically changes the user interface layout based on a generalized concept of reading direction and translates it according to the end user’s preferences.TRANSCRIPT
![Page 1: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/1.jpg)
Flippable User Interfaces for Internationalization
Iyad Khaddam and Jean Vanderdonckt
LILAB – Louvain Interaction Laboratory
Université catholique de Louvain
Belgium
Pisa, June 13th - 16th, 2011
![Page 2: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/2.jpg)
Content
Internationalization
Flippable UI: An Interaction technique To language adaptation
Flippable UI: Design Principles
Tool Architecture
Demo
![Page 3: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/3.jpg)
Internationalization
Software
EU MEASIA
FR JP AR
Software
EU MEASIA
FR JP AR
Localization
Globalization
![Page 4: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/4.jpg)
Internationalization
Localization factors: Color Format Metaphor Screen Layout Image Structure Language …
User Preferences: End user can adapt the UI (Adaptability)
Adaptation logic will handle culture awareness (Adaptive)
![Page 5: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/5.jpg)
Internationalization
Language:
A critical localization factor.
Translation of content, layout adaptation to reading direction
Other less critical lexical aspects: color, font, size.
Other high-level, hard to predict aspects: metaphors, organization.
![Page 6: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/6.jpg)
Content
Internationalization
Flippable UI: An Interaction technique To language adaptation
Flippable UI: Design Principles
Tool Architecture
Demo
![Page 7: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/7.jpg)
Flippable UI
An Interaction technique To language adaptation.
3 Fields of research: Adaptation to Cultural background:
technical adaptations (alphabet, character set), national Adaptation (add nation-relevant information), cultural adaptation (habits, attitude, conventions and meanings).
![Page 8: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/8.jpg)
![Page 9: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/9.jpg)
Flippable UI
An Interaction technique To language adaptation.
3 Fields of research: Adaptation to Cultural background Interaction Techniques:
Flipping a page of a book. Increase end user’s subjective satisfaction and naturalness of interaction.
![Page 10: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/10.jpg)
Flippable UI
An Interaction technique To language adaptation.
3 Fields of research: Adaptation to Cultural background Interaction Techniques Animated Transitions:
Convey the change of display
![Page 11: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/11.jpg)
Content
Internationalization
Flippable UI: An Interaction technique To language adaptation
Flippable UI: Design Principles
Tool Architecture
Demo
![Page 12: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/12.jpg)
Flippable UI: Design Principles
Principles: #1: Provide Handles for direct flipping
![Page 13: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/13.jpg)
![Page 14: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/14.jpg)
Flippable UI: Design Principles
Principles: #1: Provide Handles for direct flipping #2: Perform Adaptation according to flipping
![Page 15: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/15.jpg)
Left To Right, Top To Bottom
Right To Left, Top To Bottom
Left To Right, Bottom To Top
Right To left, Bottom To Top
![Page 16: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/16.jpg)
Flippable UI: Design Principles
Principles: #1: Provide Handles for direct flipping #2: Perform Adaptation according to flipping #3: Ensure smooth transition for adaptation
![Page 17: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/17.jpg)
![Page 18: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/18.jpg)
Content
Internationalization
Flippable UI: An Interaction technique To language adaptation
Flippable UI: Design Principles
Tool Architecture
Demo
![Page 19: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/19.jpg)
UsiXm
l File
UiModel
Map.xm
l
Widget Selector
CuiRenderingEngine
CuiTreeTraversal
MergeAlgorithm
![Page 20: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/20.jpg)
Content
Internationalization
Flippable UI: An Interaction technique To language adaptation
Flippable UI: Design Principles
Tool Architecture
Demo
![Page 21: Flippable User Interfaces for Internationalization](https://reader034.vdocuments.mx/reader034/viewer/2022051411/547b28f6b4795983098b4d32/html5/thumbnails/21.jpg)
Acknowledgments
LILAB