clickug

Regístrate GRATISAñade tus productos GRATISAccede

¡Crea una cuenta y publica tus noticias GRATIS!

Fibo Group 10,018

Soy un amante del Forex, me gusta escribir y operar en este medio.

http://es.fibogroup.com/

Lima

Seguir

Perú Noticia nº200.928 Marcar esta noticia como inapropiada notificar un error técnico Incrementar el tamaño de los caracteres del texto Disminuir el tamaño de los caracteres del texto100 clics
Contacto:Juan Garza
contacto
5676290

14 de Marzo de 2017  |   Tiempo de lectura: 5 minutoshttp://click.ug/9a9RzU

Colocar las pestañas en la parte superior

Diseño grafico: Pautas de usabilidad de la pestaña para el diseño móvil de UX

La fila de pestañas debe estar en la parte superior de la vista, no en los lados ni en la parte inferior.

Ver las imágenesrecomendar esta noticia por emailVer las citaciones standard de esta noticiaObtener dirección cortaaccede al código para integrar esta noticia en tu web
/Clickug/ La jerarquía natural de las cosas va de arriba hacia abajo y los usuarios exploran una nueva pantalla de arriba a abajo. Otra razón es que las pestañas son encabezados y mayor en la jerarquía de información que el contenido en una pantalla.

Resalte la pestaña activa

No
indicar la ubicación actual es probablemente el error más común de ver en los menús de aplicaciones. "¿Dónde estoy?" Es una de las preguntas fundamentales que los usuarios deben responder para navegar con éxito.
Si la pestaña no está bien resaltada (como en este ejemplo), sería más difícil saber cuál fue seleccionado.

Es por eso que la pestaña actualmente seleccionada debe estar correctamente resaltada con un color fino y una señal visual (subrayado o selección). Además de resaltar, puede marcar la pestaña actual mediante una etiqueta en negrita.

Siempre tiene una de las pestañas preseleccionadas

Si su aplicación utiliza pestañas, una de las pestañas siempre debe estar seleccionada cuando las pestañas estén visibles. Simplemente no puede haber una situación en la que las pestañas se muestren al usuario pero no pre-seleccionadas, ya que esto hará que sus usuarios se sientan perdidos.
Organizar las pestañas en orden

Organice etiquetas de pestañas en un orden que tenga sentido para sus usuarios: Debe determinar si hay un orden en el que se deben presentar las pestañas para facilitar el uso de su aplicación. Recuerde, la lógica de su usuario debe prevalecer en lugar de la suya.
La información sobre ventas puede ser ordenada por años.

Utilice etiquetas de texto significativas

Las pestañas deben ser fáciles de escanear y los usuarios deben ser capaces de entender lo que sucede exactamente cuándo tocan un elemento. Las etiquetas de texto deben proporcionar definiciones breves y significativas a las pestañas:

- Las etiquetas deben usar lenguaje sencillo, en lugar de términos inventados.
- Evite las etiquetas de texto largas ya que estas etiquetas no truncan ni se envuelven. Si generalmente necesita etiquetas más largas, es una señal de que las opciones son demasiado complicadas para un control de ficha.
- Truncar etiquetas puede impedir la comprensión.


Tenga cuidado con los iconos

Las etiquetas de las fichas pueden ser todos los iconos o todo el texto.
No combine etiquetas de texto con iconos. Fuente: Diseño de materiales

Es esencial que base su uso de un icono en su significado semántico, no en su apariencia. Esto ayudará a que la interfaz de usuario de su aplicación tenga sentido incluso si el icono asociado a un significado específico cambia su apariencia. Por lo general, es muy difícil encontrar iconos descriptivos para toda la opción de navegación posible, por lo que el texto es mucho mejor.
Mal ejemplo: Es muy difícil leer el significado detrás de todos estos iconos.

No utilice varias filas o pestañas anidadas

No debe ser sólo una fila de pestañas. Las múltiples filas son un síntoma seguro de una complejidad excesiva: si necesita más pestañas que caben en una sola fila, debe simplificar su diseño.
Las pestañas no se presentan como una sola columna.
Las pestañas anidadas crean elementos de interfaz de usuario|que destruyen la memoria espacial y, por lo tanto, imposibilitan que los usuarios rastreen las relaciones de contenido de tabulación (para recordar qué pestañas ya han visitado).

