Archive for the ‘El uso de la Interfaz’ Category

Lineamientos de diseño para crear juegos en la Nintendo Switch

Wednesday, November 6th, 2019

Antes de empezar con los lineamientos unas anotaciones

-Nintendo soporta varios lenguajes como puede ser Html5, javascript o CSS, lo mejor, y para que tu juego sea más aceptado en la tienda de Nintendo es manejar motores amigables como puede ser Unity

-Tienes que registrarte en el portal de desarrollador de Nintendo para publicar el juego, te harán un pitch cuando tengas el juego, que lo creas no significa que lo vayan a publicar, debes tener un buen pitch

– Maneje bien su presupuesto y tiempo para no tener ningún inconveniente

– Existe el Nintendo Dev Interface y aunque no esté muy completo permite administrar los sdk de Nintendo y mantenerse al día con las tecnologías

  • Pantalla: De 6.2 pulgadas, con resolución de 1280 x 720, la lite tiene 5.5 pulgadas y mantiene la misma resolución
  • Sensores: Acelerómetro, giroscopio y sensor de brillo, la lite no cuenta con giroscopio

No olvides a la hora de diseñar, dejar márgenes de respeto en la pantalla, al usar los joycons, o verlo en la pantalla del hogar, no es común que se use la pantalla táctica por error, pero las márgenes al redor de la pantalla son necesarias (de al menos 30 px) para tener un buen diseño.

Según el diseño en el inicio de la Switch, los juegos de Nintendo y las apps como la tienda o youtube, mantienen que en la parte superior de la pantalla (1) la información, estado del sistema y cuentas de usuario, en los juegos aquí iría toda la información como vida, dinero, tiempo, etc.

En juegos como super Mario maker, en la parte de creación ponen en la parte superior todos los objetos, enemigos, powerups, etc. Organizados por menús

En Splatoon 2 o new super Mario Bros u deluxe, ponen en la parte superior los enemigos, el tiempo, puntaje, etc.

Tener en cuenta que las notificaciones de la switch saldrán acá, ya sea batería baja o algún mensaje.

En la parte central (2) esta todo el juego, o la manera de mostrar las apps, dejar lo más limpio de información de interfaces esta parte para que no interrumpa la sesión de juego, al estar lo más alejado de los bordes, no es rápido acceder a estas por lo que no se podrá usar rápidamente la pantalla táctil.

En la parte inferior (3) existen botones, creando una barra de acciones, opciones, aceptar, etc. Esta barra tiene iconos en cada opción con los botones del mando mostrando gráficamente cuales son los atajos en el mando para una navegación más sencilla, en los juegos como The Legend of Zelda: breath of the wild o Splatoon 2, también especifica los atajos con iconos y que hace los botones, No olvides ponerlos para facilitar la navegación. También se le puede colocar información que no interrumpa como en Kirby Stars Allie donde acá va la salud, y esta se acopla en el piso.

Imagen tomada de https://medium.com/bpxl-craft/designing-for-the-nintendo-switch-32cacbe4c02d

En las partes laterales, en apps como youtube o twitter se tienen submenús con las diferentes opciones de las apps, en juegos también se le agrega información como en Mario Maker, pero sin abusar, dejando el centro en su mayoría para lo que vemos en el juego.

En la parte inferior izquierda es bueno poner iconos touch para devolverse, gracias a su fácil acceso con la mano, sin importar esto, por la versatilidad de la consola, es buena idea siempre poner atajos con el mando para estos botones.

La Nintendo Switch cuenta con 12 botones libres y dos joycons, un botón de home y un botón encendido y apagado, los 12 botones libres son perfectos para atajos, en donde el + y el – por su ubicación son los menos accesibles, pero se pueden usar perfectamente y más si se usan los joycons por separado creando dos controles.

Técnicas de diseño para interfaces

Saturday, May 18th, 2019

