User Interface Guidelines

12 Aug 2004 - 5:03pm
10 years ago
10 replies
2155 reads
Schomer, Todd
2004

Hello All,

Anyone have a UI Guidelines spec/doc/site they could share with me? I need
to start documenting guidelines for our apps and could use some help finding
a good template to use as a starting point.

I understand this is usually an internal-type document, but if you guys know
of anything that could be shared, I would appreciate it.

Thanks,
Schomer

Comments

12 Aug 2004 - 8:43pm
Farrell, Bernard
2004

There are some publicly available ones that may provide a starting point. Though they go into far more detail than you probably want.

Apple. http://developer.apple.com/documentation/UserExperience/Aqua-date.html
Java. http://java.sun.com/products/jlf/ed2/book/
Eclipse. http://www.eclipse.org/articles/Article-UI-Guidelines/Contents.html
Windows user experience. http://msdn.microsoft.com/library/default.asp?URL=/library/books/winguide/ch00a.htm

Joel on Software has a related topic at http://discuss.fogcreek.com/joelonsoftware/default.asp?cmd=show&ixPost=141824

Adobe, Macromedia and others have similar documents and I've got several in hard copy form that go back to the mid 1980s. None of these is perfect, but any might be a good starting point.

Before you start, you should decide whether your target audience is designers, developers, tech pubs, etc. That will affect the details in the document.

Good luck,

Bernard
-----Original Message-----
From: discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com on behalf of Schomer, Todd
Sent: Thu 8/12/2004 6:03 PM
To: 'id-discuss'
Subject: [ID Discuss] User Interface Guidelines

Hello All,

Anyone have a UI Guidelines spec/doc/site they could share with me? I need
to start documenting guidelines for our apps and could use some help finding
a good template to use as a starting point.

I understand this is usually an internal-type document, but if you guys know
of anything that could be shared, I would appreciate it.

Thanks,
Schomer

13 Aug 2004 - 5:10am
pabini
2004

Hi Todd

The best, most comprehensive example of a Web style guide I've seen online
is on the Oracle Technology Network at:

http://www.oracle.com/technology/tech/blaf/specs/index.html#topoftoc

BTW... This includes a specification for side-by-side lists with buttons to
move items between them. It's called "Shuttle and Reorder". I recall someone
asking about that interaction model a while back.

Other Web style guides, many of which are excellent:

http://www.att.com/style/

http://www.ge.com/brand/design_library/04_interactive/01_web/

http://usability.gov/guidelines/index.html

http://www.webstyleguide.com/index.html?/contents.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnsiteplan/html/improvingsiteusa.asp

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572

http://www.sapdesignguild.org/resources/resources.asp

http://www.sapdesignguild.org/resources/web_guidelines/index.htm

http://www.cio-dpi.gc.ca/clf-nsi/index_e.asp

http://www.geo.tu-freiberg.de/docs/apple/web_design/web_design.html

http://www.cmu.edu/home/styleguide/

http://www.loc.gov/loc/webstyle/

http://www.fsu.edu/~webguide/

Other platform-specific guidelines that Bernard Farrell didn't mention:

http://developer.apple.com/documentation/UserExperience/UserExperience.html

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaero/html/samplerintro.asp

http://msdn.microsoft.com/Longhorn/understanding/ux/default.aspx

http://docs.sun.com/db/doc/802-2109

http://www.pantek.com/library/programming/GNOME%20Human%20Interface%20Guidelines/

http://wwweic.eri.u-tokyo.ac.jp/computer/manual/lx/SGI_Developer/books/UI_Glines/sgi_html/

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/welcome.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/xpvisualstyles.asp

http://msdn.microsoft.com/library/default.asp?url=/msdnmag/issues/01/11/xpshell/toc.asp

http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/tpcsdk10/html/whitepapers/designguide/tbidxuxguideopener.asp

http://www-1.ibm.com/servers/eserver/iseries/navigator/guidelines/

http://www.palmos.com/dev/support/docs/ui/UIGuide_Front.html

http://www.channelu.com/NeXT/NeXTStep/3.3/nd/UserInterface/01_VisualGuide/VisualGuide.htmld/

http://pcroot.cern.ch/TaligentDocs/TaligentOnline/DocumentRoot/1.0/Docs/books/HI/HI_2.html

http://portal.etsi.org/stfs/hf/STF231.asp

http://www.telstra.com.au/standards/standards/standards_all.cfm

http://developer.openwave.com/htmldoc/32w/devguide/uiguide.html

One of our subscribers, Whitney Quesenbery has written some excellent
articles on creating and using style guides:

http://www.wqusability.com/articles/better-style-guide-paper.pdf

http://www.wqusability.com/articles/better-style-guide-slides.pdf

