Diseño de interfaces con WPF -...

Laura Vanmorleganwww.aquadize.com

1

Diseño de interfaces con WPF

Nuevas tecnologías para crearinterfaces de usuario avanzadas

Primeros pasos con WinForms

Desarrolladores y Diseñadores

Con WPF…

Lo que diseñamos…

…Y lo que hicimos con WPF!

¿Cómo fue el proceso?

Objetivos, requerimientos

• Objetivos de la aplicación

• Requerimientos funcionales y técnicos

• Público, usuarios

• Casos de uso

Wireframes

Wireframes

Diseño

Diseño

Desarrollo

Armado en XAML con MS Expression Blend

Armado en XAML con MS Expression Blend

Aplicación terminada!

Algunos tips a la hora dediseñar una interfaz de usuario

Principios de diseño de interfaces

• Estructura: organizar la interfaz con sentido. Reusar patrones existentes. Agrupar contenidos similares.

• Simplicidad: Diseño simple, comunicar de forma clara, proveer atajos…

• Visibilidad: Que sea rápido para el usuario encontrar como hacer una acción, sin distraerlo. Dar información, sin abrumar.

• Feedback: informar a los usuarios sobre acciones, cambios de estado, errores, excepciones, y otra info de interés de forma clara y no ambigua.

• Tolerancia: el usuario comete errores. Que tu diseño no lo promueva. Permitir deshacer-rehacer.

• Reuso: reusar componentes internos y externos, mantener consistencia. No hagan pensar al usuario!

Tips

• Tener en cuenta como es el público objetivo (gustos, usos y costumbres, resolución de pantalla…).

• Accesibilidad. Diseñar primero en blanco y negro (buen contraste).

• Seguir estandares de diseño de interacción (no reinventar la rueda). Incluyendo shortcuts de teclado.

• Ser consistentes! Reusar.

• No abusar de sonidos, lucecitas, animaciones y colores.

• Testear, testear, testear… con tus usuarios reales!

• Es natural que tus usuarios cometan errores.

• Ayudas, quick-start, manuales, videos…

¿Qué más hay en WPF?

WPF

• Video

• Audio

• Documentos

• Navegación

• Gráficos 3D

• Gráficos vectoriales

• Interactividad

• Y más…

WPF

¿Y qué hay de la weby los celulares?

MS Silverlight

• Es un subconjunto de WPF para crear aplicaciones ricas en la web (RIA), agregando nuevas funciones multimedia.

• Similar a Adobe Flash.

MS Windows Phone 7

¿Preguntas?