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

Create a home page that is more useful for the first-time visitor. #947

Closed
ckjpn opened this Issue Dec 4, 2015 · 60 comments

Comments

Projects
None yet
8 participants
@ckjpn

ckjpn commented Dec 4, 2015

Create a home page that is more useful for the first-time visitor.

What follows are just a few ideas and not necessarily the best ideas.
However, if we start brainstorming, perhaps we can come up with something better.
Currently, if I send the website URL to someone and they arrive at the site, I don't think they have enough guidance to really understand what the website is all about.

** The Problem **

The current home page for non-logged-in members ...

  1. ... makes it look like registration is necessary.
  2. ... always requires a lot of scrolling to see the main content for people not logged in.
  3. ... has a link that says "How it works", but really only links to a quick-start guide for people who have already become members.
  4. ... has an "About us" link that goes to an old video that doesn't really explain the Tatoeba Project very clearly.
  5. ... doesn't really explain that much to the first-time visitor, even if they take the time to click the links on the right.

** Some Suggested Solutions **

ONE: Include one sentence that concisely tells what the Tatoeba Project does.

The Tatoeba Project is a group of people working on creating a collection of sentences and their translations that can used by various projects under the Creative Commons - Attribution 2.0 license.

(Perhaps this could be re-worded.)

TWO: Clearly state what can be done without registering, and explain concisely what can be done after registering.

You can browse, search or download our data without becoming a member, or you can register and help us by translating from a foreign language you know into your own native language or by creating natural-sounding sentences in your own native language for others to translate into their native languages.

(Perhaps this could be re-worded.)

THREE: Possibly have this message dismissible like the blue "announcement" thing that has recently been introduced. This would mean a non-logged-in visitor is not constantly irritated by this message.

FOUR: Create new content for the "how it works" and "about us" links that is more useful for first-time visitors.

** Sample Layouts **

Example 1 - same size buttons.png
example 1 - same size buttons

Example 2 - smaller buttons - smaller fonts.png
example 2 - smaller buttons - smaller fonts

Example 3 - text order reversed.png
example 3 - text order reversed

Original for comparison.png
original for comparison

Additionally, the "log in" button is unnecessary. There is a "log in" link on the top navigation bar in a very obvious location, similar to any other website that requires logging in.

Even doing away with the "register" button may be a possibility, since there is also a "register" link in an obvious place on the top navigation bar. Not having the button may possibly help not encourage people with no intention of contributing from registering.

@trang

This comment has been minimized.

Member

trang commented Dec 20, 2015

My current view on how the homepage could be improved rather looks like this:


new_home


  1. I would strip as much description as possible.
  2. I would make the search bar as big as possible, since this is the main feature.
  3. I would display big buttons for users to understand what else they can do besides searching.

There are possibly some elements missing (some stats about the sentences and languages supported for instance), but the idea is to have as little content as possible, but with a clear organization. It should be just enough so that the user understands the core structure and features of the website.

@ckjpn

This comment has been minimized.

ckjpn commented Dec 22, 2015

I like your idea, assuming that the links go to good pages.

