Possible new layout and look for Resource Space

[Paul]

Let me begin by saying what great project RS is. 

Since I started to use Resource space, I have always thought

that the interface was a bit old looking and could use a 

face lift. 

I have taken the liberty of attaching a picture of a new

template I have designed using a web design program I have.

Please note that this is only a mockup, and I have not created

any actual code.

I would love your comments and feedback, with any suggestions

that would improve on what I have already done. Anything can be 

changed, include the colors, button look, font, font size, and 

color, and anything else that would make this even better.

Obvisiouly, this is just one page of the website, but this could 

then be utilized to design all the other pages in the front and 

backend.

This could be built using the jquery ui and themeroller, and

then the user could select from the many themeroller themes. 

I realize that this would be a large undertaking, but once 

incorporated, would add a lot to the project and would allow

for easier incoporation of new and existing tools already 

available and based on jquery. 

I hope that everyone is exicted as I am and would also like to 

see an upgrade to our existing look and feel.

Regards,

Paul

[Dan Huby]

Hi Paul,

I don't think using buttons instead of links is a good idea as this is non-standard web UI. Also it means that in some cases you have had to compress the text down to a size that is almost unreadable.

If these are replaced with links then your concept looks pretty much the same as the current system, except that you have a grey header (which from my point of view would cause an issue as customer logos tend to have a white background) and the boxes are a bit darker and have lost their gradient.

I think the existing design has stood up well given it was developed mid 2006 (before even IE7 was released, yet this is now the oldest browser we support) but I agree that it could probably use some updating, and not too long ago I made some updates myself, including rounded corners and shadows on browsers that support them.

Incidentally I wasn't the designer so I am not being defensive, but I am a fan of the existing design. Also, I don't want to appear ungrateful - your efforts are appreciated. Perhaps this will be the starting point for a collaborative evolutionary process that will result in an improved design.

Dan

[Søren Grønning Iversen]

Hi,

I'll have to agree with Dan on this one. I don't see too many
enhancements from this mockup, since it so closely resembles the current
layout, thus not providing much you wouldn't be able to achieve with CSS
alone.

With that being said, I'd really like for the UI to be updated as well.
Mainly, I'd like a more 'search engine like' layout with a single line
search input field and a clearly visible search button coupled with CSS
that makes the search field and 'tool' links from the header stay in
place, even if you scroll . . . Generally I'd like for the interface,
especially the secondary parts of it (e.g. Team Centre), to benefit from
better use of whitespace in relation to the design. It is key to keep
all different elements grouped logically and evenly distributed across
the layout. This is where text links sometimes lose out to more
graphical elements such as buttons and panels, however, it's important
to keep in mind that one does not exclude the other.

A redesign og the 'Resourcepanel' to allow everything to be easily
styled with CSS would be great as well. I don't know if this has already
been done as part of the ongoing jqueryfication of the product, though.

A redesigned Team Centre would be great. It might be nice with some sort
of more control panel like interface to allow for a better overview of
settings just as with e.g. Google's account settings, that seem very
easily understood and well grouped and arranged by topic.

Cheers,

S�ren

> --
>
>

[Dan Huby]

Hi Søren,

There are some nice ideas there. I particularly like the idea of the search bar being along the top, and the top bar staying in place when you scroll (I think that last part is actually quite easy?).

It might be a problem trying to include resource types and metadata fields in that sort of layout though.

I guess it could drop down as a separate panel, perhaps automatically when the focus is on the search box.

It's not easy to change this sort of thing though at least not without breaking lots of additional configurable functionality, and also plugins and custom CSS styling, so some thought is needed here.

Dan

S�ren

[Paul]

I am taken a look at a look of Open Source and purchased Digital Asset Management Solutions, and have noticed that

most of them use buttons rather than links, along with a variety of the latest jquery extensions and plugins. 

I decided on RS because i was impressed with the ease of installation, features, functionality, and the fact that RS is

constantly being worked, and has a active group. I just think that the look and feel needs to be updated. A lot has occurred

in this area since 2006.

I understand your point of view, but still feel that Resource Space needs to be updated in these areas. As we have moved to jquey,

I think that the use of the jquery UI would be a natural progression and would add a lot of functionality, look and feel to RS.  

I am happy to see that some new and interesting ideas have been proposed, and hopefully some of the ideas that have or will be 

proposed, will be added to RS.   

Regards,

Paul

[Søren Grønning Iversen]

Hi Dan,

Yes, the searchbar stuff is quite easily implemented with CSS and e.g. Modernizr, which allows your to track scroll behaviour and thereby allows you to know when to stop scrolling for a DIV element by changing its position CSS tag from e.g. 'position: static' to 'position: fixed' and change it all back if you scroll up past a certain point.

Generally, I believe that the search scopes could be removed and replaced by 'better' search results, e.g. like Google does by relevance rankings combined with file type information added to individual search results (such as PowerPoint, PDF, Excel etc.). -What do you do if the only resource with an image of a certain object was uploaded as a PDF and wrongly filed as a 'Document', as in 'Text Document', but you're unable to locate it since you only search for 'Images' since an image is what you want, right? That would be solved by a Google-like approach, possibly with an option to search for images alone, should the search results seem to predict that you'd get better results by omitting other resource types :)