Dahyam Sanabria
Composición de interfaces
TÉCNICAS Y COMPONENTES IMPORTANTES DEL DISEÑO PARA NUEVAS INTERFACES

ELEMENTOS TÉCNICOS DE USABILIDAD:
Para elaborar interfaces y tener un buen diseño, con una buena interacción frente al usuario, debemos comenzar con los siguientes elementos técnicos:

1. Estudio de usuario: Cuando se desarrolla una idea, que debe ser reflejada en una interfaz con una funcionalidad importante. Se comienzan a elaboran wireframes de alta y baja fidelidad, estos nos permiten tomar decisiones más profundas para el contenido. La UX y las funciones de diseño, nos permiten indagar y conocer a nuestros usuarios objetivos. En este tipo de procesos es bueno tomar los detalles, inquietudes o preguntas que tienen los usuarios que interactúan con nuestros prototipos para obtener un producto funcional y llamativo.

2. Arquitectura de la información: Elaborar un flujo de información frente a la necesidad del usuario es un punto clave dentro de la creación de nuestra interfaz, las opciones y posibles desviaciones que tendrá nuestro usuario frente a la información que plasmemos será a partir de los datos que recopilemos en:

Público objetivo y audiencia
Análisis competitivo
Diseño de interacción, navegación y contenidos.
Ubicación de los contenidos para acceder a la información
Facilidad de búsqueda
Accesibilidad

3. Sistemas de navegación: Cuando ya se ha seleccionado el contenido que irá en nuestra interfaz con el correspondiente diseño, comenzamos a identificar los flujos de tareas con las funciones esenciales. Esto en base al análisis realizado por nuestros usuarios, nos permite orientar una navegación más eficiente que aporte orden y jerarquía del contenido en cada pantalla, de manera que en cada una se destaquen los contenidos más relevantes. La “Navegación global” se refiere específicamente a los botones y enlaces que habitualmente están situados en un sitio consistente, mientras que la “Navegación local” se refiere a la sección de contenido en la que se encuentra el usuario.

-Interfaces atractivas: Estas son sencillas según Donald Norman, donde nos sugiere 3 motivaciones para nuestros diseños en una interfaz:
La visceral idea del usuario, nos refleja una reacción emocional y psicología positiva frente al diseño, esto inspira confianza en el producto o servicio para que este bien diseñado.
Conductual: La atención al detalle inspira confianza en que el producto o servicio sea funcional de cara al usuario.
Reflexivo: Establece una confianza inmediata, donde se garantiza la satisfacción de uso según las expectativas funcionales o de lo contrario nuestro usuario se decepcionará.

4. Pruebas funcionales con diseño: Reunir a un grupo de usuarios para que interactue con nustra interfaz ya con un diseño incorporado y funcional, permite que nosotros como diseñadores indaguemos en sus interacciones, gustos, disgustos, navegación y satisfacciones en relación al producto. Siempre debemos apuntar o detallar los posibles problemas o interrogantes que se presenten durante la interacción, solicitar que mencionen sus ideas, conclusiones, actos y razonamientos nos permitirá entablar un análisis más profundo.

5. Realizar una evaluación Heurística: Reunir un grupo de participantes, estos nos ayudaran a evaluar e identificar las dificultades de uso de nuestro producto ya diseñado y su interfaz. Nuestros participantes nos compartirán sus propias observaciones en relación a sus experiencias con algunos productos similares, que les permitan conseguir sus propias tareas o si descubren más dificultades.

10 PRINCIPIOS DE USABILIDAD:
Estos principios de usabilidad se basan en las reglas heurísticas de Jakob Nielsen y deben aplicarse en la evaluación de diseño y usabilidad.

1. Diseño elegante y sencillo: Será atractivo y minimalista, el usuario seleccionara algunas funciones y accederá al contenido sin distraerse con diseños complejos.

