SlideShare une entreprise Scribd logo
1  sur  70
Télécharger pour lire hors ligne
Usabilidad
              Harold Maduro
http://www.flickr.com/photos/ellasdad/425813314/
¿Usabilidad?
Jackob Nielsen definió Usabilidad como
el atributo de calidad que mide lo
fáciles que son de usar las interfaces
Web.




                                wikipedia.org
http://havenworks.com
Tus usuarios no son tontos.
¿Por qué tu sitio los hace sentir de esa manera?




                                       	 




                                               http://jjg.net
Haz el sitio para satisfacer al público objetivo,
             no a la junta directiva
El sitio debe ser fácil de usar para todos,
no sólo para los usuarios más avanzados del
                    Internet.
La información debe ser fácil de encontrar.
El sitio debe verse bien en la mayor variedad
de computadoras* posibles, no sólo en la tuya.




    (*) navegadores, resoluciones distintas de pantallas y sistemas
                             operativos
El contenido (texto) debe estar bien
       organizado y legible.
Reduce el texto de contenido en un 50%.
     Luego, redúcelo nuevamente.
No utilices animaciones innecesarias,
demasiado movimiento desconcentra al usuario
    de lo que realmente esta buscando.
Evita usar pop-ups o abrir nuevas ventanas.
Si tu sitio va a ser todo en flash, que no rompa la
 forma como funciona un sitio corriente, como el
             botón de back, por ejemplo.
Si vas a usar íconos que representen conceptos o
     contenidos, asegúrate que comuniquen
            correctamente tu mensaje.
¡Nunca, nunca, nunca, nunca, nunca
   incluyas un “splash screen”!
Escoge bien los colores: que exista un
buen contraste entre el color de fondo y color
                   de texto

No uses fondos muy complicados o cargados.
http://mamascheesies.com/
no seamos los
malos de la película.
¡No hagas al usuario pensar!
Diseño centrado en el usuario
 En términos generales, el diseño centrado
 en el usuario es una filosofía y proceso de
 diseño en el que las necesidades, los deseos
 y las limitaciones del usuario final de una
 interfaz toman una atención y relevancia
 considerable en cada nivel del proceso de
 diseño.
diseño centrado en el
        usuario = UX



http://www.alexrossart.com/
casos de éxito




     http://www.alexrossart.com/
stri.org
ten en cuenta a tu audiencia
stri.org
interfaz

La interfaz permite al usuario
navegar y usar el sitio web o
medio digital para realizar
una tarea o consumir
contenido.
interfaz
La interfaz debe responder algunas preguntas:




¿Dónde estoy?
dónde estoy: imagen de marca
patrones de recorrido del ojo en forma de F
dónde estoy: los colores también comunican la marca
dónde estoy: la fotografía también comunica la marca
dónde estoy: la fotografía también comunica la marca
dónde estoy: la fotografía también comunica la marca
dónde estoy: la fotografía también comunica la marca
interfaz
La interfaz debe responder algunas preguntas:




¿Hacia dónde puedo ir?
hacia dónde puedo ir: navegación y búsqueda
hacia dónde puedo ir: más contenido
hacia dónde puedo ir: banners
hacia dónde puedo ir: búsquedas especializadas
hacia dónde puedo ir: enlaces a herramientas
hacia dónde puedo ir: navegación por audiencia
hacia dónde puedo ir: pie de página o footer
elementos de navegación: las páginas 404
elementos de navegación: las páginas 404
elementos de navegación: navegación local
elementos de navegación: navegación local
elementos de navegación: navegación local
navegación: también te dice dónde estás
1


2


       3
       4




navegación: también te dice dónde estás
elementos de navegación: rutas navegadas
elementos de navegación: mapa del sitio
elementos de navegación: el logo (te lleva al home)
elementos de navegación: búsqueda
interfaz
La interfaz debe responder algunas preguntas:




¿Qué hay aquí?
contenido
enlaces a más contenidos



     fotos / banners




                             búsqueda
                           especializada
noticias




       contenido
contenido
banners
                  (promociones,
                     eventos)
noticias




                    fechas de
                     eventos



      contenido
contenido
mapas




contenido
¡el contenido es el rey!
ahora te toca a tí.


            http://www.alexrossart.com/
mtsobek.com
tropicstar.com
puntacaracol.com.pa
Usabilidad es tener un
avanzado sentido común
como Batman.
      http://www.alexrossart.com/
gracias.
harold maduro
harold@epiphycorp.com
tel. (507) 6674.1605

Contenu connexe

Tendances

Diseño y Usabilidad
Diseño y UsabilidadDiseño y Usabilidad
Diseño y Usabilidad
Domestika
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
Alexis Morillo
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
ciwmx
 

Tendances (20)

Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño webConceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)
 
Diseño y Usabilidad
Diseño y UsabilidadDiseño y Usabilidad
Diseño y Usabilidad
 
