-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Annotation UI Design #42
Comments
Some notes from the Slack discussion of the design (@balmas,please correct me lest I forget or misinterpreted anything):
|
I agree with all of this. |
This sounds like a good place to start. I think we'll have to get user feedback and see how things look in practice before we can commit to a specific design though. And I'd like the code to be flexible so that we can easily apply different styles without affecting functionality. |
@kirlat I think we're getting close to something we could open up to a wider audience for feedback. Could you make screenshots with the few changes requested above AND in those remove the Login prompt, which is distracting (and the text of which will be changing since login will now also be required for annotation). Thanks! |
@kirlat please create mockups for the following use cases Reference: alpheios-project/morphsvc#29 (as described in #40 (comment)) The popup should be the results of looking up the Latin word "senatu", with the user having selected to add an inflection to the form "senat-u" of the lemma senatus. I think we should have a [+Inflection] below the existing "sing. dat. abl." inflection group Clicking on that should open the Action Panel which should have selection dropdowns for Number, Case, Gender, with Gender pre-selected as 'masculine'. There should be 'Add' and 'Cancel' buttons. Reference: alpheios-project/morpheus#16 The popup should be the results of looking up the Greek word "καταλείπω", with the user having selected to add a short definition for the lemma "καταλιμπάνω", via a [+Definition] button that should be below or next-to the current short definition of "= καταλείπω, Thuc.". Clicking on that should open the Action Panel which should have text input boxes for definition and source, with 'Add' and 'Cancel' buttons. Let me know if any of this isn't clear. I need to mockups for our advisory board meeting on Dec 2. Thanks! |
Would something like below be workable for the scenario described above? |
yes I think so. thanks. |
That looks good. If it's not too hard to do, yes full screenshots would be helpful. Thanks |
I just have a question - why are the lemma and form buttons highlighted with the light blue background in these examples? |
ah, ok I see now. I agree we need different colors for these. |
I think that's fine for now, but would it be possible to get rid of the bluish background behind the lemma and form buttons? |
excellent. thank you! |
This issue is to discuss the concept of the annotation UI. There are two types of UI changes that are needed for the annotation data:
Existing annotation data would probably be displayed (1) within the current UI layouts, with some extensions to it (to show, for example, user comments). The (2) is more challenging, on my opinion, as it requires to display not only the data, but also the controls for editing it, which takes much more space. It is also important to to tie elements that will be edited with the specific controls.
On my opinion, much fewer users will use the editing UI (2) than users who would be viewing the annotation data (1). Because of this, and also because of the sometimes complex functionality required from the editing UI, it is important to make the editing UI as functional as possible, even if it will mean for it to be more verbose. The majority of users won't see this verbosity, but those who do would probably value its functionality.
If the existing annotation data will be displayed in the regular "viewing mode", I think that the editing of the annotation data would require a special mode to switch into (an annotation editing mode). When this mode is on, It would display the specific controls for editing annotations. It's better not to show those controls all the time because they will take too much space. It's better to show them on demand.
Here is the first take at how the annotation mode control might look like:
The look is not final and might change in the future, I think it would make sense to concentrate on discussing the concept first.
An annotation mode icon is small and unobtrusive, and we can place such icons to various parts of the UI (the popup, the panel, etc.).
The annotation mode, when on, should change the look of the app in a way that would be easily noticed, I think. That will be an indication that the user is in a special editing mode that is different from the regular viewing mode. User would probably not stay in the annotation mode for a long time: he or she will switch to it, edit a piece of information, and switch back to the "viewing" mode.
Here is how I think the first iteration of the "annotation" editing mode might look like (colors and styles are subject to change):
The elements inside the square brackets ([]) are buttons to perform specific editing actions. The light blue background connects the controls to the element that they alter. I think we could associate a specific color with each editing mode; we might have several in the future: one for annotations and others for something else. The presence of elements with the light blue background would be an indication to the user that the annotation editing mode is on, that the UI is in this specific mode and that the annotation data can be changed (which he or she should be careful with).
The "Annotation mode is on" near the annotation mode control also serves as a reminder about the specific mode the user is in.
The editing controls in the square brackets are text, not icons, because icons from the current set we're using (Font Awesome) are generic and can't, on my opinion, adequately reflect specifics of annotation data editing tasks. I think having text makes controls much more informative.
There is a color associated with each specific action: green with adding the data (adding a lemma in the example), blue with editing the data, and red with removing the data. I've also added symbols (
+
,*
, and-
) associated with each specific action (we could use icons here too but I think letter symbols are combined with test better). I think the symbols along with the text will provide the better visual clues than just text notes. We could also use potentially use symbols alone to represent actions in a more compact UI, if we'll need to.We could also add tooltips to the editing controls to explain them better.
@balmas, please let me know what do you think about the concept and whether it is the right way to go for us. Thanks!
The text was updated successfully, but these errors were encountered: