Scifabric / pybossa

PYBOSSA is the ultimate crowdsourcing framework (aka microtasking) to analyze or enrich data that can't be processed by machines alone.
http://pybossa.com
GNU Affero General Public License v3.0
745 stars 269 forks source link

The trunk test #357

Closed teleyinex closed 11 years ago

teleyinex commented 11 years ago

Using Steve Krug book Don't make me think I've been analyzing the Web navigation of PyBossa.

Steve Krug proposes the trunk test:

Imagine that you've been blindfolded and locked in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation:

He explains this test saying that nowadays people will reach the website not via the home page #356 but following a link usually from a search engine or social network (i.e. I usually share the app link in Twitter, not the home page).

He adds that you have to be "blindfolded" because those 6 elements should pop off the page so clearly that it doesn't matter whether you are looking closely or not.

I've done the trunk test, picking a random page of Crowdcrafting by searching in Google for it and picking a link that I've not opened before. The result is the following: page

As you can see, from the 6 elements, only 3 of them are "clearly" presented in the current web page:

However, the Title (this page as a title in the tab, but in the page is difficult to find out, because the Task name is small), Local navigation and "You are here" indicators are confusing. In this case, the chosen page has a breadcrumb solution ("You are here" and Local navigation), however it is not properly used IMHO. The breadcrumb is only use in every app tasks view url, so in other pages it will be even more difficult to answer these three items.

In summary, my proposal is to run the trunk test in every page that we can build right now in PyBossa and see which ones fail and which ones not. I think that we will only need to focus on the next three elements: Title, Local Navigation and You are here, as the other three are present in every single page due to they belong to the header template.

An overall idea will be to re-use the well known style of Twitter Bootstrap for organizing the information: proposal

Basically, we will have on the left side a navigation box for the Local Navigation that will be a full column, and then, next two it another wider column where we will place the clear Title, and below it the content. Then we will let the people know where they are by using colors, as Bootstrap does.

This should be used for all the pages, except probably for the Community section as there is only one level.

@PyBossa comments?

teleyinex commented 11 years ago

The previous commits implement the new local navigation for the Apps page. It should be much easier to navigate from now on. Check the screenshots:

As you can see, the left menu follows the user while you scroll, so you have the the local navigation always close to get to the different type of apps.

teleyinex commented 11 years ago

The new commit adds the local navigation for the application end point. In general, the commit tries to add some homogeneity to the structure, so it will not fail in any of the questions of the trunk test.

Here you have some screen shots of the new layout:

http://PYBOSSA-SERVER/app/slug

When you click in the Contribute button or in the local navigation option named Contribute you will get this:

Exporting the results

Checking the Tasks status

A new section has been added for managing the application: Settings

In the settings area you can: edit the info page

Or work in the Task Presenter editor (the editor has been changed, in order to follow the usual work flow of blog posts: you write the code, you click a button to see a preview). This new layout gives more space to actually work, and reduces the horizontal scrolling:

Import tasks is in Settings, we may need to move this to the Tasks menu, what do you think?

Finally, the delete app section has been improved:

teleyinex commented 11 years ago

This now has been improved according to the test, so closing it. There are some issues regarding the items in the local nav, but will be in another issue.