Theme Admin

[Owen Winkler]

Greetings Habari People,

Looking at the theme management page in Habari, it occurs to me that the
bulk of visits to the theme management admin page is probably more
related to theme configuration than theme selection.

What would you all think of reorganizing the theme admin page so that
the bulk of the content was related to the bulk of the tasks?

Instead of using 80% of the page to select a theme (something you do on
that page infrequently), we could use 80% of the page to set theme
configuration options and block settings for the current theme
(something you do more frequently when you visit that page).

Your thoughts?

Owen

[mikelietz]

As I've been moving around blocks and adding and configuring them,
I've thought also that the content I see on the page when it loads is
the stuff I don't need to see (I've already selected a theme) and I
need to click links to expand stuff to do what I do need to do
(administer blocks, etc).

So, yes, I agree.
mikelietz

[Michael Bishop]

I'd have no objections. Let me know if there's anything I can do to
help with this.

~miklb

On Apr 3, 11:44 am, Owen Winkler <epit...@gmail.com> wrote:

[Owen Winkler]

On 4/7/2010 9:53 AM, Michael Bishop wrote:
> I'd have no objections. Let me know if there's anything I can do to
> help with this.

Well, let's start a little design process.

What *should* this page look like? What needs to be on it, and what
needs to go elsewhere? Obviously, it should fit in with the rest of the
admin, since we're not redesigning the whole thing.

Sketches welcome.

Owen

[Ali B.]

Can we, for example, not display the screenshots of the inactive themes and have these simply listed below the active theme instead? The active theme would be the first one on the top with the config "section" permanently visible, and it would also leave a good deal of space for the block/area interface.

Another option would be to keep the inactive theme displayed as they are now but to move them in a splitter, drawer..etc. Users who are willing to activate a different theme can do so after "expanding" the inactive themes (Maybe call it "available themes"?) "section"?

I have to admit that I lean towards the first idea, but I am sure there would be more than just these two. I don't feel much, however, about moving any part of that page into a different one. IMO, doing so would also move that part out of the context.



--
Ali B./dmondark
http://awhitebox.com

Owen

--
To post to this group, send email to habar...@googlegroups.com
To unsubscribe from this group, send email to habari-dev-...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/habari-dev

To unsubscribe, reply using "remove me" as the subject.

[Owen Winkler]

On 4/7/2010 7:22 PM, Ali B. wrote:
> Can we, for example, not display the screenshots of the inactive themes
> and have these simply listed below the active theme instead? The active
> theme would be the first one on the top with the config "section"
> permanently visible, and it would also leave a good deal of space for
> the block/area interface.

It is my opinion that the screenshots are valuable for quickly seeing
what a theme might look like. Only showing a screenshot on the active
theme doesn't make sense to me, since looking at the blog would show you
what that theme looks like.

> Another option would be to keep the inactive theme displayed as they are
> now but to move them in a splitter, drawer..etc. Users who are willing
> to activate a different theme can do so after "expanding" the inactive
> themes (Maybe call it "available themes"?) "section"?
>
> I have to admit that I lean towards the first idea, but I am sure there
> would be more than just these two. I don't feel much, however, about
> moving any part of that page into a different one. IMO, doing so would
> also move that part out of the context.

This is actually more like what I would suggest. Either the theme list
appears in an expanding drawer at the bottom (top?) of the page, or a
link exists to a page that lists the themes for selection as-is but
without the configuration pane.

We do something similar with the the user pages, although I'm not
entirely satisfied with that interaction either. Shouldn't my user
information form be more prominent than the user list? There may be
permissions that change this behavior, but it still seems a little
backward somehow.

Owen

[Colin]

I agree, too much real estate is given up to themes that aren't in use
rather than the theme we're interested in customising so I've whipped
up this (attached) mockup (I quickly hacked admin/themes.php to do
most of this with a little Firebug trickery for the screenshot).

Notes about my mockup and some of my thoughts:

1. The theme description is probably ignored by most people; they're
more interested in what the theme looks like (hence the thumbnail)
than any of the fancy words that accompany it. Accordingly, I've
removed it completely from the active theme and put it into the
thumbnail's "title" tag (so it's visible if you hover over it) for the
inactive themes.

2. People are generally only interested in a theme's license when it
comes to downloading and installing it. This information would
normally be advertised on the theme supplier's site. I see little
value in displaying the license once the theme has been installed, so
I've stripped this from the mockup.

3. The theme can be activated by clicking the thumbnail or the
"Activate" button in my mockup code, but I was thinking we could use
the "clicking of the thumbnail" as a way to let the user preview their
site with the clicked theme applied either by:

a. Opening a modal thickbox-like window showing the theme applied

OR

b. Open a new tab/window in the browser with the theme applied in
a preview manner similar to previewing a post (ie only the admin can
see it).

Of course, there's always the option of introducing a "Preview" button
next to the "Activate" button to do the preview function instead, or
add a hook so a plugin can offer this feature (if the hook doesn't
exist - I've not checked).

4. I think the active theme's configuration tabs should be expanded
and cover a much larger area by default so users can quickly and
easily get to them. I also think it might be a good idea to switch to
a fade out/in, just slide down or no animation at all when switching
config tabs. The current slide up/down animation, whilst consistent
with the similar buttons used on the post page, is a bit slow and can
be shakey and juddery (is that even a word?) on some browsers. It
doesn't feel smooth.

5. The inactive themes section, whilst shown fully expanded in the
mockup, would be "collapsed" and hidden by default, requiring the user
to click a + button, or similar, in order to be presented with the
list as I show. The minus button next to the heading is what would
show when expanded like in the mockup.

Of course all of this is just a few suggestions to help get this ball
rolling in the right direction.

Cheers,
Colin

> --
> To post to this group, send email to habar...@googlegroups.com
> To unsubscribe from this group, send email to
> habari-dev-...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/habari-dev
>
> To unsubscribe, reply using "remove me" as the subject.
>

--
Colin Seymour
Blog: http://colinseymour.co.uk
Tech Stuff: http://www.lildude.co.uk
Barefoot Running: http://barefootrunner.co.uk
IRC: lildude #habari

[Owen Winkler]

On 4/10/2010 8:05 AM, Colin wrote:
> I agree, too much real estate is given up to themes that aren't in use
> rather than the theme we're interested in customising so I've whipped
> up this (attached) mockup (I quickly hacked admin/themes.php to do
> most of this with a little Firebug trickery for the screenshot).

First, thanks a bunch for rolling on this. It looks good.

> Notes about my mockup and some of my thoughts:
>
> 1. The theme description is probably ignored by most people; they're
> more interested in what the theme looks like (hence the thumbnail)
> than any of the fancy words that accompany it. Accordingly, I've
> removed it completely from the active theme and put it into the
> thumbnail's "title" tag (so it's visible if you hover over it) for the
> inactive themes.

