Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
ContenidoPlaneación de una página web....................................................................................................3
• Propósito...............................................................................................................................3
• Alcance:.................................................................................................................................4
• Estructura:.............................................................................................................................4
• Contenido:.............................................................................................................................4
Los 3 básicos para planear una página web...................................................................................5
Arquitectura de la información....................................................................................................6
¿Qué es la arquitectura de la información y por qué es relevante para tu web?...........................6
Arquitectura de la información, ¿por qué es clave para tu web?...................................................7
Usabilidad...................................................................................................................................8
Características Principales de la Usabilidad....................................................................................8
Áreas teóricas relacionadas............................................................................................................9
Test de usabilidad..........................................................................................................................9
Accesibilidad.............................................................................................................................10
Cómo se logra la accesibilidad web..............................................................................................11
Principios básicos del diseño de una página web accesible:........................................................11
Diseño de Interacciones............................................................................................................12
Las cuatro dimensiones del Diseño de Interacción......................................................................12
6 Tips a seguir para el Diseño de Interacción...............................................................................13
Experiencia del Usuario.............................................................................................................14
10 conceptos clave para entender la experiencia de usuario.......................................................14
Bibliografía................................................................................................................................16
https://www.40defiebre.com/que-es/experiencia-usuario/......................................................16
Planeación de una página web
Tener una planeación ya estructurada de una página web es muy eficiente pues permite
garantizar que el contenido que publique la organización o la persona tenga planeado el
proyecto se diseñe de manera correcta y esté disponible para lograr los objetivos que ya
se planearon, además que es un factor importante ya que no vas a empezar sin saber
nada, sino que vas a seguir un patrón donde ya tendrás todo bien ejecutado y sin margen
de error.
Lo que tenemos que tener en cuenta con la creación de un sitio web es:
• Propósito
1. El propósito es venta de productos y servicios: Cuando se va a crear una
página web que su propósito sea vender algún producto tiene que tener mayor
presupuesto de marketing y un diseño que sea fácil de utilizar por cualquier
persona de cualquier edad.
2. El propósito es generar contactos: Cuando la página web es de contactos el
presupuesto mucho menor al de una página de ventas por lo que el presupuesto
es menos pero considerable, además que con este propósito se generan
profesionales y mayor incremento en visitas a tu página ya que puede tratarse de
algún sitio en donde las personas tengan que mandar algún correo para una
entrevista de trabajo etc.
3. El propósito es establecer credenciales: Cuando el propósito de la página es de
establecer credenciales tiene garantizado que la gente que visite el sitio web se
lleve una buena impresión, además que es mucho más sencilla y menos costosa
que las dos anteriores.
• Alcance:
Cuando ya tenemos el propósito de nuestra página web pero el alcance no es bueno no
se podrán llegar a los objetivos que se marcaron desde el principio ya que lo que tu
planeas desde el inicio es lo que se estima que será y si no se logra eso pues no sirve de
nada porque no tiene caso que tengas una página que esta increíble si la única persona
que lo conoce eres tú.
• Estructura:
La gran mayoría de las páginas web que utilizamos tienen las mismas pestañas o
entradas que hacen que la navegación en el sitio sea mucho más fácil, ya que al agregar
una pestaña que contenga muchas páginas es más fácil para la persona que consulte el
sitio saber en dónde dar clic de acuerdo con lo que estén buscando. Lo usual es que, en
la parte superior de la página se encuentre un encabezado, después una descripción
principal que suele estar en alguna columna lateral en la derecha o la izquierda de la
página o bien pueden estar en dos columnas junto con un pie de página, pero este
esquema no siempre es así en algunas ocasiones puede variar, pero con cosas muy
sencillas que casi no se notan para que las personas que visitan el sitio más seguido no
se confundan al momento de buscar algo.
El encabezado
Columnas de exploración
Área de contenido
Pie de página
• Contenido:
El contenido de las páginas web hoy en día es tan variado que ahora existen paginas
donde solo tienen noticas u otras en donde solo se publican reseñas de películas o series
también en las que las personas publican fotos y hacen tipo catálogos donde muestran
toda la ropa. El contenido de la página web que se creara debe estar acuerdo con el
objetivo de la misma porque no puedes poner una noticia de la ciudad en una página que
su objetivo principal es vender ropa o mostrar películas.
Los 3 básicos para planear una página web1.Objetivos del sitio: un sitio web tiene muchas funciones y debes tenerlo bien definido y
hacerte siempre la pregunta de ¿para qué lo quieres? Porque puede ser una tienda
increíble de ropa que tú mismo diseñas o una página donde expliques los servicios que
ofreces. El chiste es tener muy claro cuáles serán las funciones de la página para que el
diseñador pueda realizarlas tal y como nosotros deseamos.
2. Experiencia del usuario: Ya tenemos nuestros objetivos claros, debemos pensar en
que pasa cuando una persona le da clic a nuestro menú preguntarnos si lo pudo usar, si
le gusto el diseño, si se le facilito o si se le complico ya que el público es para quien va
dirigida esta página web y es a quien se debe satisfacer y así podremos saber si nuestra
página funciona.
3. Modelo de negocios: Sí vamos a realizar una página web de ventas es necesario
pensar en las formas de pago de los usuarios, buscar la manera más fácil en que el
consumidor pueda realizar su compra la más eficaz es PayPal así mismo asegurarse de
que toda la información que se requiera sea útil porque no vas pedir en lo datos
solicitados el nombre de tu mama si no que deben pedirse datos que sean útiles para
realizar los pagos así como el tiempo en que se tardara la entrega etc.
Arquitectura de la información
La arquitectura de la información es el cómo y por qué voy a compartir esa información,
es pensar más detallado todo el contenido de tu página, así como saber a quién va
dirigido y por qué esa información y no otra, la arquitectura siempre toma su dirección y
puede cambiar drásticamente siempre y cuando la empresa encargada de la página web
así lo desee.
¿Qué es la arquitectura de la información y por qué es relevante para tu web?
La arquitectura tradicional busca crear una página que sea bonita que lleve el rumbo de la
empresa por ejemplo si la empresa que hace su página web es de un enfoque minimalista
no vas a hacer una página que tenga muchos colores y dibujitos, si no que quiere lograr
que sea elegante y sofisticado llegando a los objetivos generales de la misma. Y esta
información se puede aplicar a cualquiera del siguiente grupo:
Una página web
Un Blog
Un e-commerce
Los datos de la intranet de una empresa
La arquitectura de la información es el arte y la ciencia de dar forma a productos y
experiencias relacionadas con la información con el fin de fomentar la facilidad de uso y la
localización de los elementos (findability).
El Arquitecto de Información es “la persona que organiza los patrones inherentes a la
información, haciendo entendible lo complejo” o también, que es “una persona que crea
un mapa de información que permite a otros encontrar su vía personal hacia el
conocimiento”. (Richard Saul Wurman, 1975)
Arquitectura de la información, ¿por qué es clave para tu web?
Es muy importante incluir una arquitectura lógica ya que muchos usuarios pueden estar
confundidos a la hora de buscar la camisa que vieron la semana pasado en un comercial
o simplemente no lo encontraron estos son problemas que se enfrentan al momento de no
tener una buena arquitectura. La facilidad de manejar una página web aumentará el
número de visitas y obtendrá la buena experiencia del usuario al momento de ingresar en
ella. Para saber que la arquitectura de información de la página web es exitosa se tienen
que controlar el número de clics que el usuario da se dice que los máximos de clics por
realizar son tres si el usuario rebasa ese límite lo más probable es que salga de la paina
web, lo que significa que hay una falla en la arquitectura y esto provoca que se lleven a
cabo cambios, para darse cuenta de que algo está fallando debemos tomar en cuenta los
siguientes aspectos:
1.Costo de no encontrar la información
Si el usuario que ingreso a la página web no encuentra lo que busca por ejemplo en el
caso de una tienda de ropa, la empresa va a perder el dinero que pudo haber pagado esa
persona por la camisa que no encontró.
2. Costo de encontrarla
Pongamos un ejemplo de una plataforma que muchos estudiantes de la universidad usan
diariamente. NEXUS esta plataforma está diseñada para que los alumnos suban trabajos
o tareas y que el maestro pueda revisarla de tal manera que te ahorras tiempo de ir a la
escuela y el tiempo en que esperas que el maestro le revisa a los demás, pero si esta
página está diseñada para que los alumnos se tarden menos de 3 minutos subiendo una
tarea y al momento de que 11000 alumnos se conectan al mismo tiempo provocaría una
saturación y ahora el tiempo estimado para subir un trabajo ya no será un minuto sino
cinco o diez minutos.
3.Costos de mantenimiento
Cuando tenemos la información bien organizada en nuestro sitio será más fácil reconocer
el lugar donde se publica la información esto hace que sea posible que en algún momento
sea borrada o modificada la información que se publicó.
4. Costos de valor de marca
Esto tiene mucho que ver con la experiencia que tenga algún usuario en la página web
porque si uno de ellos sufrió una mala experiencia como que no encontró lo que buscaba
sus comentarios sobre la marca serán malos porque el momento que él estuvo
navegando en la página no fue nada productivo entonces eso puede llegar a denigrar la
marca.
Usabilidad
"La usabilidad es la disciplina que estudia la forma de diseñar Sitios Web para que los
usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible" y
agregar que "la mejor forma de crear un Sitio Web usable es realizando un diseño
centrado en el usuario, diseñando para y por el usuario, en contraposición a lo que podrá
ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad".
(Yusef Hassan)
Características Principales de la Usabilidad
Facilidad de aprendizaje: Es cuando un usuario que nunca ha utilizado tu página
web y se la muestras sin enseñarle como se usa el solo puede hacer todo lo que
tú le pidas que busque o que realice cualquier actividad dentro del sitio.
Facilidad y Eficiencia de uso: Es el tiempo que una persona que ya aprendió a
utilizar la página se tarda en realizar las tareas que se le piden.
Facilidad de recordar cómo funciona: Se refiere a saber ya claramente las
características y funciones con las que cuenta la página para así recordarlas en
algún futuro.
Frecuencia y gravedad de errores: Es la pestaña o cualquier otra forma de
ayuda con la que deben contar las paginas por si el usuario realizo una actividad
mal dentro del sistema y que en ese espacio de ayuda especifiquen bien lo que se
tiene que hacer para volver al sitio de inicio.
Satisfacción subjetiva: Es el nivel de satisfacción de los usuarios obtienen por el
buen funcionamiento de la página, así como la facilidad de usarla lo que provoca
una buena experiencia de usuario.
Áreas teóricas relacionadas
Útil: Es necesario preguntarnos si nuestros servicios son útiles para así también
proponer soluciones que sean innovadoras para que al momento de que un
usuario ingrese al sitio sea por manejarla más fácil.
Usable: Corresponde a la facilidad de uso que aun así sigue siendo un aspecto
fundamental pero no suficiente, por lo que se debe complementar con las demás
facetas.
Deseable: Es cuando un sitio es eficiente en partículas cuando se implementan
medios más complejos como por ejemplo las imágenes, sonidos, animaciones,
videos, etc., todo esto se tiene que equilibrar cono los demás valores del diseño.
Encontrable: Las páginas web deben ser un sitio navegable en donde el usuario
encuentre todo lo que busque y lo que necesita.
Accesible: Los sitios web deben ser accesibles para toda la población. Por lo que
deben tener un buen diseño para que cualquier persona pueda utilizarlo.
Creíble: La credibilidad es uno de los factores más importantes por lo que se debe
supervisar constantemente que no existan cosas dentro del sitio que quite la
credibilidad del usuario en nuestra información.
Test de usabilidad
Existen diferentes métodos que nos permiten medir la usabilidad uno de los más comunes
es realizar un test de usabilidad
¿Qué es un test de usabilidad?
Es una prueba en al que se monitorean a usuarios reales y se verifica como es que
realizan las tareas en un sitio web para así estudiarlos y saber cuáles fueron los erros o
aciertos en la página web.
Los test tienen como objetivo mejorar la usabilidad del producto, es decir que son útiles
para determinar que el sitio web sea útil para el público al que se quiere que utilice el
servicio.
Un test de usabilidad nos permitirá:
Encontrar problemas de usabilidad en el sitio.
Proponer soluciones para los problemas encontrados.
Comparar la competencia y desarrollar las mejoras para que en un futuro la
usabilidad sea excelente.
Accesibilidad
La accesibilidad tiene el objetivo de lograr que los sitios web puedan ser utilizados por el
mayor número de personas, independientemente de tener alguna discapacidad o tener o
no algún conocimiento además que tampoco tiene que importar la capacidad de algún
dispositivo ya que en cualquier instrumento tecnológico debe verse y abrirse normal.
Desde hace mucho se volvió una necesidad que la web fuera universal o sea que pudiera
utilizarlo cualquier persona y que fuera accesible y funcionara bien por lo que Tim
Berners-Lee estableció el diseño de un principio que dice:
“The power of the Web is in its universality. Access by everyone regardless of disability is
an essential aspect.”
“El poder de la Web está en su universalidad. El acceso por cualquier persona,
independientemente de la discapacidad que presente es un aspecto esencial.”
-Fuente: World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative. Tim Berners-
Lee, director del W3C e inventor de la World Wide Web-
Existen y siguen perdurando hasta el día de hoy algunos mitos sobre la accesibilidad que
la mayoría dicen lo mismo por lo que se puede resumir en que la accesibilidad es muy
cara y supone un costo extra en el desarrollo de un sitio web sin que los beneficios seas
importantes. Además, otro de los grandes mitos que perduran es que se dice que la
accesibilidad solo beneficia las personas que tienen una discapacidad cuando no es así,
la accesibilidad beneficia a todo el mundo.
Cómo se logra la accesibilidad webPara poder lograr la accesibilidad en nuestro sitio web tenemos que ser conscientes de
que no todas las personas utilizan la web con los mismos medios técnicos y que algunos
de los usuarios no perciben correctamente el contenido que es publicado en las páginas
web.
Principios básicos del diseño de una página web accesible:
crea páginas que se transformen correctamente.
ofrece el contenido de manera comprensible para facilitar la navegación por el sitio
web.
Al momento de que ya sea un principio básico el decir que una página ofrezca el
contenido de un amanera comprensible es algo muy importante porque siempre se tiene
que buscar facilitar la navegación del usuario en la web, el objetivo principal de todas las
páginas web es que la experiencia del usuario al momento de navegar por su sitio sea
agradable y fácil de usar por lo que el obligatorio crear una página donde no existan
dudas ni cosas que puedan llegar a confundir al usuario y crear una mala experiencia de
navegación.
En la página Six Principles of Accessible Web Design: An Introduction to the WAI Page
Author Guidelines nos muestran seis principios de diseño web accesible que explican
algunos detalles técnicos que son muy específicos por lo que decidí tomar de ejemplo
cuatro que me parecieron muy importantes y que tienen mucha razón en cuanto a lo que
dice y la forma en que nos plasma los principios: Crea páginas que cumplan los
estándares aceptados.
Conoce las diferencias entre elementos de presentación y de estructura; emplea hojas de estilo cuando sea posible: Esto quiere decir que al momento
de diseñar tu página web y pones títulos de temas que son interesantes puedes
emplear alguna imagen o algún fondo sobre ese título que haga que se diferencie
de los demás.
Utiliza las características de HTML (4.0) para proporcionar contenido rico sobre el propósito y la función de los elementos: Esta función es para que la
calidad de tu contenido sea mejor al momento de que se vea plasmada en el sitio
web.
Asegúrate de que las páginas se pueden navegar con el teclado: Existen
maneras de hacer “trucos” con el teclado para que se cumpla una tarea, por
ejemplo, cuando queremos copiar algo ponemos “Ctrl C” y para pegar ponemos
“Ctrl V”, así también en la página debe haber cierto “truco” para que
automáticamente se abran en otras páginas el contenido que tenemos en nuestro
sitio.
Proporciona métodos alternativos para el contenido no textual, incluyendo imágenes, scripts, multimedia, tablas, formularios y marcos, para los agentes de usuario que no los puedan mostrar: Siempre cuando algún texto
contiene imágenes, videos, tablas, etc., es más atractivo visualmente además que
le dará un mejor aspecto al contenido publicado.
Diseño de Interacciones
La interacción es cuando damos doble tap para dar un like en Instagram, es cuando
tienes que mover el mouse de tu compu para darle clic a un icono del escritorio. El diseño
de interacciones se creó debido a la necesidad de estudiar y hacer más fácil las
interacciones entre las personas y su ambiente, aunque la interacción puede darse con
cualquier cosa cuando se habla de interacciones en la web es más relacionado con las
actividades que queremos hacer o cunado queremos utilizar un producto o dispositivo
para realizar una tarea y que nos responda de la manera que nosotros queremos. El
diseño de una interacción nos ayuda a planear y crear ideas para ofrecer una buena
experiencia del usuario.
Las cuatro dimensiones del Diseño de Interacción
1º Dimensión – Palabras: Las palabras que se utilicen deben ser fáciles,
entendibles en las que el usuario se sienta cómodo al momento de generar una
interacción.
2º Dimensión – Representaciones visuales: Cuando en la página se colocan
gráficos, imágenes, iconos, diagramas deben ser utilizadas con cautela, pero
sobre todo deben tener alguna función, no se debe poner solo por decoración.
3º Dimensión – Espacio: Es con lo que interactúa el usuario en el mundo real.
Estos pueden ser objetos físicos de una compu como un mouse, apuntador,
teclado, etc., que son utilizados como herramientas de mando.
4º Dimensión – Tiempo: Esta dimensión se refiere a la duración que el usuario se
queda interactuando con las palabras y todos lo visual que se implementó en el
sitio web.
Existe también una quinta dimensión que fue propuesta por Kevin Silver que es el
comportamiento, con esta él se refería a que el usuario va a tener emociones y
reacciones al momento de interactuar o realizar alguna actividad en el sitio web y que el
sitio sea eficiente ya que cualquier persona puede hacer cosas diferentes en la página y
tienes que asegurarte de que todo sea excelente para que el comportamiento del usuario
que utilizo la página web sea bueno y sus emociones sean de satisfacción.
6 Tips a seguir para el Diseño de Interacción
1. Define cómo se interactúa: Para poder definir esto es necesario pensar en todo por
ejemplo pensar en si habrá alguna parte de la compu con la que el usuario debe
interactuar por ejemplo el mouse, en el caso de que sea por un celular se tiene que
verificar que las acciones que se realicen con los dedos cumplan con todas las acciones
correctamente.
2. Da pistas del comportamiento: Es muy importante que las formas que apliques en la
página web sea exactamente lo que quieres dar a entender por ejemplo si quieres poner
un botón tiene que ser un botón ya que es muy importante que la apariencia abarcando el
color la forma el tamaño etc., le dé una pista clara al usuario de que puede ser oprimido
con seguridad porque muchas veces se implementan este tipo de cosas y mucho pueden
pensar que es algún virus o así por el simple diseño que se le dio.
3. Anticípate a errores potenciales: Al momento de que se diseña una página el
diseñador de la página debe percatarse de todos los errores que puede cometer el
usuario y así crear accesos en los que se den las soluciones de los problemas o bien que
den la facilidad de regresar a las actividades que ya estaban realizando. Un buen ejemplo
de cómo hacerlo es limitando las acciones que el usuario puede realizar. Por ejemplo, si
debe llenar todos los campos de un formulario, será bueno marcar como opcionales solo
lo que podría saltarse, así como desactivar el botón de continuar, o utilizar una validación
oportuna en cada campo a fin de saber si se ha llenado de manera correcta o no.
4. Considera la retroalimentación oportuna: Cuando el usuario este interactuando y
realice alguna actividad el sistema debe responder si la operación fue realizada con éxito
ya que si no lo hace solo puede ocasionar que el usuario piense que aún no se ha
realizado nada o que ya se hizo, pero en realidad no pasó nada.
5. Diseña pensando de manera estratégica: Hacer el diseño de una página web es muy
diferente para el tipo de dispositivo al que por qué no se puede hacer el mismo diseño
para una página que se verá en una computadora a una página que se verá en un celular,
por eso es indispensable conocer todas las reglas de cada dispositivo.
6. Simplifica lo más que puedas: Esto se refiere a que el ser humano no siempre
recuerda todo lo que ve por lo tanto debes de cuidar que en la página web que sea
diseñada no debe estar llena de links ni nada por que debido a la saturación será más
difícil que el usuario recuerde que es lo que vio en cada apartado lo que lograra que se
valla.
Experiencia del Usuario
La experiencia del usuario se define como el proceso que lleva acabo el usuario cuando
interactúa con una página web. Esto empieza cuando el Marketing online lo descubre, que
tienen mucho que ver con la experiencia de una marca. Muchas veces las personas
confunden la experiencia del usuario con la usabilidad por que la usabilidad es la
factibilidad con las que las personas pueden utilizar las herramientas de una página web
de tal manera que alcance el objetivo, en cambio la experiencia del usuario es el conjunto
de factores y elementos de una interacción del usuario donde todo entorno de la página
sea concreto y cuya estadía en la página genere una percepción positiva o negativa de
dicho sitio.
10 conceptos clave para entender la experiencia de usuario
Accesibilidad: Es la cantidad de accesos que tiene un sitio web por todos los
tipos de usuarios, independientemente de las limitaciones es cuando el usuario es
capaz de entender, percibir y navegar por el sitio, así como interactuar de una
manera satisfactoria.
Arquitectura de información: Es la disciplina que se basa en organizar y
estructurar la información y el contenido de la página web de tal manera que el
usuario no tenga que hacer el mayor esfuerzo en realizar las tareas que desea.
Diseño de Interacción: Esto se refiere a la actividad y resultado de definir el
comportamiento de las interacciones del sitio web. Es decir que acciones son
implementadas para que el usuario pueda utilizarlas y como respondan las
mismas interacciones a cada movimiento que el usuario realiza.
Diseño gráfico: Esto es el cómo se va a diseñar todo lo de la página web desde
cómo se verá en cada dispositivo hasta las cosas más mínimas como la tipografía
o imágenes. Esto es muy importante ya que es la primera impresión del usuario
hacia la página con un buen diseño se consigue lograr la expresividad del sitio y
de potenciar la identidad visual.
Mobile-First: Este concepto esta con mayor prioridad en los celulares ya que al
momento de que se realiza una página para una pantalla más pequeña te enfocas
más en las necesidades reales que puede tener el usuario y como resultado a esto
tienes sitios más factibles donde puedes navegar y entender todo lo que se integre
en dicha página.
Target persona: Es un estudio que se usa para ver el comportamiento de las
personas al momento de que usan el sitio web y todo esto se hace para verificar si
el diseño de la página web es el correcto o todavía se tiene que hacer
modificaciones para el mejoramiento de la usabilidad y la interacción.
Test A/B: Es una técnica que se basa en hacer pequeños cambios en el diseño de
las paginas para saber si es eficaz cada diseño de página y ver si la gente no
batalla con los cambios o es mejor dejarlo así si es que el usuario esta mas
satisfecho con el diseño antes de modificar.
Usabilidad: La usabilidad es un criterio que su función es facilitar el uso de la
página web o cualquier producto interactivo pero la usabilidad tiene dos
dimensiones que se trata de que se puede medir mediante la observación y en la
que se distingue la facilidad de aprendizaje, el recordar cómo utilizar la página, la
eficacia y la otra dimensión se basa en la satisfacción del usuario al momento de
ingresar a la página web.
Wireframe: Es una técnica que es más utilizada para la arquitectura de
información que básicamente consiste en la estructura de la página web, pero se
enfoca más en el contenido que se publica e importa más el acomodamiento de la
información que el diseño visual.
Bibliografía
https://www.40defiebre.com/que-es/experiencia-usuario/https://www.tiendanube.com/blog/que-es-la-usabilidad-y-como-medirla/
http://www.guiadigital.gob.cl/articulo/que-es-la-usabilidad
http://accesibilidadweb.dlsi.ua.es/
https://technet.microsoft.com/es-mx/library/cc263106(v=office.14).aspx
http://developerji.com/Post/-Cual-es-el-proposito-de-su-sitio-web-/2081
http://www.areadepymes.com/?tit=alcance-y-difusion-de-una-pagina-
web&name=Abanfin&fid=metrweb
https://www.lawebera.es/diseno-web/estructura-de-una-pagina-web-estructura-del-
diseno.php
https://www.sitioi.com/blog/contenido-de-una-pagina-web