Mas Alla de lo Visual

Diseño de
Interfaces,
Más Allá de lo Visual
Marta Sylvia del Río
mdelrio@udem.edu.mx

Elementos de la
experiencia del usuario
Métodos de IHC Elementos de la
qué puedo hacer Experiencia del Usuario
concreto consolidación
Diseño de la Comunicación
Diseño Visual
Tipografía

Diseño de Diseño de
Wireframes
la Interfaz Navegación
ThinkAloud
Evaluación Heurística Diseño de Información

Arquitectura tiempo
Storyboards Diseño de
de
Paseo Cognitivo Interacción
Información

http://julian.missig.org/
Diseño Contextual Especifica- Requeri-
ciones mientos de
Diagramas de Afinidad Funcionales Contenido

Análisis Contextual Necesidades del Usuario
Entrevistas
Focus Setting Objetivos del Sitio
abstracto conceptualización

Agenda

150 Los conceptos básicos del diseño y su aplicación en la web

120 30 Color y accesibilidad para el diseño de un sitio web
Mental Notes: uso de psicología para motivación del usuario

30 Innovación en las interfaces

60 Jerarquización y diseño basado en el "call to-action".

90 Ejercicios prácticos de solución de problemas de diseño web

El espacio es un recurso limitado…
que se acaba rápidamente

Homepage usability: 50 websites deconstructed

http://www.andrescarnederes.com/dc/index.html recuperado el 27 de mayo 2012

http://www.gelattina.com/ recuperado el 7 de julio 2010

http://www.target.com/ recuperado el 27 de mayo 2012

Ejercicio
Revisar sitios web de
los asistentes y
determinar qué
espacios se asignan a
cada función.

The Non-Designer’s Design Book
By Robin Williams
Published Sept7, 2003 by Peachpit Press

Copyright 2004 Book
Dimensions: 9.8 x 6.9 x 0.4 inches ISBN-10: 0321193857
Pages: 192 ISBN-13: 978-0321193858
Edition: 2nd

Principios del Diseño

■ Proximidad
■ Alineación
■ Repetición
■ Contraste
■ Tipografía

Ralph Roister Doister (717) 555-1212

Mermaid’s Tavern

916 Bread Street London, NM

Mermaid’s Tavern
Ralph Roister Doister

916 Bread Street
London, NM
(717) 555-1212

http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012

modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012

…y podríamos continuar

http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012

http://www.gandhi.com.mx/ recuperado el 12 de marzo 2011

Ralph Roister Doister (717) 555-1212

Mermaid’s Tavern

916 Bread Street London, NM

Mermaid’s Tavern Mermaid’s Tavern
Ralph Roister Doister Ralph Roister Doister

916 Bread Street 916 Bread Street
London, NM London, NM
(717) 555-1212 (717) 555-1212

ttp://www.banorte.com recuperado el 12 de marzo 2011

http://www.pinturasosel.com/ recuperado el 16 de abril 2010

modificado de http://www.pinturasosel.com/ recuperado el 16 de abril 2010

Grid 960

http://sonspring.com/journal/960-grid-system recuperado el 18 de julio 2012

Grid 960

 Provee una retícula de las dimensiones
más comunes, basada en 960 pixeles
 Hay dos variantes: 12 y 16 columnas

http://960.gs/ recuperado el 17 de junio 2012

http://cssgrid.net/ recuperado el 17 de junio 2012

Mermaid’s Tavern Mermaid’s Tavern
Ralph Roister Doister Ralph Roister Doister

916 Bread Street 916 Bread Street
London, NM London, NM
(717) 555-1212 (717) 555-1212


http://www.imagen.com.mx/ recuperado el 7 de noviembre

http://www.googoo.com/ recuperado el 6 de octubre 2010

David Rivers on Visual design of Web Apps 2:14
http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!

https://www.amway.com.mx/Store/Catalogue.aspx?show
=PrdsList&IC=1&C=FB&line=F&NavM=N

http://www.ocregister.com/articles/parking-262014-
brea-application.html

Cancelar

Sistema de Gestión de Comercio Exterior, recuperado el 13 de noviembre 2010

Legibilidad
Grado de claridad con la cual un elemento es visualizado
(Grosor, anchura, forma, cuerpo, proporción, relaciones de la
forma y contrapunzón)

Lecturabilidad
Facilidad con la cual un texto es leído (Cuerpo de la fuente,
longitud de línea y el interlineado)

Legibilidad

 Taladraron los caninos para remover la caries
 La tierra es de quien la trabaja
 Mañana nos vamos de vacaciones
 Los molinos de viento giran.
 La naturaleza recobra su dominio.
 Mañana nos vamos de picnic
 La actitud ante todo

Tipografías para web
Maneja tipografías soportadas e instaladas por la mayoría de los sistemas
operativos y evita que cambien de un monitor a otro.

Andale Mono Arial Comic Sans MS Courier New Verdana

Georgia Impact Times New Roman Trebuchet MS Webdings

Material cortesía de Ing. José Alfonso García Grajeda

Interletrado
Dependiendo de la tipografía utilizada, el interletrado puede variar. Se puede
medir mediante “ems” que representan los puntos ocupados por una letra en
el tamaño del texto.

M M 1em (12pt) = 12pt
M
M


Ancho de columna
Lorem ipsum dolor sit amet
"Lorem ipsum dolor sit amet, consectetur quia voluptas sit aspernatur aut odit aut
adipisicing elit, sed do eiusmod tempor fugit, sed quia consequuntur magni dolores
incididunt ut labore et dolore magna aliqua. eos qui ratione voluptatem sequi nesciunt.
Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem
exercitation ullamco laboris nisi ut aliquip ex ipsum quia dolor sit amet, consectetur,
ea commodo consequat. Duis aute irure adipisci velit, sed quia non numquam eius
dolor in reprehenderit in voluptate velit esse modi tempora incidunt ut labore et dolore
cillum dolore eu fugiat nulla pariatur. magnam aliquam quaerat voluptatem. Ut
Excepteur sint occaecat cupidatat non enim ad minima veniam, quis nostrum
proident, sunt in culpa qui officia deserunt exercitationem ullam corporis suscipit
mollit anim id est laborum.“ laboriosam, nisi ut aliquid ex ea commodi
"Sed ut perspiciatis unde omnis iste natus consequatur? Quis autem vel eum iure
error sit voluptatem accusantium reprehenderit qui in ea voluptate velit esse
doloremque laudantium, totam rem aperiam, quam nihil molestiae consequatur, vel illum
eaque ipsa quae ab illo inventore veritatis et qui dolorem eum fugiat quo voluptas nulla
quasi architecto beatae vitae dicta sunt pariatur?"
explicabo. Nemo enim ipsam voluptatem

Manejo de puntuación
Listas. No colocar espacio en viñetas o números.


Manejo de puntuación
Comillas. Deben estar fuera del margen del texto.


Peso y tamaño tipográfico
Definir un tamaño específico para todos los títulos, subtítulos, abstracts,
contenidos y otros textos del sitio. Buscar consistencia en el uso de dichos
tamaños a través de todas las páginas.

TYPECHART
(http://www.typechart.com)


Familias Tipográficas

Fuentes de Microsft Office 2010

http://www.udem.edu.mx/home recuperado el 11 de mayo 2012

http://www.babyandkidscenter.com/acerca.html
recuperado el 7 de diciembre 2010

Ejercicio
Utilizando un grid 960,
rediseña la mesa de
regalos de Liverpool,
cuidando todos los
principios de diseño
estudiados hasta el
momento.

Diseño Responsivo

http://www.threefeetdesign.es/?p=451 recuperado el 17 de junio 2012

Diseño Web Responsivo
 Es una combinación de retículas fluidas e imágenes que modifican su acomodo
en base al tamaño del dispositivo en el que se despliegan. Usa detección de
dispositivos (en el cliente) para distinguir el dispositivo del que se trata y
adaptarse.

 Diseño web responsivo se utiliza cuando se quiere programar un solo sitio

 <link rel="stylesheet" type="text/css" media="screen and (max-device-width:
480px)" href="shetland.css" />
 La query contiene dos componentes:
 un media type (screen), y
 la consulta entre paréntesis, conteniendo una característica a inspeccionar (max-device-
width) seguida por el valor al que apuntamos (480px).
 En otras palabras, le estamos preguntando al dispositivo si su resolución horizontal
(max-device-width) es igual o menor que 480px. Si la pregunta pasa -en otras
palabras, si estamos viendo nuestro trabajo en un dispositivo con una pantalla
pequeña como el iPhone- entonces el dispositivo cargará shetland.css. De lo
contrario, el link es completamente ignorado.

http://www.lukew.com/ff/entry.asp?1509 recuperado el 17 de junio 2012

http://themetrust.com/demos/reveal/ recuperado el 17 de junio 2012

http://foodsense.is/ recuperado el 17 de junio 2012

http://www.alistapart.com/articles/responsive-images-how-they-
almost-worked-and-what-we-need/ recuperado el 18 de junio 2012

“Katie Holmes sí estuvo en el desfile.”

http://www.popsugar.com/Can-You-Spot-Celebrity-43629 recuperado el 17 de junio 2012

http://www.bobbyflay.com/ recuperado el 19 de junio 2012

http://www.lanacional.net/
recuperado el 13 de mayo 2012

http://www.uncrate.com/ recuperado el 29 de agosto de 2010

http://www.ties.com/ recuperado el 29 de agosto 2010

http://www.ties.com/ recuperado
el 29 de agosto 2010

http://www.harrywinston.com/ recuperado el 29 de agosto 2010

ttp://www.harrywinston.com/ recuperado el 29 de agosto 2010

http://www.zappos.com/womens-pumps recuperado el 15 de septiembre 2010

http://www.zales.com/ recuperado
el 17 de noviembre 2010

http://www.louisvuitton.com recuperado el 17 de noviembre 2010

http://www.cufflinks.com recuperado el 17 de noviembre 2010

http://www.cufflinks.com
recuperado el 17 de noviembre 2010

http://www.victorinox.com/ recuperado el 17 de junio de 2012

La Gente
Distrae la
Atención del
Producto

http://www.youtube.com/watch?v=lo_a2cfBUGc recuperado el 19 de julio de 2012

Anuncio de SunSilk antes del estudio. Anuncio de SunSilk después del estudio.
BunnyFoot study. BunnyFoot study.

Mapa de calor de Eye-tracking de un bebé mirando directamente
hacia nosotros. UsableWorld study.

Ahora el bebé mirando hacia el contenido. UsableWorld study.

Uso de Fotografías
Jakob Nielsen's Alertbox, November 1, 2010:
Photos as Web Content

Jakob Nielsen's Alertbox, November 1, 2010: Photos as Web Content

Fotos de personas


Si son personas reales, se revisan
Pasaron más tiempo revisando las
fotos que el contenido

 Si sienten que son fotos genéricas,
se ignoran


Fotos en Miniatura
(thumbnails)


Fotos Grandes de productos

 Cuando son solicitadas, se revisan

Lo ideal es presentar una imagen
de al menos el doble de tamaño


Sitios personales

Los usuarios buscan a la persona detrás del
sitio. Revisan fotos, textos, todo.

Revisen los tips de usabilidad para blogs.


Conclusiones

“ Pon atención a la imágenes que
contienen información y que muestran
contenido relevante para la tarea que se
realiza. Los usuarios ignoran las
imágenes decorativas.
Jakob Nielsen ”

Ejercicio
Revisar sitios de los
participantes,
analizando la selección
de imágenes y qué
aportan como
información.
Justificar qué imágenes
debieran manejarse en
caso de no ser las más
adecuadas.

GIF - Graphics Interchange Format

El formato más utilizado para iconografía / clip-art en la web

Ventajas Desventajas
 Poco peso = descarga más rápida  Soportan solamente 256 colores
 Compresión Lossless = mayor  No recomendados para fotografías
compresión y menor pérdida de calidad  No usar imágenes con muchos colores
 Soporta el uso de transparencias
 Soporta animación


GIF – 32 Bits
Imagen 1024 x 768

204 Kb


GIF – 64 Bits
Imagen 1024 x 768

283 Kb


GIF – 128 Bits
Imagen 1024 x 768

361 Kb


GIF – 256 Bits
Imagen 1024 x 768

459 Kb


Usos del formato GIF


JPG – Joint Photographic Experts Group
El formato más utilizado para fotografía en la web

 Poco peso = descarga más rápida  No soporta transparencias
 Soporta imágenes true-colour, hasta  No soporta animación
16 millones de colores.  Compresión Lossy = A mayor
compresión, mayor pérdida de calidad


JPG – Low 0%
Imagen 690 x 768

38.2 Kb

JPG – Medium 50%
Imagen 690 x 768

108 Kb

JPG – High 100%
Imagen 690 x 768

294 Kb

Usos del formato JPG


PNG – Portable Network Graphics
El formato diseñado como alternativa de GIF (con mayor capacidad)

 Soporta 8-Bit (GIF) y 64-Bit (JPG)  No soporta animación
 Soporta imágenes true-colour, hasta 16  En PNG-8 es mejor que GIF
millones de colores.  En PNG-24 no es mejor que JPG
 Soporta transarencias (mejor que GIF)
 Compresión LossLess


PNG – 8 Bit
Imagen 1024 x 768

108 Kb


PNG – 64 Bit
Imagen 1024 x 768

894 Kb


Usos del formato PNG


Transparencia PNG vs GIF


Resolución y peso PNG vs JPG

PNG - 64 Bit JPG – Medium 50%
Imagen 1024 x 768 Imagen 1024 x 768
894 Kb 152 Kb


¿Cuándo usar cada formato?
GIF JPG PNG-8 PNG-24
Mejor para clipart y Mejor para Mejor para clipart y Mejor para
gráficos con pocos fotografías e gráficos con pocos fotografías e
colores. imágenes con colores. Uso de imágenes con
muchos colores y transparencias mejor muchos colores y
detalle. Mejor peso que GIF. detalle. Peso no
para web adecuado para web
en imágenes grandes.
Hasta 256 colores Hasta 16 millones de Hasta 256 colores Hasta 16 millones de
colores colores
Imágenes LossLess Imágenes Lossy, que Imágenes LossLess Imágenes LossLess
con poco peso contienen menos con poco peso con poco peso que no
información que la pierde información
imagen original de la imagen
(resolución)
Permite animación No permite No permite No permite
animación animación animación
Permite No transparencia Permite Permite
transparencia transparencia transparencia

Hexadecimal para Web
Sistema utiliza la combinación de tres códigos de dos dígitos para
expresar las diferentes intensidades de los colores primarios RGB

NEGRO #000000 00 00 00
BLANCO #FFFFFF R G B

ROJO #FF0000 AMARILLO #FFFF00
VERDE #00FF00 CYAN #00FFFF
AZUL #0000FF MAGENTA #FF00FF


Colores cálidos y fríos

Cálidos
Pasión
Felicidad
Entusiasmo
Energía

Fríos
Calma
Profesionalismo


¿Cuándo utilizar colores cálidos y cuándo fríos?

http://www.udem.edu.mx/ http://www.extension.harvard.edu/


¿Cuándo utilizar colores cálidos y cuándo fríos?

http://www.toysrus.com/ http://www.tengoevento.com/


entre
colores
Relaciones

http://gdbasics.com/index.php?s=color recuperado el 19 de agosto 2011

Utilización de Colores

http://www.colorsontheweb.com/colorwizard.asp recuperado el 18 de junio 2012

El Contraste

La diferencia relativa en
intensidad entre un punto de
una imagen y sus alrededores

Brillo = Brillo

CONTRASTE NULO


Selección de paletas de colores
¿Cómo selecciono la paleta de color adecuada para un sitio?

http://colorschemedesigner.com/

http://colorsontheweb.com/colorwizard.asp#wizard


http://www.accesskeys.org/tools/color-contrast.html recuperado el 19 de junio 2012

http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf recuperado el 20 de junio 2012

http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/

http://iordanov.info/projecs_mentormate_MigraineMate.html

http://www.soft-gadgets.com/telenav-gps- http://symbianism.blogspot.com/2009/08/free-mobile-maps-
navigator-for-blackberry-storm/ and-navigation-metro.html

Planear
¿Qué es el diseño de información?

“El diseño de información es un campo y un
enfoque que intenta diseñar comunicaciones
claras e inteligibles mediante el cuidado de la
estructura, el contexto y la presentación de
los datos y la información”.
Nathan Shedroff (2008)

vs
http://www.alistapart.com/articles/zebrastripingdoesithelp/

Medida de supervivencia en un avión Mapa del metro de Londres Estudio de Periódicos en Línea Mexicanos

http://www.amazon.com/Diamond-Engagement-Rings-Loose-Diamonds recuperado el 7 de julio 2010

http://www.smartmoney.com/map-of-the-market/ el 23 de agosto 2010

http://www.panic.com/goods/ recuperado el 23 de agosto 2010

http://www.ted.com recuperado el 23 de agosto 2010

http://www.tenbyten.org/ recuperado el 22 de agosto 2010

http://www.lukew.com/ff/entry.asp?1007 recuperado el 20 de junio 2012

Design Decision: A New Signup Form

Mental Notes
Ejemplos Prácticos

Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders

La Historia de iLike
Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado.

 Stephen Anderson explica su experiencia con el sitio
http://www.ilike.com, un sitio de música
 El registro fue amigable, pero no fuera de lo común
 Lo que llamó la atención del autor, fue cómo solicitaban
cuáles son los intérpretes favoritos; en lugar de un cuadro de
texto donde uno escribe los nombres de las bandas,
mostraban una especie de juego de memorama (ver imagen
en la siguiente diapositiva)


Grooveshark
shazzam



¿Por qué funciona?
 Feedback Loops Conforme el usuario seleccionaba artistas, aparecían
nuevas opciones. Aunque el sitio promete que entre más información
mejor será la experiencia, no especifica si será en esa sesión o será en la
siguiente visita.
 Curiosidad Con esta misma idea, el usuario tenía curiosidad por saber
si la lista iba adecuándose a sus estilos preferidos.
 Pattern Recognition Nuestras mentes buscan patrones. El autor
buscaba qué tenían en común esos artistas para que hubieran aparecido
en esa página. ¿Había cierto tipo de artistas?



 Visual Imagery Resulta mucho mejor ver al artista que leer su nombre.
Y el área de clic es mucho mayor.
 Recognition over Recall Es mucho mejor reconocer a los artistas
que me gustan que tratar de recordarlos. El usuario dará mucho más
información cuando no tiene que hacer el esfuerzo

 Después del registro, mientras el autor revisaba su correo, le
llegó un mensaje con la confirmación del registro y una
invitación a participar en un reto. Esto despertó su
curiosidad y dio clic.



 El iLike Challenge es un juego, muy adictivo, que consiste en
que tocan una muestra de 30 segundos de una canción. Se
debe reconocer al autor de la canción o el título de la misma.
 Te dan puntos si contestas correctamente. Si contestas en
los primeros segundos, recibes 10 puntos. Si te toma 5-6
segundos contestar, recibes 9 puntos y así sucesivamente. Si
te equivocas, no recibes puntos.
 Lo más adictivo es ver tu score en una barra del lado
derecho. Observas tu ranking, puntos acumulados, puntos
para llegar al siguiente rank, preguntas contestadas,
porcentaje de respuestas correctas y el tiempo promedio de
respuesta.


 En el sitio de iLike utilizan muchas de las tarjetas que
propone Stephen Anderson.
 Adicionalmente a las tarjetas que ya se explicó que utilizan
en este sitio, identifica al menos 3 adicionales que no se
hayan mencionado.

 Observen además que el sitio siempre facilita la
mercadotecnia viral “invita a un amigo a jugar”.


Le echamos más
ganas cuando
nos reconocen el
esfuerzo.

¿Qué
reconocimientos
hay para
fomentar el
comportamiento
deseado?

http://apps.facebook.com/onthefarm/?ref=ts obtenido el 6 de octubre de 2011
Ejemplo de Eduardo Acevedo

Diseños
estéticamente
agradables
nos parecen
más fáciles de
usar.

Generalmente
lo son.

El autor del libro dice que dejó de
ir a la gasolinera de la bomba
descuidada, aunque está más
cerca de su casa, porque
desconfía de dar sus datos de
tarjeta a un negocio con tan poco
mantenimiento. La estética visual
afecta al negocio.