Perhaps you could have something similar to this on one of the sub-pages.
http://prntscr.com/9hdsmd
(It's what is currently on my "support site" main page at http://a4esl.org/temporary/tatoeba/.)

** Some additional comments **

I assume that perhaps you are considering going back to the special landing page for non-logged-in visitors and using this as the landing page. I think I like that idea, too. Casual users and first-time visitors perhaps would find this more useful that way.

Perhaps for a landing page, the button "Developers" may not be necessary if this is a link to a page for developers working on the Tatoeba Project. If it is a link to how other developers can use the data we produce, then perhaps it's not a bad idea to have it on the landing page.

I wonder about a "Community" button. I assume this will have a link to the Wall and maybe a list of active members or a list of all members who have added sentences. I sort of doubt this is needed for first-time visitorrs.

Perhaps limiting to just these 3 big buttons would be good, (I've included some ideas of what I think might be included on the pages that these links lead to.)

  1. Explore
    -browsing and searching our data, explanation about indirect links.
  2. Contribute
    -registering, guidelines, how to contribute sentences, invitation to leave comments suggesting corrections, recommendation to contribute in your own native language.
  3. Developers
    -our license, what you are permitted to do with our data, link to downloads, link to the list of audio file contributors and their licenses.

@trang trang added the enhancement label Jan 6, 2016

@kamillel

This comment has been minimized.

kamillel commented Feb 21, 2016

Hello! I would like to suggest a possible new homepage:

home2

The main issues I'm trying to solve with this are:

  • the main goal is currently not obvious enough (the search)
  • the identity / hierarchy is not very clear (e.g. 'Register' being quite big, looks like it could be mandatory)

Identity I'm working with (correct me if I'm wrong!): Tatoeba is (1) a website where users can find translated sentences, (2) an open-source project, (3) ever-growing.
Main user profiles: language learners, translators / helpers, developers.

Section 1

The top part is following what Trang already proposed: the search needs to be the main focus of the home page. I added tips below (optional).

Section 2

I kept the 'Random sentence' block because it gives a 'sneak peak' on how the website works, and it can also be used as a 'discovery' tool.
The 'About' block: it gives a quick introduction on Tatoeba with the key statistics (at the moment the sentences stats don't have much context) and links for those who want to see the details.

Section 3

I wasn't sure how the buttons 'Community', 'Developers' and 'Explore' would work and I was afraid it would repeat the menu so I was thinking the following section could be more a list of 'useful links', where we would highlight the most useful ones, without repeating the menu items. I'm aware those are looking like a footer at the moment so it could be interesting working on those while working on the menu to make sure they are complementing each other.

This proposition is quite modular, but I would say as a quick win implementing the Section 1 would make the home page much clearer for first time visitors.

@trang

This comment has been minimized.

Member

trang commented Feb 21, 2016

Thanks a lot @kamillel!

I've mentioned your proposal on the Wall:
https://tatoeba.org/eng/wall/show_message/25557#message_25557

I'll add my feedback later on today.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 21, 2016

I'm not necessarily saying the above isn't good.

However, another possible approach to consider is making it clear on the main page that these options exist.

  • Study
    ** Make it clear that people can freely use the site without registering.
    **Give suggestions on how people who aren't translating can use the website for study.
  • Translate
    ** Maybe have the sub-page this goes to be the default main page for logged in members.
  • Use the Exported Data under the CC License.
    ** Link to the download page.
    ** Link to the Wiki page aimed at people using the Tatoeba Corpus for other projects.

Personally, I'd like to see the Random Sentence block taken off the main page. One of the main problems with random content on the main page is that what a first-time visitor could see there might make him or her never come back. We have obscene sentences in the database. We have obviously incorrect sentences. We have sentences that might be considered offensive by certain people for other reasons, too.

Instead of having a random sentence on the main page, I'd suggest having a special "random sentence" page for those who want it.

@kamillel
This might possibly give you some ideas, too. However, I created this specifically for those who are translating from English, or studying English, so it's not exactly what I would recommend.

http://a4esl.org/temporary/tatoeba/
(This also works nicely on mobiles. Try changing your window size.)

@sacredceltic

This comment has been minimized.

sacredceltic commented Feb 21, 2016

@kamillel
Thank you for the good proposal, which I'm all in favour. You obviously know how to focus a website on its actual targets.
I suggest you probably are a precious ressource to drive the site's presentation to the public and make it more attractive. it's good to have a fresh sight on it.

@ckjpn
We already discussed how to avoid incorrect sentences on the random section of the main page (filtering fresh newcomers and unadopted sentences).
But I actually love the random section featuring on the main page. I think it's fun and subsequently attractive. Certainly, I do not have the same definition as yours of what is "obscene" or "offensive". But the public has neither YOUR definition nor MINE...Let them judge ! It's not because a sentence is judged "obscene" or "offensive" that it might repel interest in the service. It can be both "obscene" and linguistically interesting.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 21, 2016

The point isn't what you or I consider incorrect, obscene or offensive. The point it what visitors think of the website if they see such content, especially if it's their first visit.

@sacredceltic

This comment has been minimized.

sacredceltic commented Feb 21, 2016

But you shouldn't suppose they will react like you. Maybe they will like me or somebody else, who knows ?

@ckjpn

This comment has been minimized.

ckjpn commented Feb 21, 2016

The sentences don't offend me personally. I think it doesn't hurt to err on the side of caution if it means we potentially get more people working on the project. Ultimately, it's TRANG's decision. I'm just sharing an opinion for her to consider.

@sacredceltic

This comment has been minimized.

sacredceltic commented Feb 21, 2016

I urge you to renounce this idea. Because then, we would need to define what is "obscene" and "offending". And you have no idea what this entails...

@kamillel

This comment has been minimized.

kamillel commented Feb 21, 2016

Many thank for your comments!

  • Study:
    Make it clear that people can freely use the site without registering. /
    Give suggestions on how people who aren't translating can use the website for study.

I think those two should be resolved by removing the big 'Log in' and 'Register' buttons and making the search more central. I wouldn't necessarily add any written explanations that people are likely to skip and may make the page heavier, I looked at other websites for which the search is the main feature and they don't give much explanations, other that making it obvious (https://uk.pinterest.com/kamillelm/tatoeba-search/). If the registration is needed they indicate it but if it's not then no need to explain it.

Translate
I didn't think yet of the homepage for logged users but it sounds like a good idea to make the 'Translate' options more important for logged users

Use the Exported Data under the CC License.
It can definitely be added to one of the lists! Those can be re-jiggled, I'm not sure if the Community list is very meaningful at the moment.

Random sentences
I find the concept interesting but if some content can be bad publicity (offensive/wrong/...), we need to see if it's really so bad it could scare people of, if so, could this be curated? If not, can we live with it (depends on the chances to get a bad random sentence that the user can read) or should we lose it for now.

@jiru

This comment has been minimized.

Member

jiru commented Feb 21, 2016

About censoring potential offensive content on the home page. Languages are used to transmit emotions, be it love or hate. Trying to hide offensive content means denying a part of languages, so it conflicts with Tatoeba’s mission. And as sacredceltic said, it’s just impossible to define what an offensive content is (especially on Tatoeba since cultures vary a lot).

Wikipedia has that policy that offensive words and offensive images should not be included unless they are treated in an encyclopedic manner. That might be a better approach: taking distance from sentences, making it clear that they are separate from the actual website, showing them as quotes or something.

@trang

This comment has been minimized.

Member

trang commented Feb 21, 2016

Note that we already had a discussion regarding the random sentence before:
https://tatoeba.org/eng/wall/show_message/21147#message_21147

The result was pretty clear to me: we don't want to remove it.

If you ask me personally, I wouldn't mind removing it, I wouldn't miss it. But that's only me. When I created that thread on the Wall, I thought there were a lot of other people like CK, who would rather see other information instead of a random sentence. But the discussion showed it was not the case at all. The random sentence seems to be part of Tatoeba's identity. It's something that a lot of people are attached too, and enjoy.

The fact that "bad"/"offensive" sentences might show up is not a strong enough reason to remove it. We have no evidence that the presence of the random sentence has more negative impact than positive impact.
If we're going to question again the display of the random sentences, I would like to have actual facts (things that really happened), rather than theories about how it can scare people away from Tatoeba. Until then, we will continue displaying random sentences.

@jiru

This comment has been minimized.

Member

jiru commented Feb 21, 2016

@kamillel Thank you again for this great mockup. It’s way better than anything we came up with so far.

That search bar looks good and efficient. Not that punctuation should no longer be a problem once #1008 is solved.

I like the way you’re reorganizing the menu. The More menu always bugged me because we’re just stuffing items that don’t fit other sections in there. For instance, it’s not obvious where to go if I want to donate to the project, because the menu title isn’t telling me it’s in there. So I suggest we just remove that More menu and move its contents to other sections, possibly in the footer only. Tools, Downloads can go into Developers. Show activity timeline can go into Community. Donate can go into Contribute/Want to help?.

What about the other links we currently have in our home page footer? Namely: Terms of use, Contact us, Blog, Twitter, Facebook, GitHub.

We could also have a Latest things page (that wording is terrible, but you see what I mean) in the Community section that would display what the current home page shows: latest sentences, latest comments and latest wall posts.

I feel like the total number of sentences and languages don’t have enough visibility. It’s something we can be proud of and it serves as a “selling point”.

@ghost

This comment has been minimized.

ghost commented Feb 21, 2016

Here is the layout I'm working on:

tatoeba

@trang

This comment has been minimized.

Member

trang commented Feb 21, 2016

Thanks for sharing your work @billoliver! Here's my feedback for both you and @kamillel.

Menu

I like what @billoliver is suggesting for the menu. I think it's important to have the name and the logo of Tatoeba in the top left corner. One thing that's missing however is the dropdown to change the interface of the language.

Regarding the items in the menu, I'm not sure if "Home" will be necessary if we have the Tatoeba logo. But that's just a minor detail.
The main challenge is to think of a way to reorganize our current structure. I think the first iteration should be about moving stuff around, and renaming some items (e.g. "Browse" -> "Explore"?), to slowly move towards our ideal structure. But we can't afford to add new items yet, because we would then need to create the content related to that item, and that's a whole other discussion.

I summarized how our content is currently structured: https://gist.github.com/trang/68f07c0f9b8e21b5bd3a

Just like @jiru, the "More" item bothers me. We just have it because there are items that we don't know where to put. We also have the problem that the "More" link is hidden for some users (cf. #735).

Search

I like better what @kamillel's version. I really like the tips.

I feel it would be more intuitive and self-explanatory for users if we had the "from" and "to" dropdown blended into a sentence (search sentences in ____ translated into ____). That's why I suggested it in the first place. I feel our current search bar may not be clear enough for new users.

Content

@kamillel,

I wasn't sure how the buttons 'Community', 'Developers' and 'Explore' would work

I only had a very rough idea for these categories. This was basically what I had in mind:

  • "Explore" would be more or less like our current "Browse" section.
  • "Community" would contain "Wall" + "Members".
  • "Developers" would contain the "Downloads" and the link to GitHub.

For me the buttons were more like a small block, that would reflect the menu structure, but would contain maybe tag line to explain shortly what we provide for that category.

I like however the way you organized it. There are some items we won't be able to introduce at first, but there are good ideas.

Regarding what @jiru said:

We could also have a Latest things page (that wording is terrible, but you see what I mean)

I was just thinking for the wording, maybe "Activity stream"?

I feel like the total number of sentences and languages don’t have enough visibility. It’s something we can be proud of and it serves as a “selling point”.

That's somewhat true. Although I would also like to find a way to avoid false publicity. I don't want users to be tricked into believing that we have an equal number of sentences in each language, and get disappointed when they search something in a less popular language and can't find any sentence.

@ghost

This comment has been minimized.

ghost commented Feb 22, 2016

This is the new layout that I built. As you guys can see I haven't worked on the footer yet. So, please leave your comments below.

tatoeba

P.S. I wish I could write a detailed comment, but my writing skills are far from perfect. Thanks for your feedback, @trang.

@kamillel

This comment has been minimized.

kamillel commented Feb 22, 2016

I also made some changes on my wireframe :)

home5

Menu: Option 1
The menu would follow what @trang proposed and the 'More' section content would be redistribute between Developers ('Downloads') and the footer ('Donate' + 'Help' links)

Menu: Option 2
While I was working on the menu I was almost wondering if 'Developers' should be part of the menu, I think it may be more effective as a list of quick links in the footer (and later on it could be nice to have a 'Developers' page within the Community menu). In this case we could have something like this:

home6

Statistics
About the sentences and languages numbers I think having the numbers visible from the first screen is a good way of advertising it without overselling it so people don't get disappointed (and they should be links so users can click to know more).

@jiru

This comment has been minimized.

Member

jiru commented Feb 22, 2016

@billoliver Thank you for your layout. It feels fresh. However, I can see the following problems:

  1. We want to keep the random sentence block (see previous discussions).
  2. I think it’s better to keep the introduction text about what Tatoeba is, otherwise new visitors just will have even more trouble figuring out what our project is about.
  3. I really don’t like the categories Students and Translators. We don’t really make this distinction on Tatoeba. I believe translators are constantly studying languages and many language students are aiming at becoming translators. More often than not, the barrier is unclear so visitors may have trouble applying these categories to themselves. Besides, Tatoeba gather people interested in languages in general, from various other fields like teachers, researchers… or just language enthusiasts not translating for a living. Or even dubbers. So I think it’s better to name these categories after actions, like you did in your first design. The Developers category seems less of a problem to me, because they are not directly participating into the project.
  4. Your design is oversized. Tatoeba’s current design isn’t responsive, we use a fixed width. So, you want to stick with the current’s site width for the time being.
@ckjpn

This comment has been minimized.

ckjpn commented Feb 22, 2016

I'd suggest considering the priority of what most visitors are looking for, and listing them right to left in that priority for the links at the bottom of the screen, and in each list either list alphabetically or in a prioritized order with the most likely to be frequently used at the top.

The "Tatoeba" list, for example, might be better placed on the right, since people don't read the Terms, Contact Us, Blog, etc. every day.

In the activity stream, perhaps people more often would access the latest contributions than the other 2 items.

Note that "Developers" is sort of a mix of 2 different things -- Developers of Tatoeba Code and Developers Who Use the Tatoeba Corpus data. Maybe this is OK, but it might also get confusing.

Additionally, you may want to consider that eventually Tatoeba.org will possibly not use a fixed-width layout, but something that resizes nicely to mobiles, like Bootstrap. If you can design a page the will work with the current fixed-width and will also work with something like Bootstrap, it would mean that what you create may be usable for a longer period of time.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 22, 2016

@billoliver has some nice ideas, too.

It definitely has the "web app" look.

Some of the white space could be removed and the random sentence block could be just under the 3 major "buttons" that have the brief explanation in them. The buttons might need to be renamed, or an additional button might be needed, but as a mock-up layout, it looks good.

Perhaps utilizing ideas from both of these layouts would be good.
For example, have the 3 (or 4) big buttons just under the search, but also have the lists of links after the random sentence block.

Perhaps we could change the tag line "It's collaborative ... even addictive" to something more descriptive - perhaps including the fact that it's a collection of sentences and the sentences are being translated by members who volunteer their time. Possibly, also include something saying that what is being produced can be used by developers and researchers under the CC-BY license. However, maybe that would make the tag line too long.

@kamillel

This comment has been minimized.

kamillel commented Feb 22, 2016

@ckjpn Many thanks for the feedback on the developer mix-up!
Maybe the footer links could be for the 'Developers Who Use the Tatoeba Corpus data' and the links for the 'Developers of Tatoeba Code' could go in the Community menu

I agree for the links, there are not in any particular order yet, this could be reviewed.

I used the current fixed size layout but I think it could be easily made responsive / converted to a grid (the search can squeeze, the random sentence too and the link lists can float)

Maybe we can keep the tagline short as it is but we can add a more detailed explanation in the 'About us' block.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 22, 2016

Note to both @kamillel and @billoliver,

If you know basic HTML, perhaps you might want to experiment with doing your mockups using Bootstrap.

http://getbootstrap.com/

While tatoeba.org may not use this particular way to make their site mobile-friendly, it's a popular framework and likely to not be too much different than what tatoeba.org will eventually use. (That's my guess, anyway.) I personally would highly recommend using Bootstrap.

I'm fairly certain that you can use just the CSS grid without needing to use all of BootStrap.
http://getbootstrap.com/css/#grid

For one of my projects, I was doing that, but I can't remember if I had to make any changes or not.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 22, 2016

If you would like to experiment with bootstrap, I have a rough template set up that I did last year.

You can download this and play with it if you want to. Please make sure you read the ABOUT file. Only a few pages in the folder have been bootstrapped.

http://www.manythings.orgl/tatoeba/bootstrap-quick-mockup-of-tatoeba-org.zip

Here are a few screen shots of what could be the "home" page with the window resized so you see how it might look on different devices. Note that I did this back when tatoeba.org had an "index" page for non-logged in visitors, and a "home" page for logged-in visitors.

This is the _tatoeba-template-MAIN-INDEX.html page.

screen shot 2016-02-23 at 05 56 32
screen shot 2016-02-23 at 05 56 01
screen shot 2016-02-23 at 05 55 45

@jiru

This comment has been minimized.

Member

jiru commented Feb 22, 2016

kamillel, thanks for the update. I prefer option 2 because I think it’s a wise idea to remove the developers section from the top menu. I believe developers account for a really low percentage of our visitors, and all of them are confident enough with browsing websites to find the information they are looking for. However, I miss the Want to help? section with Register as first link, because I thought it was a smart way to suggest that one needs to register in order to contribute. (This was one of our initial problem.) That said, people can browse the whole site and are just redirected to the login page whenever they click on a page that requires registration. This might be just enough.

About the stats, Trang said

I don't want users to be tricked into believing that we have an equal number of sentences in each language

Maybe we can solve this problem by including the numbers into a more precise sentence, like So far, we’ve gathered a total of X sentences divided in Y languages. (With some emphasis on X sentences and Y languages.) @kamillel Speaking of which, any particular reason you removed the top-five language stats? Showing them might be another way to avoid the "false publicity".

I wonder if that Activity stream section is very useful. This is mainly useful for contributors, like the Recent changes page of Wikipedia. It could as well be reduced to a single link to a page similar to the current home page, that gathers these 3 informations.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 22, 2016

Re: Speaking of which, any particular reason you removed the top-five language stats?

This is a related issue.
#842

When thinking about this a little, though, perhaps it's better to keep the page simple and clutter-free.

It's a fine balance between having too much information and not enough information on the main page, I think.

@kamillel

This comment has been minimized.

kamillel commented Feb 22, 2016

@jiru I left the top 5 out because I think the current layout is lacking of context and I'm not sure if that's useful for a first time visitor (especially if his/her language is not on the top 5). However if it's important for contributors we could have it for logged users (if they already know how it works they can get through more information).

@ckjpn as far as I understand the mobile version is still a work in progress so I wouldn't convert the home page without knowing how the rest of the website will work, but it looks like both propositions could be easily made responsive (and mixed together). And I'll be happy to work on the mobile version when it comes! (love making stuff responsive and working on mobile usability :) )

I amended the previous wireframe:
home7

I added the information about the license on the About (but it would be good to have a better wording from a native speaker :) ) and I shuffled the links so 'Developers' is more for the 'Developers who use the corpus', the 'Quick Start Guide' is in the 'Want to help/Contribute' list and I pulled some links that should be more general for the 'Need some help' list.

@ckjpn

This comment has been minimized.

ckjpn commented Feb 23, 2016

If the random sentence block is going to be kept on the main page, then designers need to take into account that this block is not always the same size.

I would suggest putting the random sentence block below the main parts of the page that members and visitors will always be accessing. That way visitors to the page will always see the content they want and need, and the way the page looks won't constantly be changing. If it's at the bottom, then everything will always be in the same location.

Examples:

  • Sometimes there is only one sentence, so the block is smaller.

1-only one

  • Sometimes the sentences are long, so even with just a few translations, the block is larger.

2-long-sentences

  • Sometimes sentences have furigana or other types of transcriptions which make the block larger.

3 furigana

  • Sometimes there are many sentences.

** Collapsed view:

4-34 collapsed

** Expanded view: (I think you should make sure your page design looks good in this case, too.)

5-34 open

  • There are times when there are so many sentences in the expanded view, that it's not easy to capture them all in a screenshot. (Sentences such as "Thank you" and "I love you.")

