$30 off During Our Annual Pro Sale. View Details »

A Semiotic Approach to Designing Interfaces

Alla Kholmatova
October 23, 2015

A Semiotic Approach to Designing Interfaces

When using a digital product, who (or what) are you interacting with? The device? The interface? The data? The content? It may seem like a simple question but the answer has a profound effect on how we design digital products.

Most of us are familiar with user-centered design principles. The dominant view of this approach is that you are interacting with the interface, or the computer (hence the term human-computer interaction). But I’d like to talk about a less known approach, which views the interface as a medium of communication, rather than a source.

What difference does this point of view make? I’ll attempt to answer this question using the classic communication and cognition theories, as well as practical examples, case studies, and insights from user testing. I’ll also explain the reasons behind some of the common flaws in our assumptions and design decisions we make.

Alla Kholmatova

October 23, 2015

More Decks by Alla Kholmatova

Other Decks in Design


  1. A semiotic approach to
    designing interfaces
    Alla Kholmatova @craftui

    View Slide

  2. View Slide

  3. View Slide

  4. What is semiotics?

    View Slide

  5. View Slide

  6. Positive instruction Cycle Cycles only
    Warning Train Level crossing ahead
    Order Bus No buses

    View Slide

  7. View Slide

  8. View Slide

  9. Who or what are you
    interacting with?

    View Slide

  10. Semiotic approach vs
    user-centered design

    View Slide

  11. U

    View Slide

  12. View Slide

  13. View Slide

  14. Semiotic approach

    View Slide

  15. for applying semiotic
    theory in practice
    4 lessons

    View Slide

  16. Start with language
    Lesson 1

    View Slide

  17. We’re not designing pages, we’re
    designing systems of components.
    Stephen Hay, Responsive Design Workflow

    View Slide

  18. View Slide

  19. Brackets
    Run progress
    Whisper box
    Course block

    View Slide

  20. View Slide

  21. View Slide

  22. View interactions as sentences
    Lesson 2

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Treat icons as basic signs
    Lesson 3

    View Slide

  29. View Slide

  30. View Slide

  31. Iconic
    Symbolic Indexical

    View Slide

  32. Iconic Symbolic

    View Slide

  33. View Slide

  34. View Slide

  35. Consider source orientation
    when writing copy
    Lesson 4

    View Slide

  36. View Slide

  37. View Slide

  38. Yours vs mine dilemma

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. The Semiotic Engineering of
    Human-computer Interaction
    Clarisse Sieckenius De Souza
    A Theory of Computer Semiotics:
    Semiotic Approaches to
    Construction and Assessment of
    Computer Systems
    Peter Bøgh Andersen
    Human-what interaction?
    Understanding user source
    Jacob Solomon & Rick Wash
    Signs, Language and Behavior
    Charles Morris
    Semiotics and the Philosophy
    of Language
    Umberto Eco
    Course in General Linguistics
    Ferdinand de Saussure
    Selected Writings
    Charles S. Peirce
    Source Orientation in Human-
    Computer Interaction
    S.Sundar & C.Nass

    View Slide

  43. Thank you
    Alla Kholmatova @craftui

    View Slide