[Geoserver-devel] some sidebar reorginazation

Hi all,

Recently I sat down with Rollie, our designer, and he had some thoughts about how to improve the organization of the sidebar in the web ui. I have attached to two sets of images with the before and after pictures. Let us know what you think.

Logged in before/after:

https://skitch.com/jdeolive/rpai8/geoserver-welcome-3
https://skitch.com/jdeolive/rpaiq/geoserver-welcome-4-1

Logged out before/after:

https://skitch.com/jdeolive/rpai1/geoserver-welcome-2
https://skitch.com/jdeolive/rpaiw/geoserver-welcome

Here is a summary of the changes and the rationale behind them.

  • Separate settings category

The top “Server” has become a bit crowded. Since half of the items are “settings” oriented it makes sense to have a separate category for them.

  • Promote layer preview

The layer preview is probably the most used part of the entire ui. And as its sits today it does not come across as very prominent. So the idea is to promote it into the data section.

  • Ordering in terms of most frequently used

As you noticed in the screen shots the settings category is moved to the bottom. The idea here is to order the categories in such as way so that the “configuration” based ones order from top to bottom by most frequently used. Data being the most used, followed by services, followed by settings. The last two are a toss up I guess but that is the general idea.

Thoughts and feedback welcome.

Thanks.

-Justin


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

On Wed, Feb 9, 2011 at 4:46 AM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Hi all,
Recently I sat down with Rollie, our designer, and he had some thoughts
about how to improve the organization of the sidebar in the web ui. I have
attached to two sets of images with the before and after pictures. Let us
know what you think.
Logged in before/after:
https://skitch.com/jdeolive/rpai8/geoserver-welcome-3
https://skitch.com/jdeolive/rpaiq/geoserver-welcome-4-1
Logged out before/after:
https://skitch.com/jdeolive/rpai1/geoserver-welcome-2
https://skitch.com/jdeolive/rpaiw/geoserver-welcome
Here is a summary of the changes and the rationale behind them.
* Separate settings category
The top "Server" has become a bit crowded. Since half of the items are
"settings" oriented it makes sense to have a separate category for them.
* Promote layer preview
The layer preview is probably the most used part of the entire ui. And as
its sits today it does not come across as very prominent. So the idea is to
promote it into the data section.
* Ordering in terms of most frequently used
As you noticed in the screen shots the settings category is moved to the
bottom. The idea here is to order the categories in such as way so that the
"configuration" based ones order from top to bottom by most frequently used.
Data being the most used, followed by services, followed by settings. The
last two are a toss up I guess but that is the general idea.
Thoughts and feedback welcome.

Generally speaking it works for me, all besides the preview link.
It may not be prominent but the current position is one of those you
barely have
to look for since it's just "bottom left". I guess for those on
notebooks with smaller
screens it may end up out of the screen?

I certainly would have to make more effort to find it in the new position that
in the current one.
Maybe we could retain the quick to look up position if the layer
preview was placed
at the top of the "server" category (top left)

Cheers
Andrea

--
-------------------------------------------------------
Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf

-------------------------------------------------------

Thanks for the feedback Andrea.

So what if we move Layer Preview back outside (and below), but put it at the top of the “others” list… so that for instance it shows up ahead of demos? Or is the very bottom of the list preferred?

On Wed, Feb 9, 2011 at 12:57 AM, Andrea Aime <andrea.aime@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 4:46 AM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Hi all,
Recently I sat down with Rollie, our designer, and he had some thoughts
about how to improve the organization of the sidebar in the web ui. I have
attached to two sets of images with the before and after pictures. Let us
know what you think.
Logged in before/after:
https://skitch.com/jdeolive/rpai8/geoserver-welcome-3
https://skitch.com/jdeolive/rpaiq/geoserver-welcome-4-1
Logged out before/after:
https://skitch.com/jdeolive/rpai1/geoserver-welcome-2
https://skitch.com/jdeolive/rpaiw/geoserver-welcome
Here is a summary of the changes and the rationale behind them.

  • Separate settings category
    The top “Server” has become a bit crowded. Since half of the items are
    “settings” oriented it makes sense to have a separate category for them.
  • Promote layer preview
    The layer preview is probably the most used part of the entire ui. And as
    its sits today it does not come across as very prominent. So the idea is to
    promote it into the data section.
  • Ordering in terms of most frequently used
    As you noticed in the screen shots the settings category is moved to the
    bottom. The idea here is to order the categories in such as way so that the
    “configuration” based ones order from top to bottom by most frequently used.
    Data being the most used, followed by services, followed by settings. The
    last two are a toss up I guess but that is the general idea.
    Thoughts and feedback welcome.

