Expression Blend is part of a suite of new products from Microsoft that

Transcription

1 Expressio Bled is part of a suite of ew products from Microsoft that aim at makig it radically easier for desigers ad developers to collaborate i desigig extraordiary user iterfaces for Widows Vista, Widows XP ad the Web. Bled supports a ew paradigm for user iterface desig for both Widows applicatios ad Web applicatios, primarily by takig uprecedeted advatage of two advaced computer hardware ad software techologies: Explorig New User Iterface Techiques the hardware-accelerated 3D graphics that are commo o today s computers ad the automatic geeratio of XAML code, Microsoft s ew XMLbased laguage for rapid costructio of sophisticated user iterfaces. Bled exploits these techologies to make it quick ad easy for you to create user iterfaces that deeply utilize rich media cotet, that are highly iteractive, that ca be drive by customized cotrols, ad that attai ew levels of usability ad aesthetics for ed-users to ejoy ofte without requirig you to write code. COPYRIGHTED MATERIAL IN THIS CHAPTER Discoverig ew possibilities for user iterfaces Usig aimatio, video, audio, 3D, ad vector graphics i applicatio desig Choosig layout paels ad cotrols Customizig WPF cotrols Buildig your user iterface usig hierarchical structures Collaboratig with other desigers ad developers Explorig ew user iterface desig paradigms 3

2 Part I Desigig Next-Geeratio User Experieces Buildig Rich Iteractivity with Vector Graphics, Aimatio, 3D, Video, ad Audio At the basis of Bled is the Widows Presetatio Foudatio (WPF), the ew graphical subsystem of Microsoft s.net Framework 3.0 that is deeply itegrated ito Widows Vista. WPF was desiged from the outset to provide advaced support for video, audio, 3D graphics, vector graphics, aimatio, bitmap graphics, advaced typography, ad data bidig. WPF, for example, supports flow documets, which automatically optimize the readability of documets for differet widow sizes ad scree resolutios, ad WPF supports a wide rage of pre-built cotrols that desigers ca quickly plug ito a user iterface ad that they ca quickly customize to a remarkable degree, eve by addig aimatio, video, ad 3D cotet right ito the cotrols themselves. Bled is also desiged so that you ca merge the steps of creatig your prototype of the user iterface desig with the creatio of the real user iterface. You ca desig your user iterfaces with cotrols that work eve durig the prototypig stage. Bled s umerous ready-made, fuctioig cotrols are easy to customize i both appearace ad fuctioality, ad ca resize automatically to ay scree resolutio or accordig to the user s preferece. You ca activate may of the cotrols, icludig meus, buttos, sliders, ad list boxes, without eedig to do ay programmig. Ad withi Bled you ca lik these fuctioig cotrols to live exteral data sources such as databases, RSS feeds, ad more agai without writig ay code. All this eables you to brig the user iterface desig to a level of fuctioality that ca actually be the basis of the full-blow applicatio, rather tha just a graphic mockup of a user iterface that eeds to be re-implemeted by a programmer. Whe desigig smaller applicatios that do t require much back-ed programmig, you ca use Bled as a stad-aloe tool that ca help you create Widows or Web applicatios from begiig to ed. Or you ca use Bled i cojuctio with other graphic desig tools such as Microsoft Expressio Desig, ad with programmig tools such as Visual Basic.NET ad C# i Microsoft Visual Studio. You ca, for example, import artwork from tools such as Expressio Desig ito Bled, ad you ca itegrate with Visual Basic.NET or C# code as a back ed to the user iterface that you create i Bled. If you do this, you ca cotiue to modify your desig i Bled eve after the Visual Basic.NET or C# code is coected to it. This gives you tremedous flexibility ad the freedom to be creative at every step i desigig ad implemetig your user iterface. Bled makes it easy for you to use a combiatio of video, audio, aimatio, 3D cotet, bitmap images, vector graphics, ad sophisticated typography as iteractive elemets of the desig of your user iterface. You ca use these separately to make up the differet compoets of your iterface, or you ca use them i cojuctio with oe aother, as show i Figure 1.1. For example, you ca import videos ad play them o their ow small, aimated 3D plaes that ca resize to full 4

