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

Seguidores:
143
Opiniones:
12
Votos:
64
Compartir:
  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.

Angel Sánchez

M├ís art├şculos de 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:
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:

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
Hace un a├▒o

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
81
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
Hace un a├▒o

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

Ilustraci├│n principal del art├şculo ┬┐Dise├▒as sitios web o folletos web?
Autor:
Paulo Lucia
T├ştulo:
┬┐Dise├▒as sitios web o folletos web?
Sinopsis:
La importancia de ofrecer a los clientes sitios web que ellos mismos puedan administrar y actualizar.
Interacciones:
Votos:
31
Opiniones:
13
Seguidores:
11
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.
Interacciones:
Votos:
31
Opiniones:
9
Seguidores:
16
Ilustraci├│n principal del art├şculo Personalizaci├│n de objetos en los juegos de Facebook
Autor:
Llu├»sa D├şaz
T├ştulo:
Personalizaci├│n de objetos en los juegos de Facebook
Sinopsis:
El caso de Dragon City y la personalizaci├│n eterna del drag├│n como elemento base de dise├▒o.
Interacciones:
Votos:
14
Opiniones:
10
Seguidores:
20
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:
Interacciones:
Votos:
70
Opiniones:
91
Seguidores:
42
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.
Interacciones:
Votos:
155
Opiniones:
138
Seguidores:
143
Ilustraci├│n principal del art├şculo El legado de Steve Jobs
Autor:
Mario Balcázar
T├ştulo:
El legado de Steve Jobs
Sinopsis:
Para los dise├▒adores es imposible huir de la figura del fundador de Apple. Todos los d├şas vivimos y trabajamos con sus dise├▒os.
Interacciones:
Votos:
263
Opiniones:
187
Seguidores:
543
Ilustraci├│n principal del art├şculo C├│digo QR: digitalmente tradicional
Autor:
Paulo Lucia
T├ştulo:
C├│digo QR: digitalmente tradicional
Sinopsis:
Muchos anuncian la muerte del formato papel, argumentando que la tinta se secará para siempre y nunca más sentiremos el olor a hoja de diario o de libro viejo.
Interacciones:
Votos:
27
Opiniones:
30
Seguidores:
11
Ilustraci├│n principal del art├şculo El misterioso mundo del encoding
Autor:
Mauro Gullino
T├ştulo:
El misterioso mundo del encoding
Sinopsis:
La desesperaci├│n que surge al ver nuestras p├íginas web con s├şmbolos extra├▒os se potencia al desconocer las causas. ┬┐C├│mo arreglarlas?
Interacciones:
Votos:
53
Opiniones:
17
Seguidores:
30

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

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
4 Febrero 2019

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
4 Marzo 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 semanas
8 Abril 2019

Branding Corporativo

Branding Corporativo

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

4 semanas
20 Mayo 2019

Estrategia de Marca

Estrategia de Marca

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

4 semanas
24 Junio 2019