Share
Recientemente publicamos un artículo sobre el cambio actual a los impactos de la exploración de tabletas en el diseño web. Este es un cambio importante para la industria de la tecnología, pero también para los diseñadores web que ahora están siendo alentados a considerar la compatibilidad de la plataforma de la tableta. Sin embargo, al mismo tiempo, se está produciendo otro cambio: una transición de las interfaces centradas en el mouse a las orientadas a las aplicaciones.
Una aplicación web es, para decirlo simplemente, una aplicación que se basa en una conexión a Internet para funcionar. Nada se almacena localmente y todo está en la nube. Hay varias ventajas con esto: todo es accesible en todas partes, hay poca preocupación por el rendimiento, la falla del disco duro no significa pérdida de trabajo y la mayoría son multiplataforma. Por lo tanto, para los desarrolladores de aplicaciones, esta es una propuesta atractiva que podría significar que las aplicaciones están disponibles para un segmento más amplio de su audiencia potencial.
Hay una clara diferencia entre una web aplicación y una websitio. Sin embargo, ese debate no es el tema del artículo. En cambio, veremos otro cambio en el diseño web a medida que el diseño multiplataforma centrado en la aplicación se vuelve mucho más popular y todo, desde la navegación hasta los formularios, se ve afectado..
Este es, quizás, el mayor significado en este cambio. El caso con cualquier aplicación es que debe ser lo más simple posible para no frustrar demasiado a un usuario. Sin embargo, cada aplicación tiene un objetivo y un objetivo para lograr después de la interacción de un usuario. Por lo tanto, las aplicaciones web deben concentrarse en las funciones clave mucho más que un sitio web convencional.
La pantalla de inicio de Facebook cuando se desconecta. Este énfasis es evidente no solo en las aplicaciones web, sino también en sus páginas de inicio antes de iniciar sesión. Si tomamos Facebook como ejemplo, la sección más grande de la página es el formulario de registro porque para eso está destinada la página principal: ganar más usuarios.
También hay un giro secundario, orientado al usuario en esta teoría. Por ejemplo, si alguien está rellenando un formulario en la página web, hay pocas posibilidades de que desee restablecer ese formulario. La posibilidad de que escriban correctamente su nombre la primera vez es mayor y, por lo tanto, debería haber un mayor énfasis en el botón de envío..
El formulario de inicio de sesión de ThemeForest presenta un botón de envío bastante grande, ya que esta es la acción que la mayoría de los usuarios querrán realizar. Sin embargo, también existen los enlaces "Olvidé mi contraseña / nombre de usuario" para aquellos que los necesitan, pero estos son más pequeños..
Esta idea es una variedad de jerarquía visual en el sentido de que el objetivo principal de una página web específica es el elemento más destacado y notable en esa página..
Otra consecuencia es un aumento en un estilo de diseño particular de las aplicaciones web. ¿Alguna vez ha encontrado un sitio web que parece que debería pertenecer a su dock (o al menú de inicio si está en Windows)? Bueno, hay bastantes ejemplos que hacen que una aplicación web parezca nativa en todas las plataformas de una manera elegante mediante el uso de una variedad de gradientes y sombras agradables.
Esto no solo es evidente en las aplicaciones web destinadas al uso de escritorio, sino también en dispositivos móviles. Una gran cantidad de desarrolladores más pequeños optan por crear aplicaciones web móviles sobre aplicaciones nativas para ahorrar costos y curvas de aprendizaje. Este método no solo funciona con la creación de aplicaciones web originales, sino también con temas populares como WordPress (como lo describe esta sesión de MobileTuts +).
Mostrar al usuario lo que necesita, no todo lo que no hace..
Solía haber un momento en el que, si desea realizar una acción en una aplicación web compleja, tendría que desplazarse y pasar por varios "niveles" diferentes antes de lograr tal cosa. Sin embargo, con la navegación específica del contexto, este proceso es mucho más simple. La teoría general detrás de esto es que un usuario no requiere acceso a todas las opciones en todo momento y que solo deben mostrarse aquellas relevantes para su situación actual.
Este tipo de navegación de escenario específico se logra generalmente mediante el uso de navegación de segundo nivel. La analogía no basada en la web más cercana que puedo encontrar es hacia Microsoft Office y cómo utiliza un diseño de cinta para la usabilidad. Las secciones clave se titulan y, con un simple clic del ratón, se muestran todas las opciones relevantes..
Una forma sencilla de resumir esto es mostrarle al usuario lo que necesita, no todo lo que no necesita. Y esta misma teoría basada en el contexto se puede aplicar a otros elementos, como los cuadros modales emergentes que muestran los elementos que solo se requieren si el usuario lo desea..
Microsoft Office es un ejemplo de uso generalizado de un menú contextual. Esto parece un poco menos que venir de los temas que hemos discutido anteriormente, pero estos tres elementos pueden tener un gran impacto en el diseño web. Agregar sombras a un botón, por ejemplo, hace que se destaque y casi salga como un diseño que ya no es plano.
Considere luego agregar sombras a una ventana modal y observe cómo crea un sentido de definición entre el contenido original y el nuevo marco. Solo eso puede hacer que un sitio web se vea más interactivo, ya que se convierte en multicapa como una aplicación nativa. Luego considere los efectos a medida que el contenido cambia la opacidad en diferentes circunstancias para crear una nueva dimensión general del contenido en sí..
La opción por los gradientes también puede tener un impacto duradero en un diseño final. Al igual que los gradientes se acumulan, el diseño simplemente "aparece" más y parece 3D cuando se usa al unísono con sombras internas.
Observe cómo se ve la imagen de la derecha, ya que tiene dos capas, mientras que la imagen de la derecha no lo hace. Dado que una aplicación web está destinada a actuar como una pieza de software que se ejecuta localmente, es primordial tener la sensación de que todo funciona en conjunto. Y la principal forma en que los desarrolladores pueden comunicar este sentido es a través del diseño. Le desafiaría a que me encuentre una aplicación web cuya interfaz de usuario completa está construida con elementos HTML de valores puros sin un estilo personalizado.
Usted no puede No hay sorpresa allí! El hecho es que los diseños web están destinados a tener un estilo coherente en todas las aplicaciones web, el uso de controles y áreas de entrada son elementos importantes a considerar. Algo tan simple como agregar un color de fondo personalizado y sobrescribir el borde de un botón de envío puede tener un gran impacto en la unidad de su diseño.
Observe en la captura de pantalla de GMail cómo el estilo de los menús y botones desplegables clave "encaja" con el diseño general. Ah, y sí, ¡tengo un pedido de envío desde la tienda de Angry Birds! ;PAG
Restyling elementos de stock es una cosa, pero crear nuevos es aún mejor. Tome MyBankTracker como un ejemplo que usa un control deslizante personalizado que aún encaja con su diseño general en blanco y azul.
Mientras investigaba una perspectiva alternativa sobre el diseño de la aplicación web, encontré una cita interesante del ex ejecutivo de marketing de Microsoft Office, Chris Capossela, donde dijo algo como: "Cuando preguntamos [qué funciones querían los usuarios en] Office, nueve veces De cada diez, nombraron algo que ya estaba en el producto, simplemente no pudieron encontrarlo ". Este tipo de enlaces vuelve a toda la idea de navegación optimizada para la situación.
Cuando preguntamos [qué funciones querían los usuarios en] Office, nueve de cada diez, nombraron algo que ya estaba en el producto; ellos simplemente no pudieron encontrarlo.
El hecho es que, si intenta agrupar muchas características en un espacio pequeño, cada característica se vuelve menos significativa. Y el usuario pasará mucho más tiempo buscando la función que desea. Y el usuario se va a frustrar. Y el usuario se va a ir. Tú no quieres esto. Para poner esto en una mejor perspectiva, intente reducir la resolución de su pantalla al mínimo posible y ejecute la aplicación con el uso más intensivo de UI que haya instalado. Pruébalo y úsalo y luego captarás mi deriva..
Una sugerencia adicional es escuchar a sus usuarios, pero no demasiado. A medida que los usuarios solicitan más y más funciones, puede inclinarse a simplemente lanzar nuevas opciones aquí y allá..
Alejándose de lo que debería / puede usar, repasemos solo tres cosas importantes que no debería hacer cuando se trabaja en una interfaz de usuario centrada en la aplicación.
Imagínate conocer a alguien en la calle. Les preguntas dónde está el Starbucks más cercano y responden en un idioma diferente. Parece que captas una palabra que percibes que es un cognado, pero eso resulta ser incorrecto y tiene un significado completamente retorcido. Esto suena algo largo para una anología, pero el punto que estoy tratando de enfatizar es que podrías percibir algo debido a tu lengua natural, pero el diseñador podría estar apuntando a algo completamente diferente. Por ejemplo, si genera sus encabezados para que parezcan botones, el usuario podría intentar hacer clic en ellos, pensar que es parte de la aplicación web y puede continuar frustrado por su falta de funciones y una experiencia confusa..
Mi primera publicación aquí en WebDesignTuts + discutió la validación de formularios y su importancia para los usuarios. Como usuario, me gustaría saber qué estoy haciendo mal si no puedo trabajar con tu aplicación y siempre es recomendable crear espacio para comentarios desde el principio..
La inconsistencia de diseño es una experiencia frustrante ya que, al igual que un usuario se acostumbra a una forma de hacer las cosas, se enfrenta a otra. Un ejemplo muy simple es en Expedia, donde el calendario de salida y regreso cambia los meses a medida que selecciona una fecha.
Aquí hay una breve lista de seis sitios web y aplicaciones web que demuestran claramente algunos de los principios de diseño que hemos analizado en este artículo, desde el diseño de la aplicación nativa hasta el énfasis clave..
Para resumir este artículo, hay una clara influencia en la web de las aplicaciones nativas tradicionales. Sin embargo, cada decisión de diseño que involucra aplicaciones web se deriva de la facilidad de uso. Las aplicaciones deben ser simples, deben tener énfasis en las funciones clave para que un usuario pase por el sitio con facilidad.
.
Accentsconagua