3 Explorig New User Iterface Techiques 1 scree whe clicked. Ad you ca do it without programmig. You may or may ot wat to get so facy. But the capability exists i this program to create user iterfaces usig a wide rage of media i a wide rage of combiatios ad to do so with greater ease tha has ever bee possible before. Chapter 3 icludes istructios for playig movies o aimated 3D screes ad creatig triggers to resize each of them to fill the widow whe the user clicks. FIGURE 1.1 These buttos, cosistig of video o aimated 3D plaes, are examples of Bled s capacity for mergig video, aimatio, 3D, ad iteractivity. Desigig your applicatio with vector graphics Microsoft Expressio Bled provides you with a wide rage of tools that you ca use to build your ow vector graphics or to import vector graphics already built i Microsoft Expressio Desig or other applicatios. Figure 1.2 displays just a few vector graphic objects that you ca create from scratch i Bled. See Part II for detailed iformatio o how to create ad maipulate vector graphics withi Bled. Vector graphics allow you to zoom i o objects without ay apparet loss i detail. I user iterfaces, this is a distict advatage for vector graphic images compared to bitmap images, which ca become fuzzy ad start showig idividual pixels whe scaled too large. Because moitors are icreasig i size ad resolutio, it s becomig icreasigly importat to use vector graphics as much as possible to avoid those chuky pixels. 5

4 Part I Desigig Next-Geeratio User Experieces FIGURE 1.2 Vector graphic objects created i Expressio Bled. The vector graphic-based user iterfaces that Bled produces ca be completely scaled to ay size automatically by the applicatio i order to fit the moitor resolutio of the user. With the additio of a few resizig cotrols, you ca also eable users to scale ay compoet of the iterface you desigate. Without doig ay programmig, you ca divide a applicatio widow ito sectios, called a grid, ad add a few cotrols so the user ca resize ay of the sectios of the grid. Or you ca allow the user to resize text i text boxes by addig sliders. This easy scalability of elemets provided by Bled makes better user experieces possible for both you the desiger ad for the user of your desigs. Desigig with type WPF flow documets allow for greater readability of text across all widow sizes ad moitor resolutios. They offer automatic resizig, as show i Figure 1.3. The FlowDocumetReader is the most fully featured type of flow documet viewers ad has three modes: Page mode, Two Page mode ad Scroll mode, ad icludes a slider to allow the user to resize text plus it offers a search optio. You ca also add images, cotrols, aimatios, ad video ito flow documets. For more about creatig ad usig flow documets, see Chapter 9. 6

5 Explorig New User Iterface Techiques 1 FIGURE 1.3 Flow documets resize optimally for their widow size ad scree resolutio, ad ca cotai user iterface elemets such as, the slider ad buttos show here. Bled offers a wide rage of text cotrols. Labels are available to provide access key support, so that users ca access cotrols easily from the keyboard. Bled s ehaced typographic support allows you to add differet styles of type while usig the same fot you ca add swashes ad ligatures ad more to your user iterface. You ca also use Expressio Desig to create sophisticated typographic desigs ad import them for use i Bled. For more about ehaced typography, see Chapter 10. Icorporatig aimatio ito your desig Bled provides you with multiple timelies i which you ca aimate your vector objects, cotrols, 3D objects, video, or bitmap images o 3D plaes practically aythig you could wat to aimate. You ca defie two poits o a timelie as keyframes, ad Bled fills i the chages i the objects o the timelie betwee the two keyframes. O a keyframe you ca chage somethig about a object, such as color, rotatio, positio, size, ad ay combiatio of those or more, ad Bled creates the aimatio betwee the two keyframes for you. For example, you ca aimate buttos to move or rotate whe you move your mouse over them. Or you ca aimate colors of cotrols to chage whe you use them. You ca also coect a object to a motio path that defies the path o which the object moves betwee the keyframes. 7

