3 herramientas para desarrollo web imprescindibles

3 herramientas para desarrollo web imprescindibles

Aplicaciones web Blog Desarrollo Web Dexpierta Diseño Web Tecnología

En los últimos años, hemos visto un enorme crecimiento en una generación completamente nueva de aplicaciones web. Estas aplicaciones son más ricas, más interesantes, lo que lleva a un enorme aumento de la complejidad lo que tiene que ver con la parte del desarrollo front-end. En este post vamos a ver algunas herramientas para desarrollo web que facilitan el día a día de trabajo de los desarrolladores.

Marcos de trabajo como Backbone, AngularJS y EmberJS ofrecen soluciones robustas para crear aplicaciones sorprendentes, aprovechando todo el poder de la web. Mientras tanto, Javascript, el lenguaje web, ha crecido mucho (tanto en popularidad como en la madurez) y ahora tiene aplicación lateral de fondo con NodeJS.

Para tener éxito en estos nuevos retos de la complejidad, los desarrolladores han creado una gran cantidad de herramientas para agilizar el proceso general de desarrollo. Desde los marcos de prueba para perfilar herramientas, hasta otras herramientas maduras y útiles para lograr la mejor experiencia a nuestros usuarios.

Las tres herramientas para desarrollo web más imprescindibles

1. Chrome Developers Tools

Una de las mejores herramientas para desarrollo web que tenemos en nuestras manos actualmente. Desde su nacimiento, Chrome ha invertido mucho en sus herramientas de desarrollo y está mejorándolas continuamente. Cada versión (se actualiza cada 6 semanas aproximadamente) viene con sus propias características de la herramienta dev nuevos.

Esta herramienta contiene una completa suite de diversos instrumentos. Puede editar el DOM (HTML) / CSS en tiempo real, depurar Javascript paso a paso, realizar un análisis de rendimiento de profundidad, incluso agregar una terminal.

El editor DOM / CSS es una herramienta muy potente, lo que le permite proporcionar retroalimentación en tiempo real de su equipo. La página web oficial y el canal de desarrolladores de Google Youtube ambos son minas de oro de información. Por ejemplo, la sección sobre  API de línea de comandos contiene comandos muy útiles. También puedes consultar una gran cantidad de tutoriales en este sentido en HTML5 Rocks.

herramientas para desarrollo web

Además de todo esto, las herramientas de red permiten entender lo que realmente está pasando bajo el capó y optimizar sus flujos de carga, a la vez que la línea de tiempo da una visión más profunda de lo que hace el navegador. Si eres lo suficientemente curioso se puede aprender mucho acerca de cómo un navegador (e indirectamente, la web) está funcionando, lo que le permite tomar el control del ciclo de vida completo de una aplicación web.

2. Grunt

Grunt es la herramienta preferida cuando se trata de la tarea de automatización. Es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs. Con un simple fichero JS que llamaremos Gruntfile, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

El alcance de Grunt va más allá de simplemente la automatización de tareas front-end. Lo utilizamos, por ejemplo, para poner a prueba continuamente en PHP mientras desarrollamos. Grunt ofrece una amplia variedad de plugins y su sintaxis es consistente y fácil de aprender.

3. LiveReload

¿Cuántas veces de medias pulsa la tecla de refrescar (F5) en el teclado todos los días? Mucho, ¿no?

El desarrollo web supone realizar diversas tareas más creativas junto a otras más mundanas y aburridas. En este sentido una de las más básicas y hasta frustrantes es la necesidad de tener que recargar el navegador durante el desarrollo o la depuración de un cambio en una página web. LiveReload monitoriza cambios en el sistema de archivos de forma que cada vez que guardas un archivo el navegador se actualiza para poder ver los cambios en la página web abierta de forma instantánea y sin necesidad de tener que llevar a cabo de forma manual un “refresh”.

Incluso mejor, LiveReload aplica los cambios CSS sin recargar la página y recarga automáticamente la página cuando cambia el HTML.

