Diseño de Aplicaciones

Por Genaro Joel Rodríguez Santoyo

“Si tuviera que invertir para mejorar mis productos de software, lo haría en el diseño de los mismos y no necesariamente en la propia tecnología.”

– Genaro J.

Mi carrera profesional tomó un giro de 180 grados al graduarme, pues me integré a una empresa de tecnologías de información cuando yo había estudiado ingeniería industrial. Bastante distante a mis estudios, comencé a aplicar principios de ingeniería industrial en la forma cómo entregábamos servicios de tecnología. Hoy, y después de ya bastantes años de experiencia en mi espalda, si tuviera que darte sólo un consejo en relación al desarrollo de software te diría que empezaras a poner más atención en el diseño de las aplicaciones que construyes o planeas construir. ¿Me estás diciendo que le ponga más atención al diseño que a la tecnología misma? La respuesta es sí y trataré de explicarlo en este artículo.

Todos hemos escuchado esa frase que dice “de la vista nace el amor”; lo anterior es tan cierto que he visto escenarios donde aplicaciones que se han desarrollado con la mejor tecnología han fracasado rotundamente por la falta de un buen diseño, digamos que la primera impresión detonó sentimientos negativos, y de ahí se fue en espiral hacia abajo.

Un mal diseño invoca una resistencia al cambio de parte de los futuros usuarios de la aplicación, por el contrario, un buen diseño tiene una poderosa influencia en la confianza de quienes utilizarán la herramienta.

Una de las cosas que me percaté muy temprano en mi carrera profesional dentro de esta industria es que la responsabilidad de diseñar aplicaciones recaía en los propios desarrolladores y nadie le ponía atención. La realidad es que el interés o atención que un programador le da a la parte de diseño sigue limitándose a hacerle honor a esta frase:

“No se ve muy bien y/o quizás no sea muy práctico, pero funciona.”

Lo anterior es una afirmación absolutamente falsa, pues el diseño debiera ser responsabilidad de todo el equipo involucrado en el desarrollo de la aplicación. Todas las partes debieran de poner atención a esto, pues al final del día la pregunta que deberíamos de hacernos es: ¿de qué nos sirve esforzarnos en el desarrollo de la aplicación si ésta no será bien vista o aceptada por nuestros usuarios?

Si un excelente diseño es parte del desarrollo, tendremos una buena impresión del proyecto final, la interfaz nos parecerá amigable, se explorará autodidácticamente, la gente que usará el nuevo o modificado sistema no será tan renuente al cambio, etcétera. En cambio, si consideramos sólo su funcionalidad, cumplirá todas las funciones para lo cual fue elaborado, y no se me ocurre otra cosa más.

El buen diseño y buena usabilidad tienen una poderosa influencia en la confianza del consumidor; si bien es cierto que las cosas atractivas funcionan mejor, la explicación a esta afirmación es que la funcionalidad/usabilidad de un sistema es directamente proporcional a un buen diseño, porque a las personas les gustan las cosas que se ven bien, que son atractivas y sobre todo fáciles de usar.

Es cierto que somos tecnólogos y nos encanta hablar de la tecnología en términos de lo que esta puede lograr, pero no nos olvidemos que al final del día estamos desarrollando productos para personas, y que a la mayoría de estas personas (consumidores) no les interesa saber ni conocer en qué plataforma está desarrollada nuestra aplicación, y/o qué componentes de tecnología estamos utilizando. Una aplicación desarrollada en C# .NET, Java, PHP y/o Ruby and Rails puede verse idéntica (en el front end) a los ojos de un consumidor.

“…la alternativa al buen diseño es mal diseño…”

–Douglas Martin

El diseño de aplicaciones es un tema relativamente nuevo en el sentido de que ahora somos más sensibles a ello. Si bien es cierto que esta tarea se viene haciendo desde hace muchos años, el diseño profesional de aplicaciones es ahora mucho más importante que antes. Por desgracia, debo admitir que el talento humano especialista en diseño de aplicaciones es difícil de encontrar y reclutar.

Quisiera darte un ejemplo de la diferencia que hace utilizar un profesional de diseño. Como dicen por ahí, una imagen vale más que mil palabras y aquí tenemos el ejemplo perfecto. Lo más ilustrativo de las siguientes imágenes es que estamos hablando de la misma aplicación, por lo tanto comparar los resultados resulta muy fácil. Este sistema es un sistema que te permite construir encuestas y distribuirlas por diferentes medios para recolectar respuestas.

La siguiente imagen muestra la aplicación diseñada por un programador:

A toda luz podrás darte cuenta que esta primer pantalla carece de estructura, usabilidad y claridad. No se utiliza ninguna especie de elemento visual que nos trate de explicar lo que la aplicación quiere que hagamos con ella. Para remediar esto lo que se hizo fue utilizar explicaciones en “letras pequeñas”, que da como resultado una pantalla saturada de texto que carece de sentido común en relación al flujo que un usuario debería de seguir.

Esta siguiente imagen muestra la misma aplicación, pero ahora diseñada por un especialista:

A diferencia de la primer pantalla, la segunda es mucho más agradable a la vista por su simplicidad. Lo primero que salta a la vista es el cuadro de texto que se encuentra a un lado de la leyenda “Pregunta:”, ello implica por deducción visual que este campo es el campo más importante de la pantalla y, por lo tanto, debo de hacer algo con eso. En este caso, se refiere a que ahí debemos de redactar la pregunta que estamos tratando de construir y que formará parte de la encuesta.

La segunda cosa importante con la que cuenta la segunda pantalla, es que el flujo que se sigue va de izquierda a derecha y obedece a un patrón universal de cómo el ser humano lee las cosas (en algunas culturas no es así). Si observas bien, la pantalla nos pide que primero redactemos la pregunta del lado izquierdo y del lado derecho nos muestra más opciones en relación a la misma pregunta: Sección (si la pregunta pertenecerá a alguna sección dentro de la encuesta) e Instrucciones (información adicional que le ayudará al encuestado a entender la pregunta que se le esta formulando).

Como tercer punto y que me parece que es el cambio más importante de esta comparación, es que la pantalla me dice que debo de seleccionar el tipo de pregunta que estoy formulando, y mediante elementos visuales me da una idea del tipo de preguntas que voy a encontrar en cada una de las opciones. En este caso, los íconos de la pregunta seleccionada denotan un Sí y No en checkbox y radio button, lo que me dice que ahí encontraré preguntas de tipo opción múltiple, checkbox y listados (combos); en pocas palabras, preguntas donde deberé seleccionar una o varias respuestas.

“El buen diseño es obvio. El gran diseño es transparente.”

-Joe Sparano

¿Cuantas veces hiciste clic sobre un texto porque pensaste que era un botón y no era? Esto en inglés se llama “affordance”, y es el principio de que cada elemento interactivo de un diseño debe implicar visual y físicamente la acción para la que fue diseñado.

La vista es un acto de distanciamiento de juicio, normalmente es el primer contacto con una persona en donde se elabora un prejuicio antes de entrar en un contacto directo. Lo mismo pasa con una interfaz. Antes de utilizarla, lo primero que se juzga es la estética (el diseño). De manera que antes de comenzar a interactuar con ella, la persona ya elaboró un prejuicio (positivo o negativo) hacia la interfaz. Lo anterior sólo quiere decir una cosa, y son malas noticias para nosotros los que desarrollamos aplicaciones, y es que a veces el juicio de un usuario guiado sólo por el diseño de la interfaz puede ser un juicio muy pobre, limitado e incluso injusto desde nuestra perspectiva, pero esa es la realidad actual y a eso hay que acostumbrarse.

“Una aplicación mal diseñada terminará costándote mucho dinero…”

-Genaro J.

Existen muchos factores, guías y prácticas que se tienen que tomar en cuenta cuando diseñamos aplicaciones, incluyendo:

• La tipografía que debes de utilizar
• La ubicación de las leyendas (labels) dependiendo del tipo de formulario que estas aplicando
• Espacios
• Ubicación del menú y filtros
• El diseño de las tablas
• Colores y contrastes de botones
• Entre otras cosas…

¿Quieres compartir nuestro artículo? Utiliza los botones de compartir en redes sociales o descarga nuestro PDF

Si estás próximo a arrancar un proyecto de desarrollo de software y tienes dudas sobre este tema o prefieres recibir ayuda profesional desde un inicio y garantizar el éxito en el diseño de tu aplicación, te invito a que nos contactes.

[hr]

“Somos la mejor opción para acompañar a tu Organización durante su Transformación Digital. Más de 20 años colaborando con empresas nacionales e internacionales.

Si estás próximo a arrancar un proyecto de migración a La Nube, Desarrollo de Software o Aplicaciones Móviles Empresariales y tienes dudas sobre este tema, te invito a que nos contactes”.

Somos una Empresa de Desarrollo de Software, especialista en Desarrollo de Aplicaciones Web, Desarrollo de Apps Empresariales, Microsoft Dynamics 365 y Fábrica de Software. Desarrollamos software basado en Microsoft .NET, y aplicaciones nativas en iOS o Android; para aquellas empresas que sólo requieren la contratación directa de especialistas, brindamos asesoría especializada de acuerdo a las necesidades de nuestros clientes con experiencia en las tecnologías más avanzadas para apoyar tu estrategia en desarrollo de sistemas y desarrollo de app.