0

Lo que los diseñadores web pueden aprender de los Video Juegos

Los juegos son cada vez más en la Web como, y la Web es cada vez más parecidas a juegos. Si usted necesita una prueba de ello, sólo tienes que mirar las respuestas de Yahoo. Preguntas al azar se plantean, la respuesta más elegida es, y los puntos de credibilidad se dan al ganador. Es un sistema de clasificación que se acumula y libera más y más características dentro del sistema. Funciona porque la psicología de los logros y la mecánica del juego y por lo tanto fomenta la interacción. Esto plantea la pregunta, ¿qué puede un diseñador web de aprender de los juegos, o - más concretamente - juegos de video? Buenas interfaces de juego tiene que ser muy fácil de utilizar e intuitivo, capaz de manejar una gran cantidad de acciones repetitivas en el menor número de clics posible. Tienen que ser atractivas e interesantes. Tienen que ser simpáticos. Una interfaz de juego se suma a una buena y mejora la experiencia del usuario. En un juego, la gente desea que el contenido que se les entregan de una manera que no se rompa la fantasía. Cualquier disonancia con la interfaz hará que un juego de otra manera grande para fallar. Incluso en los juegos más antiguos, como en el Prince of Persia (que se muestra arriba), las limitadas capacidades del sistema aplicado a los diseñadores vienen con patrones de diseño creativo e innovador. Con más capacidades disponibles hoy en día, somos capaces de encontrar las técnicas de diseño más avanzadas en los videojuegos modernos. De la misma manera, los usuarios del sitio quieren que su contenido entregado a ellos en una manera que sea fácil de entender, intuitivo y atractivo y que no requiere una gran cantidad de desplazamiento o hacer clic. De hecho, los diseñadores Web pueden aprender mucho de las interfaces de videojuegos. Los sitios web que utilizan herramientas comunes de la interfaz del juego se puede simplificar la experiencia del usuario al tiempo que añade un montón de personalidad. Esto puede resultar en un mayor tráfico y una mayor tasa de repetición de las visitas y las ventas ... - Cha-ching! No es de extrañar, entonces, que hemos visto una afluencia de carruseles, Cajas de Luz, acordeones y los patrones de navegación cada vez más sofisticadas, como las bibliotecas CSS y JavaScript han puesto estas herramientas al alcance de los navegadores web. Ya se trate de un bien o una cosa mala, es un tema para otro artículo, y este artículo se centrará en las técnicas en lugar de sus aplicaciones incorrectas. Lo que un diseñador Web puede aprender de los videojuegos no se limita a la interfaz de usuario. Yahoo Answers funciona gracias a la psicología del sistema de logros que se construye pulg Por lo tanto, mientras vamos a ver algunas ideas básicas de la interfaz de usuario y los patrones, otros conceptos de alto nivel podría ser útil, también, y vale la pena explorar.

Remember The Big Picture