Esta aplicación de escritorio con soporte para los principales navegadores web está disponible por el momento de forma única para usuarios de sistemas Mac OS X 10.6 Snow Leopard o posterior. Además también es posible acceder a dos extensiones dirigidas a los navegadores Firefox y Chrome.

Hablando de extensiones de Chrome, la tienda de Chrome está llena de cosas interesantes que te harán la vida mucho más fácil. Éstos son algunos de nuestros favoritos:

  • WhatFont, que te permite descubrir la fuente de cualquier elemento en cualquier sitio web (útil cuando se busca la tipografía perfecta que viste en otro sitio, o para la depuración de estilos de font-face).
  • Page ruler: otro útil, sobre todo porque al igual que cualquier desarrollador de front-end, que está obsesionado por la perfección de píxeles, ¿verdad?
  • Proxy SwitchySharp  también puede ser de gran ayuda cuando se trata de información de depuración localizada (moneda por defecto, los números de teléfono, etc).

Y para ti, ¿cuáles son tus herramientas favoritas cuando se trata de desarrollo front-end?

Si te ha gustado este artículo, entonces te encantará esto.

dexpierta

Únete a la comunidad de #dexpiertos y recibe por mail todas las novedades y tutoriales

¡Es gratis! ;)

La importancia de una buena experiencia de usuario

La importancia de una buena experiencia de usuario

Aplicaciones web Blog Desarrollo Web Diseño Web Tecnología

La experiencia del usuario siempre ha sido un tema candente. En este blog ya hemos hablado de cómo el diseño de una web influye a la hora de conseguir que sea eficaz. Hoy seguimos esta línea, sobre todo con la intención de guiar a nuestros futuros alumnos del Ciclo Formativo de Desarrollo de Aplicaciones Web, y hablamos sobre la importancia de una buena experiencia de usuario.

Cuando el usuario llega a una web tiene que disfrutar de una experiencia amable, sencilla y útil. Si la página es lenta, no carga bien, no se ve bien en su navegador o no es intuitiva porque los elementos no son fáciles de encontrar, el usuario tendrá una muy mala experiencia y evitará por todos los medios tener que volver a entrar en nuestra página web.

La experiencia de usuario (UX) forma parte del proceso de diseño y es esa parte de la que nadie habla hasta que algo comienza a ir mal. Sin embargo, para todo programador y diseñador web debe ser una de las partes más importantes y prioritarias del proceso de diseño, desde los primeros bocetos hasta el producto final.

En la siguiente imagen, podemos ver hasta qué punto es importante y qué factores influyen en una buena experiencia de usuario:

ux

Pero… ¿Qué es la experiencia de usuario?

La experiencia de usuario o UX es cómo una persona se siente cuando interactúa con un producto digital, ya sea una web o una aplicación. Una buena experiencia de usuario incluye una gran cantidad de factores, algunos que son controlables por los diseñadores y los desarrolladores y algunos que forman parte de las preferencias del usuario. Estos factores incluyen la usabilidad, accesibilidad, rendimiento, diseño/estética, la utilidad, la ergonomía, la interacción humana en general y la comercialización.

Pero la experiencia de usuario no es exactamente lo mismo que la facilidad de uso, aunque están relacionados. UX es la experiencia, la emoción, la intuición y la conexión que un usuario se siente cuando utiliza un sitio o producto. La usabilidad es más sobre la eficacia del diseño del sitio y lo fácil de usar que es. La usabilidad es un componente clave de la experiencia general del usuario.

El término ha crecido hasta abarcar también “el diseño centrado en el usuario”, que es básicamente el mismo concepto redactado de otra manera.

¿Por qué es importante una buena experiencia de usuario?

En términos de diseño, la experiencia de usuario es tan importante como la identidad visual. En serio. No importa lo bonita y moderna que sea una web o aplicación si la gente no sabe cómo interactuar con ella. Una buena experiencia de usuario es importante para cualquier producto digital, pero aún más importante para ciertos tipos de productos digitales: webs o aplicaciones complejas, webs de venta online (ecommerce), webs de empresas de reciente creación o proyectos de bajo presupuesto que tienen que captar al usuario casi sólo con la web.

