Slashdot Mirror


A Good Style Guide Under the Creative Commons?

eldavojohn writes "I've been charged with making a specific user interface style guide for a suite of software by my employer. I'm not quite sure where to start. So I turned to my favorite search engine only to be brutally disappointed with what is out there to help me. I'm a software developer but have not had any formal training in UI design or look and feel. I'm looking for something more than just "keep it simple, stupid." I'm looking more for something that is specific but not technologically dependent. This doesn't have to be a global standard, merely a document that illustrates how one would effectively describe look and feel. Does anyone know of such a guide either created by an organization, government or company for their own uses — possibly one even released under the creative common license?" In addition to just documentation, what other UI advice can Slashdot readers offer in order to ensure quality development?

33 of 131 comments (clear)

  1. Apple Human Interface Guidelines by Foofoobar · · Score: 5, Informative

    Macintosh develop site has several well put together style guides for software development that you should look at. Check out the Apple Human Interface Guidelines. Apple may not be your cup of tea but they always have good ideas and have a well put together interface and this will DEFINITELY give you a good idea where and how to start.

    --
    This is my sig. There are many like it but this one is mine.
    1. Re:Apple Human Interface Guidelines by JustinOpinion · · Score: 5, Informative

      Since the original poster seems to prefer permissive licensing, he should also check out the GNOME Human Interface Guidelines 2.0. It's an extensive set of best-practices and guidelines, licensed under the GFDL. Thus he can tailor the guidelines to his needs and redistribute them without worrying about copyright issues (another poster suggested setting-up a wiki for his users, which could also work).

      The KDE Usability Guide also has some good material, although at this time it looks much less mature than the GNOME docs.

    2. Re:Apple Human Interface Guidelines by try_anything · · Score: 5, Informative
      OSX, GNOME, and KDE are all very usable environments, but style guides mostly tell you how to achieve consistency with other applications on the platform. If the OP is really asking for a style guide of this kind, he needs to tell us what platform he is developing on. Using an Apple style guide to create a Windows program will result in a less usable design, even if the Apple guidelines are superior to the Windows ones.

      For an introduction to UI design, here are some good resources:

  2. Not really sure what you're looking for, but... by ruyon · · Score: 5, Informative
    How about taking a look at these well-known samples?

    GNOME HIG

    http://library.gnome.org/devel/hig-book/stable/

    Apple's HIG

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

    1. Re:Not really sure what you're looking for, but... by Anonymous Coward · · Score: 2, Interesting

      Not that anyone will ever even see this since the new Slashdot comment system doesn't even show anonymous comments, but...

      The GNOME HIG is, in fact, licensed under the GFDL, which effectively meets the Creative Commons request. It's definitely a good place to start.

      But when using those, remember they're tied to the individual desktop. Things that are standard under GNOME and Apple are reversed under Windows. (For example, Windows always uses "Yes/No/Cancel" while both GNOME and Apple recommend using action verbs. Plus Windows generally places the most used option in the hardest to hit location while GNOME and Apple place it in the easiest to hit.)

      The important part here is that the software should follow the guidelines for the platform it's running on. Not following them will just annoy people using that platform.

      I'm also not sure that's what he's looking for. Those are guidelines for an entire OS and not a software suite. In a software suite, you'd want to make sure that certain workflows are always handled in a similar manner. You also want to make sure icons follow a single art style. For example, a common palette and a common set of icon elements. (Like the envelope in email clients which are often used in the Compose/Reply/Reply All/Forward buttons.) These things are somewhat covered in an OS HIG, but are sort of outside the scope.

      Sadly it appears that very few open source projects actually create such documents.

      And now I send this post to disappear, because apparently anonymous posts aren't worth mentioning, even with a "hidden posts" link.

    2. Re:Not really sure what you're looking for, but... by Chandon+Seldon · · Score: 2, Insightful

      Gnome is consistent and very usable - so their guidelines seem to be working. I'm not sure what your complaint is.

      --
      -- The act of censorship is always worse than whatever is being censored. Always.
    3. Re:Not really sure what you're looking for, but... by trolltalk.com · · Score: 2, Informative

      Gnome is consistent and very usable

      Only with itself ... the order of buttons on dialog boxes is f*cked up. For example, in the GIMP : Create a New Image, the order is [Help] [Reset] [Cancel] [Okay]. Last I looked, this was an LTR (left-to-right) locale. The default action in EVERY other environment is on the left in LTR locales.

      Their rationale for doing it different was 90% ego bloat, 90% stupid (with an 80% overlap).

    4. Re:Not really sure what you're looking for, but... by trolltalk.com · · Score: 2, Interesting

      In GNOME, to accept the most common, you always hit the same location.

      No you don't - the rightmost button is the 2nd, or 3rd, or 4th, or whatever - it varies with the number of buttons.

      Putting the default as FIRST would mean always hitting the same location.

      The right-hand side is the wrong one in LTR locales.

      It isn't "the easiest to hit" unless the window/dialog/whatever is always a fixed size. Otherwise, its position is floating, and it is the last in a series of "N" buttons, instead of the first, requiring you to scan all the previous buttons.

      In contrast, the left-most button, as the first, is the first to be seen in LTR locales, the first to be read, and if its what you're looking for (as the default action) you need go no further.

      Before GUIs, the default action in most apps was almost always the leftmost. All Windows did was copy that. It makes sense.

    5. Re:Not really sure what you're looking for, but... by Chandon+Seldon · · Score: 5, Informative

      For example, in the GIMP : Create a New Image, the order is [Help] [Reset] [Cancel] [Okay]. Last I looked, this was an LTR (left-to-right) locale. The default action in EVERY other environment is on the left in LTR locales.

      Except Windows, where the default action is in the middle (i.e. the hardest to find possible choice):
      Windows Dialog

      Or Mac OS Classic, where it works just like in Gnome:
      Mac Classic Dialog

      Or In Mac OS X, where it works just like in Gnome:
      OS X Dialog

      I can't find a screenshot, but KDE seems to work like Windows.

      I still don't see what the problem is here. There are two common ways of doing it. Mac and Gnome do it one way, Windows and KDE do it the other. *shrug*

      --
      -- The act of censorship is always worse than whatever is being censored. Always.
    6. Re:Not really sure what you're looking for, but... by Ox0065 · · Score: 2, Insightful

      My only comment would be that:

      The introduction of the Gnome HIG brought about substantial stripping of functionality out of gnome.
      It's heavily tailored toward lowest common denominator computing. It does make flexible & robust GUIs.
      They just don't do anything you want.

      ... (^-^)

      --
      thx e
  3. Re:Practical first step by Intron · · Score: 2, Funny

    Then form a review committee and start issuing minutes.

    --
    Intron: the portion of DNA which expresses nothing useful.
  4. Some suggestions by RobBebop · · Score: 4, Informative

    Know the author Ed Tufte.

    Know what HCI stands for.

    Know your audience and let them evaluate Throwaway Prototypes.

    If you are looking for a book to teach you UI design, you are misguided. If you are looking for a Creative Commons and/or Open approach to UI design, register a domain called "Principles of UI Design" and launch a Wiki on it, then license it with the license you desire (but I would recommend CC0).

    If all goes well, this thread will serve as a good starting point for getting ideas/content to populate your new Wiki with.

    --
    Support the 30 Hour Work Week!!!
    1. Re:Some suggestions by Simon80 · · Score: 3, Insightful

      I think the ribbon has been unfairly criticised since it became public. It eliminates the redundancy of having both menus and toolbars with the same commands in them, and makes better use of the space on the screen.

      To be clear, I'm generally a critic of Microsoft, since they can be trusted to act in their own interest no matter how much they try to make it seem otherwise, and I've never used Office 2007 before. Despite that, I disagree with the ribbon bashing bandwagon people seem to want to jump on - there's plenty of legitimate things to criticise about Microsoft, no need to latch onto something that is actually a good idea. Also, this isn't directed at the post I'm replying to specifically, it's more of a generic rant about ribbon bashing.

  5. Your Platform/Toolkit's HIG by Sentry21 · · Score: 2, Funny

    Pretty much every platform (in this case, I'd count GNOME and KDE as 'platforms') will have a set of Human Interface Guidelines that will give advice on how to craft a usable interface that meshes well with native applications and provides a solid user experience. There's no one hard-and-fast style guide, though there are lots of examples of what NOT to do if you Google (see the User Interface Wall of Shame for one).

  6. Wrong question... by pla · · Score: 2, Insightful

    I've been charged with making a specific user interface style guide for a suite of software by my employer. I'm not quite sure where to start

    You don't know where to start because you don't work as a tech writer!

    Tell your tightwad boss to pick someone more suited to the task - Even the weenies in Marketing can probably do the task better than an engineer (unless you just happen to have a background in technical writing, but it sounds like that doesn't fit into your job description/requirements).


    Geeks can do anything - That doesn't always make us the best person for every job even tangentially related to "computers". If you want me to design a website, I can make it do anything HTML supports, but prepare for a color scheme that makes most people's eyes bleed...

    1. Re:Wrong question... by RobBebop · · Score: 3, Interesting

      Tell your tightwad boss to pick someone more suited to the task - Even the weenies in Marketing can probably do the task better than an engineer (unless you just happen to have a background in technical writing, but it sounds like that doesn't fit into your job description/requirements).

      When geeks design a Style Guide, it looks like this. Simple, elegant, uncluttered.

      When the weenies in Marketing design a Style Guide, the audience ends up trying to punch a psychedelic virtual monkey. Please don't suggest anything that would put marketing personnel in a position to produce anything that will guide me, thankyouverymuch.

      --
      Support the 30 Hour Work Week!!!
  7. Testing, testing, testing by Anonymous Coward · · Score: 2, Insightful

    Some of the best input you can get is by giving the software to someone completely unfamiliar to the project, and ask them to accomplish 6 objectives that require them to navigate the application's interface. Ideally, you'll want them to be able to successfully complete those objectives with a minimal amount of time and hassle searching for the proper way to accomplish it. Have them identify trouble spots they ran into (icons confusing, unclear menu structure, etc). After reading over the input of uninitiated testers, you can fine tune your interface to be more intuitive.

    I suffer from the problem when coding that I put menus and icons in places where *I* know where to find them, and that make sense to me. The problem is, I know the code from the ground up, so I know exactly what I'm doing - a huge bias compared to a new user who is trying the application for the first time.

    Essentially, if your computer illiterate mother can figure your menu structure out, you are golden. A lofty goal that you'll probably have to cut some compromises into, but essentially the point is to keep it simple and make sure you account for your target audience.

  8. Have I got a job for you by iliketrash · · Score: 3, Funny

    "I'm a software developer but have not had any formal training in UI design or look and feel."

    That would make you the perfect Microsoft employee.

  9. Just Get An Interaction Design Textbook by Tech+Librarian · · Score: 2, Informative

    I would suggest going out an getting a book on Interaction Design, such as that by Sharp, Rogers, and Preece. If you look over the diagrams and the chapters you should get the gist of it. This book is used in introductory graduate Human-Computer Interaction courses.

  10. A Great Brochure by TrebleJunkie · · Score: 2, Insightful

    A Great Brochure from Humanfactors.org is here:

    http://www.humanfactors.com/downloads/guistandards.pdf

    Page very close attention to page 14. It describes your situation as "Pitfall #4." And it's right.

    --

    Ed R.Zahurak

    You know, oblivion keeps looking better every day.

  11. Curly Brace OK/Cancel by hansamurai · · Score: 2, Interesting

    Choose a curly brace style and stick with it! Oh, this is UI styling we're talking about...

    Try this HCI web comic, I don't think it is updated anymore but there's lots of great archives:

    http://www.ok-cancel.com/

  12. Don't re-invent the wheel by MSTCrow5429 · · Score: 2, Insightful

    Unless the software suite is the only thing the user is going to see, and not the underlying OS or any other software, you should just follow the guidelines for the OS or desktop environment. Otherwise, you get a schizophrenic result that clashes with everything else, leading to user confusion and frustration. If you're designing from scratch, I suggest reading Raskin's "The Humane Interface," and using that as a baseline. Don't read the Apple user guidelines. Unless you're used to a Mac, they don't make sense.

    --
    Slashdot: Playing Favorites Since 1997
  13. Re:Simple rules by eln · · Score: 2, Funny

    And make sure that whatever objet d'art you create doesn't look like too much of a turd. I really don't understand the need for this rule.

    Signed,
    Chester W. Lampworth
    President and CEO
    Amalgamated Manure, Inc.
  14. Re:Hire an artist. by neurosis101 · · Score: 5, Insightful

    I almost never post on /. but seeing this I can NOT pass up.

    Creating a good interface is about FAR more than just pretty pictures. An artist might make it look good, but looking good and being functional are not related in any way, shape or form. I've seen art houses produce UIs that were illogical and violated many basic UI principles but look nice. The worst part is your client will fall in love with the looks without thinking about the damage that is being done.

    If you are going to bring in outside sources, there are art houses that have specific UI design experience. You should make sure you engage one of these. Or come up with a design, then have the art house make it look nice.

    Real UI design is about user cases, apprentice-master relationships, and other things 99.9% of artists don't know anything about.

  15. Start with Facebook... by rueger · · Score: 2, Insightful

    ... and ignore everything that they do.

    Then work with real users and find out what they want the app to do, how they want it to do it, and assess what their knowledge and skills levels are. In all likelihood you are entirely the wrong person to judge what's appropriate for end users.

  16. A Pattern Library for Interaction Design by rRaAnNiI · · Score: 2, Informative

    I strongly recommend this link: http://www.welie.com/

    This is a collection of design patterns for creating UI.

    I was extremely impressed by this work already 8 years ago when it was presented in PLoP2K http://jerry.cs.uiuc.edu/~plop/plop2k/proceedings/proceedings.html but since then it became much much bigger.

  17. Usability Guide by kcurtis · · Score: 3, Informative

    This is not directly a style guide, but a Federal (US) usability guide. http://usability.gov/pdfs/guidelines_book.pdf

    Hopefully this helps.

  18. Re:And what's so wrong with ... by BigJClark · · Score: 2, Insightful


    I dunno, it took over 7million years and the second greatest computer of all time to come up with that answer.

    Doesn't seem overly simple to me.

    quack quack.

    --

    Hi, I Boris. Hear fix bear, yes?
  19. Sun web spec by phfeenikz · · Score: 2, Informative

    My employer recently adopted Sun's standards. They posted them here: http://developers.sun.com/docs/web-app-guidelines/uispec4_0/

  20. I'm not a UI Designer but I play one on TV by sconeu · · Score: 2, Informative

    I'm a software developer but have not had any formal training in UI design or look and feel. I'm looking for something more than just "keep it simple, stupid."

    Then your proper response is, "Are you sure you want me to do this? I have no training in this area."

    And put it in writing as a CYA.

    --
    General Relativity: Space-time tells matter where to go; Matter tells space-time what shape to be.
  21. Done. by wchatam · · Score: 2, Funny

    Everything you need is right here.

  22. Web Design from Scratch by swanton · · Score: 2, Informative

    This is the best website on design that I've found: http://webdesignfromscratch.com/

    For searches like this, don't use Google or other search engines like it. Search people's bookmarks. http://del.icio.us/search/?fr=del_icio_us&p=design&type=all

  23. Do you understand what you're being asked to do? by Riktov · · Score: 3, Insightful

    I have a feeling that 99% of the replies here are misundertanding something crucial. And so is your employer, and so are you. (OK, so it's more likely I'm the one who doesn't understand. But hear me out.)

    First off, what is a style guide?

    Here's how I would define it.

    A style guide is a document which prescribes standards for subjective matters of presentation, which are to be followed for material created within a specific framework. For example, the material might be written articles for publication in a newspaper. Or the material might be programs created to run on an OS, or with a GUI or application framework. Or C language source code written to be read and modified by a programming team.

    A style guide's purpose is to enforce consistency among material created by multiple parties (or one party over multiple sessions). This consistency is for the benefit of the end user, not necessarily the creators. And the style guide is for use by the creators, not the end user

    A style guide governs presentation, not content. Grammar and article length, not viewpoints or what gets discussed and what doesn't. How a pushbutton looks and behaves, not how it gets drawn on the screen. Code indentation and naming, not what the program does.

    A style guide does not prescribe standards that are enforced elsewhere. It doesn't tell writers to properly end their sentences with punctuation, because that's a rule that applies to all writing. It doesn't say that scrollbars in a GUI should not be placed at 45-degree angles, because the GUI API provides no means to do so anyway. It doesn't say that curly braces must be balanced, because the compiler will catch that anyway.

    A style guide is the sole authority on the issues it covers. If an issue within the domain of the style guide is not governed by it, then there is no rule on it.

    A style guide prescribes standards as the preferred choice among various possible options, none of which is objectively correct or incorrect. The standards take the form of "for such-and-such, do it this... way, not that... way. There are some who do it that... way, but we do it this... way because such-and-such."

    A style guide can not be legitimately created by someone who doesn't define the standards in it, and have the authority to decide what to prescribe.

    So, if your employer is asking you to make a UI style guide for their software, there is a basic issue that you haven't explicity made clear:

    Does this software provide a framework for creating material that should conform to some standard? You say you are creating a user-interface style guide, so is it a user-interface creation tool (or something that allows external components with their own user interfaces)? If that's not what your software does, and the user-interface you're referring to is something that your software uses, rather than provides, then your company is in no position to create a style guide (that is, define standards) for it. Whoever created the GUI (Windows? Mac? QT?..) has already done that, and chances are they've published it, and your software engineers have been following it. Any attempted style guide would be merely descriptive, not prescriptive. It would say "for such-and-such, our software does it this way...", possibly even while the actual standards say to do it that... way.

    Now if your software is in fact a UI-creation tool and it's already been created, then allthe content that needs to go into your style guide is already in the heads of, or has already been written by, whoever created the software. You know who to talk to.

    And if the software is UI-creation tool but you're still at the design stage, then what you're being asked to do is actually create the standards, not just write a document. Your employer is asking you, a software engineer with no UI expertise, to define the rules which all of your customers, as software developers, will be mandated to follow, and which will in