The Grammar of User Experience

Stefano Bussolon
Stefano BussolonAdjunct Professor at University of Trento
The grammar of user experience
A cognitive grammar to translate the ux research into requrements
1 / 38
About me
PhD in Cognitive Sciences
Freelance UX designer: Information Architecture, Interaction Design,
Usability
Adjoint Professor in Human Computer Interaction at the Università degli
Studi di Trento
2 / 38
The insight
During my last project as ux designer (the redesign of an internet and mobile
banking) I noticed that I unconsciously applied a grammatical distinction onto
the main information architecture organization.
The first menu of the app is a list of objects:
the list of the accounts of the client
The second and third menu is a list of nominalized verbs:
payments and refills (to pay, to refill)
trading (to trade: to buy and sell actions)
3 / 38
4 / 38
5 / 38
The questions
Can this grammar distinction be generalized as a design approach?
Can we image a grammar of user experience?
Can this approach help us to improve the design process?
6 / 38
What is a grammar?
7 / 38
The classical grammar
Set of rules of a language to which speakers and writers must conform.
Online Etymology Dictionary
The whole system and structure of a language ... consisting of syntax and
morphology (including inflections)
Oxford dictionary
8 / 38
Parts of speech
A part of speech is a category of words (or, more generally, of lexical items)
which have similar grammatical properties.
nouns, verbs, adjectives, adverbs, pronouns, prepositions, conjunctions,
interjections, and sometimes numerals, articles or determiners.
Wikipedia
9 / 38
Formal grammars
A set of explicit rules to generate strings in a formal language
Wikipedia
Formal languages, like programming languages, are machine-readable
Example: Java Syntax
10 / 38
Cognitive grammar
Cognitive grammars have been developed in the context of cognitive
linguistics. Some assumptions:
Language is meaning and meaning is conceptualization
Language is rooted in experience, shapes our wiew of the world, reflects our
overall experience as human beings
The cognitive grammar maps a language to the conceptualizations
of the mind
11 / 38
Interfaces are languages
An API is a subset of a language
A command-line interface or command language interpreter (CLI) is a
language
HTML is a language, with a grammar (XHTML has a strict grammar)
12 / 38
UI as language
Which are the advantages to see the UI as a language?
Features of languages:
can represent a conceptual world
has a set of rules (the grammar)
the rules should be used both to build a representation and to evaluate if
a representation is correct
it has a hierarchy of components (letters, syllables, morphemes, words,
phrases, periods, texts ...)
it should be possible to translate from another language, and to another
language
13 / 38
14 / 38
Similar approaches
15 / 38
Atomic design
Atomic design is an approach partally similar. The metaphor is chemistry
need for modularity: "We’re not designing pages, we’re designing systems
of components." - Stephen Hay
a better workflow and a shared vocabulary
Modeling Structured Content - IAS13 workshop
16 / 38
Ooux
A design methodology organized around objects rather than "actions" and
data rather than logic
Object Oriented UX
17 / 38
The AOF Method
AOF stands for Activity, Objects, and Features.
First you determine and research the activity you’re going to support. This
helps you identify the social objects within that activity and the actions people
take on those social objects. These objects and actions become your feature
set.
Joshua Porter
18 / 38
The process
19 / 38
How to translate from natural language to concepts
when the participants use a noun, it (probably) is a concept, or a category,
or an instance;
a plural form of a noun is a set
a verb is a function
actions are often nominalizated: registration = to register, payment = to
pay, submission = to submit
nominalization of a verb is a symptom that the action has become a script,
and is represented as a concept
when the verbal form is of type "the X of Y", X is a component of Y (if X is
an object) or a characteristic of Y
every concept is a node in the ontology
relations among concepts should be represented by arcs
20 / 38
A grammar for the interface
every node in the ontology should have a template
every object of the main concepts should have a page
every category should have an index
at every link in the taxonomy should correspond a (bi)directional link
among the objects
consider to use the concepts as the first level of the navigation
21 / 38
Example: slack
un tool di collaborazione, funziona cross-device (pc, telefono, tablet) e ricorda
in parte IRC, ma funziona per progetto/azienda. Apri un profilo slack, inviti le
persone che fanno parte del progetto, poi apri tot canali tematici e ognuno
decide a quali partecipare. A quel punto funziona come una chat, con
condivisione di file, immagini ecc... Cosa particolare: puoi integrare dei servizi
esterni, via webhook. Così quando fai, per esempio, una push su una repo di
github, può arrivare un messaggio ai partecipanti a un canale
A collaboration tool, cross-device, it remembers IRC , for a project or a
company . You open a slack profile , you invite the people that are part of
the project , then you open some thematic channels , and anybody decide to
which partecipate . It works like a chat , with the sharing of files ,
images and so on. ... you can integrate some external services , via
webhook. Doing so, if for example you push a github repo , it comes a
message to the participants of a channel .
22 / 38
The conceptualization
Concepts (objects)
project
profile
people (a list of individuals)
channels
files
images
services
Verbs (functions)
open a profile
invite the people
open one or more channels
partecipate to one or more channels
share files and images
integrate
23 / 38
The (extended) ontology
24 / 38
Conference
As an example, I interviewed 9 people (via email or skype or facebook chat)
asking them what they would expect on the website of a conference.
I've listed the nouns and verbs (or nominalized verbs) the participant used,
sorted by frequency
speakers (7) - cv (1) - titles (1)
(online) registration (7) (buy the tikets)
dates (6) - deadline
location (5) - how to reach (3)
programme (5)
costs (4)
submissions (3) - procedure - I send the article
contacts (3)
theme - topics (2)
talks (2) - abstract of the tasks (1)
affiliations (2)
25 / 38
Conference ontology
26 / 38
An agile approach to ux research
Yes, I'm telling the magic world: it's agile ;)
interview some users
create an ontology
create a prototype (involving the stakeholders)
recruit some more participants to test the prototype and to interview
them
update the ontology, the prototype
test again
repeat untill both stakeholders' and users' feedbacks are positive.
A prototipe vs a real example
27 / 38
Verbs are semantically typed functions
28 / 38
29 / 38
30 / 38
31 / 38
32 / 38
33 / 38
How many verbs in Interaction design?
Grammars distinguish open and closed word classes: nouns, verbs, adjectives
are open, articles, conjunctions and pronouns are closed.
While preparing this talk, I was looking for the most different examples of
verbs. What I realized is that the list is short.
I've identified two dozens of verbs that - I believe - cover 90% of the
actions/functions
34 / 38
Most important verbs
Register
Login
Find - Search
Check
Compare
Choose
Decide
Read, watch, listen to
Create
Write
Update
Delete
Buy
Download
Upload
Share
Like
Comment
Give some information
35 / 38
Verbs, patterns, guidelines
Cognitive linguistics focus their interest in studying the most important,
universal semantic rules of language.
What we could do, as designers and developers, is to identify the two dozens
of verbs and to draft a corpus of patterns and guidelines for each of the verb.
The same, of course, should be done for the nouns as well: concepts, classes
and instances.
36 / 38
To summarize
In my talk I'm doing a list of proposals
Interfaces are languages
Language is meaning
We can identify a grammar of meaning
We can identify the implicit conceptualization people have of a domain
(the decoding process)
We can identify a set of rules to encode the conceptualization in a visual,
interactive interface
We can consolidate our process, in term of research, conceptualization,
design, test, implementation
The process can and should be iterative, agile, lean (at least at the
beginning).
37 / 38
Thank you
Are not thought and speech the same, with this exception, that what is
called thought is the unuttered conversation of the soul with herself?
Sophist - Plato
Let's continue the conversation:
mail: bussolon@gmail.com
twitter: @sweetdreamerit
linkedin: bussolon
38 / 38
1 of 38

