Gapminder / gapminder-tools-vizabi

❌ [OBSOLETE] Don't go here. Use ng2-tools-page
GNU General Public License v3.0
3 stars 0 forks source link

Tools page design improvements #232

Open angiehjort opened 8 years ago

angiehjort commented 8 years ago
  1. Let's move "Old bubble chart Report problem" block below the section with other charts: image On mobile let it go all the way to the bottom of the page, below all content. (see the gif in point 5) Reasoning: we want to promote another charts and stories even if there are problems with the current one. Don't promote "problems" and don't invite people to revert to the older version (but still give an opportunity)
  2. The invisible error message says "Something went terribly wrong". Let's remove "terribly". Reasoning: Yes, we want to admit the problem, but we don't want the user to think the problem is terrible. Please add the text to the error message: "We are working on the solution. Please report the complete link of this page (copy it from the address line above and paste it here) and tell us which device and browser you are using. Thank you." image
  3. On desktop: change the height of the vizabi container, so that it's not 90%, which is different all the time, but full height minus header. So that the container goes all the way to the edge. This will enable better usage of the vizabi side pannel on screens with 768px height (we should care because 1366x768 laptops are still very common, even i have one. 768px is reduced a lot by all the bureaucracy: windows taskbar, chrome download bar and bookmarks bar)
  4. on mobile please move the "share" button to the top bar, next to the menu button
  5. On mobile start the blue field right after the fold (see gif) mhi6wzqzad 1
  6. Replace "pre-alpha version" with "alpha version". If it doesn't fit on mobile, it can be a 2-line text or just "alpha" (try and chose ;-)
  7. Change CSS rule for the button list, so that it has vizabi blueish color in "large" profile
vizabi.styl, before:
.vzb-tool .vzb-tool-buttonlist {
    background-color: white !important;
}
after: 
.vzb-tool.vzb-small .vzb-tool-buttonlist,
.vzb-tool.vzb-medium .vzb-tool-buttonlist {
    background-color: white !important;
}
jheeffer commented 8 years ago
  1. Reporting problems is user feedback which is very important, definitely in our early stage where there may be many bugs. So 'Don't promote "problems"' I don't agree with. However, from 5. the report button seems not too far down .
  2. Yes, meaninful and helpful errors, always better!
  3. This needs a big redesign once stories are there and magic works better. Discovery always below the fold like it is now prevents many people from exploring.
  4. Sure.
  5. Same thing as 3. Would not make the whole screen just Vizabi. Existence of rest of tools page is unclear.
  6. Sure.