Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Charla Usabilidad

No description
by

MM BB

on 7 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Charla Usabilidad

Results
Notes
Place your own picture
behind this frame!
Double click to crop it if necessary
San Francisco
Budapest
Important
Details
(cc) photo by Metro Centric on Flickr
(cc) photo by Franco Folini on Flickr
(cc) photo by jimmyharris on Flickr
Stockholm
(cc) photo by Metro Centric on Flickr
Assets
map
details
doodles
notes
outlook
photo frame
Facilidad
de
Aprendizaje

Eficiencia
"63% de todos los proyectos de desarrollo de software sobrepasan su presupuesto, siendo las cuatro causas más importantes relacionadas con usabilidad. (Lederer y Prassad 1992).
USABILIDAD


Término no apropiado por diferentes razones:
-> Innecesario
-> Programas que no impidan lo que el usuario
quiere hacer
-> Diferentes usuarios = diferentes necesidades

Se cambió al área conocida como:
Definió la usabilidad
en base a 5 atributos:
Es un doctor en ingeniería que centró su carrera en el desarrollo de interfaces de software, desde lo cual evolucionó hacía el tema de la usabilidad
Otros atributos importantes (ISO)
Vamos a lo práctico…

--> Difícil encontrar la mejor metodología
1) Visibilidad del estado del sistema
Seguir una estructura
piramidal
Consición y precisión
Fácil lenguaje
Tono
Mantener diseño en las páginas
Espacios en blanco
Brevedad
Prescindir de imágenesde fondo
EJEMPLOS
Recomendaciones:






.






.
• La usabilidad demuestra reducciones del ciclo de desarrollo de los productos de 33-50% (Bosert 1991).
Ej: IBM a través de métodos de usabilidad logró reducción de una media de 9.6 minutos por tarea, generando ahorros internos de 6,8 millones de dólares. (Karat 1990).






.
•80% de las tareas de mantenimiento se deben a requerimientos de usuario no previstos, quedando el resto debido a fallos y errores. (Martin and McClure 1993; Pressman 1992)
“Interacción usuario- computador”
ISO/IEC 9126:

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"

ISO/IEC 9241:

"Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
Definiciones
Históricamente: “interfaces amigables”

Jakob
Nielsen
Perdurabiliad
en la
Memoria
Errores
Satisfacción
Conocido como el "gurú de la usabilidad"
Flexibilidad
Robustez
"Aquel que usa algo" (RAE)

En informática: conjunto de permisos
y recursos a los cuales se tiene acceso

-> El usuario puede ser tanto una máquina, una persona, etc
Usuario
Experto
General
-> Entrenado
-> No conoce nada
Beneficios de centrarse en el Usuario


2) Reducción de costos de
-> Capacitación
-> Soporte
-> Desarrollo

3) Disminución tasa de errores
1) Reducción de tiempos de capacitación
Beneficios de centrarse en el Usuario
3) Mejora
-> Imagen
-> Calidad de vida de los usuarios (satisfacción, productividad, menos estrés)

4) Aumenta probabilidad de éxito

5) Sorprender al Usuario
con una buena experiencia!
Ingeniería de la usabilidad
1) Observación de
usuarios y
sus tareas
2) Escenarios
3) Pensar en voz
alta
4) Evaluación
eurística
4 pasos
10 reglas Jakob Nielsen
Mantener al usuario informado de que está pasando en el sistema
2) Similitud entre el sistema y el
mundo real


Hablar en lenguaje común para el usuario..
Con frases y palabras comunes para el usuario
3) Control y libertad por parte del usuario

Se necesitan: "salidas de emergencia"
Funciones para deshacer y rehacer las acciones
4) Consistencia y cumplimiento de
estándares


Definir un estándar y seguir las mismas convenciones dentro de todo el sistema

Los usuarios no se pueden cuestionar si distintas palabras significan lo mismos
5) Prevención de errores
Mejor que tener buenos mensajes de error, es prevenirlos, anticiparse al usuario
6) Preferencia al reconocimiento
frente a la memorización

7) Flexibilidad y eficiencia en el uso
Tratar eficientemente a los usuarios tanto expertos como a los inexpertos
8) Estética y diseño minimalista
No se debe mostrar información irrelevante o raramente utilizada.

Cada información irrelevante compite con información relevante y disminuye su visibilidad
9) Ayuda para que el usuario
reconozca, diagnostique y se
recupere de los errores

Mensajes de error claros -> Dar solución al usuario
10) Ayuda y documentación
Aún cuando lo deseado es que un sistema sea usado sin documentación, puede ser necesario ofrecer ayuda y documentación en línea.

Debe ser breve, orientada en la tarea del usuario
Objetos, acciones y opciones claramente visibles
Dudas
Facebook
¿Dónde está la Ayuda?
Mala práctica 1
10) Ayuda y documentación
Buena práctica 1
10) Ayuda y documentación
La ayuda de facebook esta

-> Bien organizada
-> Bastante completa
Buena práctica 1
1) Visibilidad del estado del sistema:
- Diseño lindo y despejado

- Indica claramente que estamos en la
página de registro

- Es gratis

- Formulario sencillo y rápido de
completar
Buena práctica 2
1) Visibilidad del estado del sistema
- Zona login visible para usuario
registrados

- Separada visualmente del resto de los
contenidos
Mala práctica 1
1) Visibilidad del estado del sistema
Crear una página - ¿Dónde está?

Muy abajo, poco diferenciado

No explica que es otra parte, otra cosa de facebook

Parece una parte más del formulario
Mala práctica 2
1) Visibilidad del estado del sistema
La página que se abre al pinchar en el link "Crear una página"

- Es sencilla e intuitiva, pero sigue sin explicar al usuario cuales son las diferencias entre página y perfil, y sus distintos usos
https://www.facebook.com/pages/create.php
Buena práctica 1
Iconos de la página web son fácilmente reconocibles por los usuarios porque se relacionan con el contenido

(un sobre para la categoría de mensajes, un calendario para los eventos, diario para las noticias, etc.).
Buena práctica 2
2) Similitud entre el sistema y el mundo real
El menú lateral izquierdo

-> resulta familiar a los usuarios

-> similitud con la estructura en carpetas del buzón de correo de Hotmail o Outlook, o las ventanas del Windows Explorer.
Mala práctica 1
2) Similitud entre el sistema y el mundo real
El buscador y barra de estado

-> son muy similares
-> están ubicados demasiado cerca el uno del otro.

El modelo mental del usuario le puede llevar a confundirlos por la costumbre de utilizar los buscadores de forma automática en cuanto entramos en una página.
Mala práctica 2
2) Similitud entre el sistema y el mundo real
La zona de chat se adecúa al modelo mental que tenemos de los programas de chat como el messenger.

->Ticker (zona de información) se diferencia muy poco de la zona de chat.
Buena práctica 1
2) Similitud entre el sistema y el mundo real
Muro -> estructura similar a la de la zona central de un diario digital, en la que van apareciendo noticias.

El usuario acostumbrado a leer noticias en Internet lo reconoce fácilmente.
Buena práctica 2
6) Preferencia al reconocimiento frente a la memorización
Toda la información necesaria para la interacción se encuentra en la página,.

Un buen ejemplo es el ticker, que facilita en tiempo real la acción sobre los contenidos y actualizaciones de estado de tus amigos, con solo pasar el ratón por encima, sin esperar a que esta información aparezca en el muro.
Mala práctica 1
6) Preferencia al reconocimiento frente a la memorización
"Noticias" lleva a cierta confusión.

Clicando sobre él desde cualquier página, te lleva de vuelta al muro

->lo mismo que ocurre clickeando sobre "Inicio"
-> o sobre el logo de "Facebook".

El usuario puede confundir"Noticia" en el sentido de actualidad informativa, y no de noticia en el sentido de "actualización de estado" de los usuarios de Facebook.
6) Preferencia al reconocimiento frente a la memorización
Buena práctica 1
Desactivar u ocultar las actualizaciones de determinados amigos

-> Por ejemplo las que provienen de los juegos y aplicaciones, y que pueden resultar bastante pesadas.
3) Control y libertad por parte del usuario
Buena práctica 2
Controlar privacidad de lo que publicamos

A veces no es fácil de entender todo lo relacionado a la privacidad en facebook, peor lo podemos configurar
http://www.facebook.com/settings/?tab=privacy
3) Control y libertad por parte del usuario
Mala práctica 1
3) Control y libertad por parte del usuario
Facebook solo permite modificar un post en los 60 primeros segundos después de haberlo colgado.

Después, solo puedes eliminarlo, nunca corregirlo.

Problemas si soy administrador, pierdo "me gusta" y comentarios
Mala práctica 2
3) Control y libertad por parte del usuario

Enter = Publicar

