Nosotros pr谩cticamente somos arquitectos y manejamos la tarea de crear informaci贸n 煤til y nuestra responsabilidad, es, tal y como la explica Jesse James Garrett en su conocido libro “Los elementos de la experiencia de usuario” donde menciona que debemos identificar los objetivos del proyecto y las necesidades de los usuarios, especificar las funcionalidades y requerimientos de la aplicaci贸n web, definir y dise帽ar los sistemas de navegaci贸n, organizaci贸n, etiquetado y b煤squeda, y finalmente realizar el prototipado de la aplicaci贸n.
Nuestra responsabilidad final es asegurar que los usuarios podr谩n encontrar y gestionar la informaci贸n de manera efectiva.
De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comience a construirse; los arquitectos de informaci贸n nos valemos de la diagramaci贸n y el prototipado para especificar cu谩l ser谩 la organizaci贸n, estructura, navegaci贸n y funcionamiento de la aplicaci贸n web. Es decir, al igual que ellos, realizamos planos y maquetas del sitio antes de que este comience a construirse.
Por una parte cuando construimos un sitio web debemos plantearnos como dividiremos el contenido, es decir identificar que tipo de informaci贸n contendr谩 el sitio y como lo clasificaremos, bajo que categor铆as o etiquetas.
Los planos, son diagramas de organizaci贸n y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo o mapa web son b谩sicamente el esquema bajo el cual se enlistan dichas secciones o categor铆as a tratar dentro del sitio y a su vez las subcategorias a manejar.
 |
| Mapa del sitio: un mapa del sitio es un archivo en el que puedes enumerar las p谩ginas de tu sitio web para informar a Google y otros motores de b煤squeda acerca de la organizaci贸n del contenido del sitio. Los rastreadores web en buscadores como Googlebot leen este archivo para rastrear de forma m谩s inteligente tu sitio. |
A la hora de realizar la diagramaci贸n de una aplicaci贸n o sitio web lo m谩s importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegaci贸n y la relaci贸n entre los elementos.
Otro punto importante a tratar como comentabamos es el dise帽o o mejor dicho aspecto del sitio web, antes de meternos a programar directamente el sitio es importante tener una idea sobre como lucir谩 este una vez terminado, es aqu铆 donde empleamos las maquetas.
| Bosquejo de un sitio Web |
En todo caso, recordemos que estamos generando simplemente un bosquejo, una idea simple de como estructuraremos el contenido as铆 que en ning煤n caso se debe incluir dise帽o gr谩fico en un prototipo, esto se realiza en etapas posteriores. Por lo tanto no se deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises.
Ahora hemos hablado de que existen varios tipos de prototipos, primeramente tenemos los prototipos de baja fidelidad que b谩sicamente son dibujos est谩ticos. En desarrollo Web podemos clasificarlos en:
Scketching:
Hablamos de sketching cuando realizamos bocetos de forma r谩pida e informal, con l谩piz y papel, para transmitir una idea o concepto con rapidez y claridad.
Es una t茅cnica muy 煤til en las entrevista iniciales con el cliente, para comunicar conceptos o proponerle alternativas a un problema, durante un brainstorming o en las reuniones internas con el equipo de trabajo.
Antes de comenzar un prototipo m谩s elaborado es conveniente comenzar con este tipo de bocetos para trabajar 谩gilmente con varias ideas, ir esquematizando las p谩ginas y definiendo las diferentes zonas de las mismas.
Wireframe:
Un wireframe es m谩s elaborado e incluye el inventariado de contenido, es decir, qu茅 contenido debe estar presente en cada p谩gina. Los elementos de la misma como cabeceras, enlaces, listas, formularios, etc; el etiquetado de los v铆nculos o de los t铆tulos; el layout, es decir, la ubicaci贸n, colocaci贸n y agrupaci贸n de los elementos de la p谩gina, as铆 como la estrategia de navegaci贸n y la priorizaci贸n de contenidos dentro de la misma.
 |
| Ejemplo de Wireframe |
Es decir un wireframe se lleva acabo cuando tengamos la estructura general y la jerarquizaci贸n de contenidos. Es b谩sicamente una maqueta m谩s fiel a lo que ser谩 el sitio o la aplicaci贸n en real. No es un dise帽o como tal, no tiene im谩genes, tipograf铆a ni colores, pero puede que tenga textos bastante definitivos e incluso puede contener las diferentes interacciones. De esta forma, podemos ver c贸mo ser谩 en realidad, pero sin tenerlo desarrollado. As铆 cuando el dise帽ador y desarrollador empiecen a trabajar ya tendr谩n todo validado y cerrado.
Un wireframe, asimismo, deber铆a incluir el comportamiento mediante notas asociadas a los elementos para indicar c贸mo deben mostrarse o para definir su comportamiento funcional
Cuando tenemos una secuencia de wireframes hablamos de un storyboard. Un storyboard son una evoluci贸n de los diferentes wirefreames, ya que adem谩s del interfaz, se muestra la secuencia de acciones, o escenarios, que se deben realizar con el sitio.
 |
| Ejemplo de Storyboard |
Los prototipos funcionales son prototipos de alta fidelidad, tambi茅n llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas.
Son prototipos o maquetas din谩micas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
 |
| Ejemplo de Mockup |
Fuentes:
https://docs.google.com/document/d/1GLQyEovkrDFSNFOAMTwFWiSkAKZUh03rVH12ANeDyIQ/edit
https://www.ecured.cu/Prototipo
http://fp.uoc.edu/blog/que-es-prototipar-y-que-tipo-de-prototipos-hay/
https://www.rankingcoach.com/es-es/news/sitemaps-que-son-y-para-qu%C3%A9-se-utilizan-los-mapas-de-sitio
Notas: Esta informaci贸n ademas esta basada en gran parte por el programa "Act铆vate, Google Espa帽a", yo soy/fui alumno del programa para las fechas de redacci贸n de la entrada, te recomiendo si deseas ampliar aun mas tu conocimiento inscribirte y/o checar sus cursos disponibles visitando su link: http://google.es/activate.
Comentarios
Publicar un comentario