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