Usabilidad web simo network 2009
Usabilidad web simo network 2009Usabilidad web simo network 2009
Usabilidad web simo network 2009
 
Sitios Web
Sitios Web Sitios Web
Sitios Web
 
Presentación de internet
Presentación de internetPresentación de internet
Presentación de internet
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Ecommerce Hotelero II
Ecommerce Hotelero IIEcommerce Hotelero II
Ecommerce Hotelero II
 
Universidad TéCnica Particular De Loja
Universidad TéCnica Particular De LojaUniversidad TéCnica Particular De Loja
Universidad TéCnica Particular De Loja
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Wix
WixWix
Wix
 
Symbaloo
SymbalooSymbaloo
Symbaloo
 
Diseño Web Profesional
Diseño Web ProfesionalDiseño Web Profesional
Diseño Web Profesional
 
Jimdo
JimdoJimdo
Jimdo
 
Ventajas y desventajas de los navegadores (3) convertido
Ventajas y desventajas de los navegadores (3) convertidoVentajas y desventajas de los navegadores (3) convertido
Ventajas y desventajas de los navegadores (3) convertido
 
Symbaloo
SymbalooSymbaloo
Symbaloo
 
Presencia web pyme
Presencia web pymePresencia web pyme
Presencia web pyme
 
Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
 

Similaire à Usabilidad

Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
Luisa Perez
 

Similaire à Usabilidad (20)

Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 
Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMXBlogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMX
 
Primera clase
Primera clasePrimera clase
Primera clase
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptx
 
G:\diseño web
G:\diseño webG:\diseño web
G:\diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Curso HTML 5 en Español
Curso HTML 5 en EspañolCurso HTML 5 en Español
Curso HTML 5 en Español
 
M2 DiseñO Web
M2   DiseñO WebM2   DiseñO Web
M2 DiseñO Web
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Caracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_webCaracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_web
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
 
Recursos web 2.0
Recursos web 2.0Recursos web 2.0
Recursos web 2.0
 
Elaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasElaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcas
 
Informe de informática aplicada
Informe de informática aplicadaInforme de informática aplicada
Informe de informática aplicada
 
Las características y las partes que debe tener un sitio web
Las características y las partes  que debe tener un sitio web Las características y las partes  que debe tener un sitio web
Las características y las partes que debe tener un sitio web
 
Recursos web 2.0 - 1005 Jm
Recursos web 2.0 - 1005 JmRecursos web 2.0 - 1005 Jm
Recursos web 2.0 - 1005 Jm
 

Plus de Harold Maduro

Administracion De Proyectos Para Todos
Administracion De Proyectos Para TodosAdministracion De Proyectos Para Todos
Administracion De Proyectos Para Todos
Harold Maduro
 

Plus de Harold Maduro (20)

¿Qué es Coworking?
¿Qué es Coworking?¿Qué es Coworking?
¿Qué es Coworking?
 
TEDx Bella Vista - Coworking y Emprendimiento
TEDx Bella Vista - Coworking y EmprendimientoTEDx Bella Vista - Coworking y Emprendimiento
TEDx Bella Vista - Coworking y Emprendimiento
 
PechaKucha 10: Coworking y CascoStation
PechaKucha 10: Coworking y CascoStationPechaKucha 10: Coworking y CascoStation
PechaKucha 10: Coworking y CascoStation
 
Google Analytics - ¿Cómo crear mi cuenta?
Google Analytics - ¿Cómo crear mi cuenta?Google Analytics - ¿Cómo crear mi cuenta?
Google Analytics - ¿Cómo crear mi cuenta?
 
Diseño Visual
Diseño VisualDiseño Visual
Diseño Visual
 
Arquitectura De Información
Arquitectura De InformaciónArquitectura De Información
Arquitectura De Información
 
Estrategia para tu Proyecto Web
Estrategia para tu Proyecto WebEstrategia para tu Proyecto Web
Estrategia para tu Proyecto Web
 
Nuevas Tecnologias y Networking
Nuevas Tecnologias y NetworkingNuevas Tecnologias y Networking
Nuevas Tecnologias y Networking
 
Turismo: Casos de Estudio de la Competencia
Turismo: Casos de Estudio de la CompetenciaTurismo: Casos de Estudio de la Competencia
Turismo: Casos de Estudio de la Competencia
 
Internet como Medio de Comunicacion
Internet como Medio de ComunicacionInternet como Medio de Comunicacion
Internet como Medio de Comunicacion
 
Administracion De Proyectos Para Todos
Administracion De Proyectos Para TodosAdministracion De Proyectos Para Todos
Administracion De Proyectos Para Todos
 
Administracion De Proyectos Para Todos
Administracion De Proyectos Para TodosAdministracion De Proyectos Para Todos
Administracion De Proyectos Para Todos
 
