A semiotic-based framework to user interface design

1. A semiotic-based framework to user interface design Jair C Leite DIMAp-UFRN Brazil

2. Abstract This work proposes a framework based on the Semiotic Engineering approach that drives designers to specify the application conceptual model and its associated user interface. Our work contributes to user interface design by proposing the LEMD, a linguistic formalism to the user interface specification in an abstract and structured way focusing on what he/she really wants to mean to the users. The resulting specification could be mapped on conventional widgets. A semiotic-based framework to user interface design

3. Semiotic Engineering Semiotic Engineering is a theoretically-based approach to user interface design in which computing systems are taken to be meta-communication artifacts (de Souza, 1993). By this we mean that interfaces are messages sent form designers to users and that such messages can, in their turn, send and receive messages. user designer A semiotic-based framework to user interface design

4. Designer-User Communication Bad Communication What can I do? How could I use it? What does it mean? This is my solution to the problems I expect you have. Watch what I mean! designer user A semiotic-based framework to user interface design

5. Semiotic Foundations Eco’s Theory of Sign Production is our basic ground for the Semiotic Engineering. He proposes a framework of semiotic activities for sign production (Eco, 1976). Semiotic systems or codes are systems of types of signs (sign-types) that someone should use to produce a representamen to be interpreted as signs. Codes and languages are semiotic systems. A semiotic system has a basic structure. It has a system of sign-types - the syntactic model - and a system of semantic-types - the semantic model - that should be associated with the first. The Semiotic Engineering framework follows this theory and propose a semantic model and a user interface model that should be mapped to each other as an incipient semiotic system. Semiotic System Intended meanings Semantic System Syntatic System A semiotic system could be learned by the user in the interaction process. This increases user´s interpretation of designer´s intended means. A semiotic-based framework to user interface design

6. The Semantic and Syntatic Models Domain-Information Application-Function Functional model Specifyed using The LEMD Command-Function Browsing-Control Basic-Interactions Interaction-results Interaction model Display Medium Activation Tool User Interface Signs Object, Controller, Environment, Panel, Recipient, Selector, Presenter Should be mapped into User Interface Widgets A semiotic-based framework to user interface design

7. Specifying the intended meanings – 1 • Both Functional and Interaction Model are specified using the LEMD • LEMD – Designer´s Message Specification Language Application-Function Printing Operands File Name, Printer, Number of copies Pre-conditions File name must be informed, Printer must be selected, Number of copies should be enter or the system print only one copy Post-conditions The printer should print the number of copies informed of the specified file name. Control Start, Stop, Pause, Resume, Cancel State Available, Running, Stopped, Finished Specifying an application function A semiotic-based framework to user interface design

8. Specifying the intended meanings – 2 Command-Message Print for Application-FunctionPrinting Join { View Meta-Message “To print a document you must enter the information and then select one of the function control” Sequence { Join { Select { Enter Information-of File Name Select Information-of File Name } Combine { Select Information-of Printer Name Activate Show Command-Message Configure } Enter Information-of Number of copies } Select { Activate Start Application-Function Printing Activate Stop Application-Function Printing Activate Suspend Application-Function Printing Activate Continue Application-Function Printing Activate Waive Application-Function Printing } The designer could specify the user interface in an abstract and structured way. The LEMD provides a way to specify the interaction structures and basic actions. Specifying the interaction model A semiotic-based framework to user interface design

9. LEMD Statements UI Signs (widgets) Join {...} Spatial configuration (visual grouping) Sequence {...} Spatial configuration and setting buttons label color attribute as gray meaning disable. Combine {.. Frame widget Select {...} Spatial configuration (visual grouping) Select text “Combo box” widget Enter text “Text box” widget Enter number “Spin box” widget Activate Command button Mapping LEMD statements to UI Signs The LEMD provides a semantic map the makes a correlation from the language keywords and statements to the interface signs. This semantic map may change if the meaning of the interface signs is not in agreement with those known by users. It is not our intent to provide an automatic translation because we believe that the human talent to creativity and visual communication is fundamental to assure a good communicability. It is the graphical designer that decides what user interface signs should be used. There is no formal meaning assigned to each user interface widget. The meaning emerges from its use through the time. A semiotic-based framework to user interface design

10. Mapping LEMD statements to UI Signs A semiotic-based framework to user interface design

11. Conclusion Since the LEMD is on the conceptual level, the designer focuses only in the essential aspects of the application functionality and interactivity without loosing control of its communicability. It considers not only static and aesthetical aspects of UI screen layout but also the performing and interactive aspects of the user interface medium. The LEMD provides constructs to help designers to specify their communicative intention about the interaction model. It allows designers to specify both functional and interaction models using the same formalism. Semiotic provides a good insights and explanations to computing specially to user interface design. The Semiotic Engineering framework should be seen as a meta-model with pre-defined concepts that guides designers to specify the conceptual model and its correspondent user interface. Using LEMD the designer has a semantic model that helps him/her to structure what he/she needs to communicate to user. The LEMD is very flexible and has an expressive power. Its grammar is context-free that allows the composition of nested messages. It was designed to be used by humans, not by computers, so one of the main concerns is to provide statements that seem like the designer’swords. de Souza, C.S. The Semiotic Engineering of user interface language design, in Int. J. of Man-machine Studies, 1993. Eco, U. A Theory of Computer Semiotics. Bloomington, IN: Indiana University Press, 1976. A semiotic-based framework to user interface design