{"id":1675,"date":"2013-05-08T20:52:05","date_gmt":"2013-05-09T00:52:05","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/ylambert\/?p=1675"},"modified":"2013-05-08T20:52:05","modified_gmt":"2013-05-09T00:52:05","slug":"el-diseno-web-usabilidad-interactividad-navegabilidad-arquitectura-de-la-informacion-y-la-interaccion-de-medios","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/ylambert\/2013\/05\/08\/el-diseno-web-usabilidad-interactividad-navegabilidad-arquitectura-de-la-informacion-y-la-interaccion-de-medios\/","title":{"rendered":"EL DISE\u00d1O WEB USABILIDAD,  INTERACTIVIDAD, NAVEGABILIDAD,  ARQUITECTURA DE LA INFORMACI\u00d3N Y LA INTERACCI\u00d3N DE MEDIOS"},"content":{"rendered":"<p>Hoy <strong>comentar\u00e9 un tema muy interesante si nos hemos incursionado como profesionales en una de las actividades que quiz\u00e1s parezca de moda pero que data desde los principios de la creaci\u00f3n de la Internet, el WWW y el lenguaje HTML y se trata del \u201cDise\u00f1o Web\u201d; <\/strong>tambi\u00e9n para aquellos lectores que quieren ampliar su conocimiento en este tema se los recomiendo.<\/p>\n<div style=\"width: 178px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\"  \" src=\"http:\/\/www.soluciones4web.com\/wp-content\/uploads\/2011\/10\/f8bfe4e908bb8b28.jpg\" alt=\"Dise\u00f1o Web\" width=\"168\" height=\"164\" \/><p class=\"wp-caption-text\">Dise\u00f1o Web<\/p><\/div>\n<p><strong>Esta actividad no solo busca la creaci\u00f3n de p\u00e1ginas o sitios web sino que engloba algunos factores importantes como la planificaci\u00f3n, dise\u00f1o e implementaci\u00f3n de ellos<\/strong>, algunos pueden pensar que solo es una aplicaci\u00f3n del dise\u00f1o pero va mas all\u00e1 de eso ya que <strong>requiere que tangamos en cuenta la usabilidad, interactividad, navegabilidad, arquitectura de la informaci\u00f3n y la interacci\u00f3n de medios como el texto, imagen, enlaces, audio y v\u00eddeo <\/strong>en la cual hare \u00e9nfasis en este art\u00edculo pero si quisiera mencionar que esta define b\u00e1sicamente tres importantes etapas que son:<\/p>\n<p><!--more--><\/p>\n<ol>\n<li><strong>Dise\u00f1o Visual de la Informaci\u00f3n.<\/strong><\/li>\n<li><strong>Estructura y relaci\u00f3n jer\u00e1rquica de las p\u00e1ginas del sitio web.<\/strong><\/li>\n<li><strong>Posicionamiento en buscadores o SEO.<\/strong><\/li>\n<\/ol>\n<div style=\"width: 164px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\" \" src=\"http:\/\/blog.briandjohnson.com\/.a\/6a00d83420911553ef0134854e56b6970c-320wi\" alt=\"Jakob Nielsen\" width=\"154\" height=\"192\" \/><p class=\"wp-caption-text\">Jakob Nielsen<\/p><\/div>\n<p>Pero yo me quiero enfocar en los factores mencionados anteriormente, y quiero empezar por la <span style=\"color: #ff0000\"><strong>usabilidad<\/strong> <\/span>que hace connotaci\u00f3n a la facilidad con que las personas pueden usar una herramienta y es un t\u00e9rmino que pulula en la inform\u00e1tica y la tecnolog\u00eda, <em><strong>Jakob Nielsen (una de las personas m\u00e1s respetadas en el \u00e1mbito mundial sobre usabilidad en la web e ingeniero de interfaces)<\/strong><\/em> defini\u00f3 la usabilidad como\"<em><strong>el atributo de calidad que mide lo f\u00e1ciles que son de usar las interfaces Web\"<\/strong><\/em>, yo la quiero definir como<strong> la experiencia del usuario al interactuar con un sitio web<\/strong>; uno de los criterios que ayudan a tener alta usabilidad es por ejemplo no agobiar al usuario en la primera entrada o p\u00e1gina de inicio (Home) y centrar nuestro dise\u00f1o en lo que el usuario utiliza, aquello que realmente le interesa. Otro aspecto es aplicar<em><strong> las \"Leyes de la Gestalt\" que son leyes tradicionales del dise\u00f1o que podemos aplicarlas al dise\u00f1o en l\u00ednea que versa sobre el fondo y figura, proximidad, similitud, contraste, entre otras.<\/strong><\/em><\/p>\n<p>La <strong>Interactividad<\/strong> es usado ampliamente en inform\u00e1tica, en dise\u00f1o multimedia entre otras actividades, b\u00e1sicamente siempre se ha considerado a ella como un proceso de comunicaci\u00f3n, pero espec\u00edficamente trata la interacci\u00f3n a modo de di\u00e1logo entre computador y usuario a travez de alg\u00fan programa, a los sitios web se los considera un aplicativo web, solo como detalle la comunicaci\u00f3n humana es el mejor ejemplo b\u00e1sico de interactividad.<\/p>\n<p>La <span style=\"color: #ff0000\"><strong>navegabilidad<\/strong> <\/span>web es la facilidad con la que un usuario puede desplazarse por todas las p\u00e1ginas que componen un sitio web, por eso aqu\u00ed se deben implementar una serie de estrategias de navegaci\u00f3n, siempre recomiendo a mis estudiantes las famosas preguntas a responder <em><strong>\u00bfD\u00f3nde estoy? \u00bfD\u00f3nde he estado? Y \u00bfD\u00f3nde puedo ir?<\/strong><\/em> Seg\u00fan las respuestas nos podemos dar una idea de cuan navegable es nuestro sitio web.<\/p>\n<p><span style=\"color: #ff0000\"><strong>La arquitectura de la informaci\u00f3n<\/strong><\/span> quiz\u00e1s es uno de los <em><strong>factores mas complejos de entender<\/strong><\/em> desde el punto de vista t\u00e9cnico puedo decir que se trata de una disciplina y arte que estudia el an\u00e1lisis, organizaci\u00f3n, disposici\u00f3n y estructuraci\u00f3n de la informaci\u00f3n, <em><strong>nos ense\u00f1a que debemos preocuparnos de la selecci\u00f3n y presentaci\u00f3n de los datos en los sistemas de informaci\u00f3n interactivos y no interactivos,<\/strong> <\/em>para el caso de sitios web siempre se ha hablado de tres aspectos el primero es el dise\u00f1o estructural en entornos de informaci\u00f3n compartida, el segundo el arte y la ciencia de organizar y rotular sitios web y por el \u00faltimo en las comunidades emergentes digitales aplicar los principios del dise\u00f1o y la arquitectura, puedo decir en resumidas cuentas que lo que se busca es facilitar al m\u00e1ximo los procesos de comprensi\u00f3n y asimilaci\u00f3n de la informaci\u00f3n.<\/p>\n<p>Por \u00faltimo es la <span style=\"color: #ff0000\"><strong>interacci\u00f3n de medios<\/strong><\/span> trata el <em><strong>uso de texto o hipertexto, imagen, enlaces, audio y v\u00eddeo como factores multimedia dentro de cada aplicaci\u00f3n web para enriquecer los recursos<\/strong><\/em> con los que queremos comunicar el mensaje a nuestro usuario.<\/p>\n<p><strong>Quisiera concluir que un correcto dise\u00f1o web involucra conocer c\u00f3mo se deben utilizar cada uno de los elementos permitidos en el HTML, hacer un uso correcto de los est\u00e1ndares establecidos por la W3C adem\u00e1s de lo referente a la web sem\u00e1ntica o conocida como web 3.0.<\/strong><\/p>\n<p>Para finalizar quiero compartir una exposici\u00f3n en video en mi canal de youtube con mayor detalle sobre el dise\u00f1o web.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/tnpKYBCD1es\" frameborder=\"0\" width=\"560\" height=\"315\"><\/iframe><\/p>\n<p><strong>Fuente: Usability Engineering (1993) (ISBN 0-12-518406-9), Designing Web Usability: The Practice of Simplicity (1999) (ISBN 1-56205-810-X), Wikipedia.org, <a href=\"http:\/\/blog.planesdigitales.com\/?p=101\" target=\"_blank\">http:\/\/blog.planesdigitales.com<\/a> e Informaci\u00f3n Personal.<\/strong><\/p>\n<form id=\"vozme_form_5f9cacf48278b923a81424758915ed1d\" method=\"post\" name=\"vozme_form_5f9cacf48278b923a81424758915ed1d\" target=\"5f9cacf48278b923a81424758915ed1d\" action=\"http:\/\/vozme.com\/text2voice.php\"><input name=\"text\" type=\"hidden\" value=\"EL DISE\u00d1O WEB USABILIDAD,  INTERACTIVIDAD, NAVEGABILIDAD,  ARQUITECTURA DE LA INFORMACI\u00d3N Y LA INTERACCI\u00d3N DE MEDIOS. Hoy comentar\u00e9 un tema muy interesante si nos hemos incursionado como profesionales en una de las actividades que quiz\u00e1s parezca de moda pero que data desde los principios de la creaci\u00f3n de la Internet, el WWW y el lenguaje HTML y se trata del \u201cDise\u00f1o Web\u201d; tambi\u00e9n para aquellos lectores que quieren ampliar su conocimiento en este tema se los recomiendo.\n[caption id=&quot;&quot; align=&quot;alignleft&quot; width=&quot;168&quot;] Dise\u00f1o Web[\/caption]\nEsta actividad no solo busca la creaci\u00f3n de p\u00e1ginas o sitios web sino que engloba algunos factores importantes como la planificaci\u00f3n, dise\u00f1o e implementaci\u00f3n de ellos, algunos pueden pensar que solo es una aplicaci\u00f3n del dise\u00f1o pero va mas all\u00e1 de eso ya que requiere que tangamos en cuenta la usabilidad, interactividad, navegabilidad, arquitectura de la informaci\u00f3n y la interacci\u00f3n de medios como el texto, imagen, enlaces, audio y v\u00eddeo en la cual hare \u00e9nfasis en este art\u00edculo pero si quisiera mencionar que esta define b\u00e1sicamente tres importantes etapas que son:\n\n\nDise\u00f1o Visual de la Informaci\u00f3n.\nEstructura y relaci\u00f3n jer\u00e1rquica de las p\u00e1ginas del sitio web.\nPosicionamiento en buscadores o SEO.\n\n[caption id=&quot;&quot; align=&quot;alignright&quot; width=&quot;154&quot;] Jakob Nielsen[\/caption]\nPero yo me quiero enfocar en los factores mencionados anteriormente, y quiero empezar por la usabilidad que hace connotaci\u00f3n a la facilidad con que las personas pueden usar una herramienta y es un t\u00e9rmino que pulula en la inform\u00e1tica y la tecnolog\u00eda, Jakob Nielsen (una de las personas m\u00e1s respetadas en el \u00e1mbito mundial sobre usabilidad en la web e ingeniero de interfaces) defini\u00f3 la usabilidad como&quot;el atributo de calidad que mide lo f\u00e1ciles que son de usar las interfaces Web&quot;, yo la quiero definir como la experiencia del usuario al interactuar con un sitio web; uno de los criterios que ayudan a tener alta usabilidad es por ejemplo no agobiar al usuario en la primera entrada o p\u00e1gina de inicio (Home) y centrar nuestro dise\u00f1o en lo que el usuario utiliza, aquello que realmente le interesa. Otro aspecto es aplicar las &quot;Leyes de la Gestalt&quot; que son leyes tradicionales del dise\u00f1o que podemos aplicarlas al dise\u00f1o en l\u00ednea que versa sobre el fondo y figura, proximidad, similitud, contraste, entre otras.\nLa Interactividad es usado ampliamente en inform\u00e1tica, en dise\u00f1o multimedia entre otras actividades, b\u00e1sicamente siempre se ha considerado a ella como un proceso de comunicaci\u00f3n, pero espec\u00edficamente trata la interacci\u00f3n a modo de di\u00e1logo entre computador y usuario a travez de alg\u00fan programa, a los sitios web se los considera un aplicativo web, solo como detalle la comunicaci\u00f3n humana es el mejor ejemplo b\u00e1sico de interactividad.\nLa navegabilidad web es la facilidad con la que un usuario puede desplazarse por todas las p\u00e1ginas que componen un sitio web, por eso aqu\u00ed se deben implementar una serie de estrategias de navegaci\u00f3n, siempre recomiendo a mis estudiantes las famosas preguntas a responder \u00bfD\u00f3nde estoy? \u00bfD\u00f3nde he estado? Y \u00bfD\u00f3nde puedo ir? Seg\u00fan las respuestas nos podemos dar una idea de cuan navegable es nuestro sitio web.\nLa arquitectura de la informaci\u00f3n quiz\u00e1s es uno de los factores mas complejos de entender desde el punto de vista t\u00e9cnico puedo decir que se trata de una disciplina y arte que estudia el an\u00e1lisis, organizaci\u00f3n, disposici\u00f3n y estructuraci\u00f3n de la informaci\u00f3n, nos ense\u00f1a que debemos preocuparnos de la selecci\u00f3n y presentaci\u00f3n de los datos en los sistemas de informaci\u00f3n interactivos y no interactivos, para el caso de sitios web siempre se ha hablado de tres aspectos el primero es el dise\u00f1o estructural en entornos de informaci\u00f3n compartida, el segundo el arte y la ciencia de organizar y rotular sitios web y por el \u00faltimo en las comunidades emergentes digitales aplicar los principios del dise\u00f1o y la arquitectura, puedo decir en resumidas cuentas que lo que se busca es facilitar al m\u00e1ximo los procesos de comprensi\u00f3n y asimilaci\u00f3n de la informaci\u00f3n.\nPor \u00faltimo es la interacci\u00f3n de medios trata el uso de texto o hipertexto, imagen, enlaces, audio y v\u00eddeo como factores multimedia dentro de cada aplicaci\u00f3n web para enriquecer los recursos con los que queremos comunicar el mensaje a nuestro usuario.\nQuisiera concluir que un correcto dise\u00f1o web involucra conocer c\u00f3mo se deben utilizar cada uno de los elementos permitidos en el HTML, hacer un uso correcto de los est\u00e1ndares establecidos por la W3C adem\u00e1s de lo referente a la web sem\u00e1ntica o conocida como web 3.0.\nPara finalizar quiero compartir una exposici\u00f3n en video en mi canal de youtube con mayor detalle sobre el dise\u00f1o web.\n\nFuente: Usability Engineering (1993) (ISBN 0-12-518406-9), Designing Web Usability: The Practice of Simplicity (1999) (ISBN 1-56205-810-X), Wikipedia.org, http:\/\/blog.planesdigitales.com e Informaci\u00f3n Personal.\n\" \/><input name=\"lang\" type=\"hidden\" value=\"es\" \/><input name=\"gn\" type=\"hidden\" value=\"ml\" \/><input type=\"hidden\" id=\"interface\" name=\"interface\" value=\"full\" \/>\n\t\t\t<div style=\"margin-left:40%;\">\n\t\t\t\n\t\t\t\t<input style=\"float:left;\" type=\"image\" width=\"40\" height=\"40\" src=\"http:\/\/blog.espol.edu.ec\/ylambert\/wp-content\/plugins\/vozme\/img\/megaphone40x40w.gif\" alt=\"Escucha este post\" onclick=\"window.open('', '5f9cacf48278b923a81424758915ed1d', 'width=600,height=370,scrollbars=yes,location=yes,menubar=yes,resizable=yes,status=yes,toolbar=yes');\">\n\t\t\t\t<div style=\"margin-left:48px; text-align:left;\"><a style=\"font-size:12px;\" href=\"javascript:void(0);\" onclick=\"window.open('', '5f9cacf48278b923a81424758915ed1d', 'width=600,height=370,scrollbars=yes,location=yes,menubar=yes,resizable=yes,status=yes,toolbar=yes'); document.getElementById('vozme_form_5f9cacf48278b923a81424758915ed1d').submit();\">Escucha<br\/>este post<\/a><\/div>\n\t\t\t<\/div><\/form>","protected":false},"excerpt":{"rendered":"<p>Hoy comentar\u00e9 un tema muy interesante si nos hemos incursionado como profesionales en una de las actividades que quiz\u00e1s parezca de moda pero que data desde los principios de la creaci\u00f3n de la Internet, el WWW y el lenguaje HTML y se trata del \u201cDise\u00f1o Web\u201d; tambi\u00e9n para aquellos lectores que quieren ampliar su conocimiento [&hellip;]<\/p>\n","protected":false},"author":135,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,17,296],"tags":[508128,9860,699,697320,2205,601372,601682,508132,601953,502678,1095,15978,5606,144288,17729],"class_list":["post-1675","post","type-post","status-publish","format-standard","hentry","category-espol","category-general","category-tecnologia","tag-arquitectura-de-la-informacion","tag-diseno-web","tag-edcom","tag-espol","tag-html","tag-interaccion-de-medio","tag-interactividad","tag-jakob-nielsen","tag-navegabilidad","tag-profesor-lambert","tag-seo","tag-ucsg","tag-usabilidad","tag-w3c","tag-yamil-lambert"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/posts\/1675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/users\/135"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/comments?post=1675"}],"version-history":[{"count":2,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/posts\/1675\/revisions"}],"predecessor-version":[{"id":1677,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/posts\/1675\/revisions\/1677"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/media?parent=1675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/categories?post=1675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/ylambert\/wp-json\/wp\/v2\/tags?post=1675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}