http://www.stcsig.org/usability/newsletter/0104-consensus.html

Hope this helps.

Pabini Gabriel-Petit
________________________________________

Pabini Gabriel-Petit
Managing Editor
IxDG
Principal & User Experience Architect
Spirit Softworks
www.spiritsoftworks.com

----- Original Message -----
From: "Schomer, Todd" <schomer at extensis.com>
To: "'id-discuss'" <discuss at interactiondesigners.com>
Sent: Thursday, August 12, 2004 3:03 PM
Subject: [ID Discuss] User Interface Guidelines

> Hello All,
>
> Anyone have a UI Guidelines spec/doc/site they could share with me? I need
> to start documenting guidelines for our apps and could use some help
finding
> a good template to use as a starting point.
>
> I understand this is usually an internal-type document, but if you guys
know
> of anything that could be shared, I would appreciate it.
>
> Thanks,
> Schomer
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/

13 Aug 2004 - 10:16am
Svoboda, Eric
2004

Thanks for this. Informative.

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com] On Behalf Of Pabini Gabriel-Petit
Sent: Friday, August 13, 2004 5:11 AM
To: 'id-discuss'; Schomer, Todd
Subject: Re: [ID Discuss] User Interface Guidelines

Hi Todd

The best, most comprehensive example of a Web style guide I've seen
online is on the Oracle Technology Network at:

http://www.oracle.com/technology/tech/blaf/specs/index.html#topoftoc

BTW... This includes a specification for side-by-side lists with buttons
to move items between them. It's called "Shuttle and Reorder". I recall
someone asking about that interaction model a while back.

Other Web style guides, many of which are excellent:

http://www.att.com/style/

http://www.ge.com/brand/design_library/04_interactive/01_web/

http://usability.gov/guidelines/index.html

http://www.webstyleguide.com/index.html?/contents.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnsitep
lan/html/improvingsiteusa.asp

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572

http://www.sapdesignguild.org/resources/resources.asp

http://www.sapdesignguild.org/resources/web_guidelines/index.htm

http://www.cio-dpi.gc.ca/clf-nsi/index_e.asp

http://www.geo.tu-freiberg.de/docs/apple/web_design/web_design.html

http://www.cmu.edu/home/styleguide/

http://www.loc.gov/loc/webstyle/

http://www.fsu.edu/~webguide/

Other platform-specific guidelines that Bernard Farrell didn't mention:

http://developer.apple.com/documentation/UserExperience/UserExperience.h
tml

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHI
Guidelines/index.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaero/
html/samplerintro.asp

http://msdn.microsoft.com/Longhorn/understanding/ux/default.aspx

http://docs.sun.com/db/doc/802-2109

http://www.pantek.com/library/programming/GNOME%20Human%20Interface%20Gu
idelines/

http://wwweic.eri.u-tokyo.ac.jp/computer/manual/lx/SGI_Developer/books/U
I_Glines/sgi_html/

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/h
tml/welcome.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/h
tml/iuiguidelines.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/h
tml/xpvisualstyles.asp

http://msdn.microsoft.com/library/default.asp?url=/msdnmag/issues/01/11/
xpshell/toc.asp

http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/tpcsdk1
0/html/whitepapers/designguide/tbidxuxguideopener.asp

http://www-1.ibm.com/servers/eserver/iseries/navigator/guidelines/

http://www.palmos.com/dev/support/docs/ui/UIGuide_Front.html

http://www.channelu.com/NeXT/NeXTStep/3.3/nd/UserInterface/01_VisualGuid
e/VisualGuide.htmld/

http://pcroot.cern.ch/TaligentDocs/TaligentOnline/DocumentRoot/1.0/Docs/
books/HI/HI_2.html

http://portal.etsi.org/stfs/hf/STF231.asp

http://www.telstra.com.au/standards/standards/standards_all.cfm

http://developer.openwave.com/htmldoc/32w/devguide/uiguide.html

One of our subscribers, Whitney Quesenbery has written some excellent
articles on creating and using style guides:

http://www.wqusability.com/articles/better-style-guide-paper.pdf

http://www.wqusability.com/articles/better-style-guide-slides.pdf

http://www.stcsig.org/usability/newsletter/0104-consensus.html

Hope this helps.

Pabini Gabriel-Petit
________________________________________

Pabini Gabriel-Petit
Managing Editor
IxDG
Principal & User Experience Architect
Spirit Softworks
www.spiritsoftworks.com

----- Original Message -----
From: "Schomer, Todd" <schomer at extensis.com>
To: "'id-discuss'" <discuss at interactiondesigners.com>
Sent: Thursday, August 12, 2004 3:03 PM
Subject: [ID Discuss] User Interface Guidelines

> Hello All,
>
> Anyone have a UI Guidelines spec/doc/site they could share with me? I
need
> to start documenting guidelines for our apps and could use some help
finding
> a good template to use as a starting point.
>
> I understand this is usually an internal-type document, but if you
guys
know
> of anything that could be shared, I would appreciate it.
>
> Thanks,
> Schomer
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/

_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest):
http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements
already)
http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

Confidentiality Warning: This e-mail contains information intended only for the use of the individual or entity named above. If the reader of this e-mail is not the intended recipient or the employee or agent responsible for delivering it to the intended recipient, any dissemination, publication or copying of this e-mail is strictly prohibited. The sender does not accept any responsibility for any loss, disruption or damage to your data or computer system that may occur while using data contained in, or transmitted with, this e-mail. If you have received this e-mail in error, please immediately notify us by return e-mail. Thank you.

13 Aug 2004 - 11:45am
Chad Jennings
2004

The Windows XP Design Guidelines can be found at:
http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx

You must download the .exe file which installs the web site locally, so
you'll have to be on a PC to view. These are primarily visual design
guidelines which cover fonts, colors, layout, etc... Not sure if this
is the type of guidelines you are looking for.

Cheers, Chad

On Aug 12, 2004, at 3:03 PM, Schomer, Todd wrote:

> Hello All,
>
> Anyone have a UI Guidelines spec/doc/site they could share with me? I
> need
> to start documenting guidelines for our apps and could use some help
> finding
> a good template to use as a starting point.
>
> I understand this is usually an internal-type document, but if you
> guys know
> of anything that could be shared, I would appreciate it.
>
> Thanks,
> Schomer
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
> http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
> already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/
>

13 Aug 2004 - 4:05pm
FB'
2004

A similar document from Apple:
<http://developer.apple.com/documentation/UserExperience/Conceptual/OS
XHIGuidelines/XHIGIntro/chapter_1_section_1.html#//apple_ref/doc/uid/T
P30000894>

FB'

----- Original Message -----
From: "Chad Jennings" <chad at frameinteraction.com>

> The Windows XP Design Guidelines can be found at:
> http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx
>
> You must download the .exe file which installs the web site locally,
so
> you'll have to be on a PC to view. These are primarily visual design
> guidelines which cover fonts, colors, layout, etc... Not sure if
this
> is the type of guidelines you are looking for.
>
> Cheers, Chad
>
>
> On Aug 12, 2004, at 3:03 PM, Schomer, Todd wrote:
>
> > Hello All,
> >
> > Anyone have a UI Guidelines spec/doc/site they could share with
me? I
> > need
> > to start documenting guidelines for our apps and could use some
help
> > finding
> > a good template to use as a starting point.
> >
> > I understand this is usually an internal-type document, but if you
> > guys know
> > of anything that could be shared, I would appreciate it.
> >
> > Thanks,
> > Schomer

15 Aug 2004 - 9:50pm
Lilly Irani
2004

I just co-authored a styleguide for a product in my company (it took a
year, but there were many lulls in between).

One thing I recommend that wasn's obvious to me in the beginning is
usability testing the thing by floating it around for people to
actually use in their designs before you call it a done deal. Like
with coding, what you thought you said is sometimes not what you said.

Good luck!

On Fri, 13 Aug 2004 17:05:21 -0400, FB' <fb at intldef.org> wrote:
>
> A similar document from Apple:
> <http://developer.apple.com/documentation/UserExperience/Conceptual/OS
> XHIGuidelines/XHIGIntro/chapter_1_section_1.html#//apple_ref/doc/uid/T
> P30000894>
>
> FB'
>
>
>
>
> ----- Original Message -----
> From: "Chad Jennings" <chad at frameinteraction.com>
>
> > The Windows XP Design Guidelines can be found at:
> > http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx
> >
> > You must download the .exe file which installs the web site locally,
> so
> > you'll have to be on a PC to view. These are primarily visual design
> > guidelines which cover fonts, colors, layout, etc... Not sure if
> this
> > is the type of guidelines you are looking for.
> >
> > Cheers, Chad
> >
> >
> > On Aug 12, 2004, at 3:03 PM, Schomer, Todd wrote:
> >
> > > Hello All,
> > >
> > > Anyone have a UI Guidelines spec/doc/site they could share with
> me? I
> > > need
> > > to start documenting guidelines for our apps and could use some
> help
> > > finding
> > > a good template to use as a starting point.
> > >
> > > I understand this is usually an internal-type document, but if you
> > > guys know
> > > of anything that could be shared, I would appreciate it.
> > >
> > > Thanks,
> > > Schomer
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/
>

15 Aug 2004 - 10:23pm
whitneyq
2010

