Tine 2.0 mock-up challenge

[Thasmo]

Well, the saved filters thingy is really the neckbreaker,
which needs to be overhauled in the GUI, even in my mockup
I'm struggling with a nice implementation of the filters.

For now I can think of 2 places, where the existing filters
could be put. Either the filters are put into a select-box beside
or under the search input-field, which would be a nice place,
or it could be put under the tree-list, on the bottom left side.

Have a look at my mockup,
some notes about it:

* The status bar has been removed in favor of more vertical space.
* The logged in user and status has been moved to the top bar.
* 'Favorites' have been added, to save favorite actions/applications.
* Changed the pagination to a page-slider, 'cause I like it. xD
* It is possible to select the view-mode on the bottom rigth side.
* The application buttons and action buttons (add, delete, etc.) are beeing
moved to the top, displayed as two horizontal bars, to have enough space for many
applications/button-sets.

The buttons are not yet finished; I only used dummy-buttons, but I hope
you get the idea. Also the applications icons in the tabbed-navigation should
be larger, maybe 24x24 or 32x32 pixels, but I don't have the time to rebuild them.

The action-bar, with specific actions per application, holds all the availble application-related
actions in the first set and global functions (copy, cut, paste, delete) in the second and third sets.

The placement of the search input-field and the implementation of the saved filters
is not yet solved - maybe we should get some ideas on this, to get it in shape.

What do you think?

[ph_il]

nice one, thasmo!

i like the button style and tabbed applications.

i think too, that we should dump the status bar. but i 'm not sure about moving the pagination bar to the bottom.

[Balazs]

Yeah - the saved filters... A pain in the ...

I have picked-up some of the ideas presented here and composed a suggestion - curious how you like it:

Björns first suggestion for the Tine 2.0 frame

TineMockUp.png (83.73 KiB) Viewed 1309 times

Some explanation:

• " | V " is used to say this is a drop-down
• The biggest Tab is meant as: This is active!
• And yes: You can only select a new application via the drop-down in the last tab.

Also: You are also invited to comment on the suggestions even if you do not find the time to make your own draft!

[Thasmo]

The problem I see with more and mulitiple-row button-sets,
is the shrinking dataset-list height, on a resolution of 1024x768.

As I know you wanna support 1024x768. I'd support 1280x800 upwards,
so you gain some pixels for bigger and multi-row button-sets.

I think I like the idea of having several applications and/or datasheets
opened, to better compare or migrate data between them.

The question raising regarding the filters is, where should those saved views,
saved filters, saved searches be displayed? In my oppinion those are related
to the search function or search pannel and should be called there somehow.

What I am missing in your sketch, is the ability to open an application
with a single click, which is very important I believe. I want to have all
available applications listed somewhere, with the possibility to open them instantly.

Putting the pagination to the bottom is okay for me, maybe the pagination still
will be above the preview-frame for activated records of the resultlist.

And I kinda like your aproach to group the functional buttons for actions, views
and settings into several button-groups.

Hopefully I'll find some time tomorrow to let flow some ideas from you
into my mockup, also adding some better icons and label-texts.

[kaystrobach]

the filters are really complicated
Give my some time to get an idea.

[phsc]

@ Björn
I'm not sure if every user will understand your concept of tabs. It solves the problem with the screen width but the user does not obviously see, which applications are available. Therefore some users will be confused and maybe will ask where their applications are.
I really like your implementation of the saved filters. This is very nice!

@ Thasmo
Very beautiful mockup! I like the tabs and the application buttons. But there's still the problem with the width, which also exists with my mockup (Björn mentioned it). Tine 2.0 will get more applications in the future and then it is possible that the screen width is not sufficient. Do you have any ideas regarding this problem?

I like:
- Saved filters concept from Björn's mockup
- Tabs concept from Thasmo's mockup (but the problem with the screen width needs to be resolved)

[schurb]

Well the more "Tabs" I have the shorter they get.
Like in any browser.

But if I open a new Tab how does it know which application I want to start?
Perhaps a Quick Start Menu like Opera or Google Chrome...?

I really like Björn idea with the two rows in the left column.

Edit: Just had another idea because I have the problem with low resolution on my netbook.
What if the panel with the "Action", "View" ... Panel can be minimized?
So, there is just von little row where the words "Action" "View" and so on are listed and if I click on one of those words there is an panel with the right buttons.

It is hard to explain perhaps I can perform some magic in paint.

Wow the new paint is really good!

TineMockUp.png (36.62 KiB) Viewed 1299 times

[lkneschke]

@ Björn
I'm not sure if every user will understand your concept of tabs. It solves the problem with the screen width but the user does not obviously see, which applications are available. Therefore some users will be confused and maybe will ask where their applications are.
I really like your implementation of the saved filters. This is very nice!

I like:
- Saved filters concept from Björn's mockup
- Tabs concept from Thasmo's mockup (but the problem with the screen width needs to be resolved)

Hello Björn!

That's how I see it too. I would prefer separating the application launcher from the panel of currently active applications.

[Balazs]

Is the one-Click-Start / Opening of an applications really crucial? I could imagine that a

1. point on tab - 2. automatic pop-up of available applications (as a layer) - 3. click to open desired application

mechanism could do as well.

This is not as intuitive as showing all the applications, but also it does not take much more effort than presenting them directly and really saves space on the screen.

@schurb:
Why do you suggest to maximize only parts (e.g. actions)? Why shouldn't the whole action-bar be minimized or maximized?

@Thasmo:
Yes the correct place for the "saved filters" would be in the context of the search, as it provides a shortcut to a certain filtersetting. I just have not found a good solution for this...

[schurb]

@schurb:
Why do you suggest to maximize only parts (e.g. actions)? Why shouldn't the whole action-bar be minimized or maximized?

The whole action-bar should be minimized but when I need Button 1 from - let's say - View I don't want all buttons from the whole action-bar but just the ones from View.
That's how I imagine it.