6-cases where too many to even make a complete screenshot

@ckjpn

This comment has been minimized.

ckjpn commented Feb 23, 2016

I'm not sure how others feel about this, but I don't like "Tatoeba" used this way.

"Tatoeba is a collection of sentences and translations."

It should be "Tatoeba.org" or "The Tatoeba Corpus" or something like that, I think.
Or, possibly "The Tatoeba Project is a group of people creating a collection ...."

Part of my dislike for just the single word is that "tatoeba" is a Japanese word meaning "for example", "for instance", "like in the following cases", etc.

It's sounds as strange to me as saying "Interestingly is a collection of ..." , or using some other part of speech out of place.

I think Trang's original naming of the website, The Tateoba Project, sounds much better than just "Tatoeba."

I do understand that over time, members of the project have started using the shorthand name "Tatoeba".

@ghost

This comment has been minimized.

ghost commented Mar 6, 2016

The new search bar is 3 times bigger in height than the current search bar. I'm not sure regular users will be happy about losing so much vertical space.

I thought about this while I was designing the home page, you just need to add a padding on the search section (gray box).

.search-section { padding: 40px 0; }

The search section isn't supposed to have a fixed height.

There is a feature with the current search bar that doesn't exist in the new search bar: if you select a language "From" and a language "To", and you click in the double arrows between the two dropdowns, it will swap the two languages.

Unfortunately this feature is not going work.

The search bar on an old mockup:
search-page

@ckjpn

This comment has been minimized.

ckjpn commented Mar 7, 2016

I hope the following doesn't sound too negative. That's not the intention.

Here are a few comments and suggestions. You may need to expand the image by clicking it to read the text.

screen shot 2016-03-07 at 08 49 39

In addition to those notes, I would really like to see something up near the top of the page that offers more help to new visitors, so this actually becomes "a home page that is more useful for the first-time visitor." It would be nice if we could just send the URL of the website to someone with no further explanation, and they could arrive at the website and know exactly what they can do and what the project is all about. I think the tagline "It's collaborative .... and even addictive" should be removed or rewritten. It's not really that informative about the project, in my opinion.

@ghost

This comment has been minimized.

ghost commented Mar 7, 2016

In addition to those notes, I would really like to see something up near the top of the page that offers more help to new visitors, so this actually becomes "a home page that is more useful for the first-time visitor." It would be nice if we could just send the URL of the website to someone with no further explanation, and they could arrive at the website and know exactly what they can do and what the project is all about.

@ckjpn So, you basically want a reference landing page. Am I right?

@trang We can use this one for the time being. Just change the color of the icon to white:
search page2

@ckjpn

This comment has been minimized.

ckjpn commented Mar 7, 2016

What I mean is to have something like what TRANG has currently put on the dev site, but to have something near the top of the page like I suggested earlier

(#947 (comment))

I assume that Trang considered this, but didn't like the idea. Also, I assume that no one else in this discussion likes the idea either, since no one voiced any support for the idea.

I do think the "help" for new visitors needs to be more than the few links I put there, though.
It's not a bad start, but it could be improved. One major problem with those links is that they jump to an off-site set of pages with a different top navigation. This, I think, is confusing to most people.

screen shot 2016-03-06 at 08 07 41

I think the way I suggested for joining the project is better, too.

It definitely helps new members understand that if they only want to browse the data, they do not need to register.

@trang

This comment has been minimized.

Member

trang commented Mar 7, 2016

@ckjpn you are mixing first time visitor and first time contributor. Most of our visitors will not care about contributing. Your suggestions are too targeted to contributors, which represent probably not even 1% of our visitors.

We can definitely improve a lot of things for first time contributors, but that's a completely different issue and we shouldn't burden the homepage to solve that issue.

It would be nice if we could just send the URL of the website to someone with no further explanation, and they could arrive at the website and know exactly what they can do and what the project is all about.

To me, what they need to understand is that:

  • we have a database of sentences and translations
  • they can search this database
  • they can contribute their own sentences and translations

Those are the main points, and I think the new homepage covers well those points. Anything else is rather superficial at this stage. Users don't need to know that they can contribute audio, or that they should contribute in their native language, when they're not even interested to contribute in the first place.

I would really like to see something up near the top of the page that offers more help to new visitors

Clicking on a help link should be ideally be the last resort for users, which is why it is fine to have help links at the bottom.

@trang trang added this to the 2016-03-12 milestone Mar 7, 2016

trang added a commit that referenced this issue Mar 7, 2016

trang added a commit that referenced this issue Mar 7, 2016

trang added a commit that referenced this issue Mar 7, 2016

trang added a commit that referenced this issue Mar 7, 2016

#947 Add context for 'Any language' in search
Can't use the default 'Any language', it gets translated into French by 'not any language'.

jiru added a commit that referenced this issue Mar 8, 2016

jiru added a commit that referenced this issue Mar 8, 2016

jiru added a commit that referenced this issue Mar 8, 2016

jiru added a commit that referenced this issue Mar 9, 2016

#947 Fix display of sentences in search results
We had this trick in order to allocate a little bit more space for
the form in the annexe content, but now the site content is no more
restricted in width, it’s not needed anymore.

jiru added a commit that referenced this issue Mar 9, 2016

#947 Rename “More” to “More tips”
“More” was previously used as a menu title. As a result, there are
existing translations for this string that are now incorrect, because
the meaning differs even if the string is the same. I’m changing it
to force UI translators to translate it again, and because it’s a bit
easier to understand.

jiru added a commit that referenced this issue Mar 10, 2016

#947 Good old green background for the description
An attempt to keep Tatoeba’s visual identity.

jiru added a commit that referenced this issue Mar 10, 2016

jiru added a commit that referenced this issue Mar 10, 2016

#947 Fix search button icon size on the homepage
The search button is set to 24px on the homepage, while it’s set to 20px
on the search bar, so we need to not fix its size in the SVG so that it
can be resized.

trang added a commit that referenced this issue Mar 10, 2016

@trang trang closed this Mar 10, 2016

@alanfgh

This comment has been minimized.

Contributor

alanfgh commented Mar 11, 2016

I agree with most of Trang's points, but wanted to comment on this one:

"Clicking on a help link should be ideally be the last resort for users, which is why it is fine to have help links at the bottom."

Maybe that's true when the whole page is not very tall. But when we have a Wall that is full of very long threads that can't be broken, people may very well give up after scrolling down for ten seconds or so (perhaps concluding that this is a site that has the "infinite content" layout, where as they scroll downwards, new content is added to the page). In that case, they'll never realize that there are helpful links at the bottom. I speak from personal experience. When I was new to the site, I didn't know about the content at the bottom of the page until someone told me.

I agree that the site should be designed so as to minimize any user's need to go to a help link, but if they end up needing it, it should be put in a place that can be found easily.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment