PDA

View Full Version : Mobile/Main-site: More mobile-friendly header layout



Runefox
01-23-2014, 12:44 AM
Currently, the mobile layout's header takes up a lot of extra space without being particularly useful; The line with the menu on it, for example, is otherwise completely unnecessary, and the text labels for inbox, settings, and log out are all relatively difficult to hit accurately.

Here's what it looks like normally:

http://home.runefox.net/wzl-mobile.png

What I propose is something a little more useful, with a little more mobile-motif, as well as a little less waste space-wise:

http://home.runefox.net/wzl-mobile-header.png

It saves nearly 90px worth of space while also providing more relevant information. The menu would continue to function as is, while the user avatar menu would provide access to the inbox, settings, and log out menu items.

Icky
01-23-2014, 12:57 AM
Personally, I think those icons to the left of the avatar may be even harder to tap than the links you said were already difficult. Otherwise, I like the idea of the smaller bar at the top.

Runefox
01-23-2014, 01:10 AM
Personally, I think those icons to the left of the avatar may be even harder to tap than the links you said were already difficult. Otherwise, I like the idea of the smaller bar at the top.

They're more of a block shape than a small line, so I'm pretty sure they'd actually be easier. Another method I toyed with would be to merge all notifications into a single larger icon, which definitely would be easier to hit.

Nightpaws
01-23-2014, 05:50 AM
Personally, I think those icons to the left of the avatar may be even harder to tap than the links you said were already difficult. Otherwise, I like the idea of the smaller bar at the top.

I like the idea of this design and it'd work well on things like the iPod/iPhone, and the Nexus 4/5, Galaxy S3/4. Though I think that the simplicity and layout would result in issues when trying to tap the menu icon on small screens like the HTC Wildfire S which has a tiny screen but is still on sale in most countries.

Ransom
01-23-2014, 06:06 AM
https://dl.dropboxusercontent.com/s/vwr09n4zatyz48c/weasylmobileconcept.png

Rune's onto something here, but like she did with my proposal for the collections system (http://forums.weasyl.com/vbulletin/showthread.php?3964-Suggestion-How-to-Strengthen-the-Collection-System), I'm gonna throw my own spin onto this.

Check out the message icons (jeez, Rune, you need to clear your inbox once in a while!). I like the use of icons rather than text for two reasons: 1) it's easier to identify at a glance; and 2) it's easier to hit as a button. The only problem is that space wasn't left for private messages. In my concept, all of the message icons have been included, and have now wider spacing from the Weasyl logo and user icon than in Rune's reimagining, making it less likely that you'll clumsily choose the wrong one.

In order to compensate for the fourth icon, I moved the Weasyl logo all the way to the left. That means that the menu bar needed to be brought back, but in this instance, it's much thinner and simpler than it originally was. Additionally, I made sure both the logo and the user icon neatly fit to the grid created by the developers — I'm a graphic designer and am very meticulous about such details, haha.

Overall, this concept is slightly taller than Runes, but still shorter than the original, and it should be able to pragmatically fit all of the message icons.

xarg
01-23-2014, 06:23 AM
Question: Why bother with a narrow hard-to-click menu bar at all... why not just have the Weasyl-icon function as the menu button and have it open a pop up menu with "Home" as the first option?

Question 2: Why force the user to click through to the category pages after looking at 6 images, instead of implementing an infinite-scrolling style option to load more images on the front page from all categories?

Ransom
01-23-2014, 07:10 AM
Question: Why bother with a narrow hard-to-click menu bar at all... why not just have the Weasyl-icon function as the menu button and have it open a pop up menu with "Home" as the first option?


https://dl.dropboxusercontent.com/s/1s0z7mvpozzf4iy/weasylmobileconceptv2.png

Ask and ye shall receive. I removed the arrows, because they don't really need to be there.


Question 2: Why force the user to click through to the category pages after looking at 6 images, instead of implementing an infinite-scrolling style option to load more images on the front page from all categories?


https://dl.dropboxusercontent.com/s/10keyahutr331zk/weasylmobileconceptv3.png

That could work if you anchor the menu to the top of the page. Just create "visual, literary, multimedia, characters, and random" categories under the Browse option, integrated into the main menu.

