mbudo's blog

    UX, UI and IxD: What are they and how do they differ?

    by Silvia Martínez

    Surely more than once you have come across the acronyms UX (User Experience), UI (User Interface) and IxD (Interaction Design) without really knowing what they refer to. In the best of cases, if you are one of those who have already had a first contact with these terms, it is possible that you haven't totally understood where their differences lie...

    Even if we are talking about concepts in the field of graphic design that are closely related to each other, these are used on numerous occasions interchangeably, giving rise to a more than justified confusion.

    If you would like to be able to implement these disciplines on your website and you want to have a first approach to them, then we will teach you everything you need to know to help you achieve it:




    UX is the acronym in English for User Experience, and as its name indicates, it refers to the experience that a user has before having visited our website, during the time that he has been visiting it and after the interaction ended.

    For this reason, the user is a fundamental key piece within the UX and, once again, becomes the center of the strategy.

    Its importance lies in the fact that all the actions carried out within User Experience are aimed at knowing exactly the preferences and behaviors of our users within our website, in order to be able to offer them our content in a way that is comfortable and convenient for them. Ultimately, this will not only make them stay on our page for longer, but will turn to it whenever they can.

    There are several ways to check how satisfactory is the experience that our users perceive on our page, these can be direct, if they are carried out face to face with the user, or indirect if he himself is allowed to interact on his own without the intervention of a external agent.

    • Internal checks: they are carried out "in person", which allows us to ask the user everything we want to know. In this way we will not only know what actions it performs, we will also know why.
    • External checks: they allow us to know what actions a user carries out, but not the reasons why they are being carried out:
      • A / B test: they consist of making two exactly the same designs in which you only modify what you want to check (for example, the download button in green or blue) and verify which of the two options has generated better results.
      • Heat Maps: They are maps which represent, by means of colors, the places where our users direct their gaze for the longest and the least.
        Generally the colors used go from red, to represent those areas where users look for a longer time, to blue, to represent those that do not capture their attention, going through orange for fields that have moderate attention, yellow for those that they do it with a medium attention and green for those to whom the user pays low attention.
      • Click maps: they are used to check where on our page or on what options our users tend to click. This will allow us to know, for example, where we should locate the button that leads our users to perform the action that most benefits us.


    UIThe acronym UI comes from the English concept User Interface. It focuses on everything related to what our user sees on the screen rather than the experience when interacting with what he is observing.

    In other words, to evaluate a user's experience when interacting with something, such as our interface, there has to be something to interact with: this is what the User Interface takes care of.

    It should be noted that the UI, rather than focusing on the aesthetic part of our site, such as the colors, shapes and fonts that we will use, the style that we will use, the images to include, etc., does so in the distribution of the elements that will make up our website: where can we get the header? Where will we put the images? How much space will they take up?

    Once our interface is created, we will use the UX and the results of its checks to modify everything that is necessary.



    The initials IxD refer to the term Interaction Design, whose translation into our
    language would be Interaction Design.IxD

    We could say that the interaction design serves as a connection between the User Experience and the User Interface, since it is the discipline in charge of specifying how the interactions carried out when using a certain function, will be carried out. It focuses on questions such as, how do you go from one section to another (hovering over it, clicking ...), when a pop-up window will appear? In short, it is the response that the interface will give to the actions performed by the user.

    Well planned, the combination of the User Experience, the User Interface and the Interaction Design, will ensure that the users of your page have a satisfactory experience when interacting with your website, which will translate into a longer time spent in it and a Increased number of times they will turn to it when they need it. In this way, you will get a better organic positioning for your page, which will make you appear in the top positions of the different search engines.

    At mbudo we have a team of specialists in web graphic design with extensive experience in UX, UI and IxD that will help you with everything you need. If you are interested in improving your site, do not hesitate to contact us.

    hubspot training


    Silvia Martínez

    Silvia Martínez

    Silvia is a senior technician in graphic design and a graduate in fine arts. He has a master's degree in digital marketing and several certifications from HubSpot. His hobbies include art, travel and nature.