Creación de prototipos para la web I: información, UX y prototipos en papel

1. Avance: Soy Erika Heins, soy diseñadora Web y desarrolladora Web. Llevo más de 10 años trabajando en el campo en EUA. Se trata de diseño web organizado, UX, IA, y Prototipos de papel. Esta primera clase se trata de organizarse y cómo planear un Sitio Web. Entonces, pasaremos por contornos de contenido sobre, ¿qué tienes? ¿ Qué necesitas crear? ¿ A quién puedes llegar para empezar a trabajar en la creación de ese contenido en algunas pautas de branding, por lo que eso es a lo largo del proceso debe estar viniendo desde un punto de vista consistente? Después, en sitemaps e historias de usuarios y wireframes. Todo este tipo de funcionalidad y narrativa como formas en las que se navega por un Sitio Web. Entonces, al final de esta clase, tendrás prototipos de papel clicables. Podrían ser bocetos de lápiz y papel que has vinculado como JPEG para hacer algunas pruebas de usuario o estaremos usando una herramienta llamada Asumiendo. Poder hacer Sitios Web y mantener Sitios Web, entender cómo funcionan, y cómo hacerlos más poderosos, o eficaces, es solo una de esas valiosas habilidades. 2. Introducción: Hola y bienvenidos al diseño web organizado. El objetivo de esta clase es proporcionar todos los esquemas que necesita para un proceso de diseño web claro y productivo. Como dice Ryan Singer, diseño es un proceso dependiente de la trayectoria. Por lo que queremos descomponer el proceso en pasos discretos y reunir la retroalimentación correcta en el momento adecuado, para tomar buenas decisiones en cada punto. El diseño web responsive ha cambiado muchos de nuestros flujos de trabajo y así hablaremos a través de un proceso con múltiples prototipos. Nuestro proyecto es planear un sitio web para ti o para otra persona. Descubrirás tu navegación, dibujarás la experiencia del usuario y probarás cómo se reciben tus ideas. Podrás completar el proyecto asignado o seguir las lecciones por tu propia idea. Hablaremos a través de breves de proyectos, sitemaps, pautas de branding, contornos de contenido, flujos de usuarios, wireframes sensibles y pruebas de usabilidad. Puedes entregar estos documentos a diseñadores y desarrolladores o seguir las siguientes dos clases para diseñar y construir el sitio tú mismo. Las herramientas que estaremos utilizando son: un editor de texto como TextEditor, Google Drawings, bolígrafo y papel viejo regular, y Balsamiq. Entonces empecemos. Adelante y configura una cuenta de Google Drive si necesitas una y crea una carpeta de proyecto para este sitio. También descarga Balsamiq si no tienes la app, tienen una prueba gratuita para empezar. 3. Esquemas del proyecto: Empecemos con nuestros contornos de proyectos. Estas preguntas y planes nos mantendrán encarrilados durante todo el proceso. En la Sección de Recursos hay un archivo de esbozos de proyectos, si quieres seguir y rellenar el tuyo. En primer lugar, mira tus metas de alto nivel, ¿por qué necesita existir este sitio? ¿ Hay alguna métrica específica que estés persiguiendo? ¿ Qué te hará ver este sitio como un éxito? Asegúrate de que tu equipo esté de acuerdo. Estamos haciendo en un evento patronal así que, obviamente queremos que la gente se presente. Mucha gente se detiene ahí, pero también hay algunos goles secundarios. Queremos que los asistentes se conozcan, queremos que se beneficien de ese evento incluso después de que haya terminado y quizá queramos o necesitemos patrocinio. Entonces, haz una lista de algo como esto. Muchas startups miran lo que se llaman métricas piratas por las siglas. Se trata de adquisición, que es cuántas personas estás llegando al sitio, activación, cuántas realmente hacen algo una vez que llegan, ingresos, que es lo que contribuyen a la sustentabilidad del sitio, retención, que es lo que número vuelve de nuevo, y la derivación, por supuesto, que le dice a un amigo. Entonces, anota cualquier número específico que te gustaría golpear. Ahora, hablemos de proceso. ¿ Cómo vamos a lograr estos objetivos? ¿ Cómo vamos a lidiar con la web responsive? Entonces, un típico proceso de diseño de cascada va de idea a planes a maquetas a código. Un proceso de diseño centrado en el usuario involucra a los usuarios en cada paso del camino para tratar la retroalimentación lo antes posible. Este es un cambio importante en perspectiva y si es afortunado que Skillshare te proporcione el foro para presentar y poner a prueba tu trabajo con los demás. proceso de pensamiento de diseño de Stanford describe esto como empatía. Quieres conocer al público para quien estás diseñando. proceso de diseño centrado en el ser humano de IDEO comienza con la audición. Se sale y se escucha observaciones e historias. El punto principal es que necesitas hablar con tus usuarios. Necesitas escucharlos y tienes que visualizar su vida y su rutina diaria con el fin de diseñar realmente algo que les resulte apropiado y atractivo. Captura todas tus observaciones en la forma que más te convenga y puedes utilizar diversos métodos formales para ganar esta empatía. Está fuera del alcance de esta clase pero busca a la agencia antes conocida como Bolt Peters por una gran cantidad de grandes recursos. Todo se reduce a la comprensión. Si estás diseñando para alguien que no sea tú, asegúrate de entender realmente su perspectiva. Estás tratando de ver el mundo a través de sus ojos. El diseño es traducción, no arte. Mantén tu mente lo más abierta posible. Pasaremos por diversos ejercicios en esta clase y si dejas caer tu pericia, quizá encuentres algo nuevo. Entonces, a medida que piensas en tus usuarios, considera tu impacto. Cuál podría ser el legado de este proyecto porque hay varios formatos que puede tomar un sitio web. Los folletos son el estilo más antiguo donde solo estás presentando y arreglando alguna información de texto. Pero los juegos y las comunidades ahora son más prevalentes o importantes ahora que tenemos la tecnología para apoyarlos. Incluso si no estás construyendo toda una comunidad o un juego en línea, todavía puedes usarlo como tu modelo de diseño para la inspiración interactiva y visual. Por ejemplo, Facebook fue diseñado como un espejo de las comunidades del mundo real. interacción principal es Like que anima a la gente a publicar las cosas más simpáticas. Jonathan Harris diseñó Cowbird como una plataforma de narración de cuentos. Entre sus acciones se encuentran la dedicación, el brote y más. Habla de cómo esto creó un concurso de vulnerabilidad, un sentimiento totalmente diferente en el sitio. Entonces, si solo pensamos en nuestro sitio como una red social, podríamos simplemente enumerar algunas características básicas pero si se nos ocurre una nueva metáfora, realmente podría ayudar al sitio a evolucionar hacia algo nuevo. Piensa también en cuándo la gente visitará el sitio, en un momento de aburrimiento, como hábito o en búsqueda de una meta y recuerda dónde podrían estar y cómo tu sitio podría servir o adaptarse a eso. ¿ Es tu sitio un mapa para descubrir algo nuevo o es un servicio para ayudarte a recordar algo importante? Estas son todas metáforas e inspiraciones, volvamos a lo práctico. Entonces, vuelve al documento de esbozos de tu proyecto y de nuevo, enumera todos tus objetivos para este proyecto. Podrían ser altos y elevados y también sumamente prácticos. Ahora, enumerar todo el contenido específico con el que tienes que trabajar. Para ser lo más específicos posible, queremos trozos no vagos blobs, como dice Karen Migraine, textos, imágenes, videos, canciones, lo que esté listo para ser colocado en tus diseños. Estoy haciendo un sitio web para mi amigo, Ariel Crass quien es profesor de yoga. Entonces, aquí está el tipo de contenido que podría tener en su sitio basado en lo que ya tiene en su sitio actual. Pero también quieres enumerar las cosas que quieres crear, un video introductorio, una bio, lo que sea. En ocasiones, el cliente tiene esta lista para ti pero muchas veces es incompleta, por lo que quieres pensarla también. Trata de pensar en estas piezas discretas, no páginas completas. Cuanto más específicos seamos, mejores pueden ser nuestros diseños. El tercero que hay que pensar son las fases para este sitio. Por ejemplo, si estás haciendo un sitio de eventos, tendrás cosas antes del evento, por ejemplo, una visión general, un horario, un enlace de registro, pero también es posible que tengas algún contenido diferente durante el evento. Es posible que tengas una transmisión en vivo o una transmisión de hashtag que quieras estar tocando cuando la gente venga y visite. Después, podrías mostrar galerías de fotos de todos los asistentes, podrías mostrar información para el registro del próximo año. Si listas todo el contenido del stream ahora, puedes conseguir que el redactor comience a escribirlo y puedes conseguir que los fotógrafos comiencen a rodarlo y tengan contenido real para el momento en que estés listo para diseñar. Por lo tanto, su esquema de contenido podría incluir también una lista de asistentes, tráilers de video, feeds de noticias, enlaces de redes sociales, un boletín de correo electrónico, información de contacto, la bios para las personas involucradas, descripciones de su anterior eventos, una tienda de merchandising o información de patrocinio. Si algo de eso te aplica, agréguelo a tu esquema de contenido. Entonces puedes ir y preguntar a los desarrolladores qué tan compleja es cada una de estas características y puedes compartirla para futuras actualizaciones si va a contener tu lanzamiento. Entonces, piensa en este proyecto como la versión 1.0 de tu sitio, pero es genial seguir adelante y tener planes para la versión 1.1 o 2.0. Ahora, enumera tus acciones prioritarias para este sitio. ¿ Qué debe pasar para que este sitio sea sustentable? Comience con sus necesidades de negocio, básicamente, sus necesidades personales desde este sitio. Entraremos en las necesidades de los usuarios con un poco más de detalle en un segundo. Entonces, enumerar aquellos usuarios que pudieran visitar este sitio. Ordena por orden de importancia o frecuencia y piensa cómo escucharán de tu sitio, por qué visitarán, y cómo los ayudarás una vez que estén ahí. Por último, esboza tu navegación justo como una lista aproximada de cómo crees que podría agruparse el contenido de esta versión. De nuevo, entraremos en detalles más adelante, pero es útil ver ya cómo podría empezar a tomar forma tu sitio. Si quieres ir más lejos con esta parte del proceso, recomiendo encarecidamente Content Strategy by Erin Kissane. Se trata de un gran libro corto que te ayudará a hacer un plan de contenido que durará a largo plazo. Entonces, revisa y limpia contornos de tus proyectos y revisa con cualquier visitante potencial si puedes. 4. Mapas del sitio: En este punto, me gusta hacer un mapa del sitio y tener una idea del alcance general del proyecto. También es realmente importante pensar a través tu navegación y cómo la gente va a moverse por el sitio. Entonces, si colocas todo tu contenido en las fichas de índice y comenzaras a tratar de averiguar qué grupos tenían sentido y qué etiquetas podrías usar para esos grupos, comenzarías a tener una idea de tu mapa del sitio. Esto es divertido de hacer con Post-its en la pared, por lo que puedes moverlos libremente y retroceder y mirar el panorama general del sitio o también puedes hacerlo en tu computadora. Entonces, la clasificación de tarjetas funciona en sitios más pequeños. También te muestra qué idioma está usando la gente real, si estás haciendo esto con un grupo de personas de probadores. Puedes hacerlo como una tienda de tarjetas abierta, donde arreglas todo el contenido y luego te das cuenta de qué etiquetas tienen sentido al final. O podrías poner todas tus etiquetas en la pared y luego pedir tus usuarios que arreglen el contenido para que coincida con cada una de estas etiquetas. Asegúrate de que tu modelo mental coincida con el modelo mental de tu usuario. Para sitios más grandes, voy adelante y voy a la computadora y hago un mapa del sitio. Utilizo OmniGraffle para sus bibliotecas de símbolos pero Google Draws también tiene flechas magnéticas, por lo que es igual de bueno para este propósito. Se desea incluir todas las pantallas que deben ser diseñadas, construidas o visitadas. Estos incluyen boletines, páginas de Facebook, servicios de terceros , paneles de administración, cualquier cosa que forme parte de la experiencia del usuario y que alguien va a necesitar diseñar. No tienes que incluir una flecha para cada sección. He incluido algunos aquí para mostrarte la navegación básica desde la página de inicio, por decir, la página de retiro y luego hacia abajo a través del proceso de pago. Pero si incluyes cada enlace en tu sitio, el mapa del sitio empieza a volverse un poco abrumador. Todo el mundo diseña estos de una manera diferente, pero aquí hay algunos estilos que me parecen útiles. Te darás cuenta de que he usado rectángulos para todas las páginas regulares. Entonces esta pila de rectángulos indica que se trata de una plantilla, así que sé que va a haber múltiples versiones de esta página. También puedo obtener más detallado y hacer codificación de color. Entonces, hago amarillo para las páginas de aterrizaje, las páginas más importantes y donde podría venir la gente de Google o de Facebook. Clientes y fundadores a menudo se enfocan en la página principal, pero las páginas de destino son las primeras impresiones de muchos usuarios o más frecuentes de su sitio. Entonces, piensa en BuzzFeed o Upworthy, ¿incluso vas a sus homepages? No. Solo aterrizas en esas páginas de artículos. Entonces, piensa en tus publicaciones de blog, piensa en cualquier promoción especial que tengas y realmente resalta esas páginas para que tengan igual atención a la página de inicio. También puedes resaltar cualquier servicio de terceros en gris para que sepas que esta es una página que forma parte de tu ecosistema, pero en realidad no tienes que diseñar esa. Podría ser capaz de despellejarlo pero a veces no se puede. Entonces me gusta resaltar en verde cualquier pagina que genere ingresos. Me recuerda que necesito meter a la gente en ese embudo, si este sitio está tratando de apoyar a alguien. El resaltado azul es para trabajos de mercadotecnia. Para las startups y otras personas que intentan planear su sitio web, a menudo es la planificación de negocios al mismo tiempo. Al incluir todas estas propiedades diferentes, como tu página de Facebook o página de Twitter, cualquier volantes que estés creando, la insignia de boca a boca que estás intentando crear, les ayuda a recordar que esos son propiedades adicionales que necesitan para crear y mantener. Entonces también puedes resaltar en rojo cualquier página que requiera inicio de sesión, por lo que la protección con contraseña o simplemente tu panel de administración básico. También uso esquinas redondeadas para cosas que podrían ser una capa en lugar de una página independiente. Entonces para mí, este es mi signo en capa. También tendría estos llamativos que aparecerían en múltiples páginas, por lo que para suscribirse al boletín, para compartir cosas. Entonces, así que podrías tener uno realmente simple. Se ve algo así, que simplemente te da el nombre de las páginas, esta agrupación ruda de contenido, o podrías tener una súper involucrada. Esto fue para un proyecto multianual en el que trabajé, donde estaba codificando por color cada plataforma que estábamos usando. Se trató de una agregación de código abierto de cuatro plataformas de código abierto diferentes. Esta fue la visión a largo plazo de cómo funcionaría la plataforma cuando primero conseguimos que todos los sistemas funcionaran juntos, pero obviamente, es un poco abrumador si solo estás haciendo un sitio pequeño para un pequeño grupo de personas. Intenta hacer un mapa del sitio que revele el alcance del proyecto de una manera que sea útil para ti. Aclara las acciones prioritarias en el sitio y consigue a todos los miembros del equipo en la misma página. Entonces, irás a Google Drive y crearás un nuevo dibujo y tendrás este lienzo en blanco. Se puede pasar por las diferentes formas, las diferentes flechas. Esas son las herramientas más importantes. Pero por supuesto, puedes pulir esto para lucir lo más bonito que quieras. Entonces, ve por tu mapa de sitio, haz un rectángulo para cada pantalla o sección, haz pilas de rectángulos para plantillas, y luego recuerda codificarlo de color para que puedas obtener una visión general de alto nivel de las prioridades para este sitio. 5. Directrices de la marca: Nuestro siguiente paso son las pautas de marca. La gente no siempre quiere hacer tiempo para este paso pero es súper importante si quieres que tu proyecto tenga una sensación consistente. Descarga el archivo de pautas de marca de la sección del recurso si quieres seguir adelante. La siguiente clase de esta serie se pondrá en profundidad sobre el diseño visual pero necesitas tener una idea de la personalidad de tu marca en el escenario UX también. ¿ Qué palabras usarás como etiquetas? Contarás tu historia a través de imágenes, diagramas, o algo más? Todos estos elementos forman parte de la experiencia del usuario, y ahora hay millones de sitios web en el mundo. Por lo que la personalidad única y consistente es esencial tanto para la funcionalidad como para el impacto. Por ejemplo, la Casa Blanca tiene una imagen en particular que están tratando de transmitir la cual es muy diferente a lo que cabría esperar de Disney o de Starbucks. Entonces, ¿cómo articulas esto? ¿ Cómo lo pones en lineamientos que todos pueden usar? Hay un libro de marca de Santa que se puso como una especie de broma pero que en realidad te da una muy buena idea de cómo estas cosas tienden a funcionar sobre los sentimientos y los valores de tu marca en particular. Así que mira a través de esa para una visión general divertida. Otro gran ejemplo de personalidad de marca es MailChimp. Han hecho mucho trabajo siendo realmente creativos y realmente consistentes a través de muchas plataformas diferentes. Y Aarron Walter que trabaja en Nalgene tiene un gran libro para darte más visión de este proceso, se llama Diseñar para la Emoción. Y utilizamos un par de su ejercicio para completar también nuestro esquema. Entonces aquí hay un ejemplo de lo que él llama una persona de marca. Donde explicas o tienen un personaje real que está sosteniendo algo de la personalidad pero para nuestros propósitos, pensaremos en como una celebridad que podría representar nuestra personalidad. También hace rasgos de marca en el formato X pero no Y, por lo que tienes una especie de gama que tu marca caerá dentro. Y luego también hablas de tus métodos de compromiso o tus métodos de interactividad que tu sitio web podría utilizar para transmitir su personalidad. Y también recuerda que se trata de tus usuarios. No estás tratando de representarte a ti mismo a menos que este sea tu sitio web de cartera pero quieres pensar en lo que va a encantar y deleitar a tus usuarios. Entonces usa su lenguaje no necesariamente el tuyo, intenta hacerlo con un estilo que les dé algo de lo que están orgullosos de poseer, y piensa en las imágenes que son aspiracionales para ellos, no necesariamente los detalles banales de un día de hoy. Entonces cuando hacemos todo esto, nos da una dirección consistente a lo largo de cada paso del diseño. Por lo que otra vez pensar en ello como una celebridad es una manera realmente buena de empezar. Entonces, ¿tu personalidad es súper exclusiva y más formal, es más joven e inocente y llena de energía? ¿ Qué celebridad podrías escoger para representar la personalidad de tu sitio? Así que empieza por enumerar las mejores características de tu marca. Se trata de lo inteligente que eres en tecnología, se trata de lo amable que eres, lo rápido, lo que sea que estés tratando de atravesar. Haz una breve lista de todas esas características. Y luego si miras esta escala de personalidad que he redactado, trama donde quieres caer en cada una de estas gamas. ¿ Eres más profesional o más casual? ¿ Estás más bien establecido o eres más vanguardista? No tengas miedo de inclinarte camino hacia un lado u otro. Eso te va a dar algunas pistas de diseño realmente claras más adelante. Así que tómate un tiempo y mira a través de cada una de estas escalas y traza dónde estás ahora y también puedes trazar dónde quieres estar si eso es algo diferente. Una vez que te hayas asentado en la celebridad de tu representante, asegúrate de haber explicado por qué. Entonces se trata de su actitud de trabajo duro, o se trata del sentido del glamour, o se trata de la acercamiento o el conocimiento que representan. Entonces las razones por las que en realidad son más importantes que la persona que se han elegido ellos mismos. El siguiente paso después de eso es averiguar qué tipo de lenguaje visual podría expresar tu personalidad. Entonces, ¿qué tipo de colores, serían ruidosos, serían tranquilos , serían algo retro, serían neón y futurista, qué tipo de elecciones apretadas, sería todo Caps, super formal, sería casual y apresurado, serían guiones como más escritos a mano. Por lo tanto, piensa en todo este tipo de señales visuales que podría tener tu marca. Y luego finalmente enumerar sus métodos de interacción. Verás algunos ejemplos en los lineamientos de marca doc. Por lo que si estás tratando de ser amable podrías hacer preguntas o podrías dar consejos a tus usuarios. Si estás tratando de ser sofisticado, podrías usar unas técnicas de animación más modernas y podrías usar diseños responsivos y si estás tratando de ser divertido, podrías usar humor o juegos o sorpresas a lo largo de tu diseño. Así que piensa a través de algunas de estas ideas y haz un boceto de todas las piezas de tu marca ya que podrían relacionarse con el diseño de tu sitio. 6. Historias de los usuarios: Ahora, es hora de pensar en las historias de los usuarios. Lo más grande que hay que recordar sobre Diseño Web es que es 4D no 2D. Estás diseñando experiencias a lo largo del tiempo, no composiciones planas. No importa cómo photoshop te pueda hacer sentir lo contrario. Experiencias de usuario es la sensación que un usuario obtiene a medida que atraviesa un proceso. ¿ Quieres que sea súper simple y enfocado y mínimo, como la página de inicio de Google, o quieres ser loco, inspirador, y divertido., con mucha gente alrededor. Al igual que este sitio Jameson, podemos pensar en esto como una historia y sus técnicas de narración para ayudarnos a planear. Al igual que las historias tienen un arco narrativo con una escena de apertura, las diversas crisis de acción, un clímax y luego una resolución, podemos pensar en nuestros viajes de usuario como tener un principio, un medio y un final, y tal vez incluso un epílogo. Donde usamos historias son mucho más relacionables. Entonces, por ejemplo el sitio Wi-Fi Karma, nos presenta a John que está constantemente en movimiento y necesita mantenerse conectado. A medida que te desplazas hacia abajo, le muestra configurando su hotspot Karma, conociendo a otro usuario, contando su historia, caminando por el proceso de cómo funciona el servicio y luego los beneficios de usarlo. Es mucho más convincente, mucho más relable que muchas especificaciones técnicas. Pero lo que es un producto muy técnico. Historias también mucho más emotivas y conmovedoras que solo información o un folleto. El agua de caridad hace un gran trabajo de contar diferentes historias sobre cómo ayudará tu regalo, cómo empezaron, por qué debes donarles en lugar de cualquier otra caridad. Utilizan muchas fotografías personales, muchas fotografías de primer plano, muchas historias personales para hacerlo mucho más impactante y mucho más real. Dentro de la historia principal mientras te desplazas por su página de inicio, incluso hay una subhistoria sobre aquí hay un escenario probable si tu pueblo recibe un proyecto de agua. Entonces, tú como donante podrías visualizar exactamente cómo ayudará tu regalo. Las historias también hacen que tu sitio sea más único. Entonces, dice Sony, somos ingenieros pero también somos artistas, y si pasas por este sitio son ejemplos locos de animación y creatividad para demostrar que no son sólo otro productor de hardware, sino que realmente ven esto como artístico creatividad en la forma en que diseñan las cosas, lo que las hace muy diferentes de tal vez cualquier otro proveedor de electrónica. Titulares impactantes también pueden contar una historia diferente para llamar tu atención, esta se trata de la esclavitud en todo el mundo y que aún está en existencia de una manera que tal vez no pienses y así entonces algunas indicaciones para preguntarte algunas preguntas o para dirigirte al siguiente paso dependiendo de cuáles sean tus intereses. Entonces, estos también se llaman flujos cuando estás tratando de dirigir a las personas o lo que están siguiendo a través de diferentes caminos a lo largo de tu página web. Entonces, en el libro del mundo del marketing, se les llama embudos, por lo que medirías cuántas personas visitan el sitio web y luego qué porcentaje de esos se inscriben, qué porcentaje de esos ingresan a tu prueba, qué porcentaje de esos ingresan la información de tu tarjeta de crédito y luego qué porcentaje de esos se convierten en un cliente pagador. Estudias cada paso de ese embudo para ver dónde están las personas cayendo y luego podrías hacer pruebas AB para tratar de mejorar cada paso del embudo. Entonces, cuando entras en el diseño de experiencia, también puedes mapear su estado de ánimo durante esta parte de la misma y eso te ayuda a intentar diseñar tu sitio para apoyar a tu cliente de una manera más personal. Entonces, puedes pensar antes de que incluso lleguen a tu sitio web, están haciendo algo, están haciendo algunas investigaciones, tal vez están en Google, tal vez están en Facebook. Cuál es su estado de ánimo ahí cuando llegan por primera vez a tu página de inicio. Entonces por supuesto tienen su estado de ánimo cambiando a medida que se mueven a lo largo de los pasos de tu proceso, y luego después de que se hayan inscrito para tu evento o te hayan enviado por correo electrónico, podrían también tener algunas preguntas de seguimiento o sentimientos que también podrías abordar a través de diferentes técnicas. Entonces, Google y otras herramientas de analítica, mapean esto como un flujo detallado nuevamente donde se pueden ver todas las diferentes fuentes que estamos pensando en cómo la gente inició este proceso, dónde aterrizan y luego qué pasa una y otra vez este se convierte en una línea de tiempo. Entonces, no son de diseño 2D pero esto es como mostrar el camino de alguien a través del tiempo en tu sitio. Entonces, ¿cómo vamos a trazar este viaje? Algunas personas hacen de persona pero en mi experiencia esos se convierten en estereotipos donde empiezas a hipotética, lo que esta caricatura podría hacer. Entonces, quieres asegurarte de que estás partiendo de la investigación de usuarios reales, de una comprensión real de tus usuarios y luego expresarlos como roles. Entonces, un filántropo generoso es uno de tus usuarios más valiosos o el segundo año de lucha es uno de tus usuarios más frecuentes. Entonces, piensa en cuáles son cada uno de sus objetivos. Por lo tanto, podrían tener un objetivo importante o podrían tener varios goles mientras están en tu sitio. Planearás cada uno por separado. Entonces piensa en lo que necesitan de ti para alcanzar esa meta. Entonces por ejemplo, este generoso filántropo que quiere hacer del mundo un lugar mejor, solo necesitan confianza en que su don va a ser efectivo si deciden entregarte. tanto que, si lo estás haciendo dices un sitio de tutorial fotográfico, el segundo año, su objetivo es convertirse en fotógrafo algún día y así necesitan capacitación básica vía tutoriales cortos. Entonces, si realmente estás pensando en lo que necesita ese usuario real, tu contenido será mucho más específico. Entonces, puedes bosquejar esto otra vez, me gustan las notas pegajosas porque te saca de tu computadora por un tiempo. Pensando en tu papel como punto de partida del viaje, todo el camino a la izquierda y luego tratando de trazar cada pequeño paso en el camino para que alcancen esa meta. Entonces, eso podría ser que escuchen de tu sitio de un amigo y así entonces te Google. Después aterrizan en la página de tus clases y luego navegan por tus clases y luego escogen una y leen la descripción. Después se apuntan y luego se van y luego asisten a la clase. Hay un montón de pasos si de verdad quieres entrar en detalle. Entonces, intenta identificar tus usuarios más importantes y sus principales objetivos y trazar todos estos pasos. Entonces, solo puedes usar un lápiz y papel. Tengo estos cuadernos de Muji que me gustan que tienen cuadrados predibujados en ellos o de nuevo los stickies son divertidos, puedes ponerlos en la pared y luego son fáciles de reorganizar. Entonces, recuerda que es solo que estás empezando el estado y el objetivo final y estás tratando de llenar todos los pasos intermedios. Entonces, para esta foto novato que busca entrenamiento, nuestro flujo podría verse así. Su primer paso sería que son tutoriales de fotografía en Google y así queremos pensar, en rojo es nuestra respuesta que quisiéramos asegurarnos de optimizar nuestro sitio para esas palabras clave. Entonces desde Google aterrizan en nuestra página de inicio y así queremos pensar, oh este novato querría ver tal vez las clases más populares. Por lo que solo quieres rellenar para cada uno de estos pasos. Ahora ve y rellena el contenido prioritario que apoyaría lo que quieres que hagan a continuación o lo que quieran hacer a continuación. Entonces, las historias pueden estar orientadas a objetivos. Como acabamos de describir. También pueden ser exploratorios aunque. Por lo que si estás en Pinterest o en un sitio con mucho contenido en él, podrías estar leyendo y navegando y decir que podrías trazar uno de esos si estás haciendo un sitio donde la gente estará navegando. Pero también comienzan a salir a la superficie estos requisitos funcionales. Entonces, comenzarías a ver que, oh necesitamos poder resaltar las clases más populares o necesitamos poder ordenar por precio o cualquier otra funcionalidad que esta persona pudiera querer. Entonces, por eso quieres caminar a través de ellos a detalle, y de nuevo a menudo revelan brechas. Tienes este esquema de contenido que tal vez tu cliente te proporcionó pensado, pero cuando caminas por las historias en formato lineal, vas a empezar a darte cuenta de páginas y contenidos pasados por alto, y siempre hay un paso más a la historia. Después de que salgan de tu sitio, podrían ir a decírselo a un amigo. Podrían volver más tarde. Cómo es su experiencia como visitante de regreso. Pero siempre piensa en ese último paso. Aunque por lo general es inscribirte, hay un gran llamado a la acción así que después de eso quieres agradecerles. Podría darles recompensa que podría ser un buen momento para recolectar algunos comentarios, ¿qué más le gustaría ver en nuestro sitio? ¿ Cómo te gustó esa clase? También podrías recomendar otras actividades si quieres ayudarlos a intentar navegar, tu sitio y ver algún contenido que podrían haber desnatado. También puedes sugerir que te sigan, suscríbete a tu newsletter, mantente en contacto para que no se pierdan servicio que estés brindando y luego también solo diviértete un poco con él. Podrías decirles una broma, sorprenderlos, darles algo entretenido después que hayan terminado un trozo particular de tu página web. Entonces, ve a través y enumera todas tus historias de usuario. Identifica a tus principales usuarios, los más importantes y también a los más frecuentes. Enumerar los principales objetivos para cada uno. Lo que están tratando de lograr y luego también lo que necesitas para lograr y luego enumera cada paso para alcanzar esa meta y cómo lo vas a apoyar. De nuevo, puedes usar stickies, papel, o computadora. Entonces después de que tengas todas esas historias escritas, regresa y agrega todas las necesidades para cada página. Entonces, por ejemplo, este fotógrafo novato podría necesitar una cosa de la página principal, pero un fotógrafo profesional podría esperar una primera impresión muy diferente. Entonces, vas a tener que hacerlo, cada página va a tener un conjunto de requisitos para muchos usuarios diferentes y luego vas a tener que ordenarlos por orden de prioridad. Obviamente, no puedes hacer felices a todos pero tu diseño lo va a intentar. 7. Esquemas de página/prototipos en papel: Ahora, estamos listos para pasar a tramas y prototipos de papel. Se quiere empezar con el bosquejo. Es bueno mantenerse suelto y dar personal la computadora cuando estás tratando de llegar a tus ideas originales. Me encanta esta cita de Jason Santa Maria que, cuadernos de bocetos o no de ser un buen artista, hay de ser un buen pensador. Entonces, no te preocupes por tus habilidades de dibujo. Trata de no ser autoconsciente sobre lo que estás poniendo en la página, solo estás tratando de capturar todas tus ideas de una manera que puedas ordenarlas. Entonces, puedes hacer esto a través de un montón de locas apps para iPad ahora o simplemente tu cuaderno de bocetos lo que te haga más cómodo que puedas renderizar tus ideas con un nivel de claridad que sea apropiado. Entonces, para mi sitio de yoga, suelo hacer Sharpie para contornos audaces y luego una sartén más ligera para rellenar algunos detalles obviamente el texto se va a ver realmente diferente cuando nos metamos en el diseño. No se trata realmente de eso, se trata de que estamos teniendo la hora de clase o simplemente el día en la página? ¿ Estamos teniendo un patrón o seis patrones? Solo estás tratando de averiguar qué va a estar en la página y qué va a ver la gente primero, segundo, tercero etcétera. Entonces, aquí está mi flujo de usuario saliendo como bocetos y de nuevo, he empezado a intentar indicar cuál es el contenido de soporte para cada página. Entonces, estoy pensando en cuál es la primera impresión para esa persona, cuál es el contenido de apoyo y luego cuál es el llamado a la acción para cada paso del proceso. Nuevamente, el papel en mi experiencia es la mejor manera de captar ideas creativas. No estás limitado al software, no te estás molestando con tus atajos de teclado y es limitado en ciertos aspectos. Por supuesto, sólo se puede hacer un cierto número de dibujos en papel en una cierta cantidad de tiempo. Porque no puedes copiar y pegar, no puedes duplicarlos a menos que te estés volviendo realmente loco con la copiadora y con tus tijeras y cinta adhesiva. Entonces, cuando nos movemos a wireframes, esta palabra significa muchas cosas diferentes para diferentes personas. Los ingenieros podrían esperar todos los requisitos técnicos, querrían saber cuándo está guardando esta pantalla en la base de datos? ¿ Cuándo se está activando nuestro mensaje de error? ¿ Qué aspecto tiene una versión cerrada? tanto que, tu manager podría esperar los contornos en cada elemento de la página en la misma posición en que aparecerán como diseño final. Es posible que los diseñadores esperen que lo harían estos wireframes describirían las prioridades de la página, pero tal vez no esperen tomar el diseño tan en serio. Entonces, quieres confirmar lo que espera tu equipo antes de iniciar wireframes. Para este proyecto, nos vamos a centrar en wireframes que esbozan el contenido principal y la funcionalidad para que podamos probar nuestras historias de usuario más importantes. Aquí tienes un ejemplo de lo que hice por CreativeMarnings. Donde esto estaba ayudando al equipo de desarrollo a ver que queríamos poder ordenar por continente, ordenar por alfabeto, ordenar por arco iris. Queríamos tener un inicio un capítulo o enlace, queríamos tener un estado flotante en un mapa, necesitábamos tener un mapa. Entonces, pueden empezar a hacer todos sus planes técnicos y hacernos saber cuánto tiempo van a tardar nuestras ideas en construirse. Pero esto obviamente sigue siendo un formato bastante rudo que yo como diseñador, no puedo empezar a elegir colores, no puedo empezar a molestar con los diseños. Esto nunca va a quedar hermoso. Si tu wireframe empieza a lucir hermosa estás pasando demasiado tiempo en ellos. En realidad se trata de capturar ideas y funcionalidad. Aquí hay otra que hice por esta app de libro que mencioné, Riffle. Originalmente, tenía un concepto llamado Book Drop donde todo se trataba de una interfaz de arrastrar y soltar. Yo realmente quería una característica en la que si no te gustaba el libro podías arrastrarlo a un foso de fuego y verlo arder no puede pasar tan bien. Pero fue divertido poner esas ideas en papel y que la gente pudiera entender de qué estábamos hablando. De nuevo, hablamos de lo que pasa cuando le recomiendas el libro a un amigo genera un mensaje, ¿qué tipo de mensaje? ¿ Qué dice ese mensaje? Hay muchos sub-pasos en cualquier sitio de inicio especialmente, un montón de sub piezas que necesitan ser abordadas. Cuando haces que se puedan hacer clic, también puedes probar después la interactividad de los mismos. Entonces, idealmente antes de vincularlos a todos, quieres asegurarte de que has empezado a ordenar esta jerarquía de necesidades para cada página. Pero las necesidades que determinas a través de tus historias de usuario. Esperemos que hayas incluido toda la funcionalidad que se requiere y el contenido principal y hayas empezado a ver dónde tienes problemas de diseño. Si estás pensando que vas a alinear todas estas fotos como panorama pero luego resulta que ninguna de tus fotos está formateada de esa manera, estás empezando a ver algunas de esas cosas y empezar a tal vez a hacer otros planes a medida que visualizas el sitio. También necesitamos considerar el contexto en la era del diseño receptivo. Entonces, Google hizo un enorme estudio de investigación llamado The Multi-Screen World y habla cómo el contexto determina qué dispositivo va a recoger una persona. Entonces, solíamos estereotipar que los usuarios móviles estaban fuera de casa. Estaban fuera en la calle o de pie en fila pero ahora sabemos que la gente a menudo levanta su teléfono cuando están sentados en el sofá. No quieres cruzar al otro lado de la habitación para meterte en tu laptop o no quieres volver a ponerte en tu computadora y empezar a hacer trabajo. Entonces, podrías coger un teléfono por la cantidad de tiempo que tienes, porque tienes un cierto objetivo que estás tratando de lograr, por la ubicación particular donde no tienes acceso a un dispositivo u otro o también simplemente tu estado mental. Debido a que la gente ve sus teléfonos obviamente como un dispositivo personal, generalmente es solo una relación de uno a uno de algunos con su teléfono. Una computadora podría ser compartida entre múltiples personas o podría ser algo que sólo tienen en el trabajo. Una tableta a veces llena este papel intermedio donde puede ser más bien como un centro de medios, tal vez es justo donde ven películas o simplemente donde escuchan música o simplemente donde juegan juegos. Entonces, piense en los contextos particulares para cada uno de estos dispositivos a medida que empezamos a planear cómo van a refluir nuestros diseños para ellos. De nuevo, los teléfonos pueden iniciar un proceso pero puede que no sea donde lo termines. Entonces, el estudio dice que el 65 por ciento de las tareas de búsqueda se inician en el smartphone pero entonces podrías ir a tu computadora para continuar con el proceso. Entonces, si estás planeando un viaje, si estás intentando comprar en línea, tal vez solo intentes ver tal vez si algo está en stock en tu teléfono. Pero entonces podrías ir a una pantalla más grande una vez que quieras comparar opciones, o tratar de hacer planes, o empezar a compilar un documento de investigación, así que piensa en eso también. A menudo el teléfono o los dispositivos móviles sobre recopilar la información y los diseños de escritorio son sobre organizarlos o compartirlos sin embargo. Ya no hay sólo tres que solíamos romper siempre las cosas en móviles, tabletas y computadoras de escritorio pero tenemos que darnos cuenta de que ahora hay muchos fabricantes de hardware. Entonces, piénsalo como móvil-ish, mesa-ish. Estos dispositivos de tamaño mediano o dispositivos tablet-ish pero ya no podemos diseñar para anchos de píxel particulares. Por lo que ahora, quieres escribir historias contextuales enlistar cada uno de tus contextos principales para que puedas empezar solo diciendo tablet móvil y escritorio y quieres enumerar los objetivos probables en cada uno. Entonces, alguien en su teléfono móvil podría simplemente estar buscando tu dirección, alguien en el escritorio podría estar intentando apuntarse, ingresar toda la información de su tarjeta de crédito. Sea lo que sea enumerar cualquier meta en particular para cada contexto y nuevamente, enumera todos los pasos para alcanzar cada meta. Después vuelve a los requisitos de tu página y agrega estas necesidades adicionales para cada contexto. Pero también recuerda que podrías reducir tus necesidades. A veces la gente en un teléfono móvil no necesita todo lo que estás ofreciendo en la página web. Por lo tanto, es posible que también puedas simplificar tu sitio web para diferentes dispositivos. Entonces estaremos listos para iniciar el proceso de wireframing. Nuevamente, los wireframes se centran en el contenido y simplemente en conseguir cosas en la página, no son diseños bloqueados. Te ayudan a empezar a descifrar algunos problemas de diseño pero vas a revisar todos estos diseños durante la fase de diseño visual. Entonces, solo concéntrese en conseguir las cosas en la página. Entonces, la revista Smashing habla de ruptura lógicos frente a estos puntos de ruptura específicos del dispositivo. Entonces, se podría decir, está bien, en una pantalla estrecha si sólo tuviera una pequeña cantidad de espacio, necesitaría la navegación y necesitaría el texto principal de la página. Pero si tuviera un poco más de espacio, pondría algunos anuncios ahí porque eso va a ayudar a mi negocio a sobrevivir. Si añado aún más espacio, entonces seguiré adelante y mostraré los comentarios de los usuarios para que empiecen a tener un sentido de la comunidad y la acción que va en este sitio. Entonces, piense en el contenido los puntos de ruptura hacia afuera versus simplemente idear hacia adentro. Yo lo pienso también como se acercan los Ricitos de Oro. Ya que normalmente voy todo el camino desde la planificación hasta el diseño hasta el desarrollo, solo hay tanto que tienes tiempo para hacer. Ricitos de oro volvió a descomponer las cosas en disposición ish. Entonces, es pequeño, mediano y grande. Lo llaman bebé, mamá y papá oso contra mi iPhone. Tres layout, mi diseño iPhone 5, el layout de Android. Normalmente no hay tiempo para hacer un diseño para cada dispositivo. Entonces, piénsalo como tres contextos generales. Entonces, es útil empezar. Voy a Balsamiq a estas alturas. Entonces, puedo copiar y pegar y otra vez, duplicar y puedes enlazar cosas y hacerlas capa interactiva. Me gustaría empezar por tal vez wireframing todas las páginas una al lado de la otra. Entonces, solo puedo copiar y pegar muy fácilmente y empezar a ver cómo reacciona cada diseño. Balsamiq es una herramienta realmente útil porque cuenta con Biblioteca de Símbolo. Por lo tanto, solo puedes arrastrar y soltar menús, puedes arrastrar y soltar barras de vínculos. No estás teniendo que recrear todas estas cosas por el píxel en Illustrator. Se ha construido en estados seleccionados o discapacitados. Nuevamente, te permite enlazar tus páginas para que puedas hacerlas interactuar e interactivo PDF o un enlace a un prototipo. Entonces, esto es realmente importante porque cuando estás haciendo sitios web receptivos, tienes al menos tres veces el diseño. Entonces, necesitas ser lo más eficiente posible. Por lo que de nuevo, concéntrese en la funcionalidad y la jerarquía básica aquí. Si empieza a lucir bien, estás tardando demasiado en estos. También asegúrate de mirar a través Biblioteca de Símbolos Balsamiq y familiarizarte con todos sus diferentes elementos. En partidos HTML real y patrones bastante bien. Entonces, es mucho más realista como herramienta de diseño Web que Photoshop. También puedes mirar a través de sus maquetas de sitio para ir por muchas otras bibliotecas de símbolos, por ejemplo, todos esos paneles de compartir Facebook elementos iOS y también puedes hacer tus propios símbolos importando imágenes al programa o usando otras bibliotecas. Entonces, cuando tengas este archivo de todos los tamaños, eventualmente quieres dividirlo en un solo perfil de diseño para entonces podremos probarlos. Entonces, si miras las pestañas inferiores de esta pantalla, puedes ver que tengo mis qué seis páginas más un menú todo burlado y luego puedes ver a Balsamiq mostrándome los enlaces que he hecho a todas las diferentes páginas. Entonces, habrá clickable. El otro elemento útil es que, discúlpame, también puedes aumentar tu vocabulario de diseño Web mirando sitios como Pattern Tap, UxLab, patrones de biblioteca y más. Consulta mi guía de recursos para algunos sitios favoritos porque todos estamos trabajando con el mismo alfabeto de elementos HTML. Pero hay un millón de formas de combinar estas piezas de textos, estos botones en todo tipo de nuevos patrones de experiencia de usuario. Para hacer buenos wireframes que sean realmente útiles para jugar y probar, asegúrate de que estás usando texto real y no Lorem Ipsum, para que estés diseñando contenido real y tus usuarios obtengan el punto en lugar de que solo sea un disposición anónima de cajas. Asegúrate de etiquetar cualquier imagen. Entonces, si dejas caer un gran rectángulo gris en la pantalla nadie va a saber lo que eso significa a menos lo etiquetes paisaje de Perú entonces ellos entenderán cuando estés haciendo las pruebas del usuario. Entonces, pasa por tus wireframes y comienza con tus diseños móviles y enfocarte en la jerarquía de necesidades para cada página y en ese contexto, para cada uno de tus usuarios. Entonces me gustaría ir a la maquetación más grande y hacer la versión de escritorio. Entonces, tratando de aprovechar al máximo la pantalla grande y luego, entraré a los diseños de la tableta y veré cómo está el suelo medio. A veces iré directamente al navegador y haré algún código para esto pero también es útil hacerlos en tu fase de wireframe y ver cómo aguantan tus diseños. 8. Pruebas de usuarios: De acuerdo, ya has redactado tus wireframes. Ahora, quieres ponerlos a prueba. ¿ Por qué? Porque te ahorrarás algunos dolores de cabeza en las fases de diseño y desarrollo. En el diseño web, tenemos que admitir lo que se llama el Bias Malkovich, que es la tendencia a pensar que todos usan Internet de la misma manera que nosotros. Pero cuando ves a alguien realmente tratar de pasar por tus bellos diseños, es una experiencia iluminadora y muy humilde. No pueden encontrar el botón que pensabas que era tan obvio. Les falta totalmente alguna sección importante de contenido. Realmente te obliga a mirar tus diseños de una manera nueva. Entonces, aquí hay otro ejemplo de esto de usertesting.com. ¿ Cómo es la experiencia en tu sitio web o app? Oh, chicos, no tienen zoom otra vez. Eso es terrible. ¿ Cómo voy a ver todas las costuras? Vergüenza en ti. Wow. Entonces, toneladas de tiendas. Realmente no puedo decir cuál es el más cercano. Me gustaría echar un vistazo a esos específicamente, sólo la única fuente. Estoy dando click aquí para ver pero no está pasando nada. Entonces, déjame tratar de ponerme en contacto con ellos. Correcto, bueno, no estoy en Outlook así que eso es un problema para mí porque no puedo usar eso. Eso es un poco más de lo que busco gastar así que voy a tratar de estrechar por precio aquí. Probemos 50 y por debajo. ¿Jabón para platos? Entonces, vemos que hay muchas cosas que realmente no pretendíamos que pasaran y puedes obtener este tipo de retroalimentación incluso en tu wireframe. Se puede empezar a ver la jerarquía principal si lo están consiguiendo y cómo está funcionando la navegación. Entonces, vuelve a tus bocetos o Balsamiq y haz enlaces entre todas las páginas. Entonces, en Balsamiq, simplemente desplegarás, hay un menú desplegable para seleccionar enlaces y luego los exportarás como PDF interactivo o podrás exportar todas las páginas como PNG y enlazarlas en la app InVision. Entonces, terminarás con algo como esto donde tienes todas tus diferentes páginas y las vas a enlazar juntas para que alguien las vea todas, parece que están haciendo clic a través de una página web inexistente. InVision es esta herramienta donde puedes subir toda una carpeta de PNG y luego alguien puede abrir ese enlace en su teléfono y cuando toque los diversos botones y enlaces, los llevará a las diversas pantallas de tu PDF. Entonces, esas son las dos herramientas principales que utilizo para bocetos clicables. Si hiciste todos tus wireframes a lápiz y papel, también puedes usar la app InVision. Entonces, solo toma fotos de todos tus bocetos en papel y luego súbelos a InVision y luego dibujas puntos calientes y puedes enlazarlos desde ahí. O podrías sentarte lado a lado con alguien y hacer algunas pruebas presenciales de un prototipo de papel y solo pedirías que apunten al botón y luego les mostrarías el siguiente trozo de papel. Entonces, esa es otra forma realmente lo-fi, muy rápida de que puedes obtener retroalimentación el primer día sobre tus ideas. Entonces, cuando estás haciendo esta prueba real, hay algunas pautas importantes a tener en cuenta para que no estés sesgando tus resultados. Lee Remote Research, el libro, y también mira en su sitio para obtener muchos consejos sobre cómo puedes hacer esto. Puedes probar a las personas a través de tu página web, a través de laboratorios, en persona, todos los diferentes tipos de investigación que podrías hacer. Sin embargo, los lineamientos básicos son que se quiere enfocar en individuos y no en grupos focales. Definitivamente los humanos tienen un comportamiento de rebaño y si consigues a una multitud de personas en una habitación, se van a mirar unos a otros antes de que respondan y no vas a obtener opiniones honestas. Además, asegúrate de estar hablando con usuarios calificados y no a todo el mundo le va a encantar tu sitio web o usarlo en absoluto. Entonces, quieres asegurarte de que estás hablando con las personas que realmente están entusiasmadas con tu sitio web y te van a dar la mejor retroalimentación. También hay que tratar de ser lo más neutral posible. Entonces, no querrías decir “¿Es mejor esta nueva página de inicio que la última?” Porque eso está liderando al testigo. Te gustaría decir “¿Cuál de estas dos versiones prefieres?” Se quiere tratar de ser lo más neutral posible. Tu tendencia al igual que un humano va a querer ser asiente y decir “Sí, es”, y darles algún estímulo o alguna retroalimentación pero quieres mantenerte muy neutral y decir interesante o preguntarles por qué. ¿ Por qué dices eso? ¿ Por qué crees que debería estar aquí? Pregúntales el motivo de la retroalimentación que te están dando e intenta llegar a sus motivaciones. Porque de nuevo, estas son ideas que estás poniendo en papel. No son diseños pulidos y solo estás tratando de obtener la retroalimentación sobre estas ideas básicas. Entonces, para prepararse para esta entrevista, toma tus historias de usuario más importantes y quieres expresarlas como escenarios que la persona que estás probando pueda visualizar lo que quieres decir un poco mejor. Entonces, en tu historia de usuario, podrías tener un usuario que ya compró una cámara y ahora necesita ponerse en contacto con el soporte técnico. Entonces, para tus pruebas de usuario, podrías tener algo como si encontraras un error en tu cuenta y necesites ponerte en contacto con el servicio al cliente. Entonces, eso les permite imaginar un poco más claramente el inicio de su historia. Después escribirás todo esto en un guión claro para guiarte mientras haces las pruebas de usuario. Entonces primero, les darás algún contexto, entonces cómo o por qué llegaron a tu sitio. Entonces, esto es igual que lo sería en el mundo real. Un amigo podría enviarles un enlace y lo están revisando debido a la recomendación de su amigo, o podría tener una necesidad particular que los está llevando a usar su sitio. Entonces, si eres un calendario de eventos, dirían: “Está bien, estoy tratando de hacer-”, les ayudarías a imaginar que están tratando de hacer un plan con dos amigos. Entonces, eso les daría la perspectiva que necesitan para juzgar tus diseños en una mentalidad apropiada. Entonces quieres obtener las primeras impresiones. ¿ Qué es lo primero que ves que te atención y qué crees que hace este sitio web? Con tus bocetos, será sobre todo sobre los titulares que has elegido, tal vez algunas imágenes etiquetadas si las tienes, pero solo te permite saber si esas cosas están funcionando. Se quiere presentar estas pantallas sin pistas ni instrucciones, así que pregúntales qué ven primero, qué harías a continuación y qué esperarías que suceda cuando hagas eso? Entonces, por ejemplo, se ve esta publicación en Facebook. ¿ Qué recordarías al respecto? ¿ Qué harías y qué esperarías que ocurriera? Después muéstrales la siguiente pantalla. Pídales que narren sus pensamientos y preguntas y sentimientos a lo largo de esta experiencia. Puedes intentar tomar notas mientras las estás caminando a través de ella o puedes grabar la sesión con tu teléfono o con algún otro tipo de grabadora o podrías pedirle a un amigo que venga a jugar escriba por ti. Después de eso, vas a dar y observar estas tareas, estos escenarios principales que quieres asegurarte son realmente utilizables y realmente fáciles. Entonces, de uno a la vez, vas a hacer que lo pasen y solo dirás, “Imagina que estás tratando de contactar con el soporte”, y solo los verás hacer clic a través de tu prototipo y observarás. Qué los está distrayendo, dónde tienes algo más que está inmiscuyendo su atención, qué etiquetas o diseños los confunden. Por ejemplo, si tu tienda está etiquetada Última colección o qué esperan de tus etiquetas de navegación. Entonces también puedes notar lo rápido que logran los objetivos. Entonces, ¿les toma 10 clics solo para agregar un producto a su carrito o es eso algo que podría reducir a nueve u ocho? Cada uno de estos flujos, queremos tratar de hacer lo más simple posible. Entonces terminarás. Obtén algunos comentarios generales. ¿ Es útil este sitio para usted? ¿ Qué más te gustaría aquí? ¿ Qué usarías normalmente para hacer algo como esto? ¿ Cómo se compara este sitio con eso y luego qué es lo más memorable de este sitio? Eso les da la impresión general, y nuevamente, en esta etapa de boceto, será sobre todo sobre tus ideas y sobre tu contenido. Puedes detener tus pruebas una vez que tengas resultados consistentes de esta fase. Entonces, deberías empezar a ver patrones después de unas cinco o 10 pruebas, ojalá después de cinco según Jacob Nielsen y algunos otros investigadores importantes de usabilidad. Entonces, una vez que tengas algunas ideas claras, puedes seguir adelante e iterar tus prototipos. Entonces, construye algo que sea realmente rápido. Se puede cambiar el diseño si nadie está entendiendo dónde hacer clic. Puedes cambiar el titular si todo el mundo piensa que es tonto y puedes seguir adelante y volver a probar con tu próxima gente. Entonces, pasa y haz tu plan de pruebas. Escribe cuáles son tus objetivos, qué quieres explorar. En este, podría ser que quieras probar tu funcionalidad y probar tu contenido. Se desea anotar sus requisitos de quién está calificado. Entonces, si es un sitio de portafolio, ¿ estás solicitando a cierta industria? ¿ Va a ser una determinada persona con cierto nivel de educación en diseño que va a estar juzgando tu trabajo o va a ser algo donde quieres que todos puedan usar tu sitio? Después quieres enumerar tus herramientas cuál es la forma en que estás planeando llegar a ellas. Entonces, ¿vas a hacer un PDF clicable? ¿ Vas a usar InVision y necesitas exportar algunos PNG? ¿ Vas a llamar a tus usuarios y pasearlos por él por teléfono? ¿ Vas a hacer un Hangout de Google y screenshare y grabarlo? Escribe exactamente tu herramienta para que puedas armar una lista y luego escribir tu guión. Entonces, de nuevo, estableces el contexto para las pruebas, recoges sus primeras impresiones, les asignas una variedad de tareas, y luego terminas y obtienes su impresión agregada. Entonces también quieres planear lo que vas a conservar. Entonces, ¿vas a tomar fotos de cada persona que pruebes para poder hacer una bonita presentación más adelante? ¿ Vas a transcribir todo esto? ¿ Vas a redactar una hoja de cálculo de Google para que puedas intentar hacer algún análisis de datos sobre ella más adelante? Entonces, haz un plan para, una vez que tengas cinco o 10 personas que hayas probado, lo que va a ser un formato útil para que regreses a este feedback y también lo compartas con otros. Lo mejor es si todos en tu equipo pueden estar viendo estas sesiones de prueba de usuario en persona, pero eso no siempre es realista. Entonces, sí necesitamos pensar en qué tipo de documentación va a ser útil tener más adelante. Entonces, sigan pasando por esto. Probar e iterar. Puedes probar con otras personas aquí en Skillshare, puedes encontrar personas que representen los visitantes de tu sitio en el mundo real y seguir iterando hasta que sientas que tienes estos wireframes funcionales que servirán tus diseñadores y tus desarrolladores en las próximas fases. Tienes todos los documentos que necesitas ahora para diseñar y desarrollar una sólida experiencia web. Se define tu alcance, se establecen tus pautas de marca y tus acciones principales son claras y consideradas. Entonces, si quieres continuar, nuestro siguiente paso será Gorgeous Web Design y podrás seguir y diseñar tu propia página web.