2. Convenciones y lenguajes: Se empleará lenguaje visual y verbal, la experiencia de usuario debe ser intuitiva gracias al orden de la información.

3. Coherencia: Los usuarios deberán familiarizarse con el diseño de una forma más rápida y dinámica para que sea coherente con ellos mismos.

4. Visibilidad: El diseño se asegura de que las acciones, objetos y opciones sean constantemente visibles y el usuario no tenga que memorizarlos, deberá encontrarse una opción de “ayuda” en todo momento.

5. Feedback visible: El diseño informara a los usuarios mediante un feedback en el momento apropiado, como una sugerencia al detallar un problema o demora en la accion.

6. Control del usuario: El diseño le otorga al usuario un control total sobre las funciones, con capacidad de cancelar acciones y una simple función de salida si decide no continuar con el proceso de interacción.

7. Atajos: El diseño debe ofrecer pequeños atajos o comandos que permitan a los usuarios expertos que no se distraigan a los menos experimentados. Si es posible podemos brindarle opciones de configuración personalizada para acciones frecuentes dentro de la interfaz.

8. Ausencia de errores: La interfaz intentará que el usuario no cometa errores, al menos dando la opción de confirmación en la pantalla, para asegurar la accion a tomar, como la de eliminar algún objeto.

9. Informes de errores: Se debe informar al usuario de los errores empleando un lenguaje claro y comprensible, explicandole lo ocurrido y la forma en la que se rectificará la información.

10. Ayuda: El diseño además deberá ser un proceso intuitivo para nuestros usuarios, para que no tengan la opción de leer algún manual para navegarlo.

Cuando necesiten ayuda esta debera estar disponible en cualquier momento y será sencilla y oportuna para el usuario.

COMPONENTES ELEMENTALES PARA DISEÑO EN INTERFACES:
Para iniciar a elaborar nuestros diseños para una interfaz concreta, debemos tener en cuenta elementos claves para generar una buena experiencia de usuario.

1. Diseño y uso del color: Los colores se encargan de armonizar y organizar la información de los elementos gráficos. El uso de colores basado en las nociones básicas del círculo cromático aportan equilibrio, armonía y organización al diseño.

2. Iconos: Representan signos relacionados a formas u objetos de nuestra vida cotidiana, algunos de ellos son representaciones literales, metafóricos o análogos.

3. Tipografía: Para el diseño de interfaces debemos ser conscientes de la legibilidad y fluidez que tenga nuestra tipografía vinculada al diseño. Algunas claves para la selección de una fuente esta en: Tipo de letra, leading, tracking, longitud de línea y alineación.

4. Composicion: Para elaborar un buen diseño debemos tener en cuenta las estructuras de los elementos visuales basándose en las teorías de las percepción de la Gestalth, así como la sección áurea y la regla de tercios, estos contribuyen al orden y la jerarquía.

5. Equilibrio: Es la distribución de los elementos dentro de una página deben ser simétricos, estos deben transmitir estabilidad y armonía. La simetría si está desequilibrada crea una tensión y un movimiento natural, por la razón que algunos diseños suelen elaborar piezas asimétricas para que sean comunicativas.

6. Forma y espacio: Las formas son elementos comunes en cualquier composición al igual que los espacios, en estos casos se utilizan teorías como los de la Gestalt de semejanzas, cierre y figura fondo. Teniendo en cuenta estas teorías, nosotros como diseñadores somos capaces de elaborar formas simétricas o asimétricas, que permitan al espectador entender rápidamente el mensaje que deseamos transmitir.

7. Tamaño y escala: El tamaño es una variable en la creación del orden y jerarquía de elementos, aquellos que nos atraen suelen ser los más grandes que los pequeños, de modo que automáticamente les asignamos más importancia. Por otro lado la escala no solo asigna una importancia dentro de la composición sino que las imágenes y textos también representan una interacción con el usuario.