Aspectos Éticos Y Sociales De Los Sistemas De Información
Aspectos Éticos Y Sociales De Los Sistemas De InformaciónAspectos Éticos Y Sociales De Los Sistemas De Información
Aspectos Éticos Y Sociales De Los Sistemas De Información
 
Comercio Desleal
Comercio DeslealComercio Desleal
Comercio Desleal
 
Taller de Redacción para Web
Taller de Redacción para WebTaller de Redacción para Web
Taller de Redacción para Web
 
Oportunidades de Trabajo en el Campo del Web
Oportunidades de Trabajo en el Campo del WebOportunidades de Trabajo en el Campo del Web
Oportunidades de Trabajo en el Campo del Web
 
BabySari
BabySariBabySari
BabySari
 
Diagramas de Producción - BabySari
Diagramas de Producción - BabySariDiagramas de Producción - BabySari
Diagramas de Producción - BabySari
 
Teorías de la Motivación
Teorías de la MotivaciónTeorías de la Motivación
Teorías de la Motivación
 
Percepción y Toma de Decisiones
Percepción y Toma de DecisionesPercepción y Toma de Decisiones
Percepción y Toma de Decisiones
 

Dernier

Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdfDiseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Demetrio Ccesa Rayme
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
Gonella
 
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Demetrio Ccesa Rayme
 

Dernier (20)

SESION DE APRENDIZAJE PARA3ER GRADO -EL SISTEMA DIGESTIVO
SESION DE APRENDIZAJE PARA3ER GRADO -EL SISTEMA DIGESTIVOSESION DE APRENDIZAJE PARA3ER GRADO -EL SISTEMA DIGESTIVO
SESION DE APRENDIZAJE PARA3ER GRADO -EL SISTEMA DIGESTIVO
 
Motivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en JesúsMotivados por la esperanza. Esperanza en Jesús
Motivados por la esperanza. Esperanza en Jesús
 
Salud mental y bullying en adolescentes.
Salud mental y bullying en adolescentes.Salud mental y bullying en adolescentes.
Salud mental y bullying en adolescentes.
 
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdfDiseño Universal de Aprendizaje en Nuevos Escenarios  JS2  Ccesa007.pdf
Diseño Universal de Aprendizaje en Nuevos Escenarios JS2 Ccesa007.pdf
 
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
 
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
Realitat o fake news? – Què causa el canvi climàtic? - Modificacions dels pat...
 
flujo de materia y energía ecosistemas.
flujo de materia y  energía ecosistemas.flujo de materia y  energía ecosistemas.
flujo de materia y energía ecosistemas.
 
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdfREGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
 
Realitat o fake news? – Què causa el canvi climàtic? - La desertització
Realitat o fake news? – Què causa el canvi climàtic? - La desertitzacióRealitat o fake news? – Què causa el canvi climàtic? - La desertització
Realitat o fake news? – Què causa el canvi climàtic? - La desertització
 
Tema 9. Roma. 1º ESO 2014. Ciencias SOciales
Tema 9. Roma. 1º ESO 2014. Ciencias SOcialesTema 9. Roma. 1º ESO 2014. Ciencias SOciales
Tema 9. Roma. 1º ESO 2014. Ciencias SOciales
 
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
Programa dia de las madres para la convi
Programa dia de las madres para la conviPrograma dia de las madres para la convi
Programa dia de las madres para la convi
 
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdfDISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE.pdf
 
Botiquin del amor - Plantillas digitales.pdf
Botiquin del amor - Plantillas digitales.pdfBotiquin del amor - Plantillas digitales.pdf
Botiquin del amor - Plantillas digitales.pdf
 
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
 
Plantilla de Bitácora Participación Estudiantil Ecuador
Plantilla de Bitácora Participación Estudiantil EcuadorPlantilla de Bitácora Participación Estudiantil Ecuador
Plantilla de Bitácora Participación Estudiantil Ecuador
 
Santa Criz de Eslava, la más monumental de las ciudades romanas de Navarra
Santa Criz de Eslava, la más monumental de las ciudades romanas de NavarraSanta Criz de Eslava, la más monumental de las ciudades romanas de Navarra
Santa Criz de Eslava, la más monumental de las ciudades romanas de Navarra
 
sesion de aprendizaje 1 SEC. 13- 17 MAYO 2024 comunicación.pdf
sesion de aprendizaje 1 SEC. 13- 17  MAYO  2024 comunicación.pdfsesion de aprendizaje 1 SEC. 13- 17  MAYO  2024 comunicación.pdf
sesion de aprendizaje 1 SEC. 13- 17 MAYO 2024 comunicación.pdf
 
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLAACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
ACERTIJO EL NÚMERO PI COLOREA EMBLEMA OLÍMPICO DE PARÍS. Por JAVIER SOLIS NOYOLA
 

Usabilidad