More Related Content

Viewers also liked(12)

Similar to The Grammar of User Experience(20)

Recently uploaded(20)

Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa17 views
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman272 views
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe2312 views
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman15 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear10 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman13 views
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman16 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper220 views
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media14 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28214 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa41 views

The Grammar of User Experience

  • 1. The grammar of user experience A cognitive grammar to translate the ux research into requrements 1 / 38
  • 2. About me PhD in Cognitive Sciences Freelance UX designer: Information Architecture, Interaction Design, Usability Adjoint Professor in Human Computer Interaction at the Università degli Studi di Trento 2 / 38
  • 3. The insight During my last project as ux designer (the redesign of an internet and mobile banking) I noticed that I unconsciously applied a grammatical distinction onto the main information architecture organization. The first menu of the app is a list of objects: the list of the accounts of the client The second and third menu is a list of nominalized verbs: payments and refills (to pay, to refill) trading (to trade: to buy and sell actions) 3 / 38
  • 6. The questions Can this grammar distinction be generalized as a design approach? Can we image a grammar of user experience? Can this approach help us to improve the design process? 6 / 38
  • 7. What is a grammar? 7 / 38
  • 8. The classical grammar Set of rules of a language to which speakers and writers must conform. Online Etymology Dictionary The whole system and structure of a language ... consisting of syntax and morphology (including inflections) Oxford dictionary 8 / 38
  • 9. Parts of speech A part of speech is a category of words (or, more generally, of lexical items) which have similar grammatical properties. nouns, verbs, adjectives, adverbs, pronouns, prepositions, conjunctions, interjections, and sometimes numerals, articles or determiners. Wikipedia 9 / 38
  • 10. Formal grammars A set of explicit rules to generate strings in a formal language Wikipedia Formal languages, like programming languages, are machine-readable Example: Java Syntax 10 / 38
  • 11. Cognitive grammar Cognitive grammars have been developed in the context of cognitive linguistics. Some assumptions: Language is meaning and meaning is conceptualization Language is rooted in experience, shapes our wiew of the world, reflects our overall experience as human beings The cognitive grammar maps a language to the conceptualizations of the mind 11 / 38
  • 12. Interfaces are languages An API is a subset of a language A command-line interface or command language interpreter (CLI) is a language HTML is a language, with a grammar (XHTML has a strict grammar) 12 / 38
  • 13. UI as language Which are the advantages to see the UI as a language? Features of languages: can represent a conceptual world has a set of rules (the grammar) the rules should be used both to build a representation and to evaluate if a representation is correct it has a hierarchy of components (letters, syllables, morphemes, words, phrases, periods, texts ...) it should be possible to translate from another language, and to another language 13 / 38
  • 16. Atomic design Atomic design is an approach partally similar. The metaphor is chemistry need for modularity: "We’re not designing pages, we’re designing systems of components." - Stephen Hay a better workflow and a shared vocabulary Modeling Structured Content - IAS13 workshop 16 / 38
  • 17. Ooux A design methodology organized around objects rather than "actions" and data rather than logic Object Oriented UX 17 / 38
  • 18. The AOF Method AOF stands for Activity, Objects, and Features. First you determine and research the activity you’re going to support. This helps you identify the social objects within that activity and the actions people take on those social objects. These objects and actions become your feature set. Joshua Porter 18 / 38
  • 20. How to translate from natural language to concepts when the participants use a noun, it (probably) is a concept, or a category, or an instance; a plural form of a noun is a set a verb is a function actions are often nominalizated: registration = to register, payment = to pay, submission = to submit nominalization of a verb is a symptom that the action has become a script, and is represented as a concept when the verbal form is of type "the X of Y", X is a component of Y (if X is an object) or a characteristic of Y every concept is a node in the ontology relations among concepts should be represented by arcs 20 / 38
  • 21. A grammar for the interface every node in the ontology should have a template every object of the main concepts should have a page every category should have an index at every link in the taxonomy should correspond a (bi)directional link among the objects consider to use the concepts as the first level of the navigation 21 / 38
  • 22. Example: slack un tool di collaborazione, funziona cross-device (pc, telefono, tablet) e ricorda in parte IRC, ma funziona per progetto/azienda. Apri un profilo slack, inviti le persone che fanno parte del progetto, poi apri tot canali tematici e ognuno decide a quali partecipare. A quel punto funziona come una chat, con condivisione di file, immagini ecc... Cosa particolare: puoi integrare dei servizi esterni, via webhook. Così quando fai, per esempio, una push su una repo di github, può arrivare un messaggio ai partecipanti a un canale A collaboration tool, cross-device, it remembers IRC , for a project or a company . You open a slack profile , you invite the people that are part of the project , then you open some thematic channels , and anybody decide to which partecipate . It works like a chat , with the sharing of files , images and so on. ... you can integrate some external services , via webhook. Doing so, if for example you push a github repo , it comes a message to the participants of a channel . 22 / 38
  • 23. The conceptualization Concepts (objects) project profile people (a list of individuals) channels files images services Verbs (functions) open a profile invite the people open one or more channels partecipate to one or more channels share files and images integrate 23 / 38
  • 25. Conference As an example, I interviewed 9 people (via email or skype or facebook chat) asking them what they would expect on the website of a conference. I've listed the nouns and verbs (or nominalized verbs) the participant used, sorted by frequency speakers (7) - cv (1) - titles (1) (online) registration (7) (buy the tikets) dates (6) - deadline location (5) - how to reach (3) programme (5) costs (4) submissions (3) - procedure - I send the article contacts (3) theme - topics (2) talks (2) - abstract of the tasks (1) affiliations (2) 25 / 38
  • 27. An agile approach to ux research Yes, I'm telling the magic world: it's agile ;) interview some users create an ontology create a prototype (involving the stakeholders) recruit some more participants to test the prototype and to interview them update the ontology, the prototype test again repeat untill both stakeholders' and users' feedbacks are positive. A prototipe vs a real example 27 / 38
  • 28. Verbs are semantically typed functions 28 / 38
  • 34. How many verbs in Interaction design? Grammars distinguish open and closed word classes: nouns, verbs, adjectives are open, articles, conjunctions and pronouns are closed. While preparing this talk, I was looking for the most different examples of verbs. What I realized is that the list is short. I've identified two dozens of verbs that - I believe - cover 90% of the actions/functions 34 / 38
  • 35. Most important verbs Register Login Find - Search Check Compare Choose Decide Read, watch, listen to Create Write Update Delete Buy Download Upload Share Like Comment Give some information 35 / 38
  • 36. Verbs, patterns, guidelines Cognitive linguistics focus their interest in studying the most important, universal semantic rules of language. What we could do, as designers and developers, is to identify the two dozens of verbs and to draft a corpus of patterns and guidelines for each of the verb. The same, of course, should be done for the nouns as well: concepts, classes and instances. 36 / 38
  • 37. To summarize In my talk I'm doing a list of proposals Interfaces are languages Language is meaning We can identify a grammar of meaning We can identify the implicit conceptualization people have of a domain (the decoding process) We can identify a set of rules to encode the conceptualization in a visual, interactive interface We can consolidate our process, in term of research, conceptualization, design, test, implementation The process can and should be iterative, agile, lean (at least at the beginning). 37 / 38
  • 38. Thank you Are not thought and speech the same, with this exception, that what is called thought is the unuttered conversation of the soul with herself? Sophist - Plato Let's continue the conversation: mail: bussolon@gmail.com twitter: @sweetdreamerit linkedin: bussolon 38 / 38