8. Posición y ubicación: La posición visual de los elementos dentro de la pantalla nos permite establecer un orden natural de los objetos con los que estemos interactuando. En la cultura occidental, leemos de izquierda a derecha, arriba e izquierda abajo a la derecha. De modo que si todos los elementos compositivos tuvieran el mismo tamaño no podríamos dar una jerarquía de importancia a los elementos.

9. Color y contraste: El color es un elemento clave en la composición, dado que las diferencias entre tono y saturación alteran el foco de atención y la importancia de los elementos compositivos. El contraste establece un orden de diferencias, aquellos elementos que tienen más contraste sobre el fondo son más dominantes.

10. Sección aurea: Es una proporción naturalmente recurrente y armoniosa que se aplica desde tiempos antiguos.

11. Ley de tercios: Está regla sugiere que las composiciones deben dividirse en tercios, empleando dos guías horizontales y verticales, que resultan en nueve secciones iguales. Los elementos más importantes siempre deben ubicarse en las intersecciones, obteniendo composiciones más dinámicas y de interés visual.

12. Resolución de pantalla: Para la composición de interfaces debemos tener en cuenta la resolución con la que se va a trabajar, sea un monitor, tablet o smartphone.

CREACIÓN EN INTERFACES INMERSIVAS:
La creación de ambientes virtuales tridimensionales se vuelven más complejos cuando el diseño de la interfaz y la experiencia del usuario son más interactivos. Ofrecerle al usuario un juego intituivo y feedback sobre la interacción con el entorno es sumamente complicado, ya que dependemos de diversas interacciones y funciones planteadas dentro de la interfaz y manejadas por el usuario en varios aspectos según su necesidad de personalización si está la brinda.

La creación de nuevos eventos y experiencias, describen a las nuevas interfaces como interacciones más físicas con el mundo real, como la interacción de hologramas interactivos que recurren a dispositivos de entrada externos,como en: centros educativos, museos, centros médicos y de investigación científica.

QUE SON LOS HOLOGRAMAS
Los hologramas es una imagen que se obtiene a partir de una holografía, haciendo uso de la iluminación mediante láseres, donde consigue generar imágenes a través de 3 dimensiones. El láser permite la grabación microscópica de una película fotosensible, en donde 2 haces de luz producen una interferencia que permiten reflectar la luz a la creación del objeto.

A diferencia de las nuevas tecnologias, la experiencia de usuario debe centrarse en cómo se representa el diseño dentro de la interfaz, hay que tener en cuenta que el diseño para el Web es diferente del diseño tradicional de interfaces de usuario (IU) para software; principalmente porque el diseñador de Web tiene que dar el control y compartir la IU con los usuarios y con el software o hardware.

“Una interfaz gráfica de usuario (GUI), es donde coinciden el diseño de la interacción y el de la interfaz. Es sólo una manifestación visual de “inter” actividades; sólo es un aspecto del diseño de interacción, no el mismo diseño de la interacción.”

Hay que tener en cuenta el objetivo principal que tiene la GUI en relación de la ineformacion para que esta sea comprensible y útil para el usuario, por lo tanto la GUI dependerá de cómo el usuario la interprete según su entorno y la tecnología con la que disponga.
(GUI: interfaz gráfica de usuario)

Bibliografías:
Ruiz Fernández, (2012). interfaces de usuario: diseño de la visualización de la información como medio para mejorar la gestión del conocimiento y los resultados obtenidos por el usuario. Universidad de Zaragosa

López Javier, (2007). Diez principios para un buen diseño
http://digitk.areandina.edu.co/repositorio/bitstream/123456789/453/2/Diez%20principios%20para%20un%20buen%20diseño%20segun%20dieter%20rams0001.pdf

Jamie Steane, (2016). Fundamentos del diseño interactivo. Reino Unido. Editorial: Promopress.

Ros Germán, García Mateos, (2012). Realidad aumentada basada en características naturales. Alemania. Editorial: Académica Española.