Showing posts with label diseño web. Show all posts
Showing posts with label diseño web. Show all posts

Wednesday, February 18, 2009

25 Maneras de ser más productivo como diseñador

La verdad es que no hay nadie perfecto y nadie lo será, pero la vida se trata de mejorar uno mismo y ser lo más productivo que sea posible con el tiempo que se le ha asignado. Frecuentemente el trabajo consume nuestras vidas, pero si podemos ser más productivos en el trabajo y adoptar buenas hábitos, nuestra vida personal, en teoría, debería mejorar también.

Esta lista fue creada para ayudar a inspirarle para dar un rendimiento máximo en sus días de trabajo, involucrarse más en su carrera y ser, por tanto, un diseñador saludable y productivo como persona. Siéntase libre de agregar sus propias sugerencias a la lista que sigue debajo.


1.- Realice todo lo posible en su viaje al trabajo.

Si le toma un tiempo llegar a su trabajo la mayoría de las veces. Lea un libro, tenga su laptop a mano para empezar a trabajar, incluso planee su día

2.- Tenga una lista de tareas.

Mantener una lista de tareas le asegura recordar todo lo que necesita hacer. Organice su lista de tareas por importancia y tache las cosas realizadas, pero acepte el hecho de que la lista probablemente nunca terminará

3.- Familiarícese con los atajos de teclados de la suite de Adobe.

Aprenderse los principales hotkeys (atajos de teclado) para programas como Photoshop e Illustrator puede ayudarle a ahorrar muchas horas a la larga.

4.- Mantenga el software de su computadora actualizado, libre de virus y spyware.

Como los diseñadores usan computadoras diariamente, es importante estar seguros que den su máximo desempeño, cerciórese de actualizar su computadora por lo menos una vez a la semana

5.- Busque distintas fuentes de inspiración

La inspiración forma gran parte de cualquier carrera artística y existe una buena cantidad de lugares para encontrar inspiración como exhibiciones de diseño, museos, portafolios online y galerías de diseño gráfico

6.- Involúcrese en la comunidad del diseño

Unirse a foros de diseño, comentar en blogs, escribir artículo y hablar en seminarios son solo unas formas de involucrarse en la comunidad del diseño.

7.- Vaya a eventos de diseño, exhibiciones y centros de aprendizaje.

Cada año hay muchas conferencias sobre diseño, eventos y cursos de entrenamiento. Si trabaja para una compañía, incluso le pagarán los gastos para que asista, así que mantenga sus habilidades al día.

8.- Lea libros sobre historia y teoría del diseño

La cantidad de libros de diseño es sorprendente, así que escoja un tema de interés como teoría del diseño y consiga algunos libros para leer en su tiempo libre. Un gran libro es “How to be a graphic designer without losing your soul” (como ser un diseñador gráfico sin perder su alma).

9.- Lea entrevistas de otros diseñadores gráficos

Las entrevistas frecuentemente nos dan ideas y revelan muchos secretos y grandes tips acerca de diseñadores exitosos. Es asombroso lo mucho que se puede aprender incluso de las entrevistas más breves.

10.- Únase a organizaciones de diseño gráfico

Unirse a organizaciones de diseño gráfico le puede traer grandes beneficios y es una manera de conseguir acceso a recursos y contactos. La Graphic Artist Guild (gremio de Artistas Gráficos) y la AIGA son tan solo algunas de las organizaciones a las que debería considerar unirse.

11.- Aprenda a aceptar las críticas constructivas.

Es un problema con muchos estudiantes de diseño e incluso en el ámbito profesional. Cuanto más pronto deje de tomar las críticas constructivas de forma personal, será el tiempo que le tomará mejorar como diseñador.

12.- No tenga miedo de pedir ayuda.

Si no sabe como hacer algo, no gaste su tiempo tratando de hacerlo. Amablemente pregunte por ayuda, así podrá seguir con sus actividades.

13.- Aprenda a comisionar trabajo y tareas a otros.

Si usted tiene más trabajo de lo que puede realizar, es una buena idea enviar algo del trabajo a alguien de confianza .El proyecto final tendrá un mejor resultado si usted trabaja en equipo y encarga tarea a otros.

14.- Use “Google Reader” y haga seguimiento a blogs de diseño

“Google Reader” es un gran lector RSS online que le permitirá dar seguimiento fácilmente a sus blogs de diseño favoritos.

15 .- Use Google Calendar para mantenerse al tanto de eventos importantes.

Google Calendar es un asombroso calendario/agenda online y además gratuito, le ayudara a organizar todas sus actividades importantes.

16.- Configure su cliente de email.

Ver los mails cada 5 minutos puede llegar a ser una gran distracción. Así que cheque su email a ciertas horas por lo que realizará más de su trabajo día a día.

17- Haga contratos estándar para los clientes

Es una buena idea tener un abogado que le ayude a crear una seria de contratos estándar con anticipación, así estará preparado y no tendrá que preocuparse o perder tiempo en hacer contratos posteriormente.

18.- Haga una factura estándar y plantillas de presupuesto.

Tener una factura bien diseñada y una plantilla de presupuestos es ser profesional y pueden ser personalizadas para cualquier cliente nuevo, asegúrese de imprimir copias para sí mismo como referencias.

19.- Haga etiquetas de correo

Escribir tantos años en la computadora ha estropeado mi escritura a mano y tener etiquetas de correo no solo me soluciona lo de mi fea escritura, incluso ahorra tiempo.

20.- Organice todos sus documentos una vez a la semana

En estos días el papeleo se puede apilar muy rápido si es que se deja, organizar todo de nuevo puede ser una pesadilla. Use un archivador que esté clasificado para poder organizar los documentos importantes.

21.- Organice los archivos de su computadora una vez a la semana

Organizar los archivos de computadora es incluso más importante que organizar el papeleo. Debe tener carpetas y sub-carpetas para cada cliente y crear diariamente copias de respaldo en diferentes dispositivos externos.

22.- Desarrolle un sistema de organización

Organizar sus archivos en una forma especifica, le hará más fácil navegar y buscar por documentos cuando los necesite rápidamente.

23.- Trate de mantenerse los fines de semana relajado y libre de trabajo

Es fácil ser consumido por su trabajo y mantener los fines de semana libres es una buena forma de asegurarse en no decaer. Así que no se olvide de disfrutar la vida en los fines de semana!

24.- Ejercítese diariamente y salga por un poco de aire fresco a la hora del almuerzo.

Este punto siempre forma parte en las listas de productividad, aunque mucha gente no lo realiza. Puede ser difícil ajustarse pero tan solo 20 minutos de ejercicio 3 veces a la semana pueden tener un gran impacto en su salud.

Fuente: http://noticiasda.wordpress.com/2009/01/22/25-maneras-de-ser-mas-productivo-como-disenador/

Friday, August 22, 2008

Usabilidad y Accesibilidad Web

¿Las webs accesibles son siempre feas?

Muchas veces, nos encontramos con sitios que generalmente respetando los estándares Web no son tan agradables visualmente, pero esto no tiene por que ser así.
Si nos basamos en los conceptos actuales de la Usabilidad y Accesibilidad mezclada con un poco de creatividad y el conocimiento de la tecnología, se pueden lograr resultados interesantes y agradables, que por ende son más vendibles.

Para continuar leyendo este interesante artículo, les recomiendo quevisiten la web de su autor.

Fuente: http://lausabilidad.blogspot.com/2008/08/usabilidad-y-accesibilidad-web.html

Thursday, February 28, 2008

Formularios usables: 60 Directrices de Usabilidad

Artículo propiedad de Olga Carreras, publicado originalmente en:
http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html

Por desgracia, es a menudo el programador quien hace el diseño de los formularios.

Mientras que para el diseño de páginas web se considera necesaria la participación de especialistas en el diseño de interfaces, no ocurre lo mismo cuando debe diseñarse algún formulario.

Es muy habitual considerar que un formulario no es más que el resultado del análisis de datos que debe realizar todo analista o programador.

Lo que se obtiene al final es un formulario que no tiene en cuenta la terminología del usuario y que por lo general guía poco y controla mucho.

[En "Por qué los formularios no se diseñan correctamente" de Josep Casanovas]


Introducción

Ninguna de las 60 directrices es invención mía. Mi labor ha sido únicamente de recopilación y síntexis.

Quizás debería haber justificado la razón de ser de cada directriz, puesto que abundan los que creen saber lo que necesita el usuario, independientemente de lo que digan los estudios de usabilidad, los test de usuario o los expertos en usabilidad.

La usabilidad no consiste en que tú y yo elucubremos tomando un café sobre lo que le va a resultar más usable al usuario. La usabilidad es una disciplina seria.

Sea como sea, como otros antes que yo han explicado muy bien el porqué de estas directrices, aunque sea en diferentes artículos o estudios, me remito directamente a ellos: fuentes del artículo.


60 Directrices para realizar formularios usables

Generales

1. Pida sólo la información absolutamente necesaria.

2. Infiera información a partir de otra disponible.
Por ejemplo, la provincia se puede inferir del C.P.

3. Reutilice los campos cuando sea posible.
Por ejemplo, el email puede servirnos en ocasiones como nombre de usuario.

4. No pida la información dos veces.
Por ejemplo, si el usuario ha rellenado la dirección de facturación, no le obligue a volver a rellenar la dirección de envío si no es necesario, pregúntele si quiere que sea la misma.

Textos

5. Proporcione un título al formulario que exprese claramente su función.

6. Si necesita instrucciones, que sean breves y comprensibles.

7. Utilice una nomenclatura clara y familiar, sin tecnicismos ni extranjerismos.

8. Sea consistente en el uso de los términos.
Es decir, use siempre las mismas palabras para los mismos conceptos.

9. No utilice preguntas complejas ni haga pensar al usuario.

10. Redacte siempre las opciones de forma afirmativa.

Por ejemplo, junto a un check escriba “Deseo recibir el boletín" en vez de "No deseo recibir el boletín".

Organización

11. Organice los campos en una sola columna de datos.

Sin entrar en las razones de accesibilidad que lo justifican (ver "75 Directrices de accesibilidad de Jakob Nielsen") me cuesta muchas discusiones hacer comprender que, apelotonando los datos en la misma línea o colocándolos en varias columnas, se pierde tanto a nivel de usabilidad que no merece la pena el espacio vertical que se gana.

Como siempre, hay muchos contextos de uso y excepciones justificables, como los formularios que se rellenan de forma repetitiva y constante, pero la excepción nunca puede convertirse en norma.

Una sola columna funciona mejor. Los formularios con dos columnas tienen más probabilidades de que los usuarios pasen por alto algunos campos, dado que crean un orden ambiguo de lectura. Sus ojos se moverán hacia donde espera encontrar el próximo campo, que será habitualmente hacia abajo, en vertical. No esperan a que se les indique mediante el parpadeo del cursor dónde mirar.

[En "Formularios largos: ¿una pantalla con scroll o varias páginas?" de Usolab (resumen en español del artículo "Caroline's Corner - Long Forms: Scroll or Tab?" de Caroline Jarrett)]
12. Organice los campos en grupos lógicos, utilizando para ello la mínima cantidad de elementos visuales (evitando así ruido visual).

13. Agrupe, si es posible, los campos obligatorios al comienzo del formulario.

14. Evite fragmentar la petición de información.
Por ejemplo, no pida por separado el tipo de vía, la calle, el número, etc. si no es estrictamente necesario.

15. Proporcione un diseño ordenado, alineando verticalmente todas las etiquetas y todos los campos entre si.
Todos los campos deben estar verticalmente alineados entre sí a la izquierda.

¿Cómo alinear las etiquetas entre sí: a la derecha, a la izquierda o las colocamos encima del campo?
  • Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.

  • Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.

  • Hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.
"Consejos para el diseño de formularios": resumen en español de las conclusiones de Luke Wroblewski

16. Sitúe las respuestas de los campos radio buttons y check box después de los mismos.
De esta manera se favorece la alineación vertical de todos los controles.

17. Utilice etiquetas estándar para agrupar campos y hacer más manejable la información(OPTGROUP, FIELDSET)

18. Si se utilizan radio buttons o checks box agrupe visualmente de forma clara y unívoca los distintos grupos de opciones.

19. Distinga visualmente los campos deshabilitados siguiendo las normas de facto (poniéndolos en gris claro)

Tipos de campos

20. El tamaño visible de los campos de texto debe corresponderse con la longitud del contenido que ha de introducir el usuario.

21. Homogeneice los anchos de los campos de texto cuando estos sean similares (evitando así ruido visual).

22. Dote a los campos de texto de flexibilidad para que admitan los datos en cualquier formato.

Por ejemplo, un campo para introducir el número teléfono debería admitir paréntesis, guiones, espacios; un campo para introducir importes debería admitir decimales con punto o con coma, etc.

23. Evite el uso de combos.

No las use por ejemplo para seleccionar el país, fecha o profesión a no ser que sea estrictamente necesario, en cuyo caso incluya una opción del tipo “Otros” que pueda englobar casos no recogidos en las opciones proporcionadas.

24. Evite que las combos recarguen la página para rellenar otros campos, pero cuando así sea, asegúrese de que el formulario conserva el mismo estado que tenía antes de recargar la página: con los mismos campos visibles o activos, y con todos los campos rellenos con los mismos datos que antes de la recarga.

25. Si se utilizan combos o radio buttons seleccione siempre una opción por defecto, asegurándose de que sea la más probable.

De lo contrario, el usuario no puede volver al estado inicial del formulario; si es necesario incluya una opción "Ninguna".

26. Si se utiliza un check box para presentar una única opción que no es obligatoria (recibir publicidad, aceptar unas cláusulas) no la marque por defecto.

27. Si se utilizan radio buttons asegúrese de que todas las opciones son claramente excluyentes.
  • No los utilice cuando las respuestas sean más de tres y complejas, o más de cinco y simples.
  • Siempre que se cumpla la regla anterior, utilice radio buttons en vez de combos
28. Si un radio button tiene más de dos respuestas, colóquelas en vertical, unas debajo de otras alineadas a la izquierda.

Funcionamiento

29. Valore la posibilidad de evitar, mediante JavaScript, que en determinados campos se pueda introducir determinados caracteres.
Por ejemplo, que en el campo DNI sólo se puedan introducir números y letras, haciendo que el resto de caracteres no se puedan teclear en el campo.
[A mí, personalmente, no me gusta esta práctica]

30. No implemente saltos automáticos del foco del formulario.
Por ejemplo, en los campos de cuenta, no haga que el foco se mueva sólo al siguiente campo cuando se ha rellenado el anterior.
Un error típico es introducir el salto automático entre campos de texto consecutivos y hacer innecesario el uso del tabulador.

Aunque este comportamiento puede parecer que facilita la tarea de introducción de datos, no es adecuado porque quita control a los usuarios, no es un funcionamiento estándar y es necesario mirar la pantalla para saber en que campo se está.

Todo ello puede provocar fácilmente errores, como por ejemplo, introducir datos pertenecientes a un campo en el siguiente cuando no se introduce el formato esperado por el salto automático.

[En "Controles de formularios en diseño web, radio buttons, check-boxes..." de Eduardo Manchón]

31. Asegúrese de que la tecla "Intro" realiza la acción principal.

32. Evite, mediante JavaScript, que el usuario pueda impacientarse y enviar dos veces el formulario.

33. Al implementar la validación de los formularios (o al limitar el tamaño de los campos) piense si su formulario puede ser utilizado por usuarios de otros países.

Por ejemplo, el C.P. o el teléfono no tienen la misma longitud en unos países que en otros; por ejemplo, en España hay usuarios que no tienen DNI sino tarjeta de residencia.

Ayudas

34. Identifique claramente los campos obligatorios y los opcionales mediante el literal (Obligatorio) u (Opcional), según si se van a marcar los obligatorios o los opcionales, colocando dicho literal detrás de la etiqueta del campo y por tanto antes del campo.
Para saber si marcar los obligatorios o los opcionales seguir las directrices de Luke Wroblewski:
  • Indique los campos obligatorios cuando sean menos que los opcionales.

  • Indique los campos opcionales cuando sean menos que los obligatorios.
Para saber por qué poner el texto (Obligatorio) u (Opcional) después del literal y no después del campo, o por qué se debe indicar mediante un texto y no mediante un asterisco, leer "75 Directrices de accesibilidad de Jakob Nielsen"
35. Incluir ayudas breves o ejemplos junto a los campos, pero sólo cuando sea realmente necesario para saber cómo ingresar un dato.