Generally speaking it works for me, all besides the preview link.
It may not be prominent but the current position is one of those you
barely have
to look for since it’s just “bottom left”. I guess for those on
notebooks with smaller
screens it may end up out of the screen?

I certainly would have to make more effort to find it in the new position that
in the current one.
Maybe we could retain the quick to look up position if the layer
preview was placed
at the top of the “server” category (top left)

Cheers
Andrea

Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf



Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

On Wed, Feb 9, 2011 at 4:10 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Thanks for the feedback Andrea.
So what if we move Layer Preview back outside (and below), but put it at the
top of the "others" list... so that for instance it shows up ahead of demos?
Or is the very bottom of the list preferred?

To me it's preferred to the very bottom or the very top.
The reasoning is that one does not actually read anything to locate
it, it's just
the last line so visually you're just looking for the last item in the
menu list.

When you look for something else, like "layers", you actually have to
read the labels
to locate it. Makes sense?

Cheers
Andrea

--
-------------------------------------------------------
Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf

-------------------------------------------------------

Thanks for the feedback, Andrea. My comments are inline below:

On Wed, Feb 9, 2011 at 2:57 AM, Andrea Aime
<andrea.aime@anonymised.com> wrote:

Generally speaking it works for me, all besides the preview link. It may not be prominent
but the current position is one of those you barely have to look for since it's just "bottom left".
I guess for those on notebooks with smaller screens it may end up out of the screen?

On Wed, Feb 9, 2011 at 10:18 AM, Andrea Aime
<andrea.aime@anonymised.com> wrote:

To me it's preferred to the very bottom or the very top. The reasoning is that one does not
actually read anything to locate it, it's just the last line so visually you're just looking for
the last item in the menu list. When you look for something else, like "layers", you actually
have to read the labels to locate it. Makes sense?

So your concern is primarily one of scanability? That's reasonable, as
I could see how it may get lost in a list of other links. I can't say
that I totally agree with the status quo though, as "the last item in
the menu list" is only as 'intuitive' as we have been habituated to
think by using GeoServer pretty much every day.

My concern with adopting the proposed changes but leaving the Layer
Preview link at the bottom is that, as Justin described, the general
rationale behind the reorganization is to order things roughly from
most relevant to least relevant—hence why I proposed moving it up to
the fourth position (when logged in), as leaving it at the bottom
would put our most used menu item in the "least relevant" position
(along with Demos). As you pointed out, the bottom position is not
exactly the best for netbook users or really anyone who doesn't keep
their browser window at full screen all the time.

To further solve any scanability problems, the proposal seeks to
habituate users as to the location of the Layer Preview. As you'll
note from the proposed logged-out state, the Layer Preview shows up
prominently as one of two available items and establishes that the
user should expect to locate it within the Data section once they log
in. This habit is further reinforced by placing it at the very top of
the Data section at all times.

I certainly would have to make more effort to find it in the new position that in the current one.
Maybe we could retain the quick to look up position if the layer preview was placed at
the top of the "server" category (top left)

I don't necessarily agree that putting it further towards the top
"takes more effort to find" than the current position near the bottom
of the list—especially for new users or people who never log in but
just want to find the layers. Though I do agree that there would be a
short period of time during existing users would need to relearn their
habits, I think I made a decent case that it wouldn't be such a big
deal.

Should there be broad disagrement with this proposal though, I think a
compromise that would put the Layer Preview at the top of the list is
better than one that maintains it at the bottom.

Anyway, thanks again for humoring me in the channel Andrea. I hope I
put forth a reasonably convincing argument for a more internally
consistent and more relevantly organized sidebar. If anyone has any
thoughts please feel free to contact me.

Cheers,
Rollie

--
Rolando Peñate
Design Lead
OpenGeo - http://opengeo.org

That's because you use nice screens Andrea :slight_smile:
I'm tired of scrolling down when on laptop.
Which makes me think Layer Preview should make its way into the home
page. Either as a link to the LayerPreview page or as a list of the N
most visited layers?

back to the topic, I like Rollie's proposal, and also get your point.
Though if needing a change I'm more for top-most than bottom-most

Cheers,
Gabriel
On Wed, 2011-02-09 at 16:18 +0100, Andrea Aime wrote:

On Wed, Feb 9, 2011 at 4:10 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:
> Thanks for the feedback Andrea.
> So what if we move Layer Preview back outside (and below), but put it at the
> top of the "others" list... so that for instance it shows up ahead of demos?
> Or is the very bottom of the list preferred?

To me it's preferred to the very bottom or the very top.
The reasoning is that one does not actually read anything to locate
it, it's just
the last line so visually you're just looking for the last item in the
menu list.

When you look for something else, like "layers", you actually have to
read the labels
to locate it. Makes sense?

Cheers
Andrea

--
Gabriel Roldan
groldan@anonymised.com
Expert service straight from the developers

On Wed, Feb 9, 2011 at 5:40 PM, Gabriel Roldán <groldan@anonymised.com> wrote:

That's because you use nice screens Andrea :slight_smile:
I'm tired of scrolling down when on laptop.

Mumble, I don't have to scroll on mine...

Which makes me think Layer Preview should make its way into the home
page. Either as a link to the LayerPreview page or as a list of the N
most visited layers?

back to the topic, I like Rollie's proposal, and also get your point.
Though if needing a change I'm more for top-most than bottom-most

I still prefer it at the bottom, but really, to me it's a trivial
matter, I've seen many
issues during workshops and this one in particular never showed, the lack of a
ftl template editor, poor layer/style association workflow, lack of apply button
on style/layer pages (so that you can confirm, try it out and keep on editing
without going back into the page), poor workflow when adding many
layers in a layer group have so far been the issues that plagued the most
the workshops where I was teaching/present.

So unless someone else disagrees go ahead with the change, I'll put up with
it (now, if someone adds keyboard shortcuts for pages like preview, stores
and the like I won't care anymore of where the link is, because I won't be
using it anymore :wink: ... ah, another thing to add into the spare time pile...

Cheers
Andrea

--
-------------------------------------------------------
Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf

-------------------------------------------------------

Looks good; i especially like the logged out page emphasising layer preview.

Jody

On 09/02/2011, at 1:46 PM, Justin Deoliveira wrote:

Hi all,

Recently I sat down with Rollie, our designer, and he had some thoughts about how to improve the organization of the sidebar in the web ui. I have attached to two sets of images with the before and after pictures. Let us know what you think.

Logged in before/after:

https://skitch.com/jdeolive/rpai8/geoserver-welcome-3
https://skitch.com/jdeolive/rpaiq/geoserver-welcome-4-1

Logged out before/after:

https://skitch.com/jdeolive/rpai1/geoserver-welcome-2
https://skitch.com/jdeolive/rpaiw/geoserver-welcome

Here is a summary of the changes and the rationale behind them.

  • Separate settings category

The top “Server” has become a bit crowded. Since half of the items are “settings” oriented it makes sense to have a separate category for them.

  • Promote layer preview

The layer preview is probably the most used part of the entire ui. And as its sits today it does not come across as very prominent. So the idea is to promote it into the data section.

  • Ordering in terms of most frequently used

As you noticed in the screen shots the settings category is moved to the bottom. The idea here is to order the categories in such as way so that the “configuration” based ones order from top to bottom by most frequently used. Data being the most used, followed by services, followed by settings. The last two are a toss up I guess but that is the general idea.

Thoughts and feedback welcome.

Thanks.

-Justin


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.


The ultimate all-in-one performance toolkit: Intel(R) Parallel Studio XE:
Pinpoint memory and threading errors before they happen.
Find and fix more than 250 security defects in the development cycle.
Locate bottlenecks in serial and parallel code that limit performance.
http://p.sf.net/sfu/intel-dev2devfeb_______________________________________________
Geoserver-devel mailing list
Geoserver-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-devel

Ok, how about a compromise then. Here is a patch for the keyboard shortcut as well. Tested on safari, chrome, and firefox.

On Wed, Feb 9, 2011 at 11:44 AM, Andrea Aime <andrea.aime@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 5:40 PM, Gabriel Roldán <groldan@anonymised.com…1501…> wrote:

That’s because you use nice screens Andrea :slight_smile:
I’m tired of scrolling down when on laptop.

Mumble, I don’t have to scroll on mine…

Which makes me think Layer Preview should make its way into the home
page. Either as a link to the LayerPreview page or as a list of the N
most visited layers?

back to the topic, I like Rollie’s proposal, and also get your point.
Though if needing a change I’m more for top-most than bottom-most

I still prefer it at the bottom, but really, to me it’s a trivial
matter, I’ve seen many
issues during workshops and this one in particular never showed, the lack of a
ftl template editor, poor layer/style association workflow, lack of apply button
on style/layer pages (so that you can confirm, try it out and keep on editing
without going back into the page), poor workflow when adding many
layers in a layer group have so far been the issues that plagued the most
the workshops where I was teaching/present.

So unless someone else disagrees go ahead with the change, I’ll put up with
it (now, if someone adds keyboard shortcuts for pages like preview, stores
and the like I won’t care anymore of where the link is, because I won’t be
using it anymore :wink: … ah, another thing to add into the spare time pile…

Cheers
Andrea

Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf



Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

(attachments)

mapPreviewKeyBoardShortcut.patch (1.55 KB)

Oops forgot, ctrl+p to use it :slight_smile:

On Wed, Feb 9, 2011 at 2:56 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Ok, how about a compromise then. Here is a patch for the keyboard shortcut as well. Tested on safari, chrome, and firefox.

On Wed, Feb 9, 2011 at 11:44 AM, Andrea Aime <andrea.aime@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 5:40 PM, Gabriel Roldán <groldan@anonymised.com> wrote:

That’s because you use nice screens Andrea :slight_smile:
I’m tired of scrolling down when on laptop.

Mumble, I don’t have to scroll on mine…

Which makes me think Layer Preview should make its way into the home
page. Either as a link to the LayerPreview page or as a list of the N
most visited layers?

back to the topic, I like Rollie’s proposal, and also get your point.
Though if needing a change I’m more for top-most than bottom-most

I still prefer it at the bottom, but really, to me it’s a trivial
matter, I’ve seen many
issues during workshops and this one in particular never showed, the lack of a
ftl template editor, poor layer/style association workflow, lack of apply button
on style/layer pages (so that you can confirm, try it out and keep on editing
without going back into the page), poor workflow when adding many
layers in a layer group have so far been the issues that plagued the most
the workshops where I was teaching/present.

So unless someone else disagrees go ahead with the change, I’ll put up with
it (now, if someone adds keyboard shortcuts for pages like preview, stores
and the like I won’t care anymore of where the link is, because I won’t be
using it anymore :wink: … ah, another thing to add into the spare time pile…

Cheers
Andrea

Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf



Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

On Wed, Feb 9, 2011 at 4:57 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Oops forgot, ctrl+p to use it :slight_smile:

Really? that screams print to me! (or may be I just use to many
windows programs).

I love the redesign though.

Ian
--
Ian Turton

Ah right… i guess ctrl+p does not work on those other non mac os’s :slight_smile: So i guess another key should be the modifier. alt or shift perhaps?

On Wed, Feb 9, 2011 at 3:38 PM, Ian Turton <ijturton@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 4:57 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Oops forgot, ctrl+p to use it :slight_smile:

Really? that screams print to me! (or may be I just use to many
windows programs).

I love the redesign though.

Ian

Ian Turton


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

A quick update on this one. I have committed the changes to reorganize the sidebar as discussed.

I have also added the keyboard shortcut to trunk. Trunk only because I would like a chance for some other devs to test it out. The shortcut is mapped to shift+p and won’t engage if the user is typing in any textfield or form element. Let me know how it works for you.

On Wed, Feb 9, 2011 at 4:08 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Ah right… i guess ctrl+p does not work on those other non mac os’s :slight_smile: So i guess another key should be the modifier. alt or shift perhaps?

On Wed, Feb 9, 2011 at 3:38 PM, Ian Turton <ijturton@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 4:57 PM, Justin Deoliveira <jdeolive@anonymised.com> wrote:

Oops forgot, ctrl+p to use it :slight_smile:

Really? that screams print to me! (or may be I just use to many
windows programs).

I love the redesign though.

Ian

Ian Turton


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.


Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

Ooh ooh, can we discuss other keyboard shortcuts in the UI if this one works out? This is great (and long wished for by me)!

Thanks,
Mike Pumphrey
OpenGeo - http://opengeo.org

On 2/16/2011 10:33 AM, Justin Deoliveira wrote:

A quick update on this one. I have committed the changes to reorganize the
sidebar as discussed.

I have also added the keyboard shortcut to trunk. Trunk only because I would
like a chance for some other devs to test it out. The shortcut is mapped to
shift+p and won't engage if the user is typing in any textfield or form
element. Let me know how it works for you.

On Wed, Feb 9, 2011 at 4:08 PM, Justin Deoliveira<jdeolive@anonymised.com>wrote:

Ah right... i guess ctrl+p does not work on those other non mac os's :slight_smile: So
i guess another key should be the modifier. alt or shift perhaps?

On Wed, Feb 9, 2011 at 3:38 PM, Ian Turton<ijturton@anonymised.com> wrote:

On Wed, Feb 9, 2011 at 4:57 PM, Justin Deoliveira<jdeolive@anonymised.com>
wrote:
> Oops forgot, ctrl+p to use it :slight_smile:
>

Really? that screams print to me! (or may be I just use to many
windows programs).

I love the redesign though.

Ian
--
Ian Turton

--
Justin Deoliveira
OpenGeo - http://opengeo.org
Enterprise support for open source geospatial.

------------------------------------------------------------------------------
The ultimate all-in-one performance toolkit: Intel(R) Parallel Studio XE:
Pinpoint memory and threading errors before they happen.
Find and fix more than 250 security defects in the development cycle.
Locate bottlenecks in serial and parallel code that limit performance.
http://p.sf.net/sfu/intel-dev2devfeb

_______________________________________________
Geoserver-devel mailing list
Geoserver-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-devel

On Wed, Mar 2, 2011 at 6:35 PM, Mike Pumphrey <mike@anonymised.com> wrote:

Ooh ooh, can we discuss other keyboard shortcuts in the UI if this one works out? This is great (and long wished for by me)!

Indeed the shortcut is a real life saver, when I’m trying to locate the preview menu entry I fail 100% of the time.
Tried for a couple of week, but now I just gave up, there is no quick way to locate it without actually scanning the
entire menu, so I just go with the keyboard shortcut (and curse when I’m on 2.1.x…)

Cheers
Andrea

Ing. Andrea Aime
GeoSolutions S.A.S.
Tech lead

Via Poggio alle Viti 1187
55054 Massarosa (LU)
Italy

phone: +39 0584 962313
fax: +39 0584 962313
mob: +39 333 8128928

http://www.geo-solutions.it
http://geo-solutions.blogspot.com/
http://www.youtube.com/user/GeoSolutionsIT
http://www.linkedin.com/in/andreaaime
http://twitter.com/geowolf