Uno de los tipos más complejos de web son los ecommerce. No sólo el sitio tiene que estar bien organizado, sino que también tiene que ser muy claro y fácil de usar, así como incluir señales de cómo hacer una compra segura. Estos detalles, que puede parecer insignificantes, marcan la diferencia entre una web que ofrece una buena experiencia de usuario y una web que ofrece una mala experiencia de usuario.

Una buena experiencia de usuario es clave para los sitios complejos porque los usuarios deben ser capaces de navegar por el sitio y entender cómo usarlo. Descuidar esa experiencia de usuario puede dar lugar a un sitio al que el usuario no va a volver, por lo que cada usuario que perdemos es una oportunidad menos de hacer negocio. El desarrollo de una experiencia de interacción rica impulsará a los usuarios a visitar un sitio web.

Algunos ejemplos de una mala experiencia de usuario son los servidores sobrecargados, el tiempo de inactividad, los problemas con la creación de nuevas cuentas o dificultad para llenar las solicitudes o formularios. Todos estos problemas crean una conexión emocional negativa al sitio por parte de los usuarios.

Las seis principales ventajas de añadir una buena experiencia de usuario para el proceso de diseño y desarrollo son:

  • Aumento de la productividad
  • Aumento de las ventas
  • Disminución de los costes de formación y apoyo
  • Reducción del tiempo de desarrollo y costes
  • Menores costos de mantenimiento
  • Mayor satisfacción del cliente

Algunos ejemplos de buena experiencia de usuario

Apple

ux
Dejando a un lado los posibles amores/odios a la marca por diversos motivos la experiencia de usuario en la web de Apple es impecable. En todo momento el usuario sabe dónde se encuentra y cuál es la siguiente acción que puede realizar. Si hay buen ejemplo de buena experiencia de usuario. Es este.
ING Direct

En muchas ocasiones ING ha dejado claro que es un banco al que le importan realmente sus clientes, y por eso se preocupa en ofrecerles siempre lo mejor. Su web es un gran ejemplo de como una buena experiencia de usuario puede fidelizar un cliente.

Como hemos visto, diseñar una buena experiencia del usuario es una forma de arte en sí misma. Nunca se puede predecir con certeza cómo se percibirán su sitio o aplicación pero lo que sí podemos hacer es armarnos con las herramientas necesarias para tomar decisiones informadas sobre experiencia de usuario en el proceso de diseño.

Si te ha gustado este artículo, entonces te encantará esto.

dexpierta

Únete a la comunidad de #dexpiertos y recibe por mail todas las novedades y tutoriales

¡Es gratis! ;)

 

¿Qué es realmente una aplicación web?

¿Qué es realmente una aplicación web?

Aplicaciones web Blog Desarrollo Web Formación Internet Tecnología

Últimamente no hacen más que surgir nuevos términos relacionados con el mundo de Internet, las redes sociales y el desarrollo web. El término aplicación web es uno más en esa lista interminable de palabras que muchas veces creemos que sabemos explicar, pero cuando nos paramos a pensarlo realmente, somos conscientes de que son conceptos más complejos de lo que parecen. Además, todos estos términos están muy relacionados con todas esas nuevas profesiones que están surgiendo en torno a Internet y las webs, por eso es importante manejarlos bien si estamos pensando en enfocar nuestra carrera profesional en este sector.

¿Sabes realmente lo que es una aplicación web? Si la respuesta es no, entonces deberías seguir leyendo. Si es que sí, sigue leyendo de todas maneras porque quizá encuentres contenido interesante ;)

Es muy habitual pensar que una aplicación web es lo mismo que una página web porque desde (casi) siempre hemos tenido esa creencia errónea, y lo primero que tienes que tener claro es que una aplicación y una página web son dos cosas distintas, aunque a veces sus límites se encuentren un poco confusos. Vamos a intentar ponerle un poco de luz a todo esto, seguro que con ejemplos es más sencillo.