Asegúrese de que al leer en línea estas ayudas o ejemplos se lean antes que el campo, por ello, un buen lugar para colocarlas es encima del campo. Para comprender por qué colocarlas en esta posición leer: "75 Directrices de accesibilidad de Jakob Nielsen"

Botones

36. No incluya un botón "Reset" (es decir, de Limpiar o Borrar el formulario)

37. En los formularios de un sólo paso evite tener un botón "Cancelar" cuya función sea en realidad volver a la página anterior.

38. Distinga entre las acciones primarias y secundarias (volver, imprimir etc.) de su formulario.

Evite las secundarias, pero si ha de incluirlas distíngalas visualmente de forma inequívoca, destacando visualmente las primarias.

Por ejemplo, poniendo las acciones primarias como botones y las secundarias como enlaces.

39. Coloque los botones o enlaces que realizan las acciones primarias (por ejemplo el botón "Enviar") lo más cerca posible del último campo del formulario. No los separé del formulario mediante, por ejemplo, una línea.

40. Dé un nombre adecuado a los botones del formulario, relacionado con su acción y no de carácter general.

Por ejemplo, use "Buscar" en vez de un genérico "Aceptar".

Errores

41. Cuando se produzca un error al rellenar el formulario proporcione en la parte superior del mismo, y con suficiente contraste, un listado de los errores. Por cada error indique qué campo lo ha provocado, por qué motivo, cómo solucionarlo y un enlace al campo.

42. Destaqué los campos que han dado error pero no se base para ello únicamente en el color.
Acompáñelos de un icono de error que aparezca también en el resumen del comienzo de la página.
Repita el mensaje de error al lado del campo para no tener que volver a la lista inicial para saber qué error lo provocó. Ver un ejemplo de cómo mostrar los errores de un formulario.

43. Cuando se produzca un error, el formulario no debe resetearse, es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida.

44. Redactar claramente los textos de error mediante términos claros, sencillos y no técnicos.
No utilizar mensajes genéricos del tipo “No se ha podido enviar el formulario”.

45. Evite validar los campos uno a uno, cuando pierden el foco, mostrando inmediatamente un mensaje de error al usuario. A los usuarios les incomoda esta práctica.

Feedback

46. Cuando el usuario envíe el formulario, infórmele del resultado de su acción: indíquele si se ha realizado correctamente, qué datos se han enviado, cómo puede ponerse en contacto con los responsables del sitio si ha habido problemas o para hacer un seguimiento del mismo, o cómo puede modificar los datos enviados.

47. Si el proceso de envío es lento, incluya en la página un mensaje de "enviando datos".

Respuesta

48. Informe a los usuarios de por qué deben rellenar el formulario y cuándo y a través de que medio recibirán una respuesta.

49. Si es un formulario de contacto envíe un email automático confirmado que se ha recibido.

50. Si es un formulario de contacto, asegúrese de que la empresa tenga los mecanismos necesarios para responder de forma rápida y adecuada al mismo.

Legalidad

51. Incluya las cláusulas de protección de datos cuando sea pertinente.

Accesibilidad

52. Asocie explícitamente las etiquetas con sus controles mediante LABEL y su atributo "for".

53. Compruebe que el tabulador permite acceder a todos los campos en el mismo orden que el visual.

54. Mejore la experiencia del usuario mediante JavaScript y AJAX pero asegúrese que el formulario funcione correctamente sin ellos.

55. No establezca un límite de tiempo ajustado para complementar el formulario.

Formularios extensos

56. Si los formularios son muy extensos la solución no son las columnas, sino la división en páginas bien rotuladas que indiquen al usuario en que paso está del proceso (por ejemplo Paso 3 de 4).

57. Si el formulario se presenta en varias páginas hay que seguir el lema 1 tema = 1 página.

58. El usuario debe poder volver a los pasos anteriores.

59. No solicite información externa en medio del proceso mediante la abertura de una ventana nueva del navegador.

60. Evite la utilización de pestañas para crear formularios de varias páginas.

Fuentes

"Best Practices for Form Design" de Luke Wroblewski
"Formularios usables" de Javier Cabrera
"Usabilidad al diseñar formularios de contacto" de Reynier Matos Padilla
"Formularios" en desarrolloweb.com
"Directrices de usabilidad para el diseño de formularios" de Josep Casanovas
"Controles de formularios en diseño web, radio buttons, check-boxes..." de Eduardo Manchón
"El principio de Visibilidad y el de Guiar en lugar de controlar: ¿son incompatibles? " de Josep M. Junoy
"Formularios en la web, recomendaciones generales de diseño" de Eduardo Manchón
"Usability and HTML Forms" de Andrew Starling
"Reset and Cancel Buttons" de Jakob Nielsen
"Checkboxes vs. Radio Buttons" de Jakob Nielsen
"Should I use a drop-down? Four steps for choosing form elements on the Web" de Sarah Miller and Caroline Jarrett
"Caroline's Corner - Long Forms: Scroll or Tab?" de Caroline Jarrett
"Simplified Form Errors" de Adam Kalsey
"Developing an Online Form" de usability.org
"Usabilidad y Accesibilidad de sitios web. Lista de comprobaciones" del Laboratorio Aragonés de Usabilidad

Wednesday, February 20, 2008

Esos típicos errores

Desgraciadamente no siempre se hace el trabajo sin cometer errores, en mi trabajo he estado al lado de profesionales muy capaces, sin embargo, con el tiempo me he dado cuenta que los mismos errores se repiten una y otra vez, si pudieramos tener un postit al lado de nuestro monitor con un listado como este, creo que cometeríamos varios errores menos, se los dejo:

  1. No leer lo que publicas
    Eres diseñador, estamos claros, hay un periodista para hacer los contenidos, OK. Pero aún así, lee todo lo que colocas, no importa si no lo escribiste tú. Si hay errores evidentes, no dudarán en culparte (y en parte, tendrán razón).
  2. No leer los mails enteros
    Cuando te llegue un mail con requerimientos, leelo ENTERO (incluyendo los forwards), entiéndelo, si hay cosas que no entiendes pregúntalas inmediatamente, tu cliente estará gustoso de notar que su requerimiento es tomado en cuenta lo antes posible.
  3. No tomar los requerimientos
    Hazte cargo de lo que te piden, no dejes nunca cosas en el aire, si hay algo que no te corresponde hacer o te faltan materiales para hacerlo, hazlo saber a tu superior. No lo dejes volando.
  4. No revisarlo entero
    Revísalo TODO, no porque una botonera vincule bien, significa que todas vinculen bien, no porque tu sitio se vea bien en tu equipo significa que está listo, dedica tiempo a revisar tu trabajo.
  5. No usar lo que haces
    Me ha tocado ver a varios (me incluyo) diseñando cosas que nunca han probado, si diseñas una interfaz… ponte del lado del usuario, no pienses como diseñador, actúa como usuario, luego vuelve a pensar como diseñador.
  6. Ser creativo sólo por serlo
    La creatividad es una herramienta de la comunicación, establece tus objetivos y trabaja en función de conseguirlos, no porque seas un “creativo” debes hacerlo todo basado en metáforas. A veces con ser directo y simple, cumplirás tus objetivos.
  7. Ser desordenado
    Diseñar y producir implica tener una pasión por el orden, establecer metodologías y mecanismos de orden en tu trabajo te ayudará a simplificar tareas mecánicas y dedicarle tiempo a tareas creativas.
  8. Decir que algo está listo cuando aún no lo está
    He visto a varios responder a la pregunta ¿está listo el encargo? con un rotundo si. Aunque la verdad sea que aún faltan minutos para terminar ese trabajo. Sincera tus plazos, si algo no está listo, no lo está. Si hay algo que lo está demorando… manifiéstalo. Lo peor es decir que algo está listo cuando falta algo por hacer.
  9. No avisar cuando algo está listo
    Terminaste? lo revisaste? lo leiste? lo probaste?, OK entonces ahora avisa a quien corresponda que tu trabajo está listo, hazlo por un medio escrito para que quede registro de la entrega (fecha y hora) sólo en ese momento puedes empezar a olvidarte de ese encargo.

Fuente: http://www.digilicious.cl/2008/02/18/esos-tipicos-errores/

Wednesday, January 23, 2008

La Web 2.0, reñida con el diseño


Jakob Nielsen, gurú de la usabilidad, opina que la Web 2.0 hace que las empresas descuiden los principios del diseño.