I know it's not to be regarded as 'easy' - not by a long shot! All I'm interested in is the potential that this app has - and it's qute huge :)

-Søren

--
 
 

[Dan Huby]

 

On Tuesday, October 9, 2012 8:32:09 PM UTC+1, Paul wrote:

but still feel that Resource Space needs to be updated in these areas.  would add a lot of functionality, look and feel to RS.  

Paul - would you be able to elaborate on the areas you think need work? Because in your design concept, all I can really see is that you have changed links to buttons, which I don't think is modernising the system at all and is actually a backwards step in terms of UI design. With web sites and applications the convention is that links take you places whereas buttons perform actions. I think we should assume users are used to that convention. In my view, buttons should never be used for navigation.

Søren on the other hand has given some ideas as to how it can be improved that generally I am in agreement with, although it may be difficult to roll out to existing systems. Perhaps the top search bar could be a new feature, off by default in config.default.php but enabled during setup, so new systems work that way but old systems don't until modified. Perhaps we could have a new config file that is used for settings of this type (e.g. something like config.setup_template.php).

I'm not sure Modernizr is necessary to make the header fixed - a 'position:fixed' attribute on the header should do it, but it will mean some extra spacing in the content elements below to make room for the header (I also work on another web application - also by RS designer Neale Hall - that is set up this way). I guess this last step is the bit that Modernizr removes the need for - however I wonder if it might be overkill and some extra margins or padding on ContentSpace and the side bar might do the trick. We might want to make the scroll bar take up only the content area rather than the full browser window, for that we may need something like jScrollPane if it is not possible using CSS. I might get time to experiment with this at some point.

It is good that we are now talking about the ResourceSpace UI and thanks to Paul for kicking off the conversation, even if I am a little puzzled as to what exactly is being suggested.

There has been a lot of work recently on migrating to jQuery and implementing AJAX loading of content that I think has made the UI much slicker, although it is visually unchanged. Now we have made this step though we can more confidently use jQuery and jQueryUI to improve the UI.

That said, we should avoid using effects just for the sake of it, there should be a demonstrable improvement in efficiency or usability. For example, the jQueryUI Sortable widget (http://api.jqueryui.com/sortable/) may be a nice way to support reordering of collection items, and the Draggable widget (http://api.jqueryui.com/draggable/) may be a nice way to add resources to collections, perhaps combined with the Selectable widget (http://jqueryui.com/selectable/) to allow multiple resources to be added at once.

Dan

 

[Søren Grønning Iversen]

Hi Dan,

Concerning Modernizr; My thought was to do something along the lines of this, the Danish newspaper Politiken's web site, featuring a complete header that scrolls as usual until a certain point after which the menu sticks to the top of the screen. I guess I didn't exactly point that out earlier, but this is what made me point to Modernizr none the less ...

This way, we'd allow for a full size header with a white background header, like you advocated due to the majority of logos being white with colored type and branding, as well as keeping menu functionality present at all time - and yet save precious space as you scroll down :)

-Søren

--
 
 

[Paul]

Hi Dan,

After reading your last post, I now better understand your stance on staying with links. I really do not like the use of the > placed before most links. Maybe there is

a way to make the look and feel for all links look better. As suggested I will try and create a list of areas that I think need improvement. One of these areas has to

due with the way we present information in tables. Maybe we can consider updating this using a datagrid. I am not sure if the current version of Jquery UI has a 

datagrid, but I have used the jquery script DataTables successfully in one of the RS plugins I wrote recently. I was able to add a very nice export feature to my tables

were I have incorporated jquery Datatables.

I am very happy that my original post has created so much feedback, and hopefully this will lead to some enhancements in the RS user interface. 

Paul

[Paul]

I took a look at jScrollPane and I think that this would be a great addition to the page linked to the view all option for the current selected colletion.

to display the main content (ie display of resources)

[Dan Huby]

An update on this one - Neil @ Montala has now used the Sortable widget to enable collection reordering. I think it's a huge improvement over the old technique, to the point that it is now enabled by default. Just drag and drop in the collection bar.

Dan

[Søren Grønning Iversen]

Hi Dan,

We discussed the palacement of the search field earlier and I'd like to just share an idea concerning the design of such a 'centered search field with no drop down menus for search scoping'.

Initially, I'd never thought of that bit as being important, as my own implementation of RS makes use of this concept already and I've never really used it on Google even ... However, I happen to like the implementation, Google's made of its mobile friendly version of its home page.

Essentially, for those unfamiliar, at first you get the single unified search field, but as soon as you perform your search a set of small icons pop up beneath the search field allowing you to select between all of the different search categories supported by Google. As such:



Coupled with a set of simple, configurable options to add icons to resource types and deciding which to show, this might prove an elegant solution to the problem of not being able to limit search results with a single unified search field being used. The icons would then have to act as triggers for filtering output based on resource type.

-Søren