Así será la nueva interfaz de Windows 10, Project Neon

Las interfaces y la experiencia de usuario son conceptos totalmente en auge y en nuestro blog ya hemos hablado de ellos alguna vez. El diseño de una interfaz atrae al usuario y si le gusta la experiencia que ésta le ofrece, son muchas las posibilidades de que siga utilizando el sistema operativo, programa o app que lo incluye.

Hace apenas 2 años que Windows lanzaba su sistema operativo Windows 10. Ya entonces nos sorprendía visualmente por su diseño sencillo y plano, una versión muy moderna y adaptada a los cánones del diseño actuales.

¡Pues agarraos fuerte porque Windows está preparando un nuevo diseño de su interfaz!

Project Neon, el nuevo diseño de Windows 10

El nuevo concepto visual se llama Project Neon y por ahora solo podemos ver unas primera imágenes, filtradas, que prometen mucho de este nuevo diseño.

A simple vista el estilo es muy parecido al de la interfaz actual, ya que no tienen pensado realizar grandes modificaciones; los cambios van a llegar en cuanto a animaciones y efectos.

Los de mspoweruse han sido los primero en difundir las imágenes y como bien explican Project Neon es el hijo mestizo del Aero Glass de Windows 7 y la interfaz de los dispositivos Zune.

Nuevos componentes, animaciones y efectos

Uno de los grandes cambios va a ser la incorporación de un nuevo componente, “Acrylic”, que hará que cuando estemos usando aplicaciones el fondo, la barra de navegación y la barra de la app se vean borrosas.

Project Neon utilizará animaciones como Connected Animations que junto a “Acrylic” y a “Consciuous UI” harán que nuestra concentración y enfoque se centre y podamos ser mucho más productivos.

En este rediseño se van a centrar en las HoloLens, previsible teniendo en cuenta la importancia que está tomando el mundo del 3D en la actualidad.

Ya hay un pequeño preview de Poject Neon

Se está hablando de que estos cambios serán visibles en la actualización Redstone 3, que se hará probablemente para este verano; pero ya hay una pequeña preview para aquellos afortunados que tienen el Windows 10 Insider Preview.

Project Neon, experiencia de usuario, usabilidad ux

Project Neon, experiencia de usuario, usabilidad ux

Project Neon, experiencia de usuario, usabilidad ux

 

Optimización del buscador interno de una e-commerce

¿Os estáis preguntando que a quién le importa el buscador interno de una tienda online? Pues debería importante. Encontrar cualquier producto de forma fácil y cómoda si eres usuario de la tienda. Si eres propietario de una tienda online deberías saber que es una excelente forma de recabar información de tus usuarios y una de las mejores herramienta de conversión.

(Parada en el camino) ¿Conversiones? ¿No te suena de nada? Una conversión es cuando conseguimos que un visitante se convierta en un cliente. Si quieres saber más te dejamos este post sobre cómo convertir visitantes en clientes.

Ya sabemos por qué es necesaria una barra de búsqueda, el siguiente paso es aprender a optimizarla.

Cómo optimizar el buscador interno de una tienda online

No podemos pasa por alto el diseño

Si cuidamos el diseño de cada detalle de nuestra web no podemos pasar por alto el diseño de nuestro buscador interno.

¡Ojo! No estamos diciendo que el buscador deba tener miles de florituras y cuanto más recargado mejor. No. Adáptalo a tu estilo pero procura no utilizar el típico buscador del año 2000 en el que no te apetece buscar nada.

Dale un poco de gracia, invita a la gente a utilizarlo. También se puede personalizar para adaptar la búsqueda a las necesidades de nuestros clientes. Por ejemplo, tenemos una tienda de muebles, pues podemos probar a crear un buscador que nos pregunte qué zona de la casa queremos amueblar.

El lugar es clave

¿Piensa dónde se van tus ojos cuando quieres buscar algo en una web? ¿A la esquina superior derecha quizás?

Haz caso de tu instinto, nuestro cerebro ya da por hecho que el buscador va a estar situado por esa zona.

Obviamente esta no es una regla que no se pueda romper, Amazon es uno de los grandes del comercio online y tienen la barra situada en medio. Otro detalle es que este buscador es bastante más grande del tamaño al que estamos acostumbrados y es que los clientes de Amazon hacen mucho hincapié en las búsquedas.

optimización del buscador interno, buscador interno, desarrollo web

Tipos de buscadores

Hay clases de buscadores como peces en el mar. Los hay muy básicos y otros con una gran cantidad de opciones.

Algo realmente interesante en un buscador es que nos de sugerencias de búsqueda; cuando escribimos una palabra nos van apareciendo búsquedas relacionadas con ésta.

Otra fórmula mucho más visual es que el buscador sugiera directamente productos relacionados con esa palabra. Hay buscadores que hasta incluyen la opción, desde el mismo buscador, de añadir estos productos al carrito de la compra ¡Una experiencia de usuario inmejorable!

Podemos encontrar muchos plugins diferentes para configurar nuestro buscador, cada uno con sus funcionalidades. SearchWP o Relevanssi son dos buenas opciones.

optimización del buscador interno, buscador interno, desarrollo web

Analizar las búsquedas con Analytics

 

Como decíamos más arriba, el buscador es una fuente de información sobre nuestros usuarios y gracias a Analytics podemos obtener todos los datos al respecto.

 

Las tendencias en diseño web para 2017

Hoy volvemos con un segundo capítulo de “Tendencias para el 2017”. En la primera parte ya hablamos de las tendencias en social media y hoy venimos cargados con lo que nos tiene preparados el 2017 para el diseño web.

