¿Qué características deben tener las interfaces de usuario?

Tokio School | 07/12/2019

Todos somos conscientes del enorme crecimiento del sector de los dispositivos móviles y podemos afirmar que se han convertido en una herramienta esencial en nuestra vida personal y profesional. Hoy hablaremos de una profesión en auge, la del desarrollo de aplicaciones móviles, y más en concreto de las interfaces de usuario y de las características ideales que han de tener para conquistarnos. Lee con atención.

¿Qué es una interfaz de usuario?

Antes de enumerar todos los requisitos que deberíamos pedirle a una interfaz de usuario casi perfecta, vamos a recordar su significado. Una interfaz de usuario es un medio a través del cual una persona puede controlar un software o hardware específico. Lo ideal es que las interfaces de usuario sean fáciles de usar para que la interacción sea lo más instintiva e intuitiva posible.

Carrera profesional Desarrollo de Aplicaciones Móviles. Android & iOs

La interfaz de usuario ideal y sus características

Clara

La claridad de la interfaz evita que el usuario cometa errores y da una perfecta experiencia al usuario. Claridad significa que la información es transmitida de manera precisa.

Concisa

En perfecta simbiosis y armonía con la cualidad anterior, la información debe ser clara y concisa para que el usuario la capte de la manera más eficiente posible.

Coherente

La coherencia ayudará a tus usuarios a desarrollar patrones de uso, y poco a poco, aprenderán la función de los diversos botones, iconos y otros elementos propios de la interfaz. El usuario debe sentirse cómodo manejando la interfaz de usuario.

Legible

Usa un lenguaje simple para ayudar a la rápida lectura por parte del usuario. Esto ayudará también a que el usuario se acostumbre más rápidamente a las diversas funciones que posee la interfaz.

Interactiva

Una buena interfaz tiene que ser rápida y además ofrecer información al usuario sobre las tareas que se están realizando en tiempo real.

Flexible

Una buena interfaz debería posibilitar al usuario restaurar aquellos elementos que hayan sido borrados. Lo ideal es que la interfaz de usuario genere copias de seguridad.

Familiar

El usuario debe sentirse familiarizado con la mayoría de los elementos. Además, es muy importante es ofrecer atajos hacia los elementos más utilizados.

Eficiente

Una interfaz en la que el usuario sea capaz de lograr lo que desea al momento, sin molestarlo con opciones adicionales sobre lo que desea hacer, que demoran el proceso y dañan la experiencia del usuario.

Atractiva

Además de funcionalidad, la interfaz de usuario ha de ser atractiva, ya que cada vez más personas están pendientes del diseño.

Diseñar de Interfaces de Usuario

Como ves, diseñar una buena interfaz de usuario requiere unificar una serie de elementos imprescindibles. Y es que el diseño de interfaz de usuario es el resultado de definir la forma, función, utilidad, ergonomía, imagen de marca y otros aspectos que afectan a la apariencia externa de las interfaces de usuario en sistemas de todo tipo (ordenadores de uso general, sistemas de control, dispositivos de comunicación móviles, software de sistemas, software de aplicaciones, sitios web, etc).

Un buen diseño de la interfaz de usuario facilita la comprensión de tareas a realizar por parte del usuario, por lo que el sistema no solo debe ser operativo, sino también usable y adaptable a la evolución de las necesidades del usuario.

Si todo lo que acabamos de contarte te apasiona y eres un crack en lo que al diseño se refiere, entonces no esperes ni un minuto más y hazte profesional con un curso de Desarrollo de Aplicaciones Móviles. Android & iOs. En Tokio te ofrecemos un programa formativo completo y dinámico, para hacer de ti un desarrollador de aplicaciones móviles ideales y de las mejores interfaces de usuario. ¡Llámanos, te esperamos!

Patrones de diseño de interfaz de usuario móvil: más de 10 sitios para inspirarse

Patrones de diseño de la interfaz de usuario son soluciones para desafíos de diseño comunes, como navegar por una aplicación, enumerar datos o proporcionar comentarios a los usuarios.

Las aplicaciones y los sitios móviles tienen requisitos de diseño de interfaz de usuario únicos porque, en comparación con sus contrapartes de escritorio, se usan en pantallas más pequeñas y, al menos con los dispositivos móviles modernos de hoy, dependen de los dedos en lugar de un teclado y un mouse como mecanismos de entrada.

Ya sea que esté diseñando una interfaz de usuario de aplicación móvil por primera vez o necesite soluciones de diseño específicas, estos recursos de patrones de diseño de interfaz de usuario móvil seguramente te ayudará!

1. Patrones de interfaz de usuario móvil

Patrones de interfaz de usuario móvil es un gran sitio para visitar y ver patrones comunes de diseño de IU para dispositivos móviles, como notificaciones y feeds de actividades. Los patrones están organizados en 20 categorías para que pueda encontrar fácilmente lo que está buscando.