Al considerar las interfaces de juego, un diseñador web tiene que ser muy consciente del contexto de su proyecto y los objetivos de sus clientes. Obviamente, un sitio a menudo, aunque no siempre, tienen un objetivo que es muy diferente de la de un juego de vídeo. En muchos sitios web, la eficiencia debe ser una prioridad mayor que el entretenimiento. Un fresco de ojo de pez interfaz no es la idea más práctica para un sitio web dedicado a la entrega de información fiscal con rapidez o para un sitio de comercio electrónico. Sin embargo, un canal interactivo de medios sociales podrían beneficiarse de una tabla de clasificación o algún tipo de sistema de logros. Elija los componentes de interfaz de usuario para adaptarse al proyecto. Mirando el panorama general, también consideran la estructura y el método - no sólo los componentes de interfaz de usuario. Por ejemplo, mira cómo están estructurados los menús, y considerar por qué esas opciones fueron hechas. En muchos juegos, usted tiene un hub-and-spoke tipo de arquitectura, dando lugar a diferentes conjuntos de herramientas dentro de los menús. Si usted elige "Armas", a continuación, todas las opciones abiertas para las armas en la siguiente pantalla. Usted tiene que navegar de vuelta a la pantalla superior con el fin de elegir la opción "Mapas". Esta estructura simplifica un conjunto de opciones que de otra manera se convierten rápidamente en confuso o abrumadora, proporcionando la atención se centró en una elección a la vez. ¿Puedes ver cómo este tipo de arquitectura podría beneficiar a un sitio web que presenta una gran cantidad de información para el visitante? Al permitir que el visitante se centran en una sola pieza de una gran tarea en línea o una pepita de información a la vez, potencialmente aumentar la tasa de conversión para su cliente. Esta estructura también puede ser eficaz cuando se está elaborando un embudo de ventas en un sitio web. El siguiente ejemplo muestra una estructura de juego sencillo menú que podría ser fácilmente aplicada a la arquitectura de la información de un sitio web, la construcción de caminos para los visitantes a seguir. Si estás construyendo un sitio web para una firma de CPA, usted puede ser que el segmento de la información del menú de las partidas correspondientes al tipo de visitante. Una persona de alto patrimonio tiene unas necesidades muy diferentes a las de una pequeña empresa, pero ambos podrían estar interesados ​​en la contratación de la misma empresa. Usted podría comenzar en el nivel superior, con dos puntos de entrada simple que actúa como un embudo, una para los individuos y las familias y el otro para las empresas y organizaciones, cada botón que lleva a el centro de ese usuario. Esta página del cubo se puede proporcionar el contenido, ofrecer herramientas pertinentes y anunciar los servicios pertinentes para estos usuarios muy diferentes, lo que simplifica su experiencia. Asimismo, los lugares donde los juegos de vídeo Aviso muestran en lugar de decir, y tratar de entender cómo lo hacen. El éxito de los juegos son particularmente adeptos a mostrar en los entrenamientos, en lo que se refiere a menudo como "cuevas noob." Un personaje tiene que pasar a través de las salas de primaria o de niveles, donde se les enseña a realizar las tareas básicas de una manera que es entretenida e integrada con la historia. Un aventurero aprende a coger una espada y el swing, luego mata a una rata, y luego aprende a recoger el tesoro. El usuario se le enseña a utilizar la interfaz a través de experiencia de inmersión. En The Elder Scrolls IV: Oblivion, que comienzan en la cárcel y debe escapar a través de una cueva subterránea, la lucha contra las ratas y el duende y ocasionalmente pequeños en el camino para aprender los controles básicos del juego. ¿Por qué es relevante? Usted probablemente no tendrá que hacer un completo tutorial interactivo para una interfaz complicada, pero es probable que el contenido de su cliente será más clara recibido y entendido con mayor rapidez a través de gráficos inteligentes o gráficos. Usted podría tomar grandes conceptos y los descomponen en pequeños trozos. Se podría buscar los puntos potenciales de confusión y aclarar con información sobre herramientas o ejemplos en lugar de largas explicaciones. Mediante el estudio de cómo los juegos de mostrar en lugar de decirle, que usted podría conseguir un gran avance en un problema de presentación espinoso.

El compromiso no tiene por qué ser ostentoso

Juego de diseño asistente Jesse Schell, dice , "Los juegos ofrecen la posibilidad de éxito, la oportunidad de satisfacer su curiosidad, la oportunidad de hacer algo para resolver problemas y tomar decisiones claras, dando una sensación de libertad." Incluso el más mundano de los sitios web puede ser hacer más atractiva por la pregunta, ¿Qué elementos de los juegos de qué la gente encuentra agradable? Juegos de proporcionar información clara, a menudo en el momento de la entrada del usuario. Estos elementos podrían ser incorporados en las interfaces, y no sólo a través de carruseles o acordeones. Pedir algo tan simple como "¿Quieres saber más sobre este tema?" Luego de comprobar la presentación de un formulario se puede recorrer un largo camino para aumentar la interacción del usuario. Algunos diseñadores Web ya poner en práctica algunos de estos componentes de interfaz de usuario común a un nivel simple. Sin duda se ciernen los menús e información sobre herramientas no son nuevas. Al ver cómo éstos se aplican en un juego puede generar ideas sobre cómo implementar la interfaz de usuario elementos comunes de una manera más creativa e interesante.

