Create a home page that is more useful for the first-time visitor. #947
Comments
|
My current view on how the homepage could be improved rather looks like this:
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. |
|
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.
** 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.)
|
|
Hello! I would like to suggest a possible new homepage:
The main issues I'm trying to solve with this are:
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. Section 1The 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 2I 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. Section 3I 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. |
|
Thanks a lot @kamillel! I've mentioned your proposal on the Wall: I'll add my feedback later on today. |
|
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.
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 http://a4esl.org/temporary/tatoeba/ |
|
@kamillel @ckjpn |
|
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. |
|
But you shouldn't suppose they will react like you. Maybe they will like me or somebody else, who knows ? |
|
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. |
|
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... |
|
Many thank for your comments!
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 Use the Exported Data under the CC License. Random sentences |
|
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. |
|
Note that we already had a discussion regarding the random sentence before: 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. |
|
@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”. |
|
Here is the layout I'm working on:
|
|
Thanks for sharing your work @billoliver! Here's my feedback for both you and @kamillel. MenuI 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. 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). SearchI 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
I only had a very rough idea for these categories. This was basically what I had in mind:
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:
I was just thinking for the wording, maybe "Activity stream"?
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. |
|
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.
P.S. I wish I could write a detailed comment, but my writing skills are far from perfect. Thanks for your feedback, @trang. |
|
I also made some changes on my wireframe :)
Menu: Option 1 Menu: Option 2
Statistics |
|
@billoliver Thank you for your layout. It feels fresh. However, I can see the following problems:
|
|
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. |
|
@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. 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. |
|
@ckjpn Many thanks for the feedback on the developer mix-up! 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. |
|
Note to both @kamillel and @billoliver, If you know basic HTML, perhaps you might want to experiment with doing your mockups using Bootstrap. 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. For one of my projects, I was doing that, but I can't remember if I had to make any changes or not. |
|
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.
|
|
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
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. |
|
Re: Speaking of which, any particular reason you removed the top-five language stats? This is a related issue. 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. |
|
@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: 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. |
|
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:
** Collapsed view:
** Expanded view: (I think you should make sure your page design looks good in this case, too.)
|
|
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. 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". |
|
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.
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. |
@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: |
|
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 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.
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. |
|
@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.
To me, what they need to understand is that:
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.
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. |
Can't use the default 'Any language', it gets translated into French by 'not any language'.
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.
“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.
An attempt to keep Tatoeba’s visual identity.
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.
|
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. |
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 ...
** 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 2 - smaller buttons - smaller fonts.png
Example 3 - text order reversed.png
Original for comparison.png
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.
The text was updated successfully, but these errors were encountered: