Old sentence block is confusing

[jiru]

Let’s discuss here the issues raised by githubshrek’s comment:

Structurally, "the sentence" is shown as a single row in the same table as all the other sentences. This is actually somewhat confusing. For example, the sentence https://tatoeba.org/eng/sentences/show/9872646 is "Nie chcę z Panem mówić.", but when you look at the table, although it's the first row, and a bigger font, the table heading "Sentence #9872646" implies that all of the sentences in the table are simply versions of "Sentence #9872646", which is just not the case.

A second, related problem is the "menu" icons (Translate, Add to favourites, Add to list and the User profile link), which are separated from the table rows by a fine line. I guessed, wrongly, that these icons apply to all of the rows of the table. Not so. They only apply to the first row of the table.

I think therefore, the correct solution is to structurally separate the items which relate to the sentence itself, into a sentence details section:

• the sentence text, here "Nie chcę z Panem mówić."
• the sentence id, here 9872646
• the sentence flag, e.g. Polish
• the sentence language [new]
• the Translate icon
• the Add to favourites icon
• the Add to list icon
• the belongs to User link

from the sentence translations table, with multiple rows:

• sentence translation link arrow
• sentence translation flag, e.g. Romanian
• sentence translation text
• sentence translation copy icon
• sentence translation audio

Basically, we should clearly separate the elements which are part of the sentence and things which are not.

Another deeply related issue is the main point about the page is not the sentence id. As IT people, it is extremely important, but for the general user, it's the sentence itself which is the main thing, and other things (flag, id, etc.) are merely attributes of the sentence itself.

I'm not a designer (as you will see below), but structurally I think it should be more like the following:

[jiru]

I agree that the sentence block design is confusing, as mentioned in other tickets such as #2132. I very much wish this could be improved somehow, but it’s quite of a difficult task.

First, let me share some historical facts. The sentence block design you are referring to is actually something we call the "new design", which is part of an ongoing work mostly done by @trang over the past years to make Tatoeba responsive, more modern looking and solve a number of bugs with the previous design. That previous design (aka "old design") can still be used by switching a setting in your preferences. We plan to get rid of the old design once the new design is mature enough. I think Trang could elaborate better on that, but she is not active these days, and this whole redesign work happens to be stalled at the moment. Trang wanted to make it easy for current members to switch to the new design, that’s why the structure is the same, and this structure has been around for more than a decade. That was for the "how did we get there" part.

About the sentence id, as technical as it might look, it makes sense for members because this is how they refer to sentences in discussions. One can post a message like Can you help me check if #1234567 is correct? and #1234567 turns into a link leading to the sentence page.

About your design suggestion, I think structurally separating the items is a good way to tackle the confusion. However, it looks like your design is tailored for the sentence page. What about other contexts, such as search results? If, say, I am searching for Polish sentences, there is little point displaying the word "Polish" underneath every result flag. Besides, it takes of lot of vertical space which is annoying when scrolling search through search results.

I’d like to see if we can make use of Material’s bottom sheet to make the sentence buttons pop-up over the sentence text from the bottom. I don’t have a precise design yet though.

[githubshrek]

In fact, I notice that Random sentence uses a much more clearly separated design than the Sentence search structure:

Notice the following better features of the "Random" structure:

• the main sentence is clearly separated from the Translations and the Translations of Translations by a dividing line and the headings "Translations" and "Translations of translations"
• the sentence number is visually more clearly attached to the sentence text
• the translation icon is visually more connected just to the sentence, because of the line beneath the sentence

Random sentence layout

To see this layout, go to the home page, https://tatoeba.org/eng

Sentence search layout

The following is what I'm calling the Sentence search structure:

Basically in the "Random" layout it is much clearer which bits belong to what.

[jiru]

@githubshrek Your first screenshot shows the old design while the second screenshot shows the new design (see my previous comment for what I mean about "old" and "new"). I assumed that your initial comment was talking about the new design, but it seems not. Could you clarify?

[mramosch]

Gilles, I guess you meant it the other way round.

First screenshot is new design
Second screenshot is old design

I also saw shrek referring to the old design in other posts. I am not quite sure that he knows about those designs...

Personally I don’t find the new layout confusing!

———

[jiru]

Yes, sorry I meant the other way round.

My point is that even though the new design is less confusing that the old, I think there is still room for improvement.

[githubshrek]

OK, let me clarify. If I understand correctly, we have:

OLD design:

NEW design:

When I created this "Sentence block is confusing" comment I was looking at the OLD design, which is still the most commonly displayed on the site.

The great news is that the NEW design addresses many of the issues which were confusing:

• the NEW design more clearly separates "the sentence" from the translations
• the NEW design more clearly displays the buttons for translation as related to the sentence rather than all of the translations

As I said "I think therefore, the correct solution is to structurally separate the items which relate to the sentence itself, into a sentence details section". The NEW design does this.

I still think there is an important issue that the sentence and sentence id is shown the wrong way round. Currently it is like the sentence id is the main entity and the sentence text is just an attribute of the sentence id. I think it is the other way round: the sentence itself is the main entity, and the sentence id is an attribute of the sentence. I think this is best separated into its own issue.

Regarding the OLD vs. NEW sentence block, I think the main thing is to get the NEW block being used everywhere, since it is much less confusing. I do have some other issues with the NEW block, but I will raise them as new tickets.

I think this ticket can be closed; I would suggest to change the title to "Old sentence block is confusing".

[githubshrek]

By the way, I see the new design has been stuck at pull request stage (#2351) for nearly a year now. Anybody know what the plans for getting that unstuck?

[jiru]

Closing as requested. About #2351, you want to ask @trang.