La usabilidad y el diseño pensado en el usuario son conceptos que hay que tener siempre presentes, pero los sitios basados en el concepto de la Web 2.0 no tienen en cuenta estos principios. Al menos, esa es la opinión de Jakob Nielsen, experto en usabilidad y diseño.

Nielsen alerta sobre la moda del 2.0, que lleva a las empresas a descuidar los principos del diseño web desarrollados en la última década, del que él propio Nielsen ha sido fervoroso divulgador desde su página web. Llenar los sitios de herramientas personalizadas conlleva el riesgo de imitar los sitios "llamativos pero inútiles" que proliferaron en los momentos álgidos de la burbuja puntocom: sitios como el paradigmático Boo.com, de apariencia atractiva pero nula usabilidad.

Toda página web debe tener en cuenta cuando menos una serie de principios básicos: facilidad de uso, buenas herramientas de búsqueda, texto sin jergas, tests de usabilidad y tener en cuenta el diseño antes incluso de empezar a progamar. Desgraciadamente, Nielsen opina que la fiebre por sumarse al vagón 2.0 lleva a muchos a dejar de lado estos principios.

Para Nielsen, el problema no es el concepto en sí de la Web 2.0, es decir, la idea de comunidad, el contenido generado por los usaurios y las páginas más dinámicas y activas. El error está en colocar estos elementos por encima del diseño, otogarles el protagonismo cuando deberían ser elementos secundarios.

Por último, Nielsen se plantea incluso la utilidad de adoptar tecnologías 2.0, teniendo en cuenta que recientes estudios demuestran que el porcentaje de usuarios activos que contribuye con sus propios contenidos es mínimo: apenas el 10% (de los que sólo el 1% lo hace regularmente), frente al 90% que no aporta nada. Para la mayoría, Internet es una herramienta, no una meta. Por este motivo, Nielsen cree que es un error que las empresas diseñen para ese grupo minoritario, a costa de convertir la web en mucho menos usable para la gran mayoría.

Fuente: http://www.baquia.com/noticias.php?id=12366

Friday, January 18, 2008

No todos son iguales, pero hay que saber elegir

Clientes

En el camino de los negocios conocemos cantidad y diversidad de clientes, personas, proveedores, que como seres humanos y empresas, tienen diferente ideología. Nos encontramos con clientes buenos, y otros no tanto.

De una experiencia desagradable que tuvimos con una empresa, aprendimos varios puntos importantes que debemos tomar en cuenta antes de enredarnos en un contrato para prestar nuestros servicios.

1. Historial de la empresa: Es el punto más importante, hay que investigar el historial de la empresa para ver si es confiable, si ha tenido problemas con clientes pasados y que tal anda su “reputación” dentro de su giro. Si nos enteramos que tienen un historial no muy agradable o malo, pensemos realmente si nos traerá beneficios. En ocasiones es mejor alejarnos porque podremos perder mucho más.

2. El contrato: Es de vital importancia que nuestro contrato sea, concreto, claro y que tenga fechas en las cuales vamos a terminar de prestar los servicios, fechas de pago y por supuesto tener una taza de interés por pago atrasado, esto para “presionar” a la empresa a que pague a tiempo.

3. Las llamadas telefónicas: Es importante estar al tanto de las actividades de la empresa con regularidad, llamar una vez por semana para preguntarles que les ha parecido el servicio y cuando podemos pasar por el pago siguiente. Nunca confiar demasiado y dejar pasar hasta la fecha acordada. Puede ser que la empresa desaparezca de un momento a otro sin avisar.

4. Hacer citas: Para ir a recoger un cheque o el efectivo, es de gran importancia hacer citas, de no ser así podemos perder mucho tiempo y dinero en dar vueltas que no servirán de nada

5. Ser paciente: No desesperarnos si a la segunda llamada no nos han pagado, probablemente tuvieron problemas, pero si se atrasan 2 semanas entonces las cosas cambian, sin embargo es muy importante no perder la cordialidad, suele suceder que ya estamos artos de llamar y no recibir una respuesta válida, pero recordemos que la reputación y la imagen de nuestra empresa está en juego si perdemos la paciencia y les gritamos en la cara lo malos que han sido. Ahora que si pasan 3 meses y no hay respuestas, mejor llamamos a un abogado o un policía para que vayan con nosotros por el pago.(Es broma…pero podría ser)

6. Y la más importante. Retroalimentación: Al término del contrato, debemos evaluar si realmente queremos continuar prestando servicios a la empresa, si nos costó trabajo cobrar los cheques, si fueron amables, etc. Suele pasar que una empresa es muy mala con los pagos, y al término del contrato nos solicitan otros servicios nuevamente, y esta vez de una suma interesante, hay que pensar si realmente nos conviene continuar o mejor despedirnos cordialmente. Por lo general nunca cambian.

Conocimos a una de las empresas más irresponsables del estado, tuvimos la oportunidad de ver como empresas nacionales, les gritaban en la cara lo malos que eran. Con decirles que tardamos casi un mes en cobrar un saldo de $450.00 PESOS. Eso nos pasó por no investigar, pero aprendimos que los puntos ya mencionados son importantes al momento de hacer negocios con cualquier empresa.

No todo lo que brilla es oro.

Fuente: http://www.closip.com/blog/noticias/2008/01/17/no-todos-son-iguales-pero-hay-que-saber-elegir/

Contrato de diseño web

Si eres desarrollador web ¿cuantas veces has tenido la necesidad de hacer un contrato de desarrollo de sitio web? esto es algo muy necesario para evitar malos entendidos y formalizar la relación con el cliente. Yo antes cada contrato lo hacía diferente y sinceramente sin respaldo legal.

ley-en-linea.png

Existe un proyecto dentro del sitio de ley en línea llamado El Contrato de Desarrollo de Sitio Web este es un proyecto abierto que acepta opiniones para mejorarlo ya que cuenta con un wiki y está publicado con licencia Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 Mexico License el autor de este contrato es Jorge Ringenbach sin duda este proyecto va ser de muchísima utilidad para muchos desarrolladores web.

Lo que no sé es si este contrato tenga validez completa en otro país que no sea México porque en la sección de resolución de controversias dice que se somete a la legislación vigente de la ciudad de México.

Descarga el contrato de Desarrollo de Sitio Web, visto en Maestros del Web

Descarga alternativa.

Fuente: http://www.carlosleopoldo.com/post/contrato-de-diseno-web/

Monday, January 14, 2008

Color, arquitectura y estados de ánimo


Descargar documento en formato pdf

1. Introducción

El color en las artes es el medio mas valioso para que una obra transmita las mismas sensaciones que el artista experimento frente a la escena o motivo original; usando el color con buen conocimiento de su naturaleza y efectos y adecuadamente será posible expresar lo alegre o triste, lo luminoso o sombrío, lo tranquilo o lo exaltado, etc.

Nada puede decir tanto ni tan bien de la personalidad de un artista, del carácter y cualidades de su mente creadora como el uso y distribución de sus colores, las tendencias de estos y sus contrastes y la música que en ellos se contiene.

El color en la arquitectura y decoración se desenvuelve de la misma manera que en el arte de la pintura, aunque en su actuación va mucho mas allá porque su fin es especialmente especifico, puede servir para favorecer, destacar, disimular y aun ocultar , para crear una sensación excitante o tranquila, para significar temperatura, tamaño, profundidad o peso y como la música, puede ser utilizada deliberadamente para despertar un sentimiento. El color es un mago que transforma, altera y lo embellece todo o que, cuando es mal utilizado, puede trastornar, desacordar y hasta anular la bella cualidad de los materiales mas ricos.

El color, como cualquier otra técnica, tiene también la suya, y esta sometido a ciertas leyes, que conociéndolas será posible dominar el arte de la armonización, conocer los medios útiles que sirven para evitar la monotonía en un combinación cromática, estimular la facultad del gusto selectivo y afirmar la sensibilidad.

El hogar de nuestros días no solo requiere color para embellecer y animar, sino color que resuelva las necesidades psicológicas de quienes vivan con el. La elección del color esta basada en factores estáticos y también en los psíquicos, culturales, sociales y económicos.

El nivel intelectual, el gusto de la comunidad, la localización y el clima también influyen en la elección del esquema y asimismo la finalidad o propósito de cada pieza. Pero entre todos estos factores del color, quizás sea el mas importante el psicológico, ¿por qué nos alegra, inquieta, tranquiliza o deprime un determinado conjunto o combinación cromática?

Un ejemplo: El color de un edificio es como el envase o presentación de un producto que actúa en estimulo de la atención y para crear una primera impresión, favorable o negativa.

Los colores del interior deben ser específicamente psicológicos, reposados o estimulantes porque el color influye sobre el espíritu y el cuerpo, sobre el carácter y el animo e incluso sobre los actos de nuestra vida; el cambio de un esquema de color afecta simultáneamente a nuestro temperamento y en consecuencia a nuestro comportamiento.

El color es luz, belleza, armonía y delicia de la vista, pero es sobre todo, equilibrio psíquico, confort y educacion

Resumen:

1. Introducción
2. El Color
3. Clasificacion de los colores
4. Armonización de los colores y su búsqueda
5. Contrastes-la interacción del color
6. El campo de los colores es tridimensional
7. Cualidades Tonales
8. Los elementos de la escala
9. Experimentación en niños en relación a la forma y el color
10. La significación del color: semiótica y teoría del color
11. Psicología del color
12. Cromoterapia
13. Esplendor de la naturaleza
14. La vista y los colores
15. Los colores como tratamiento
16. Cromoterapia Ambiental
17. Cromoterapia y elementos
18. Colores y personalidad
19. Test de los colores
20. Arcana simbología de los colores
21. Policromía arquitectónica: posturas teoricas de los siglos XIX y XX
22. Color y arquitectura
23. Selección del color
24. Ideas para esquemas
25. El Color En La Industria
26. El ambiente visual
27. El color en la clínica mira
28. El color: un componente de cualificación y significación del ambiente urbano
29. El color en el medio ambiente como código social popular
30. Propuesta
31. Bibliografía


Descargar documento en formato pdf

Fuente: http://www.monografias.com/trabajos5/colarq/colarq.shtml

¿Que quieres transmitir con tu web? Los colores te ayudarán

La programación web no es más que otra forma de vender un producto que has de hacer llegar a los ojos de los clientes y enamorarlos en la primera impresión. Por ello además de tener en cuenta una estructura idónea y adaptada al rango de usuarios a los que va dirigida es importante a la vez que interesante tener en cuenta los colores que vamos a usar en nuestros proyectos.

Los colores es lo segundo que nuestro cerebro capta despues de la estructura, por ese motivo hemos de pensar muy a conciencia que colores usar para vender nuestro producto. Al igual que colocamos en la parte superior el título de nuestra página para que sea lo primero que vea nuestro usuario, hemos de pensar en el conjunto y crear un estructura homogenea que transmita unos sentimientos al usuario.

additivecolormixing.png

Los colores nos afectan psicológicamente y producen ciertas sensaciones, y esas hemos de aprovecharnos de dichas sensaciones para conseguir nuestro objetivo, hemos de tener en cuenta que la asociación de colores es algo cultural, por lo tanto tenemos que tener cuidado con que elegímos, ya que podemos causar el efecto inverso al que queremos provocar. Por ese motivo hemos de conocer nuestro ratio de mercado y a quien vamos a dirigir nuestro sitio web.

Para empezar deberemos saber que cada color ejerce sobre una persona 3 efectos:

  1. Impresión: llamamos la atención del usuario.
  2. Expresión: conseguimos transmitir una emoción por lo comentado anteriormente.
  3. Construye: dotamos de significado, convertimos en un simboló.

Colores y sensaciones

Colores 2

  • Rojo: Culturalmente asociamos rojo con pasión ardiente, sexualidad, erotismo… aunque también con peligro, error. Hemos de tener cuidado con que tipo de rojo usar ya que producen efectos agresivos. Jugando con las tonalidades más claras de este color podemos aportar un toque sensual a nuestro sitio web.
  • Anaranajado: Representa la alegría, la juventud, el calor, el verano,… causa optimismo, seguridad y confianza. Ayuda a disminuir la fatiga, es ideal para lugares donde se ha de transmitir mucha información.
  • Amarillo: El color más luminoso, es el color de la luz del sol. Provoca buen humor y alegría, estimula la vista y el sistema nervioso. Está vinculado a la actividad mental y la inspiración creativa ya que despierta el intelecto, de ahi que se use para indicar alerta. (offtopic: ¿Nunca habeis probado a estudiar con una hoja amarilla debajo de los apuntes? Se queda todo más fácil :D).
  • Verde: Simboliza esperanza, es un color hipnótico, relajante, ayuda a controlar el insomnio, la fatiga,… Ideal para contrarestar los colores más cálidos.
  • Azul: Es el más sobrio de los colores fríos, transmite seriedad, confianza y tranquilidad. Se el atribuye el poder para desintegrar las energías negativas. Favorece la paciencia la amabilidad y serenidad, aunque la sobreexposición al mismo produce fatiga o depresión. También se aconseja para equilibrar el uso de los colores cálidos. Ideal para ambientes que inviten al reposo.
  • Púrpura: Asociado con el misterio, la intuición y la espiritualidad este color ayuda a disminuir la angustia, las fobias y el miedo.
  • Blanco: La pureza por excelencia, paz, alegría y pulcritud, aunque en los paises islámicos simboliza la muerte.

  • Negro: El color más oscuro solo puede transmitir dolor, tristeza, melancolía y irritabilidad. Denota poder, misterio y estilo.
  • Gris: Puede expresar elegancia, respeto, desconsuelo, vejez y aburrimiento, es un color neutro que no influye en los otros colores.
Conociendo ya el significado de los colores, solo nos queda unirlos de una forma equilibrada y homogenea para transmitir una sensación que el usuario perciba de forma inconsciente, de esta forma tendremos un punto más para conseguir que vuelva.

Fuente: http://www.anieto2k.com/2006/09/23/%c2%bfque-quieres-tranmitir-con-tu-web-los-colores-te-ayudaran/

Tuesday, December 04, 2007

23 puntos a tener en cuenta en el diseño web

Y en muchas, pero que muchas ocasiones las decisiones adoptadas son contrarias a la orientación al usuario del sitio web.

