Jump to content

Cre8asiteforums

Discussing Web Design & Marketing Since 1998

  • Announcements

    • cre8pc

      Thank you! Cre8asiteforums 1998 - 2018   01/18/2018

      Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server. Thank you for your support as we turn 20 years old.  

Recommended Posts

Someone asked me about these and I'm not sure if they exist but I like the idea...

 

Say you have an ecom site or directory site, with pages that are 3 columns. The left sidebar has all the sorting/filters, middle has the results of the searches and right sidebar has maybe a combo of ads, support pages, whatever.

 

For mobile, those 3 columns won't work in a single column display. The right one can go away, but the left one is needed to complete tasks.

 

You know how how on some cars and music apparatus, how if you tap a button the CD is either inserted or ejected? (or you just press on the CD and it goes in).

 

I'm thinking of how the left sidebar could perform like a drawer that slides out into view, you make your selections for sorting, close it to slide it away and the search result is in full view.

 

There has to be something like this already out there. Has anyone seen it or knows where I might the CSS to make one?

 

Are there any SEO concerns for something like this? I'm thinking as long as the drawer can be slid back to the side out of view, this is ok.

Share this post


Link to post
Share on other sites

Sliders are all over mobile sites albeit usually packing massive javascript frameworks. Many that claim to be CSS still use JS to trigger.

To get you started with strictly CSS, zero JS:
* Pure CSS Off-screen Navigation Menu by Austin Wulf, SitePoint, July 2104.

and, of course, the exquisite offerings of Stu Nichols:
* CSS Navigation Menus, CSS Play: Doing it With Style.
Note: some of these free for personal use, mostly donation for commercial use BUT always free to play and learn to code to your own custom requirements.

Share this post


Link to post
Share on other sites

Wow~ Exactly what I was looking for!! Thank you so much :infinite-banana::infinite-banana::infinite-banana:

Share this post


Link to post
Share on other sites

I make things like that all the time, and then all the usability experts come in and tell me not to do it. :D

 

I like them too, but the real trick is the way to indicate to the user how to activate it. The traditional way is a little tab (like the one we had on that form you couldn't figure out how to close last week). The downside is obvious... you've got something in your way (at least a little bit) to indicate that you can open it, and then because of the way the standard way of doing it works, it's often counter intuitive to close it if you aren't familiar with that kind of slide out.

 

They are EASY to do though. You can take any div and hide it and toggle it with a tab or button somewhere. The difficulty comes in on how you are going to indicate that it exists (and have the user remember it exists and what it's going to do) without gobbling up real estate.

 

G.

  • Like 1

Share this post


Link to post
Share on other sites

I have a proposal for a new client to write up and something like this is badly needed on a section of their site for mobile rendering. I have qualms about it passing accessibility standards and have to check on that too and of course, the UX of it, especially since part of their target market are going to be non-techie users trying to figure out how to use the site on their phones.

Share this post


Link to post
Share on other sites

I think a lot of the things in the usability standards listed as no-no's are perfectly acceptable to the average non-techie user simply because that's what they are used to. If you have a tab on your phone and you want to close it, you click the tab again. We call it a no-no because in our technically oriented minds, it makes no sense. To the average person, it does.

 

Here's an experiment - I don't think that screenshot you sent me last week with the tab on it has any client identifying info - and the form itself is from a standard wordpress plugin so there are certainly thousands more out there that look exactly like that...

 

Post that screenie to your facebook page and ask everyone what they would do in order to close that form. I'd wager that anyone not in our industry will get it right almost instantly, and anyone who doesn't get it is because they are overthinking it like we do.

Share this post


Link to post
Share on other sites

I've been testing this sort of thing for a while and by far the best results come from a menu system that always displays. Second best results are a hidden nav with a 'menu' button. The least preferred is a sildeout. The main reason being people often don't know how to get rid of it or it's just too complicated.

 

Google is now making a big thing out of page load speeds and mobile friendly. The more caggage you put on a site the less Google is going to like you.

Share this post


Link to post
Share on other sites

For menus, I like a traditional dropdown select box - assuming the menu isn't so long that it can't show on your screen.

  • Like 1

Share this post


Link to post
Share on other sites

Which is why it was #2 in the list of preferred options.

 

Or you can reduce the number of links in the main nav, use a sticky header and make the UX a joy.

 

The problem with almost all themes is they go for the easy option: build the site with the full monty on a desktop and use the hamburger for everything else. I was looking at a site yesterday and they had huge complex mega menus. They then tried to make this work in a phone using multiple slideouts and arrows and concertinas and it was a complete mess. But if they had kept it really simple and linked the top level menu items to category pages it would have been so much easier to use.

Share this post


Link to post
Share on other sites

I get what you're saying and agree...however, I'm facing a situation that I'm not sure how to help with regarding a very large international search directory in one area of the healthcare industry.

 

I can't show the site, so picture a left sidebar jam packed (biggest I've ever seen), with sections of sorting criteria that appear and then if you click "more", it will display even more options. On a desktop it's long and requires scrolling. On mobile, it battles the other 2 columns.

 

The right sidebar can go away. The middle column is for the search results and it contains tabs for things like bio, desc., pics, directions, modalities...

 

Presently they do what Amazon does, which is to put a button for "Filter" under the header and users toggle back and forth, so you end up switching pages every time you need to change the search criteria. On the site I'm helping with, the filters are packed with options, so there is even a cognition issue there for users with short term memory probs or who are under stress (one of the behaviors of their target users.) Remember, this is an international directory trying to fit into the world of mobile, for a huge user base of all ages, cultures, emotional states, etc.

 

My thought was that shelves that slide out keep the user on one page rather than forcing them to keep toggling and scrolling. There is an increase in the use of the "back" arrow to go backwards, which is a usability no no, but users lose confidence with the toggle back and forth of pages thing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×