- Journal
- Focusing on Text & Details in the HIG
Focusing on Text & Details in the HIG
Submitted by cassidyjames on Mon, 01/16/2012 - 19:28Lately we've been making our way through the Human Interface Guidelines (HIG) reworking old bits and writing new sections. We've been focusing on making the HIG the best it can be, rather than limiting it to what's currently out there. Take a look at the updates that've been made and what's yet to come.
For example, we recently added a few pages to the Text section. In one, Naming Your App, we give tips on how to name your app and describe it to the system. We've updated the related entry, App Launchers, to give examples of good comments for apps to have in their .desktop files. Rather than copying and pasting ones that were already being used, we thought we'd take some time to come up with better ones. Here's what we came up with:
- Maya: Browse and schedule events
- BeatBox: Listen to music and podcasts
- Lingo: Look up definitions
- Postler: Send and receive mail
- Scratch: Edit text files
- Marlin: Browse and manage your files
The idea is for the comment to be a simple, short phrase that begins with a verb and describes the primary use case of the app. As you can see, the descriptions are fairly generic, but give a good sense of what the app is or does.
We've also been putting an even heavier focus on details. For example, there's now a whole page devoted to capitalization. It's not excessive or over-the-top; it's clear and definitive, making a developer's life easier by not forcing them to figure these complex things out on their own. Plus it makes the whole user experience more consistent, something we obviously strive for with elementary. Also be sure to check out the new Writing Style and Language pages.
We've added a whole new section to the HIG titled "User Workflow." Devoted to describing common user interactions, this section focuses on the actual workflow and how an app should behave rather than look. Too often people forger that user experience design is not graphic design. You're not just painting with pixels, you're crafting a whole experience; apps need to behave consistently, not just look consistent.
The next section we'd like to dive into, besides cleaning all of the others up, is the icons section. While we have the Tango guidelines to use as a base, we really feel elementary needs both visual and technical guidelines for excellent iconography that covers app icons, symbolic icons, and everything else.
If you're developing an app, or simply contributing to one, make sure to file bugs against the app if it violates the HIG. The HIG is only effective if apps stick to it, as the inconsistency of some apps following it and others not really defeats the whole purpose. For example, check out this recent bug filed against multiple projects. If you feel something needs addressed in the HIG, let us know and we'll take a look.
What do you think about our recent work on the HIG? Did we miss anything or get something wrong? Let us know in the comments.
I'm truly excited for this to debut. Particularly since I saw a "speed demonstration" on an Ubuntu 11.10 build. Although I want to see better app naming conventions. elementary App names are cool, but it's really hard to search for support for generically-named things (particularly for the less-computer-savvy folks who will need easy support the most).
Glad you guys are giving such attention to the little details that make the elementary experience so enjoyable. I love the simplicity and elegance.
At the risk of comparing elementary to Apple, I must say that I'm becoming increasingly disappointed in Apple's corporate practices. The more I read about working conditions in Chinese factories, etc., the more I want to distance myself from their (admittedly addictive) products. elementary is on par with OS X in terms of elegance, imo, and it's a distro I can feel great about using daily.
Thanks for the fun, and productivity, guys! Keep up the great work. I love it.
Ben
Looks great, but what about Writing Style in other languages? In several languages there are two translations for "You", depending on the relation to the dialog partner. In german e.g "You" can be translated as "Sie", which sounds rather formal or "Du", which is used to speak to friends or people you know well.
same for dutch, "u" for official things and "jij" for friends
I'm not sure, but that'd be up to the translators. I'm sure there are standard conventions in user interface text for those languages.
Off the top of my head, I'd think it'd be informal since that's the style of the text in English (we sue contractions, are friendly and not formal, etc.).
There should probably be guidelines per language. Though English often is formulated informally, in Dutch formal is more common. Also, some terms are common but not known to translators. Xfce for example has a page with Dutch guidelines: http://wiki.xfce.org/translations/team_nl
I'm starting to see "dark apps" like video players and image viewers pop up on the IRC Channel and they don't follow the current HIG. Even though most video apps have their controls on the bottom, I think this is a bad idea because it moves to the area of "well, my app is special and doesn't have to follow the HIG." It also doesn't give the user a consistent experience as the App Menu is in a different place, etc.
There's a reason why its called "Human Interface Guidelines" and not "Human Interface Rules". :)
It would make more sense to design something that makes sense, right?
I should probably preface this with that I absolutely love what the devs are doing with elementary and have the utmost respect for them. With that said, my point is to design something that makes more sense and not to add an unnecessary layer of complexity/inconsistency and I'll use a video player as a prime example of why it shouldn't be a "dark app" which I know hasn't been completely ironed out yet, but I still don't entirely get why dark apps in general are necessary (a simple toolbar I don't think distracts from the content, but not having it prevents the users from accomplishing typical tasks in a *consistent* way).
Even though most video players have their controls on the bottom doesn't mean they should just follow the status quo. I mean music players like BeatBox have their controls on top and seem to reasonably follow the HIG, so why not video players? If someone is using a computer for the first time it would make more sense to have the controls on the top of the app like every other app. I think users could say things like, "I want to share this video on facebook, but wait where's the contractor icon... it's not in the same place as all my other apps and I'm so used to just clicking this icon where it is on every other app..."
I totally understand the difference between "Guidelines" and "Rules," but if people are going to keep saying this app is special, so it doesn't follow the HIG then I think you'll have too much fragmentation. At the end of the day the app won't be designed for elementary (which obviously is fine if that's what the dev wants). I just think what often makes an OS so great is not just the OS, but all the unsupported 3rd party apps that you can use with it especially when they follow the HIG. Hence, perhaps I'm making more of a point and some suggestions regarding "dark apps," but it's just some food for thought... I love you all! :-)
It has been discussed already and we didn't come to a conclusion. It will be brought up again, but not until we actually get some dark apps.
With music players, there is no visual content that the toolbar will detract from. With videos and photos, the videos and photos are the objects you should be focusing on. There's a reason video controls are put on the bottom, because focus should be on the video, and people typically scan things left to right, top to bottom, and the content should be the first thing they see in this case.
As for dark themes, their purpose is to be less distracting, depending on the content. On a video player the normal theme would detract too much from the content. Its like wingpanel, its black because most monitor bevels are black, and will "disappear". Its designed this way because you should only find wingpanel when you're looking for it, same with dark themes.
From the HIG: "[The HIG] will also instill a philosophy that will allow you to decide when it is appropriate to deviate from the Guidelines."
Also, right now dark themes aren't mentioned in the HIG because there are technical limitations preventing us from supporting them. Once they're supported, I'm sure they'll be added. :)
There has to be an exception for some apps which simply wouldn't be useful with the controls in that place. Also Audience is not an official app (and will never be one until this among other things is discussed with the rest of the elementary team).
Overall things do have to follow the HIG, but some can make small exceptions if they really need to.
I hope you guys fix Maya, it doesn't launch for me. It always aborts when i use it.
I'm having the same issue, starting Evolution once helps: https://bugs.launchpad.net/maya/+bug/902930
So Scratch is now a part of elementary, I guess?
The comments in the Journal entry are just good examples, nothing more. Scratch is still considered a community app for the time being.
Regarding the screenshot:
Yo Dawg, we heard you liked the site so we put a site in your site so you can elementaryos.org while you elementaryos.org ;)
Anyway, well done Cassidy. This should help developers make their app fit in more :)
Yeah... I thought that when I put it in but didn't know what else to use. xD