En caso de duda,
nos enfocamos a
un dato,
generalmente el
precio o un valor
numérico.

¿Cuáles
proporcionas al
usuario?

Mostrando la oferta una
porción grande de la página,
se llama la atención del
usuario, cambiando de página
permanece hasta que el
usuario elija del menú
izquierdo.
http://www.gap.com/browse/subDivision.do?cid=5646 recuperado el 10 de octubre, 2011
Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar

Tenemos la página de información de IBM donde
se quiere convencer al cliente que la empresa es
buena. Dan estadísticas (anclaje) que convencen
al usuario de lo grande que IBM es como empresa

http://www.ibm.com/ibm/us/en/?lnk=ftai recuperado el 4 de octubre del 2011
Ejemplo de Héctor Cano

¿Qué mejor forma de
convencernos que
haciendo un gran
descuento en sus
http://www.amazon.com/s/ref=nb_sb_ss_i_0_7?field-keywords=inheritance&url=search- productos?
alias%3Daps&x=0&y=0&sprefix=Inherit recuperado el 4 de octubre del 2011
Ejemplo de Hector Cano

El anclaje esta vez se
trata de las excelentes
propiedades de los
productos.

http://www.nokia.com.mx/productos/todos-los-modelos/nokia-
e5/caracteristicas#communications recuperado el 4 de octubre del 2011

Preferimos
hacer lo que la
autoridad o el
experto
sugiera.

JPMORGAN (empresa de consultoría) habla de como es un componente de DOW
JONES INDUSTRIAL AVERAGE. Eso le da a entender al usuario de que JPMORGAN
es una empresa con un valor alto de importancia.

http://careers.jpmorganchase.com/career/jpmc/careers/org recuperado el 4 de octubre del 2011

Saliéndonos de las
computadoras al
mundo real, en un
simple vaso puedes
avisar de la calidad
que tiene tu
producto. CARL’S JR
usa la opinión de
ORANGE COUNTY
para informar al
consumidor que
una empresa
importante avala
que CARL’S JR tiene
buenas
hamburguesas

http://farm2.static.flickr.com/1286/953808043_865d015288_o.jpg recuperado el 4 de octubre del 2011

Como último ejemplo, tenemos la
página de promoción de el Ipad y la
opinión de un experto en el área.

http://www.apple.com/mx/ipad/business/ipad-at-work/presentations.html recuperado el 4 de octubre del 2011

A la gente le
gusta
coleccionar.

¿Hay oportunidad
de coleccionar
algo en tu sitio?
Es mejor cuando
es algo por
mérito.

http://www.foursquare.com.mx/ recuperado el 4 octubre 2011
Ejemplo de Álvaro Contreras

Deseamos
actuar
conforme a
nuestras
creencias.
Relaciónalo
con tu sitio.

El hecho de preguntarle
cuándo las recogerá, hace
que el usuario lo medite y
lo incluya en su itinerario,
por lo que se incrementa
el número de personas
que recogen lo que
separaron.


Puedes ofrecer
pequeños
trozos de
información
que harán que
la gente quiera
saber más.

El carro más vendido de
Hot Wheels es el
“Mystery Car”

http://www.worldoftoycars.com/product/2009-hot-wheels-mystery-car-sealed-you-pick recuperado el 24 de octubre 2011

http://www.groupon.com.mx/deals/monterrey/165-en-vez-de-550-por-un-descuento-
sorpresa-te-atreves-o-te-lo-pierdes/1247317?nlp=&CID=MX_CRM_1_0_0_297&a=1510
recuperado el 24 de octubre 2011

http://www.groupon.com.mx/deals/monterrey/165-en-
vez-de-550-por-un-descuento-sorpresa-te-atreves-o-te-
lo-
pierdes/1247317?nlp=&CID=MX_CRM_1_0_0_297&a=1510

Respondemos
favorablemente
a pequeñas
sorpresas
agradables.

http://www.walkernews.net/2008/01/13/collection-of- http://blogvecindad.com/en-el-logo-de-google-40-
google-holiday-logo/ recuperado el 24 de octubre 2011 aniversario-de-plaza-sesamo recuperado el 24 de
octubre 2011

http://infopiper.com/2011/20-july-google-doodle-of-gregor- http://planetaip.blogspot.com/2009/08/goo
mendel-189th-birthday-google-logo-on-20-july-2011 gle-logo-michael-jackson.html recuperado el
recuperado el 24 de octubre 2011 24 de octubre 2011

http://www.walkernews.net/2008/01/13/collection-of- http://www.walkernews.net/2008/01/13/collection-of-
google-holiday-logo/ recuperado el 24 de octubre 2011 google-holiday-logo/ recuperado el 24 de octubre 2011

http://kennynguyen.us/2010/11/26/death-match-bruce-lee-and-iron-man-mailchimp/

Una pequeña
sorpresa musical

http://www.yahoo.com recuperado el 5 de octubre, 2011
Ejemplo de Erick Marroquín

En cualquier video de YouTube, dejar
presionado izquierda 2 segundos y luego
arriba permite jugar Snake mientras corre el
video.

http://www.youtube.com/watch?v=hWc0Fd2AS3s / recuperado el 5 de octubre, 2011

Google publicó un video de
“Don’t Stop me Now” de
Freddy Mercury el día que
cumpliera 65 años, y el de
cumpleaños 96 de Les Paul.

http://www.youtube.com/watch?v=VMco4WF1914

http://www.google.com recuperados el 9 de junio de 2011 y el 5 de septiembre 2011

La forma en la
que mostramos
o redactamos
la información
afecta
nuestras
decisiones.

En una prueba A/B que se
hizo, el “Download Now –
Free” tuvo 3.44% más
conversiones que
conversiones “Try Firefox 3″,
esto es, 10.07% versus 9.73%.

http://www.90percentofeverything.com/2008/11/22/ab-test-results-for-the-firefox-download-button-wording
Recuperado el 27 de octubre del 2011

Versiones
“beta” eran muy
valoradas hace
tiempo. Pide
que se “ganen”
el acceso a tu
sitio.

Para jugar el
beta primero
debes haber
reservado la
versión de
descarga desde
antes.

http://www.battlefield.com/es/battlefield3/1/beta recuperado el 5 de octubre 2011
Ejemplo de Azael Alejandro muñoz

Si hay la opción
de actuar o no
actuar, el poner
límite de tiempo
para participar
nos alienta.

http://www.ebay.com recuperado el 10 de octubre, 2011

http://www.priceline.com recuperado el 10 de octubre, 2011

http://www.por1peso.mx/index.html recuperado el 10 de octubre, 2011

La fecha de terminación de la
oferta persuade al usuario en
comprarlo pronto.

http://www.aquahotel.com/es/ofertas/paselo-de-miedo recuperado el 10 de octubre, 2011

Tiempo limitado de oferta causa
al usuario interés por conseguirlo.

http://www.rumbo.es/ recuperado el 10 de octubre, 2011

Podemos ver los meses que durará la
promoción con la información sobre
destinos y el costo

http://www.ryanair.com/en recuperado el 10 de octubre 2011

Odiamos perder
algo que ya
conseguimos.

Permite que el
usuario cree
contenido
personal antes
de solicitarle
sus datos.

Recuperado el 5 de octubre del 2011 desde http://www.kongregate.com/games/ArmorGames/upgrade-complete
Ejemplo de Adolfo Orduño

Recuperado el 5 de octubre del 2011 desde http://www.winpalace-ads.com/slots/25free/CASINOGUIDE25/13373/.aspx

Recuperado el 5 de octubre del 2011 desde https://www.facebook.com/deactivate.php

Recuperado el 27 de octubre del 2011 desde http://www.prorityclub.com

Para probar este software,
haces una película. Al
terminarla, te pregunta si
quieres registrarte para
conservarla/compartirla. Si
no lo haces, pierdes la
película.

Recuperado el 5 de octubre del 2011 desde http://www.alistapart.com/articles/signupforms

Aprendemos
imitando a
otros.

¿Qué ejemplos
tienes en el
sitio que
demuestren
interacciones
positivas?

Ikea muestra sus “showrooms” en Facebook, lo
que hace que la gente vea el producto en el
contexto e incrementa las ganas de comprarlo.

http://www.apartmenttherapy.com/ny/look/ikea-brooklyn-053298 recuperado el 25 de octubre 2011

Que otros cambien su perfil invita a que tú los imites.

http://www.facebook,com recuperado el 25 de octubre 2011

http://www.facebook.com recuperado el 25 de octubre 2011

http://www.amazon.com recuperado el 25 de octubre 2011

Las sugestiones
visuales o
verbales
influyen en
cómo
respondemos.

Al entrar en la página, el fondo siendo una imagen de un bosque, así
como los recuadros con imágenes ilustradas de árboles, atiborran al
usuario diciéndole desde primera instancia de qué trata la página.

http://www.milliontrees.ca/ recuperado el 10 de octubre, 2011

La palabra pastel escrita tantas veces sobre una misma página,
así como la misma imagen de un pastel, prepara el interés del
usuario.

http://www.cakesweetcake.co.uk/ recuperado el 10 de octubre, 2011

Es más fácil
reconocer que
recordar.

Nos preocupa lo
que la gente
piense de
nosotros.

¿Hay acciones que
tengan
repercusión en
nuestro status en
el sitio (visible a
otros)?

Gameground

http://gameground.com recuperado el 5 de octubre del 2011

Video “My mom’s on Facebook” que
muestra que uno cuida más lo que
pone cuando hay otras personas
que lo pueden observar.

http://www.youtube.com recuperado el 10 de octubre, 2011
Ejemplo de Adrián Rivera

Le asociamos
mayor valor a
algo con poca
disponibilidad.

La pagina menciona,
utilizando un rojo
llamativo, que el producto
se esta vendiendo rápido.
Esto crea la sensación de
que debes comprarlo
pronto antes de que se
acabe.

http://www.solestruck.com/jeffrey-campbell-lita recuperado el 9 octubre 2011
Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez

El paquete más completo
se muestra agotado pero
te ofrece una segunda
opción para que te decidas
por esa.

http://www.universalorlando.com/Landing/Harry-Potter-November-Celebration.aspx recuperado el 9 octubre 2011

La pagina
menciona que solo
tienen pocas
unidades del
producto en
almacén, lo que te
despierta
sensación de
quererlo comprar
de inmediato antes
de que se acabe.

http://www.freepeople.com/accesories-hats-and-hair/jenoah-floppy-brim-hat/ recuperado el 9 octubre 2011

Cuando recordar
un elemento es
primordial,
colócalo al inicio
o al final.

Es útil cuando
hay muchos
elementos.

Recuperado el 5 de octubre del 2011 desde http://www.amazon.com/gp/product/B002I096AA/ref=s9_simh_gw_p63_d0_g63_i4?pf_rd_m=ATVPDKIKX0DER
&pf_rd_s=center-2&pf_rd_r=0PF5DFZEE3EWFJH2ZHD3&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846

Recuperado el 5 de octubre del 2011 desde http://www.walmart.com/ip/Ematic-6ft-HDMI-Cable-With-Shielding/11331701

Recuperado el 5 de Octube del 2011 desde http://katnels.articlesbase.com/operating-systems-articles/the-benefits-of-mac-567797.html

En facebook, con la opción
de Titulares puedes ver las
noticias más destacadas de
tus amigos, destacando la
más reciente y la más
antigua de ese día.

Ejemplo de Alejandro Hernández, Rogelio Rodríguez y Lucia Elizondo

Entre más
cerca estemos
de completar
una colección,
más pagamos
por las piezas
que faltan.

http://www.arm.co.uk/blog/how-to-get-a-job-on-linkedin.aspx recuperado el 24 de octubre 2011

En Mafia Wars, juego
de Facebook, te
permiten observar
cuántos elementos te
faltan de la colección.
Los usuarios tratan de
obtenerlos jugando
diferentes misiones.

http://www.bligblogging.com/mafia-wars-las-vegas-collections recuperado el 24 de octubre 2011

En situaciones
poco
familiares,
imitamos a
quienes nos
rodean.

Recuperado el 5 de octubre del 2011 desde http://www.amazon.com/PlayStation-Portable-3000-System-Sony-
PSP/dp/B001KMRN0M/ref=sr_1_7?ie=UTF8&qid=1317863029&sr=8-7

Recuperado el 5 de octubre del 2011 desde http://www.funnyordie.com/browse/pictures_and_words/all/all/most_viewed/this_month?rel=header

Recuperado el 5 de octubre del 2011 desde http://www.guitarcenter.com/Williams-Williams-Overture-88-Key-Digital-Piano-104651310-
i1386664.gc Ejemplo de Adolfo Orduño

Siempre
medimos cómo
nuestras
actuaciones
mejoran o
empeoran
nuestro status.

Ejercicio
Crea una estrategia
para la mesa de regalos
en base a la tarjeta que
te hayan asignado.

10 técnicas para un
‘Call To Action’
efectivo
Traducción y modificación del
Post del blog Design
de Paul Boag
del jueves 22 de enero 2009

http://www.elpalaciodehierro.com.mx/ recuperado el 13 de noviembre 2009

Un call-to-action debe asegurar…

 el enfoque en tu sitio web
 una forma de medir el éxito de tu website
 que dirija a tus usuarios

Traducción y modificación del Post del blog Design
de Paul Boag del jueves 22 de enero 2009

http://www.google.com recuperado el 31 de agosto 2010

http://www.vivaaerobus.com/ recuperado el 8 de mayo 2010

