El modelo de interacción

https://www.experienceoutcomes.com/case-studies/defining-interaction-models/

https://www.experienceoutcomes.com/case-studies/defining-interaction-models/

¿Qué es un modelo de interacción?

An interaction model is a design model that binds an application together in a way that supports the conceptual models of its target users. It is the glue that holds an application together. It defines how all of the objects and actions that are part of an application interrelate, in ways that mirror and support real-life user interactions. It ensures that users always stay oriented and understand how to move from place to place to find information or perform tasks. It provides a common vision for an application. It enables designers, developers, and stakeholders to understand and explain how users move from objects to actions within a system. It is like a cypher or secret decoder ring: Once you understand the interaction model, once you see the pattern, everything makes sense. Defining the right interaction model is a foundational requirement for any digital system and contributes to a cohesive, overall UX architecture.

Jim Nieters (2012) – source

Ejemplos

Navigation drawer

Navigation drawer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/57d6206e-7f0a-4d92-9d3b-a30155da8935/unnamed3.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f17a451c-7503-49d4-8ccc-6a6f89a01225/unnamed2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a9caa1dc-d649-44fd-93fc-df950ad1fb1d/unnamed.png

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F7gUvM27FtHIRCfysJnXZep%2FFTZ_Interaction-Model%3Fnode-id%3D0%253A1

<aside> 📖 Modal

</aside>

<aside> 📖 Navigation drawer

</aside>

Tipos de navegación

Cambiando la hamburguesa por un botón self-explanatory

Cambiando la hamburguesa por un botón self-explanatory

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8d45058b-ce1b-4465-9804-ba2e3b7b5019/Screen_Shot_2020-09-27_at_23.27.54.png

<aside> 💡 Mobile: hidden nav < combo nav; Desktop: hidden < combo < visible

</aside>

DOs and DON'Ts

DO: Start with a feature

When you start the design for a new app idea, what do you design first? If it’s the navigation bar at the top of the page, you’re making a mistake. The easiest way to find yourself frustrated and stuck when working on a new design is to start by trying to “design the app.” When most people think about “designing the app”, they’re thinking about the shell.

Should it have a top nav, or a sidebar? Should the navigation items be on the left, or on the right? Should the page content be in a container, or should it be full-width? Where should the logo go?

The thing is, an “app” is actually a collection of features. Before you’ve designed a few features, you don’t even have the information you need to make a decision about how the navigation should work. No wonder it’s frustrating! Instead of starting with the shell, start with a piece of actual functionality.

For example, say you’re building a flight booking service. You could start with a feature like “searching for a flight”.

Your interface will need: · A field for the departure city · A field for the destination city · A field for the departure date · A field for the return date · A button to perform the search

Start with that.

Hell, you might not even need that other stuff anyways — it worked for Google.

Source: Refactoring UI (2018)