Consejos para mejorar la UX/UI en el desarrollo Web y Móvil

Imagen tomada de yourstory.com

Después de más de 10 años trabajando en el desarrollo de software, me di cuenta que hay 5 aspectos básicos para mejorar la Experiencia e Interfaz de Usuario en aplicaciones Web y móviles, esto con el objetivo de generar una mayor conexión y empatía entre usuario y producto. A continuación los describo:

  1. Menos es más: mientras más sumes elementos en la interfaz pensando que son necesarios, los usuarios se mostrarán perdidos y sin capacidad visual para enfocarse en algo en concreto, lo que logrará que abandonen al instante tu aplicación, página Web o sistema. Limpia tu interfaz. Elimina lo secundario y deja visible solo las acciones o información importante, puedes considerar crear estrategias y diseños con dropdowns, modals, o en su defecto, páginas secundarias.
  2. Patrones de diseño de interfaz: la interfaz debe seguir una guía de estilo para todos sus componentes (botones, fuentes, colores, dimensiones de pantalla, Call To Actions , breadcrumbs, etcétera); al diseñar un escenario con lenguaje común, el usuario se sentirá familiarizado y tendrá un recorrido fluido en el sistema.
  3. No los hagas pensar (objetividad): aunque podría confundirse con el punto uno de la lista, la objetividad va de la mano con el establecimiento de una jerarquía visual y definición clara de las zonas de la interfaz, y con ello, favorecer a las llamadas de acción del usuario (en dónde hacer clic); Steve Krug escribió algunos de estos consejos en su libro celebre “No me hagas pensar”, como una aproximación a la usabilidad Web.
  4. Interacción y visibilidad de estados: la forma en que interactúa el usuario en tu interfaz debe ser informativa, esto es, mostrando el status de las acciones sobre los componentes del sistema, una labor fundamental de comunicación. Por ejemplo, en formularios, los mensajes como “enviando…” o “enviado!”, así como la barra de estado “status bar” con porcentajes o tiempo restante durante la subida de algún archivo o fotografía, proveen de información importante en la funcionalidad del sistema, sin ellos, el usuario se preguntará ¿estará sirviendo esto que estoy haciendo?.
  5. Comprensión y confianza: ¿cuántas veces te has detenido de dar clic por desconfianza?, sucede constantemente en sistemas eCommerce, sitios de anuncios y páginas cargadas de contenido heterogéneo. No sabemos si al dar clic, comprarás algún producto o servicio al instante, entrar a una publicidad maliciosa o bajarás contenido con virus. Esto es, ¿qué tanta confianza y comprensión le brindas al usuario en cada uno de los componentes del sistema?.

Estos consejos se adaptan con facilidad a todo tipo de proyectos. Tampoco tienen fecha de caducidad, ya que su adaptación a cambios no oscila por las modas de diseño de interfaces, sino que está mayormente establecida por objetivos de Interacción Humano-Computadora.

Solución del Navbar Bootstrap y WordPress admin menu

BootstrapEl problema de utilizar navbar de Bootstrap, con elemento fixed-top, en sitios Web creados bajo WordPress es encimar, el menú del administrador del CMS con nuestro menú principal. Ya que ambos tienen la misma clase CSS. La solución es muy sencilla

Añade dentro de la etiqueta body:

 <body <?php body_class(); ?> >

Agrega en tu hoja de estilo CSS:

.navbar-fixed-top { top: 0px; }
.admin-bar .navbar-fixed-top { top: 28px !important; }

Con ello, los menus no se encimarán, y ambos no se distorcionarán.

Introducción a HTML5

En el mes de enero del 2011,  la W3C (por sus siglas en inglés, World Wide Web Consortium) comenzó una fuerte campaña de publicidad para HTML5, desde la publicación del logotipo oficial hasta un gran movimiento viral en redes sociales, blogs y webs. Ésto se debe a que HTML5 es uno de los últimos esfuerzos de la W3C para consolidar una Web nativa y semántica, libre de plugins de terceros (como el de Flash), con nuevas etiquetas y características, pero sin tirar a la basura las etiquetas de sus antecesores HTML4 y XHTML. Además, por su características de código libre, renderizable desde el navegador, flexibilidad y ligereza, hace que HTML5 sea una gran opción para los dispositivos móviles (iPad, iPhone, Blackberry y más).

Los antecesores a HTML5 tuvieron ciertos problemas con el DOM (por sus siglas en inglés, Document Object Model), una API que proporciona un conjunto estándar de objetos para representar documentos HTML y XML en forma de árbol, el cual es utilizado para la manipulación de éstos. El DOM se volvería una verdadera pesadilla a la hora de crear páginas Web dinámicas, ya que distintos navegadores lo leen con diferencias, por lo que es necesario el desarrollo de hacks en JavaScript para su manipulación eficiente.

Read more “Introducción a HTML5”

Comunidad latinoamericana de jQuery

Hace unos días el equipo de jQuery lanzó una nueva estrategia centrada en la comunidad. El equipo incluyó Meetups para ayudar a la creación de grupos locales o grupos geográficos, pero ¿por qué esto es importante?, uno de los exitosos de jQuery, al lado de las características técnicas, es su comunidad en todo el mundo. Muchas personas contribuyen con este proyecto de código libre, si vemos a Linux, observamos la misma historia, así que abrí un jQuery México Meetup para colaborar y apoyar el proyecto en nuestra lengua (español) y de México, por supuesto.

Esta mañana estaba muy emocionado cuando observe una gran cantidad de grupos latinoamericanos muy activos son los (Brasil, Colombia, Chile, México), así que entra y únete.