User interface elements are both visual and logical. This is how individual elements fit together to describe functionality and tell stories.

1. The language of the
user interface.
Ajay Ganapathy
Tuesday, January 22, 13

2. Examples of languages
• Spoken language
• sign language
• written language
• body language
• design language
• programming language
• mathematical language
Tuesday, January 22, 13

3. Languages aren’t just
spoken!
Tuesday, January 22, 13

4. language |ˈlaNGgwij|
noun
1 the method of human communication, either spoken or written, consisting of the use of words in a
structured and conventional way: a study of the way children learn language | [ as modifier ] : language
development.
• any nonverbal method of expression or communication: a language of gesture and facial expression.
2 the system of communication used by a particular community or country: the book was translated into
twenty-five languages.
• Computing a system of symbols and rules for writing programs or algorithms: a new programming
language.
3 the manner or style of a piece of writing or speech: he explained the procedure in simple, everyday language.
• the phraseology and vocabulary of a certain profession, domain, or group of people: legal language.
• (usu. as bad/strong language) coarse, crude, or offensive language: strong language.
PHRASES
speak the same language understand one another as a result of shared opinions or values.
ORIGIN Middle English: from Old French langage, based on Latin lingua ‘tongue.’
Tuesday, January 22, 13

5. Definition of Language
• A language is a set of standard sensory cues
that represent ideas.
• these cues can be visual, auditory, tactile,
or, less commonly, olfactory or
gastronomic
Tuesday, January 22, 13

6. Properties of Language
• Vocabulary - a standard set of cues
• Grammar - rules for how those cues go
together to create meaning. (Also known as
syntax rules)
• Logic - the resulting meaning that is derived
from the combination of vocabulary
according to grammar rules.
Tuesday, January 22, 13

7. Logic = grammar +
vocabulary
Tuesday, January 22, 13

8. Examples of vocabulary:
• In a design language
• icons are used to represent pieces of
data
• glyphs are used to represent operations
on those pieces of data
• In a mathematical language?
• ______________
• ______________
Tuesday, January 22, 13

9. Grammar in languages
• In a mathematical language:
• “A+B” means add A and B together
• In a design language?
• ______________________
Tuesday, January 22, 13

10. Logic in Languages
• All languages convey ideas.
• All ideas are built upon logic.
Tuesday, January 22, 13

11. Basic logic
• All ideas are made up of statements that
are either true or false.
• ie: I am wearing a red jacket.
• is this true or false?
Tuesday, January 22, 13

12. Statements
• All statements are made up of subjects and
predicates
• ie: I am wearing a red jacket.
• “I” is the subject
• “am wearing a red jacket” is the
predicate
• The predicate is a property of the
subject
Tuesday, January 22, 13

13. Statement = subject +
predicate
• Or, the relationship between subject and
predicate is a statement that is either true
or false.
Tuesday, January 22, 13

14. Subjects and Predicates
• Can be viewed as:
• message and recipient
• action and target
• nouns and verbs
• values and operands
• objects and methods
• Data and functions
Tuesday, January 22, 13

15. In interface design:
• The purpose of an interface is to facilitate
the manipulation of data.
• In this case, the data is the subject
• the manipulation is the predicate
Tuesday, January 22, 13

16. Interface as a language
• In an interface, we represent both data and
operations visually.
• Data can be represented as an icon, a 2D
image on a canvas, a 3D model in a
viewport, or even text in a document
• Operations can be represented buttons,
list items, cursors, callouts, tooltips, etc.
Tuesday, January 22, 13

17. • By understanding the logical implications of
an interface we can do the following:
• choose appropriate imagery to describe
both the data and the operations we are
representing
• visually group interface elements in an
intuitive scheme that makes it easy to
access
• combine and reduce multiple interface
elements into a single, all-encompassing
element. (This is the same as shortening a
sentence in a written language.)
Tuesday, January 22, 13