6

I need to hint to the user of a second 'page' for a control on an XML Editor. The conventional way to do this with a tabbed page. There are 3 problems with this:

  1. My graphics skills aren't up to coming up with the tab graphics.
  2. This might make the overall appearance seem more complex than it neads to be,
  3. It would be too similar to other products.

Instead, I've gone for an image in the corner of the header bar designed to look a bit like the curled up page of a book. Does this work at all, are 'page corners' used already for this type of interface? The aim is to make the user want to click on it to see what's behind it - I'm hoping that once they've tried it once, they'll remember for the next time.

On animation: Currently - when there's a mouse-over on the header-bar the 'page corner' brightens, should I expand the corner too, to make it look like it's more curled, or is this over the top for a simple developer tool?

The product is 'live' (just) with a few hundred downloads, but I've had no feedback one way or the other.

An image is shown below:

enter image description here

[Edit]

A tabbed page seems to be the consensus here. One thing I have against this is that tabs normally represent different views of the same concept, for example different open files within the same project, or different information views - but about the same item.

The use of 2 pages here is more just a convenience for using the same screen real-state for 2 entirely different bits of information and method of control.

The 'Files' page shares features with a document-tab well, a project explorer and a recent files list, but it's all about managing files and opening them.

The 'Tree' page is about navigating the structure of the file once it's been opened

I see this as kind of a workflow: (1) Manage list and open a file (2) Explore the file (3) Go back 1. Isn't a tabbed page misleading here? Wouldn't it lead one to expect to find another list of different items, if the first page was also a list?

[Edit - Conclusion]

With the weight of answers in favour of something more conventional - I've gone for tabs. I was attached to the page corner idea, but realize I should let it go - here's my simple design for the tabs (I did say my drawing wasn't that good).

enter image description here

[Edit - Rethink] On reflection, the above is just wrong - I've gone for just a vertical separator and highlighted text - so its kind of a toggle-switch:

enter image description here

3 Answers 3

5

It would be too similar to other products.

That's not usually a bad thing. UI familiarity is an important consideration. It looks like you are designing a typical tool pallet and typically, they are tabbed so would suggest sticking with tabs.

2
  • Being similar to other products might lull users into a false sense of familiarity, things really are quite different. I need to prepare them a bit for what's to come:-)
    – pgfearo
    Sep 12, 2011 at 14:46
  • I'm talking less at the product level and more at the specific UI element level. If it's a tool pallet, then making it like a familiar tool pallet isn't necessarily a bad idea--even if the rest of the app is quite different.
    – DA01
    Sep 12, 2011 at 14:54
1

I don't think the concept of curly page works here, beside the aesthetics factor. :)

You could go for a switcher / toggle button with icons that show a representation or concept of that view.

4
  • Well, the aesthetics factor is quite important - there are so many tool of this kind that I need something that says 'this is going to be different'
    – pgfearo
    Sep 12, 2011 at 14:15
  • I agree that you should resonate your brand values in your UI, if you have one. But i don't think you understood, i'm saying that the curly page does not work aesthetically either.
    – herkulano
    Sep 12, 2011 at 14:23
  • And i also agree with @DA01 different is not a good or bad thing, it depends and in UI familiarity wins. Go for subtle differences, have your icons designed according to your brand, make good use of color, etc.
    – herkulano
    Sep 12, 2011 at 14:29
  • 1
    As you possibly guessed, I don't really have brand values to resonate just yet. Message understood: curly pages are not pretty either.
    – pgfearo
    Sep 12, 2011 at 14:39
1

Firstly, point 1 should never be a deciding factor in how something should be done - there are graphics that can be downloaded or bought if you do not have the ability, but most graphical work is actually reasonably straightforward to do. I say this as someone who does not have much graphics ability, but sometimes has to make do. I am a software developer, not a graphical designer. Your other points may be sufficient for this choice, so it may still be correct.

A page curl might work here, but it would need to be done much better - the one you have does not work as a page curl. I would suggest that a basic toggle would be better - maybe small radio-like buttons, indicating which of the two tabs you are on. Because it is only 2, something that would reflect just these two pages is better. The point you make about over-complicating it is not valid, as to make it look and work correctly, you would have to make it more complex. I think simple tabs would be easier and better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.