Cuando comentas un post, si pinchas Enter con la intención de hacer punto y aparte), Facebook publica tu comentario (entiende que le das permiso para publicar).
Buena práctica 1
Mantiene la misma estructura en --> perfiles
-> grupos
-> páginas.
http://www.facebook.com/groups
4) Consistencia y cumplimiento de estándares
Buena práctica 2
La barra de búsqueda sigue los estándares comunes del mercado.
http://www.facebook.com/groups
4) Consistencia y cumplimiento de estándares
Mala práctica 1
El menú de idiomas inconsistente

-> Aparecen dos entradas con idioma "Español (España)" y "Español". Clickeando en cada uno de ellos, la página es la misma.
4) Consistencia y cumplimiento de estándares
Buena práctica 1
El buscador de Facebook tolera errores tipográficos (mayúsculas).
5) Prevención de errores
Buena práctica 2
El buscador tolera errores ortográficos (tildes).
Mala práctica 1
El buscador no acepta

-> juegos de palabras similares con errores ortográficos

->Por ejemplo si escribo Montevideo Potal, el buscador no encuentra la página de "Montevideo Portal".
5) Prevención de errores
Mala práctica 2
El buscador
-> no recuerda la palabra que acabo de buscar si vuelvo a empezar a escribirla.

Por ejemplo, si escribo "Montevideo P" después de haber buscado Montevideo Portal, no me sugiere la palabra "Montevideo Portal".
5) Prevención de errores
5) Prevención de errores
En el buscador aparece la palabra "Buscar personas, lugares y cosas"

->cuando clickeas con el puntero del ratón, el cursor parpadea, facilitándote la tarea de buscar.
http://www.facebook.com/groups
Mala práctica 1
La configuración de la privacidad en Facebook difícil de entender.

Puede que no lo configuremos como queremos, o se nos escape algo
http://www.facebook.com/settings/?tab=privacy
7) Flexibilidad y eficiencia en el uso
7) Flexibilidad y eficiencia en el uso
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
Buena práctica 1
La página de inicio de Facebook es
->limpia
->incluye la información necesaria para quien quiera registrarse.

Quien quiera cambiar de idioma o buscar más información tiene dos menús horizontales en la parte inferior muy discretos que no generan ruido.
8) Estética y diseño minimalista
Buena práctica 2
Pagina para crear Fanpages es
-> limpia
-> minimalista
-> bastante intuitiva (aunque quizá en exceso, para un usuario nuevo en Facebook).
8) Estética y diseño minimalista
https://www.facebook.com/pages/create.php
Mala práctica 2
Sección de calendario y eventos en la parte superior derecha

-> encima de los banners
-> no se distingue demasiado de estos últimos, y apenas se ve (al menos yo no le presto nunca mucha atención).

Cuando te avisa de que hoy es el cumpleaños de un amigo, no sale la foto de tu amigo, que sería una forma de destacar el evento.
8) Estética y diseño minimalista
9) Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores
Mala práctica 1
¿Cúales son los campos que hay que completar?


SI pongo solo dos no me marca los restantes

Puede pasar que el usuario no se de cuenta que le falta uno particular
9) Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores
Buena práctica 1
El mensaje de error al entrar en Facebook habiendo tecleado mal la contraseña está escrito en lenguaje común y no es un código técnico.
https://www.facebook.com/login.php?login_attempt=1
9) Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores
Sugiere que has podido olvidar tu contraseña

-> indica de forma visible dónde está el link para solicitar una nueva.
Buena práctica 2
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
http://www.facebook.com
Buena práctica 1
http://www.facebook.com
http://www.facebook.com
Facebook
Facebook España pierde 2 Millones de usuarios en 5 meses (Junio 2012)

Causa principal: Cambios constantes en la plataforma -> Tener cuidado con los cambios, si bien hay que mejorar hay que tener cuidado con el impacto del usuario, estudiarlo, estudiar su contexto.
Tienda inglesa
Teléfonos inteligentes y la Usabilidad
http://developer.android.com/design/get-started/principles.html
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW1
Android
IOS
Muchas gracias !!
Muriel Barrios
Bibliografía
http://www.nngroup.com/articles/ten-usability-heuristics/

http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5

http://www.hg.com.uy/

https://www.facebook.com/

http://www.boltpeters.com/

http://es.wikipedia.org/wiki/Usabilidad#Definiciones_formales

http://www.concreta.com.uy/index.html
Uruguay y la Usabilidad
Full transcript