At 07:50 PM 8/15/2004 -0700, Lilly Irani wrote:
>One thing I recommend that wasn's obvious to me in the beginning is
>usability testing the thing by floating it around for people to
>actually use in their designs before you call it a done deal. Like
>with coding, what you thought you said is sometimes not what you said.

Ah yes, the usability of usability!

It's an important point. I always do some initial mockups (and often work
backwards from those to the style guide), but I always want someone to try
to code from them. I sometimes hit the "but you're expert" wall, but it
rarely takes more than a brief discussion to convince.

In one case, we spent time making sure that all of the details the
developers needed were also included, in a format that made sense in their
development environment.

Besides improving the style guide, there's a real political benefit in that
the people throughout the development process you have worked with are much
more likely to accept - even champion - it.

Whitney Quesenbery
Whitney Interactive Design, LLC
w. www.WQusability.com
e. whitneyq at wqusability.com
p. 908-638-5467

UPA - www.usabilityprofessionals.org
STC Usability SIG: www.stcsig.org/usability

16 Aug 2004 - 12:22pm
erin malone
2004

I couldn't agree more Whitney. I wanted to thank folks for this thread
as it is extremely timely with what I am doing right now. My team at
Yahoo! is building a comprehensive style guide for the yahoo! network
that is including all the brand guidelines as well a robust Pattern
Library built in a internally designed and built CMS. The pointers to
other public sites are invaluable and hopefully when we are through we
will be able to publish outside the Yahoo! walls to share with the
community as well.

One of the things we have been doing though is testing the idea of
patterns, dry-running the templates with the design team as well as
releasing some of the guidelines in draft form for the design team to
try out and then let us know what is working and what isn't so we can
iterate into a final standard or archetype pattern for the company.
With 150 designers and over 50 properties it is a challenge to roll
out a strict set of guidelines without vetting it with the folks on
the ground. What we are doing seems to be working and is also building
up trust which in turn encourages adoption.

erin
director of design, platform
yahoo! user experience design

On Sun, 15 Aug 2004 23:23:13 -0400, Whitney Quesenbery
<wq at sufficiently.com> wrote:
> At 07:50 PM 8/15/2004 -0700, Lilly Irani wrote:
> >One thing I recommend that wasn's obvious to me in the beginning is
> >usability testing the thing by floating it around for people to
> >actually use in their designs before you call it a done deal. Like
> >with coding, what you thought you said is sometimes not what you said.
>
> Ah yes, the usability of usability!
>
> It's an important point. I always do some initial mockups (and often work
> backwards from those to the style guide), but I always want someone to try
> to code from them. I sometimes hit the "but you're expert" wall, but it
> rarely takes more than a brief discussion to convince.
>
> In one case, we spent time making sure that all of the details the
> developers needed were also included, in a format that made sense in their
> development environment.
>
> Besides improving the style guide, there's a real political benefit in that
> the people throughout the development process you have worked with are much
> more likely to accept - even champion - it.
>
> Whitney Quesenbery
> Whitney Interactive Design, LLC
> w. www.WQusability.com
> e. whitneyq at wqusability.com
> p. 908-638-5467
>
> UPA - www.usabilityprofessionals.org
> STC Usability SIG: www.stcsig.org/usability
>

16 Aug 2004 - 1:33pm
vutpakdi
2003

--- Lilly Irani <lilly.irani at gmail.com> wrote:
> One thing I recommend that wasn's obvious to me in the beginning is
> usability testing the thing by floating it around for people to
> actually use in their designs before you call it a done deal. Like
> with coding, what you thought you said is sometimes not what you said.

I'd also add that the "usability" testing shouldn't only cover "can they
find the information that they need," "is the guide well organized," and
"does the style guide say the right thing" sort of questions. The guide
has to be presented in the right fashion and contain the right degree and
type of information that meets the situation to be really usable.

If the organization is very traditional process oriented and fairly
regimented (think International Space Station or Space Shuttle software),
then a fairly detailed and specific guide may be in order.

If the organization is very new to usability and the amount of influence
that you have is low, a considerably looser, lighter, and more graphical
style guide may be in order.

Basically, what we exhort to others: find out what is needed by doing
proper research, design the right thing, and verify.

Ron

=====
============================================================================
Ron Vutpakdi
vutpakdi at acm.org

17 Aug 2004 - 4:35am
DmD (Spider) Lj...
2004

fre 2004-08-13 klockan 00.03 skrev Schomer, Todd:
> Hello All,
>
> Anyone have a UI Guidelines spec/doc/site they could share with me? I need
> to start documenting guidelines for our apps and could use some help finding
> a good template to use as a starting point.

some excellent reading in the other posts, but I'd want to point this
one out as well:

http://developer.gnome.org/projects/gup/hig/
( Recently updated to version 2.0 )

//S

Syndicate content Get the feed