http://www.ryanair.com/ recuperado el 8 de mayo 2010

1. Sienta las bases
 Para que un usuario complete un call-to-action, debe entender la
necesidad de hacerlo.
 Los informerciales hacen esto muy bien. Antes de solicitar que la gente
llame, identifican un problema y presentan un producto que resuelva el
problema.

http://www.youtube.com/watch?v=Vd5zrMkxU-I&feature=player_embedded#!

 También es necesario comunicar los beneficios de actuar. ¿Qué
obtendrán los usuarios al completar el call-to-action?
 Por ejemplo, el VoIP de Skype, inmediatamente después del call-to-
action (un botón de descarga) tienen el siguiente texto:
“Make calls from your computer — free to other people on Skype and cheap to phones
and mobiles around the world.”


2. Ofrece un extra

 A veces habrá que motivar a los usuarios a completar un call-to-action.

 Los incentivos pueden incluir descuentos, entrar a una rifa o un regalo
gratis.
 Esto es lo que hizo Barack Obama en su sitio para recaudar fondos. Si
donabas $30 o más, te regalaban una playera.


3. Ten un número reducido de
acciones distintivas
 Es importante ser preciso en los calls-to-action. Si hay demasiados, el
usuario se siente abrumado.
 Estudios de mercadotecnia muestran que si al comprador se le dan
demasiadas opciones, es más probable que no compre nada.
 Limita el número de opciones y reduce el esfuerzo mental. Guía en forma
efectiva al usuario a lo largo de todo el sitio.

 Lo importante no es tanto el número de acciones ino lo distintivo de las
mismas. En pbwiki.com tienen 3 calls-to-action:
 Create a wiki
 View Demo
 Buy now
 Aunque pudiera ser un número aceptable, ¿qué diferencia hay entre
‘create a wiki’ y ‘buy now’. ¿Qué debo de hacer primero, crearlo o
comprarlo? Es confuso. Hubiera sido mejor presentar la opción de
comprar mucho después de que el usuario haya construido un wiki, y ya
esté enganchado. Traducción y modificación del Post del blog Design

4. Utiliza lenguaje imperativo
y urgente
 Un call-to-action debería decir a los usuarios de forma clara lo que se
espera de ellos. Debe incluir verbos de acción tales como:
 Llama
 Compra
 Regístrate
 Subscríbete
 Dona
 Todas ellas motivan al usuario a realizar una acción.
 Para crear un sentido de urgencia y una necesidad de actuar, estas
palabras pueden acompañarse por frases tales como:
 La oferta expira el 31 de marzo
 Por tiempo limitado
 Ordena ahora y recibe un regalo gratis
 Carsonified usa este enfoque al vender sus tutoriales. Para crear un
sentido de urgencia, ofrecen descuentos a los que se registren antes.

Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009

Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009

5. Encuenta la posición
correcta

 Otro factor importante es la posición dentro de la página de tu call-for-
action. Idelamnete debe colocarse en la parte alta de la página y en la
columna central.

 picsengine.com coloca su see in action centrado, sobre la imagen.


6. Usa espacio negativo
 No es solo la posición deI call-to-action lo que importa. También se trata
del espacio alrededor de ella. Entre más espacio haya, más llamará la
atención. Si saturas el espacio alrededor de tu call-to-action se perderá
entre tanta cosa.

 PlanHQ hace un muy buen trabajo al enfocar a los usuarios a su call-to-
action.


7. Usa un color alternativo

 El color es una forma efectiva de llamar la atención a un elemento,
especialmente si el resto del sitio tiene una paleta limitada.
 Things hace esto de forma experta. Mientras que el resto del sitio es
predominantemente azul y gris, sus call-to-action los resaltan en naranja.
El contraste extremo no deja duda sobre cuál es la siguiente cosa que
debes hacer.
 Nunca dependas únicamente del color, porque los usuarios daltónicos no
verán el contraste.


http://www.amway.com.mx/ recuperado el 20 de junio 2012

8. Házlo grande

 Existe una regla en el diseño sobre no sobre-enfatizar. Ya se estableció
que el color, la posición y el espacio negativo son tan importantes como
el tamaño.
 Sin embargo, el tamaño juega un papel importante. Entre más grande el
call-to-action, mayor oportunidad de que la noten.
 Mozilla tomó esta decisión en el homepage de Firefox donde su liga de
descarga domina la página.


9. Ten un call-to-action en
cada página

 Un call-to-action no debe limitarse al homepage. Cada página del sitio
debe tener un call-to-action que guíe al usuario. Si el usuario llega a un
callejón sin salida, abandonarán el sitio sin que logres tu objetivo.
 Tu call-to-action no necesita ser igual en cada página. Puedes ir
presentando pequeñas acciones que guíen al usuario a tu objetivo
(siempre contando el número de clics).

 37 Signals entiende la importancia de tener un call-to-action en cada
página. Al final de cada página del sitio Basecamp despliegan ligas a sus
páginas de tour y registro.

10. Piensa en el Proceso
Completo

 Finalmente, considera que sucedería si el usuario no responde a tu call-
to-action. El resto del proceso debe pensarse con el mismo cuidado.

 Una advertencia: si requieres que los usuarios proporcionen sus datos
personales, resiste la tentación de pedir información innecesaria.
 Los mercadotecnistas quieren tener datos demográficos. Aunque tiene
su valor, pedir mucha información puede ahuyentar al usuario.
 Wordpress.com es un excelente ejemplo de cómo minimizar la cantidad
de datos recolectados. Solamente piden la información requerida para
iniciar un blog.


Ejercicio
Revisa el diseño del
sitio que diseñaste para
la mesa de regalos,
asegurando que exista
un call-to-action
efectivo

http://www.freedomscientific.com/products/fs/jaws-product-page.asp recuperado el 20 de junio 2012

http://www.ping.com recuperado el 29 de agosto 2010

Tips para Mayor Accesibilidad

 Nombres representativos en archivos
 Uso de alternate text
 Uso de title
 Evita “haz click aquí”
 Alto contraste
 Ajuste de tamaño de font
 Subtítulos en videos
 Versión texto en archivos de audio
 Evitar flash
 Versión lineal (de ser posible)

¿Qué Hago con
las Formas?

http://www.allabouttrucksil.com/content/use
fulforms recuperado el 12 de junio 2012

Registro
Dentro del proceso, solicita los datos de registro lo más tarde
posible.

http://www.smashingmagazine.com/2009/06/23/10-ui-design-
patterns-you-should-be-paying-attention-to/

Evita solicitar datos inncesarios.


Apertura Progresiva
Solamente muestra al usuario la información relevante a la
tarea que realiza. La demás información proporciónala hasta
que lo soliciten.


Formatos Permisivos
Las opciones de búsqueda pueden llegar a ser complicadas si
se manejan muchos criterios. Permitan que el usuario ingrese
datos en varios formatos, y que la aplicación parsee los datos.