Ejemplos, por favor

¡Entremos en el y ver algunos de los elementos de interfaz de usuario que se pueden añadir chispa a su próximo proyecto. Veremos algunos ejemplos y, a continuación algunos recursos donde se puede aprender más.

AJAX mensajes con imagen Loader

Estas pantallas de carga de Fallout: New Vegas (arriba) y Fallout 3 (abajo) tiene información útil y consejos, junto con una imagen de fondo que se expande sobre el tema del juego. En lugar de una imagen de gestor de giro, el usuario ve una ruleta o verde-pantalla de destino que se transforma de una espera aburrida en una parte divertida de la experiencia de juego. Lo que un diseñador Web puede tener de esto: Personaliza los gráficos. Úselos para sacar al usuario para que el "mundo" que va a crear en la pantalla. Incluso si usted está trabajando en una página web corporativa, puede cargar consejos útiles y bits de información. La construcción de un sitio web de los deportes al por menor? Tal vez usted podría utilizar una pelota de baloncesto hilado para su carga gráfica en una presentación de diapositivas. ¿No sabe cómo empezar? Echa un vistazo a este tutorial para aprender a contenidos de precarga. Una imagen de fondo de página completa de una pantalla de carga podría ser demasiado lento, pero se podría añadir un fondo de color a la div panel de carga, y luego el uso de JavaScript plug-ins para cargar al azar consejos e información para rellenar el espacio. Para obtener los mejores resultados, siga los siguientes archivos del cargador de 30 KB, el más pequeño es el mejor. Una simple llamada AJAX puede agarrar consejos cada tantos segundos, o puede simplemente crear uno para cada carga. La elección depende de la cantidad de contenido que necesita para cargar y cuánto tiempo dispone. Para ver un ejemplo de este tipo de cargador, echa un vistazo a la Website Grader en HubSpot. Después de enviar un vínculo, echa un vistazo a el cargador que viene para arriba mientras espera el resultado.

Los cursores personalizados

En Fable 3, siendo el lugar elegido por el usuario se indica mediante una lupa, que actúa como un cursor personalizado. En The Elder Scrolls IV: Oblivion, un cursor de mano simple de un objeto indica que el jugador puede recoger. Una mano de color rojo indica que el elemento está siendo robada y que los soldados podrían seguir. Lo que un diseñador Web puede tener de esto: Es probable que el encargo del cursor más reconocible es la "mano" grabby Google Maps . Pero cursores personalizados no son nada nuevo y son comunes en aplicaciones Web. La capacidad está incorporada en la mayoría de los navegadores. Es importante utilizar estos cursores con moderación: la hora de ofrecer ayuda, puede hacer clic para indicar el contenido, y para resaltar la información importante. ¿Tiene una pieza particular de información es absolutamente necesario para ser vistos por los visitantes? Prueba esta demo de un cursor personalizado (foto de abajo). ¿Ves cómo se podría utilizar para captar la atención y resaltar los puntos importantes? Imagine lo que es un bien ejecutado JavaScript varita mágica podía hacer en el sitio web para niños para captar la atención! Obviamente, no sería una buena opción para una página web corporativa, sin embargo.

Iconos, Iconos, Iconos

Una gran diferencia entre los videojuegos y sitios web es que los iconos se utilizan mucho más en los menús de juego complejas que en la navegación web, y con razón. Un usuario normalmente pasa mucho más tiempo en un juego que en un sitio web. Sin embargo, los iconos siguen siendo utilizados en los sitios web, y cada vez más como la línea entre los sitios web y aplicaciones web de desenfoque. Entonces, ¿cómo son iconos que se utilizan con eficacia en la navegación del juego? Se debe ser legible y ajustarse al contexto. En el ejemplo anterior de Halo Reach, el usuario se basa en iconos para navegar y elegir las armas, pero los menús se parecen a un "heads-up display" (HUD) para que podamos ver en un vehículo en el mundo real. En Oblivion, los iconos se presentan en "rollos". Iconos Web también debería ser fácil de entender. Agregar etiquetas de texto para un uso óptimo. Los iconos pueden acelerar la navegación por los menús complejos si los iconos son cuidadosamente seleccionados y coherente y si los usuarios pasan mucho tiempo en el sitio web. El uso de color sólido, de alto contraste se describen de formas fácilmente reconocibles que son simples y de fácil lectura con rapidez. Juegos se están alejando de las imágenes pequeñas, altamente detallados para líneas más sofisticadas (en archivos más pequeños), como las que se encuentran en Halo Reach y la serie Call of Duty, y grandes imágenes detalladas con formas distintivas, tales como los de abajo. Incluso si no se dan cuenta de los detalles, podrá observar las líneas a mano, el círculo y la cara. Utilizando el mismo color hace menos visualmente complicada y más fácil de descifrar. Los iconos más utilizados, el más simple y más fácil de leer con rapidez que deberían ser. También puede utilizar iconos como señales visuales para llamar la atención sobre temas clave. Utilice gráficos de "cabecera" en lugar de botones tan rápido le pide en cajas de contenido y la repetición de temas para reforzar los conceptos. Crear imágenes complejas más grande, y ser coherente. Usar iconos para añadir interés a las listas, y se rompen en pedazos digeribles contenidos y llamar la atención a las secciones importantes del texto, como Treemo hace tan bien. Considere el uso de iconos correspondientes para la navegación y las agrupaciones de actualidad. Usted podría utilizar formas consistentes como encabezamientos dentro del texto o como sacar cita para indicar que cierto contenido se relaciona. Usar iconos para que el contenido fácil de escanear, destacando los puntos de interés, para que los usuarios puedan encontrar rápidamente la información pertinente. Los iconos no tienen por qué ser ilustraciones estáticas. Las capturas de pantalla de Tap Patrón servir como miniaturas tradicionales, pero su forma característica también funciona como un icono, un creciente interés y el refuerzo de la marca: ¿Qué pasa con el uso de productos propios de su cliente como iconos? El ingenioso sub-menú de DonQ , se muestra a continuación, utiliza los mismos productos en forma de iconos, de forma rápida y fácil que dirigir a la que usted está interesado adentro es aún más inteligente es la manera en que el resto del contenido se atenúa cuando el sub-menú Parece, por lo que sus opciones se destacan.

Full-Page Carruseles

Pantallas con fichas que se desvanecen, como ésta de Dragon Age, Origins, han existido desde hace mucho tiempo: En el "Informe Carnage" en Halo Reach, más adelante, esta idea se lleva a un nuevo nivel. Las pantallas de desplazarse de forma horizontal, y cada página tiene varias pestañas. Los jugadores están acostumbrados a este tipo de interfaz. Pero se necesita para la Web, y la gente se sorprenderá. Usted tiene que interactuar con este tipo de interfaz para hacer justicia. Viñedos Jax utiliza un tipo similar de diseño, sin pestañas: Agregar fichas a cada pantalla de carrusel, y que tomaría este sitio web al siguiente nivel. Magento ofrece otra, más simple tener en esta idea: En este momento vemos este tipo de interfaz en interfaces de usuario móviles y tabletas en las que hay varias imágenes de fondo. También lo vemos en los juegos de todo tipo. Esto es más que fichas en las pestañas o el desplazamiento horizontal simple: creo iPad con múltiples escritorios. Piense por un Living ofrece un mapa (muy parecidas a juegos!) en la esquina superior derecha para ayudar a los usuarios navegar a su carrusel inusual. Lo que un diseñador Web puede tener de esto: Si usted tiene una gran cantidad de contenido, a continuación, esta solución puede ser audaz fácil de usar y puede aumentar el compromiso. Recuerde que el buen viejo en la página etiqueta de ancla con un objetivo? Este es el mismo concepto en ropa nueva. Sus pantallas de diapositivas y son de fácil navegación con una pantalla táctil, que es un factor que no hará sino aumentar en importancia. Debido a los distintos tamaños de pantalla, este tipo de diseño requiere una planificación cuidadosa y podría requerir CSS3 preguntas de los medios para asegurar que las cargas de contenido como se pretende en diferentes tamaños de pantalla. Usted tendrá que hacer sus diseños de respuesta . Puede implementar un carrusel de pantalla completa mediante el uso de una página de tamaño div , con el overflow establecido en hidden , y la colocación de las pantallas en una lista no ordenada con un ancho de conjunto. Los usuarios serán cada vez más cómodo y familiarizado con este tipo de interfaz a medida que adoptan las tabletas. La implementación de un desplazamiento aún más simple horizontal puede hacer que su cliente se destacan entre la multitud.