Aquí tenéis 23 sugerencias que se pueden extraer del estudio que se han realizado con la técnica “eye-tracking” y que puedes utilizar para mejorar el diseño de tu página web. El artículo original, en inglés, esta publicado en Virtual Hosting.
  • El texto atrae la atención antes que los gráficos. Contrariamente a lo que podría imaginarse, lo primero que un usuario visita en un sitio web no son las imágenes. La mayoría de los usuarios que llegan a tu sitio lo hacen buscando información, y no imágenes, así que asegúrese de que tu sitio web está diseñado para que las partes más importantes de tu texto son lo más destacado.
  • El movimiento inicial de la mirada se centra en la esquina superior izquierda de la página. No debe sorprender que un usuario visite las páginas web de esta manera, ya que la mayoría de las aplicaciones están diseñadas con la parte superior izquierda como el foco principal. Puedes hacer un favor a tu sitio web al mantener este formato a la hora de crear el diseño. Recuerda, tienes que tener en cuenta lo hábitos de los lectores si quieres tener un sitio orientado al usuario.
  • Al inicio, los usuarios buscar en la parte superior izquierda y en la parte superior de la página antes de desplazarse hacia abajo y hacia la derecha. Los usuarios generalmente escanean las páginas web en forma de ‘F’. Asegúrate de que los elementos importantes de tu contenido se encuentran en estas áreas clave. Utiliza titulares, subtítulos, viñetas, y texto resaltado a lo largo de la página de manera que incites a los lectores a leer más.


  • Los lectores ignoran los banners. Los estudios han demostrado que los lectores en gran medida hacen caso omiso de los anuncios (banners). Si estás tratando de hacer dinero a través de anuncios, lo que necesitas es ser creativo en su ubicación o en los tipos de anuncios que coloques en tu sitio.
  • El diseño en el formato de las fuentes no se tiene en cuenta. ¿Por qué? Pues porque los usuarios suponen que son anuncios y que no tienen la información que necesitan. De hecho, los estudios demuestran que los usuarios tienen dificultades para encontrar la información en letras grandes de color con formato.
  • Mostrar los números como números. Lectores les resultará mucho más fácil de encontrar información en su sitio si utiliza números en lugar de escribirlos. Recuerda que estás escribiendo para los lectores que van a ser principalmente de exploración de su sitio, a fin de hacer que les resulte más fácil encontrar lo que necesitan y mantenerlos interesados.
  • El Tipo de tamaño de la letra influye en el comportamiento de la visualización. Las fuentes pequeñas aumentan la concentración de la lectura en el texto mientras que las fuentes más grandes animan al usuario a explorar por la página. Dependiendo de tus necesidades, elige un tipo de letra u otro.
  • Haz que tus usuarios puedan buscar en una parte específica del texto. No uses subtítulos como un formato particular, para ello asegúrate que sean pertinentes y de interés. También pueden ayudarte si incluyes palabras clave que ayuden a la idexación de la web.
  • Los usuarios, en general, exploran la parte inferior de la página. Puedes utilizar esto a tu favor dándoles información clave cuando los lectores están explorando la página. Resaltar algunas secciones o crear listas con viñetas ayuda a encontrar información y a leer la página.
  • Frases cortas mejor que párrafos largos. La información en tu página debe de estar diseñada para el corto tiempo de atención de la mayoría de los usuarios de Internet. Mantén los párrafos y las frases cortas a menos que el contexto lo requiera, por ejemplo las descripciones de los productos de un sitio de comercio electrónico.
  • Una columna es mejor que varias para conseguir atraer la atención de los usuarios. No abrumes a los visitantes de tu sitio con demasiada información. La simplificación es mejor en algunos casos. La utilización de múltiples columnas es probable que sean ignoradas por los usuarios.
  • Los anuncios en la parte superior y en la parte izquierda de una página recibirán la mayor atención. Si vas a publicar anuncios en tu sitio, intenta integrarlos en la parte superior izquierda de la página, dónde tendrás la mayor atención visual. Pero sólo porque los lectores los vean no significa que hagan clic sobre ellos, por lo tanto no sacrifiques el diseño sólo para ganar un poco de visibilidad.
  • Los anuncios colocados junto a los mejores contenidos son los más vistos. Si usted quiere que sus anuncios se vean y que hagan clic en él, incorpóralos en tu diseño de manera que se coloquen cerca de los elementos más interesantes de tu contenido. Los usuarios podrán encontrar lo que necesitan y además tendrás una óptima visualización de tu publicidad.
  • Los anuncios de texto son los más leídos. Como dijimos anteriormente, la media de usuarios de Internet, en general, no pierde mucho tiempo buscando en cosas que parecen ser de inmediato anuncios. Esa es la razón que sean mejores los anuncios de texto. No se trata de distraer y de mezclar con el resto del contenido de la página, pero son visualmente menos irritantes para el lector y, en definitiva, tienen más éxito.
  • Las imágenes grandes reciben más atención. Si vas a usar imágenes en tu página, cuanto más grandes mejor. La gente está más interesada en una imagen donde se pueden ver claramente los detalles y la información. Sólo asegúrate de que toda imagen que utilizas es particularmente pertinente a tu texto, de lo contrario es muy probable que sea ignorada.
  • Imágenes sencillas y limpias atraen más la atención. Si bien pueden funcionar bien con tu diseño, las imágenes artísticas no van a obtener mucha atención del lector. Si está usando fotos con gente, asegurarse de que son claras. Cabe señalar también que las fotos con el “verdadero” gente, y no con modelos, dan mejor resultado.
  • Utiliza titulares. Lo primero que leen los usuarios en una página son los titulares. Asegúrate que no bloquean otros temas de la página y que estos destacan lo suficiente para incitar al lector a seguir buscando.
  • Los usuarios pasan mucho tiempo mirando los botones y menús. Debido a esto, tendremos que dedicar algo de tiempo extra para asegurarnos que están bien diseñados. Después de todo, estos no sólo llaman mucho la atención de los ojos sino que son uno de los elementos más importantes de la página.
  • Las listas hacen que el lector mantenga la atención durante más tiempo. Una manera útil de para facilitar la lectura es la utilización de listas en lugar de párrafos largos. Utilice números o viñetas para resaltar la información importante dentro de su contenido. Esto hará tu sitio más escaneable y más fácil para los usuarios el poder encontrar la información que está buscando.
  • Evitar grandes bloques de texto. Los estudios han demostrado que los visitantes no se van a tomar el tiempo de estudiar grandes bloques de texto y no importa lo bien escrito que estén o la información que proporcionen. Debido a esto, es necesario romperlos en pequeños párrafos. Destaca áreas específicas, puede ayudar a mantener la atención del usuario.
  • Dar formato al texto puede llamar la atención. Para guiar al lector a los puntos más importantes del texto utilizar negrita, mayúsculas, cursiva, color, y texto subrayado. Pero con prudencia, si te excedes dificultará la lectura.
  • El espacio en blanco es bueno. Si bien se podría caer en la tentación de poner algo de texto en cada rincón de la página, es realmente mejor dejar algunos huecos. Los sitios con demasiado contenido tienden a abrumar a los usuarios y esto hace que hagan caso omiso de parte del mismo. Por lo tanto, deja espacios visuales limpios para no saturar al usuario.
  • Las herramientas de navegación funcionan mejor cuando se colocan en la parte superior de la página. No deseas que los lectores que llegan a tu web sólo busquen en la página inicial, querrán que naveguen por otras páginas y que localicen contenidos que puedan interesarles. Puedes ayudarles haciendo su navegación fácil, para ello coloca la barra de navegación en la parte superior de la página.


Fuente: Desarrollo Web

Informe de Carlos Guadián Orta*
URL: http://www.k-government.com/2007/11/17/23_puntos_a_tener_en_cuenta_en_el_diseo_web/

* Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

Tuesday, November 13, 2007

Evitando el "click aquí": el arte de enlazar

En Coding Horror han escrito “Don’t Click Here: The Art of Hyperlinking” un artículo interesante sobre las mejores formas de enlazar.

El artículo contiene una introducción al “hyperlink” (normalmente traducido como hiperenlace en castellano pero suena horrible) que aunque no está mal creo que es más interesante los once puntos que tratan (las imágenes que sirven de ejemplo en cada punto también son de ahí):

  1. Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos. Cuando se construyen enlaces hay que evitar la “Fitt’s Law. Si lo que estás enlazando es pequeño, hazlo grande. Si no puedes hacerlo más grande, al menos añade bordes para que sea más fácil a la gente hacer click.

    En la imagen siguiente sólo los números están enlazados, una pena:

    Ejemplo de enlaces pequeños y difíciles de clickar

  2. El primer enlace es el más importante. El primer enlace va a llevarse la mayor parte de la atención del lector y el mayor porcentaje de clicks. Elige tu primer enlace cuidadosamente. Empieza por lo importante y no lo malgastes en una trivialidad. La imagen siguiente es un buen ejemplo de enlazar primero lo más relevante:

    El primer enlace debe ser el más relevante

  3. No enlaces todo. Usar demasiados enlaces convertirá el texto en ruido. Esto funciona en dos dimensiones: enlazar excesivamente hace el texto difícil de leer y además devalúa el valor de los otros enlaces. Enlace con moderación. Enlaza sólo las cosas lo suficiente importantes para merecer un enlace. Un ejemplo de lo que nunca hay que hacer sería algo como esto:

    Ejemplo de un exceso a la hora de enlazar

  4. No alternes radicalmente el comportamiento de los enlaces. Los enlaces son la piedra angular de la web. Los usuarios se han formado durante años unas expectativas basadas en el existente comportamiento de sus navegadores. Cuando cambias la forma en que los enlaces funcionan, estás redefiniendo una parte fundamental de la web. ¿Es eso lo que realmente quieres? ¿Es eso lo que realmente tus lectores quieren?.

    Veamos un ejemplo de un “gadget” que altera radicalmente el comportamiento de los enlaces:

    Ejemplo de un gadget que altera el comportamiento de los enlaces

  5. No titules tu enlace como “Click aquí”. No uses las palabras “Click” o “aquí” en ninguna parte del texto del enlace. Describe lo que el enlace hace cuando el usuario hace click en él. Un ejemplo de un “Click aquí” innecesario:

    Ejemplo del uso innecesario del 'click aquí'

  6. No enlaces cosas que el usuario puede querer seleccionar y copiar. Pobre usuario el que tenga que seleccionar y copiar texto enlazado. Esto requiere de un complejo conjunto de movimientos precisos del ratón para funcionar correctamente. Aquí estoy intentando seleccionar el nombre “Ralph Waldo Emerson” que forma parte del enlace:

    Ejemplo de enlaces que hacen difícil seleccionar texto

    Por suerte no es un escenario muy habitual. Pero cuando pasa no es nada agradable y requiere algo de consideración.

  7. No incluyas iconos en cada enlace. Si debemos usar los enlaces con moderación, debemos usar los iconos con extrema moderación. Si todos los enlaces tienen un icono, es ruido. Sólo los enlaces muy poco habituales deben incluir iconos. Pienso que un texto bien escrito puede comunicar fácilmente qué tipo de enlace es, tanto o más que un icono, pero esto entra en el reino de las preferencias de cada uno.

    Ejemplo de los iconos en los enlaces

  8. No hagas el contenido dependiente de los enlaces para funcionar. No todo el mundo va a pulsar en tus enlaces. Pueden estar muy ocupados para hacer click en cada uno de los enlaces que pongas delante suya, o quizá están leyendo el artículo en otro formato en el cual no pueden hacerlo: imprimido, offline, en un móvil. De todas formas es importante ofrecer el contexto necesario para hacer el contenido entendible sin la necesidad de visitar todo lo que está detrás de los enlaces.

    Ejemplo de enlaces que ofrecen muy poco contexto

  9. No ocultes tus enlaces. Los enlaces deben parecer enlaces. Dales un estilo distintivo que no pueda ser confundido con ningún otro elemento o texto de la página. Usa un color único no usado en ninguna otra parte de la página y considera usar la bien gastada convención de un enlace subrayado. En el siguiente ejemplo ¿qué es un enlace y qué no lo es?:

    Ejemplo de enlaces que fácilmente pueden confundir

  10. No mezcles anuncios y enlaces. Aparentan ser enlaces pero son anuncios. ¿Cual es el anuncio y cual es el enlace? De nuevo: ¿qué es un enlace y qué no lo es? Y… ¿qué va a pensar acerca de esto el usuario?…

    Ejemplo de enlaces-anuncios especiales

  11. No ofusques tus URLs. Los usuarios pueden querer ver previamente dónde van a ser enviados con tu enlace poniendo el enlace encima del mismo y viendo la URL en la barra de estado. Evita utilizar redirecciones y servicios acortadores de URLs que hacen la URL totalmente opaca. Los usuarios no deberían tener que lanzarse al vacío y tener fe de que irán donde creen cuando hacen click en tus enlaces.