I also remembered that the staff have promised to fix the thumbnails, so I've included examples here in their normal ratios. I believe it's planned to show the title and artist as well, rather than having to hover over (which you can't really do on mobile), but I'm not sure how they plan to implement that. So for now, the concept has no text.

Edit: Come to think of it, the journals, comments, and watches all show up on the same page. If you intend to keep them that way, you can very well represent them all with one icon, reducing the total to three in the header.

Runefox
01-23-2014, 08:59 AM
I knew there was a notification type I was missing. :P My only problem with this last mockup is that it doesn't appear to have any obvious menu at all, which removes the ability to submit, search, etc, and also hit up the inbox, settings, and logout functions. If you intended to merge them all into the avatar, the visual cue that it's a menu needs to stay there.

EDIT: Also, infinite scrolling like that will only work with a lazy load. I think the major reason why the page is limited to a six thumbnails is for mobile bandwidth concerns.

xarg
01-23-2014, 11:09 AM
I knew there was a notification type I was missing. :P My only problem with this last mockup is that it doesn't appear to have any obvious menu at all, which removes the ability to submit, search, etc, and also hit up the inbox, settings, and logout functions. If you intended to merge them all into the avatar, the visual cue that it's a menu needs to stay there.

You could still have the tiny arrow cue under the Weasyl-logo and the user icon indicating the presence of a drop down menu.


EDIT: Also, infinite scrolling like that will only work with a lazy load. I think the major reason why the page is limited to a six thumbnails is for mobile bandwidth concerns.

Yes, it will work only with a lazy load. However if I am not completely mistaken the page DOM includes the 22 latest submissions in all cases anyway, they are just hidden with a media query CSS. Considering this, the page could pre-load a pageful or 1.5 pages of arts beyond what the user is already looking at and leave the rest to a progressive lazy load as the user scrolls down. It doesn't really have to even be an automatic load, you can show the button "Load more" when you reach the end. It would just reduce the amount of menu-maze-stumbling that the user has to do to reach the full list of most recent arts.

QT Melon
01-23-2014, 11:31 AM
There is way too much vertical scroll in the message center for mobile devices. It leaves more open to accidental clicks on notifications that you didn't mean to click when you are clearing them out. The prompt doesn't tell you what you clicked.

sethtriggs
01-23-2014, 01:20 PM
I too would like to see a lighter mobile mode here reducing the amount of graphics and space at the top.

-Seth

Runefox
01-23-2014, 02:50 PM
Yes, it will work only with a lazy load. However if I am not completely mistaken the page DOM includes the 22 latest submissions in all cases anyway, they are just hidden with a media query CSS. Considering this, the page could pre-load a pageful or 1.5 pages of arts beyond what the user is already looking at and leave the rest to a progressive lazy load as the user scrolls down. It doesn't really have to even be an automatic load, you can show the button "Load more" when you reach the end. It would just reduce the amount of menu-maze-stumbling that the user has to do to reach the full list of most recent arts.

The thing about infinite scrolling though is that it necessarily cuts out the sections for site news, critiques and streams. I think an infinite scroll feature would be best suited for the "browse all" link rather than the front page.

Also, this is unrelated to your post, but if the header is to be pinned to the top mobile app-style, the page should disallow mobile zoom (which breaks such things).

xarg
01-23-2014, 10:46 PM
The thing about infinite scrolling though is that it necessarily cuts out the sections for site news, critiques and streams. I think an infinite scroll feature would be best suited for the "browse all" link rather than the front page.

Also, this is unrelated to your post, but if the header is to be pinned to the top mobile app-style, the page should disallow mobile zoom (which breaks such things).

If mobile zoom is disabled, then there should at least be a choice presented for the user to switch between 1, 2 and 3 column listing.

As for the infinite scrolling, I agree. While resorting to a "Load more" button would allow the user to browse past it, it would make more sense to implement it onto the browse all page. Which brings me to my second point: The category landing page after you click "Browse Everything" on the front page needs to be done away with. There are more intuitive ways to present the user with the option to switch categories, you don't need to force them to choose again after they like JUST 5 seconds ago chose to "Browse Everything".

All of the categories on the landing page could just as well be moved to the front page/merged with what it already has.

Another issue: In the current way the front page works on narrow browsers, after you open the headers "Random Art", "Literature", etc. you cannot close them anymore. You are stuck with a long page. It would be more intuitive to be able to close the categories too.

Third issue: After you finally get to the site news, you are forced to scroll all the way through it before you get to "Critique Wanted" and "Streaming Now". There are many ways to solve this, the easiest being to hide everything past the first paragraph under a "Read More" link. Alternatively, promote the two categories to be up there with literature, characters, etc.

Finally: The footer is really awkwardly put together in the narrow view. Everything else flows nicely top to bottom, but the footer has awkwardly different sized links in 1-3 columns under each header.