Design Process: Current Location “Headline”

This is a bit of the design process behind one line of one settings panel inside IMLocation.

The “Locations” panel controls everything having to do with to locations. The pane’s “headline”, outlined in red, shows what is assumed to be the current location.
The Locations Panel

It reads like “Your current location is home”. It does not say “You are: Home”, or “You are at: Home”, even though that’s shorter, and closer to the familiar “you are here” stickers. “You are at:” is out, because people need to be free to choose whatever names work best for them. Naming a job-location “working” should not turn the headline into nonsense like “You are at: working”. I choose not to go with “you are: …”, because it felt too imperative — like it was dictating what the user was doing. I wanted the copy to say “This is where the program assumes you are”. I’m still not 100% sure that this was the right phrase to use, but it is clear, and it works well enough.

Immediately to the right of the headline is a button, “That’s not where i am…”, which lets the user fix things if the presumed location isn’t where they are. The button is on the same line as the the headline, because I think this makes it a little more clear that the button corrects the current location. Putting it under the headline would separate it from the current location.

I wanted clicking on the headline to select the current location, so it could be edited. This seemed like a very intuitive action to me, but affording it turned out to be surprisingly tricky.

Starting with v0.20, I made the entire headline a giant button, with a different style then the “That’s not where I am…” button:
Current Location v0.20

This showed that it was clickable, but looked kind of ugly, and testing showed it wasn’t clear to all users what clicking it did (“Why is that a button?”).

To clarify, I made only phrases that meant “the current location” clickable.

Mock-up 1:
mockup1

Mock-up 2:
mockup2

This was a big improvement, but still not good enough. The button’s borders broke up the text, making it choppy and slow to read. The “current location” button looked ugly and wrong, because normally buttons in OSX start with a capital letter. But capitalizing words in the middle of a phrase would be even more dissonant.

At this point I realized traditional buttons just weren’t a good fit. Every other button in the interface modified a location, but the buttons in the headline just select something. They don’t change anything. Every button I’ve ever seen in a good interface makes something happen — it changes data, or how data is presented, or searches billions of web-pages. I needed something a little less “heavy duty” then a button, that still afforded clicking, but didn’t break the flow of text.

Hyperlinks were a great fit. Clicking them means “show me that” — which is exactly what clicking the location headline was supposed to do — show something. They afford clicking, without breaking the flow of text.

So starting with v0.27 I made the key phrases links inside the headline.
v2_7_tiger.jpg
I also put the “That’s not where I am…” button and the headline together in a box, to help re-inforce their relationship, and to give the headline some emphasis by giving it a border.

Under Leopard, the headline looks like:
v2_7_leopard.jpg

Leopard introduced a new button style, called “Recessed Button” in Interface Builder, that is a perfect fit. It has no border, and hilights on mouse-over, just like a hyperlink. (Basically, it’s what is used in the Safari Bookmarks bar).

Right now I’m leaning towards dropping support for Tiger, so that I can take advantage of the UI improvements in Leopard. I just wish I had a better understanding of how many users that move would alienate.

Advertisements
Explore posts in the same categories: Accessibility, Cocoa, Design, Leopard, MacOSX, Programming, Research

2 Comments on “Design Process: Current Location “Headline””

  1. Goodtime Says:

    I too am dealing with Leopard and Tiger UI issues. I love the recessed buttons, and they sort of work in Tiger from Xcode 3.0, they are just missing one of the graphics or transparency.

    I thought there would be a way to do the same thing in Tiger, like the Safari bookmarks bar, but I seem to get it to work.

    I either have to recreate graphics that look similiar or find another button style. Something that I was not looking forward too as it the recessed buttons in Leopard are very slick.

    Goodtime :-)


  2. Different types of Sessions Presented Over the internet Tens of thousands of university students will be able to
    register for programmes from financial burden to personal conditioning, whereby these state his
    or her’s training routine to the database. Several other scholars choose programs that aren’t
    occuring at his / her traditional great institutions, like cutting-edge instructional classes and additionally languages.
    best free online classes Various technological know-how will never be found in all of the sessions.

    Sectors may very well produce specific practical products for specific courses with research.
    Some sort of nursing jobs process might use aesthetic images that can be provided into computer files for instance the anatomy course.

    Some sort of MBA and also legal system program would use attorney at
    law post to talk about a particular point of online
    business and / or legislation.

    The web sessions services video recording internet streaming abilities.
    For this reason, you can easily confidently be aware of the procedures to enable you to enough appreciate the
    attention delivering systems. The online market place becoming a large reference of data, yow will discover much more worthwhile specifics to help you to actually extensive
    the course. top online classes The thought of travelling to institution enables you to nauseous, nonetheless.
    From the get go, doing it have a price; a lot of money.
    Will probably be qualified to seem to carry An individual
    system at the same time for those who persist with earning
    money full-time, it also would take a long time to get your diploma or degree also pace.
    It will far from performance logistically
    choose to, bearing in mind you will be around the occupation the moment the most
    of training courses are offered, and nighttime helpful instructional classes
    turmoil with each of your home-based pledge. Anyone obsess too originating from
    a four-year school to help with making travelling a optionl, and you just
    donrrrt would like to transfer all your family members just to head over to high school.

    If yourrrve been wanting online pertaining to classes on
    the web for the homeschooler, there are numerous stuff that you need to seek out once looking
    around. Remember there are numerous fraudulence via the internet that you
    should avoid, and several that happens to be barely worthy of time and energy.
    It is not with regards to the cost tagSome
    fathers and mothers go appropriate for the disposable
    classes on the web because the majority is relating to stringent financial
    constraints nonetheless. But you must bear in mind that usually the free
    on the net classes is probably not greatest. Whether or not they are they may be free of charge at the outset,
    there is a real loophole that really needs some monthly payment
    in order to access the comprehensive course.
    Seek accuracySome via the internet program most likely is not
    one hundred percent appropriate. Because of this
    Concerning constantly transported to plenty of time to research the internet based resume initially, to
    ensure that your information is real. With regard to paid for software
    you’ll need to be sure they have got excellent assessments out of individuals that have tried this services. Even make sure you ddd to ascertain if they also have virtually any grievances sent in in opposition to these people.Look into the work loadTake the work load this really is active in the classes on the web. Various classes on the web are actually as short as a quarter-hour, homeowners is regarding sixty min’s or possibly more time.
    Ascertain should the online courses may well wear a timetable.

    Spend time to evaluate your daily schedule, and pay attention
    to the span of time you will be hiring.What individuals created the groups?
    In terms of classes online, it is best to examine the references of your other half what individuals came up
    with the classes on the web. Take whatever time and explore good info about that person that came up with classes.
    Several of the best classes online tend to be put by just training colleges or firms which usually cater
    to home schoolers. If you can not find virtually any more knowledge about the person what individuals come up with the classes on the web, you may then wish to think about together
    with the routine, only if somebody has utilized the online class
    which enables it to attest to the software.May well your personal computer address the extra weight?
    With of this web based courses, you ought to need some kinds
    of plans maybe a certain amount involved with reminiscence in your
    home pc. Prior to timetable the internets training into your homeschooling morning, make
    certain you can certainly go motion picture. Usually it will
    keep an incredible avoid into your homeschoool day time,
    and discover discover yourself to be battling to locate quite a few benefit your kid to try.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: