Documentos de Académico
Documentos de Profesional
Documentos de Cultura
DISEO DE INTERFACES DE
USUARIO
FECHA:
Entrega: 29/04/15
INTEGRANTES:
PROFESOR:
ABRIL 2015
2015
Steve Krug
NO ME
HAGAS
PENSAR
UNMSM - FISI
2
2015
NDICE
1.
INTRODUCCIN 4
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
UNMSM - FISI
3
2015
INTRODUCCIN
ACLARADO DE VOZ Y RENUNCIA DE
RESPONSABILIDADES
Los clientes envan propuestas de diseo de pginas para el nuevo sitio web que
estn preparando o el url del sitio existente que estn rediseando.
El consultor en usabilidad mira los diseos o usa el sitio y resulta si son lo
suficientemente fciles de manejar.
Redacta un informe detallando los problemas probables con lo que considera, los
usuarios se pueden encontrar.
Trabaja en conjunto con el equipo de diseo web para ayudarles a resolver los
problemas.
CAPTULO 1:
UNMSM - FISI
4
2015
NO ME HAGAS
PENSAR!
PRIMERA NORMA DE LA USABILIDAD DE KRUG
Cuando se mira una pgina web sta debe ser obvia, evidente, clara y fcil de entender.
Se tendra que poder entender respondiendo a lo siguiente: qu es y cmo usarla, sin
agotar esfuerzos pensando en las respuestas.
Veamos las siguientes figuras para poder comprender mejor lo dicho anteriormente:
UNMSM - FISI
5
2015
En una pgina web, cualquier cosa puede detenernos y hacernos pensar innecesariamente.
Por ejemplo, los nombres de las cosas: nombres bonitos o ingeniosos, nombres producidos
por el departamento de marketing, nombres especficos de la empresa y los nombres
tcnicos que no nos son familiares.
Tenemos una empresa corporativa llamada XYZ la cual pretende contratar una persona con
determinados ttulos acadmicos, entonces nos dirigimos a su sitio web. Al momento de dar
clic en algo, el nombre que han elegido para su seccin puestos de trabajo cambia todo.
Veamos la siguiente figura:
UNMSM - FISI
6
2015
Pero lo que en s es ms idneo para los usuarios o visitantes a la pgina web sera
OFERTAS DE TRABAJO ya que no solo plantea un formato bastante entendible
para todos sino que es el punto de equilibrio entre lo evidente para todo el mundo y
lo completamente confuso.
Otro tema innecesario de interrogantes en nuestras mentes es el tema de los vnculos y los
botones en donde se puede hacer clic, pero que nos hacen dudar si podemos pulsarlos o
no.
Veamos la siguiente figura:
UNMSM - FISI
7
2015
El objetivo para cada pgina debera ser que fuera evidente, que el usuario medio
solo con mirar supiera de lo que se trata y la forma de usarse.
CAPTULO 2:
UNMSM - FISI
8
2015
CMO USAMOS
REALMENTE LA
WEB?
OJEAR, SER SUFICIENTE Y ARREGLRSELAS
Existe una gran diferencia entre lo que se piensa acerca de cmo se usan los sitios web y
la forma en que realmente se usan.
Cuando se crean nuevos sitios, se cree que cada una de las pginas van a estudiarse
minuciosamente, que nuestros textos van a leerse completamente y entenderse de la
misma manera en que se organiz todo, pensando en las opciones antes de decidir a qu
vnculo dar clic.
Pero lo que realmente se suele hacer es echar un vistazo a cada nueva pgina, leer
rpidamente parte del texto y hacer clic en el primer vnculo que resulte interesante o se
parezca en algo a lo que se est buscando. Las partes extensas de la pgina ni siquiera
se miran.
Veamos la siguiente figura:
Si se quiere disear pginas web eficientes, tenemos que aprender a convivir con 3
factores sobre cmo se utiliza realmente la web.
UNMSM - FISI
9
2015
Nuestro inters se centra en palabras y frases que parecen encajar mejor con la tarea que
tenemos que realizar, con nuestros intereses personales o con las palabras que nos causan
una reaccin repentina, como por ejemplo: gratis, oferta, etc.
UNMSM - FISI
10
2015
No se trata de que los usuarios nunca sopesen las opciones antes de dar clic, ms que todo
depende de cmo es su esquema mental, de la presin que tengan en ese momento y de la
confianza que tengan con el sitio.
UNMSM - FISI
11
2015
Se piensa que Yahoo es internet y qu esa es la forma de usarse, es por ello que muchas
personas escriben el URL completo del sitio en el cuadro de bsqueda no slo para
encontrar el sitio sino cada vez que quieren acceder al mismo sitio.
UNMSM - FISI
12
2015
CAPTULO 3:
DISEO DE
RTULOS 101
DISEO DE PGINAS PARA HOJEAR, NO PARA
LEER
Existen cinco claves para asegurarse que los usuarios ven y entienden el sitio web:
UNMSM - FISI
13
2015
Todo se engloba visualmente bien para que queden delimitadas las partes que
pertenecen a cada bloque: Veamos la siguiente figura:
UNMSM - FISI
14
2015
El ttulo de una seccin que engloba al conjunto aparece por encima del
subconjunto.
Un ejemplo de convencin sera: una frase con letras grandes es normalmente el titular de
una pgina cuya historia se resume debajo de l; un texto debajo de una foto es un pie de
foto que aclara el contenido de la misma.
UNMSM - FISI
15
2015
o
o
Hay 18 vnculos en esta pgina pero solo 2 invitan a dar clic: Click here to
CONTRIBUTE y FULL STORY.
El resto de los vnculos son textos coloreados al igual que el resto del texto,
haciendo que el usuario se imposibilitara de saber diferenciar en un vnculo o
un simple texto.
UNMSM - FISI
16
2015
UNMSM - FISI
17
2015
CAPTULO 4:
ANIMAL, VEGETAL
O MINERAL?
POR QU LE GUSTAN AL USUARIO LAS
OPCIONES MECNICAS?
Aparentemente el nmero de clics para acceder a cualquier parte parece un criterio
bastante prctico, aunque con el paso del tiempo, se ha llegado a pensar que lo que
realmente importa no es el nmero de clics que se tienen que dar para alcanzar lo que se
quiere, sino la dificultad en la eleccin de ese clic.
Al usuario no le importa el nmero de clics que tenga que hacer en tanto que sea sencillo
y ofrezca una confianza continuada sobre el acierto en lo que se persigue.
UNMSM - FISI
18
2015
CAPTULO 5:
OMISIN DE
PALABRAS
INNECESARIAS
EL ARTE DE NO ESCRIBIR EN LA WEB
Las personas reconocen cuando un discurso es innecesario y este debe ser eliminado.
Por ejemplo un discurso innecesario es aquel que carece de informacin prctica o aquel
que est enfocado a elogiar lo buenos que somos en vez de definir qu nos hace tan
buenos.
Otra fuente principal de palabras innecesarias son las instrucciones. Tambin hay que
eliminarlas. El sitio debe auto explicativo, pero si las instrucciones son absolutamente
necesarias hay que reducirlas a lo esencial.
En estos primeros captulos se ha considerado algunos principios que se deben tener en
cuenta al momento de crear un sitio web.
CAPTULO 6:
UNMSM - FISI
19
2015
SEALES EN LA
CALLE Y MIGAS
DISEO DE LA NAVEGACIN
Se tiene el siguiente caso:
Un hombre ingresa a un centro comercial con el objetivo de comprar una motosierra, para
encontrar el producto que desea comprar se fija en los nombres de los departamentos que
se encuentran en la parte superior. Por ejemplo: Herramientas, cosas de casa, csped y
jardn, entonces el hombre elige herramientas luego se dirige a herramientas con motor y
por ultimo encuentra su producto, esto gracias a las sealizaciones. O tambin puede tomar
la opcin de preguntar a algn encargado, todo esto depende de algunos factores como
cuanto conoce la tienda, etc.
Una navegacin clara y bien desarrollada es una de las mejores oportunidades con las que
cuenta un sitio para dar una buena impresin.
Algo similar ocurre cuando navegamos en una pgina web. Cuando se visita un sitio web el
proceso se repite en algunos aspectos.
UNMSM - FISI
20
2015
Se tiene que volver con facilidad a la pgina de inicio, tanto desde el logotipo como
incluyendo la opcin en las utilidades.
Se debe incluir una opcin de bsqueda a no ser que el sitio sea muy pequeo.
Repasa las buenas prcticas y las convenciones a seguir en el buscador, como por
ejemplo no limitar el mbito de la bsqueda.
Se debe resaltar la opcin de men en la que te encuentras.
Es importante incluir migas de pan y seguir unas buenas prcticas, como poner en
negrita el ltimo elemento o que este no sustituya al ttulo de la pgina.
Los enlaces visitados deben cambiar de color.
Recalca la importancia del ttulo de las pginas: su ubicacin, su estilo o su texto.
El nombre de los enlaces, mens y ttulos de las pginas han de ser coherente entre
s.
Las claves de las pestaas es que haya una seleccionada por defecto y que estn
perfectamente dibujadas para que parezcan solapas de verdad: Indica que es mejor que
estn codificadas por color (un color diferente para cada seccin) siempre y cuando no se
confe en que todos los usuarios perciban esta distincin, el color es genial como clave
adicional, pero nunca debera basarse en l como clave nica.
CAPTULO 7:
UNMSM - FISI
21
2015
EL PRIMER PASO
PARA LA
RECUPERACIN ES
ADMITIR QUE HA
PERDIDO EL
CONTROL DE LA
PGINA PRINCIPAL
DISEO DE LA PAGINA PRINCIPAL
Siempre ocurre con la pgina principal, que cuando uno piensa haber cubierto todas las
metas, siempre hay algo ms por hacer.
Una lista con todas las cosas que debe tener una pgina principal:
UNMSM - FISI
22
2015
Despus habla de cmo la home va degenerando porque todos desean estar ella, todos
tienen una opinin sobre ella y, adems, se espera que atraiga a cualquier de sus
visitantes independientemente de sus intereses.
Lo nico que no puede perderse en la home es el objetivo del sitio, una descripcin
general de ello.
Tiene que responder rpida, correcta y sin ambigedad a las siguientes cuestiones:
Qu es esto
Qu tienen aqu
UNMSM - FISI
23
2015
CAPTULO 8:
EL GRANJERO Y EL
GANADERO DEBEN
SER AMIGOS
POR QU LA MAYORA DE LOS ARGUMENTOS DE
DISEO WEB ACERCA DE LA USABILIDAD SON
UNA PRDIDA DE TIEMPO Y CMO EVITARLOS
Una tendencia natural es a proyectar nuestros gustos o disgustos en los usuarios de la Web:
creemos que la mayora de los usuarios comparten los mismos gustos que nosotros.
Para resolver el conflicto a menudo se intenta encontrar qu le gusta a la mayora de los
usuarios. Por lo que equivocadamente se intenta buscar un usuario medio. El problema es
que no hay un Usuario Medio. Sera estupendo saber si los desplegables son buenos o
malos en funcin de si gustan o no a la mayora, pero no hay una respuesta simple o
correcta a esta pregunta.
No es nada productivo preguntar cosas como "Gustan a la mayora los mens
desplegables?". Lo ms acertado es preguntar Supone este desplegable con estos
elementos y estos trminos dentro de este contexto particular una buena experiencia para la
mayora de las personas que probablemente utilicen este sitio?"
Y solo hay una forma de contestar a este tipo de pregunta: probando.
UNMSM - FISI
24
2015
CAPTULO 9:
PRUEBA DE
USABILIDAD POR 10
CENTAVOS AL DA
SENCILLEZ DE LAS PRUEBAS
Las personas con frecuencia realizan pruebas para decidir qu color de cortinas es mejor,
slo para darse cuenta de que olvidaron poner ventanas en la habitacin. Por ejemplo,
podemos descubrir que no hay mucha diferencia si la barra de navegacin es horizontal o
existen mens verticales, si nadie entiende el valor del sitio.
Lamentablemente, as es como se hacen la mayora de las pruebas de usabilidad:
demasiado pequeas, demasiado tarde y por razones equivocadas.
Es bueno probar con personas que vayan a utilizar el sitio, pero ms importante es probarlo
pronto y con frecuencia. Si reclutar a los usuarios ideales para la prueba va a significar
hacer menos pruebas, hazlas con cualquiera (a no ser que necesites un perfil muy concreto
o la web sea de un campo muy especfico)
Se pueden realizar las pruebas sin invertir mucho tiempo o dinero, y sin necesidad de
muchos usuarios o de un laboratorio. Probar puede ser rpido, sencillo y barato.
A veces basta con pruebas tan sencillas como imprimir el formulario que has prototipado,
enserselo a alguien y ver si tiene sentido para l.
Por ejemplo, realizar un test con solo tres usuarios te permite generar conclusiones ms
rpidas, agilizar las modificaciones y hacer otra ronda de testing. De esta manera, al final,
ms pruebas con menos usuarios detectan ms problemas.
Tambin es mejor exponer directamente en una reunin las conclusiones al equipo que
redactar un extenso informe que al final nadie lee.
A continuacin nos da consejos y pone ejemplos concretos basados en su experiencia. Por
ejemplo recomienda proponer siempre tareas personalizadas. Es mejor "encuentra un libro
que quieras comprar que "encuentra tal libro"; o "inserta un anuncio de algo que quieras
vender" que "insertar tal anuncio". Cuando la gente realiza tareas ficticias no se implica
emocionalmente y no puede usar todo su conocimiento personal.
UNMSM - FISI
25
2015
Los problemas habituales que suelen encontrarse en los test con usuarios con:
Tras las pruebas hay que resistir el impulso de aadir explicaciones a las pginas o aadir
caractersticas que han propuesto los usuarios. Pero el mayor desafo suele ser reparar los
problemas SIN estropear las partes que funcionan, pues todo cambio tiene consecuencias.
CAPTULO 10:
LA USABILIDAD
COMO CORTESA
COMN
POR QU SU SITIO WEB DEBE SER MENSCH
Qu es lo que va minimizando la buena voluntad del usuario hasta llevarlo a
abandonar?
Ocultar la informacin que quiere: el telfono de soporte, los costes de envo, los
precios, etc.
Castigarle por no hacer las cosas a tu manera: obligarle a incluir los datos con un
determinado patrn, como espacios en el nmero de la tarjeta.
Pedirle informacin que no necesitas.
La falta de sinceridad, con mensajes como su llamada es importante para nosotros
pero te tienen 20 minutos a la espera.
UNMSM - FISI
26
2015
Los obstculos en su camino, como tener que verse una introduccin Flash a la
fuerza.
Que el sitio parezca de aficionados: desorganizado, descuidado y poco profesional.
Conoces las principales cosas que las personas quieren hacer en tu sitio y estas son
obvias y sencillas.
Les dices lo que quieren saber.
Les ahorras pasos siempre que puedes.
Te esfuerzas en dar la informacin que necesitan, precisa y de utilidad, organizada
de forma que puedan encontrarla.
Te anticipas a las preguntas probables y las respondes con franqueza.
Les proporcionas comodidades como una impresin correcta de las pginas.
Les facilitas la recuperacin ante los errores.
Te disculpas cuando es necesario si algo est causando un problema.
CAPTULO 11:
ACCESIBILIDAD,
HOJAS DE ESTILO EN
CASCADA Y USTED
SIMPLEMENTE CUANDO PIENSA QUE YA LO HA
HECHO, APARECE UN GATO CON UNA TOSTADA
UNTADA CON MANTEQUILLA ATADA A LA ESPALDA
A los vigorosos desarrolladores de 26 aos (son palabras del autor, no mas) les es difcil
creer que un gran porcentaje de la poblacin necesita ayuda para acceder a la web. Les
UNMSM - FISI
27
2015
parece exagerado. Tambin les cuenta creer que hacer las cosas ms accesibles nos
beneficia a todos.
Temen adems que supondr ms trabajo y que el resultado ser menos atractivo. El autor
tambin habla de la tendencia a pensar que el validador de accesibilidad es como un
corrector ortogrfico. Adems la mayora descuida las advertencias pues no les parecen
problemas reales. Sin embargo, las advertencias pueden hacer referencia a requisitos
determinantes pero que simplemente no son evaluables automticamente.
Da cinco consejos:
Soluciona los problemas de usabilidad que nos confunden a todos... seguro que
tambin estarn confundiendo a los usuarios con alguna discapacidad.
Lee una pgina con un lector de pantalla.
Lee un libro sobre accesibilidad web.
Usa CSS.
Revisa tu cdigo HTML para asegurar que:
o Incluye texto alternativo a las imgenes
o Usas label en los formularios
o Es accesible por teclado
o No usas javascript sin una buena razn
o No usas mapas de imagen del lado del servidor
CAPTULO 12:
AYUDA! MI JEFE
QUIERE QUE
__________
Cuando los mejores toman malas decisiones de
diseo
UNMSM - FISI
28
2015
Se presenta ciertos ejemplos de cmo explicar las razones por las cuales no debera
hacerse algo. Normalmente hay una buena intencin en la idea que proponen, entender esa
buena intencin es el mejor modo de descubrir la manera de argumentar a favor de una
solucin diferente a la propuesta.
Krug resume sus recomendaciones en una serie de mximas o factores crticos de xito, lo
nico que espera que el lector no olvide de su libro:
UNMSM - FISI
29
2015
UNMSM - FISI
30