wp ux&ui design paredro

01

UX&UI DESIGNDISCIPLINA QUE PONE DE CABEZA EL

MUNDO DE TODOS LOS CREATIVOS

UX&UI DESIGN DISCIPLINA QUE PONE DE CABEZA EL MUNDO DE TODOS LOS CREATIVOS

02

INTRODUCCINSer un diseador con dotes creativas excepcionales es una carac-terstica muy positiva, pero ya no es suficiente... ahora los grandes artesanos del diseo de todos los mbitos deben dominar las tcnicas del User eXperience y el User Interface Design (UX&UI)

Este sensible cambio se deriva de la influencia que la tecnologa y el desarrollo de lo digital han tenido en la vida de las personas y, en un primer momento, si los afectados por estas transformaciones fueron los productores de contenidos, pues enseguida los maestros de la invencin de la imagen han tenido que responder a los retos que los usuarios de los servicios exigen de todas las plataformas digitales a las cuales acceden.

En este punto, la paradigmtica historia de Apple y la facilidad de uso de sus sistemas operativos se plantean como el parteaguas de lo que ahora se exige como un mnimo acerca de las nuevas plataformas Android, Blackberry, Windows y por supuesto, iOS, las cuales son las que propician la comunicacin correcta entre la gente y cosas como los portales de internet, los telfonos mviles, las tabletas, los televisores, las consolas de videojuegos, las aplicaciones (de todo lo que uno se pueda imaginar).

Y si se quiere extender esta filosofa hacia el mbito del mundo urbano, estos dispositivos a su vez debern interactuar con los nuevos ingenios arquitectnicos, los edificios y las casas inteligentes, los centros comer-ciales, los vehculos y hasta los robots que se lleguen a tener en casa.

Como se puede apreciar, la influencia que esto tiene en el diseo, lleva al profesional de la creatividad a pensar un poco ms all de lo que antes representaba el papel y el lpiz sobre el escritorio, por lo que resulta importante conocer los esbozos de lo que son el UX&UI Design.

03


PARTIR DE LO BSICO Un par de definiciones simples dada la complejidad de los concep-tos son las siguientes:

El UXD trata de aumentar la satisfaccin y la lealtad de los clientes mediante la mejora en la facilidad de uso y el placer proporcionado por la interacccin entre el sujeto y el producto.

El UID interviene en el modelado correcto de la interfaz de usuario, sean sitios web, apps, smartphones, computadoras, electrnicos, mquinas, vehculos y hasta edificios.

Para ponerlo de forma an ms sencilla, situado en la construccin de un carro, UI sera el equivalente a las formas del asiento, el volante, las palancas y los botones; la facilidad del encendido, el sonido del motor, y el UX sera la manera en la cual la suma de toda la experiencia de manejo del conductor propicia una sensacin de valor para los tripu-lantes, en donde por ejemplo, la deteccin automtica de la correcta temperatura de acuerdo con el perfil del usuario, la conexin de su mvil con el sistema de sonido interno y otros factores similares la hacen una vivencia distintiva.

03


04

ESTRUCTURA CORRECTA DE PANTALLASDesde aquella poca durante los aos 80, en la que Wham! explotara el exagerado uso tipogrfico en su video para la cancin Wake me up, muchos cantantes y agrupaciones de la msica hasta esta poca, como Kanye West, Daft Punk y Adele, han agregado a sus audiovisuales grandes tipografas, con el objeto de ofrecer movimiento y vida distinta a sus canciones.

Lejos de parecer una pista para un karaoke, los videos musicales que utilizan tipografas para dar vida a sus canciones, se ayudan de letras para comunicar con mayor facilidad el mensaje de las canciones, hacer acentos importantes o para llenar posibles vacos en el discurso de la pieza, adems de que pueden impactar de maenra importante a los espectadores.


05

DISEO INTERACTIVO

INGENIERA

DISEO VISUAL

REA DE APOYO AL USUARIO

En donde el diseo interactivo se refiere a la secuencia de pantallas que se suceden en la aplicacin, es como el flujo en su operacin que al final debe ser sensato para el usuario.