Barras de desplazamiento

Fable 3 está fuera, y su inmersión en el sistema de menú es completamente diferente a la de Fable 2 , la foto de arriba. Pero Fable 2 tiene una hermosa menú deslizante que teníamos que incluirlo. Desplazamiento con el control deslizante revela botones, y el contenido se presenta en la mitad derecha de la pantalla. Los botones también tienen menús desplegables en virtud de ellos. Atenúa inactivos contenido. La imagen de arriba es la máxima categoría de la "ropa". A continuación, el contenido de los ejercicios hasta "Abrigos", luego a las prendas de vestir específicas. ¿Te recuerda esto del comercio electrónico? Lo que un diseñador Web puede tener de esto: ¿Alguna vez has estado en un sitio web que tenía enormes menús fly-que cubrían la página? Y a medida que se cernía sobre los artículos, que se expandió a los sub-menús ... cuatro niveles de profundidad! Estos menús complicados puede ser intimidante y hacer que la persona quiere dejar. Hacer el menú pequeño, fácil en los ojos y rápidamente desplegable es una gran manera de superar la hinchazón y mantener a los visitantes a hacer clic de distancia. Ya hay algunos scripts deslizantes que ofrecen las barras de desplazamiento personalizadas para cualquier div contenedor. ¿Por qué no poner botones en el div ? Puede haber ciertos ajustes (como sitios web de entretenimiento o de la moda), donde este tipo de menú es más fácil de usar y escalable que su menú desplegable o media marcha fuera. Añadir un cargador de AJAX para su onClick caso, y tiene una interfaz atractiva que los usuarios pueden descifrar. El objetivo es mantener a los usuarios en una sola pantalla, manteniendo los menús escalable. Se podría añadir, literalmente, como muchos elementos de cada menú que usted necesita sin hacerles difícil de manejar.

Pivot Pantallas

Debo admitir que mi corazón dio un vuelco de la primera vez que vi las pantallas dinámicas en Halo Reach. Al llegar al menú principal, el texto está inclinado. Halo Reach usa la perspectiva a través del juego para que apunte a la orilla derecha de las pantallas de menú. Esta es una indicación visual. ¿Qué sucede cuando se pulsa el mando hacia la derecha? Los saltos de pantalla y se desplaza horizontalmente, visión borrosa, para darle la siguiente pantalla, que utiliza el punto de vista, así, en esta ocasión se tuerza todo el texto e imágenes a la izquierda. En una ficha, tu personaje es animado, sin apenas moverse y extrañamente realista. Bravo. Me senté y jugó con los pivotes por un tiempo. Por supuesto, mi primera reacción fue, yo quiero hacer eso. Lo que un diseñador Web puede tener de esto: Con un poco de Photoshop, se puede emular a este menú. Mediante el uso de una gran imagen de fondo panorámico que cubre ancho de dos pantallas de con la tipografía asimétrica CSS3 , y un rápido desplazamiento horizontal en JavaScript, usted podría conseguir algo parecido a la inclinación se encuentra en este juego. Aplicar esto a un panel más pequeño, y utilizarlo en un banner o botón que está completamente animada en dos cuadros, y usted obtendrá un wow (por lo que su cliente). No he visto a nadie con este método en la web todavía, pero me ha funcionado una pequeña demo para darle un punto de partida en caso de que desee implementarlo por ti mismo. También, observe la manera en que Halo Reach integra pantallas de menú mundanas en el mundo del juego con la ilusión inteligente de un paisaje en la distancia. Es una cosa hermosa. Le da una sensación de profundidad y el enfoque, al igual que cuando se mira a una ciudad de un avión antes de aterrizar. Se basa emoción y atrae a ir más profundo, de interactuar y ser parte de la acción. Este tipo de integración no se presta a todas las experiencias del sitio web, pero sí a algunos, y en su caso, vale la pena hacerlo Nunca subestimes el poder de la alegría..