Uso de Breadcrumbs
Muestran el recorrido desde el home hasta la página actual.
Son un estilo de navegación secundaria que permite a los
usuarios familiarizarse con la estructura del sitio.

Cada elemento debe estar ligado a su página correspondiente,
excepto la página actual, que debe estar deshabilitada.
El home no debe tener breadcrumb, no tiene caso.


http://www.officedepot.com/a/products/353080/HP-Color-Laser-
Brochure-Paper-Glossy/ recuperado el 12 de junio 2012

http://store.officedepot.com.mx/OnlineStore/SearchSKU.do?sku=83
45 recuperado el 12 de junio 2012

Reduce la Forma

http://experienceblogger.com/post/1081389180/design-for-
conversion-checkout-page-redesign recuperado el 1 de junio 2012

http://www.alistapart.com/articles/signupforms

vs

http://www.alistapart.com/articles/signupforms

Campos Requeridos
Debe ser evidente qué campos son requeridos al momento de
llenar una forma. Así, el usuario sabe qué necesita llenar para que
no marque error.

Lo ideal sería que solo se solicitaran los campos requeridos, los
indispensables.


Pasos Necesarios
Es un patrón muy utilizado cuando el usuario debe llenar
información en múltiples pasos.
Guía al usuario, le informa cuánto falta, y le indica en qué paso va.


Pasos Necesarios

 Normalmente los pasos se muestran horizontalmente y se
conectan por flechas.
 Cada paso se marca con un número, y una breve descripción
del objetivo de dicho paso.
 Debe haber un indicador de progreso, siempre en el mismo
lugar, que indique donde están.
 Puede acompañarse por un wizard.


Planes de suscripción
Es un patrón muy utilizado cuando el usuario solicita un producto
que se paga mensualmente. Debe proporcionarse:
 Nombre de plan, por ejemplo “Básico” o “Profesional”
 Precio de la suscripción y tiempo de validez
 Características del plan (el más barato tiene menos opciones)
 Botón de suscripción
 Mostrar los planes en orden


Controles de Posición (Hover)
Cuando una interfaz tiene muchos elementos, pueden ocultarse
elementos que aparezcan cuando el usuario pase sobre ellos.


Resultados de búsqueda

- ¿Búsqueda avanzada?
- Cuál fue mi búsqueda
- Cuántos resultados
- Paginación
- Cuántos resultados mostrar
- Cómo mostrarlos


http://www.toysrus.com/ recuperado el 29 de agosto 2010

http://www.target.com/ recuperado el 29 de agosto 2010

Aplicaciones Móviles

http://www.socialnomics.net/2012/05/14/social-mobile-and-desktop-
applications-for-the-digital-marketer/ recuperado el 12 de junio 2012

¿Qué aplica en móviles?

 Todos los conceptos manejados también aplican para
dispositivos móviles
 No hay que olvidar que debemos hacer uso de todo lo que el
dispositivo brinde

http://www.emme.com.mx/home.htm recuperado el 12 de julio 2012

 Simplificar el proceso de llamada

 Buscar y llamar a la sucursal más
cercana

 Avisar a los paramédicos sobre
cuestiones de alergias y
padecimientos preexistentes

 Indicar a la ambulancia el hospital de
preferencia

 Avisar al contacto de emergencia

http://www.iconfinder.com/ic
ondetails/65064/128/call_pho
ne_icon recuperado el 12 de
junio 2012

Referencias y Bibliografía
 Norman, Donald The Design of Everyday Things. Basic Books, 2002
 Cooper, Alan, The Inmates are running the asylum, Why high-tech products drive us crazy
and how to restore the sanity, SAMS, 2004
 Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
 Nielsen, Jacob y Tahir, Marie. Homepacge Usability: 50 Websites Deconstructed. New
Riders, 2001
 Hoekman, Robert Jr., Designing the Obvious, New Riders,2007
 http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-interface-
design.shtml
 http://www.lukew.com/ff/entry.asp?1007
 http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-interface-
design.shtml
 http://old.sigchi.org/cdg/cdg2.html
 http://knowledge.wpcarey.asu.edu/article.cfm?articleid=1409
 http://www.tenfacesofinnovation.com/tenfaces/index.htm
 http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-
interface-design-in-web-applications/

Nuestro estado
de humor
actual afecta
nuestra
percepción de
las cosas.

Te invitan a asistir a la subasta, y la
imagen está diseñada para llegarle a
la gente.

http://www.fundacionluca.org.mx/ recuperado el 9 octubre 2011
Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa

Trata de despertar sentimientos en el usuario
para que hagan donaciones diciendo que pueden
ayudar a salvar a varios animales, oceanos, etc.

http://www.greenpeace.org/mexico/es recuperado el 9 octubre 2011

Al decir que puedes salvar la vida de
niños con tu donación involucra
sentimientos para influenciar la decision
del usuario y lograr que donen.

http://www.unicef.org/ recuperado el 9 octubre 2011

Ni tan tan ni
muy muy…

Se necesitan
retos
alcanzables.

El reto aumenta
conforme pasa
el tiempo.

Recuperado el 5 de octubre del 2011de http://www.onemorelevel.com/game/multitask
Ejemplo de Cristina Treviño

Existe versión
principiante y
avanzado.

http://www.kongregate.com recuperado el 5 de octubre del 2011

Preferimos y
esperamos
tener control
sobre las
cosas.

Informa que
puedes crear
tu propia
pagina web,
lo que hace
que el
usuario se
sienta en
control.

http://www.wix.com recuperado el 9 octubre 2011

La descripción le informa al usuario que podrá
modificar y editar las imágenes como el quiera, lo que
le da ese sentimiento de control.

http://www.picnik.com recuperado el 9 octubre 2011

La información
procesada y
organizada se
recuerda
mejor.

Las noticias y artículos
están separados por
regiones/ubicaciones lo
que hace mas fácil
encontrar un evento.

http://www.cnn.com/US/ recuperado el 9 octubre 2011

Luchamos por
ganar cosas
que no pueden
compartirse.

http://www.foursquaregame.com/leaderboards.php recuperado el 25 de octubre 2011

Explica tus
ideas
utilizando
metáforas.
Compara con
algo conocido.

Los iconos
representan
cualidades de la
computadora.

http://www.apple.com/macbookpro/features.html recuperado el 9 octubre 2011

Hace una representación de las secciones de la pagina con
iconos que le corresponden y son fáciles de entender.

http://mx.barbie.com recuperado el 9 octubre 2011

Utiliza color,
tamaño y forma
para llamar la
atención.

El comportamiento
irregular, como un
e-mail de
advertencia,
también llama la
atención.

Conforme a toda la paleta de
colores de la página, una
notificación contrasta de los
demás elementos para que
pongas atención a lo que
interesa.

Ejemplo de Luisa Aragón, Diego Jiménez y Oscar Buentello

