¡He estado pensando en esta misma pregunta y estoy ansioso por ver lo que otras personas agregan!
Mis observaciones:
Elementos de la IU:
- En una conferencia o evento, ¿es más probable que las personas descarguen una aplicación nativa o usen una aplicación web para mejorar su experiencia en el sitio?
- ¿Cuáles son los componentes esenciales necesarios para permitir que una aplicación .NET se adapte a millones de usuarios?
- ¿Dónde existen archivos estáticos y dinámicos en las aplicaciones web?
- ¿Puedo rediseñar una aplicación web desarrollada para un cliente y revenderla a otras compañías? Pero no se ha firmado ningún contrato entre mí y el cliente que desarrolló originalmente el sistema.
- ¿Qué haces primero cuando comienzas a construir una aplicación web?
- Encabezados “pegajosos” / contenido de la barra lateral : los elementos críticos permanecen fijos a medida que se desplaza hacia abajo por la página (la forma en que el encabezado gMail permanece fijo mientras se desplaza por un correo electrónico, muchas funciones de “compartir” en blogs / revistas permanecen con usted mientras se desplaza hacia abajo la página). Consulte también http://fab.com/inspiration/ main nav. Las opciones de formato de texto en Quora y Basecamp Next permanecen contigo mientras escribes publicaciones más largas, ¡como esta!
- Desplazamiento infinito (mencionado en la pregunta)
- Diseños receptivos . ¡Nuff dijo sobre esto!
- Elementos de formulario que no se parecen a los elementos de formulario : consulte www.tomorrow.do o www.moredays.com
- Manipulación directa de objetos (vs alternar entre estados CRUD). Vea cómo minutes.io lo coloca directamente en la página de reuniones
- Fuentes web : especialmente tipos de letra más humanistas / geométricos como Proxima Nova, Museo Sans y (pronto) Gotham. Ver http://www.fastcompany.com/
- Más controles “detectables” (para una mejor “interfaz más limpia” o peor “¿cómo hago x …?”); La interfaz de usuario de Metro de Microsoft puede producir pantallas más limpias porque los elementos secundarios están “ocultos” en las esquinas y los bordes (consulte: http://msdn.microsoft.com/en-us/…)
- Uso apropiado de los efectos 3D : consulte http: //selection.datavisualizati…
- Círculos! Google + círculos, o curso. Pero también cosas como http://branch.com/featured# y los avatares circulares en Basecamp Next
- El ‘+’ que cambia a ” ‘ (y viceversa): consulte la aplicación móvil Path, http://www.teehanlax.com/work/ (barra lateral de navegación) y invoicemachine.com (agregar / eliminar una factura)
- Opciones desplegables cargadas de información e incluso imágenes (los menús desplegables modernos a menudo no se basan en controles desplegables de UI reales)
- Tamaños de tipo más grandes, áreas de impacto, botones y espacios en blanco , para que las aplicaciones web también sean amigables con el tacto sin mucha refactorización
- Opciones que se parecen a “cartas” (piense en Pinterest.com y todos los clones)
- Un alejamiento de gradientes notables y sombras paralelas (todavía se usa, de una manera mucho más sutil)
- Sombras o bordes “falsos” : la sombra ultraligera de 5 píxeles que no se “desvanece” (las aplicaciones de Google hacen esto mucho). Mire el borde de Quora cuando agregue un comentario.
- Lo que llamaré funcionalidad “según lo necesite” : en lugar de que la funcionalidad se exponga de manera predeterminada, se presenta en una serie de momentos secuenciados (al hacer clic en el enlace “agregar un comentario” o en el cuadro se convierte en un cuadro expandido con más opciones, O calificación algo expone un campo de comentario
- Manipulación directa de datos predeterminados , frente a asistentes para configurar las cosas
- Funcionalidad de guardado automático (frente al gran botón “Guardar”)
- Más cajones y diapositivas desde la parte superior, inferior y bordes.
- Áreas de expansión en línea para información / acciones adicionales
- Texturas muy, muy sutiles , para dibujar un ligero contraste que guía el ojo a través de una página. Ver http://subtlepatterns.com/ como un recurso para estos. Vea Pinterest, Basecamp Next y Branch.com como ejemplos de sitios con este sutil fondo que atrae su atención al contenido (área de enfoque)
- Iconos planos, monocromáticos y pequeños para acciones comunes. Ver http://twitter.github.com/bootst…
- Notificaciones similares a iPhone – ver LinkedIn o Quora.com – pequeño número junto a la etiqueta de navegación
- Adición de elementos ilustrados.
- Cuadros de búsqueda que se “expanden” (ancho) al hacer clic
- Botones de “estilo de quiosco” : en lugar de presentar 4 opciones de botones de opción, los sitios optan por una visualización más visual del texto en los cuadros de las esquinas redondeadas (que en realidad ayuda en la recuperación espacial y crea un objetivo de golpe más grande)
- Interfaces de usuario de conversación : en lugar de una etiqueta de formulario y un menú desplegable, verá una frase con las opciones desplegables trabajadas en esa frase. Para ver un ejemplo extremo de esto (y los botones de “estilo de quiosco” mencionados anteriormente) visite http://ifttt.com/ (vaya a crear una “receta”)
Patrones más generales:
- Alejarse de la navegación con pestañas (en aplicaciones web). Esto sigue el argumento de “centrarse en el contenido, no en el cromo” presentado por personas como Luke Wroblewski, también se aplica a las aplicaciones web. Observe cómo la renovación de 37 Signals Basecamp Next dejó caer la navegación con pestañas en su rediseño
- Elementos divertidos o encantadores : ¡gracias Mailchimp.com, http://photojojo.com/store y muchos otros!
- Más espacio en blanco, relleno (por razones de tacto, ver arriba)
- Bauhaus, diseño minimalista : rediseño de Google, rediseño de Microsoft, Amazon (área de encabezado); Este estilo “mínimo” usa grises o colores desaturados, de modo que cuando se usa un color brillante, se usa para llamar la atención.
- … Y sí, ¡elementos de diseño esceomórficos también! (Le atribuyo esto a la popularidad del iPad)
- Aplicaciones de una sola página : muchos “estados” diferentes en una sola página ya no parecen moverse a través de “páginas” vinculadas
- Diseños muy abiertos : menos cuadros y más líneas / espacios para agrupar visualmente las áreas; las cajas todavía se usan en el contenido principal, pero no tanto para Chrome / layout
- Diseños de una sola columna : menos distracción y capacidad móvil
- Lenguaje más amigable y conversacional en torno a elementos de formulario
- El contenido recibe un tratamiento de diseño de información adecuado (tamaños de tipo, gorras, sombreado, etc., variados) para ayudar a comprender
- Mayor enfoque en una tipografía agradable y legible : vea https://medium.com/p/8d6e7df7ae58 como ejemplo
- Inmersión inmediata vs laboriosos procesos de registro – ver la página de inicio de medium.com (cuenta previa); Esto proviene del mundo del diseño del juego, en el que sigues con la información de la cuenta después de que alguien “jugó” o interactuó con tu servicio.
¡Uf!
-Stephen
