class: center, middle # The grammar of user experience A cognitive grammar to translate the ux research into requrements --- ## 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 --- ## 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) --- background-image: url(assets/creval1.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- background-image: url(assets/creval2.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## 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? --- class: center, middle # What is a grammar? ??? There are at least three different meanings of the term grammar: I've called them the classical, the formal, and the cognitive grammars. --- ## The classical grammar Set of **rules** of a language to which speakers and writers must conform. [Online Etymology Dictionary](http://www.etymonline.com/index.php?term=grammar) The whole system and structure of a language ... consisting of syntax and morphology (including inflections) [Oxford dictionary](http://www.oxforddictionaries.com/us/definition/american_english/grammar) --- ## 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](https://en.wikipedia.org/wiki/Part_of_speech) --- ## Formal grammars A set of explicit rules to **generate** strings in a formal language [Wikipedia](https://en.wikipedia.org/wiki/Formal_grammar) Formal languages, like programming languages, are [machine-readable](https://en.wikipedia.org/wiki/Machine-readable_data) Example: [Java Syntax](http://docs.oracle.com/javase/specs/jls/se7/html/jls-18.html) ??? This definition moves the meaning of a grammar (and a language) towards something that is more formal, more abstract, less contextual (it works for every possible language, not only for existing natural ones) --- ## 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 * Language shapes our wiew of the world * Language reflects our overall experience as human beings * The cognitive grammar maps a language to the conceptualizations of the mind ??? * (Cognitive) grammar has an experiential nature --- ## 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) --- ## UI as language ### The metaphor 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 --- ## A grammar of the mind > 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 The natural languages reflect the mental structure Therefore, the natural language grammar help us to understand how the mind works An ui grammar that borrows from the natural language grammars should be compatible with the cognitive architecture of the users Therefore, such a ux grammar would be user centered. --- # The utility of the metaphor How can the metaphor of the user interface as a language, with it's grammar, be useful in designing an user experience? 1. The universals of natural languages as a set of requirements for the UI language 2. The grammar as a high level conceptual corpus of guidelines for IA, UI, ID 3. A set of rules to translate what the users say in the conceptualization of the domain. --- background-image: url(assets/environment.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- # Similar approaches --- ## 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](http://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshop) --- ## Ooux A design methodology organized around objects rather than "actions" and data rather than logic [Object Oriented UX](http://www.slideshare.net/SophiaVoychehovski/object-oriented-ux-is-the-new-ia/14?src=clipshare)  --- ## 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](http://bokardo.com/archives/dont-design-for-the-future-design-for-now/) <!-- Activities, Objects, and Features. Goals, Activities, and Tasks Goals are end conditions people are striving for. Activities are the set of tasks people do to achieve their goals. --> --- background-image: url(assets/languages.png) background-position: center; background-repeat: no-repeat; background-size: contain; ## The process --- ## 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](https://en.wikipedia.org/wiki/Nominalization): 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 --- ## 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 <!-- ## More clues * when the participant says "I'm looking for", "I want to see", it's #findability; * when she says "I espect to see", it's *information foraging*; * when she says "I would decide if", it's #choosability; * when she says "it [the application] asks me some data", she espects a form; --> --- ## 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 <div class="analysis"> A collaboration tool, cross-device, <span class="metaphor">it remembers IRC</span>, for a <span class="noun">project</span> or a <span class="noun">company</span>. You <span class="verb">open</span> a slack <span class="noun">profile</span>, you <span class="verb">invite</span> the <span class="plnoun">people</span> that are part of the <span class="noun">project</span>, then you <span class="verb">open</span> some thematic <span class="plnoun">channels</span>, and anybody <span class="decision">decide</span> to which <span class="verb">partecipate</span>. It <span class="verb">works</span> <span class="metaphor">like a chat</span>, with the <span class="reify">sharing</span> of <span class="plnoun">files</span>, <span class="plnoun">images</span> and so on. ... you can <span class="verb">integrate</span> some <span class="">external</span> <span class="plnoun">services</span>, via webhook. Doing so, if for example you <span class="verb">push</span> a <span class="noun">github repo</span>, <span class="pverb">it comes</span> a <span class="noun">message</span> to the <span class="plnoun">participants</span> of a <span class="noun">channel</span>. </div> --- ## 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 --- background-image: url(assets/slack.png) background-position: center; background-repeat: no-repeat; background-size: contain; ## The (extended) ontology --- ## 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) --- background-image: url(assets/ontology.png) background-position: center; background-repeat: no-repeat; background-size: contain; ## Conference ontology --- ## 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](examples/conference.html) vs [a real example](http://www.bettersoftware.it/) --- # Verbs are semantically typed functions --- background-image: url(assets/Facebook_doing.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- background-image: url(assets/Facebook_watching.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- background-image: url(assets/Facebook_listening.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- background-image: url(assets/Facebook_reading.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- background-image: url(assets/Facebook_traveling.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## 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 --- ## 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 --- ## 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. --- ## 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). --- # Thank you * Time for some questions? * Let's continue the conversation: bussolon@gmail.com - [@sweetdreamerit](https://twitter.com/sweetdreamerit) - [linkedin.com/in/bussolon](http://www.linkedin.com/in/bussolon) --- # Time for more examples? ---  BBC: Myanmar election --- ## Google: National League for Democracy  --- ## Google: Union Solidarity Development Party  --- ## Wikipedia: Myanmar elections  --- ## A quick prototype [My version of the news](examples/myanmar_news.html)