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.

Transcript

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
    Standfirst
    Billboard
    Whisper box
    Course block
    Spotlight
    Cards
    Standard
    Promo
    

    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
    “Heart”
    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
    orientation.
    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