El diseo visual, a pesar de que parece ser lo ms sencillo, en ocasiones es lo ms difcil de lograr y se define por la cromatografa, la tipografa, la iconografa y en trminos generales, con aquello que es consecuente a la personalidad del producto.

Una vez que ambos conceptos aterrizan, la parte de ingeniera se encarga de conectar o programar los comandos y plugins necesarios para que la solucin funcione como corresponde.

Finalmente, para este momento el rea comercial ya debe contar con las respuestas que se refieren al apoyo para el usuario.

Se debe tener en consideracin que si alguno de estos componentes en el diseo desentona, la experiencia del usuario puede no ser positiva. Por lo tanto, el enfoque en los detalles es muy relevante en el equipo de trabajo, para que todo funcione como se espera.

Por lo anterior, resulta recomendable siempre dar un paso atrs, y observar la solucin creada antes de liberarla al mercado, con el fin de asegurarse de que cumpla con las expectativas.

Una solucin de UX&UI debe contener cuatro aspectos bsicos, que son el diseo interactivo, el diseo visual, la ingeniera y una seccin final que tiene que ver con el apoyo al usuario, que puede ser de soporte tcnico, preguntas frecuentes o de asistencia en lnea.

06


UNA DE LAS CARRERAS DE MAYOR CRECIMIENTOSi hasta este punto no te ha enganchado tanto el tema del UX&UI, quizs el hecho de que sea una de las disciplinas que mayor crecimiento en cuanto a la demanda de talento, podra despertarte el inters.

Y no slo llama la atencin por la generacin de empleos, sino tambin en lo referente a la variedad de disciplinas que se usan en la confeccin de una solucin, as como el tema del salario y la especialidad en el uso de herramientas.

06


07

En cuanto a los tipos de trabajos que se encuentran en la disciplina se encuentran los siguientes:

INVESTIGADOR DE USUARIOS (USER RESEARCH): Proveen un profundo entendimiento de los comportamientos de los usuarios, as como de sus necesidades y motivaciones. Ofrecen retroalimentacin en todas las fases del proceso de diseo. Sus salarios en naciones desarrolladas oscilan entre los 80 y los 117 mil dlares anuales.

ANALISTA DE USABILIDAD (USABILITY ANALYST): Aplica la investigacin de usuarios y los principios de usabilidad para identificar problemas de utilidad de las soluciones. Contribuyen en asegurar que las metas de usabilidad se logren al identificar los objetivos del proyecto, evaluar su xito y medir sus resultados. Sus salarios en naciones desarrolladas oscilan entre los 66 y los 127 mil dlares anuales.

ARQUITECTO DE LA INFORMACIN (INFORMATION ARCHITECT): Se enfocan en maquetar, construir y optimizar la manera en la que la infor-macin es organizada y presentada a los usuarios (diseo interactivo). Sus salarios en naciones desarrolladas oscilan entre los 80 y los 126 mil dlares anuales.

DISEADOR INTERACTIVO (INTERACTION DESIGNER): Esboza sobre los datos del usuario, la investigacin y los inputs del equipo, para generar conceptos de interaccin que habilitan las conexiones correctas, fluidas, pertinentes y atractivas sobre las pretendidas experiencias para los usuarios. Sus salarios en naciones desarrolladas oscilan entre los 74 y los 115 mil dlares anuales.

DISEADOR VISUAL (VISUAL DESIGNER): Convierte los wireframes y prototipos en diseos visuales, que son a la vez fciles de usar y se adhieren a la marca pautas. Se basan en un profundo conocimiento de los elementos grficos, guas de estilo, los estndares de marca y diseo de sistemas. Sus salarios en naciones desarrolladas oscilan entre los 60 y los 97 mil dlares anuales.

DISEADOR UX (UX DESIGNER): Suelen provenir de todos los oficios descritos anteriormente dentro del proceso de diseo centrado en el usuario. Su funcin se orienta a la creacin de experiencias de usuario exitosas a travs de la investigacin, la retroalimentacin, el anlisis, las pruebas y las mejores prcticas. Sus salarios en naciones desarro-lladas oscilan entre los 73 y los 110 mil dlares anuales.


08

LOS CONOCIMIENTOS DE ESTOS PROFESIONALESSE CONCENTRAN EN LO QUE A CONTINUACIN SE DESCRIBE:

HTML, XHTML, XML 87%

Codificacin CSS 85%

Diagramado de pginas, diseo de interfaz 78%

Edicin de imgenes y produccin 64%

Programacin de aplicaciones para usuario, JavaScript 63%

Arquitectura de la informacin, wireframing, maquetado de sitios 61%

Pruebas de usabilidad 57%

Diseo grfico 56%

Servicios de back-end, PHP, Ruby on Rails, ASP 55%

Gestin de proyectos 51%

Escritura, creacin de contenidos y edicin 42%

SEO y SEM 41%

Pruebas de la accesibilidad 39%

Otros 8%

Y LAS HERRAMIENTAS QUE SON MS USADAS ENTRE LOS CREADORES DE UX&UI SON LAS QUE SE RELACIONAN A CONTINUACIN.

Investigacin Herramientas de diseo Elaboracin de prototipos

PollDaddy OmniGraffle Adobe Firework

Usabilla Visio HotGloo

Morae Axure Justinmind Prototyper

Feedback Army Balsamiq Mockups iPlotz

Crazy Egg Mockingbird fluidlA

Webnotes Wirify CogTool

Silverback Mock Flow Lumzy

Flip Camera Power Mockup The Pencil Project

Camtasia Studio Pattern Tap App Sketcher

UserZoom Cacoo UX Pin

Google Website Optimizer Gliffy Pidoco