Menús contextuales

El menú contextual en un juego de video es el primo de los besos de un sitio web sub-menú. Los menús contextuales como la de arriba de Assassins Creed: La Hermandad dar al usuario opciones específicas dependiendo de su localización en el juego y la elección de sus acciones. Si decide lanzar un hechizo, el sub-menú le ofrece una explosión de bolas de fuego o un rayo. Si usted decide a moverse, entonces usted puede correr, trepar u ocultar, todo en el menú radial. Los menús radiales con los iconos son muy populares, pero los menús de contexto podría fácilmente ser breves listas verticales de texto. Lo que un diseñador Web puede tener de esto: Cuando invitas a un usuario a tomar una acción específica, un menú contextual se puede mejorar la experiencia. En lugar de proporcionar listas de enlaces, usted podría ofrecer una gran diversión de las acciones específicas a tomar. Vemos esto utilizan en la actualidad en aplicaciones Web y en los pequeños reproductores de medios sociales para compartir. Al hacer un menú de contexto, que al menos podría considerar la posibilidad de que radial. Los menús radiales deben dar a los usuarios una opción de tres a ocho opciones, y la interfaz se puede añadir interés visual. Mantenga los menús como simple y clara como sea posible. Se debería ofrecer opciones relevantes para el usuario en el punto de decisión y aumentar las tasas de conversión. También deben ser fáciles de hacer clic y ligero visualmente. Para ver un ejemplo divertido de un menú contextual radial, echa un vistazo a musicmap TuneGlue de : Mientras que esto fue hecho en Flash, puede crear un menú sencillo radial con JavaScript . O usted podría conseguir más complejo, con anidados menús radiales , así: Los menús radiales no se limitan a los menús contextuales. Pop-up menús del panel en un punto de acción pueden ser igualmente efectivos y no puede tomar mucho tiempo o de pruebas para desarrollar.

Su turno

Muchos otros ejemplos de grandes ideas de la interfaz se puede extraer del estudio de los videojuegos. Juegos de servir de inspiración de diseño que pueden ayudar a premiar y gratificar los usuarios y hacer que las interfaces más intuitivas y divertidas. ¿Está construyendo un sitio web para una organización sin fines de lucro que está planeando una campaña de donación? Considere el uso de marcadores para rastrear las donaciones. Usted podría utilizar tablas de clasificación para dar un grito a los 10 lectores de su blog, dándoles un mayor incentivo para hacer comentarios. Estudiar cómo se utilizan iconos, y pensar en formas de ponerlas en práctica que harán de su sitio web sea más fácil y agradable. Haga información sobre herramientas interesantes, o considerar formas de añadir contenido descargable ("DLC" para todos los jugadores que no) como un premio o incentivo. Mediante la observación y la aplicación creativa, sus sitios web se hará más atractivo y más fácil de usar. Y no olvidemos que al hacer la investigación es muy divertido!

Recursos adicionales

• Introducción a Patrones de Diseño Un recurso de buen principiante para aprender acerca de los patrones de diseño.
• Arte del Diseño de Juego Este libro enseña los fundamentos del diseño del juego. Capítulos de muestra están disponibles para descargar.
• Diseño de Interacción de Patrones Una gran herramienta para intercambio de ideas de soluciones específicas para satisfacer las necesidades de los usuarios. Tiene una lista de patrones y descripciones detalladas.
• Diseño de Yahoo Archivo de Patrones La madre de todas las bibliotecas de diseño de patrones.
• Las barras de desplazamiento vertical de encargo y deslizadores Un punto de partida para un menú deslizante vertical.
• Patternry Un recurso de la interfaz de usuario maravillosa, con ejemplos y de cómo-a.
• Gamification.org Este wiki está dedicado a explorar formas de integrar la mecánica del juego en entornos que no son juegos con el fin de aumentar la participación.