¿Qué habilidades necesita para una interfaz de usuario/interacción/diseño funcional adecuado en aplicaciones web?

Question

Cuando desea desarrollar aplicaciones web desde cero, ¿cuáles son las habilidades necesarias para producir productos utilizables y ricos en interacción?

• ¿Haces primero el prototipo de interfaz de usuario?
• ¿Utilizas historias de usuarios?
• ¿Alguna metodología ágil o mejores prácticas que recomendaría o defendería activamente?

En breve: ¿Qué habilidades te hacen trascender de la recopilación de requisitos a AmazingWebApp™?

Finalmente:¿Algún libro que recomendarías?

Answer 1

Un buen sentido del diseño.Esto es algo difícil de entender para un programador.A veces, un programador tendrá una buena idea de lo que funciona, pero no de cómo crear lo que realmente funciona mejor o bien.Principalmente requiere la capacidad de tomar todo y estar dispuesto a moverlo libremente hasta que algo funcione.

La forma en que lo hago es descubrir cómo, si alguien lo hiciera, cuál sería la idea más lógica y común de cómo se realizaría una tarea en línea o fuera de línea, y luego ver cómo replicar eso.Piense breve, breve, claro, accesible y lógico.Si puedes entregárselo a alguien sin instrucciones y él puede hacer todo lo que quieres que haga y más, funciona.Si necesitan tener instrucciones para hacer cosas cotidianas en tu aplicación, es un mal diseño.

También diría que eche un vistazo a otras aplicaciones que le atraigan en un nivel que quizás ni siquiera se dé cuenta, pero que simplemente funcionan por alguna razón e intente replicar eso.

Answer 2

Creo que lo mejor que puedes hacer es simplemente usar el software.

Cuando trabajo en aplicaciones, tiendo a enviarlas por correo electrónico a casa al final de la semana (a veces antes), salgo del "modo de trabajo", lo instalo normalmente (es decir,no se ejecuta desde su IDE) y luego úselo.

Es difícil alejarse del "modo de prueba" y "olvidar" que conoce la aplicación.Pero una vez que te acostumbras, puede ser EN REALIDAD útil y muy revelador (y sí, a veces desgarrador cuando te das cuenta de que esa "pequeña característica genial" en realidad es una mierda y necesita ser reimplementada).

Mi jefe dice que soy "anal" con respecto a la usabilidad.Me gusta eso :)

Answer 3

Creo que es mejor algún tipo de creación de prototipos visuales (incluso si se hace con HTML y CSS).Mi tentación es empezar a codificar y preocuparme por la interfaz más tarde, y eso suele ser lo que lleva a algo realmente malo (al menos para mí).Desarrollo este ©MARAVILLOSA FUNCIONALIDAD y termino apurando la interfaz para poder tener rápidamente las herramientas para acceder a mi código.

No recuerdo dónde escuché esto, pero, para el usuario final, su interfaz ES su aplicación.Si intentas complacer al usuario, debes comenzar con la interfaz y dejar que ella dicte la funcionalidad que proporcionarás.

Answer 4

Las mejores prácticas dependen de los talentos de los miembros del equipo.

Primero, escriba siempre historias de usuarios (conviértalo en un evento de equipo, si es posible), cárguelas en LighthouseApp.com o en su sistema de venta de entradas favorito; solo las primeras 10 a 20 son todo lo que necesita para comenzar.

Si tienes un diseñador de UI, un prototipo de las páginas puede resultar útil.Pero, si el desarrollador de software tiene habilidades HTML/CSS decentes, prefiero llegar a un prototipo funcional con UI/HTML/CSS limpio lo más rápido posible.Este resultado podría entregarse a un "diseñador web moderno" que pueda reelaborar/decorar el HTML/CSS.El diseñador debe trabajar con la misma base de código que el desarrollador a través del sistema de control de código fuente.

Algunos "diseñadores de la vieja escuela" se sentirían ofendidos ante la sugerencia de "decorar el sitio" e insistirían en entregarle a un programador un archivo de Photoshop.Esto podría estar bien para un sitio web de marketing simple, pero no me gusta el proceso para crear una AmazingWebApp™.

Answer 5

Los chicos aquí están dando excelentes consejos.

existe una distinción entre "visualmente bonito" y "funcional" (o facilidad de uso).De hecho, puedes tener uno sin el otro.Este foro es un buen ejemplo, tiene una usabilidad muy alta pero, francamente, es feo. Lo siento mucho, aunque todavía te amo :)

la realidad es que necesitas habilidad para hacer buenas interfaces.esto viene con años de práctica.Por lo general, me contratan para venir y diseñar la interfaz de usuario completa para una nueva aplicación.Rara vez veo programadores o diseñadores gráficos con este tipo de habilidades (es un mercado limitado).En la universidad descubrí que tenía una perspicacia natural para HCI, diseño de interfaz de usuario y análisis de usabilidad.Desarrollé estas habilidades aún más leyendo mucho y adquiriendo experiencia haciendo mucho diseño de interfaz de usuario. Entonces, todo lo que digo es que prepárate para trabajar duro si realmente quieres ser bueno en el diseño de interfaces de usuario.Puedes hacer cualquier cosa que te propongas, pero si dedicas tiempo a estudiar diseño de interfaz de usuario, eso significa que no dedicas tiempo a aprender de forma ágil con Ruby on Rails o cualquiera que sea la tecnología más moderna.

