experiencia de usuario mejores prácticas para smart clients david carmona microsoft ibérica...

Experiencia de UsuarioExperiencia de Usuario

Mejores Prácticas para Smart ClientsMejores Prácticas para Smart Clients

David CarmonaDavid CarmonaMicrosoft IbéricaMicrosoft Ibérica

Desarrollo y PlataformaDesarrollo y Plataformadavid.carmona@microsoft.comdavid.carmona@microsoft.com

http://blogs.msdn.com/tropezoneshttp://blogs.msdn.com/tropezones

Pablo PeláezPablo PeláezPlain ConceptsPlain ConceptsGerenteGerentepablo@plainconcepts.compablo@plainconcepts.comhttp://geeks.ms/blogs/pablohttp://geeks.ms/blogs/pablo

• IntroducciónIntroducción• Experiencia de UsuarioExperiencia de Usuario• ArquitecturaArquitectura• Windows Presentation FoundationWindows Presentation Foundation

IntroducciónIntroducción

– 4000 ingenieros que han trabajado en su desarrollo 4000 ingenieros que han trabajado en su desarrollo – 50 millones de líneas de código 50 millones de líneas de código – 5 millones de beta testers de la release candidate 15 millones de beta testers de la release candidate 1– 3.758.096.384 bytes [3.5GB] de la beta 2 de Vista ( el 3.758.096.384 bytes [3.5GB] de la beta 2 de Vista ( el

download mas grande de la historia) download mas grande de la historia) – Sobre 50.000 nuevos trabajos se crearan en Europa Sobre 50.000 nuevos trabajos se crearan en Europa

(investigación de IDC)(investigación de IDC)– Se espera que se vendan 400 millones de nuevos PC´s en el Se espera que se vendan 400 millones de nuevos PC´s en el

mundo en los próximos 2 años mundo en los próximos 2 años – De esos 400 millones, 368 millones incluirán Vista De esos 400 millones, 368 millones incluirán Vista

pre-cargado pre-cargado – 6 Versiones diferentes de Windows Vista 6 Versiones diferentes de Windows Vista (Fuente "Vista", la Revista oficial de Windows Vista)(Fuente "Vista", la Revista oficial de Windows Vista)

Experiencia de usuarioExperiencia de usuario

• 1.- El hecho de lograr que los usuarios de 1.- El hecho de lograr que los usuarios de nuestros programas, admiren el INMEJORABLE nuestros programas, admiren el INMEJORABLE interface que NOSOTROS hemos definido. interface que NOSOTROS hemos definido.

• 2.- La satisfacción que obtendría un usuario al 2.- La satisfacción que obtendría un usuario al disponer un interface sencillo e intuitivo que disponer un interface sencillo e intuitivo que mejora su productividad. mejora su productividad.

¿Por que la Experiencia de usuario?¿Por que la Experiencia de usuario?

– El fin de tu programa es el USUARIOEl fin de tu programa es el USUARIO– Haz que sea un placer de ver y de utilizarHaz que sea un placer de ver y de utilizar– Lo simple es belloLo simple es bello– El usuario no es tonto, solo nos lo pareceEl usuario no es tonto, solo nos lo parece– Evita problemas comunesEvita problemas comunes– Reduce el esfuerzo, la duda, la toma de Reduce el esfuerzo, la duda, la toma de

decisiones de tus usuarios.decisiones de tus usuarios.– Sigue las guías de IU (ya que las hay …)Sigue las guías de IU (ya que las hay …)– Testea tu Interfaz de Usuario Testea tu Interfaz de Usuario

– No estás solo ... sé buen vecino y cuida tu casaNo estás solo ... sé buen vecino y cuida tu casa– Common ControlsCommon Controls– Common DialogsCommon Dialogs– Los Iconos y TúLos Iconos y Tú– HerenciaHerencia– User ControlsUser Controls– Custom ControlsCustom Controls– Resoluciones y TamañosResoluciones y Tamaños– Usa los temas de WindowsUsa los temas de Windows

HerenciaHerencia

– Búsquedas instantáneasBúsquedas instantáneas– Búsquedas estándarBúsquedas estándar– Tiempos e indicadoresTiempos e indicadores– Búsqueda en VistaBúsqueda en Vista

