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.

Retrato de Angel Sánchez Angel Sánchez Córdoba Seguidores: 145

Opiniones:
12
Votos:
64
Compartir:
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!

Retrato de Angel Sánchez Angel Sánchez Córdoba Seguidores: 145

Opiniones:
12
Votos:
64
Compartir:

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.

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 Albert Clemente
0
Albert Clemente
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
Responder
Logotipo de Mkti Marketing
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
Responder
Retrato de Christian Armando Gómez Sillas
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
Responder
Retrato de Adriana Salazar
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
Responder
Retrato de Rodolfo Álvarez
83
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
Retrato de Albert Clemente
0
Albert Clemente
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 Patricio Correnti
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
Responder
Retrato de Diego Lunelli
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
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
145
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
Responder
Retrato de Luis Montero Hernández
6
Luis Montero Hernández
Oct 2015

Excelente.

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

Te podrían interesar

Retrato de Paco Contreras
Autor:
Paco Contreras
Título:
Yo tengo un pato en internet
Sinopsis:
Un buen planteamiento de tu estrategia en internet te ofrece seguridad de movimientos para conseguir una comunicación efectiva.
Compartir:
Interacciones:
Votos:
35
Opiniones:
18
Seguidores:
4
Retrato de Luis Correa
Autor:
Luis Correa
Título:
Comunicabilidad y usabilidad
Sinopsis:
Un modelo que describe las etapas asociadas al desarrollo de interfaces gráficas de usuario desde el punto de vista de su efectividad comunicativa.
Compartir:
Interacciones:
Votos:
34
Opiniones:
9
Seguidores:
17
Retrato de Rodrigo Mazza
Autor:
Rodrigo Mazza
Título:
Evolución y desvalorización de una profesión
Sinopsis:
Una breve historia de la edición gráfica digital, las adaptaciones del diseñador gráfico y el doble filo de Internet.
Compartir:
Interacciones:
Votos:
86
Opiniones:
81
Seguidores:
38
Ilustración principal del artículo Quiero tener mi sitio web pero no sé de Internet
Autor:
Rafael Juárez
Título:
Quiero tener mi sitio web pero no sé de Internet
Sinopsis:
Respuesta a la pregunta más común —explícita o tácita— que presentan la mayoría de los que deciden encarar proyectos en la web.
Compartir:
Interacciones:
Votos:
161
Opiniones:
34
Seguidores:
74
Ilustración principal del artículo Los diez errores en diseño web revisados
Autor:
Fernandho Silva
Título:
Los diez errores en diseño web revisados
Sinopsis:
¿Cómo está el diseño web de hoy en relación al famosísimo decálogo de errores que detectara Jakob Nielsen en el ya lejano año 2002?
Compartir:
Interacciones:
Votos:
161
Opiniones:
42
Seguidores:
1
Retrato de Leonardo Álvarez
Autor:
Leonardo Álvarez
Título:
¿Razones para invertir en Internet o justificaciones del gasto?
Sinopsis:
A la hora de desarrollar el canal on-line de la empresa, ¿piensas en razones para invertir en Internet o en justificaciones del gasto?
Compartir:
Interacciones:
Votos:
29
Opiniones:
20
Seguidores:
0

Próximos cursos online

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

Branding Corporativo

Branding Corporativo

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

4 semanas
¡Ya mismo!

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 semanas
¡Ya mismo!

Estrategia de Marca

Estrategia de Marca

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

4 semanas
17 Noviembre

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 semanas
3 Febrero

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 semanas
6 Abril