6

I want my users to be able to type in a page number in the pagination control on the bottom of the page. If they want to go to page 200 in the below example without this control it would take forever to move to page 344 then click back 5 pages at a time.

enter image description here

The problem is I feel like a simple textbox next to the pagination buttons is not very intuitive to people not familiar with users who aren't already familiar with it. How do I make it more obvious that typing in that textbox will take you to that page?

Sub question: Should it have a "go"/search button like shown in example B (better designed of course) or is it intuitive enough to just hit enter.

  • 2
    Actually, the ellipsis there should work for that purpose. Clicking on it ought to open an input field for users to type in the page they want to go to. – JotaRMonteiro Aug 20 '15 at 14:43
  • 1
    While I like that solution design wise is that really intuitive either? I'd like to think I'm pretty computer proficient and that didn't even cross my mind, would average users think to look there? – DasBeasto Aug 20 '15 at 14:54
  • It's going to be up to implementation. Either be it a button or a input field, it has to stand out for it to work (inner shadow/colour for input, different style button if button). the only material I really got here is this article from smashingmagazine (quite old, actually): smashingmagazine.com/2007/11/… – JotaRMonteiro Aug 20 '15 at 15:02
  • An issue with your examples is that the design of the buttons is the same as the input field. – Dave Haigh Aug 20 '15 at 15:20
8

Idea

Convert the current page indicator into the input field. Similar to Adobe Acrobat (see pic)

Adobe Acrobat Page Navigation

enter image description here

Then distinctively style the page number and prev/next buttons differently to this input field to make the input field stand out as such.

Mockup

enter image description here

Mockup 2

Use a style for the buttons that differentiates them even more from the input field. - based on tonytrucco's comment

enter image description here

  • 3
    I think the Adobe example partly works because they don't include a box around the other page numbers, so the input around the current page really stands out as an interactive element. I really like your suggestion, but I think the way it's visually represented will determine if it's intuitive for a user. – tonytrucco Aug 20 '15 at 16:07
  • completely agree tonytrucco, +1 – Dave Haigh Aug 20 '15 at 16:13
  • Great answer, all good ideas but I really like the Adobe Acrobat implementation I forgot about doing it that way, great for mobile pagination. Surprised I don't see that more often on sites. – DasBeasto Aug 21 '15 at 17:39
2

enter image description here

I think this might work as a solution, not much of reinvention of the wheel must be done if you want to use original command prompts that people are used to. Although I forgot to add "last" "first" around the box I have created. that would make it even easier. Basically you are adding placeholder text to the search box so people know what to type there.

  • I thought of that, a little clunky but may very well be the way to go (+1 when I can vote again) – DasBeasto Aug 20 '15 at 14:55
  • 1
    Good solution. My only recommendation would be to move the input label outside of the text box instead of using placeholder text. Placeholder text as a label saves space, but it sacrifices the label itself as soon as a user starts typing. – Benjamin S Aug 20 '15 at 14:57
  • on the second thought you don't need to add last/first words...as is right now should work quite nicely...if you want to make it less overwhelming make the placeholder text light gray instead of dominating blue. i think it becomes pretty self explanatory even for the least experienced user. Good luck! and thank you – Stanley VM Aug 20 '15 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.