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