Hacer grandes las pestañas

Haga que los objetivos sean lo suficientemente grandes como para ser fácilmente aprovechados. Para calcular el ancho de cada ficha, divida el ancho de la vista por el número de acciones. Como alternativa, puede hacer que todas las pestañas tengan el ancho de la pestaña más grande.

La guía de Android sugiere las siguientes dimensiones para las pestañas de los dispositivos móviles.
Unidades en píxeles independientes de la densidad (dp).

Hacer visibles las pestañas no seleccionadas

Las pestañas no seleccionadas son claramente visibles y legibles, recordando al usuario las opciones adicionales. Si las pestañas no destacadas se mueven fuera de la vista, existe el riesgo de que los usuarios nunca hagan clic en ellas y nunca descubran las muchas funciones ocultas.

Las pestañas desplegables con un subconjunto de pestañas son la única excepción para esta regla. Pero el contenido aún desplazable es menos eficiente, ya que tienes que desplazarte una vez antes de que puedas ver la opción que quieres.

Ocultar pestañas basadas en la dirección de desplazamiento

A menudo, la aplicación móvil tiene más páginas o secciones que las que pueden caber en una pantalla móvil a la vez, y una fila adicional de pestañas o botones pierde mucho valor en una pequeña pantalla móvil.

Si la pantalla es un avance de desplazamiento, la barra de pestañas se puede ocultar cuando las personas desplazan por contenido nuevo y revelan si empiezan a bajar tratando de volver a la parte superior. Sin embargo, debe asegurarse de que este comportamiento no limitará las acciones de los usuarios.

Usar animación de diapositivas para transiciones

Para reforzar la sensación de que las diferentes pestañas están en la misma pantalla, no debe utilizar las transiciones de actividad animadas predeterminadas entre las pestañas (los usuarios las asocian con moverse más profundamente en la aplicación). Las pestañas están lado a lado y cualquier animación utilizada debe reflejar eso. La mejor animación es la animación deslizante. Esto también anima a los usuarios a usar gestos de deslizamiento para moverse entre pestañas.


No olvide el gesto de deslizamiento

Mientras que golpear ligeramente las lengüetas está OK el deslizar entre ellas es aún mejor. Para los usuarios de gestos de desplazamiento no tendrá que llegar a la parte superior de la interfaz de usuario. Todas las interfaces de usuario con pestañas en Android siempre deben admitir el gesto de desplazamiento.


Luchar por la coherencia

No quite una lengüeta cuando su función no esté disponible. Si quita una pestaña en algunos casos, pero no en otras, la interfaz de usuario de la aplicación es inestable e impredecible. La mejor solución es asegurarse de que todas las pestañas están habilitadas, pero explicar por qué el contenido de una pestaña no está disponible. Por ejemplo, si el usuario no tiene ningún mensaje, la pestaña mensajes de la aplicación Modspot muestra una pantalla que explica cómo agregar una. Esta función se llama Estado Vacío.


Conclusión

Las pestañas son geniales si se implementan correctamente. Es un componente de interfaz de usuario relativamente simple, pero también es muy fácil conseguir que se equivoquen. Siga las directrices de su aplicación, está se verá y funcionará bien. Y una gran aplicación es una que ayuda a los usuarios a realizar cualquier tarea de la manera más eficientemente posible.
 
Difundido el:
14 de Marzo de 2017
Actualizado el:
14 de Marzo de 2017 11:08
Ubicación:
Lima, Provincia de Canta, Departamento de Lima (Perú)
Fuente:
Fibo Group
Página web:
Marca:
Icons8
Tipo:
Artículo de blog
Zona de impacto:
Internacional
Palabras clave:
Usabilidad, Diseño móvil, Etiquetas, Iconos
Imágenes

diseño móvil de UX

Contacto de comunicación
Nombre:
Juan Garza
Correo electrónico:
Teléfono:
5676290
Dirección:
Av Lima 3990
 

¡Integra esta noticia en tu web!

vista previa

USO DE COOKIES: Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarte contenidos relacionados con tus preferencias mediante el análisis de tus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso. Puedes obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de Privacidad