WWDC2003 Session 001

Transcript

Kind: captions Language: en well welcome to session 1 it's not the first session of the day but it's number number one we're going to a lot of fun here we got a lot of stuff to cover and I hope that you learn something really valuable from this in terms of how to create a really complete user experience for your application on Mac OS 10 so I want to begin by sort of defining what the focus is for this session I want the focus to be primarily on best practices so we're going to talk about what are the best practices for you as you bring your application immaculate in to deliver a complete user experience and more specifically what are the what are the actions that you need to start to employ as a developer in the process of developing your product to deliver qualities in a product that are desirable okay so everything we talked about really is about best practices and the areas i want to focus on our areas that i see developers having difficulty with so I want to help clarify some of the issues in these areas and give you some guidance on on delivering a great user experience in these areas and the first is simplifying product installs the second is leveraging some of the technologies that are in Mac OS 10 to deliver common tasks to to present a really consistent user experience in your application third thing we'll talk about is how do you make your application more aqua compliant and I'm give you various some very specific tips and tricks for doing that and then the fourth area we'll talk about its cross-platform design issues that people are running into and I would give you some guidance there all right let's begin with installation you know from the moment a user a customer purchases your product they're dealing you know the first thing to deal with is a package now in some cases where it's software downloads or electronic distribution you're dealing with an electronic package right at disk image or whatever but much software lots of software is delivered through retail stores and through you know traditional shopping venues and so there's a physical package there and the user experience for me in many products although it's a very small part of the product user experience right but there's nothing more discouraging than buying a product Spain 129 bucks or whatever the price is and then fighting with the box or the packaging to get the software out of there I don't know how many times I've opened software that developers have sent me for review or that I've you know had to look at for the Apple Design Awards or whatever you and I'm struggling with this box and the cds fly all over the place when I finally figure out how to open the plastic you know inserts or whatever it is and so I want to encourage you first of all make your snake your packaging easy to open secondly make it attractive on the store shelf thirdly clearly indicate the system requirements there's nothing more frustrating i think for users to go to the store look for software for their new computer or for their older macintosh and not be clear you know for it to not be clear for them to know which product runs on their machine so make sure that your box clearly communicates with system requirements are there are required and also they'll try to grow your market by basically going well I think it'll run on every Macintosh if it doesn't run on some of the lower end Macintoshes make sure that that's clearly defined and that you indicate sort of what the best or recommended system requirements are believe it or not their products out there that are that are that are not clearly communicating these things and last thing is and sure that users have everything they need to get started what think about you know your users what is it that they need to have when they open the box to get the product going in many cases not much but in many other cases what I'm seeing is I open the package and I don't get a lot of instructions on how to get going with the product but I get a lot of marketing I get coupons through this that and the other thing from third parties and I personally I find that annoying but you know think about what your users want and I would recommend that that's something you might want to avoid all right software distribution so we talked about physical packaging but there's electronic packaging right and in many cases that's how you distribute software over the internet and software distribution should be done on Mac os10 using a internet enable disk image they are self-cleaning they do the right thing with Safari Safari downloads them deep mounts them on the desktop and takes care of everything for the user so a lot of the the hassles with downloading stuff off the internet and then having to figure out which uncompressed file you know I need to deal with next is taken away with Internet naval disk images talking about software downloads there are two areas where you can do best practices or apply best practices and that relates to avoid compressing the compressed right how many of you has experienced this you're downloading a piece of software and you pull something off the internet and it's a compressed file and you open that up and there's another compressed file within it and even beyond that I've seen just the other day someone showed me a great example of where it's just senseless multi-step stuff like that where you've got compressed files within compressed files and compressed files and fact I went to a very high profile printing manufacturer recently to download a device driver for the printer or driver for the printer that I just gotten and the user experience sort of went downhill from the get-go I found the driver okay and that was great so the web design for the developer was fine but as I started to as I found the driver and downloaded it the driver name of the file that i was down leaving had nothing to do with the printer model that i was hoping to downloaded for so that was the first thing it was like I wasn't even sure I was downloading the right file the next thing that came was a bin hex file and so I opened that up and then I got a self-extracting archive on that so I you know self extracted that I get a disk image right i opened the disk image now there's a package which is ok but after three or four steps like this and so I ran the installer and I thing at Santa Kate that's okay I understand the syndication is required in some cases but you know through the whole problem minutes a register and I cystic a dongle on there no I didn't have a stick a dongle on it but that was the case in another product that I just thought I'd throw it on here but you get the point right make sure that from the get-go the experience is great for your users a lot of people think about user interface design in terms of the controls that they put on screen and the workflow for the user once the app is up and running but I think there's a lot that goes on before that that is equally important all right so we've got the software now whether it's out of a package or it's you know software distributors downloaded and now so that now we're into the installation process and you know the guidance I would have for you is make this as painless as possible right allow users to decide the install location I don't want my installer to decide where the install location goes are where the install location is I want to be able to decide that for myself particularly in the case of application in some other cases where you're putting a driver in certain places system it's different but I'm talking about application software make sure that the user can decide where it goes avoid unnecessary authentication don't just require the user to authenticate just for the fun of it okay report only rasper authentication if you're installing outside of the current logged in users domain and lastly avoid custom installers the best way to go with installation for an application of Mac OS 10 out of the box if possible if the sonication is that our card is a drag install drag install enables you to to put a background image on the on the folder and communicate some things to your users about what they can do with this you know where it needs to go if there is some specific location it needs to go you can do some branding there it's very straightforward and it takes advantage of a technology I'm a close thing called bundling if you're not familiar with bundling check out the system overview documentation but bundling basically allows you to take all of the magic and and you know required files from your applications the user will never interact with stick them inside of a folder and then set a bit for the finder so that folders treated as a single icon and a single entity and from the users point of view it's great because all of the complexity of your application is hidden for them using its smaller if you have to if dragons tall doesn't cut it using installer but not a custom one here we've got one that completely is non-standard for aqua it doesn't look anything like aqua in fact instead opted for the mac OS 10 installer which ships as part of every every mac OS 10 system and you can use package maker to build up the packages that you're far too to be installed all right so now we've got the software installed well what next right well there's always a setup and configuration step which is which is at times extremely painful I bought a product I'm your user I bought the product and I've installed this thing and I you know I've got it on my system there's nothing more annoying than being forced to deal with unnecessary configuration and we'll talk a little bit more about some other technologies that are available Mac OS 10 but that enable you to simplify that that's setup process but if there's anything you can do to make the installation more straightforward please do that only ask the user for help when necessary don't bother the user with questions that aren't required at that time many users purchase something quickly they need it to you know insert into a workflow or deliver a get something done and they don't want to be dealing with configuration get users up and running quickly so for the installation here the best practices for installation our focus on excellence in packaging deal with you know provide system it's just some requirements where possible or always sorry make sure the package is easy open make sure it's attractive so that you can steal sales away from the competition all those kind of things provide simple straightforward installations and get your users up and running that's the key I think with installation all right interaction so user interface design the science of human-computer action kind of breaks down into two disciplines first discipline is interaction design it's all about workflow it's all about how how many clicks does it take to accomplish a particular action or task inside of a product the second area of discipline is is visual design the aesthetics of something on screen so let's talk about interaction first of all and in this section I want to talk about some technologies that you should think about adopting in your Mac os10 product to facilitate or make more consistent deliver consistent user experience for a lot of the common tasks that you users will be faced with first is you've heard you're hurting hearing a recurring theme I think today address books framework it's a great technology built into back was 10 that basically provides system-wide contact management if your application deals with anything like phone numbers email addresses fax numbers addresses people names whatever whatever information is associated with a contact it should be built upon the address book the address book framework address book the application is just a client of the framework your application to can be just like address book the application and can take advantage of the address book database tied in with that is the framework is the people picker right we've talked about this i'm not going to review all the Mac os10 State of the Union material by the way but I just want to touch on a few of these technologies if we're talking about Adams books framework that people picker is now available to carbon Coco enabled your application to provide a very consistent you I basically it's a system that provides the UI for users to pick the contacts that your applications dealing with or that they need to deal with while we're on the topic of Pickers there's the font picker as well if your app allows users to choose fonts or glyph characteristics let them choose it through the font picker don't roll your own UI around this functionality and then the color picker same thing if your application provides for the ability to pick colors this is where you need to go this where users need to go and the advantage is taken of using these technologies for your users is that users get familiar with doing this in one application and they automatically can take that experience and and leverage it in your inside of your application because it's just the same all right search get great technology to build your application upon if you're doing doing anything related to searching retrieving or summarizing documents so there's a session later on this week related to search get in detail about how to take advantage of this engine this core engine and something you should think about putting in your application servers are doing searching for stuff and we provide the UI on this or actually no sorry this is where we use it in the system you saw these slides in the macro sense state of the union address book ical finder font book right so we're using it all over the place and you can too because we give you the UI for this right the rounded search field is being introduced with panther it's only for searching continue using the square rectangular search via edit field for all other standard text stuff and then the drop down menu off of this allows you to specify the scopes for your search alright Apple help another technology that you can leverage to deliver a really consistent experience for reviewing online documentation the cool thing about help and we'll talk about this more again later on this week the cool thing about help is that it's built on WebKit so there's tremendous important performance improvements this year in Panther and Apple helps allows you to put your help content on remote servers so even though your development may have finished and you've gone up to production of your CDs your help teams can continue to finalize the help content and store it on remote servers that users will actually access automatically once they once they start running your your your help through help viewer so Apple help us for user assistance rendezvous we're talking about setup right setup and configuration are critical that they be as simplified as as as much as possible rendezvous is one of those technologies that we've talked about a fair bit today and last year as well but this technology enables you to auto configure and detect IP devices that are out there that makes might work with your product so leverage rendezvous could take two to take your users take away from the users the need to type in an IP address if your application today requires users to type in IP addresses to get up and running then you should be seriously been looking at the rendezvous and figuring about how that can help you get away from forcing users to do that universal access building on the accessibility API is that are built into Mac os10 using standard system controls you can deliver your product and deliver a very consistent user experience to users who are in many ways disabled or a variety of ways disabled so it'll also help your product the section 508 compliant and lastly Mac OS 10 provides a lot of international technologies your application should be Unicode based so that all customers when worldwide markets can take advantage of the functionality of your product provides alright so on in we're still on the topic of interaction which is right the workflow of the application and there's a critical component to this to this part of the design of your product that often is overlooked and that is feedback in communication how do you convey information back to your users well this is not the way to do it right it's important to report errors but it's really critical that if you do report an area that you say something useful to the user here's a sample alert dialog from an application on Mac OS 10 great application actually and thank you the developer brought it to the platform but in this particular case I want to use this as an example to point out some of the errors that I see other developers making as well so here we've got a standard dialogue that that talks about an air conditioned and basically asked two questions do you want to import the structure yes and then the yes button is yes continue so at least it should have been yes import or do you want to display the text no no cancel is it no display the text or no cancel I don't know I'm confused better way to do this oh not to mention the fact that there's a wrong icon so when you're doing alerts in your application make sure to use standard alert calls to deliver a consistent appearance for your alerts if you are doing them manually the alerts manually make sure that the icon that's displayed is your application icon and only in the case where there's destructive you know some destruction of data that's going to occur do you want too bad you with a caution icon which is a small yield sign alright so the right way to report errors is basically through this example from from the finder so what's right about this well first of all a good a good error message has three components first of all what happened in this case the idisk cannot be accessed the second element is why did it happen well it's because the user didn't have a dot Mac member name and password in system preferences okay so there's an error what happened why did it happen and the third component is what can you use or do about it and that's typically in the smaller text and then directly associated with the button that the user would would pick to to actually solve the problem so three important parts to an error message what happened why did it happen what can use or do about it and finally notice the application icon that showed up in this case alright then finally on the topic of interaction I would just let me leave a few tips of things that I pass on to a lot of developers as I meet with them and review their products first of all I think it's critical that no matter what audience you're focused at whether it's an enterprise professional enterprise IT person whether it's a consumer level I Mac user sort of entry level I Mac user doesn't matter what your audience is it's important that your product delivers solutions and not just be a container for features what's great about I photo and and iTunes and I movie etc it's not so much that there are full featured applications they do everything that every user would possibly want in every market segment it's that what they do they do extremely well and they typically do the things that most people want to do your application can be the same it doesn't have to do everything necessarily but what it does it needs to do very very well and that's all about interaction design it needs to move the lead the user through the task at hand and these are these are hard hard problems to solve it's important that you know your user don't just many developers are seeking as big a market share as possible and are trying to aim you know pluck a feature from here for these users and sticking another feature over here for this crowd and oh hey we've got a sales opportunity over here so let's throw in this and that the other feature and the problem is that at the end of that you get product bloat and really too in many cases there's nobody that's kind of overseeing the overall user experience of that product how do all those features operate together where does the how does the data you know how is the data viewed and interacted with and these are these are difficult things to solve but it's something that needs to be done so make sure that you know your user target your products at a very specific market that way you can tune the product to that markets needs and the Mart that markets workflow know your application understand exactly what your application was designed to do and don't kabul on extra features for a particular market segment that really don't match what your application is capable of doing avoid crowding toolbars toolbars in mac OS 10 you'll see in the finder for example have there are shortcuts to things like applications home you know documents that sort of thing and those are quick shortcuts to things that are multiple clicks away your toolbar should really be shortcuts the functionality in your application that your users might want provide things in toolbars that enable users to get at to sort of make visible things in your toolbars that users might not necessarily but that once they do use it salt solves a lot of save a lot of time for them dill put things in tool bars that have keyboard shortcuts already associated with them you're going to overcrowd your toolbars and it's a lot easier for a user to learn a short keyboard shortcut in many cases and they already know many of them then to populate you know create an icon for that that's yet different from another icon for say for example or new from any other application so new open save print cut copy paste all of those things that have standard keyboard shortcuts they don't need icons and menu bars and then in the process of developing simplify your product work out the best you I you believe as thick is is is required and then simplify again it's a difficult thing to do but focus on your users know your users know what your application can do and aim towards that all right so best practices for interaction leverage relevant technologies just went through a kind of a laundry list of some relevant technologies in for some of your applications but choose the best technologies for the customers you're going after and based upon what your application does take advantage of what's already in the system to deliver a consistent user experience for common tasks that users are going to be faced across a multitude of applications what they know from one application they can then apply to yours report errors properly and deliver solutions not just features all right so I said that human computer interaction is kind of or user interface design is broken is it sort of two disciplines right interaction design visual design and I'd like to take some time now to talk about the tips and tricks for delivering a really great layout or aqua can plug delivering great aqua compliance in your application so it's critical from that your application focus on clean design as you work out the UI and the appearance of your product on screen it's it's it's highly important that you focus on cleanliness and space and room so that people can find what they're looking for a cluttered interface is very hard to navigate it's hard to find what I'm looking for when stuff isn't related or it's not grouped or it's laid out poorly rather take something like this and when you apply the layout guidelines to get something that's a lot cleaner and much more appealing to look at and if you do this kind of exercise across your whole application that the effect is dramatic you don't need to add a single feature of your product but just clean up the UI if it's already on mek'leth pen and you'll have a brand new product so let's talk about how to do that and to do that I want to take an example dialogue let's call it our patient and we're going to go through the process of operating on this patient to provide a facelift and we're going to end up with this so we're going to go from what's on the left we're going to transition to the right I want to talk through various through the exact steps that we went through to get that from one from the start to finish first of all button placement I see this over and over and over a violation of this most basic Macintosh you I guideline action buttons go in the bottom right corner they're spaced by a specific amount of spacing and if you don't get that exactly right that's okay but it's important that there that the castle is to the left of the right of the ok button I'm sorry it's important that the ok button is okay capitulo capitulo que not okay or hunky-dory or you know something like that going to use orange in the next series of slides to highlight areas that are white space or that are you know focal points for the slide so here we're using white space to delineate to create natural dividers between the different groupings on the dialogue so we don't need lines we don't need hard physical lines we can just use white space to accomplish that it's important to group related items now in the dialog that we saw earlier in the in the or patient dialogues there was group boxes that were used and in mac OS 10 i'll talk about group boxes in panther but group boxes are great for grouping things together but in many cases it's not it's not necessary to use a group box per se Mac os10 or in aqua we introduced this idea that you take a group box and eliminate the sides and the bottom and you could just use the top of the group box to group things together so here we're doing that basically we got rid of the group boxing solutely what that does it just kind of lightens the UI and in many cases white space as a divider is perfectly sufficient for creating you know putting together what we want if you're going to do that simple top divider which is the group title and then the single horizontal line make sure that the horizontal line is aligned with the baseline of the group label so Mac listen provides for the ability to group related items in the by using white space or the group the grouping title and line but also in passer we've introduced the group box and the group box is not something that we've you know the issue we had with the group box historically was that it was these hard black lines around the edge and until we solved that appearance issue we really weren't pushing group boxes so if you want to continue using group boxes go right ahead they're available in Panther but they now have an etched in appearance and have a much much finer appearance in Mac OS 10 Panther all right well how do you deal with alignment with alignment of objects on screen well there are some basic tips that that will roll into the human interface guidelines but that I want to talk to you about today the first thing to remember is in a dialog box for example or whether it's a modeless dialogue or whether it's a sheet in any window that's got labels long set of controls make sure that you right align the labels along the colons if they're stacked vertically for example the next thing is you want to left align all of the controls that are labeled by those labels and then in you know in most cases where you have a bunch of stacked objects we've got controls that are labeled and they're stacked on top of each other it's it's sufficient and it looks good to extend all of those controls to be the same width now that that's not always the case and there's no it's very difficult to roll out very hard and fast guidelines for some of this stuff in this particular case there are some pop-up menus here that may have in the case where they were numeric maybe there would be a specific length to that number that could be put in there and it wouldn't make sense for that pop-up menu to be you know really wide so moving the pop-up menu itself to be shorter would be fine but what is very what provides a very cluttered appearance is when the width of controls in a bunch of stocks items are kind of going in and out in and out in and out it actually looks a lot better when stuff is aligned on the equally on each side okay there's another question that comes up and that is well okay if I've got a group of radio buttons for example that have child objects you know when I enable or disable one of the radio buttons the child elements enable or disable at least that's the way it's supposed to work if options aren't available to you to users the question is how do you align the items that are children items and wherever possible continue that alignment of colin's for all the labels across the dialog and make sure that the label of the child object doesn't extend to the left beyond the edge to the you know the edge of the left of the parent label understand so the diagram there tried to diagram this and hopefully that communicates what we want here there's this other concept in aqua which is was misunderstood when we first introduced talk when that was this idea that people thought everything in aqua was centered well that's clearly not the case what it is is that things are Center equalized so within a panel with an assistant prep pain or within a dialog box or a sheet or a tab a tab pain take all of the concepts with that tab pain follow the guidelines we just talked about aligning labels and aligning objects and all that sort of stuff and then create sort of an invisible box around it and center all of that stuff inside of the pain itself so in this particular example you've got the center line going down the center of the object and then the dotted line it's kind of the frame the invisible frame that's there here's another example that's not related to our current patient but just another a dialogue that I showed earlier which shows the same exact same idea right you've got the content of this pain centered within the within the within the area of the dialog box ok so what a transformation I mean it's a basic thing white space alignment of objects some symmetry introduced and there's a major transition transformation that takes place and if you can do this all of the dialog boxes or interface elements in your application the app will look really really great another thing that I see in the as I work with developers to help them create applications that look better I'm not gonna stand easier to use etc is is just poor use of labels labels tend to be replicated across a dialog box or there's lots of redundancy in the text on a dialog and one great exercise once you're you know in the development cycle at some point is to get a technical writer from your company or get somebody is good with with the English with the language that you're shipping your product in to look at the UI and make sure that the labels aren't highly repetitive and that you're not you know over using certain words again and again again here's a case where we've got a dollar but from a product shipping on Mac os10 where the word argument or arg is used like eight or nine times anytime you see a word used over and over and over in a button label for example the question you should ask yourself is well wait a second are those if they all relate to the same object and I need to put the object name in the button then maybe they're not closely you know position they're not close enough they're not positioned close enough to the to the object or whatever it is that they affect another thing that I see a lot is repeating menu items new layer delete layer you know print layer save layer whatever layer and sometimes those repeating items aren't in a menu called layer if they've got enough of them they could actually move maybe into a menu called layer and then you could just have new print save or where I mean those aren't necessarily things you do with a layer but you get my point if there's repeating object think about whether the UI is is communicating enough about what those objects are those buttons do and you can often eliminate a lot of this redundancy and repetition so another problem here is that the the title of the window is is not very useful the RV wizard dialog there's room on this dialog box for it's actually an assistant supposed to help me through the process of setting up something that's the software is going to do but the difficulty here is that there's there's an area for help text there's no helpful tax there it's basically just yet another repetition the same thing I need you know you the user need to put in our argument or something below if you're going to provide help text make sure that's helpful so if we clean this thing up and apply the same guidelines we talked about previously we get something that's that's quite substantially changed so we've got better we've removed the duplication on labeled just got new edit removed we've got a better title on the window now you know the better title means something in the context of what this application does but make sure that the titles of your dialog boxes have meaning in the context of your application and just let me diverge for a minute and and go down a small side road here one of the one of the most the first guidelines we ever published on the Macintosh back in you know the first days that it's still true today is the fact that the title of a dialog box should be the same text as the menu item text that brings that dialog box up so if there's a menu item that says preferences dot dot dot it should bring up a preferences dialog a dialogue that's titled preferences it shouldn't bring up something else that says you know application setup configuration options helpful text you can't read it buttons at the bottom the navigation standard navigation forward back buttons etc all right and in in the chapter of visual design there's there's always the topic of using standard controls and appearance and why this is critical is because as you saw in the Mac os10 state of the union right Scott Forstall showed you how we've been tuning aqua and we're going to continue to do that from one revision to the next if you are using standard system controls you're going to pick up those changes automatically with no extra effort on your part if you're rolling your own it means every time you've got a catch you've got to get back in sync with what we're doing if you can even simulate some of the things that we might do so it's important to use Center system controls for that reason the other reason is you get things for free like screen readers just work if it's a standard system control and a variety of other benefits so let's talk about using some controls in appearance you saw that with panther we've rolled out three different types of controls or three different sizes now and this was based on developer feedback primarily for high-end cad/cam products and 3d 3d modeling tools that have got a ton of you I and they want to fit it into a very small amount of space on screen we introduced many controls be careful how you use these what we don't want to see is standard dialogues and standard sheets within your application using many controls if something is modal like a standard you know modal dialogue or a sheet where the user is focused on what's going on in that sheet there's no reason to use small controls or many controls standard size control is perfectly acceptable because it doesn't matter how big that cheater or dialog box is because the users focused on what they're doing there it's a message I've given over and over at wwc don't mix the sizes of controls don't use small texts with big controls or big controls of small text etc match everything but the mini control is pretty exciting I think for first time up and coming application and so as you saw before you can take a pallet on screen you know utility window that your application might use when you use the mini controls you get something that's significantly smaller which is really great and the difference in sizes is there see the problem with not using system controls in appearance is not only you know you not get things for free but you basically look like a freak in some cases okay here's an application shipping on 10 today that just is totally non-standard what's wrong with it well let's see non-standard labels why the blue background I mean if you really want to emphasize the labels maybe maybe bold it but even in that case I would I would hesitate to do that non-standard display font Geneva 9 being used across the board here lucida grande is the display font by default on Mac OS 10 that you should be using its antialiased looks great different sizes what else is wrong well non-standard list background lifts on Mac OS 10 the scrolling areas of texts have a white background they don't have the corduroy pinstriping misplaced buttons they're misplaced in the cut in the context of how this application works and I don't want to take the time to to speak to exactly what you know how the app works but suffice it to say it's a accounting product that I have to set up my turn of accounts that I got to put in user passwords and access to different menu items and it's just I have to go through this tremendous highly complex configuration setup process to get this thing even up and running and it's it's just crazy on the topic of system controls the appearance is one more thing what about metal alright so here's the finder new Finder right itunes ical address book nail nails not metal anymore why not well the guidelines are as follows metal is to be used with care it's it is absolutely for digital digital lifestyle digital hub related applications so you know itunes for the mp3 players I photo for digital cameras iMovie for video cameras that's anything fitting into the digital hub can be metal if your application fits in digital hub it can be metal address book actually is metal because it links to a cell phone or its simulation of a real world device so calculator and Panther is metal DVD player is metal they simulate real-world devices and finder is mental why is finder metal Finder is metal huh just relax finders metal because metal provides a great material it's a heavy enough material that when you've got playlist type functionality it enables you to visually separate these related lists of content and you'll see as you mock up your own applications notice that the playlist applications that Apple has are using metal and there's very good reason there hopefully you'll also notice that you install Panther that the a lot more consistency in terms of how we're using metal mail is no longer metal mail is a real standard aqua application for example so layout and appearance what are the best practices for this area of of the design of your product focus on clean design it really matters from the get-go when I open the package and start running the piece of piece of software now I'm you know I mean this is my job so I look at this kind of stuff but products that are that are messy then have a cluttered UI and that are poorly designed visually make me feel like the code quality is of equal like the code is of equal quality don't get your code judge based on the appearance of the application it's like anything in our world right we buy anything and if it's if it looks crummy or you know doesn't look high quality then we start to wonder whether the product actually does what the vendor is claiming it does follow the Aqua layout guidelines we don't publish these numbers for nothing we've thought long and hard about these things use interface builder and if you're not nib based yet you should start making that transition to being nib based nibs are the files that interface builder produces if you're not nib base and want to and want to continue doing what you're currently doing then at least switch an interface builder to design the UI and then take out the numbers from there but my recommendation would be switched to interface builder and start being nib based it's available carbonized support for app get just fix it up for free in cocoa right use standard system controls and appearance is a lot of benefits there and don't abuse metal they're good guidelines out there we're going to publish those and please stick with them so finally what finally the last area for best practices is cross-platform design and this is the thing there is a statement that I run up against a fair bit because there's a lot of software coming to mac OS 10 from other platforms well you see John I can't we can't really do it that way because you know the UI needs to be exactly the same across all the platforms that are product on time well it's a myth it's basically not it's just not true it's the same thing as saying that you know one size fits all well that's not the case it's the same thing as trying to dress for two types of weather try to wear your snowboarding you know outfit when you go windsurfing it doesn't cut it you cannot be doing the same thing in both different places both places are in different weather conditions you can't dress for all weather conditions so for example here's a developer that has chosen to go their own way and not deliver a mac OS 10 compliant appearance well it ain't aqua and it isn't windows either wrong wardrobe right you've got a mac OS 10 application with buttons that are clipped at the bottom which is inexcusable because that's just it to me that says here's fit and finish that was just left on the table right there's no polish was applied here and also we've got a tree diagram you know the hierarchy of files here that just is straight off of a pc and it might work on windows and that's fine because that's the way that the appearance is on another platform or there's maybe another you know OS that that appearance is accessible on but for a mac user who's navigating a hierarchical diagram like that that's not their standards expected appearance they're expecting something like list view and finder here's something dressed for failure taking em di multiple document interface and moving it on a Mac os10 Mackel has 10 users expect and many many of you are probably working with to monitor desktops right you've got two systems connected or two monitors on your machine you're moving windows from one to the other you're the limits of windows movement are basically you know the size of your desktop with em di while it's supported on mac OS 10 through the Java interface primarily this is who I'm seeing doing this while it's supported for compatibility with Java it's just not a behavior that's consistent with the overall user experience of Mac OS 10 so the proper appearance for this is don't constrain you know docking windows to some parent window paradise but make sure your docking windows just live on the desktop the parent window is the desktop right let users move them around and answer leave them with other applications that's how the window layering model works the macula spin all right close but yet so far I mean you know aqua widgets are the right text but my soul I have no idea what I'm supposed to do here I spend all my time reading the labels in this craft pain and I don't know what I'm supposed to do or why even I'm asked asked for these things we get back to setup and configuration right make sure only ask you uses for things that you absolutely need to know from them that you cannot figure out yourself you know your users you know what they're trying to accomplish and what their workflow is and you can you know what your application is capable of doing make intelligent choices for the user don't let them don't force the user to to do that one more thing on the cross box on topics filename extensions great way to ensure compatibility between files between multiple os's right users and heterogeneous environments are moving documents back and forth Mac os10 fits into that world a whole lot better than earlier versions of Mac OS did what does that mean for you the developer a couple things first of all the safe panel has a hide extension checkbox that the system provides for you make sure you're taking advantage of launch services api's to do the right thing the system will set or hide that checkbox based on what the user types basically the rule for filename extensions in Mac OS 10 is what you type is what you see if you type an extension you'll see an extension if you don't type an extension you'll never see the file extension okay and it's on a per file basis so as a result of that the choice is in the user's hand therefore make sure that you show the proper display name for a file in your UI whether it's the document title or whether it's some you know status dialog box that shows status or information about a document or what it would have you anything any UI that shows information about a document should show the display name there's a set of a Piz Mac os10 called launch services and you can say hey launch services with this file system object you know file on system what to display name and launch services will know whether the extension should be shown or not and just passed you the right string back so here's a file that has no extension on it or at least that's not visible and here's the same file with the extension being shown so the user typed it one way or use detected the other way make sure your application respects that because that's what the user wanted so best practices for cross-platform design a lot of things be consistent yet platform adaptive so what users really want is the same functionality in the same locations but they want the system appearance from the platform that they're running on so in other words it's not that they want the press panel the Preferences dialog to look exactly like it does on some other platform they want the same options to be available in the preference dialogue and they want them to be in the same tabs for example provide identical functionality between the two outs between the platforms don't deliver an inferior product on Mac os10 their stuff available in Mac OS 10 now that can enable you to take your product to to a whole new level in terms of overall functionality and connectivity and and user experience deliver a plot the platform appropriate appearance make sure you're leveraging standard system controls right to get the Aqua appearance look and feel platform behaviors for example drag and drop drag and drop on back OS works a certain way make sure that your application fits into that world and it accepts a drag from the desktop if that's appropriate for it to do that given the workflow years is might have leverage platform strength wherever possible take advantage of really cool technologies on Mac OS 10 some of them don't relate to user experience but many do if you're in education higher ed there's some good reasons for using text we have a great synthesizer a Mac West using speech sorry we have a great synthesizer in Mac OS 10 that can speak back text and save your application from having to store digital audio you can reduce the size of your footprint on a CD for example and speak back text in a very intelligible voice our other technologies address book don't write your own met you know contact management system leverage address book so leverage the relevant technologies and platforms strengths and brace filename extensions and show the display name and lastly avoid delivering a lowest common denominator user experience the problem that I see in many cases with these with cross-platform applications is they're not leveraging platform strengths and and yeah I'm standing up here for Apple encouraging you to leverage platform strengths from from Mac OS 10 but the same is true for windows if you're delivering on mac and windows if you deliver our lowest common plat you know common denominator user experience your Windows users are going to suffer as well so do what you can with the architecture of your product to take advantage of the strengths that are on the platform and deliver what the users on that platform really want finally where do you go for more resources here well a really great place to go and remember is developer.apple.com / ue which is the user experience portal there's links to piles of information about address book and speech and health technologies etc there's some great links to stories of peers of yours who have decided to go out go out you know the extra mile and pull out all the stops and take full advantage of aqua and their stories tell about the experience and their learning and how it affected their business positively and lots of other great resources there secondly always consult the human interface guidelines we've got a new version coming for Panther and it's going to include a lot of stuff I've talked about today as well as you know as we figure out the fine details of Panther will include a lot of that information as it's relevant for you another thing that I didn't talk about but that relates to the visual appearance of your application is the icon design what our toolbar icons look like what is your application the application icon itself the one that sits in the dock what does that look like does it fit into the world of necklace 10 what are your document icons look like a lot of these things need to be redone or done in the first place for mac OS 10 and in many cases developers don't have the resources in to do that if that's your case there are some great resources that are linked to off of the user experience portal that of companies that can help you do this one of them is icon factory they're here on site I think today I don't know if the other companies are if they are feel free to stop in and work with them these guys do great work and their expertise is icon design and visual design their expertise is in programming that's your job but go to the experts for for some of this stuff and lastly work with me take my email address down contact me after the conference I probably do three you I reviews a week which is where I sit down with developers for an hour or up to a whole day depending on on what my schedule allows and I can look at every menu every dialog box every docking window every aspect of your product from installation packaging through installation to configuration through operation and help you craft that product and make it a whole lot easier to use you know give you guidance services leveraging Mac os10 technologies and applying the layout guidelines and becoming Morocco compliance so take advantage of my ability my availability as well as the fact that on site here this week is a human air face lab so down on this level one there's an HR lab which opens tomorrow it'll be staffed by some of the H I designers at Apple who designed aqua and work on the the interface design for pref pains and different aspects of the operating system these people are highly skilled at sitting down with you and sort of looking at your app and saying hey you know if you change this and that move this there and change this operation it would be a whole lot easier to use or look better or what have you so take advantage of the resources that are available to you if you see me walking in the hall feel free to grab me if i'm not busy i will sit down and take a look at what you've got or contact me after the show and work with me on that front you