La Interfaz de usuario como barrera de entrada - Perfiles de usuario

Esta es la primera parte de una serie de capítulos en los que exploraremos las barreras de entrada de nuestros sistemas informáticos -tanto mobile como no mobile - y que trucos podemos utilizar para hacer nuestras interfaces mas amigables de cara al usuario (user friendly) en lugar de parecer la web de hacienda.


A menudo para que la experiencia de usuario sea agradable, la interfaz tiene que acompañar a las necesidades del front-end. Sobretodo la información que ponemos en ella y como la disponemos. A menudo tenemos muchos datos de nuestros usuarios pero una de las principales cosas que debemos de hacer es organizarlos con respecto a la semántica de nuestra app y los servicios que ofrece a nuestros usuarios.

Los perfiles de usuario

Puede no parecerlo , pero los perfiles de usuario cumplen un aspecto fundamental a la hora de crear una app en la que debemos interactuar con  el resto de personas registradas en ella.


Vamos a ver un caso de ejemplo, de como los datos se pueden disponer de una manera más sencilla y atractiva para el usuario.

MAL

Mejor

gui bien

En este caso, estamos presentando la información de una manera más relevante y útil al usuario. Las información más relevante aparece en tamaño más grande y diferenciado del resto. Además, hemos incluído iconos para resaltar las categorías (ya que en este caso, los iconos tienen mucho sentido).


La forma en la que presentamos la información es importante y debe sobretodo de ser siempre relevante en cuanto a forma, a cantidad y a contexto.   Para esto vamos a tener en cuenta las conocidas máximas de grice en cuanto a conversaciones entre interlocutores.

¿Máximas de quién?

...De Grice... ¿pero bueno... es que no sabes leer? Paul Grice fué un filósofo y lingüísta Inglés que vivió en el siglo XX en California. El postuló que hay ciertas normas para una conversación que los seres humanos utilizamos. Básicamente vino a decir que el ser humano dice muchas más cosas que las que realmente escribimos / decimos.


Por ejemplo, utilizando la negrita en un texto, queremos recalcar que esa frase es importante. En otras ocasiones, SI UTILIZAMOS MAYÚSCULAS , de forma instintiva estamos pensando que nos están gritando.

Grice postuló que la forma en la que nos comunicamos está siempre basada en algunas reglas predeterminadas que los interlocutores conocemos de ante mano y que son independientes del lenguaje. Grice llamó a esto el "principio de cooperación " en el que se asume que el interlocutor está intentando cooperar para mantener la conversación.   


Puede parecer obvio, pero es cierto. Todos nosotros intentamos encajar el contenido del mensaje que recibimos dentro del contexto de lo que estamos viendo o escuchando.  Si al escribir este artículo, utilizamos la negrita, entonces tu, como lector, entiendes que intentamos darle más importancia a esa palabra en cuestión. 


Máxima de cántidad: Da tanta información como sea necesaria, y no más. Es por ello por lo que no se venden "Tomates veganos" en los supermercados. Sería algo ridículo ya que todos sabemos que los tomates de por si ya son veganos. Dar mucha información es.... ¿raro? 


Máxima de calidad: Di siempre la verdad. La información que estás indicando es siempre certera.


Máxima de relación: Se relevante a la hora de dar información. La persona receptora entenderá que la información es relevante de alguna manera y tratará de encajarla en lo que esté comprendiendo dentro de su mente.


Máxima de maneras:  Se perspicuo. Trata de ser lo más claro posible.


Y esto se cumple también en todos los idiomas.  Todos los idiomas tienen tendencia a ser completamente contextuales. Su semántica depende del contexto. Piénsalo, ¿Cúantas veces hemos dicho "oh, ¡me muero!".  ¿Quiere esto decir que nos vamos a morir?  Es una frase hecha cuyo contexto debemos conocer para entender lo que realmente quiere decirse. Puede ser que el emisor esté muy cansado y no pueda mas. Puede ser que tenga una enfermedad terminal... sin el contexto, solo podemos entender el significado literal y lógico, en este caso, que alguien está falleciendo.


Con estas máximas en mente, debemos pensar en cómo dar la información más relevante a nuestros usuarios. De manera instintiva, un usuario sabrá que la pantalla tiene diferentes elementos con los cuales interactuar (como botones, radiales, scrolls... ) . Tenemos que utilizarlos a nuestro favor para que todo el contexto de nuestra interfaz gráfica tenga sentido.

  • gui mejor

    ¿Qué información es relevante?

    Pensemos en una red social de amistades. ¿Son los datos que se indican los más relevantes? 


    La relevancia de la información depende tanto del publico objetivo como del servicio que pretenda dar nuestra app mobile.


    Vamos a reorganizar la información como si nuestro público fuese tremendamente sexista.

  • gui bien

    ¿Cuál es tu estado civil?

    ¿Os imagináis una app en la que tu estado civil fuese lo primero que apareciese?

  • gui bien

    Una propuesta para una app de fitness

    En este ejemplo de app de fitness,  tenemos de un solo vistazo la información relevante que le interesará a los usuarios. Además, la disponemos de forma más interactiva y podemos ayudarnos de los colores para dar más información sobre las métricas que estamos teniendo delante.

  • gui bien

    ¿Publicaciones de los usuarios en tu red social?

    El contenido de nuestros usuarios puede ser más importante que nuestros usuarios en sí. Darle la importancia correspondiente enganchará más a tu público a tu app.


    Recuerda que el contenido de los usuarios debe de poder ser reportado en el sistema, para evitar que los usuarios puedan poner cosas controvertidas y malusen tu plataforma.

Las escalas numéricas y las puntuaciones.

Mantener una puntuación como algo numérico puede ser algo confuso si no se le pone en contexto. Si bien es cierto que podemos entender que 40k seguidores son más que 3k seguidores,​ a menudo al usuario le resulta más fácil si la puntuación se pondera (por ejemplo, sobre 10) o se le otortga algún tipo de grado (como estrellitas) o sello distintivo. El mando militar y su jerarquía son un buen ejemplo de utilización de diferentes símbolos para expresar posición y rango, utilizando diferentes marcas y símbolos en mayor o menor número y diferente color para determinal la importancia que viene implícita en el lenguaje.

escala

Atendamos por ejemplo a la siguiente captura de pantalla. Una propuesta para una app de deportes. En este caso, la foto del usuario pasa a ser algo meramente decorativo . ​ No es la pieza más fundamental del usuario ya que la app intenta mostrar que hay más información relevante  - el contenido del usuario es más relevante que el usuario en si.

propuesta app de deportes.

Para empezar, utiliza la unidad de medida de tiempo en minutos y no en pasos ni km. Esto es porque todos somos más conscientes del tiempo que de la distancia. Además, en este caso, la app no quiere enfatizar la distancia y lo lejos que ha llegado, sino solamente el tiempo que ha dedicado a dicha actividad (sin entrar en detalle de como de intensa ha sido).


Otro gran logro es la barra circular que vemos abajo. El introducir una barra dentro de un porcentaje nos da entender que hay un máximo y que esa meta es comparativa. No necesitamos saber exactamente cuanta cantidad en minutos falta, sino que a nivel de interfaz nos basta saber que es <--esto--> de grande.


Este tipo de ideas innovativas en el desarrollo de UI hacen que el público conecte más e incluso gamifica (convertir en juego) la experiencia del usuario dentro de la aplicación. Cómo dispongamos la información puede determinar el éxito o el fracaso de nuestra aplicación. ​La meta final es la elegancia espacio-semántica máxima para el usuario.

El registro de usuarios

Una de las características más comunes que tienen la mayoría de apps son los perfiles de usuario.​ Como sabemos, que un usuario tenga que crearse un perfil es una gran barrera de entrada. Primero porque detienes al usuario de usar el servicio mientras rellena y cumplimenta sus datos. Segundo - y no por ello menos importante - porque el usuario tendrá que poder autenticarse de alguna manera. Vivimos en la época en la que puedes autenticarte con tu sesión de Facebook mediante un único clic. Son tiempos "difíciles" para los registros de usuario

  • gui MAL

    Demasiados registros de entrada

    Este es un ejemplo de interfaz de registro con un elevado grado de barrera. A simple vista no acompaña al usuario a que se de de alta, ya que de primera vista hay muchos campos para rellenar.


    Además, cada vez que se hace clic sobre uno de estos campos, sale el teclado en pantalla, lo cual dificulta la navegación entre los distintos campos a rellenar por el usuario.

  • gui bien

    Solución - Registro por pasos

    En lugar de exigir al usuario todos los datos de golpe, le podemos acompañar a través de un registro por pasos que hace más amable la introducción inicial de los datos.

