Page 1 of 2

[added: 96] Skin Browser Design changes

PostPosted: January 30th, 2008, 11:52 pm
by Cliff Cawley
Hi!

So I've had a couple of confused users unable to understand opening skin packs in the skin browser, or realising that there are more skins available to them than just the current skin (usually the default).

I've mocked up a couple of screenshots of some ideas for simple changes to make it more apparent.

Can you all give me your feedback on what you think? Do you have any suggestions yourself?

Style 1: Tabs
    Image

Style 2: Three dots
    Image
    Image

Style 3: Faded Arrow
    Image
    Image

Style 4: Text over Arrow
    Image
    Image

*added*
Style 5: Two Lists
    Image
    Image

*added*

Thanks for your help!

Cliff :)

PostPosted: January 31st, 2008, 12:48 am
by SLoB
I think tabbed would be good, however, only if it involves being able to add tabs and group skins together, for example you could group by author, skin genre, rating etc...

or last option with great big arrows that say "yea press here" ;)

PostPosted: January 31st, 2008, 9:05 am
by Cliff Cawley
SLoB Wrote:I think tabbed would be good, however, only if it involves being able to add tabs and group skins together, for example you could group by author, skin genre, rating etc...

or last option with great big arrows that say "yea press here" ;)


I was hoping to remove complexity!! :P

The main thing being that if you're new and you open the Skins Chooser dialog, after copying files to your interfaces directory, you won't see the skins and there's no obvious reason why, unless you know you're browsing a skin pack and you know to click the 'View all Skins' button.

I was hoping for ideas that would make it more obvious that you could go back to all your skins and that you were currently browsing one such skin.

Cliff :)

PostPosted: January 31st, 2008, 11:02 am
by SLoB
well perhaps rather than just have (2) for 2 skins within the pack show it as (2 skins available)
that in itself would show that there is 2 skins rather than 2 of ??? (unless you know they contain more but as your after new people coming to the skins then tell them what the number represents)

perhaps also a tooltip saying x amount of skins available in skin pack?
and you could also change the Choose Skin window title as above, there should be plenty of room, it shows 3*2 skins within the smallest window, and more if scaled out (thers a lot of blinking/redrawing if scaling that choose skin window)

the button at the button changes to then view all skins using windows form buttons, perhaps "Show All Skins"?
the load skin button also changes if there is more than 1 skin in a pack

i think its got all it needs really
perhaps another label saying "You are currently viewing the available skins of pack xxxx" or "You are currently viewing all available skins"

heh, the tabbed idea of having it more complex could be a user option ;)
tbh it doesnt take long to get used to selecting a skin does it even for the newcomer to Xion, its basic windows handling/operation

also on 2 monitors you can right click on a skin and the popup shows on the other monitor heheh ;)

PostPosted: January 31st, 2008, 1:06 pm
by UnseenRage
I like tabbed

PostPosted: January 31st, 2008, 2:26 pm
by Cliff Cawley
SLoB Wrote:well perhaps rather than just have (2) for 2 skins within the pack show it as (2 skins available)
that in itself would show that there is 2 skins rather than 2 of ??? (unless you know they contain more but as your after new people coming to the skins then tell them what the number represents)


SLoB, the problem isn't about the count of skins on the first window. The problem is that if you're a new user, who may not be all that tech savvy, after following a tutorial, has copied some interfaces to their interfaces folder.

They now proceed to open the skin window, still on the default skin. What's presented to them is rather confusing, as it looks like they have 2 skins available, and they can't see the new skins they thought they added.

Its almost impossible to understand that what they are looking at is the contents of another skin. This is an oversight by myself after adding the ability to browse skins within skin packs, so I was hoping for some visual way that people can just SEE and UNDERSTAND that they are looking at a particular skin pack, and need to do something in order to view all of their skins.

This is MOST important the first time you use it, thereafter it becomes less important because you understand it. Therefore I need something non-intrusive, but immediately recognizable.

Has anyone else got some ideas too? I'm sure there are a few of you out there who struggled the first time and thought 'geez, he should have done it like this and this...'

Cliff :)

