makeNavigation component (pagination, etc...) to browse results better

[serapath]

@todo

• make navigation concept

---

just wondering ... there is not a concept yet for all the possible features of:

1. the searchbar (what search/filter/etc... options) are possible?
2. the results (how can you navigate the results?)

The basic "pagination" is well known and works, but maybe we can do better than that.

• what are all the possible features somebody would want?
  • as a basic newcomer user you don't want to get confused
  • as a power user who has a job where he needs to use the tool every day, you want powerful features

I found the following inspirations:

• https://dribbble.com/shots/2511595-Pagination-Daily-UI-85
• https://jquery-plugins.net/tag/paging
• https://dribbble.com/shots/2351417-What-s-your-fav-pagination
• pinterest has more stuff https://www.pinterest.de/search/pins/?q=pagination&rs=typed&term_meta[]=pagination%7Ctyped

The thing is

• i want to see which page i'm currently on
• i want to know how many result i'm currently seeing per page
• i want to see how many pages there are in total
• i want to navigate back and forth
• i want to jump to any specific page (maybe somebody told me if i search for X and go to page 29 i can find the result)
• i want to maybe open all pages in separate tabs, so that they can pre-load while i'm browsing the first page on my first tab
• i want to open the first 3 pages, but also open page 8, 18, 30, 55, 110, to see if on those pages are still "good results"
  • if page 8, 18 and 30 still seem to have good results, but 55 does not, i check page 45 and 50 and maybe 45 is good, but 50 not
  • => so i want to open all pages from 1 to 45 ...or i want to navigate through, but limit/stop at page 45 and/or send a link to somebody
  • => so they would check results for me, but they now know they would only go through the results on that range predefined by me
• i want to navigate with mouse
• i want to navigate with touch
• i want to navigate with keyboard
• i want to navigate by setting custom flags on the page URL

...maybe there are more use cases... ....but that's how i think we need to think through all UI elements of the app

...basically the same as we were thinking about all the details on how to make the editor minimal without loosing features, by having a powerful autocomplete dropdown which actually includes basically even a file explorer and how that would navigate

• the same - i think - should probably be done with the searchbar (autocomplete, options, filtering, sorting, ...)
• the same - i think - should also be done with the results navigation (see above ...so pagination is only one aspect of that)

It's generally an attitude towards UI/UX design, where each little "visual feature" is a powerful visual metaphor that solves a certain related problem space instead of just a single detail (which causes lots of interactive visual elements on the page, which probably should rather be grouped)

I'm sorry otherwise, I don't want to fight. I would totally love to brainstorm and discuss the pro's and con's, but I would also love to have a quality standard that most apps out there don't meet and never will

[serapath]

@fionataeyang - ethereum/play#152 (comment)

I need to process the ideas, and make the wireframe or collect the demos that we may find the some good behaviors or experiences.
Then we can choose which one is better and good for the user using and easier.
Thanks for sharing me thoughts.

I always love to discuss and develop.