¿Qué es una aplicación web?

Una aplicación web es toda aquella aplicación que, utilizando internet como canal conductor de la información, recoge, gestiona y administra datos a nivel global para conseguir un fin específico. Estamos rodeados de aplicaciones web, aunque a veces no seamos conscientes de que lo son. Algunos ejemplos de aplicaciones web en nuestro día a día son las redes sociales, la banca electrónica, los sistemas de telefonía y videoconferencia por datos, los juegos en red, radio y tv online o las plataformas de elearning.

Estamos rodeados de dispositivos que utilizan esta tecnología web: ordenadores, teléfonos, televisiones, tablets, etc. Estos dispositivos son cada día más numerosos, están cada vez más presentes en nuestras vidas y acabaran desembocando en lo que hoy se como el “Internet de las cosas”Relojes, gafas, cámaras, parquímetros, neveras, que necesitaran aplicaciones web para estar conectados a Internet y realizar un montón de funciones complementarias. Según un estudio realizado por “BI Intelligence” el número de dispositivos con acceso a Internet en 2014 es de 6.500.000.000 y se estima que en 2017 será de 18.500.000.000, es decir se incrementará en un 284,6%.

aplicación web internet de las cosas

¿Cómo se desarrolla una aplicación web?

Todos estos dispositivos de los que hablamos generan datos que tienen que ser gestionados por programas para que el usuario pueda interactuar desde una interfaz web. Vamos a intentar explicar esto de forma sencilla. Aunque existen muchas variaciones posibles, una aplicación web está normalmente estructurada como una aplicación de tres-capas. En su forma más común, el navegador web ofrece la primera capa, y un motor capaz de usar alguna tecnología web dinámica, por ejemplo: PHP, Java Servlets o ASP, ASP.NET, CGI, ColdFusion, embPerl, Python o Ruby on Rails que constituye la capa intermedia. Por último, una base de datos constituye la tercera y última capa.

aplicación web

El navegador web manda peticiones a la capa intermedia que ofrece servicios valiéndose de consultas y actualizaciones a la base de datos y a su vez proporciona una interfaz de usuario.

Ventajas de las aplicaciones web

- Ahorra tiempo: Se pueden realizar tareas sencillas sin necesidad de descargar ni instalar ningún programa.

- No hay problemas de compatibilidad: Basta tener un navegador actualizado para poder utilizarlas.

- No ocupan espacio en nuestro disco duro.

- Actualizaciones inmediatas: Como el software lo gestiona el propio desarrollador, cuando nos conectamos estamos usando siempre la última versión que haya lanzado.

- Consumo de recursos bajo: Dado que toda (o gran parte) de la aplicación no se encuentra en nuestro ordenador, muchas de las tareas que realiza el software no consumen recursos nuestros porque se realizan desde otro ordenador.

- Multiplataforma: Se pueden usar desde cualquier sistema operativo porque sólo es necesario tener un navegador.

- Portables: Es independiente del ordenador donde se utilice (un PC de sobremesa, un portátil…) porque se accede a través de una página web (sólo es necesario disponer de acceso a Internet).

- La disponibilidad suele ser alta porque el servicio se ofrece desde múltiples localizaciones para asegurar la continuidad del mismo.aplicación web

- Los virus no dañan los datos porque éstos están guardados en el servidor de la aplicación.

- Colaboración: Gracias a que el acceso al servicio se realiza desde una única ubicación es sencillo el acceso y compartición de datos por parte de varios usuarios. Tiene mucho sentido, por ejemplo, en aplicaciones online de calendarios u oficina.

- Los navegadores ofrecen cada vez más y mejores funcionalidades para crear aplicaciones web ricas.

Inconvenientes de las aplicaciones web

