Diseñar la interfaz de usuario antes de comenzar con el código

Muchas veces el inicio de un proyecto de software comienza con el enfoque y perspectiva del desarrollo de código; sin embargo, lo ideal es iniciar el proyecto desde la perspectiva del diseño.

Angel Sánchez Córdoba
Followers:
140
Comments:
12
Votes:
63
Compartir:

Cuando hablamos de diseño de interfaz, el término «diseño» no debe entenderse como el arte final a entregar, sino como un conjunto de situaciones en las que debe involucrarse el equipo de desarrollo. Partiendo de un concepto basado en datos o métricas, esbozado en papel y lápiz, pasando por una serie de validaciones e iteraciones que involucran más métodos como la generación de wireframes (o esquemas iniciales), mockups en baja y alta fidelidad (o representaciones con mayor o menor detalle del producto final), diseños de interacción (donde se muestren los comportamientos que suceden como consecuencia de las acciones del usuario interactuando con la interfaz), etc., el diseño involucra también la gestión de los contenidos textuales, la arquitectura de información y navegación, la gestión de errores, la gestión de situaciones de ayuda, la gestión de los llamados «blankstates» —situaciones en las que la interfaz se muestra con espacios vacíos de contenido. Como puede notarse, comenzar con el «diseño» es mucho más que comenzar a dibujar en Sketcho o en Photoshop.

El desarrollo de la mayoría de las aplicaciones comienza con la idea de programar primero, y esa es una mala idea. La programación es el proceso que más recursos consume en el desarrollo de una aplicación (o un website, o una tienda en línea, etc.) y es la parte mas cara y difícil de cambiar. En vez de empezar por la programación, siempre conviene comenzar por el diseño.

«Mejor goma de borrar en la mesa de dibujo, que martillo en la zona de obra».

El diseño es un elemento relativamente flexible (y ni qué decir de los bocetos). Un boceto en papel es barato y fácil de modificar, incluso los diseños maquetados en HTML/CSS se pueden cambiar (o desechar) con relativa simplicidad. Pero no se puede decir lo mismo de la programación pura y dura. Diseñar primero te mantiene flexible. Comenzar programando te cierra opciones y conlleva futuros costes adicionales. De ahí que es tan importante trabajar con continuas iteraciones con el equipo de desarrollo, entender que el equipo es «diseñador de producto».

Otra razón por la cual conviene comenzar con el diseño es que la interfaz es el producto, lo que ven las personas, a fin de cuentas es lo que estás vendiendo. Si simplemente colocas la interfaz al final de la programación se podrán ver las grietas. Por ello, también vale tanto comenzar con el enfoque de la funcionalidad del diseño ya que hacer pruebas sobre prototipos es muchísimo más económico y rápido que realizar pruebas de uso en productos terminados. Comenzar con el diseño te mantiene flexible y te proporciona las respuestas antes que después, en el proceso de desarrollo.

Entonces conviene empezar con la interfaz para poder ver desde el principio el aspecto y funcionamiento de la aplicación. La interfaz se revisa continuamente durante el proceso completo de desarrollo. ¿Tiene sentido? ¿Es fácil de usar? ¿Soluciona el problema que tenemos entre manos? Estas son preguntas que solo se pueden contestar de verdad cuando se están trabajando con las pantallas reales.

Pero no todo es diseño por el diseño puro, también se debe involucrar a los usuarios que utilizarán el sistema que se está diseñando. Por ello conviene que el equipo domine los métodos de User Centered Design.1 Además al trabajar con métodos de AgileUX2 o LeanUX3 la perspectiva inicial desde el diseño funcional es, simplemente, la mejor forma de enfocar el desarrollo del producto digital. 

Followers:
140
Comments:
12
Votes:
63
Compartir:

12 Comments

Comment
  1. User Centered Design: Métodos que tienen por objeto la creación de productos que resuelvan necesidades concretas de sus usuarios finales. Más información.
  2. Agile UX: Forma simplificada de los métodos de «Diseño de Experiencia de Usuario» que prima los ciclos de desarrollo y despliegue del producto. Más información.
  3. Lean UX: Forma simplificada de los métodos de «Diseño de Experiencia de Usuario» que prima los ciclos de diseño y métricas del producto. Más información.

This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Published on 07/10/2015.

Angel Sánchez

More articles by Angel Sánchez in Spanish

Idioma:
ES
Title:

Qué es ser un diseñador ágil

Synopsis:

Ser un diseñador ágil quiere decir que estás metido de lleno en entornos de desarrollo de software con metodologías ágiles como Kanban, Scrum, etc.

Share:
Idioma:
ES
Title:

Qué es ser un diseñador UX

Synopsis:

Muchos diseñadores agregan la coletilla UX/UI a sus perfiles en twitter o linkedin, pero ¿se sabe bien qué es lo que implica ser un diseñador UX/UI?

Share:

You may be interested

Anita Chalu
Idioma:
PT
Author:

Anita Chalu

Title:

O Designer no ambiente VUCA

Translations:
Share:
Interactions:
Votes:
7
Followers:
53
Ricardo Martins
Idioma:
ES
Author:

Ricardo Martins

Title:

8 señales de que algunas escuelas de diseño atrasan 15 años

Translations:
Share:
Interactions:
Votes:
161
Comments:
123
Followers:
78
Sebastián Vivarelli
Idioma:
ES
Author:

Sebastián Vivarelli

Title:

La web de papel

Share:
Interactions:
Votes:
101
Comments:
27
Followers:
281
Paulo Lucia
Idioma:
ES
Author:

Paulo Lucia

Title:

Código QR: digitalmente tradicional

