User Interface Design Guidelines For Great Experience Design

User Experience (UX) is one of the key ingredients for a successful application in today’s world. Currently, UX for most PC (desktop or laptop) based applications is designed very differently than for tablet and smartphone applications. Unlike tablet and smartphone applications, traditional PC-based applications do not have to support multiple orientations. Typically for most PC applications, one design for UI layout will suffice. The keyboard and mouse have served as the most widely used input mechanisms for PC applications. However, with the advent of convertible devices such as Ultrabook™ devices, UX designers have to get more creative. UX designs should provide an optimal user experience in tablet and laptop modes, support multiple orientations, devices with multiple form factors, screen resolutions, etc. UI components have to be carefully designed to support both touch and traditional mouse/keyboard inputs.

In this article we discuss certain aspects that were considered while designing the Photo Application for Ulrabooks.

Orientation and Positioning

Our Photo Application is designed to support multiple orientations. The application dynamically renders the UI components based on the orientation notifications received from the Operating System. An adaptive layout is used to support multiple orientations and devices with different screen sizes. The size of the UI components used in the application dynamically adapts based on the device’s form factor and screen resolution. UI for each orientation is designed separately to make the best use of the available screen real estate. Please refer to the "Enabling the Orientation Sensor in Desktop Applications for Ultrabook™ on Windows* 8" article for further details.

Positioning the UI components is another critical aspect of designing a good User Experience. The application controls have been carefully placed in different orientations considering the convertible devices. For example, take a look at the camera button in the landscape and portrait mode screenshots below. Users can easily access the camera button using their thumbs even while both hands are holding the device. Other UI components, such as the Information Panel, image thumbnails, and other application controls, are placed in such a way that live capture from web cam or the image viewing area is maximized.

Touch and Mouse Support

Our Photo Application is designed for both touch and mouse inputs. A customized header bar is implemented to support bigger “Minimize” and “Close” buttons to be more touch friendly. Users can not only click on these buttons using a mouse but also conveniently use a finger to tap them. If an Ultrabook is being used as a laptop, some users might prefer to use Windows* 8 like other legacy Windows Operating systems with keyboard and mouse. While other users might prefer to use the touch capability supported by both Ultrabooks and Windows 8. Users could choose to either click or tap on the ‘+’ or ‘-‘ buttons to zoom in/out on an image. Alternatively, they could also use the “Pinch To Zoom” touch functionality on an image to zoom in/out. Similarly, users can either click or tap on the button to view next/previous image. Or users can just “flick” an image to view next/previous image.

Another aspect of the application that supports both touch and mouse inputs are the image thumbnails shown in the screenshot below. Users can click or tap on the right or left arrow buttons to scroll through the images or simply use a finger to scroll. With touch becoming more ubiquitous every day, users tend to expect these functionalities in applications on touch-capable devices. More details on implementing touch support on Ultrabooks running Windows 8 can be found here.

Application Controls

The look and feel of the UI components, such as images, labels, switch buttons, and other UI components, have been designed to match that of Windows 8. Buttons that have actions, such as “Camera” or “Geo-Tag,” have been designed differently to distinguish them from labels such as the ones used in the Information Panel. For buttons, such as “Geo-Tag” or “Information Panel” that have ON/OFF functionality, we designed them with UI similar to that of a “Switch”. Switch buttons also align well with the standard Windows 8 look and feel.

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.

AttachmentSize
Download u1.png1.42 MB
Download u2.png974.16 KB
Download u3.png1.3 MB
Download u4.png1.37 MB
For more complete information about compiler optimizations, see our Optimization Notice.