A semiotic based framework to user interface design
This presentation is the property of its rightful owner.
Sponsored Links
1 / 11

A semiotic-based framework to user interface design PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

A semiotic-based framework to user interface design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

A semiotic based framework to user interface design

A semiotic-based framework to user interface design

Jair C Leite





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

Semiotic engineering

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.



A semiotic-based framework to user interface design

Designer user communication

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!



A semiotic-based framework to user interface design

Semiotic foundations

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



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

The semantic and syntatic models

The Semantic and Syntatic Models














Display Medium

Activation Tool

User Interface Signs

Object, Controller, Environment, Panel, Recipient, Selector, Presenter

Should be

mapped into

User Interface


A semiotic-based framework to user interface design

Specifying the intended meanings 1

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


File name must be informed, Printer must be selected, Number of copies should be enter or the system print only one copy


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

Specifying the intended meanings 2

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

Mapping lemd statements to ui signs

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


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

Mapping lemd statements to ui signs1

Mapping LEMD statements to UI Signs

A semiotic-based framework to user interface design



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

  • Login