- Habitualmente ofrecen menos funcionalidades que las aplicaciones de escritorio. Se debe a que las funcionalidades que se pueden realizar desde un navegador son más limitadas que las que se pueden realizar desde el sistema operativo.

- La disponibilidad depende de un tercero, el proveedor de la conexión a internet o el que provee el enlace entre el servidor de la aplicación y el cliente. Así que la disponibilidad del servicio está supeditada al proveedor.

*Fuente: Wikipedia

Ahora que ya sabes lo que es una aplicación web, quizá deberías plantearte que el desarrollo y diseño de las mismas es el presente y el futuro de las profesiones tecnológicas y por lo tanto una buena forma de reencauzar tu carrera profesional en caso de que ya hayas agotado todas las opciones en tu sector ;)

Si te ha gustado este artículo, entonces esto te encantará ;)

dexpierta

Únete a la comunidad de #dexpiertos y recibe por mail todas las novedades y tutoriales

¡Es gratis! ;)

Los 10 principios para un diseño web eficaz

Los 10 principios para un diseño web eficaz

Blog Desarrollo Web Diseño Web Tecnología

Nos encontramos en plena promoción para el próximo curso de nuestro Ciclo Formativo de Desarrollo de Aplicaciones Web, y nos hemos dado cuenta de que últimamente no hemos hablado mucho sobre el tema. Y en el blog de Dexpierta nos gusta centrarnos sobre todo en aquellas cuestiones que están íntimamente relacionadas con la formación que impartimos. Por eso, en el post de hoy te contamos las claves para un diseño web eficaz.

La usabilidad y la utilidad, y no tanto el diseño visual, determinan el éxito o el fracaso de un sitio web. Dado que el visitante de la página es el único que hace clic en el ratón y, por tanto, lo decide todo, el diseño centrado en el usuario se ha convertido en algo esencial para conseguir el éxito a través de un diseño web eficaz.

Quizá, antes de entrar a hablar de las claves para diseñar webs que funcionen, lo primero sea entender cómo los usuarios interactúan con los sitios web, cómo piensan y cuáles son los patrones básicos de su comportamiento mientras navegan en una web.

¿Cómo navegan los usuarios?

Básicamente, los hábitos de los usuarios en una web son muy parecidos a los hábitos que tiene cuando van a comprar en una tienda. Los visitantes echan un vistazo las páginas nuevas, escanean una parte del texto y hacen clic en el primer enlace que les llama la atención o se parece a lo que están buscando. De hecho, hay grandes partes de la página que ni siquiera miran. Además, si la página no cumple con las expectativas de los usuarios, simplemente la cierran y se van.

  • Los usuarios aprecian la calidad y la credibilidad. Si una página ofrece a los usuarios contenido de alta calidad el diseño del sitio puede pasar a un segundo plano porque para ellos es más importante encontrar información útil que un diseño bonito. Esta es la razón por la que los sitios web que no están bien diseñados o no son atractivos visualmente, pero publican contenido de calidad tienden a obtener una gran cantidad de tráfico a través de años.
  • Los usuarios no leen, escasean. Los usuarios buscan normalmente algunos puntos fijos o anclajes que le guíen a través del contenido de la página.

diseño web eficaz

  • Los usuarios web son impacientes e insisten en la gratificación instantánea. Principio muy simple: Si un sitio web no es capaz de satisfacer las expectativas de los usuarios, el diseñador no ha realizado su trabajo correctamente y la empresa pierde dinero. Cuanto mayor es la carga cognitiva y menos intuitiva es la navegación, más dispuestos están los usuarios a salir del sitio web y a buscar alternativas.
  • Los usuarios no suelen tomar decisiones “óptimas”. Los usuarios no buscan la forma más rápida de encontrar la información que están buscando. Tampoco escanean las páginas Web de una forma lineal, pasando secuencialmente de una sección a otra. Pero tan pronto como encuentran un enlace que se parece a aquello que están buscando, hay una gran probabilidad de que se hagan clic inmediatamente. La optimización para un diseño web eficaz es difícil, pero es uno de los pasos más importantes.
  • Los usuarios quieren tener el control. Los usuarios quieren tener la posibilidad de controlar su navegador. Por ejemplo, no quieren nuevas ventanas apareciendo inesperadamente y quieren tener la posibilidad de volver con un botón “Atrás” al sitio en el que estaban antes.