Una buena estrategia es reducir el número de datos que necesitamos obtener de forma manual por su parte. Cuantos menos datos deban introducir siempre será mejor (salvo que sean necesarios, claramente).


Esto no implica que no debamos verificar la identidad real del usuario - todo lo contrario. La facilidad del registro permite al usuario abusar de las cuentas del sistema, por lo que algún método de verificación (como un correo electrónico o un número de teléfono) siempre suele ser necesario. No obstante, también es una buena forma de reducir la barrera de entrada si pedimos esos datos solamente cuando los vayamos a necesitar, en vez de nada más iniciar al usuario en la aplicación.

  • PETICIÓN DE DATOS MINIMALISTA

    Este es un ejemplo sencillo de cómo realizar un registro. El registro más sencillo es aquel que sencillamente pide un email y su contraseña en la primera página. (O un número de teléfono).


    Esto siempre viene acompañado de alguna forma de verificar la cuenta (como por ejemplo mediante un código con dígitos de control).

  • good sign up

    Recordatorios educados

    Podemos añadir además pequeñas frases que sutilmente indiquen al usuario los siguientes pasos que vamos a tomar a lo largo del registro.

  • good sign up

    Login con redes sociales

    Si nuestra app se va a dirigir a las masas, y queremos captar a tantos usuarios como podamos, entonces siempre es una buena idea a considerar el registro en la aplicación a través de redes sociales.


    Los botones deben de ocupar la importancia correspondiente, pero nunca convertirlas en el centro de atención

Los que mejor han entendido el eliminar esta barrera de entrada han sido los sitios de e-commerce, donde te permiten comprar (y pagar) poniendo la información de tu tarjeta de crédito antes que poniendo el nombre (o a veces incluso la dirección de envío, aunque suele ser protocolario no alterar este orden).

¿NEcesitas un estudio de UI/ UX?

En Hamro Dev realizamos este tipo de estudios de UI UX en nuestro día a día. Ayudamos  a otros emprendedores a clavar la interfaz de usuario de sus APPs. Tenemos años de experiencia en el diseño y desarrollo de aplicaciones informáticas. ¿Tienes un proyecto software? Ponte en contacto con nosotros y reserva ahora una hora de consultoría gratuíta.

Lo más popular entre los lectores

Desarrollando una I.A que reconoce caras en Javascript

Desarrollando una I.A que reconoce caras en Javascript

Leave review
La tecnología está llena de cosas increíbles que nos sorprenden a cada paso...
Leer más
Producto Mínimo Viable de una app, by Hamro Dev

¿Qué es un MVP y por qué es tan importante?

Leave review
¿Que es un MVP? Si todavía no lo sabes, entra aqui y averigua por qué es ta...
Leer más
¿Cómo abrir una página web en China?

¿Cómo abrir una página web en China?

Leave review
Una cosa es ofrecer el idioma chino a tus clientes y otra bien distinta es ...
Leer más
¿Cómo montar una empresa sin pagar autónomos?

¿Cómo montar una empresa sin pagar autónomos?

Leave review
Leer más
Las barreras de entrada en el mundo de las apps

¿Qué es una barrera de entrada en el mundo de las apps?

Leave review
Leer más
¿Por qué todos los mapas de China están mal?

¿Por qué todos los mapas de China son erroneos?

Leave review
Todos los mapas de China están mal. ¿no te lo crees? Échale un vistazo al a...
Leer más
¿Cómo averiguar tu número de UDID en iPhone?

¿Cómo averiguar tu número de UDID en iPhone?

Leave review
El Unique Device Identifier (UDID) es un código de 40 dígitos hexadecimales...
Leer más
Esta genial campaña promocional de Toy Story 4

Esta genial campaña promocional de Toy Story 4

Leave review
Es innegable que la tecnología hoy en día se ha convertido en una herramien...
Leer más
Email *
Suscribirme

¿De qué va esto?

Lo más reciente

Las categorías

Te puede interesar...