Consideraciones de diseño de aplicaciones móviles para diseñadores web
Dondequiera que te encuentres hoy en día, las personas hablan de aplicaciones móviles . Aplicaciones para esto, aplicaciones para eso.
Las estadísticas también han sido asombrosas. Un estudio reciente de Ráfaga, mostró que los consumidores pasaron 81 minutos por día usando aplicaciones móviles, en comparación con 74 minutos de navegación en la web.
A medida que más personas comienzan a dedicar tiempo a las aplicaciones en comparación con Internet, es posible que se pregunte si el diseño de la aplicación móvil es un área que debe comenzar a explorar y qué tan transferibles son sus habilidades de diseño web.
En esta publicación, nos registramos con una serie de expertos en el campo para obtener sus perspectivas. Junto a nosotros se encuentran Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark y JD Biersdorfer.
Robin Nixon
Robin Nixon es autor técnico y desarrollador web, y es el autor del nuevo libro HTML5 para iOS y Android: una guía para principiantes .
¿Qué consejo le darías a los diseñadores web que están pensando en ingresar al área de diseño y desarrollo de aplicaciones móviles?
En mi opinión, la manera más rápida de ingresar al desarrollo de aplicaciones es asegurarte de estar al día con los últimos estándares HTML (versión 5) y CSS (versión 3), y ser lo más fluido posible con JavaScript, porque muy pronto Es probable que haya soluciones para escribir una aplicación web única que se pueda convertir en aplicaciones nativas para todos los sistemas operativos iOS, Android, Web OS, Windows Phone y más. Esto le ahorrará tener que aprender múltiples idiomas complejos y entornos de desarrollo como Java, Objective C, .NET, etc., y el tiempo requerido para transferir un proyecto a varios dispositivos diferentes.
Por ejemplo, con una base sólida en HTML, CSS y JavaScript, puede ensamblar fácilmente grandes aplicaciones web que también puede convertir en aplicaciones independientes utilizando la información en mi libro HTML5 para iOS y Android, o hay productos disponibles en Internet para ayudar a agilizar el proceso.
Ahora que Microsoft afirma que las aplicaciones de Windows 8 se crearán en HTML y JavaScript, hay aún más razones para garantizar que tenga un conocimiento sólido de estas tecnologías, especialmente dado que se sabe que Microsoft avanza hacia el concepto de una única interfaz de usuario para 2015 (similar a el visto ahora en Windows Phone 7, y especialmente su próxima actualización de Mango).
¿Qué tan transferibles son las habilidades web?
Las habilidades web son altamente transferibles al desarrollo de aplicaciones, si está utilizando las tres tecnologías de HTML, CSS y JavaScript para crearlas. Pero si planeas tomar la ruta nativa y escribir tus aplicaciones en Objective C (para iOS) o Java (para Android), entonces necesitas más de un fondo de programación que de desarrollo web, y hay una curva de aprendizaje bastante empinada para cada uno. .
Afortunadamente, para la gran mayoría de las aplicaciones, es posible usar tecnologías web para lograr resultados similares a escribir código nativo. Solo cuando llega a las funciones de tiempo crítico, como los requisitos de alta velocidad de fotogramas de los juegos de acción rápida, debe volver al idioma nativo de un dispositivo o sistema operativo.
En su opinión, ¿qué aplicación (s) cree que son buenos ejemplos de una aplicación bien diseñada?
Realmente no me gusta mencionar ninguna aplicación en particular que represente un buen diseño, ya que hay muchas, pero como hiciste la pregunta, sin dudas, una aplicación destacada es la de Theodore Gray. Los elementos , que es una exploración interactiva en 3D de todos los elementos, en la que casi se puede imaginar tocarlos, ya que puede rotar cada muestra, moverlas con las yemas de los dedos e incluso verlas en 3D. Para mí, este es un ejemplo de cómo un libro electrónico (que es lo que realmente es) se convierte en mucho más que un simple libro en traducción de libros electrónicos (que la mayoría de los otros libros electrónicos son), llevando los libros a un nivel completamente nuevo.
Los elementos
¿Cómo ves esta vez en el diseño web?
Robin Nixon: Creo que en este momento es el momento más emocionante para los programadores y desarrolladores desde principios de la década de 1980, cuando las microcomputadoras florecieron por primera vez. Una vez que la PC tomó el trono informático, solo Mac y el sistema operativo Linux ofrecían una competencia real (y muy poco en eso). Pero ahora las guerras del sistema operativo están encendidas de nuevo, esta vez impulsadas por la utilización exponencial de dispositivos móviles como teléfonos y tabletas, y la descarga fenomenal de aplicaciones para ellos, lo que significa que hay un mundo de oportunidades. En mi opinión, "hay oro en las colinas".
Aaron Maxwell
Aaron Maxwell es fundador de Mobile Web Up, una diseño web móvil agencia.
¿En qué deberían pensar los diseñadores web a medida que se embarcan en el área de las aplicaciones web?
Muchos de los mismos conceptos aún se aplican. Como diseñador, piense qué acciones desea que el usuario pueda realizar: qué experiencias desea que puedan tener. Este enfoque es a menudo el mejor lugar para comenzar.
Los menús son más efectivos cuando no abruman con demasiadas opciones. Organícese en una estructura jerárquica, desglosada, con no más de una docena de opciones en cada nivel. Considere si el uso de una navegación con pestañas ayudará al usuario a tomar rápidamente las diferentes medidas que necesita.
El espaciado de los elementos es complicado en los dispositivos móviles. El relleno adicional es una técnica muy útil en el escritorio para la agrupación semántica; puede colocar un grupo de widgets, imágenes o cuadros de texto juntos que estén relacionados, y distinguirlos de un grupo diferente simplemente por la separación del espacio vertical y horizontal.
Pero en una pantalla móvil, tienes mucho espacio real para trabajar. Por lo tanto, el diseñador debe ser más económico con la forma en que los elementos están espacialmente separados, rellenando con solo unos pocos píxeles en lugar de docenas. Esto puede funcionar incluyendo otras señales. Las esquinas redondeadas alrededor de un perímetro ayudan a agrupar. Y diferentes colores de fondo también pueden comunicar un cambio de contexto.
Lo que omites es al menos tan importante como lo que incluyes. Piénsalo de esta manera: cada elemento que agregas al menú de configuración, por ejemplo, tiene un costo adicional en complejidad, en tiempo y atención del usuario. Considere detenidamente si alguna característica o elemento lo vale, especialmente teniendo en cuenta el tipo de entornos de alta distracción que suelen utilizarse las aplicaciones móviles.
En su opinión, ¿qué aplicaciones ejemplifican un buen diseño?
Es importante estudiar otras aplicaciones móviles de gran éxito para encontrar lo que es efectivo. Mire los nombres famosos: Facebook, Skype, cualquier cliente de Twitter que sea más popular esta semana. Pregúnteles a sus amigos y familiares qué aplicaciones usan más y trate de descubrir por qué. (Sugerencia: es posible que no sepan por qué, por lo que preguntarles directamente no ayudará mucho). Estudiar Patrones de interfaz de usuario móvil.
Sarah Lynn
Sarah Lynn es un diseñador web y creativo y el propietario de Sarah Lynn Design.
¿Cómo sugiere que los diseñadores aprendan a diseñar aplicaciones móviles?
He encontrado algunas de las mejores formas de aprender a diseñar aplicaciones para la búsqueda del mercado. Vea algunas de las aplicaciones que existen, analizando su funcionalidad, qué elementos utilizan y que ya forman parte de las ofertas del teléfono y cómo podrían mejorarse para que sean más fáciles de usar. Estudia las interacciones de diferentes elementos y cómo las diferentes aplicaciones se comparan entre sí. Muchas empresas ya han puesto el tiempo para hacer extensas pruebas de usuario. Aprende de lo que ya han desarrollado y encuentra formas de construir sobre ellos y mejorarlos.
Hay muchos libros geniales para comenzar. Uno que recomiendo es un libro de Suzanne Ginsburg titulado Diseñando la experiencia de usuario de iPhone . Si, por supuesto, estás interesado en el mercado iOS. Habla de las pruebas de los usuarios y cómo planear un diseño de la aplicación. Un excelente lugar para comenzar cuando no está seguro de cómo realizar el proceso de diseño de una aplicación.
Aprender a obtener retroalimentación de los usuarios y planificar en gran medida en papel antes de ir a la computadora es una gran habilidad para cualquier diseñador de aplicaciones (o diseñador interactivo en general). Otra gran forma de aprender es ponerse en contacto con un diseñador de aplicaciones que ya está produciendo un gran trabajo. Pídales que sean un mentor y que le proporcionen los indicadores que están dispuestos a ofrecer. La mayoría de los diseñadores están dispuestos a pasar unos momentos de su tiempo si lo preguntas amablemente. Recibe comentarios de tus amigos y otros diseñadores que tal vez conozcas. Muéstreles sus prototipos y obtenga sus comentarios.
En su opinión, ¿qué tan transferibles son las habilidades de diseño web para diseñar aplicaciones?
Algo transferible. Yo diría que cae más en el ámbito del diseño de interacción como un todo. Que los abarca a ambos.
Sin embargo, hay muchas cosas diferentes que debe tener en cuenta, debido al tamaño de los dispositivos, los requisitos de las diferentes plataformas y simplemente por la forma en que los usuarios interactúan con las aplicaciones en comparación con un sitio web. Los perfiles de los usuarios de dispositivos móviles pueden variar bastante, desde el típico usuario móvil en movimiento, hasta el usuario móvil que simplemente es demasiado perezoso para tomar su computadora portátil y usa sus aplicaciones mientras se pasea por la casa (incluido yo mismo). los patrones y el diseño para adaptarse a diferentes estilos de vida pueden ser similares en cierto sentido al diseño de un sitio web. No importa cuál sea el medio que siempre está buscando para diseñarlo en torno a su público objetivo.
Aprender a pensar en un formato más pequeño y, a veces, menos flexible puede ser un desafío. Lo mismo aplica para pensar en el paisaje en comparación con la vertical y cómo puede adaptar su aplicación para trabajar en ambos sentidos. Aprovechar las herramientas integradas del dispositivo móvil es otra razón por la cual la investigación es tan importante cuando se trata de diseñar aplicaciones. Es casi mejor elegir una plataforma y aprender los pormenores de ella, en lugar de intentar aprenderlas todas. Puede ser bastante desalentador y abrumador si intentas aprenderlo todo de una vez.
Al igual que cualquier medio nuevo, requiere la voluntad de aprender y mantenerse actualizado con el mercado acelerado para tener éxito.
Mike Gualtieri
Mike Gualtieri, es analista principal de Forrester Research y autor del nuevo informe, Mejores prácticas de diseño de aplicaciones móviles .
¿A qué debe prestar especial atención un diseñador de aplicaciones para diseñar una buena experiencia de usuario?
Las expectativas de los usuarios son más altas para las aplicaciones móviles que para los sitios web. Las aplicaciones para iPhone de Apple trajeron cachet de diseño a las aplicaciones móviles. Además, las capacidades táctiles y gestuales proporcionan nuevas formas de interactuar con las aplicaciones. El primer paso para diseñar aplicaciones geniales es comprender mejor a los usuarios de lo que se entienden a sí mismos. La investigación tradicional cuantitativa y cualitativa es importante para crear personas (personas ficticias que representan a sus usuarios). El gran diseño proviene de la imaginación: el diseñador imagina lo que un usuario encontraría útil, utilizable y deseable en el contexto de la aplicación.
Para las aplicaciones móviles en particular, los diseñadores deben considerar las cinco dimensiones del contexto de diseño móvil: ubicación, locomoción, inmediatez, intimidad y dispositivo.
Fuente: Forrester Research, Inc.
¿Qué consejo le darías a los diseñadores web que piensan moverse en esta dirección?
Hazlo. El diseño de aplicaciones móviles para teléfonos inteligentes y tabletas es una oportunidad creciente. Todos necesitan un gran diseño. Hay tres caminos para el desarrollo de aplicaciones móviles:
- Aplicaciones nativas Si tiene habilidades de Javascript, entonces tiene algunas habilidades de programación. No se deje intimidar por Objective C para iPhone o Java para Android. Mire a través de un libro en cualquiera de ellos y podrá obtener una idea rápida si esto es algo que puede abordar. No todos los diseñadores web podrán hacerlo sin capacitación adicional.
- HTML5. Aplicaciones
- Híbrido. Es una aplicación nativa que hace HTML5 dentro de ella.
Todas estas rutas de desarrollo requieren diseño.
Josh Clark
Josh Clark es un diseñador, desarrollador y el autor de Tapworthy: Diseñando aplicaciones geniales para iPhone y Las mejores aplicaciones de iPhone: la guía para los descargadores discriminatorios .
¿Qué consejo le darías a los diseñadores web que estén interesados en pasar al diseño y desarrollo de aplicaciones? ¿Qué necesitan aprender?
En términos de las tecnologías de diseño reales, puede que ni siquiera sea necesario aprender mucho más. Puede hacer algunas interfaces de aplicaciones poderosas usando nuestros conocidos y probables amigos HTML, CSS y JavaScript. No solo estoy hablando de aplicaciones web tradicionales aquí, sino también de las llamadas "aplicaciones híbridas". Estas son aplicaciones cuyas interfaces están diseñadas con HTML pero se entregan como aplicaciones nativas en las diversas tiendas de aplicaciones. Es como distribuir su aplicación web a través de la tienda de aplicaciones. Para los diseñadores web, esta es una forma accesible de comenzar a diseñar aplicaciones web sin aprender un lenguaje de programación.
Jonathan Stark ha escrito dos excelentes libros que ofrecen una visión general de cómo hacer esto, utilizando un proyecto de código abierto llamado PhoneGap, que agrupa su aplicación web en su propio navegador como una aplicación nativa: Creación de aplicaciones de iPhone con HTML, CSS y JavaScript y Creación de aplicaciones de Android con HTML, CSS y JavaScript .
Aquí está la cosa: si bien puedes hacer cosas notables con HTML5 y CSS3, estas tecnologías simplemente no pueden coincidir exactamente con las aplicaciones de Real McCoy, el software creado con el lenguaje nativo del dispositivo. Si desea crear aplicaciones con gráficos llamativos, animaciones, widgets nativos y acceso completo a todo el dispositivo, será mejor que se vuelva nativo. Eso significa que necesita codificar aplicaciones de iPhone en Objective-C, aplicaciones de Android en Java, etc. Estos son lenguajes de programación sin bromear y pueden representar una subida abrupta para que los diseñadores web aprendan. Si va por esa ruta, es posible que desee asociarse con un codificador con más experiencia para ayudar a que sus diseños cobren vida. Mientras tanto, experimentar con el diseño de aplicaciones con HTML, CSS y Javascript puede ser una excelente manera de familiarizarse con la plataforma e incluso crear prototipos rápidos para aplicaciones nativas.
En cuanto al propio proceso de diseño, el diseño de experiencias móviles difiere de manera importante del diseño de escritorio. Los dos problemas para los recién llegados son la ergonomía y el contexto.
Para los dispositivos con pantalla táctil, tiene problemas ergonómicos honestos con los que lidiar. Está diseñando una interfaz para dedos y pulgares, y eso significa que debe tener en cuenta los problemas de comodidad, ¿dónde el pulgar se posa naturalmente en la pantalla? Más que eso, hay problemas de visibilidad. Cuando trabajas en una interfaz a mano, obviamente estás oscureciendo la pantalla. Eso significa que debe diseñar sus controles para que no interfieran con el contenido. Ambas consideraciones, comodidad y visibilidad, explican por qué la mayoría de los teléfonos inteligentes con pantalla táctil muestran sus controles principales y navegación en la parte inferior de la pantalla. Ahí es donde su pulgar se detiene cuando usa el teléfono con una sola mano, y también significa que puede trabajar con los controles sin interferir con el contenido. Esto es exactamente lo opuesto a lo que estamos acostumbrados en el escritorio, donde los menús y controles principales van a la parte superior de la pantalla.
La otra área que es nueva a considerar es el contexto. ¿Cómo y dónde utilizará la gente esta aplicación? ¿Cómo afecta eso sus prioridades y las características que debe poner al frente y al centro? Tienes que tener cuidado aquí. Ha evolucionado el mito de que existe un solo tipo de usuario móvil: apresurado, apurado, distraído. Ese es ciertamente el caso a veces, pero no todo el tiempo. Mobile no solo está en movimiento: está en el sofá, en la cocina, esperando en el aeropuerto por un vuelo retrasado. Todas estas situaciones son momentos en los que su audiencia tiene mucha atención de sobra y realmente puede pasar tiempo con su aplicación. Al mismo tiempo, los dispositivos móviles también pueden hacer más que las computadoras de escritorio porque están cargadas con todos estos sensores que efectivamente les otorgan superpoderes: GPS, micrófono, cámara, táctil, giroscopio, brújula. El contexto de este dispositivo determina la forma en que su público usa su teléfono y espera usar su aplicación.
Todo esto significa que debe tener en cuenta cómo el contexto del dispositivo afecta las prioridades del usuario, y esas prioridades probablemente sean diferentes de las prioridades del escritorio. Pero hay un giro complicado en esto: no se puede confundir este contexto con la intención del usuario. Hay un instinto común para simplificar en exceso las aplicaciones móviles, para que sean de escritorio. Eso está mal. Hacemos todo lo posible en nuestros teléfonos en estos días, y cada vez que dices: "La gente no quiere hacer eso en el móvil", te equivocas. Todos hemos tenido esa experiencia en la que accedes a un sitio web en tu teléfono inteligente, y te encuentras con la versión móvil del sitio, donde han eliminado exactamente la función o el contenido que estás buscando. El hecho de que estés en una pantalla pequeña rara vez significa que quieres hacer menos. Es como decir que solo porque un libro de bolsillo es más pequeño, deberíamos eliminar capítulos. No confunda el contenido del dispositivo con intención.
Lo que estoy diciendo es que creo que en la mayoría de los casos, las aplicaciones móviles y los sitios web deberían tener contenido y características temáticamente similares a sus primos de escritorio. La presentación y la prioridad pueden cambiar para adaptarse a la mentalidad móvil, pero el contenido casi siempre debe ser el mismo. De hecho, en muchos casos, las versiones móviles deberían hacer más, porque los dispositivos son capaces de más. Es por eso que la aplicación móvil de Amazon puede hacer cosas que el sitio web no puede hacer: escanear códigos de barras, por ejemplo, para buscar artículos.
Para los diseñadores web, esto significa que debes empezar a pensar de forma más flexible sobre cómo crear sitios web. Lo hemos estado haciendo mal durante más de 15 años, creando sitios web solo para navegar en el escritorio. Para eso no fue diseñada la web. Fue diseñado para ser neutral en la plataforma, para mostrarse en cualquier tipo de pantalla o dispositivo. Simplemente no sabe cómo se verá su sitio web ahora. Hay miles de dispositivos con diferentes factores de forma que pueden acceder a su sitio web ahora, y eso significa que es importante crear sitios web que se puedan adaptar a cualquier dispositivo. Para la mayoría de nosotros, esta es una nueva forma de pensar sobre la creación de sitios web; no se trata de generar un sitio web móvil separado y un sitio web de escritorio por separado. En cambio, significa construir un único sitio web que se adapte con gracia a las limitaciones y capacidades de cada dispositivo.
Somos muy afortunados aquí en el planeta tierra de que vivimos junto al hombre más inteligente del universo sobre cómo diseñar este tipo de sitio web receptivo, y su nombre es Ethan Marcotte. Ethan acaba de escribir un gran libro nuevo llamado Diseño web adaptable que describe cómo desarrollar sitios que adaptan su diseño y características para cualquier dispositivo. Es un genio y también puedes ser un genio al leer su libro. Esto es tan importante para la salud y el futuro de nuestro oficio como la campaña de estándares web de la última década. Cada diseñador web debe dejar de lado unas pocas horas para retrasar ese libro.
JD Biersdorfer
JD Biersdorfer es un periodista tecnológico y autor de varios libros sobre gadgets que incluyen Las mejores aplicaciones de iPhone .
En su opinión, ¿qué hace una aplicación bien diseñada y una buena experiencia de usuario?
Después de mirar 400-500 aplicaciones para el libro, Mejores aplicaciones de iPhone, creo que las aplicaciones que funcionan mejor son aquellas en las que la interfaz de usuario ha sido diseñada específicamente para la pantalla de un teléfono pequeño y no para las que adoptan el enfoque de escritorio (con muchas iconos y menús) y tratar de meter demasiado en el espacio. Una buena aplicación también es una aplicación estable, bien probada y relativamente libre de accidentes.
¿Hay alguna aplicación en particular que se te ocurra por ser buenos ejemplos de diseño?
Aunque no lo incluí en el libro en ese momento porque lo encontré desordenado y accidentado, "AccuWeather" ha rediseñado su aplicación de iPhone en un programa meteorológico realmente magnífico con gráficos grandes y coloridos y una interfaz bastante intuitiva para que no tiene que cavar alrededor de varias pantallas solo para ver qué tan caliente está y qué tan caliente será. Las aplicaciones gratuitas y pagas difieren ligeramente en el diseño, pero ambas usan los mismos elementos visuales para transmitir rápidamente las condiciones climáticas.
AccuWeather
También me gusta la aplicación "Kayak" para las cosas que los desarrolladores ponen en ella además de la parte habitual de reserva de vuelo y hotel. Por ejemplo, hay una sección que puede tocar para averiguar cuánto le cobra cada línea aérea para comprobar las maletas, otra para averiguar qué tiendas y restaurantes hay en el aeropuerto donde está atrapado, un convertidor de divisas e incluso una lista de embalaje para hacer es una aplicación de viaje práctica bien redondeada que es fácil de navegar.
En cuanto a las noticias, sigo creyendo que la aplicación "BBC News" es excelente para los sabuesos principales. Los creadores de la aplicación logran encontrar una manera legible de poner nueve historias principales (con titulares y pequeñas imágenes) en la pantalla de inicio, junto con un cartel de Breaking News y un botón para que pueda escuchar la transmisión en vivo de BBC Radio. Es muy fácil editar las categorías de noticias que desea seguir y hay enlaces a videos populares pregrabados y clips de audio que puede transmitir, como el breve video Resumen de noticias mundiales.
Esta publicación fue traída a usted por la compensación la impresión de folletos empresa, Next Day Flyers.
¿Cuáles son sus experiencias con el diseño de aplicaciones móviles? ¿Qué aplicaciones crees que demuestran buenos principios de diseño e interfaz de usuario? Háganos saber en los comentarios a continuación.