Google Analytics Paper Sketching Paper Prototyping* Toda la informacin de la anterior seccin proviene de un trabajo realizado porOn Ward Search (http://www.onwardsearch.com/UX-Career-Guide/).


09


OTROS 6 BUENOS RECURSOS PARA EL DISEO DIGITALAdems de los anteriores instrumentos, probablemente las siguientes herramientas no estn en el radar de los profesionales de esta industria, pero no tardar el momento en el que debern relacionarse con ellas.

LUMOS: Con ms de 1,450 iconos tiles y perfectamente bien diseados, listos para descargar, es un complemento esencial para la coleccin y adornar artsticamente los diseos.

APPITERATE: Para los que gustan del diseo de aplicaciones mviles de arrastrar y soltar directamente en la barra.

CACTUS: Es un nuevo flujo de trabajo para la codificacin manual. Slo se tiene que elegir una plantilla y Cactus genera directamente la car-peta, la estructura de archivos y todo lo dems. Fcil y rpida de usar.HTML5 Pocket Reference: Es muy preciso y legible, pequeo por fuera pero grande por dentro.

12HOURS: Es una aplicacin para los dispositivos con Android, bonita, inteligente y funciona para marcar los puntos de presin del trabajo diario en un reloj digital.

RESPONSIVE DESIGN WITH WORDPRESS: Si lo que se busca es una gua prctica y a buen ritmo de construccin, esta es la oferta.

09


010


10 SORPRENDENTES CASOS DE UX&UIComo se ha mencionado, la disciplina del User eXperience y el User Interface Design, prcticamente hoy se relacionan a la actividad humana moderna y existen temas por desarrollar, por ejemplo, los pasos para elaborar una buena estrategia de UX, cmo incrementar las ventas a travs de un proyecto, cmo automatizar rdenes de compra, cmo sistematizar la captura de informacin del usuario o cmo lidiar con los errores.

No obstante, estas cuestiones sern resueltas en el siguiente ejercicio de Paredro sobre el tema. Mientras tanto, dejamos 10 sorprendentes casos en los que se plantean diversas soluciones modernas en las que el UX&UI est implcito.

010


011

1. APP PARA LA TOMA DE DECISIONESChoicemap es el nombre de esta nueva app para smartphones que cumple con la sencilla funcin de ayudar a la toma de decisiones difciles o decantarse por la correcta.

La aplicacin (http://youtu.be/WAFwoQHAEzg) es gratuita y contribuye en romper con los dilemas complejos que a uno se le puedan presentar, con el apoyo de una lista de prioridades, las cuales son calificadas por el usuario y ofrecen una idea de cmo van a afectar a su vida.

La parte sofisticada es que utiliza un algoritmo para anotar las decisiones y adems es tambin til para cosas como averiguar el futuro de una relacin, decidirse por un empleo, una inversin o simplemente para saber qu comer para la cena.


012

2. DRIBLET Y EL AHORRO DE AGUAPara ensearle a su hija adolescente cunta agua gastaba al baarse, el ingeniero mexicano Rodolfo Ruiz y su equipo inventaron Driblet, un sistema inteligente para el manejo del agua, con el cual pudo dar una leccin a su nena, pero tambin se convirti en un innovador negocio.

Driblet Labs, Inc. es una corporacin de Delaware recientemente establecida, pero que naci en Monterrey, Mxico, despus de ganar el 1er lugar en la competencia AngelHack Hackathon del Silicon Valley celebrada durante 2013.

Adems de un gran diseo de producto, la solucin que proporciona Driblet incorpora el seguimiento de diversas variables relacionadas con el uso del agua, y que tiene el propsito de capacitar as como alentar a las personas, empresas, organizaciones y gobiernos para ahorrar agua.

Adems, el sistema elctrico de Driblet se alimenta de la misma fuerza en el flujo del agua corriente, de manera que no requiere del reemplazo de bateras.

Al funcionar el dispositivo conectado a la tubera, enva los datos recogidos va WiFi a la nube, con lo que el usuario puede revisar en un web site o un dispositivo mvil los datos respecto a los litros usados, incluso en tiempo real.


013

3. COMO UN ROBOT FALDERO: KEECKERAquellos simpticos asistentes robotizados, como los que se vean en las diferentes caricaturas, series de TV y pelculas de ciencia ficcin, ya comienzan a tener una presencia verdadera en la vida de las personas a pesar de que en un principio sus funciones sean muy bsicas, como aspirar el piso, recoger basura o proyectar audio y emitir video en cualquier lugar, cosa que Keecker ofrece.

Es verdad que todava no se alcanza el momento en el que estos divertidos dispositivos interacten inteligen-temente con los humanos como Robotina, C3PO o Walle, pero cuando menos Keecker (www.keecker.com) ya cuenta con esa apariencia entraable y ofrece un servicio que puede ser de inters para mucha gente.

Para empezar es capaz de moverse slo entre los muebles de la casa, en donde el propsito de la firma francesa que le ha creado es ofrecer a sus usuarios la posibilidad de proyectar sus contenidos personales en cualquier lugar de la habitacin, lo que le abre un abanico de posibilidades para oficinas y eventos.

Adems de su diseo atractivo, con Keecker el usuario ya no est atado a una pantalla, ya que la imgenes se proyectan en donde se desee y se controla desde el smartphone.

Entre las cosas que se le pueden pedir a Keecker es que proyecte una obra de arte o una pelcula en la sala o en la habitacin, una receta en la pared de la cocina, una sesin de ejercicios en el jardn o patio, un tutorial sobre una materia que deseemos aprender en el taller de casa y as, diversin o informacin para la tarea de los nios, videojuegos y hasta crear ambientes musicales para reuniones a travs de la misma aplicacin.


014

4. EL MONSIEUR COCTELEROLa velocidad con la que Monsieur (http://monsieur.co) modernsimo dispensador de cocteles recaud en Kickstarter la cifra objetivo e ingres a su fase de produccin, comunica sin duda su potencial entre los gustos de las persona.

El aparato puede tenerse en casa o en un negocio y es promovido como un bartender robot que prepara cocteles para sus usuarios.

La forma en la que opera es a travs de una pantalla tctil, en la que se ofrecen diversas recetas de cocteles, de forma que el usuario revisa cmo se prepara, qu contiene y la prepara al instante. Y si el cliente no sabe qu ordenar, el dispositivo puede hacer recomendaciones basadas en los gustos del usuario.

Los paquetes de informacin con los que cuenta va de las 12, 25, 150 y hasta 300 recetas. De manera adi-cional, la mquina se puede conectar con el smartphone del usuario, desde donde puede recibir las rdenes de servicio, o en su caso, proveer informacin.

Tambin lleva el control de la ingesta de alcohol que ha bebido el usuario, de forma que puede informar sobre la pertinencia de conducir y hasta puede solicitar un taxi en favor de quien no se siente en condiciones de manejar.


015

5. GOLF GTI Y SU APP MUSICALUna aplicacin que crea msica como respuesta a los hbitos de manejo del conductor es uno de los juguetes que Volkswagen ha inventado de acompaamiento para el nuevo Golf GTI.

Este complemento es el resultado de una inusual colaboracin entre Volkswagen y Underworld, reconocido duo britnico de msica electrnica, (http://www.volkswagen.co.uk/playtheroad) con la cual la conduccin del carro se sincroniza con la msica en tiempo real.

La aplicacin reconoce cmo y en dnde se conduce, de modo que traduce ese movimiento en msica en directo. Obtiene los datos de velocidad y RPM de la computadora del GTI, as como la aceleracin, los datos de localizacin, que se calculan a partir de una combinacin del ace-lermetro, el giroscopio y el receptor GPS presente en el iPhone.


016

6. LA TV EN EL ESTADIOCON GOOGLE GLASSImagina que ests en el estadio, pero a la hora de tener que ir al bao, de pronto escuchas el rugido de las gradas... ... horror... s, te perdiste el gol que define el partido y quiz la temporada de tu equipo preferido... o... quizs no, gracias a una nueva app que se disea junto con Google Glass.

De acuerdo con un artculo escrito por Erika Murphy, en Forbes: (http:// www.forbes.com/sites/erikamorphy/2014/02/28/how-google-glass-is-building-new-venues-for-sports-sponsors/), el Verizon Center y el equipo de hockey de los Capitales de Washington D.C., en la actualidad trabajan en un programa piloto para el desarrollo de un sistema llamado SkyBox, desarrollado con software de la startup APX Labs y para operar sobre Google Glass, que podr desplegar estadsticas en tiempo real, datos destacados del partido, incluidas sus repeticiones en vdeo.

Lo que el texto de la autora no comenta es que la aplicacin podra ofrecer la alternativa al hincha de elegir entre ver la repeticin de la televisora oficial o recoger la perspectiva de alguno de los otros asistentes al estadio, que hayan tenido la oportunidad de grabar el momento.


017

7. THE FIND: EVOLUCINEN EL RETAILTodos aman comprar, aunque para muchos el hecho de invertir horas de visita, saltando de tienda en tienda para encontrar una oferta acorde a los intereses de una compra, representa una tortura, por ello The Find es la aplicacin para mvil que permite a sus usuarios buscar y comparar los resultados obtenidos para encontrar rpidamente las mejores ofertas.

Del xito que The Find (http://www.thefind.com/) logre, sin duda se incidir en el desempeo del retail en el mundo entero y aunque en la actualidad slo tiene presencia en los EUA y el Reino Unido, las tiendas de cualquier lugar del planeta pueden contactar directamente a los creadores de la aplicacin para saber cmo subir su informacin al sistema.

El desarrollo cuenta con modelos para Android e iOS adems de la versin para web y aplica una tecnologa de comercio electrnico patentado que trabaja en un entorno multicanal para personalizar la experiencia de compra, con el apoyo de un buscador web que rastrea informa-cin de todas las tiendas on line para encontrar los productos sobre los cuales compradores los compradores tienen inters.

Cada que se realiza una bsqueda, The Find muestra los productos ms relevantes de las tiendas y ofrece en la tableta, mvil o navegador, los precios y caractersticas del producto en cada local, desde Amazon y hasta Walmart, pasando por todas las tiendas situadas entre estos gigantes del retail.


018

8. LA CASA INTELIGENTE QUE SIEMPRE SE HA DESEADOSe trata de aquella en el que se podr cerrar la llave de agua, prender o apagar luces, abrir o cerrar puertas, ventanas y persianas, todo a distancia y ya es posible, gracias al proyecto que AT&T present en los EUA conocido como Digital life (http://youtu.be/SU8PDySrKok), que permite al usuario controlar todo desde una tableta, telfono o computadora.

AT&T Digital life (http://www.att.com/shop/digital-life.html) es un sistema ya disponible de segu-ridad y automatizacin a control remoto, cuya oferta an se mantiene limitada a determinadas regiones, y adems de que la casa se puede estar asegurar, tambin es posible administrar la actividad de los hijos o de los animales domsticos, ajustar el termostato en el control del clima interno desde cualquier lugar en el que se encuentre el usuario.


019

9. IMPRESO Y NIERA A LA VEZTodas las ocasiones en las cuales los padres asisten a espacios pblicos llenos de gente con sus hijos, les sobreviene un especie de estrs relacionado a siempre tener a los chicos bajo el ojo vigilante, pero con esta innovacin de Nivea en Brasil, una parte de esa angustia se resuelve.

Esta tctica (http://youtu.be/L61ZT9jn1t0), que se anuncia para su uso en la playa porque est relacionada con una marca de protectores solares de Nivea en realidad puede ser til durante cualquier situacin en donde se combinen las muchedumbres con los nios, por ejemplo, par-ques pblicos o centros comerciales.

La campaa, denominada The protection ad, mezcla un anuncio impreso, un dispositivo elec-trnico, un spot para su difusin y la descarga de una aplicacin.


020

10. CONVERGENCIA MVIL Y LAS DISNEY MAGIC BANDSY para terminar, con este caso resulta importante introducir otro concepto, el que comienza a conocerse como la convergencia mvil, con la cual sin duda intervienen elementos de UX&UI y que ser en el corto y mediano plazo una de las tcticas de mercadotecnia ms relevantes durante la experiencia de uso o compra del con-sumidor, la cual se encuentra en pleno desarrollo y en la que Disney es uno de sus pioneros ms avanzados.

As, resulta que durante el verano de 2013, Disney present las Magic Bands (https://disneyworld.disney.go.com/plan/my-disney-experience/bands-cards/) que son usadas por los asistentes a sus parques temticos, las cuales consisten en unas pulseras cargadas con RFID (siglas de la tecnologa Radio Frequency IDentification), que funcionan como boletos de entrada, tambin reducen las largas filas mediante los FastPasses que provee el parque y tambin como llaves para las habitaciones dentro del resort

Las implicaciones de esta clase de ingenios tienen que ver no slo con la movilidad, sino con su capacidad de almacenar informacin personal y las preferencias del usuario, con lo que se pueden correr anlisis veloces, interesantes, data mining y de atencin al cliente, que redunden en una gran experiencia de compra.

Un ejemplo de su aplicacin puede darse cuando la princesa Elsa de Frozen pueda acercarse a una nia sabiendo que es su personaje favorito y saludarla por su nombre. Si es el cumpleaos de la nia, Elsa lo sabr y en la tienda de regalos ms cercana pueda dirigirse a la cumpleaera con la rplica de la mueca, y si los padres aceptan la compra, slo tendrn que mostrar su mueca para pagar por ella (ya que la MagicBand tambin tiene la informacin de la tarjeta de crdito guardada).

Asimismo, seala que los padres apreciarn las notificaciones sobre la velocidad con la que las filas a los juegos se mueven, no tendrn que cargar con una cartera llena de billetes, llaves electrnicas, tarjetas de crdito y FastPasses, con lo que la vivencia ser ms fcil y fluida.

Lo que viene en este formato digital es la convergencia de la telefona mvil, el big data y la personalizacin para impulsar experiencias de usuario verdaderamente superiores, ya sea mediante smartphones o wearables.

As que los especialistas pueden comenzar a estudiar sobre este sofisticada materia de diseo, comunicacin y mercadotecnia experiencial, que se cruza con tcticas y tecnologa de vanguardia.

021

UX&UI DESIGN DISCIPLINA

QUE PONE DE CABEZA EL MUNDO DE TODOS LOS CREATIVOS

wp ux&ui design paredro

Documents