Ideas for UI navigation: see Nuxeo screenshots
Wireframes only structural movements suggested I will add more notes tonight.
Our main idea is that we should be looking at a more web app based design look and feel and to get away from the tree structure system.
I have used the same nav elements as from Maria's mock ups (linked above)
Project overview page (proposed no current mock up in nuxeo)
Option 1 Museum objects layout
Option 2 Museum objects layout
Using a framework
Please load the dashboard.html file to view
Design mockups
This shows general look and feel as well as layout, this is based as much as possible on Marias mock up. It should not be looked at on a per field basis but as a general concept. Exact fields / naming should be worked out with Ontotext. This is for look and feel purposes. For example if more filtering is needed then there is a look here for a dropdown filter and this would be used.
- It shows how the navigation principles can be adapted to a more user based interface, with common points such as basket in the top right and application function in a top bar. It also shows levels of navigation and some changes to the tabs which would be shown on the record page.
- Top line of navigation is functional and more application focused. Workspaces is used to switch between projects and well as adding projects. It contains main actions related to workspaces. Tools allows the user to swap between different tools easily from a list. Username shows user admin eg log out management of profiles etc.
- Logo / name of institution grouped into one section showing you are at all times using the research space
- Main navigation follows the folder structure on nuxeo that Maria had set out with the addition of "Overview" or could be named project dashboard see wireframe.
- Dynamic Breadcrumb follows the user journey. In the current nuxeo demo when you view relations you are shunted over folders to images and the breadcrumb reflects this making the only navigation back to the record the back button. I am hoping we can find a way to use the breadcrumb to show that you came from the record.
- Page title Indicates the name of the record
- Page tabs will additionally have original record view after discussion with Dominic for the need to have a view of an un altered record.
- Quick navigation dropdown allows you to skip to the part of the record you are interested in.
- Left column shows record information. This has editable fields as well as expansion points, this is to show how the different levels of expansion are possible. Please look at this a concept rather than each filed title etc. It shows how sections would be labelled as well as subsection and fields. There are also expansion controls indicated on the mockup, there are two levels of expansion / contraction. Main section contraction which could make the record very short, or per sub section expansion.If possible it would be better to change the data chunking so fields which have the same title eg exhibition were grouped into a section rather than stating exhibition 5 times.
- Middle column shows annotation (after discussion with dominic there would not be tabs and all would be together, more like a stream). This shows you the section "Type" is highlighted in the details the annotation layer is only showing in formation attached to "Type"
- On loading the annotation it could show all the annotations in collapsed format.
- Right column shows the images and documents associated with the record.
- Add to data basket maybe changed as Dominic feels you need to do this on a per field basis rather than a whole record.
- Dominic suggets instead of 3 buttons to signify the different annotation types that there was just one and the user chose the type in the annotation widget? The 3 button approach seems slightly hard coded.
Dominics annotations of the UI
· More filtering should be available (Author, Project Team (registry), Annotation type, Field, Date, All)
· There should be specific text search for the annotations
· I assume that if to click on an annotation that the related field in the record will come into focus.
· If there is too much text then will there be an expanded view.
· The annotation type controls will need to be in the annotation control (how will linked annotations be dealt with (ie. You might need to search for a link if you don’t have it in your basket already.)
· Need for a field search (as well as section navigation)
On the link annotation the options might be that the researcher has a record ID and can specific that, or the ID and the field name so that the link be to a specific field. If these are not to hand then an additional search may be required.
On all links then there needs to be a place to put what Ontotext calls the disposition status. This should be proposed by default. 
15 Comments
comments.show.hideJan 18, 2012
jana.parvanova
Jan 18, 2012
jana.parvanova
We also would need some mockups for linking into discussions - and more specifically, for linking of individual statements (or properties) of a painting.
Jan 18, 2012
jana.parvanova
Copying discussion from Jira on the general UI wireframe:
Jana:
Notes on the first mockup.
As I see it, the tabs follow the currently defined folders for the Rembrandt workspace.
We are a bit worried that tabs are two static compared to freely defined folder structure (the way we have it in Nuxeo). I see the following problems:
1) The ability to create and maintain folder structure as needed by users is a core functionality for a DMS. That is, in some projects they may need a Documents subfolder named "Medieval sources", in other they may need Images subfolder just for X-ray images etc. I don't think it is a good idea to remove this ability.
2) There was a requirement that there will be a library template that would be used for each new project. The way I understand it is that we need to have a folder structure template that would be copied when a new project is created. I guess this template would be a subject of modification by admins - adding new folders etc. I cannot see how this would be reflected in the tabs UI.
Hollie:
In your example you propose another level "Medieval sources" this is already covered by UI redesign of Nuxeo#Option 2 Museum objects layout
Tabbed or non tree structured navigation has the capacity to have multiple levels as does a tree structure. I would question how far it is sensible to allow admins to create very nested structures. Perhaps we should think about how many levels of nesting is sensible?
A library template and folder structure should be part of the admin dashboard and need not be presented as a tree this can be handled in the administrators set up of the project. Options for structure could be available at this point.
Jana:
Hollie, I am not really sure how the "Mediaval sources" folder example is covered in the mockup. Would you elaborate on that? And how do they (the project admins) create or delete this folder, move documents in and out of it etc.?
I don't know whether nested tabs at arbitrary level are a good idea.
On the library template - once the admins set it up, it needs to be presented to the users and it can contain multiple nested folders - how do we show these?
Hollie:
I have used tabs as it is a wireframe, they will most likely not look like this in an actual design.
The mockup shows how view, alert, history etc are children of museum objects as medieval sources is a child of images in your example.
Library set up should be defined at a later stage with the dashboards. The tree structure could be used here to help them set it up but it doesn't mean this should be the main navigation device for the whole application.
Perhaps this discussion should be parked until BM have approved or not the design.
Jana
I am not sure History is a child object of Museum Objects in the same way a new folder ("Medieval sources") might be nested to hold specific documents.
History is more of a functionality thing - as well as Alerts or View.
I agree that BM should provide some feedback here as well.https://jira.ontotext.com/browse/RS-339
Jana
Based on the first mockups, I can see three major tasks:
This makes a rough estimation of 25 man/days.
Note: I am not sure where FR search should be located and where results would be shown. That is, are they going to be shown in a certain tab again?
Jan 19, 2012
hollie.lubbock
Thanks for moving the notes over from Jira, are you more comfortable with the tabs now you have seen them in the design (they are much more a navigation system than tabs now)
Do you have the same concerns pver the nesting ability of the navigation as it stands in the design?
Notes on your diagram
When you say that the Nuxeo ID is part of the data is this referring to all field labels or the ones in identifiers? What consequences does this have?
If the first title is not the most popular how were you planning to name to pages / artworks?
Default language was a suggestion form Dominic, I assume due to the institution possibly being in another country / language. I had thought a language selector would be the best way to handle this. I know some of the Rembrandt data was in different languages so it was indicated per field previously as there was a mix. I would refer to Dominic on this.
The show all comments would open within this frame. As Dominic wanted all these action to be in one place. It may in fact be complex to show. We should aim to collapse all other discussions to allow more viewing.
The grey box is a space for a avatar image. On reflection this maybe removed.
Rather than a scroller on just the data panel I propose the whole screen scrolls.
I am working on the annotations panel and commenting atm. The drawings below show the idea very basically.
Many thanks,
Hollie
Jan 19, 2012
jana.parvanova
Thanks! Notes follow:
1) When you say that the Nuxeo ID is part of the data is this referring to all field labels or the ones in identifiers? What consequences does this have?
All green data that is currently shown on the data form is part of the data. It may be there, or may be not, or there might be another value instead of it. That is, we may have "catalog number" or some other identifier - and we don't a way of knowing whether any identifiers will be there and which they would be.
2) If the first title is not the most popular how were you planning to name to pages / artworks?
We have named them by the filenames used in migration. In fact there are pictures that are missing primary title at all.
3) The show all comments would open within this frame. As Dominic wanted all these action to be in one place. It may in fact be complex to show. We should aim to collapse all other discussions to allow more viewing.
I am really worried about this. Showing a forum tree with 143 comments - each having nested pictures or attached documents - in the Annotations pane, is not a good idea IMHO. What about the new comment - is it going to be nested in the same pane? Please, consider it some more.
Jan 19, 2012
hollie.lubbock
1) If there are any fields which are identifiers they should be grouped together if the system allows it? We should try to group data as much as possible to make it more easily digestible and navigable.
2) Lets keep that logic to name the page. Showing all the names could be done I collapsed to make it easier to view more data. Dominic to advise.
3) New commenting will be in that pane, perhaps we should reinstate the tabs which Maria had for discussions?
Jan 20, 2012
jana.parvanova
3) I am not sure there will be enough space for RTF editor, nested pictures etc. on the same pane. Here is how it looks now (with new/old value and disposition fields added).
Jan 19, 2012
jana.parvanova
> Thanks for moving the notes over from Jira, are you more comfortable with the tabs now you have seen them in the design (they are much more a navigation system than tabs now)
I don't mind tabs at all. :) I am just worried users won't be able to create their own folders and manage documents in them. I still can't imagine how they can create subfolders and move/copy documents in and out of them. If you could provide a mockup of this, it would be very helpful.
Jan 19, 2012
hollie.lubbock
I agree moving data about it is easy to drag and drop in a tree system.
With this design we will need a "move" function on data lists. I'd suggest it was added with these buttons. We'd need a pop up screen with options of where to move the file / files.
Jan 20, 2012
hollie.lubbock
Amended designs
Jan 24, 2012
jana.parvanova
How do we suggest a new version?
Where does permalink lead to?
Jan 24, 2012
hollie.lubbock
New version is proposed in the same way as a comment, it is the other option in that dropdown
Permalink drives a pop up which gives you the option to copy link or add to databasket, I will do a mock up asap
Jan 24, 2012
dominic.oldman
Question?
The diagram shows both version and comment annotations following a thread. On one example the thread starts again. How does the user indicate that this is a completely new annotation rather than a continuation of others.
i.e. an annotation on an annotation rather than a completely new annotation.
Can you confirm what the buttons on the right of the annotation tools do. One looks like a link button. What is the behaviour if the link is another object, an external link, an image etc.
Does the other button collapse an expanded annotation?
Should an take up its own window or pop up. Will a large annotation be supported in the space (I presume it would have to just run down the column according to size?
Jan 24, 2012
hollie.lubbock
To create a new annotation you use the add new annotation button.
To reply or comment on a thread you use the button on the right with the arrow which is a reply button
The link icon functions as shown on either data or annotation to offer an option to copy the link to the field or to add the field to the data basket
Annotations are collapsed to just titles. To view full annotation user would click on title of comment to expand that thread focused on the place clicked.
Jan 25, 2012
hollie.lubbock
Linking to data fields / other records method proposed by Jana seems really good, have modified our mock up to take into account.
Add new will no longer be a pop up but expand instead.
https://confluence.ontotext.com/display/ResearchSpace/Linking