Issue #433: Layout changing icons and UX advise - design

design

#433 Layout changing icons and UX advise

Closed: Fixed None Opened 9 years ago by frantisekz.

I have been working on vertical layout mode for fedoramagazine theme. That theme is deployed also on our website mojefedora.cz and lots of users had been requesting vertical mode for articles.

I have coded and tested such mode but we need to include some switcher to the frontend. We would like to ask you for 2 images - one symbolizing vertical layout and one for horizontal.

Apart from that we would like to ask for something like UX advice - where we should place the switcher?

frantisekz commented 9 years ago

Vertical layout
vertical.jpg

frantisekz commented 9 years ago

Vertical layout (default)
horizontal.jpg

duffy commented 9 years ago

preview showing referenced Font Awesome icons
icons.png

duffy commented 9 years ago

Hey frantisekz!

'''For the icons:'''

[[Image(icons.png)]]

There's two Font Awesome icons that I think would work well:

horizontal.jpg mode: use the grid icon, 'th'
vertical.jpg mode: use the 'th-list' icon

'''Switcher Placement:'''

I'd put them somewhere in the upper right corner under the header bar. I'll attach a mockup to show more specifically the kind of treatment I think will work well. The rationale for this is that that's tended to be the standard place sites with alternative layout switches put it - so it's really following a general pattern. It should be under the header rather than in it because it doesn't control anything in the header, it controls the flow of the content area. So it should look like it belongs to the content area.

duffy commented 9 years ago

Mockup showing icon suggestions in context
button-mockup.png

duffy commented 9 years ago

Here's the suggestion in context - let me know if this idea works or if you need more help.

[[Image(button-mockup.png)]]

frantisekz commented 9 years ago

Thank you for the mockup. Looks great!