algunos consejos generales:

• Si está creando aplicaciones de software web (a diferencia de sitios web con presencia de pequeñas empresas), entonces la creación de prototipos de baja fidelidad es excelente.Reúna a un grupo de personas, una pila de papel de carnicero y marcadores de colores, y se sorprenderá de cuántas pantallas puede dibujar en unos pocos días.

• su software debe ser evidente.Su software no debería necesitar un manual de usuario.El CMS que desarrollé no tiene manual de usuario, tengo algunas docenas de clientes que lo usan y ninguno de ellos me ha pedido nunca un manual.

• Mire lo que hacen los "grandes".si eBay tiene su cuadro de búsqueda como este:'[......] (Buscar)' luego haz el tuyo así también (en lugar del no estándar, pero está bien:'Buscar:[......] (Ir)'.).esto se conoce como asequibilidad.está utilizando la familiaridad de las personas con otros sistemas para darles una idea de cómo funciona su propio sistema.

yo recomendaRIA ESTE LIBRO:

• No me hagas pensar en usabilidad

También tengo algunos artículos de blog que deberían ayudar:

• estructuras alámbricas y maquetas
• Análisis de necesidades para sitios web empresariales.

Answer 6

Algunas de las cosas que hacemos:

1. Muchos prototipos, explorando diferentes conceptos tanto en papel como en Photoshop y, a veces, implementaciones reales.
2. Recorta las cosas, sé iterativo.No intentes terminar y perfeccionar toda la aplicación la primera vez (porque sabes en tu corazón que esto no va a suceder)
3. Claridad sobre inteligencia, esta es una de las últimas cosas que me pregunto cuando trabajo en la experiencia del usuario. Seguro que los íconos y las cosas divertidas pueden verse geniales, pero ¿son claros y concisos?
4. Centrarse en los objetivos del usuario: es una tendencia bastante común entre los desarrolladores centrarse en una pantalla a la vez, una tarea a la vez.Recuerda que no es así como piensa alguien que usa tu aplicación, tiene un objetivo en mente, así que intenta meterte en la cabeza tanto como puedas.
5. Utilice el software que está creando tanto como pueda; no hay mejor manera de ver sus fallos, deficiencias y problemas que experimentarlos usted mismo.

Answer 7

@Brian Warshaw: creo que fue de una charla que hizo Aza Raskin, este vídeo creo

Answer 8

Diseñar una interfaz de usuario completamente innovadora es bastante difícil para la mayoría de los programadores (¿soy solo yo?).Lo que encuentro útil al crear/diseñar UI para aplicaciones web es siempre buscar interfaces de usuario agradables, fáciles de usar y elegantes que encuentres mientras navegas por Internet o utilizas cualquier otra aplicación de escritorio.Si simplemente encuentra la interfaz de usuario más eficiente (diseñada por otra persona, en algún otro lugar) para la tarea en cuestión, entonces puede hacer un buen trabajo implementando y creando una mejor experiencia de usuario para su aplicación.Por ejemplo, mientras escribo esta respuesta, me gusta la forma en que muestra una vista previa en tiempo real de la respuesta, con una opción para "ocultar la vista previa". Definitivamente me gustaría utilizar un tipo de interacción similar al crear una interfaz de foro de usuario. .

Answer 9

Averiguar qué está creando y qué representa su producto es una gran clave para crear una aplicación exitosa.Recientemente escribí una entrada de blog sobre recopilación de requisitos que habla un poco sobre esto.Puede leerlo aquí:Cómo mejorar sus habilidades de recopilación de requisitos.

Además, aquí hay algunos principios de alto nivel que sigo para asegurarme de crear el producto adecuado con una experiencia maravillosa:

Conozca la diferencia entre el usuario y el cliente.Los empresarios que aprueban el brillante proyecto suelen ser los clientes.Sin embargo, un error devastador es la tendencia a confundirlos como usuarios.El cliente suele ser la persona que reconoce la necesidad de su producto, pero el usuario es la persona que realmente utilizará la solución (y probablemente se quejará más adelante de un requisito que su producto no cumplió).Ir a más de una persona

Porque todos somos humanos y tendemos a no recordar cada detalle insoportable.Aumenta la probabilidad de encontrar requisitos no cumplidos a medida que habla con más personas y realiza verificaciones cruzadas.

Evite ofertas especialesCuando un usuario te pida algo muy concreto, ten cuidado.Cuestione siempre los prejuicios y vea si esto realmente mejorará su producto.

PrototipoNo espere hasta el lanzamiento para mostrarle lo que tiene al usuario.Realice prototipos frecuentes (incluso puede llamarlos versiones beta) y obtenga comentarios constantes durante todo el proceso de desarrollo.Probablemente encontrará más requisitos a medida que haga esto.