6 Part I Desigig Next-Geeratio User Experieces You ca also let the user take cotrol of a aimatio by creatig buttos that aimate objects i various ways. Maybe you wat the user to cotrol a 3D model of a product, such as a ew car, so he ca see it from all sides eve udereath. Or how about a submarie, as show i Figure 1.4? Pressig ay butto causes the submarie to rotate i 3D space to its ew positio. It s iterestig to ote that the aimatio ca kick i from whatever the curret positio of the object is. This is called hadoff aimatio ad is oe of the may ew features of WPF that Bled supports. The timelies that Bled uses, show i Figure 1.4, ot oly support extesive aimatio capabilities, but also sophisticated cotrol of video ad audio playback as well. For more about aimatio i Bled, see Chapters 14 ad 15. FIGURE 1.4 Creatig a aimatio i the Bled iterface to cotrol the positio of the 3D submarie. Icludig 3D models ad aimatio I Bled, you ca make ay image ito a 3D plae that you ca the aimate. Ad you ca chage that image to a video, creatig a aimated video o a 3D plae, as show i Figure 1.1. Or, you ca import 3D objects from other programs. Ad with Zam 3D from Electric Rai ( you ca import both the 3D object ad its aimatio ito Bled, because Zam 3D exports i XAML, the user-iterface markup laguage the Expressio family of programs uderstads. 8

7 Explorig New User Iterface Techiques 1 NOTE XAML is the Extesible Applicatio Markup Laguage, a XML-based stadard developed by Microsoft to defie media-rich user iterfaces for Widows XP or Vista applicatios ad Web applicatios. User iterfaces desiged with XAML ca take full advatage of Widows Vista s rich media presetatio capabilities, while remaiig completely separate from the rest of the applicatio code. This simultaeous separatio ad itegratio makes it easy for desigers to work o their ow with XAML-geeratig tools such as Bled to develop highly fuctioal graphical user iterfaces. Programmers ca the quickly itegrate these iterfaces with Web applicatio code or Widows applicatio code that they create by usig, for example, Visual Studio developmet tools (icludig Visual Basic, Visual C#, ad so o). XML is the Extesible Markup Laguage, which is icreasigly used for creatig commo iformatio formats that ca be used to share data betwee computers o the World Wide Web ad elsewhere. XML is similar to Hypertext Markup Laguage (HTML), the stadard laguage used by Web pages, but ulike HTML it ca be easily exteded to create ew iformatio formats. Like HTML, XML is a stadard developed by the World Wide Web Cosortium, which is led by Sir Tim Berers-Lee, the ivetor of the World Wide Web. You ca also import 3D objects from ay program that exports a OBJ file, which is a commoly used 3D file format. For example, i Figure 1.5, the text o the right is wrapped oto a sphere imported from a OBJ file created i Bleder 3D ( The 3D aimatio o the left i Figure 1.5 was created i Zam 3D ad imported ito Bled. Bled also lets you positio 3D lights, move 3D objects i 3D space, add materials to 3D objects, ad more. It ca eve aimate already existig 3D aimatios for example, you ca import a rotatig 3D object from Zam 3D ad the create a fly-by aimatio of it i Bled. For more about usig 3D models ad aimatig i Bled, see Chapters 12 ad 14. FIGURE 1.5 A rotatig 3D object created i Zam 3D o the left ad a 3D sphere with text mapped o it o the right. 9

8 Part I Desigig Next-Geeratio User Experieces Playig video It s becomig more apparet every day that video is goig to be a major compoet of the ew age of user iterfaces. Video is compellig, ad computers ow are sufficietly powerful to use this medium extesively. Bled supports may video formats icludig: ASF, AVI, DVR-MS, IFO, M1V, MPEG, MPG, VOB, WM, ad WMV. Basically, all the file formats that Widows Media Player 10 supports are available. Bled also allows you to play video at various resolutios, icludig High Defiitio (HD). You ca play the video o ay part of the iterface that you specify for video, ad you ca allow the user to resize the video image iteractively. You ca provide the user with video playback cotrols as well as volume cotrols, or you ca make your applicatio cotrol whe the video is played, paused, or restarted. You ca also play video o a 3D object, have it coform to the 3D surface, ad eve make it possible (ad easy) for the user to aimate the positio, scalig, ad rotatio of the video o the 3D surface. Video ad audio ca be added to the same timelie that is used for aimatio. You ca defie triggers, such as a mouse-over or mouse-click o a butto, to start or stop the audio or video from ay poit i the timelie that you specify without usig ay programmig. Figure 1.6 shows a example of a video player created i Bled. For more iformatio about usig video i Bled, see Chapter 14. For more iformatio about cotrols ad layouts i Bled, see Part V. FIGURE 1.6 A video player created i Bled that automatically resizes for all widow sizes. Usig audio With Bled you ca create presetatios cotaiig recorded audio, or you ca attach audio to buttos so that whe the user moves the mouse over the butto, the audio plays. Why have silet user iterfaces? Speech ad music are itegral parts of the world. They ca ow be itegral parts of user iterface desig. With Bled, you ca also allow users to cotrol their ow volume ad 10

9 Explorig New User Iterface Techiques 1 playback, or you ca eve provide them with a MP3 player to select ad skip through multiple tracks of audio, as show i Figure 1.7. Bled supports all the audio file types that Widows Media Player 10 supports, such as AIF, AIFC, AIFF, ASF, AU, MID, MIDI, MP2, MP3, MPA, MPE, RMI, SND, WAV, WMA, ad WMD. FIGURE 1.7 You ca add your ow custom-desiged MP3 player to your applicatio s user iterface. For more iformatio about usig audio i Bled, see Chapter 14. For more iformatio about cotrols ad layouts i Bled, see Part V. Addig images Bitmap images ca be added ito a Bled documet ad resized ad positioed precisely. Bitmap images ca be added ito cotrols, such as buttos. You ca give images glows usig opacity masks or bitmap effects. For example, the collage i Figure 1.8 has opacity masks assiged to each bitmap. You ca chage them to 3D to aimate them like photos flyig i space. You ca add them to flow documets ad wrap text aroud them. Images ca resize alog with the cotaier that holds them, or you ca specify that they do ot resize. Ulike vector graphics, images may become jagged whe magified, but you ca specify a maximum size that they ca be elarged to, as well as the miimum size that they ca shrik to. You ca also specify precisely what part of the image is focused i o if the image gets clipped i a smaller widow. (The Viewbox cotrol allows you to do this.) 11

10 Part I Desigig Next-Geeratio User Experieces For more iformatio about usig images i Bled, see Chapter 6 ad Chapter 9. FIGURE 1.8 Opacity masks have bee added ad text overlaid oto this collage of images to create art for a butto. Creatig Iovative ad Elegat User Iterfaces Bled provides you with a array of stadard layout paels ad pre-built cotrols such as list boxes, meus ad buttos to assist you i creatig user iterfaces. These layouts ad cotrols ca be so easily deployed ad activated that the desiger o loger eeds to desig first ad the implemet. The implemetatio ca be part of the desig process. This saves time ad allows you to more precisely craft your user iterface desig ad to immediately see how it actually works. May other features of Bled also save you time, icludig: The ability to est objects, to create hierarchical desigs that are easy to maage (as described i the sectio Nestig layout paels ad cotrols for a hierarchical desig later i this chapter) The ease with which you may itegrate iteractive video, audio, 3D, ad aimatio ito your desigs The Objects ad Timelie palette, which cotais a list of objects that makes it easy for you to avigate through complex hierarchies i your desig All this makes it possible for you to sped more time o fidig creative ad elegat ew approaches to user iterface desig. 12

11 Explorig New User Iterface Techiques 1 Choosig ad customizig cotrols Bled provides you with WPF system cotrols that are stadard for Vista ad Widows XP applicatios ad that you ca use to quickly desig your user iterface, or you ca customize cotrols ad create your ow look. The cotrols available i Bled iclude the followig: Meus Tabs Toolbars List boxes Combo boxes Group boxes List views Tree views Scroll viewers Buttos Radio buttos Check boxes Progress bars Sliders Grid splitters Resize grips Bled allows you to customize your cotrols by addig borders ad backgrouds of differet colors, gradiets, images, trasparecy values, opacity masks ad bitmap effects. Ad you ca add text of ay size ad color i ay fot you choose. You ca also customize cotrols by editig styles, as well as editig cotrol parts ( also kow as templates), to give your cotrol a etirely ew look, ad to chage the way your cotrols react durig differet stages of iteractivity. For example, Figure 1.9 shows a stack pael with buttos that have their styles modified so that the buttos aimate to a larger size durig a mouse-over. FIGURE 1.9 I Bled it s easy to create customized cotrols such as these buttos that elarge durig a mouse-over. 13

12 Part I Desigig Next-Geeratio User Experieces Figure 1.10 shows a example of a progress bar that has bee radically chaged from the WPF ProgressBar below the slider ito the dial that appears as a speedometer above the slider. The progress bar ad the dial are both the same kid of cotrol, yet they appear etirely differet. The slider is used to test the actio of both progress bars. Bled also allows you to create a custom cotrol, usig a UserCotrol documet, ad Bled adds a tool butto i the Asset Library to allow you to istatiate your user cotrol i Bled, just like you add a butto or list box or ay cotrol. You do t eed to write ay code to create a customized cotrol i this way, although you ca add code to ehace its fuctioality, if you wat. Creatig custom cotrols ad editig the styles of cotrols are discussed i detail i Chapter 16. Modifyig the template of a list box is discussed i Chapter 3. FIGURE 1.10 A stadard WPF progress bar o the bottom is trasformed ito a speedometer o the top. Choosig layout paels Oe of the thigs that you will probably do i the early phases of desigig a iterface is to choose the layout paels that you ll employ i the user iterface. (You ca see examples of the differet types of layout paels i Figure 1.11.) The i these paels, you ll place child elemets. Child elemets are objects placed iside aother object. These objects ca be more paels, or vector art, text cotrols, buttos, other cotrols, ad more. The layout paels iclude: Cavas: You ca place all elemets i this pael wherever you wat them. Objects i cavas paels geerally do t resize whe the cavas pael itself resizes. Grid: A grid pael ca be sectioed off, ad ested elemets placed ito those sectios. You ca add grid splitter cotrols so users ca resize each sectio idepedetly. Objects i grid paels ca resize both horizotally ad vertically whe the widow is resized. 14

13 Explorig New User Iterface Techiques 1 Stack: A elemet placed ito a stack pael is automatically positioed ext to the previous elemet i the stack, horizotally or vertically depedig o the directio of the stackig desired. Dock: Elemets i this pael are docked aroud the edges of the applicatio widow. Wrap: A elemet placed ito a wrap pael is automatically positioed to the left of the previous elemet uless there is o room, i which case a ew lie is started, just as with text wrap i a text box. Border: This adds a border aroud ay pael, cotrol or other object. For more iformatio about addig child elemets ito layout paels, see Chapter 3. For more iformatio about layig out objects i the grid pael ad other paels, see Chapter 18. FIGURE 1.11 The cavas, grid, dock, stack, ad wrap paels Cavas pael Grid pael Dock pael Stack pael Wrap pael 15

14 Part I Desigig Next-Geeratio User Experieces Nestig paels ad cotrols for a hierarchical desig With Bled, you ofte place the cotrols for your user iterface ito a layout pael, but you ca also place paels withi other paels or cotrols withi other cotrols. Nested objects, which are called child elemets, iherit properties from their parets for example, they move with the paret whe the paret is moved, or they become ivisible if the opacity of the paret is set to 0. Some paels or cotrols ca take a sigle child elemet, such as a border pael or scroll viewer. Other paels or cotrols ca take may child elemets, such as all the paels, except Border, listed i the previous sectio of this chapter, as well as meus, list boxes, combo boxes, tree views ad more. Ad some cotrols, such as sliders, progress bars, ad grid splitters, accept o child elemets. The Objects list i the Objects ad Timelie palette cotais all the iformatio about what is ested i what, as show i Figure You ca ope or close the expaders to explore deeper levels of estig. FIGURE 1.12 The image is ested iside a butto which is ested i a wrap pael which is ested i a border pael. Whe objects are ested, they are still readily available. You ca select ay particular ested elemet of your program to modify it or move it, for example, by double-clickig it several times util the actual elemet is selected, So if your image is iside a butto iside a wrap pael iside a grid pael, as show i Figure 1.12, you may eed to double-click o the image three times ad 16

15 Explorig New User Iterface Techiques 1 the sigle-click it to select the image rather tha the paels or the butto. Fortuately, this is easier tha it souds, because a large yellow border appears aroud what is selected to make it obvious what is selected, ad double-clickig is fast. Whe a yellow border appears aroud a object, the the object is active. To make a object iactive, just double-click somewhere else. TIP You ca also click o the ame of the object i the Objects list to select it. Nestig makes thigs much simpler for the desiger. You ca stack objects, wrap them, place them i sectios of a grid, ad the move the objects aroud i their layout paels as a sigle uit. It makes the task of creatig may parts of a user iterface simpler by allowig you to compartmetalize objects ad cotrols. Addig bitmap effects Bled offers five bitmap effects that you ca apply to your cotrols ad other vector objects. They are Bevel, Blur, Drop Shadow, Outer Glow ad Emboss. These bitmap effects are a powerful way to add sophisticated imagery to your user iterface. For istace, you ca give ay image the look ad feel of a butto by givig it a bevel, as show i the upper left i Figure The you ca use Bled s Make Butto tool to trasform your image ito a butto. Or you ca use the Outer Glow bitmap effect to make your buttos glow whe they are pressed or moused over. You ca also give your objects drop shadows to add a 3D look to your user iterface, ad you ca add depth to the drop shadow whe a tool, for istace, is dragged. You ca also use the blur bitmap effect to add a glow to text, as show i Figure The blurred text is behid a text box that cotais the same text with a trasparet backgroud. FIGURE 1.13 Bitmap effects applied to images ad text. 17

16 Part I Desigig Next-Geeratio User Experieces Usig styles ad templates Maitaiig cosistecy i your applicatio is a essetial part of makig your user iterface desig highly usable. To aid your efforts i balacig the cosistecy ad iteractivity that you eed i your iterface, you ca create ad use styles ad templates i Bled. You ca add aimatios to styles or you ca add property triggers to trigger the chage i appearace of a style due to a property chage for its object type, such as whe the mouse is over the cotrol, or whe it is pressed. Bled also offers templates to defie the cotrol parts of a cotrol, ad how the cotrol parts respod iteractively to property chages ad evets. Usig a template, you ca defie a cotrol that appears radically differet from its default WPF cotrol, yet cosistetly maitais that ew look. You ca make styles ad templates available as resources withi a sigle widow, or withi the etire applicatio, or save them i resource dictioaries ad make them available to other applicatios as well. Styles, templates, ad resource dictioaries provide you with a way to exted the flexibility of your desig, because chagig a style or template ca result i immediately chagig every istace of that style or template. Likig to data Usig Bled, you ca lik your cotrols to differet sources of data. For example, you ca lik your cotrols to data from RSS feeds, ad you ca also lik to data i databases. Bled allows you to lik to two kids of data formats: Commo Laguage Rutime (CLR) Objects ad Extesible Markup Laguage (XML). CLR Objects are data items that are usually stored i a ObservableCollectio object i the code-behid files. You ca read i data from a database ito a data table i the codebehid file, ad the covert it ito a ObservableCollectio. The it ca be added as a CLR Object data source i the Data palette of Bled ad liked to cotrols. XML, as oted earlier i this chapter, is similar to HTML except that it is extesible. Because it is extesible, the user ca create custom tags for data accordig to certai rules so that the data ca be more easily uderstood by other computer software. These tags ca be, for example, the ames of fields i your database. You ca lik to a database ad bid cotrols, such as a list box or combo box, to ay field or fields of the database. I Figure 1.14, for example, a XML data source supplies iformatio from Wikipedia. For more iformatio o likig cotrols to data sources, see Chapter 21. For a great example of how powerful flow documets ca be, especially whe liked to ON the WEB data sources, go to ad check out the New York Times Reader. 18

17 Explorig New User Iterface Techiques 1 FIGURE 1.14 The Wikipedia Explorer, developed by Dot Net Solutios, here displays Wikipedia s listig for Widows Presetatio Foudatio. Icreasig Productivity by Icreasig Collaboratio I your applicatio, you may wat to import sophisticated art that is exterally created, ad you may also wat to coect your user iterface desig to a back ed of complex programmig to ru the various tools ad features that you desig ito your iterface. For this you may wat to rely o the work of others. Bled is desiged for collaboratio both with other desigers ad with programmers. I large applicatios, Bled provides the lik betwee the graphics ad the back-ed programmig eviromet. Microsoft Expressio Desig ca export (amog other thigs) XAML code, the same format i which Bled stores its data (as described i the sectio Icludig 3D models ad aimatio earlier i this chapter). So, vector objects created i Desig ca be imported ito Bled easily. 19

18 Part I Desigig Next-Geeratio User Experieces You ca also import 3D objects ad aimatio from Zam 3D, which also exports ito XAML code. You simply add the xaml file ito your project ad ope it i a documet widow. The you ca cut ad paste its objects ito ay other widow, page or user cotrol i your project. Ad you ca import ay 3D object i the popular OBJ format, alog with its accompayig MTL (material) file. The XAML code output by Bled is desiged to itegrate with projects created with Visual Basic.NET ad C#, the popular programmig laguages from Microsoft. Whe you create a project i Bled, you ca choose betwee Visual Basic.NET or C# code for your code-behid files. Each documet i Bled, such as a widow or page, has a accompayig code-behid file which you ca use to coect your user iterface elemets to advaced fuctioality provided by Visual Basic.NET or C# code. For example, whe you wat to create code for a object (such as a butto, for example) i Bled to make it respod to some evet (such as a mouse click, for example), the you type i a ame that you wat to give to the evet hadler, ad Bled geerates the code to create the evet hadler ad opes Visual Studio which pastes the code ito the code-behid file ad opes to the correct place for you to eter your code ito the evet hadler. If you do t have Visual Studio, you ca still ope the code-behid file ad Bled automatically geerates code ad places it ito the clipboard, which makes it easy for you to paste it ito the code-behid file. The you ca type more code ito the method that Bled created. (Usig Notepad is good for this, although it does t offer early the fuctioality of Visual Studio, which provides you with ItelliSese auto-completio, debuggig aids, ad lots more. But Notepad ca be hady for a few lies of code here ad there.) Developers workig i Visual Studio ad desigers workig i Bled ca work o the same project at the same time. Whe the project is modified ad built i either applicatio, a message appears i the other applicatio, askig whether the project should be updated i that applicatio. For iformatio o importig graphics from Expressio Desig, see Chapter 7 ad Chapter 10. For iformatio about usig Visual Studio to publish applicatios ad create XAML browser applicatios for the Web, see Chapter 4. For more iformatio o modifyig ad addig code i Bled, see Chapter 20. For more iformatio o importig 3D art ad aimatio from Zam 3D, see Chapter 12. Explorig Examples of Iovative User Iterfaces Bled makes it easy to itegrate video, audio, aimatio, 3D, ad vector graphics ito your user iterfaces ad thus to take advatage of the extra graphics power of the Widows Presetatio Foudatio. You may fid it useful to merge this use of rich media i iterface desig with other iovative ideas, such as, for example, user iterface ideas take from the trailblazig work of desiger Kai Krause i the 1990s, which we describe ext. These ideas may ot be useful i every 20

19 Explorig New User Iterface Techiques 1 situatio, but they have all bee put to work i iovative applicatios to which Krause cotributed, such as Kai s Power Tools, Kai s Power GOO, Kai s Photo Soap, Kai s Power SHOW, LivePicture, Poser, ad Bryce. ON the WEB You ca fid Kai s Power Tools at Poser at ad Bryce at Big widows The idea of usig big widows is to immerse the user i the applicatio. For example, if you play a video, you may wat to use the etire moitor space while hidig or miimizig the cotrols. Or if you are i a applicatio, you may wat to hide whatever you ca to make the widow that the user eeds as big as possible, as show i Figure Moitors are oly so big, ad ideally, the user should be able to see oly what he or she eeds to see for the task at had. Makig use of the etire moitor space without ay pixels cosumed by a virtual desktop may be advatageous, but you may be able to do more tha that by havig meus or toolbars disappear whe they re ot eeded. Makig use of all the space available ca help users keep their attetio o what s most importat to them. FIGURE 1.15 The default for the 3D modelig, rederig, ad aimatio program Bryce is to basically take over your whole computer scree as oe big widow, which works well. 21

20 Part I Desigig Next-Geeratio User Experieces Rooms Allowig users to work i a eviromet that focuses just o the sigle task that they are performig without the distractio of other eviromets is a big asset. Rooms are big widows laid out for the differet features of the applicatio. Rooms ca give the feelig of spaciousess i the desig, just as may big rooms i a house ca make a house feel spacious ad opulet. So you may wat to give the user lots of rooms. The desig of each room should display its fuctioality. For example, whatever tools you offer specifically for a room should probably be large ad promietly displayed so that whe the user chooses a room, the fuctioality of the room is obvious. Perhaps oly the tools or objects eeded for the user s curret task are visible, so that everythig i the room is geared to the task at had. Miimized iterfaces Offerig users the tools they eed whe they eed them may simplify a user iterface ad icrease user productivity ad satisfactio. Tools, cotrols, ad meus ca pop up whe the user eeds them (as show i Figure 1.16) ad disappear whe the user does t eed them. FIGURE 1.16 Pop-up meus like the oes show here i the 3D modelig program Poser ca help miimize the user iterface util it s eeded. 22

21 Explorig New User Iterface Techiques 1 Drag-ad-drop desktop tools Tools that actually look like the tools you may use i real life such as paitbrushes or magifyig glasses, as show i Figure 1.17, may be useful wheever they ca be icorporated ito your user iterface desig, because this adds a atural ad familiar elemet to your applicatio. The tools ca be resized to appear large ad cast shadows whe used. For example, paitbrushes ca cotai the paits o their tips, which might resize accordig to the user s preferece, ad the tips of the paitbrushes might bed as the color is applied. This provides a obvious beefit because users ca see the size ad color of the brush precisely where they pla to apply it. Users do t eed to look over to a distat tool palette to see what they re doig. Or you might provide your users with drag-ad-drop tools that allow them to, for example, drag items that they d like to buy ito a shoppig cart, or to drag videos ito their favorites lists. FIGURE 1.17 A Zoom tool may become a more appealig ad familiar tool whe it looks like a magifyig glass ad eve creates a shadow as it elarges a area of the scree. Visibility o demad I may applicatios, the umber of tools may be more tha the user cares to see all at oce. Some applicatios, such as Bled, assig tools to toolbars that ca be made visible by choosig them from a meu. Aother method might be to have the ames of tools grayed out (as show i Figure 1.18), but appear whe you press a key or move the mouse over them. This could let the user see what s available ad kow where the tools will be whe they are eeded. Depedig o your applicatio, whole groups of toolbars or other cotrols might appear whe a sigle butto is clicked or key is pressed. 23

22 Part I Desigig Next-Geeratio User Experieces FIGURE 1.18 Iterface items may be grayed out util they are eeded, as meu items are grayed out here i Bryce util the mouse moves over them. Mouse-overs Tools ca become ivisible or small whe ot used, but whe the mouse rolls over the small or ivisible tool area, they ca pop up ad become large ad visible ad fuctioal oce agai, as show i Figure FIGURE 1.19 It may be helpful for tools to become more visible whe the mouse passes over them. Here i Bryce, a light glows whe the mouse passes over the light. Memory dots Offerig the user a quick meas of switchig from oe widow to aother ca defiitely be a useful additio to the applicatio. For example, the Widows Task Bar shows the applicatios that are ope ad allows the user to click o ay oe of them to quickly go back ad forth. This feature, however, does ot eed to take a large portio of your applicatio. It ca be implemeted via small buttos or eve small dots. For example, buttos could switch you from oe widow to aother withi a applicatio. You may provide several memory dots i your iterface desig, which whe pressed by default take the user to the mai scree of your applicatio. From there, wheever the user wats to go to aother part of the program, while rememberig where he was, he ca click aother memory dot ad start from the mai applicatio page agai. The origial memory dot remembers where the user left off. Trasparecies ad shadows You ca give your user iterface a 3D look by addig shadows. The magifyig glass i Figure 1.17 casts a shadow, which gives it a floatig appearace. Shadows create two effects o the user. First, they may subcosciously give the user the clue that the objects are draggable so that the user 24

23 Explorig New User Iterface Techiques 1 quickly uderstads how to use them. Secod, the shadows may give the applicatio more visual iterest. You may also wat to iclude bitmap effects ad opacity masks to create glows ad lightig effects i your applicatio desig. Glows aroud objects highlight them, ad make them more visible without icreasig their size. Ad you might wat to use partial trasparecy to make tools less visible whe they re ot beig used or ot eeded. See Chapter 7 for more iformatio about trasparecy, opacity maps, ad glows. Metawidows, drawers, ad scrapbooks A metawidow is a widow ito the etire world of your applicatio where you ca see the etire fuctioality of your applicatio at a glace, somewhat like the example show i Figure The user may choose the tools he wats to use or what room he wats to eter, or how he wats to proceed i the applicatio from the metawidow. FIGURE 1.20 A metawidow may show you the etire fuctioality of a applicatio at a glace. I this Poser metawidow, may tools are accessible at oce. 25

24 Part I Desigig Next-Geeratio User Experieces Drawers are collectios of tools or features that ca pop out whe clicked, as show i Figure Drawers ca actually look like drawers or stacked trays, or they ca have expaders that idicate that they exist (although that does t seem like as much fu). FIGURE 1.21 You ca store all kids of hady thigs i drawers. I Poser, the drawers o the right store actors, props, clothig, ad more. Scrapbooks ca be a more ivitig versio of a file folder. A file cabiet full of folders may seem cold ad impersoal, but a scrapbook may seem warm ad comfortable. I which cotaier would you rather place your images, artwork, or whatever the output of your applicatio is? Of course, if your applicatio creates spreadsheets, maybe they do belog i a file folder. Eve more ideas The previous user iterface ideas are just a few that you may wish to try whe usig Bled. But do t stop there Bled makes it easy to push the art of user iterface desig ahead to a etirely ew level, deep ito the ext geeratio of advaced user iterfaces. You may, for example, wat to use Bled to explore: 26

25 Explorig New User Iterface Techiques 1 ZUIs (Zoomig User Iterfaces) described by Jef Raski i his book, The Humae Iterface: New Directios for Desigig Iteractive Systems (Addiso-Wesley, 2000) User iterfaces based o layers of movable filters, such as the Magic Leses proposed at Xerox Parc i the 1990s Collaborative, olie 3D user iterfaces, similar to the Croquet Project, beig developed by Ala Kay (oe of the desigers of the SmallTalk programmig laguage) ad others TIP For more iformatio about the Magic Leses project at Xerox Parc, poit your Web browser to www2.parc.com/istl/projects/magicleses/. To lear about the Croquet Project, see For olie demo movies of ext geeratio Web iterface ad iteractio desigs, visit Max Kiesler s DesigDemo blog at For late-breakig ews o iovative user iterfaces of the future, check out the Nooface blog at Summary You ca use Bled to quickly ad deeply itegrate high quality ad highly iteractive digital media ito your user iterfaces withi Bled you ca add video, aimatio, ad audio, use 3D tools, import bitmap images, create vector graphics, bid to live data sources, ad maipulate text i sophisticated ways to create ext-geeratio Widows applicatios ad Web applicatios. Bled provides you with ready-made WPF cotrols, ad also allows you to radically customize the look of a cotrol while retaiig its fuctios. For example, with Bled you ca embed aimatio, video, ad 3D graphics iside your cotrols. The grid, cavas, stack pael, wrap pael, dock pael, ad border are the most importat paels provided by Bled. Withi these paels you ca est objects, cotrols ad other paels, to create a hierarchy of objects that ca help you to orgaize the complex structure of a user iterface. You ca use Bled s styles ad templates to maitai cosistecy i your desig as well as to make global chages easily. You ca also create ad use resource dictioaries to make your styles ad templates available to other projects, ad to import styles ad templates. Bled is desiged to facilitate collaboratio betwee the artist ad the developer for example, Bled imports a variety of digital media formats, icludig XAML from Expressio Desig, Zam 3D ad other WPF desig applicatios, ad it seamlessly commuicates with Visual Studio. Bled s extesive support for automatic geeratio of XAML user iterface code ad for the advaced capabilities of accelerated 3D graphics ad audio-video playback i cotemporary computer hardware makes its easy ad practical for you to make ew breakthroughs i the user experieces provided by applicatios that you desig for Widows ad for the Web. 27

26