2. Interfaz de usuario inspirada

Interfaz de usuario inspirada es una excelente galería de patrones de diseño de interfaz de usuario móvil con más de 1000 capturas de pantalla de aplicaciones móviles reales. Los patrones de diseño que aparecen en el sitio incluyen páginas de registro e interfaces de usuario de registro.

3. interfaz de usuario encantadora

Este sitio presenta elementos comunes de la interfaz de usuario de aplicaciones móviles, como botones, listas y ventanas emergentes. preciosa ui fue creado por la diseñadora interactiva con sede en Nueva York Diana Frurip.

4. Galería de patrones de diseño móvil

Esta galería de patrones de diseño es un complemento del libro de patrones de diseño móvil de la diseñadora de UX Theresa Neil publicado por O’Reilly Media. También puede ver los patrones de diseño en Flickr.

5. pttrns

Más de 30 patrones de diseño de interfaz de usuario móvil (por ejemplo, pantallas de presentación y tutoriales) se muestran en pttrns, un sitio de galería con capturas de pantalla grandes y una interfaz limpia. El sitio es de Robin Raszka (fundador de la popular empresa de desarrollo de iOS Tapmates) y químico.

6. Patrones de diseño

Este sitio busca presentar patrones notables de interfaz de usuario de aplicaciones móviles de aplicaciones excepcionales para iPhone y iPad. Patrones de diseño es de Will Simons, un diseñador de UX independiente y gerente de proyectos.

7. Cuarta biblioteca de patrones de diseño móvil

Este recurso wiki es una guía de referencia general para los patrones de diseño de la interfaz de usuario móvil. Analiza una amplia gama de patrones de diseño, como presentaciones de diapositivas y paginación, hasta publicidad dentro de su aplicación móvil.

8. Patrones de diseño de la interfaz de usuario de Android

Este blog del tecnólogo / desarrollador / usuario de Android alemán Juhani Lehtimaki publica publicaciones que cubren los patrones de diseño de la interfaz de usuario de Android. En cada publicación, se analiza un patrón de diseño y se incluyen capturas de pantalla relevantes de aplicaciones móviles.

9. pttrns de Android

pttrns android, inspirado por pttrns (mostrado arriba), es una galería de patrones de diseño de IU de aplicaciones de Android. Actualmente solo tiene algunos patrones, como la barra de acciones y la barra de pestañas.

10. Documentación oficial para desarrolladores de sistemas operativos móviles

Los fabricantes de sistemas operativos móviles suelen tener documentos oficiales dirigidos a los profesionales que desarrollan para su plataforma. Estos documentos suelen incluir guías sobre patrones de diseño de la interfaz de usuario.

Creación de una interfaz de usuario por código

Veamos un primer ejemplo de cómo crear una interfaz de usuario utilizando exclusivamente código Java. Aunque esta no es la forma recomendable de trabajar con Android, resulta interesante para resaltar algunos conceptos.

Ejercicio: Creación del interfaz de usuario por código

1. Abre el proyecto creado en el capítulo anterior y visualiza MainActivity.java.

2. Comenta la última sentencia del método onCreate() añade las tres subrayadas

@Override public void onCreate(Bundle savedInstanceState) { //setContentView(R.layout.activity_main); TextView texto = new TextView(this); texto.setText("Hello, Android"); setContentView(texto); }

override fun onCreate(savedInstanceState: Bundle?) { //setContentView(R.layout.activity_main) val texto = TextView(this) Android" setContentView(texto) }

Nota sobre Java / Kotlin: Para poder utilizar el objeto TextView has de importar un nuevo paquete. Para ello añade al principio “import Otra alternativa es pulsar Alt-Intro, para que se añadan automáticamente los paquetes que faltan.

La interfaz de usuario de Android está basada en una jerarquía de clases descendientes de la clase View (vista). Una vista es un objeto que se puede dibujar y se utiliza como un elemento en el diseño de la interfaz de usuario (un botón, una imagen, una etiqueta de texto como en el utilizado en el ejemplo, etc.). Cada uno de estos elementos se define como una subclase de la clase View; la subclase para representar un texto es TextView.

El ejemplo comienza creando un objeto de la clase TextView. El constructor de la clase acepta como parámetro una instancia de la clase Context (contexto). Un contexto es un manejador del sistema que proporciona servicios como la resolución de recursos, obtención de acceso a bases de datos o preferencias. La clase Activity es una subclase de Context, y como la clase MainActivity es una subclase de Activity, también es de tipo Context. Por ello, puedes pasar this (el objeto actual de la clase MainActivity) como contexto del TextView.

3. Después se define el texto que se visualizará en el TextView mediante setText(). Finalmente, mediante setContentView()se indica la vista utilizada por la actividad.

4. Ejecuta el proyecto para verificar que funciona.