Diseño para no diseñadores

Diseño para
No-Diseñadores
Marta Sylvia del Río
mdelrio@udem.edu.mx

Elementos de la
experiencia del usuario

http://julian.missig.org/

Agenda

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

120 Tips sobre el manejo de la tipografía, imágenes y retícula: del print a la web

30 Color y accesibilidad para el diseño de un sitio web
60 Jerarquización y diseño basado en el "call to-action".

30 Innovación en las interfaces

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.sabritas.com.mx/index2.html

http://www.pwc.com/mx/es/index.jhtml

http://www.crystalwater.com.mx/index.php

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

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

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

õö õö
Como Perros y Gatos
Como Perros y Gatos Veterinaria
Veterinaria

Pirineos 212 – Paseo de Cumbres - Tel. 82151206 Pirineos 212 – Paseo de Cumbres - Tel. 82151206

õ
Como Perros y Gatos
Veterinaria

Como Perros
y Gatos
Veterinaria

Pirineos 212
Paseo de Cumbres
Tel. 82151206 Pirineos 212 – Paseo de Cumbres - Tel. 82151206

http://app.time.com/blackberry.php

http://venturebeat.com/2010/10/15/new-york-times-
updates-ipad-app-with-full-content-free-until-2011/

Estructura de la página
Una buena estructura
crea una navegación
sencilla e intuitiva.

http://www.bbc.co.uk/
http://wordpress.com/
http://www.cnn.com
http://www.britneyspears.com/
http://www.whitehouse.gov/
P
http://www.disney.com
http://www.giorgioarmani.com

O
Fuentes: http://designingwebinterfaces.com
Ing. José Alfonso García Grajeda

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


Los Encabezados son un Comienzo…


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/Cat
alogue.aspx?show=PrdsList&IC=1&C=F
B&line=F&NavM=N

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

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 resaltan.
§ La tierra es de quien la trabaja
§ 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


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


Interlineado
Dependiendo de la tipografía, dejar un espacio adecuado entre las líneas de
texto permite que el contenido se veas más limpio, eliminando la saturación.

Ancho de columna
El espacio total de la columna de texto debe ser adecuado para la lectura. Una
renglón muy largo hará que la lectura sea cansada y el usuario pueda llegar a
perderse entre una línea y otra.

¿Ancho óptimo?
52–78 caracteres (incluyendo espacios)

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)


http://www.zappos.com/womens-pumps

La Gente
Distrae la
Atención del
Producto

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

¿Cómo reacciona el usuario
ante una foto?

§ Algunas fotos se ignoran completamente
§ Otras son tratadas como contenido y son
escrutinadas

Fotos de personas

Si son personas reales, se revisan

P Pasaron más tiempo revisando las
fotos que el contenido

O Si son fotos genéricas, se ignoran

Fotos de productos

P Siempre son revisadas

Los thumbnails de libreros se revisaron
más intensamente que los de
televisiones.
Los usuarios se fijaron un 82% del
tiempo en las descripciones de las
televisiones y solamente el 18% en las
fotos.

Fotos Grandes de productos

P Cuando son solicitadas, se revisan

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

Sitios personales

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

Revisen los tips de usabilidad para
blogs.

Conclusiones

“ Pay attention to information-
carrying images that show content
that's relevant to the task at hand.
And users ignore purely decorative

”
image.
Jakob Nielsen

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 ExpertsGroup
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


Imagen digital VS imagen impresa

Los puntos por pulgada (ppp) del inglés dots per inch (DPI) es una unidad de
medida para resoluciones de impresión, concretamente, el número de
puntos individuales de tinta que una impresora o tóner puede producir en
un espacio lineal de una pulgada. (Fuente Wikipedia)

¿Cuántos puntos por pulgada utilizo?
WEB:
72 DPI

Impreso:
300 DPI


Imagen digital VS imagen impresa

WEB: 72 DPI Impreso: 300 DPI
300 x 300 pixeles 1250 x 1250 pixeles


Iconografía

¿Qué debemos considerar?
- Resoluciones: 128 x 128px | 48 x 48px | 32 x 32px | 16 x 16px
- Representar su función mediante metáforas
- Ser consistente en su uso y diseño (www.yahoo.com)

http://www.iconcool.com/ http://www.istockphoto.com/


Iconografía:
Pocas Diferencias en el Diseño de Iconos
Es necesario marcar diferencias en la iconografía en función del
tamaño o resolución de los íconos.


Iconografía:
No Colocar Muchos Elementos en un Icono

Entre más simple, mejor.
Muchos elementos en los íconos
saturan la imagen y se pierde el mensaje.


Iconografía:
No Usar Elementos Innecesarios
Eliminar elementos que pueden ser asumidos o que no son indispensables.


Iconografía:
Unificar el Estilo de los Grupos de Iconos
Consistencia en paleta de colores, perspectiva, tamaño, técnica de dibujo.


Iconografía:
Reemplazar Metáforas ya Conocidas y Adoptadas
No reemplazar elementos con los que los usuarios están ya familiarizados.


Iconografía:
No Utilizar Imágenes de Controles o Interfaces Reales
Utilizar checkboxes, botones u otros elementos de las interfaces puede
confundir a los usuarios.


Iconografía:
Texto dentro de Iconos
No utilizar texto dentro de los elementos iconográficos. Ya que en
resoluciones pequeñas, el texto no podrá ser leído.


Buscadores de iconos
Iconfinder
Iconlet

Sets de iconos
Famfamfam
Pinvoke
Sweetie
IconFactory
Tango Icon Library
Glyphlab
Greyscale

Recopilaciones de iconos
Recopilación de Iconfinder
Free icons web


Mezcla de color aditiva

Composición del color en
términos de la intensidad
de los colores primarios
con que se forma:
rojo, verde y azul


El Color en Pantalla
§ Cada pixel está compuesto de tres sub-pixeles (colores
primarios), cada uno de estos brilla con menor o mayor intensidad.

§ La gama de colores de la Web consiste en 216 combinaciones.

#00 #33 #66 #99 #CC #FF
0 51 102 153 204 255
0% 20% 40% 60% 80% 100%

Cubo de dimensión seis


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

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


Utilización de Colores

Color para textos y flechas
Color para fillers, separadores…
NUNCA para botones pues
parecen deshabilitados

Color principal del sitio
Color contrastante para el call-to-action
Color secundario, para iconos, viñetas, subtítulos…

El Contraste

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

Brillo = Brillo

CONTRASTE NULO


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

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

¿Cuál es un buen conversion rate?

3%

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.

4. Utiliza un 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.

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.

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.

http://royal.pingdom.com/2010/10/27/web-
designers-keep-that-page-size-down

Contraste y accesibilidad
¿Cómo puedo evaluar si el contraste de colores es adecuado?

http://www.accesskeys.org/tools/color-contrast.html

http://gmazzocato.altervista.org/colorwheel/wheel.php


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)

Call-to-action

Web
Copy!!!

¿Qué dice la experiencia?

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

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


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.


Acciones Evidentes
Las formas simples normalmente permiten una sola acción:
“compra”, “regístrate”, “envía”, “guarda”… El usuario sabe
dónde dar click al terminar ese paso.

Deben distinguirse las acciones primarias de secundarias, esto
es, el call-to-action debe ser evidente.


Es importante distinguir las cciones principales de las
secundarias, que desvían del objetivo. Hay dos maneras de
distinguirlas:

§ Utilizar un color que destaque para la acción principal, y
grises para las acciones secundarias.
§ Manejar la acción principal en botón, y las secundarias en
liga.


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.


Registro
El registro resuelve tres problemas relacionados:
§ Cierto contenido sólo debe estar disponible para usuarios
registrados
§ Los usuarios deben ingresar información personal
reiteradamente
§ Los usuarios deben accesar información personalizada

La solución es registrarlo y utilizar la información. A pesar de los
beneficios, no es una tarea que guste, hay que solicitar solo la
información indispensable.

Por otro lado, conviene dejar muy evidente todos los beneficios
que recibirán al registrarse.


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

vs

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

http://experienceblogger.com/post/1081389180/design-for-
conversion-checkout-page-redesign

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.


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.


¿Cómo ven mi sitio web?

Ver:_Nielsen Norman Group Report

¿Qué debo tomar en cuenta?
• Sistema operativo: Windows XP, Vista, 7. MAC-OS

• Navegador web: Firefox, Internet Explorer, Safari, Chrome

• Resolución de pantalla: 800 x 600, 1024 x 768… ¿wide screen?

• Versión móvil: ¿Hay necesidad de crear una versión lineal?

• Elementos interactivos: Flash, JavaScript, Java Applets

Prohibido su uso sin permiso del autor

Versiones de impresión

Facilitar versiones de impresión que eliminen
elementos no deseados

http://www.eluniversal.com.mx


Estandarizar funcionalidades
Misma acción / función = mismo estilo

http://www.sony.com


Master / detail
Acceso directo a
funcionalidades que
permiten al usuario
navegar sin perder la
navegación.

Fuente:shttp://designingwebinterfaces.com
http://www.google.com/analytics/apps/results?category=Content%20Management

GetSatisfaction.com utiliza tabs verticales en vez de radio buttons para
identificar el tipo de mensaje del usuario.

http://www.patternry.com/p=stacked-tabs/

http://www.google.com/finance/st...

http://www.carmax.com/

El input depende de la selección

http://www.stumbleupon.com/

http://sites.google.com/site/sites/

https://www.getdropbox.com/tour#2

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

Fuente: http://designingwebinterfaces.com

Escribir
Utilizar encabezados evidentes

Evitar grandes bloques de texto tratando de integrar listas con viñetas o con
números, tablas y diagramas. Los encabezados deben ser concretos y
visibles, invitar a una acción y brindar una idea general del contenido.

http://www.officemax.com http://www.ted.com


Escribir
Simplificar los textos y
palabras

El lenguaje debe
simplificarse lo más
posible, eliminando
adjetivos, juicios de valor,
y ambigüedades. De igual
forma se deben evitar
tecnicismos, abreviaturas
o conceptos que quizás
para el dueño del sitio
son importantes, pero
para el usuario no lo son.


Escribir
Usar palabras y oraciones
precisas Palabras que pueden ser ambiguas

Daniel Cassany (2002)
explica que:

• Se deben utilizar palabras
que se refieran a objetos o
sujetos tangibles, es decir
palabras concretas.

• Se deben evitar palabras
que designen conceptos o
cualidades difusos, es decir
palabras abstractas.


Escribir
Eliminar palabras
innecesarias

Existen grupos de palabras
que se pueden reducir
mediante sinónimos, esto
evitará palabras
redundantes que pueden
hacer más denso el texto de
una página del portal para
el usuario.


Escribir
Separar el texto en segmentos

Ayudar a los usuarios para “escanear” los contenidos sin la necesidad de leer
todo palabra por palabra.

http://www.whitehouse.gov


Escribir
Oraciones, encabezados y enlaces con palabras clave

Indicar a los usuarios qué van a encontrar si deciden seguir leyendo o dar clic
en un enlace.

http://es.wikipedia.org/


http://iordanov.info/projecs_mentormate_MigraineMate.html

http://www.soft-gadgets.com/telenav- http://symbianism.blogspot.com/2009/08/free-mobile-
gps-navigator-for-blackberry-storm/ maps-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

http://www.smartmoney.com/map-of-the-market/

http://www.lukew.com/ff/entry.asp?1007

Design Decision: A New Signup Form

ttp://www.target.com/Home-
%C3%A9cor/b/ref=nav_t_spc_7_4?ie=UTF8&
ode=1038616

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
§ 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/

Diseño para no diseñadores

Recommended

Recommended

More Related Content

Similar to Diseño para no diseñadores

Similar to Diseño para no diseñadores (15)

Recently uploaded

Recently uploaded (20)

Diseño para no diseñadores