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: 144

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

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

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

Angel Sánchez

M├ís art├şculos de Angel S├ínchez

T├ştulo:
Qu├ę es ser un dise├▒ador ├ígil
Sinopsis:
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.
Compartir:
T├ştulo:
Qu├ę es ser un dise├▒ador UX
Sinopsis:
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?
Compartir:

Debate

Logotipo de
Mi 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
144
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 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 Vero Orso
Autor:
Vero Orso
T├ştulo:
┬┐C├│mo no pensar en dise├▒o adaptable?
Sinopsis:
El dise├▒o adaptable (o responsive design) es la nueva manera de dise├▒ar para medios digitales.
Compartir:
Interacciones:
Votos:
75
Opiniones:
40
Seguidores:
66
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 Ernesto Antonio Santos Le├│n
Autor:
Ernesto Antonio Santos Le├│n
T├ştulo:
Informaci├│n y privacidad en la era digital
Sinopsis:
Con la evoluci├│n del internet se generan nuevos planteamientos, en especial sobre los datos. ┬┐C├│mo se maneja la informaci├│n?, ┬┐qu├ę sucede con la privacidad de los usuarios?
Traducciones:
Compartir:
Interacciones:
Votos:
8
Opiniones:
2
Seguidores:
32
Retrato de Angel Sánchez
Autor:
Angel Sánchez
T├ştulo:
Qu├ę es ser un dise├▒ador UX
Sinopsis:
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?
Compartir:
Interacciones:
Votos:
345
Opiniones:
119
Seguidores:
144
Retrato de Annika Maya
Autor:
Annika Maya
T├ştulo:
Gerontodise├▒o
Sinopsis:
El gerontodise├▒o conlleva la eliminaci├│n de los paradigmas que rodean al dise├▒o para adultos mayores. Es una nueva manera de dise├▒ar con un futuro impresionantemente fruct├şfero.
Traducciones:
Compartir:
Interacciones:
Votos:
70
Opiniones:
91
Seguidores:
43
Retrato de Ricardo Martins
Autor:
Ricardo Martins
T├ştulo:
8 se├▒ales de que algunas escuelas de dise├▒o atrasan 15 a├▒os
Sinopsis:
En Am├ęrica Latina tenemos much├şsimas escuelas de dise├▒o. Algunas forman dise├▒adores para vivir en el pasado.
Traducciones:
Compartir:
Interacciones:
Votos:
164
Opiniones:
128
Seguidores:
82
Retrato de Angel Sánchez
Autor:
Angel Sánchez
T├ştulo:
Qu├ę es ser un dise├▒ador ├ígil
Sinopsis:
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.
Compartir:
Interacciones:
Votos:
155
Opiniones:
138
Seguidores:
144
Retrato de Gonzalo De La Cuadra Reveco
Autor:
Gonzalo De La Cuadra Reveco
T├ştulo:
Comunicaci├│n, dise├▒o y accesibilidad
Sinopsis:
Problemáticas y desafios de la comunicación y el diseño a la hora de trabajar la accesibilidad.
Compartir:
Interacciones:
Votos:
60
Opiniones:
21
Seguidores:
35

Pr├│ximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

Estrategia de Marca

Estrategia de Marca

15 claves para programar el dise├▒o de s├şmbolos y logotipos de alto rendimiento

4 semanas
29 Julio

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
2 Septiembre

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
16 Septiembre

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
30 Septiembre

Branding Corporativo

Branding Corporativo

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

4 semanas
21 Octubre