3

A magazine website I am designing has a front page for each issue and on that page it has links to all the articles in that issue. Each issue's front page has a large figure at the top, to the right of the logo, to show which number the issue is. What icons can I usefully place to the right of the number to mean "previous issue" and "next issue"? Both have to go to the right rather than "previous" going to the left and "next" going to the right, because of how the large figure fits in with the logo.

I could use

◄ ►

or

< >

but those symbols are often used to mean "I want to go back to the page I was last on" and "I want to go forward to the page I was on before I came back to this page". What are the alternatives?

This is what I've got at the moment. It is the kind of magazine where I want to draw a lot of traffic to previous issues. These mockups are for the front page of a previous issue; the latest issue would not have the "next issue" icon, and its front page would not have the "home" icon either, because its front page is the site home page. In the version for larger screens, there is a nice aesthetic fit between the logo and name and the number. This would be lost if the arrows went on either side of the number.

Big screen:

mock top big screen

Small screen:

mock top small screen

closed as off-topic by Midas, Matt Obee, Joel Tebbett, msanford, Evil Closet Monkey Aug 15 '17 at 16:08

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions requesting Icon Suggestions are off topic. While the subject of icons is on topic, there's very little value in soliciting suggestions for a specific icon in a specific context. See this meta post for more information about this topic." – Midas, Matt Obee, Joel Tebbett, msanford, Evil Closet Monkey
If this question can be reworded to fit the rules in the help center, please edit the question.

3

Understanding of icons is based on past experience, and I'm unaware of a standard icon that is used for moving between issues of magazines. Depending on your visual design, you may be able to use enclosure and proximity to make navigating between issues clear:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If you have to use an icon, one option would be to use a stack of magazines with arrows on either side indicating movement through the stack. The Noun Project is a great icon resource. Something like this icon may work for you with arrows on either side, but I feel like it would be less clear than doing something like I showed in the mockup (if possible).

  • Many thanks for this. I have printed out the article by Jerry Cao. I agree the solid triangles work better than something based on those stacks of magazines. The big issue is whether I can put both arrows - or whatever I use - on the right of the number, rather than one on either side. I'm trying to dispense with words labelling the icons but perhaps I'll have to be less stubborn. – user96407 Aug 14 '17 at 8:14
  • 1
    @ruffle I find this much clearer than your mock-up precisely because it has arrows on either side and it has wording to remove any ambiguity over what the number means... I would suggest not clinging to either of those objectives. – TripeHound Aug 14 '17 at 10:33
2

I wouldn't get rid of the words for the icons, there are many articles about this. Here's the clearest interpretation IMO.

Magazine Nav