BúsquedasBúsquedas

– No bloquees el interfaz de usuarioNo bloquees el interfaz de usuario– Diálogos Modales sólo si son necesariosDiálogos Modales sólo si son necesarios– MessageBox con preguntasMessageBox con preguntas– NotificacionesNotificaciones– Barras de EstadoBarras de Estado

AsincroníaAsincronía

– MDI versus SDI versus NavegadorMDI versus SDI versus Navegador– Menús ComunesMenús Comunes– "Atrás" y “Deshacer” ..."Atrás" y “Deshacer” ...– ValidadoresValidadores– TooltipsTooltips– AutocompletadoAutocompletado– WizardsWizards

ValidacionesValidaciones

– ¿Tono del texto?¿Tono del texto?– Sé cortésSé cortés– No uses terminología técnicaNo uses terminología técnica– Habla en primera o segunda personaHabla en primera o segunda persona– Mensajes con perspectiva de usuarioMensajes con perspectiva de usuario– El poder de la NegritaEl poder de la Negrita

ArquitecturaArquitectura

• Independiza y estructura el UIIndependiza y estructura el UI

• ModeloModelo– Contiene los datos, su Contiene los datos, su

comportamiento y el estadocomportamiento y el estado• VistaVista

– Gestiona la presentación de los Gestiona la presentación de los datosdatos

• ControladorControlador– Interpreta las acciones del usuario, Interpreta las acciones del usuario,

informando al modelo y a la vistainformando al modelo y a la vista

ModeloModelo

ControladorControlador

VistaVista

MVCMVC

• Patrón para aplicaciones Smart ClientsPatrón para aplicaciones Smart Clients– DocumentaciónDocumentación– How-to’sHow-to’s– Integración con Visual StudioIntegración con Visual Studio– Aplicaciones de ejemploAplicaciones de ejemplo– ExtensibleExtensible

• Basado en Composite UI Application BlockBasado en Composite UI Application Block– Módulos de carga dinámicaMódulos de carga dinámica– Contenedor basado en Smart PartsContenedor basado en Smart Parts– Implementación de MVCImplementación de MVC

Smart ClientSmart ClientSoftware FactorySoftware Factory

Windows Presentation FoundationWindows Presentation Foundation

• ASP.NET / AJAXASP.NET / AJAX– Sitios web públicos basados en estándaresSitios web públicos basados en estándares– Amplio alcance, mayor coste, menor riquezaAmplio alcance, mayor coste, menor riqueza

• WinFormsWinForms– Aplicaciones LOB con fuerte entrada de datosAplicaciones LOB con fuerte entrada de datos– Menor coste, mayor interactividadMenor coste, mayor interactividad

• WPFWPF– Experiencias de usuario innovadorasExperiencias de usuario innovadoras– Diseñador como parte del equipoDiseñador como parte del equipo– Escenarios de riqueza sin precedentesEscenarios de riqueza sin precedentes

“El gran poder implica una gran responsabilidad”Tío Ben - Spiderman

• Utiliza los temas con sutilezaUtiliza los temas con sutileza– No abusar de los estilos ni templatesNo abusar de los estilos ni templates

• Las animaciones no son para lucirnosLas animaciones no son para lucirnos– No captar la atenciónNo captar la atención– Servir para un propósitoServir para un propósito

• No uses las 3D para impresionar a tu jefeNo uses las 3D para impresionar a tu jefe– ¿Puede conseguirse lo mismo en 2D?¿Puede conseguirse lo mismo en 2D?

• Conoce en detalle el layout y abusa de élConoce en detalle el layout y abusa de él– Especialmente los dinámicosEspecialmente los dinámicos

• Hardware vs SoftwareHardware vs Software

• Pudientes vs hippiesPudientes vs hippies

• Intuición vs mediciónIntuición vs medición

WPFWPF

• Windows Vista User Experience Guidelines:Windows Vista User Experience Guidelines:– http://msdn2.microsoft.com/en-us/library/aa5112

58.aspx

• Smart Client Software FactorySmart Client Software Factory– http://msdn2.microsoft.com/en-us/library/aa4804

82.aspx• Designing with WPFDesigning with WPF

– http://msdn2.microsoft.com/en-us/library/aa511329.aspx