Principales claves para un diseño web eficaz

1. No hagas que los usuarios piensen

De acuerdo con la primera ley de Krug de la usabilidad, una página web debe ser obvia y explicarse por sí misma. Si la navegación y la arquitectura del sitio no son intuitivos, se hace más difícil para los usuarios comprender cómo funciona el sistema y cómo llegar de un punto a otro de la estructura. La gente no va a usar tu sitio web si no pueden encontrar lo que están buscando de forma sencilla.

Al reducir la carga cognitiva se hace más fácil para los visitantes comprender la idea que soporta la arquitectura de una web.

2. No desperdicies la paciencia de los usuarios

Cuando vas a ofrecer a tus visitantes un servicio o herramienta, sea cual sea el objetivo de tu página web, trata de reducir los requisitos que tiene que cumplir el usuario al mínimo. Permite a los usuarios explorar el sitio y que descubran lo que ofreces sin obligarlos a compartir información privada. No es razonable obligar a los usuarios a introducir una dirección de correo electrónico para cualquier acción que quieran realizar dentro de la web. Lo ideal sería eliminar todas las barreras. Los registros suelen ser habitualmente elementos que dificultan o (en algunos casos) impiden la navegación, con la consecuencia de que el tráfico de entrada a la página puede verse reducido.

3. Administra bien los elementos para centrar la atención de los usuarios

En una página web siempre hay algunos aspectos de la interfaz de usuario atraen la atención más que otros. Obviamente, las imágenes son más llamativas que el texto, igual que las frases marcadas en negrita son más atractivas que el texto plano. El ojo humano es un “dispositivo” no lineal y los usuarios de una web reconocen al instante bordes, patrones o movimientos. Es por eso que los anuncios ​​en video que se insertan en las webs son muy muy molestos, pero desde el punto de vista del marketing hacen perfectamente su trabajo: capturar la atención del usuario.

Centrar la atención de los usuarios a áreas específicas del sitio con un uso moderado de los elementos visuales puede ayudar a que los usuarios a lleguen del punto A al punto B pensando que en realidad esa es la manera de la que ellos han decidido hacerlo. Cuanto menos tengan que pensar, mejor es la experiencia del usuario.

4. Trata de lograr una exposición de elementos clara

Permitir al usuario ver con claridad los elementos principales que forman parte de la estructura de una página web es un principio fundamental del diseño de la interfaz de usuario que funcione éxito. No importa mucho cómo lo logremos. Lo realmente importante es que el contenido sea bien entendido y los visitantes se sientan a gusto con la forma en la que interactúan con la página web.

5. Haz uso de una escritura eficaz

Es necesario ajustar el estilo de escritura a las preferencias de los usuarios y los hábitos de navegación. Una solución óptima para la escritura eficaz es:

  • Utilizar frases cortas y concisas (ir al grano lo más rápido posible).
  • Categorizar el contenido, utilizar múltiples niveles de títulos para clasificar la información y utilizar elementos visuales y listas con viñetas para que rompan el flujo de bloques de texto uniformes.
  • Utilizar un lenguaje claro y objetivo (una promoción no tiene por qué sonar como anuncio) y ofrecer a los usuarios una razón objetiva y razonable por la que deben utilizar tu servicio o permanecer en tu sitio web.

6. Lucha por la simplicidad

La simplicidad debe ser el objetivo principal del diseño del sitio. Los usuarios entran rara vez en una página web para disfrutar de su diseño, en la mayoría de los casos están buscando información sobre un determinado tema.

Desde el punto de vista del usuario, el mejor diseño del sitio es un texto puro, sin ningún tipo de anuncio u otros bloques de contenido que coincidan con los elementos con información de consulta que le interesan al visitante, o los contenidos que han estado buscando.

