TE RI AL Exploring New User Interface Techniques MA E D xpression Blend is part of a suite of new products from Microsoft that aim at making it radically easier for designers and developers to collaborate in designing extraordinary user interfaces for Windows Vista, Windows XP and the Web.
Part I Designing Next-Generation User Experiences Building Rich Interactivity with Vector Graphics, Animation, 3D, Video, and Audio At the basis of Blend is the Windows Presentation Foundation (WPF), the new graphical subsystem of Microsoft’s .NET Framework 3.0 that is deeply integrated into Windows Vista. WPF was designed from the outset to provide advanced support for video, audio, 3D graphics, vector graphics, animation, bitmap graphics, advanced typography, and data binding.
Exploring New User Interface Techniques screen when clicked. And you can do it without programming. You may or may not want to get so fancy. But the capability exists in this program to create user interfaces using a wide range of media in a wide range of combinations and to do so with greater ease than has ever been possible before. CROSS-REF Chapter 3 includes instructions for playing movies on animated 3D screens and creating triggers to resize each of them to fill the window when the user clicks.
Part I Designing Next-Generation User Experiences FIGURE 1.2 Vector graphic objects created in Expression Blend. The vector graphic-based user interfaces that Blend produces can be completely scaled to any size automatically by the application in order to fit the monitor resolution of the user. With the addition of a few resizing controls, you can also enable users to scale any component of the interface you designate.
Exploring New User Interface Techniques FIGURE 1.3 Flow documents resize optimally for their window size and screen resolution, and can contain user interface elements such as, the slider and buttons shown here. Blend offers a wide range of text controls. Labels are available to provide access key support, so that users can access controls easily from the keyboard.
Part I Designing Next-Generation User Experiences You can also let the user take control of an animation by creating buttons that animate objects in various ways. Maybe you want the user to control a 3D model of a product, such as a new car, so he can see it from all sides — even underneath. Or how about a submarine, as shown in Figure 1.4? Pressing any button causes the submarine to rotate in 3D space to its new position.
Exploring New User Interface Techniques XAML is the Extensible Application Markup Language, an XML-based standard developed by Microsoft to define media-rich user interfaces for Windows XP or Vista applications and Web applications. User interfaces designed with XAML can take full advantage of Windows Vista’s rich media presentation capabilities, while remaining completely separate from the rest of the application code.
Part I Designing Next-Generation User Experiences Playing video It’s becoming more apparent every day that video is going to be a major component of the new age of user interfaces. Video is compelling, and computers now are sufficiently powerful to use this medium extensively. Blend supports many video formats including: ASF, AVI, DVR-MS, IFO, M1V, MPEG, MPG, VOB, WM, and WMV. Basically, all the file formats that Windows Media Player 10 supports are available.
Exploring New User Interface Techniques playback, or you can even provide them with an MP3 player to select and skip through multiple tracks of audio, as shown in Figure 1.7. Blend supports all the audio file types that Windows Media Player 10 supports, such as AIF, AIFC, AIFF, ASF, AU, MID, MIDI, MP2, MP3, MPA, MPE, RMI, SND, WAV, WMA, and WMD. FIGURE 1.7 You can add your own custom-designed MP3 player to your application’s user interface.
Part I Designing Next-Generation User Experiences CROSS-REF For more information about using images in Blend, see Chapter 6 and Chapter 9. FIGURE 1.8 Opacity masks have been added and text overlaid onto this collage of images to create art for a button. Creating Innovative and Elegant User Interfaces Blend provides you with an array of standard layout panels and pre-built controls such as list boxes, menus and buttons to assist you in creating user interfaces.
Exploring New User Interface Techniques Choosing and customizing controls Blend provides you with WPF system controls that are standard for Vista and Windows XP applications and that you can use to quickly design your user interface, or you can customize controls and create your own look.
Part I Designing Next-Generation User Experiences Figure 1.10 shows an example of a progress bar that has been radically changed from the WPF ProgressBar below the slider into the dial that appears as a speedometer above the slider. The progress bar and the dial are both the same kind of control, yet they appear entirely different. The slider is used to test the action of both progress bars.
Exploring New User Interface Techniques n Stack: An element placed into a stack panel is automatically positioned next to the previous element in the stack, horizontally or vertically depending on the direction of the stacking desired. n Dock: Elements in this panel are docked around the edges of the application window.
Part I Designing Next-Generation User Experiences Nesting panels and controls for a hierarchical design With Blend, you often place the controls for your user interface into a layout panel, but you can also place panels within other panels or controls within other controls. Nested objects, which are called child elements, inherit properties from their parents — for example, they move with the parent when the parent is moved, or they become invisible if the opacity of the parent is set to 0.
Exploring New User Interface Techniques then single-click it to select the image rather than the panels or the button. Fortunately, this is easier than it sounds, because a large yellow border appears around what is selected to make it obvious what is selected, and double-clicking is fast. When a yellow border appears around an object, then the object is active. To make an object inactive, just double-click somewhere else. TIP You can also click on the name of the object in the Objects list to select it.
Part I Designing Next-Generation User Experiences Using styles and templates Maintaining consistency in your application is an essential part of making your user interface design highly usable. To aid your efforts in balancing the consistency and interactivity that you need in your interface, you can create and use styles and templates in Blend.
Exploring New User Interface Techniques FIGURE 1.14 The Wikipedia Explorer, developed by Dot Net Solutions, here displays Wikipedia’s listing for Windows Presentation Foundation. Increasing Productivity by Increasing Collaboration In your application, you may want to import sophisticated art that is externally created, and you may also want to connect your user interface design to a back end of complex programming to run the various tools and features that you design into your interface.
Part I Designing Next-Generation User Experiences You can also import 3D objects and animation from Zam 3D, which also exports into XAML code. You simply add the xaml file into your project and open it in a document window. Then you can cut and paste its objects into any other window, page or user control in your project. And you can import any 3D object in the popular OBJ format, along with its accompanying MTL (material) file.
Exploring New User Interface Techniques situation, but they have all been put to work in innovative applications to which Krause contributed, such as Kai’s Power Tools, Kai’s Power GOO, Kai’s Photo Soap, Kai’s Power SHOW, LivePicture, Poser, and Bryce. ON the WEB You can find Kai’s Power Tools at www.corel.com, Poser at www.e-frontier.com, and Bryce at www.daz3d.com. Big windows The idea of using big windows is to immerse the user in the application.
Part I Designing Next-Generation User Experiences Rooms Allowing users to work in an environment that focuses just on the single task that they are performing without the distraction of other environments is a big asset. Rooms are big windows laid out for the different features of the application. Rooms can give the feeling of spaciousness in the design, just as many big rooms in a house can make a house feel spacious and opulent. So you may want to give the user lots of rooms.
Exploring New User Interface Techniques Drag-and-drop desktop tools Tools that actually look like the tools you may use in real life such as paintbrushes or magnifying glasses, as shown in Figure 1.17, may be useful whenever they can be incorporated into your user interface design, because this adds a natural and familiar element to your application. The tools can be resized to appear large and cast shadows when used.
Part I Designing Next-Generation User Experiences FIGURE 1.18 Interface items may be grayed out until they are needed, as menu items are grayed out here in Bryce until the mouse moves over them. Mouse-overs Tools can become invisible or small when not used, but when the mouse rolls over the small or invisible tool area, they can pop up and become large and visible and functional once again, as shown in Figure 1.19. FIGURE 1.
Exploring New User Interface Techniques quickly understands how to use them. Second, the shadows may give the application more visual interest. You may also want to include bitmap effects and opacity masks to create glows and lighting effects in your application design. Glows around objects highlight them, and make them more visible without increasing their size. And you might want to use partial transparency to make tools less visible when they’re not being used or not needed.
Part I Designing Next-Generation User Experiences Drawers are collections of tools or features that can pop out when clicked, as shown in Figure 1.21. Drawers can actually look like drawers or stacked trays, or they can have expanders that indicate that they exist (although that doesn’t seem like as much fun). FIGURE 1.21 You can store all kinds of handy things in drawers. In Poser, the drawers on the right store actors, props, clothing, and more.
Exploring New User Interface Techniques n ZUIs (Zooming User Interfaces) — described by Jef Raskin in his book, The Humane Interface: New Directions for Designing Interactive Systems (Addison-Wesley, 2000) n User interfaces based on layers of movable filters, such as the Magic Lenses proposed at Xerox Parc in the 1990s n Collaborative, online 3D user interfaces, similar to the Croquet Project, being developed by Alan Kay (one of the designers of the SmallTalk programming language) and others TIP For more