Share:
Interactions:
Votes:
27
Comments:
30
Followers:
11
Percy Negrete
Idioma:
ES
Author:

Percy Negrete

Title:

¿Qué cualidades debe tener un diseñador de experiencia usuaria?

Share:
Interactions:
Votes:
77
Comments:
40
Followers:
7
Dosve
Idioma:
ES
Author:

Dosve

Title:

Creatividad en movimiento para un canal infantil

Share:
Interactions:
Votes:
63
Comments:
35
Followers:
7
My opinion:

Login with your account to comment on this article. If you do not have it, create your free account now.

0
Albert Clemente
One year ago

Muy de acuerdo. La última fase del diseño acaba solapada con el inicio de la primera fase del desarrollo de la aplicación.

Buen artículo.

0
Reply
1
Mkti Marketing
Nov 2015

Estoy de acuerdo, incluso se pueden hacer pruebas de usabilidad sin generar código, todo desde el software de diseño.

1
Reply
2
Christian Armando Gómez Sillas
Oct 2015

Era algo que ya tenia contemplado, pero que no sabia hasta que era tan cierto y concuerdo con esto, es mas fácil hacer el boceto y hacer cambios a este, que tener el diseño y estar haciendo modificaciones.

Se tendría que ver cual es la funcionalidad de la interfaz, como el usuario debe utilizarla y en realidad como lo utiliza, ya que muchas interfaces en veces no están bien diseñadas, el diseñador debe diseñar para el usuario, el diseño se debe adecuar al usuario y no el usuario se debe adecuar a la interfaz.

0
Reply
0
Adriana Salazar
Oct 2015

Soy diseñadora de interfaz en una fabrica de software. En un principio no había diseñador alguno y los proyectos se saltaban muchos pasos antes del desarrollo. Debemos tener conceptos claros y testear con el cliente para obtener constante feedback del producto.

Ahora las cosas han mucho mejor, los errores son menores, el lenguaje visual ha mejorado y los clientes están satisfechos.

3
Reply
80
Rodolfo Álvarez
Oct 2015

…"la interfaz es el producto" esta es la premisa, cuando compras un teléfono si importa el hardware pero lo importante es lo que ves y como funciona. En el proceso de diseño el mismo es el product y el resultado es una interacción funcional, la programación es "la tripa" sin una cosa no hay la otra. Excelente artículo.

3
0
Albert Clemente
One year ago

Estoy en contra de la primera parte de tu comentario. Por ponerte dos ejemplos: un móvil Android gama media y un Honda Civic Type R (turismo de altas prestaciones). Ambos tienen un diseño de experiencia del usuario muy bueno y logrado. Pero en el primero el hardware es basura. Ese producto no será recordado por mucha interfaz y diseño logrado. Cuando usas un teléfono quieres que vaya fluído, no que se cuelgue a los dos minutos por tener Gmail y Whatsapp abierto (un decir). Si el equipo no funciona como debe es aquello de "por mucho que la mona se vista de seda...". En cambio con el coche lo tienes todo: diseño y prestaciones. Una máquina que corre muchísimo y te hace sentir sea por la interfaz o por sus prestaciones, ambas van a la par.

0
Reply
0
Patricio Correnti
Oct 2015

Eso es exacto.

Me tocó inaugurar el área de diseño en la empresa de desarrollo de software en la que trabajo hace 5 años.

Proponer el diseño en el último eslabón de la cadena de producción de software es uno de los errores más comunes que cometen tanto las empresas como los desarrolladores independientes.

El área de diseño debe trabajar junto al área de análisis, desde el principio de los proyectos y recibiendo la documentación en crudo si es posible, y la razón es muy sencilla: el diseño es una disciplina mayormente analítica.

Pero eso no suele saberlo el común de las personas y no es su culpa tampoco.

2
Reply
4
Diego Lunelli
Oct 2015

Buen aporte ángel. Actualmente le programación está de moda, y esta muy bien, son los que hacen que las cosas técnicamente funcionen, lo idea es trabajar en equipo, sin ninguna de las 2 partes tener más peso, un buen desarrollo, siempre va de la mano de una buena idea con conceptos claros, una experiencia de usuario útil y simple + un diseño que venda y agilice el entendimiento de todo, que enamore y deje incorporado el sistema en el inconsciente del usuario.

1
Reply
1
Paúl Carrion
Oct 2015

El inicio de cualquier proyecto interactivo debe comenzar con la evaluación de la problemática y el contexto en el cual se usará dicho producto digital, incluyendo necesidades espexificas del usuario, luego el diseñador inicia el proceso de desarrollo de la interfaz, no como un componente estético sino como un espacio de interacción entre el usuario y la herramienta, una evidencia de esta metodología de trabajo es el número creciente de webapps que emergen en la red, las cuales permiten crear los mockups que mencionas, incluyendo formas de interactividad sin tener que escribir una sola línea de código, disminuyendo cada vez más la necesidad de un programador en las fases iniciales de desarrollo

4
140
Angel Sánchez
Oct 2015

Completamente de acuerdo Paúl, yo me refiero al "diseño" como el conjunto de actividades que definen el producto. No sólo a la parte visual. Gracias por comentar!

3
Reply
6
Luis Montero Hernández
Oct 2015

Excelente.

0
Reply
0
Hernán Barrios Montes
Oct 2015

Este es un artículo interesante e ilustrativo en el tema del diseño; gracias por sus aportes.

Fraterno abrazo y saludos para todos.

0
Reply

Upcoming online courses

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

4 weeks
17 Septiembre

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

4 weeks
29 Octubre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 weeks
28 Enero 2019

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 weeks
22 Abril 2019

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 weeks
22 Junio 2019