Hoy vamos a examinar 15 bits de interfaz de usuario y experiencia de diseño que realmente mejoran la experiencia de usar un sitio o aplicación.
Utilice estos ejemplos de aplicaciones de escritorio, iPhone y escritorio como inspiración para crear sus propias experiencias de usuario únicas y adictivas.
Introducción
Este post servirá como mi propio pequeño salón de la fama. Es una mezcla completa de diferentes tipos de interfaces y elementos que me parecen útiles e inspiradores.
Cada ejemplo está destinado a hacer que piense en nuevas posibilidades que nunca ha considerado y que lo aliente a buscar siempre maximizar el valor de la experiencia que está brindando a sus usuarios.
Efecto de paralaje de desplazamiento lateral
Este poco es puramente superfluo visualmente, pero realza la experiencia de un sitio de desplazamiento lateral.
El desplazamiento de paralaje es un efecto en el que el fondo se divide en diferentes capas que se mueven a diferentes velocidades durante un desplazamiento. Las capas más hacia atrás se mueven más lentamente que las capas de cerca y se crea una ilusión 3D.
La cartera anterior de Charlie Gentle es un excelente ejemplo de este efecto. El sitio web está dividido en secciones separadas, a las que se puede acceder haciendo clic en los botones de un lado a otro en el lado de la pantalla.
Al hacer clic en un botón, el sitio se desplaza suavemente a la siguiente sección, en cuyo punto se inicia el efecto de paralaje con el bokeh en la parte superior de la pantalla. Es un truco simple que realmente hace que el sitio cobre vida.
iPhone bajar para actualizar
La mayoría de las aplicaciones sociales de iPhone tienen algún sistema para actualizar su flujo de datos. Algunos sacuden, otros pulsan un botón, pero el método que realmente parece tener más sentido para mí es "bajar para refrescar".
Aplicaciones como Gowalla, Foursquare y Tweetie han adoptado esto como la principal forma de actualización. La razón por la que esto funciona tan bien es por la franqueza de la interacción. Está mirando y hojeando una lista con su dedo y cuando quiera que se actualice, no debería tener que abandonar esa área.
La colocación de un botón en cualquier otra ubicación en la pantalla crea una desconexión y una interrupción en el flujo de acción del usuario. Deben abandonar la lista, interactuar con una pieza de UI separada y volver a lo que estaban haciendo. De esta manera, se trata de una sola acción, localizada en una única ubicación primaria.
La lección aquí es examinar sus propias interfaces de usuario en busca de elementos que interrumpan innecesariamente el flujo de la atención del usuario. Considere si la interfaz podría mejorarse o no al integrar elementos distantes en el área que están afectando.
HUDs globalmente accesibles
Algunas de mis aplicaciones favoritas de Mac son aquellas que se ejecutan silenciosamente en segundo plano, pero pueden aparecer en cualquier momento con un atajo de teclado especial y luego desaparecer cuando hayas terminado con ellas.
En el caso de The Hit List, la visualización de heads-up (HUD) no es la interfaz principal de la aplicación, sino una parte reducida de la aplicación que es útil para anotar elementos que aparecen en su cabeza.
Este tipo de funcionalidad global (acceso desde cualquier lugar) hace que parezcan menos a las aplicaciones y más a las funciones integradas directamente en mi sistema operativo.
Considere cómo puede usar los HUD en sus propias interfaces para ampliar la funcionalidad de ciertas partes de sus aplicaciones y sitios web.
Menús circulares de Convertbot
Convertbot es uno de esos pocos ejemplos de diseño de interfaz de usuario que posiblemente sea más difícil de usar y, al mismo tiempo, es mucho más agradable.
Esta aplicación para iPhone utiliza un menú circular extraño pero hermoso para convertir unidades básicas. Hay muchas aplicaciones en la tienda de aplicaciones para iPhone que realizan esta tarea de una manera mucho más directa y fácil de entender, pero tampoco son divertidas de usar.
Con Converbot sentado en mi iPod, vigilo constantemente los escenarios que me merecen sacar la aplicación. La interfaz de usuario presenta animaciones elegantes, colores y texturas magníficos y una funcionalidad suave que hace que sea un placer utilizarla.
Esta aplicación demuestra que en raras ocasiones, dar a los usuarios lo contrario de lo que esperan puede ser justo lo que recetó el médico de interfaz. Solo asegúrate de tener la habilidad de diseño para respaldarla, como hacen obviamente los chicos de Tapbots.
Conjunto de diapositivas
No hay escasez de controles deslizantes de jQuery en la web, pero hay algunos que realmente se destacan de los demás como una implementación útil y única. SlideDeck es uno de estos.
SlideDeck utiliza un formato de acordeón limpio para agrupar toneladas de información en un espacio increíblemente pequeño, organizado y totalmente accesible. El contenido se divide en secciones que luego se ocultan en barras verticales que se expanden cuando se hace clic sobre ellas. A medida que se expande una sección, la sección previamente abierta se colapsa en una animación agradable y fluida.
Lo que lo hace tan genial es lo fácil que es llegar a la parte correcta de la presentación de diapositivas que desea ver. Estos tipos de controles deslizantes suelen utilizar pequeños iconos o puntos para saltar a páginas específicas, pero este método es mucho más descriptivo y obvio.
Correos electrónicos de Strongbad: Go Rando!
En primer lugar, si no sabes quién es Strongbad, qué vergüenza. Es, con mucho, el personaje más popular de la larga caricatura en internet protagonizada por Homestarrunner y sus amigos.
Cada semana, Strongbad responde un correo electrónico de un espectador y se produce la máxima hilaridad. Los episodios pasados se guardan en una enorme lista difícil de manejar a través de la cual Strongbad canta su última canción sobre el desplazamiento.
Recientemente, los desarrolladores han añadido un? Go rando? botón. Hacer clic en este pequeño fragmento de texto podría haberte llevado simplemente a un correo electrónico aleatorio, pero eso no fue lo suficientemente bueno para Strongbad. En su lugar, al hacer clic en este botón se establece el desplazamiento completo de la lista como Wheel of Fortune (completo con ralentización y parada), mientras que Strongbad proporciona los divertidos efectos de sonido.
Obviamente, esto es tan sorprendente que tiene que usarlo varias veces antes de que pueda considerarse terminado.
El punto es que, a veces, poner un poco de pensamiento (e incluso comedia) en tu característica más pequeña puede transformar esa cosa en la característica favorita de todos en tu sitio. Además, hacer que su sitio web sea simplemente una explosión para usar es una forma segura de obtener y retener usuarios.
Hecho por Selector de color Tinder
Tinder es algo súper secreto que la Red de Marcas de Combustible ha estado escondiendo bajo la manga. Aunque no tengo idea de qué es, me encanta la pequeña página de prueba que han desarrollado.
Los pequeños rectángulos en la parte superior de la pantalla le ofrecen siete combinaciones de colores diferentes para ver el sitio. Al hacer clic en un color, el fondo cambia y el contenido de la página se actualiza para maximizar el contraste en el nuevo fondo.
He pasado más tiempo del que admitiré en este sitio y jugué con esos pequeños botones. Felicitaciones al equipo de Fuel por crear una de mis páginas favoritas en las próximas páginas.
Pixelmator: cuerdas adjuntas
Pixelmator es una excelente y asequible alternativa de edición de imágenes para Photoshop. Aunque no es tan poderoso, Pixelmator trae mucha innovación a la mesa y le va mejor que cualquier otro competidor de Photoshop con el que me haya topado.
Una de mis funciones de interfaz de usuario favoritas en Pixelmator son estas pequeñas cadenas colgantes que aparecen cuando aplicas efectos. En el caso anterior, puede arrastrar el punto para reposicionar el centro del efecto que se está aplicando. El punto se adjunta a esta cadena que lo vincula a la ventana del filtro. A medida que mueves el punto, la cuerda rebota a lo largo del recorrido con física realista.
Honestamente, ni siquiera veo la necesidad de que existan estas pequeñas cadenas, ya que es obvio que la ventana y el efecto están relacionados, pero su presencia sirve como un buen refuerzo visual de este hecho y hace que la aplicación de filtros sea mucho más divertida.
Efectos enormes de la libración
Casi todos los sitios web que visita tienen algún tipo de evento de desplazamiento aplicado a los enlaces. Por lo general, esto es algo pequeño y no distrae demasiado; Solo lo suficiente para decirnos que hay un enlace allí.
Riot Industries decidió legítimamente que necesitaban romper esta tendencia al darle al efecto de desplazamiento la mayor parte del espacio en la página y al enlace una pequeña cantidad de espacio.
Mientras se desplaza sobre la pequeña franja vertical de miniaturas, el enorme texto de la derecha comienza a acercarse y alejarse. Se ejecuta y llega a la parte superior de la pantalla, donde parpadea a un nuevo mensaje correspondiente al ícono sobre el que se está desplazando y luego vuelve a bajar para detenerse junto a ese ícono.
Nunca antes había visto otro sitio con un efecto como este y me encanta la funcionalidad centrada en la tipografía de todo.
Arrastrar y soltar en línea
Como un ávido usuario de Mac, tiendo a pensar que todo en la vida debería funcionar con "arrastrar y soltar". funcionalidad Más y más últimamente, estoy viendo esta idea reflejada en un entorno en línea.
En el ejemplo anterior, hacer clic en un ícono lo llevará a la página dedicada de esa aplicación. Sin embargo, si desea omitir esto y descargar la aplicación de inmediato, simplemente arrastre el icono de la aplicación al botón de descarga. Nifty no?
Otro lugar donde ve una gran funcionalidad de arrastrar y soltar en línea es en el carrito de compras de IconDock. Aquí simplemente arrastre los íconos que desea comprar al muelle para retenerlos y comprarlos más tarde.
Photoshop.com Photo Pile
Este es otro ejemplo que es realmente funcionalmente inútil pero representa un buen toque adicional que mantendrá interesados a los visitantes por más tiempo.
A medida que se carga la página de Photoshop.com, una pila de polaroids se coloca en la pantalla y se desplaza en todas direcciones. La pila entonces se vuelve completamente interactiva. Puede hacer clic y arrastrar áreas de la pantalla para lanzar fotos de forma desenfrenada y observar cómo chocan contra otras.
La física parece funcionar bastante bien y todo esto definitivamente agrega una gran interacción a la página.
Sigue el raton
El sitio a continuación es otro que presenta un bonito efecto de paralaje, pero esta vez quiero centrarme más en la forma en que interactúas con esta escena.
Tan pronto como cargue esta página, se dará cuenta de que algo extraño está sucediendo. Cuando mueves el cursor hacia la izquierda y hacia la derecha, el fondo reacciona como si estuvieras moviendo la cabeza. A medida que la página se desplaza hacia un lado, se revela más del paisaje.
Aunque no es apropiado en la mayoría de los sitios, este método único de mirar alrededor funciona muy bien aquí y realmente se suma al efecto 3D. Incluso he visto otros sitios que llevan este método aún más lejos al convertirlo en la forma principal de navegar por todo el contenido de la página.
Control deslizante doble
Este es otro control deslizante de jQuery que realmente destaca como un diseño excepcionalmente brillante.
La plantilla de ThemeForest WordPress anterior presenta una especie de control deslizante de doble imagen. El primer control deslizante contiene imágenes y el segundo contiene descripciones de la imagen.
A medida que el control deslizante de la imagen se mueve verticalmente, el control deslizante de la descripción se desplaza horizontalmente. El efecto resultante es similar a mirar una máquina compleja; Las dos animaciones se sienten como si fueran una sola función.
Es una excelente forma de mostrar imágenes y texto que realmente me dejó aturdido y con ganas de más.
Desplazamiento con Momentum
Cuando empecé a utilizar un iPhone hace unos años, me enamoré instantáneamente de la idea de la interacción del usuario basada en el impulso. Cuando moví mi dedo en Safari, no había una proporción de movimiento de 1: 1, en lugar de que el dispositivo usara mi película como si en realidad estuviera moviendo un pedazo de papel que generaría ímpetu, pico y luego disminuyera la velocidad según el La fuerza de mi acción.
Desde entonces, he querido más tecnología para retomar esta idea, especialmente OS X. Afortunadamente, el Magic Mouse de Apple produjo esa misma cosa.
¿Al encender? Desplazarse con impulso? Puedes imitar la funcionalidad de desplazamiento del iPhone. Sin embargo, al deslizar hacia abajo en un iPhone, la pantalla baja, mientras que al presionar Magic Mouse, la pantalla sube. Esto tiene sentido debido a la indirectidad del mouse, pero aun así me gustaría que pudieras cambiar la función de movimiento del mouse para reflejar el iPhone.
La lección aquí es que, en cualquier momento en el que pueda incorporar una pieza de realidad a una experiencia de usuario simulada, aumenta el asombro del espectador y hace que todo parezca mucho más mágico (ahora parezco un empleado de Apple).
Verdaderamente Mínimo
Aunque me encantan las interfaces bellamente complejas, hay ocasiones en las que solo necesitas ser productivo con tus pensamientos y casi nada más. De vez en cuando, aparece una interfaz que realmente refleja esta idea, y no puedo pensar en una mejor que la de WriteRoom para Mac.
A pesar de su apariencia, WriteRoom es un editor de texto bastante potente, repleto de funciones y opciones de personalización. Simplemente oculta todo esto debajo de una interfaz bellamente simple que te hace sentir como si estuvieras escribiendo números en una compuerta en PERDIDO.
Por loco que parezca, este es el tipo de experiencia de usuario que me parece más adictiva. Algo único y envolvente que casi te lleva a otro momento y lugar donde todo se cae y puedes concentrarte completamente en la tarea en cuestión.
Conclusión
Bueno, esa es mi lista de elementos e interfaces inspiradores. Espero que ayude a generar algunas ideas geniales en su mente sobre cómo mejorar aún más sus propios diseños en formas grandes y pequeñas.
Use los comentarios a continuación para contarnos sobre esos pequeños fragmentos de UI que cree que son realmente buenos y lo que piensa de los ejemplos anteriores.