7. No tengas miedo de los espacios en blanco

No sólo ayudan a reducir la carga cognitiva para los visitantes, sino que permiten percibir mejor la información que se presenta en la pantalla. Cuando un nuevo visitante entra en nuestra página web, lo primero que hace es escanear la página y dividir el área de contenido en trozos digeribles de información.

Las estructuras complejas son más difíciles de leer, explorar, analizar y trabajar con ellas. Si tienes la posibilidad de elegir entre la separación de dos segmentos de diseño por una línea visible o por algunos espacios en blanco, por lo general es mejor utilizar la solución de espacio en blanco. Las estructuras jerárquicas reducen la complejidad: cuanto mejor te las arregles para proporcionar a los usuarios un sentido de jerarquía visual, más fácil será que perciban el contenido.

8. Comunica de forma efectiva con un “lenguaje visible”

En sus trabajos sobre la comunicación visual efectiva, Aaron Marcus señala tres principios fundamentales que intervienen en el uso del llamado “lenguaje visible” que hacen los usuarios al ver contenidos en una pantalla.

  • Organiza: proporciona al usuario una estructura conceptual clara y consistente. Consistencia, diseño de la pantalla  y navegabilidad son conceptos importantes de la organización. Las mismas convenciones y normas deben aplicarse a todos los elementos.
  • Economiza: haz lo máximo con la menor cantidad de señales y elementos visuales. Cuatro puntos importantes a tener en cuenta: simplicidad, claridad, distinción y énfasis.

Simplicidadincluye sólo los elementos que son más importantes para la comunicación. 

Claridad: todos los componentes deben estar diseñados de manera que su significado no sea ambiguo. 

Distinciones: las propiedades importantes de los elementos deben ser fácilmente distinguibles. 

Énfasis: los elementos más importantes deben ser percibidos fácilmente.

  • Comunicar: adapta la presentación a las capacidades del usuario. La interfaz de usuario debe tener equilibrio. La legibilidad, la tipografía, el simbolismo y el color o la textura deben estar adaptados de tal manera que comuniquen con éxito. Utiliza un máximo de tres tipos de letra en un máximo de tres tamaños distintos y un máximo de 18 palabras o 50-80 caracteres por línea de texto.

diseño web eficaz

9. La tradición es nuestra amiga

Un diseño convencional de los elementos de un sitio no se traduce necesariamente en un sitio web aburrido. De hecho, tirar de tradiciones a veces es muy útil, ya que reducen la curva de aprendizaje, la necesidad de averiguar cómo funcionan las cosas por parte del usuario. Por ejemplo, sería una pesadilla para la usabilidad si todos los sitios web tuvieran una presentación visual diferente de sus feeds RSS.

Con el uso de un diseño tradicional de algunos elementos podemos ganar la confianza de los usuarios. Tienes que entender lo que están esperando los visitantes de su navegación por tu página web, la estructura del texto, colocación de la búsqueda, etc ..

Steve Krug sugiere que es mejor innovar sólo cuando usted sabes que realmente tienes una idea mejor, pero aprovechar las ventajas de la tradición cuando no es así.

10. Prueba, prueba, prueba, prueba y vuelve a probar

Las pruebas de usabilidad a menudo proporcionan información crucial sobre los problemas y las cuestiones relacionadas con un diseño web. La mayoría de las decisiones de diseño son locales; eso significa que no podemos contestar universalmente si alguna disposición es mejor que otra. Es necesario analizarlo desde un punto de vista muy específico, teniendo en cuenta los requisitos, los interesados, presupuesto, etc…

En resumen: si quieres un buen sitio, tienes que probar, probar y probar.

¿Añadirías alguna clave más para obtener un diseño web eficaz? ¿Nos lo cuentas en un comentario?

dexpierta

Únete a la comunidad de #dexpiertos y recibe por mail todas las novedades y tutoriales

¡Es gratis! ;)