I agree. And putting it in the title tag seems alright, although my
brain immediately thought of some including some javascript to do a
Netflix-like flyout of the description and license (omitted via your
point #2). See this screenshot:

http://screencast.com/t/ZTE0ZDJhMz

> 3. The theme can be activated by clicking the thumbnail or the
> "Activate" button in my mockup code, but I was thinking we could use
> the "clicking of the thumbnail" as a way to let the user preview their
> site with the clicked theme applied either by:

<snip>

> Of course, there's always the option of introducing a "Preview" button
> next to the "Activate" button to do the preview function instead, or
> add a hook so a plugin can offer this feature (if the hook doesn't
> exist - I've not checked).

The technical details of implementing this aside, it seems like
something people ask for a decent amount.

My suggestion would be to have the preview button, and activating the
preview button would switch the theme for *that user's session*.
Session messages would indicate how to switch back or cancel the preview.

> 4. I think the active theme's configuration tabs should be expanded
> and cover a much larger area by default so users can quickly and
> easily get to them. I also think it might be a good idea to switch to
> a fade out/in, just slide down or no animation at all when switching
> config tabs. The current slide up/down animation, whilst consistent
> with the similar buttons used on the post page, is a bit slow and can
> be shakey and juddery (is that even a word?) on some browsers. It
> doesn't feel smooth.

I agree that the configuration for the current theme should be expended.
I am growing more and more of the opinion that they should not be in
tabs at all, and should simply be in separate, already expanded sections
running down the page.

> 5. The inactive themes section, whilst shown fully expanded in the
> mockup, would be "collapsed" and hidden by default, requiring the user
> to click a + button, or similar, in order to be presented with the
> list as I show. The minus button next to the heading is what would
> show when expanded like in the mockup.

This is an easily-implemented mechanism. I wouldn't really mind if the
themes were expanded at the bottom of the page. This design clearly
puts them in the secondary role that they should be in, which is one of
the main things that should be addressed here.

Nicely done. I look forward to the comments of others.

Owen

[Colin]

On Sat, Apr 10, 2010 at 5:15 PM, Owen Winkler <epi...@gmail.com> wrote:
>
> I agree.  And putting it in the title tag seems alright, although my brain
> immediately thought of some including some javascript to do a Netflix-like
> flyout of the description and license (omitted via your point #2).  See this
> screenshot:
>
> http://screencast.com/t/ZTE0ZDJhMz
>

My initial thoughts were to go for something like this, but my
PHP/HTML/CSS skills are far better than my Photoshop skills :-)

> The technical details of implementing this aside, it seems like something
> people ask for a decent amount.
>
> My suggestion would be to have the preview button, and activating the
> preview button would switch the theme for *that user's session*. Session
> messages would indicate how to switch back or cancel the preview.
>

That's probably a better idea than either of mine. It would give the
admin user a chance to check their entire site with the new theme
applied without having to append arguments to URLs or be restricted by
the modal view and it's easily "revertable".

>
> I agree that the configuration for the current theme should be expended.  I
> am growing more and more of the opinion that they should not be in tabs at
> all, and should simply be in separate, already expanded sections running
> down the page.
>

This makes sense and would make the theme configuration feel and
behave just like the plugins' configuration does.

[Rich Bowen]

On Apr 10, 2010, at 8:05 AM, Colin wrote:

1.  The theme description is probably ignored by most people; they're
more interested in what the theme looks like (hence the thumbnail)
than any of the fancy words that accompany it. Accordingly, I've
removed it completely from the active theme and put it into the
thumbnail's "title" tag (so it's visible if you hover over it) for the
inactive themes.

I read all of the theme descriptions when I was working on getting them auto-updated on the website. Not a one of them meant anything to me. What does "Pushes the limits of awesomeness" really convey, after all? Yes, a thumbnail is really the only reasonable way to convey what a theme looks like.

--

Rich Bowen

rbo...@rcbowen.com

[Ali B.]

On Sun, Apr 11, 2010 at 2:15 AM, Owen Winkler <epi...@gmail.com> wrote:

On 4/10/2010 8:05 AM, Colin wrote:

I agree, too much real estate is given up to themes that aren't in use
rather than the theme we're interested in customising so I've whipped
up this (attached) mockup (I quickly hacked admin/themes.php to do
most of this with a little Firebug trickery for the screenshot).

First, thanks a bunch for rolling on this.  It looks good.

 

Indeed, this looks very good. And I see how screenshots are probably the most important property to display for inactive themes.

 

Notes about my mockup and some of my thoughts:

1.  The theme description is probably ignored by most people; they're
more interested in what the theme looks like (hence the thumbnail)
than any of the fancy words that accompany it. Accordingly, I've
removed it completely from the active theme and put it into the
thumbnail's "title" tag (so it's visible if you hover over it) for the
inactive themes.

