Guía de diseño de interfaz de usuario para una gran experiencia de diseño

La Experiencia de Usuario (UX) es uno de los ingredientes clave para una aplicación exitosa en el mundo actual. Actualmente, la UX para la mayoría de las aplicaciones basadas en PC (escritorio o portátil) están diseñadas de manera muy diferente a las aplicaciones para una tablet o smartphone. A diferencia de las aplicaciones para tablet o smartphone, las aplicaciones tradicionales basadas en PC no tienen que soportar múltiples orientaciones. Normalmente para la mayoría de las aplicaciones de PC, un diseño para interfaz de usuario (UI) será suficiente. El teclado y el mouse han servido como los mecanismos de entrada más utilizados en las aplicaciones de PC. Sin embargo, con la aparición de los dispositivos convertibles tales como los Ultrabook™, los diseñadores UX tienen que volverse más creativos. Los diseños UX deberían ofrecer una experiencia de usuario óptima en tablets y portátiles, soportar múltiples orientaciones, dispositivos con múltiples factores de forma, resoluciones de pantalla, etc. Los componentes UI deben ser diseñados minuciosamente para soportar tanto pantallas táctiles como las tradicionales entradas de teclado y mouse.

En este artículo debatimos ciertos aspectos que fueron considerados mientras se diseñaba la Aplicación de Fotos para Ultrabooks.

Orientación y Posicionamiento

Nuestra Aplicación de Fotos está diseñada para soportar múltiples orientaciones. La aplicación procesa dinámicamente los componentes UI basados en la orientación de notificaciones recibidas del Sistema Operativo. Se utiliza un diseño adaptivo para soportar múltiples orientaciones y dispositivos con distintos tamaños de pantalla. Los tamaños de los componentes UI usados en la aplicación se adaptan dinámicamente en base al factor de forma y la resolución de pantalla del dispositivo. La interfaz de usuario para cada orientación está diseñada por separado con el fin de aprovechar al máximo el estado real disponible de la pantalla. Por favor consulte el artículo “Activando el Sensor de Orientación en Aplicaciones de Escritorio para Ultrabooks™ en Windows* 8” para más detalles.

Posicionar los componentes UI es otro aspecto importante a la hora de diseñar una buena Experiencia de Usuario. Los controles de aplicación han sido cuidadosamente ubicados en diferentes orientaciones teniendo en cuenta los dispositivos convertibles. Por ejemplo, mira el botón de la cámara en el modo vertical y horizontal de las capturas de pantalla que mostramos abajo. Los usuarios pueden fácilmente acceder al botón de la cámara usando sus pulgares, incluso cuando ambas manos sostienen el dispositivo. Otros componentes UI — tales como el Panel de Información, las imágenes en miniatura, y otros controles de aplicación— están instalados de tal manera que las capturas de una webcam en tiempo real o el área de visualización de imágenes sea maximizada.

Soporte táctil y mouse

Nuestra Aplicación de Fotos está diseñada tanto para modo táctil como para entradas de mouse. Cuenta con una barra cabecera personalizada que soporta botones más grandes de “Minimizar” y “Cerrar” para que el modo táctil resulte más amigable. Los usuarios no solo tienen la oportunidad de cliquear los botones usando un mouse, sino que también pueden hacerlo de forma táctil. Si un Ultrabook se utiliza como portátil, algunos usuarios quizás prefieran utilizar el Windows* 8 así como otros sistemas Operativos de Windows con teclado y mouse. Mientras que otros usuarios pueden preferir utilizar la capacidad táctil que soportan tanto los Ultrabooks como el Windows 8. Los usuarios pueden elegir cliquear o tocar los botones “+” y “-” para acercarse o alejarse de la imagen. O bien pueden usar la función táctil “Pinch To Zoom” en una imagen para acercarse o alejarse de ella. De manera similar, los usuarios pueden cliquear o tocar el botón para ver la imagen posterior o anterior. O pueden tan solo “dar un toque” a una imagen para ver la siguiente o la anterior.

Otro aspecto de la aplicación que soporta tanto el modo táctil como las entradas de mouse son las imágenes en miniatura que mostramos en la captura de abajo. Los usuarios pueden cliquear o tocar los botones de flechas a la derecha o izquierda para desplazarse a través de las imágenes o simplemente usar un dedo para recorrerlas. Con el modo táctil convirtiéndose en algo cada vez más omnipresente, los usuarios tienden a esperar que estas funciones se encuentren en las aplicaciones de los dispositivitos que admiten modo táctil. Más detalles sobre cómo implementar el soporte táctil en Ultrabooks con Windows 8 lo puedes encontrar aquí.

Controles de aplicación

El aspecto y la sensación de los componentes UI, tales como imágenes, etiquetas, botones interruptor (switch), y otros componentes UI, han sido diseñados para que coincidan con los de Windows 8. Los botones con acciones, como la “Cámara” o el “Geo-Tag”, tienen un diseño diferente para distinguirlos de etiquetas como las usadas en el Panel de Información. Los botones como “Geo-Tag” o “Panel de Información”, que cuentan con funciones On/Off, los hemos diseñado con aspectos UI similares a un “Interruptor”. Los botones interruptor también coinciden con el aspecto y la sensación standard del Windows 8.

Additional Resources

Ultrabook™ Desktop Applications Development on Windows* 8: Photo Application with Touch and Sensors

Notices

INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.

UNLESS OTHERWISE AGREED IN WRITING BY INTEL, THE INTEL PRODUCTS ARE NOT DESIGNED NOR INTENDED FOR ANY APPLICATION IN WHICH THE FAILURE OF THE INTEL PRODUCT COULD CREATE A SITUATION WHERE PERSONAL INJURY OR DEATH MAY OCCUR.

Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined." Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information.

The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request.

Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.

Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm

Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer systems, components, software, operations, and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products.

Any software source code reprinted in this document is furnished under a software license and may only be used or copied in accordance with the terms of that license.

Intel, Ultrabook, and the Intel logo are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2012 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.

AdjuntoTamaño
Icono de Imagen u1.png1.42 MB
Icono de Imagen u2.png974.16 KB
Icono de Imagen u3.png1.3 MB
Icono de Imagen u4.png1.37 MB
Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.