Ejemplo de enlaces ofuscados

Fuente: http://sigt.net/archivo/evitando-el-click-aqui-el-arte-de-enlazar.xhtml

Monday, November 12, 2007

Haciendo un Brief de Diseño (Design Brief)

Un Brief de Diseño es un documento que integra una explicación por escrito acerca de lo que un cliente quiere de un diseñador para un trabajo en específico. Es una de las partes medulares de la mayoría de los diseños exitosos ya que permite al diseñador saber que hacer y que no hacer antes de empezar a trabajar en lo más mínimo.

Este documento puede ser elaborado por el cliente o por el diseñador en conjunto con el cliente. Salvo las agencias de publicidad o similares que están acostumbradas a tratar con diseñadores, son raros los clientes que llegan con un brief listo a pedir un trabajo.

Yo no era mucho de hacer este documento de una manera metódica, generalmente siempre me ha bastado con una charla acerca de lo que se busca con el diseño, pero debido a una experiencia no tan agradable con un cliente hace un mes, me volví un poco más metódico. Al principio cuesta acostumbrarse pero vale la pena. Y creanme, les ahorrará mucho más tiempo del que creen.

Navegando por la web me encontré con este articulo de Clear Design UK que explica con más detalle los puntos básicos de un Brief, los que podemos resumir en:

  1. Perfil de la Empresa. Haciendo preguntas como... ¿A que se dedica? ¿Cuánto tiempo lleva en el mercado? y otras acerca de como esta posicionada en el mercado. El cliente no debe dar por hecho que el diseñador sabe este tipo de detalles por más obvios que parezcan.
  2. El Objetivo del Trabajo. Así de sencillo. ¿Que desea lograr con el anuncio/folleto/logotipo? Si el cliente no tiene claro esto, es mejor darse cuenta antes para rectificar y no a medio proceso.
  3. El Target de la Empresa. Es decir, el público a quien va dirigido el material a diseñar. Sexo, ubicación geográfica, edad, idiosincracia, ingresos, ocupación, etc.
  4. Presupuesto y Tiempo. Estos se explican solos.
  5. Ejemplos de otros materiales. Muchas veces los clientes tienen una idea muy clara de lo que quieren. Generalmente en estos casos, es porque han visto que tal o cual empresa que se dedica a lo mismo que ellos tiene tal o cual material. Por supuesto, el diseñador no debe copiar el trabajo de otro, pero algunas veces es bueno saber lo que el cliente tiene en la cabeza.

Menciono de nuevo que estos puntos conforman la base de un buen brief, más no nos limitan para agregar más. Podemos ser más específicos en algunos apartados, incluir especificaciones técnicas por ejemplo los valores PANTONE de una marca o medidas de una futura publicación.

Una vez con el brief listo y revisado, entonces le será más fácil y rápido al diseñador lograr resultados efectivos.

Fuente: http://planetoideblanco.blogspot.com/2007/08/haciendo-un-brief-de-diseo-design-brief.html

Sunday, November 11, 2007

Cómo planear (rápidamente) un sitio web

Es muy importante planear un sitio web, ya sea para crearlo o rediseñarlo. En este artículo te damos algunas pautas que pueden serte útiles aún si has creado muchos sitios con anterioridad.

Con las herramientas que existen en la actualidad, como nuestro sistema Area Construye, o programas como Movable Type, Wordpress, Drupal, Joomla y otros administradores de contenido es cada vez más fácil crear un sitio web rápidamente.

Sin embargo es muy importante dedicarle tiempo a la planeación de un sitio web, para que se garantice un lanzamiento exitoso, se facilite el mantenimiento y se prolongue la vida útil del sitio.

La planeación no debe realizarse sólo al principio, sino que es fundamental en todas las etapas del desarrollo del sitio.

Será importante conocer los puntos principales de que consta un desarrollo. A continuación te presento una versión simplificada del sistema de implementación que utilizamos en Area para crear cualquier sitio y que te será útil a tí también.

1. Definir objetivos y alcances
2. Crear estructura
3. Crear contenido
4. Elaborar imagen gráfica e interfaz
5. Producir el sitio

Estos pasos son dependientes y siguen un flujo. Es decir, no podrás crear contenido si no sabes qué estructura tiene tu sitio y tampoco es buena idea crear una imagen gráfica si no sabes qué contenido habrá en el sitio.

1. Define los objetivos que tienes para crear el sitio y determina qué alcances tendrá.

Será necesario que respondas preguntas como las siguientes:

¿A quién me estoy dirigiendo? ¿Qué es lo que quiero lograr con este sitio web? ¿Qué es lo que deseo que los visitantes hagan al entrar a mi sitio web?

Responde con claridad y procura que las respuestas sean medibles y concretas.

2. Define la estructura del sitio

Basándote en el punto anterior, puedes bosquejar qué secciones tendrá tu sitio. No le des tanta importancia a tu misión, valores, y la información acerca de tí y de tu empresa. Procura crear secciones e información valiosa para tus visitantes.

Te será muy útil utilizar mapas mentales y diagramar libremente en papel.

3. Planea y asigna tiempo para la creación del contenido

El contenido, como hemos dicho desde hace mucho tiempo, es la parte más importante de un sitio web y es lo que estarán buscando tus visitantes.

La principal razón por la que se retrasa el lanzamiento de un sitioes la creación del contenido. Ten en cuenta que hay que recopilar texto, imágenes y otros elementos.

4. Diseño Visual

Una vez que tienes definidos los alcances que esperas de tu sitio, que conoces la estructura de sitio, y que tienes bosquejado el contenido, entonces es cuando puedes crear la apariencia visual, no antes.

Es común que se quiera empezar con la parte gráfica al principio y la planeación al final. Lo único que se logra con esto es llimitar el crecimiento de un sitio y hacerlo más difícil de actualizar. Un ejemplo de este error son la gran mayoría de los sitios que están hechos enteramente en Flash, pues casi con seguridad fueron planeados empezando por la parte gráfica.

5. Producción.

Evidentemente la parte más técnica. Si definiste los puntos anteriores en forma clara, la producción será mucho más adecuada, todo estará presupuestado y pronto estarás lanzando tu sitio.

Puedes utilizar los siguientes libros como referencia:

The elements of user experience
Don't make me think
Web ReDesign: Workflow that Works