I agree.  And putting it in the title tag seems alright, although my brain immediately thought of some including some javascript to do a Netflix-like flyout of the description and license (omitted via your point #2).  See this screenshot:

http://screencast.com/t/ZTE0ZDJhMz

I think that a JS flyout (or "popup" if you will) would actually look better. One important note about these elements is that, triggering them wrongfully can make them very annoying very quickly. For example, netflix avoids that by adding some delay before displaying it. I would lean towards triggering only by clicking the thumbnail.

I should also mention that I think activating the theme when the thumbnail is clicked might be a bit confusing to users. We should avoid having actions made on more than one element trigger the same result.

<snip> 

Of course, there's always the option of introducing a "Preview" button
next to the "Activate" button to do the preview function instead, or
add a hook so a plugin can offer this feature (if the hook doesn't
exist - I've not checked).

The technical details of implementing this aside, it seems like something people ask for a decent amount.

My suggestion would be to have the preview button, and activating the preview button would switch the theme for *that user's session*. Session messages would indicate how to switch back or cancel the preview.

Like Colin, having this one can be of huge benefit to site admins when intending to change the theme. I would use this button to preview my entire site, browse around, do testing..etc, while my readers (there are 5 of them!) are not affected by any hidden issue that the theme can have.

4.  I think the active theme's configuration tabs should be expanded
and cover a much larger area by default so users can quickly and
easily get to them.  I also think it might be a good idea to switch to
a fade out/in, just slide down or no animation at all when switching
config tabs.  The current slide up/down animation, whilst consistent
with the similar buttons used on the post page, is a bit slow and can
be shakey and juddery (is that even a word?) on some browsers.  It
doesn't feel smooth.

I agree that the configuration for the current theme should be expended.  I am growing more and more of the opinion that they should not be in tabs at all, and should simply be in separate, already expanded sections running down the page.

I would support that. Ideally, admins don't configure the active themes much often, and they tend to switch themes much less often. I see no problem having the config screen divided into sections rather than tabs, even though doing so would definitely expand the config section to more than one screen.

--
Ali B./dmondark
http://awhitebox.com

[michael.twofish]

I think this is a definite improvement. To summarise what I think is
being suggested.

* Active theme is at the top, with configuration options visible, not
in splitter or tabs, and no thumbnail.
* Theme thumbnails are visible in a grid.
* On hover, thumbnails display more information about the theme.
* Activating a theme's preview changes the theme for that user's
session (like theme switcher).

[Ali B.]

Sent from my iPhone

On 21/04/2010, at 2:11 PM, "michael.twofish"
<michael...@gmail.com> wrote:

[snip]

> * On hover, thumbnails display more information about the theme.

Actually, as I mentioned, I lean more towards displaying that popup by
clicking on the thumbnail, not hovering. Simply because when browsing
and encountering sites that trigger popups by hover, it makes me
crazy :)

[Carson Chittom]

On Wed, Apr 21, 2010 at 4:29 AM, Ali B. <dmon...@gmail.com> wrote:

> Actually, as I mentioned, I lean more towards displaying that popup by
> clicking on the thumbnail, not hovering. Simply because when browsing and
> encountering sites that trigger popups by hover, it makes me crazy :)

As much as I hate to just say "Me too," I completely and *strongly* concur.

[Caius Durling]

On 21 Apr 2010, at 14:00, Carson Chittom wrote:

On Wed, Apr 21, 2010 at 4:29 AM, Ali B. <dmon...@gmail.com> wrote:

Actually, as I mentioned, I lean more towards displaying that popup by

clicking on the thumbnail, not hovering. Simply because when browsing and

encountering sites that trigger popups by hover, it makes me crazy :)

As much as I hate to just say "Me too," I completely and *strongly* concur.

Hover doesn't work on a touchscreen device. More than a good enough reason to make it happen on click.

C

---

Caius Durling

ca...@caius.name

+44 (0) 7960 268 100

http://caius.name/

[michael.twofish]

On Apr 21, 2:11 pm, "michael.twofish" <michael.twof...@gmail.com>
wrote:

> I think this is a definite improvement. To summarise what I think is
> being suggested.

Amended to click.

* Active theme is at the top, with configuration options visible, not
in splitter or tabs, and no thumbnail.
* Theme thumbnails are visible in a grid.

* On click, thumbnails display more information about the theme.