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, autor AutorAngel Sánchez Seguidores: 146

Ilustración principal del artículo Diseñar la interfaz de usuario antes de comenzar con el código

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. 

¿Qué te pareció? ¡Comparte tu opinión ahora!


Opiniones:
12
Votos:
66

Este video podría interesarte👇👇👇

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
  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.
Código QR de acceso al artículo Diseñar la interfaz de usuario antes de comenzar con el código

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web. Publicado el 07/10/2015

Descargar PDF

Debate

Logotipo de
Tu opinión

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Rodolfo Álvarez
85
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
Retrato de Albert Clemente
0
Feb. 2017

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
Responder
Retrato de Paúl Carrion
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
Retrato de Angel Sánchez
146
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
Responder
Retrato de Albert Clemente
0
Feb. 2017

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
Logotipo de Mkti Marketing
1
Nov. 2015

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

1
Retrato de Christian Armando Gómez Sillas
2
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
Retrato de Adriana Salazar
0
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
Retrato de Patricio Correnti
0
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
Retrato de Diego Lunelli
4
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
Retrato de Luis Francisco Montero
6
Oct. 2015

Excelente.

0
Retrato de Hernán Barrios Montes
0
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

Te podrían interesar

Próximos seminarios online

Seminarios de actualización para especializarte junto a los que más saben

Auditoría de Marca

Auditoría de Marca

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

30 horas (aprox.)
1 abril

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...

20 horas (aprox.)
1 abril

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

15 horas (aprox.)
1 abril