Fuente: http://www.areaestrategica.com/desarrollo_web_programacion/como_planear_rapicamente_un_si.php

Prueba tu intuición de diseñador

Escenario hipotético: te despierta el teléfono a las 7 AM, lo cual te irrita demás porque anduviste de peda toda la noche anterior, celebrando la multitud de trofeos que te llevaste en un concurso internacional de diseño.

—"¿Hola?" contestas con voz aguardientosa.
—"Señor diseñador, discúlpe por despertarlo, hemos visto su éxito y queremos contratarlo para un proyecto muy importante" te dice alguien con un fuerte acento árabe.
—"¿De qué se trata?" preguntas.
—"Estamos por implementar la señalización del aeropuerto de Dubai, ya tenemos un boleto para usted que sale en dos horas. La paga será muy buena".

Maldiciendo tu recién logrado éxito, te arrastras fuera de la cama, empacas lo que puedes y le pides al taxista que se apresure para no perder el vuelo. Duermes poco, intrigado por el proyecto. Al llegar a Dubai, una persona te espera con tu nombre en un cartelón. En cuanto le dices que eres tú, te apresura a las oficinas del aeropuerto: no hay tiempo que perder.

Al llegar observas a cinco árabes discutiendo acaloradamente en su propio idioma, miran unos papeles sobre el escritorio. Parece ser un proyecto importante.

—"Señor diseñador, lo estábamos esperando!"
—"¿De qué se trata esto?" los divo-diseñadores como tú no tienen tiempo para andarse con nimiedades sociales, como saludar.
—"Señor diseñador, como sabrá Dubai ahora es un centro internacional de comercio, necesitamos un sistema de señalización que puedan enternder personas de prácticamente todas las culturas y naciones. Vimos que ganó muchos premios en un concurso internacional, por eso lo llamamos. Necesitamos que nos diga cual es el pictograma que mejor se comprenda, sin texto, para gente de todo el mundo".


Procede a escoger los pictogramas

Escoge con cuidado porque sólo tienes una oportunidad de hacerlo.

1. Elige el pictograma más comprensible para "primeros auxilios"



2. Elige el pictograma más comprensible para "Elevador"



3. Elige el pictograma más comprensible para "Escaleras"



4. Elige el pictograma más comprensible para "Extintor"



5. Elige el pictograma más comprensible para "Teatro"



6. Elige el pictograma más comprensible para "Boletos"


Ver las Soluciones

Fuente: http://blog.duopixel.com/articulos/intuicion.html

Estructura de un Diseño <-> 1 de 2

Estructura

La estructura en el diseño hace referencia a la manera en que se encuentra distribuidas las formas o módulos dentro del mismo, es decir, nos ayudará a elegir la posición óptima de los objetos que conforman nuestro diseño para evitar la saturación o la mala distribución de la gravedad en los mismos, entre otros, va de la mano con el boceto.
Existen 3 principales clasificaciones de la estructura… Formal, semiformal e informal. Estas tres clasificaciones sirven para dividir u organizar nuestro diseño según los requerimientos que tengamos, por ejemplo:

Estructura Formal: La estructura formal esta caracterizada por la división específica (matemática) o justificada de cada forma, y podría utilizarse para trabajos que requieran proyectar seriedad y organización como en un despacho consultoría empresarial.

Estructura Formal
Un closip formal

Estructura Semiformal: Esta clasificación contiene ciertos módulos de la estructura que se encuentran divididos de manera formal pero contiene algunos otros que se encuentran colocados de manera aleatoria o sin un orden específico, podría aplicarse para la publicidad impresa de una agencia publicitaria, colocando una mitad organizada y otra mitad con elementos creativos que expresen su constante innovación o adaptación, sin una línea a seguir.

Estructura Semiformal
Un Closip organizado e innovador

Estructura Informal: Aquí, más bien no existe una justificación específica para la posición de las formas, generalmente utilizado por diseñadores amateur que no conocen un poco la técnica del diseño, cuando no se tiene un mensaje definido o bien, cuando se necesita proyecta cierta libertad o desorden.

Estructura Informal
Un Closip sin límites ni reglas

Ok, ya sabía eso… Pero ¿de qué me sirve tener un orden?

Como un edificio, un diseño debe contar con una estructura sólida que permita soportar el peso visual de cada uno de sus elementos y justificar su posición, conociendo cada parte de un lienzo se puede determinar la cantidad de espacio que otorgaremos a los distintos elementos, permitiendo dar un mayor énfasis mensaje principal y/o evitando la saturación.

Los profesionales del diseño se guían por la observación de los detalles que puedan ser significativos y los ordenan de manera tal, que logran hacer llegar un mensaje, por su puesto, en base a la correcta distribución de espacios e imágenes.

En conclusión

Estructurar tus diseños antes de comenzar un boceto, te permite dividir correctamente los espacios con el fin de establecer la base que soporte el mensaje se nuestra creación, enfatizando los mensajes y haciéndolos llegar con mayor efectividad.



Fuente: http://www.closip.com/blog/noticias/2007/03/30/estructura-de-un-diseno-1-de-2/

¿Por qué Bocetar?

El boceto (Definición de Bata) es una representación simple de aquello que estás por realizar y te permite anticiparte a complicaciones que puedan surgir al momento de finalizar tu trabajo o bien a darte cuenta de los errores de planteamiento que hayas podido tener. Además, te permite estudiar los puntos principales o los ejes de tus diseños y/o creaciones.

18 posiciones de un busto

En este boceto realizado por Leonardo Da Vinci (izquierda) podemos observar 18 posibles posiciones distintas de un busto femenino, y fue realizado exclusivamente para una sola pintura, la cual es mundialmente conocida y no es la Gioconda (Mona Lisa).

Lo importante en este estudio del busto es la cantidad de proyecciones que tuvo Da Vinci de la posición que adoptaría la mujer de su pintura (Dama del Armiño - abajo)

La proyección previa permite elegir la posición, el color o la forma óptima y adaptar mensajes no verbales que pudiera expresar nuestro diseño o bien podríamos evitar una mala interpretación del mismo, además, nos da una imagen más clara de aquello que buscamos y nos aleja de caer en la improvisación por desesperación.

Dama del Armiño


No existen reglas ni puntos necesarios que tengamos que adoptar o conocer al momento de realizar un boceto, lo importante es que tengamos en la mente aquello que queramos proyectar con lo que hacemos.

Es de vital importancia que lo que hagamos exprese algo y lo exprese de la manera correcta, un boceto te permite estudiar esta manera y nos da una guía definida de qué es lo que vamos hacer al momento de sentarnos frente al monitor.

Pues tenemos la mala costumbre de sentarnos e improvisar, muchas veces acabamos con algo que no queríamos, pero tenemos tan poco tiempo para realizar otro trabajo que nos vemos en la necesidad de entregar aquello que tenemos, aún cuando sabemos que no es lo mejor que podemos entregar.

Bocetos del HeaderEntre otras funciones, evita el esfuerzo innecesario de comenzar a plasmar una mala idea y si trabajas en equipo o para algún cliente o jefe, te permite comparar tus ideas con las de los demás, evitando el rechazo de tu trabajo terminado, que podría ser bueno para ti, pero malo para alguien más, al fin que para todo hay gustos y disgustos.

Para terminar, algunos tips:

  • Antes de tomar el lápiz y sentarte frente a una hoja en blanco, piensa un poco en lo que quieres y concéntrate.

  • Descubre tu propio estilo y trabájalo.

  • Cuando debas realizar elementos como árboles o montañas, busca fotos y observa los puntos que hacen que se vean como tal.

  • Sé perseverante, la práctica hace al maestro.

  • Nunca entregues un trabajo recién terminado, guárdalo y míralo el día siguiente, siempre encontrarás algo que lo haga mejorar.

  • Los humanos tenemos momentos de lucidez y momentos de idio.. digo deslucidez, no te frustres si no surgen las ideas, intenta de nuevo más tarde.

  • Observa hasta el más mínimo detalle de cada elemento que exista a tu alrededor y preguntate a ti mismo ¿Qué lo hace parecer lo que es?.
  • Analiza y busca referencias, aquél que no conoce la historia está condenado a repetirla una y otra vez.

  • sencillo y claro al momento de bocetar.

  • Realiza 2 o 3 bocetos, no tomes la primera idea.

Boceto final del Header


Fuente: http://www.closip.com/blog/?p=49