PostPosted: January 31st, 2008, 3:26 pm
by Cliff Cawley
One other idea I just had is the following:

Have a list of all the skins in a vertical panel on the left (or a horizontal panel along the top).

When you select one, it shows you the skins that are contained within, to the right of it, (or below it).

This way you can always see that there are more skins, and you can see that you're looking at some of them.

How does that sound?

I'll do a mockup later on and add it here.

Style 5: Two Lists
    Image
    Image



Cliff :)

PostPosted: January 31st, 2008, 7:38 pm
by SLoB
i understand that and there is no right or wrong way
i would avoid horizontal scrolling, go for the vertical

2 split panes would be good and mark them accordingly, if you select a skin(pack) then its skins will be shown in that other pane, otherwise that pane becomes not shown

so only open 2 panes if selecting or have selected a skin pack, so first use it would show 2 panes due to the default skin having 2 skins

PostPosted: February 1st, 2008, 3:08 am
by ALAS
agree with SLoB about the vertical being better.

Anyway, the most unambigous way of displaying it would be a tree-view. Everybody knows it from Explorer and would understand it. DonĀ“t know, if it is too difficult to do.

alternatively I vote for the vertical version of style 5...

PostPosted: February 1st, 2008, 8:42 am
by Cliff Cawley
The only thing with the vertical style that I've thought of, is that there is then less room for all your standard skins. Or should I make the thin one the one on the right instead of the left?

Currently the skins window scrolls horizontally anyway?

Cliff :)

PostPosted: February 1st, 2008, 10:19 am
by SLoB
How about another approach?
Best to have progressive disclosure on first look, don't show it all at once

have 2 (for the now) accordion/rollup styled bars with plus icons, one for current skin pack and the other for all skins
both of them are closed on first view, the user can then open either of the bars, only one would show at any time, pointless showing both cos it will only end in confusion

then it wouldn't matter if you had any sort of scrolling in there as you would only be showing one view at a time, its similar to tabbed approach but probably has just as much potential
the open area would have its plus icon changed to a minus (ie to be rolled up), you could click anywhere on the bar, the icon is for a focal and status pov

PostPosted: February 1st, 2008, 3:44 pm
by Cliff Cawley
SLoB Wrote:How about another approach?
Best to have progressive disclosure on first look, don't show it all at once

have 2 (for the now) accordion/rollup styled bars with plus icons, one for current skin pack and the other for all skins
both of them are closed on first view, the user can then open either of the bars, only one would show at any time, pointless showing both cos it will only end in confusion

then it wouldn't matter if you had any sort of scrolling in there as you would only be showing one view at a time, its similar to tabbed approach but probably has just as much potential
the open area would have its plus icon changed to a minus (ie to be rolled up), you could click anywhere on the bar, the icon is for a focal and status pov


Any chance you could do a mock up? :)

Cliff :)

PostPosted: February 1st, 2008, 8:11 pm
by SLoB
Like this ya mean? ;)

2 states, one closed and one open
On first opening these are both closed, this gives progressive disclosure and does not bombard the user with anything complicated.
it is obvious that the roll bars serve a purpose and the use of the icons to represent the bars expand/collapse is more of a focal point (bars like this normally open if you click anywhere on them)

The point of adding the icons are twofold:
a)They immediately allow a state to be shown (amongst many bars this is a good thing)

b)They can provide a focal point for the user to click which can be useful if using Fitts Law (if other icons/buttons are surrounding the immediate area - although in this case there are no other buttons except for at the bottom)

Only one view is open at a time taking up available space so the user is left under no illusion as to which category he/she is browsing

closed/first use
Image
open on all skins
Image

PostPosted: February 5th, 2008, 12:26 pm
by SLoB
Cliff, did you see the mockup?

PostPosted: February 5th, 2008, 8:12 pm
by Cliff Cawley
SLoB Wrote:Cliff, did you see the mockup?


Ah yeah, sorry! I think to create something like that would require some custom coding as its not a standard windows control.

Currently I think I'm leaning more towards the Tabbed version as its least changes, yet still gives good impact.

Cliff :)