No nos vamos a engañar, la verdad es que la cosa no cambia mucho de lo que estamos viendo actualmente, pero merece la pena pegarle un repaso a todo.

Diseño responsive

Como decíamos,nada nuevo en el horizonte. El diseño web responsive ya se instaló en nuestras vidas hace algún tiempo pero es cierto que ahora es mucho más importante por el uso que se hace del móvil para acceder a Internet.

No nos podemos olvidar de que la última actualización del índice de Google va a situar las páginas web para móviles por encima de las páginas web para ordenador. Si todavía no habéis adaptado vuestra web para que sea responsive, ahora es el momento.

Animaciones

Las animaciones vienen con las pilas cargadas. Tampoco es nada nuevo pero sé es verdad que ha tenido momentos en los que se podían ver menos. Entretienen al usuario y hacen que la experiencia sea mucho mejor.

Algunos tipos de animaciones son las animaciones de carga, que aparecen en el momento de espera hasta que se carga una página web; o los hover, que son esas animaciones o efectos que se pueden ver cuando pasamos el cursor por encima del elemento animado.

Menú hamburguesa

Un patrón de interfaz de usuario que hemos visto sobre todo a partir del auge de Internet desde el móvil. Son las típicas tres líneas a través de las cuales podemos desplegar el menú de la página web en cuestión. Si no las pulsamos, el menú permanece oculto dejando el resto de la página para otros contenidos.

Flat design

 

Otra tendencia que no es para nada nueva. En los últimos años hemos visto cómo este tipo de ilustración que hace uso de los colores planos se ha llevado por delante a otro tipo de ilustración más realista.

 

Qué son las aplicaciones web progresivas o progressive web apps

El mundo del desarrollo web está pegando un acelerón tremendo. Su desarrollo nos trae nuevas e interesantes novedades como de la que vamos a hablar hoy, las Progressive Web Apps. Muchos ya consideran este concepto como lo mejor que ha pasado desde el lenguaje Java. ¡Ahí queda eso!

 Aplicaciones web vs aplicaciones nativas

Para entender el concepto primero hay que comprender la diferencia entre estos dos tipos de aplicaciones.

Las aplicaciones web son aquellas a las que tenemos acceso desde Internet, una página web en forma a la que le damos un uso específico, por ejemplo Gmail o Google Drive; ambas son “aplicaciones” pero no nos hace falta instalar nada para poder usarlas.

Las aplicaciones nativas por otro lado, son aquellas que para usarlas tenemos que instalarlas previamente, Microsoft Word por ejemplo.

Qué es una Aplicación Web Progresiva

¡Ya podemos entrar en materia! Una Aplicación Web Progresiva es una aplicación web a la que se le introducen complementos y facilidades típicas de una aplicación nativa.

Lo que se pretende con este tipo de aplicaciones web es mejorar la experiencia de usuario en Internet al usarlas, mejorar el rendimiento de éstas en cualquier dispositivo y ofrecer una interfaz más parecida a la de las apps nativas

Características de una AWP

  • Notificaciones Push

Las aplicaciones web progresivas incluyen esta característica que hasta hace poco solo se veía en aplicaciones nativas. Pueden enviar notificaciones a nuestro ordenador sin necesidad de que tengamos que instalarla.

  • Acceso offline

Una novedad es que permiten al usuario acceder a ellas y utilizarlas incluso sin conexión a Internet. Aún así no se puede hacer uso de todas las capacidad de la app sin conexión completa.

  • Pantalla de inicio

Estas aplicaciones web se pueden instalar en la página de inicio del dispositivo tal y como se haría con una aplicación nativa.

 

AMP (Accelerated Mobile Pages)

Esta sociedad se ha vuelto inconformista e impaciente. Queremos que las páginas web con gran cantidad de contenido como vídeos, animaciones, gráficos, anuncios… carguen instantáneamente y además que el mismo código funcione en múltiples plataformas y dispositivos. Por eso, hoy os hablamos de la importancia del AMP (Accelerated Mobile Pages) y su desarrollo en los próximos años.

 

 

Este nuevo formato se basa en 3 puntos principales:

  • AMP HTML

El proyecto se basa en AMP HTML, un nuevo formato abierto nacido de tecnología web ya existente, que permite a los sitios web crear unas versiones ligeras de páginas web estándar.

  • Librería AMP JS

Implementa las mejores prácticas de desempeño de AMP, gestiona la carga de recursos y proporciona las etiquetas, todo ello para garantizar una rápida prestación de la página.

  • Google AMP Caché

Es una red de entrega de contenido basado en proxy para la entrega de todos los documentos AMP válidos. Obtiene páginas HTML AMP, las almacena en caché y mejora el rendimiento de la página automáticamente.

Si quieres aprender algo más sobre AMP HTML, puedes hacerlo haciendo clic en el enlace.

Fuente: AMP

 

Lo que dice tu página web de ti

La presencia online hoy en día es un requisito imprescindible para cualquier empresa. No solo se trata de ser activo en redes sociales. Una buena imagen de marca y una gran reputación online también se consiguen a través de la página web.

  • ¿Pero por qué es tan importante?

Todo en tu web gira en torno a la primera impresión que ésta causa. Los visitantes juzgan tu página en cuestión de segundos y, si no resulta atractiva, ni llama la atención, cuenta con que el porcentaje de abandonos se dispare.

Las imágenes, los colores, la tipografía utilizada, etc. todo comunica de una forma o de otra, por eso un diseño personalizado a tu empresa, una estructura sencilla e intuitiva y un buen “responsive” aportarán a tu web pequeños detalles que se percibirán muy positivamente.

Quizás sea hora de revisar tu web. ¿Qué crees que dice sobre tí?

.