El contraste de colores
define donde se encuentra
el usuario dentro del
menú.

http://www.americanairlines.ie/intl/ie/index.jsp?locale=en_IErecuperado el 20 de octubre 2011
Ejemplo de Luisa Aragón, Diego Jiménez y Oscar Buentello

La percepción
del tiempo es
subjetiva

“5 minutos…
pero debajo del
agua”.

El reloj va avanzando por
ciclos, conforme se carga
la página y el personaje
está animado como
distracción mientras
esperas.

http://www.escriba.es/base_en.html recuperado el 9 octubre 2011

En esta pagina que sirve para editar fotos,
conforme se va cargando, avanza la barra,
y debajo de ella se muestran diferentes
frases para distraer al usuario al ir
soltándole la mente, mientras lee la frase
y se imagina cosas.

http://www.picnik.com recuperado el 9 octubre 2011

Mientras se carga la
pagina aparece la silueta
de Mickey, y una cuenta
regresiva con unas
barritas que se van
llenando.

http://www.home.disneylatino.com/juegos/html/index?id=251837 recuperado el 9 octubre 2011

Al introducir
nuevos
conceptos,
utiliza
elementos con
los que el
usuario esté
familiarizado.

No hay nada más
familiar que hablar.

http://www.google.com/ recuperado el 20 de octubre 2011

El “like” ya es usado por
muchos sitios, debido a
que los usuarios ya
están familiarizados con
su significado
http://www.youtube.com/ recuperado el 20 de octubre 2011
Ejemplo de Antonio Sánchez, Mariam Elizondo y José Luis Reyes

Los usuarios que usan iTunes ya estarán
familiarizados con el formato que ofrece
Grooveshark en su página.

http://www.grooveshark.com/ recuperado el 20 de octubre 2011

Las personas que
leen webcomics
están familiarizados
con estos botones,
que son para la
navegación de
archivos. Están
presentes en casi
todas las páginas de
comics. Los que no
las han visitado,
pueden entender
que son como los
botones de un
control remoto.

http://www.kiwiblitz.com/ recuperado el 20 de octubre 2011

Nos gusta que
un sistema que
responda
inmediatamente
a nuestras
acciones.

Youtube añade una
lista de reproducción
con videos
relacionados.

http://www.youtube.com recuperado el 20 de octubre 2011
Ejemplo de Alejandro Hernández, Rogelio Rodríguez y Lucia Elizondo

Refleja la reacción rápida o
lenta del jugador.

http://www.minijuegostop.com.mx/items/.../0/1556_reaccion-rapida/ recuperado el 5 de octubre de 2011
Ejemplo de Azael Alejandro Muñoz

El juego refleja a través de un
personaje los movimientos
que el jugador transmita.

http://quierobits.com/wp-content/uploads/2010/10/500x_kinect_specs.jpg recuperado el 5 de cotubre 2011
Ejemplo de Azael alejandro Muñoz

Sentimos el
compromiso de ser
recíprocos cuando
nos regalan algo.

Si servicios
similares también
lo regalan,
entonces no es un
regalo, es algo
esperado.

http://apps.facebook.com/bakinglife/?ref=bookmarks&fb_source=bookmarks_apps&fb_bmpos=1_ recuperado el 27 de pctubre 2011

Algo de humor
se recuerda
más fácilmente.

La frase que te invita a cambiar
de página es humorística.

http://senorgif.memebase.com recuperado el 9 de octubre del 2011
Ejemplo de Andrea Gómez, Christian González y Hugo Villanueva

Firefox recuperado el 25 de septiembre de 2011

Anuncio
para un
insecticida.

http://forum.xcitefun.net/creative-animal-ads-romantic-fm-t12235.html recuperado el 14 de octubre 2011

Se trata de ofrecer al cliente un
producto de una manera
cómica para llamar su atención
y que el cliente se interese y lo
recuerde por el comercial.

http://www.sopitas.com/site/100015-volkswagen-para-star-wars/ recuperado el 14 de octubre 2011
Ejemplo de Carlos Alejandro Loza

Una empresa
que vende
pollo utiliza
vacas para
promocionar
que consumas
sus productos.

http://www.chick-fil-a.com/Cows/Campaign-History recuperado el 14 de octubre 2011

Explicación: la pagina
de ESPN utiliza esta
imagen como que
para demostrar que
estarás viendo
mucho su canal que
hasta serás parte del
sofá de tanto estar
sentado.

http://espndeportes.espn.go.com/?cc=5200 recuperado el 14 de octubre 2011

Es más
probable que
escojamos
cuando
tenemos pocas
opciones.

Vemos que encierran el
menú en 4 opciones para
que sea más fácil de
navegar

© 2011 Carbonmade, LLC, Recuperado el 10 de octubre del 2011 de la página:
http://www.nickjrboost.com/index.php?source=282
Ejemplo de Marliesse Pérez, Alejandra Muñoz y Carlos Vela

Del lado contrario esta friend
requests, inbox y notifications ya
Tu perfil y home ya que son
que son las 3 acciones que revisas
las dos cosas que más ves
cuando entras a facebook

Facebook a cambiado
mucho y ahora agrupa las
opciones para hacerlo
más sencillo

Facebook. Recuperado el 10 de octubre del 2011 de la página: https://www.facebook.com
Ejemplo de Marliesse Pérez, Alejandra Muñoz y Carlos Vela

Pocas opciones a elegir, pero las más
importantes. Fácil de encontrarlas y
estratégicamente acomodadas.

http://www.irontoiron.com/ recuperado el 5 de octubre de 2011
Ejemplo de Juan Antonio Córdova

¿Pocas opciones para seleccionar?... Sólo se
pueden seleccionar los Proyectos. Después
de seleccionar uno, se dan distintas opciones
de navegación, para poder dirigirte a los
demás.

http://relogik.com/ recuperado el 5 de octubre 2011
Ejemplo de Juan Antonio Córdova

Cuando hay
demasiada
ambigüedad la
gente no actúa.

Provee
información que
ayude al usuario
a tonar
decisiones.

Recuperado el 5 de octubre del 2011, de
http://1.bp.blogspot.com/_E-hssDElat4/SLc5wxVwjGI/AAAAAAAACPY/4uFjE7ClgsU/s400/certainty.jpg
Ejemplo de Cristina Treviño

En esta página este recuadro
atrae la atencion del usuario y al
estar explicada de una manera
muy sencilla, hace que el
usuario sepa claramente para
que es la página.

http://www.isuu.com/ recuperado el 20 de octubre 2011

Las tres opciones son sencillas
de entender y explican a
cabalidad qué hace el sitio

http://www.flickr.com/ recuperado el 20 de octubre 2011

Mas Alla de lo Visual

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (12)

Similar a Mas Alla de lo Visual

Similar a Mas Alla de lo Visual (20)

Último

Último (10)

Mas Alla de lo Visual