Welcome to WebmasterWorld Guest from 54.91.71.108

Forum Moderators: not2easy

Mobile design elements, how low do you go?

     
6:43 pm on Apr 18, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1094
votes: 103


A rule that I've always used with web design is to always assume that this is the first website your user has ever seen. Don't assume anything, make every feature as obvious and clear as humanly possible.

So today, that's been put to the test.

I had my girlfriend's mom help me beta test my new design. She's in her early 60s and uses Facebook on her phone regularly, Craigslist on occasion, and she says she looks at other sites but I don't know if she really means that.

So very first thing, she saw an Adsense banner at the top of the page (beneath the header, above the content), thought it was navigation, and clicked on it. That opened a new tab, and she was lost... no clue how to get back to my site.

Second, she had no clue how to get to the navigation. I'm using the hamburger icon next to my logo that's pretty standard, and when you click it a sidebar slides out from the left with navigation. But she's never seen an icon like that (or if she has, she's never used it), so had I not been there to tell her what to do she would have been lost.

Third, once she got to a classified listing, she couldn't figure out how to get back to the category listings. Clicking "back" on her phone's browser didn't occur to her, and neither did going back to the main navigation.

These were MAJOR problems, all revealed within the first minute.

So my questions for you guys are:

1. How do you make the mobile navigation even more obvious? I've duplicated it at the footer, and I have content with links spread throughout the homepage, but that didn't help... she was looking for navigation, and the hamburger icon didn't occur to her.

2. What do you guys think about breadcrumbs on mobile? I don't remember seeing many mobile sites using them and it's going to take up a bit of precious ATF real estate, but it would help them figure out how to get back to where they were.
7:07 pm on Apr 18, 2019 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Dec 11, 2013
posts:340
votes: 86


How was she able to open Adsense in a new tab (you do some CSS tricks there? ;)
Simple text links for navigation, not hidden by any icons, are the fastest to access and the least confusing; should especially apply to the most used links in the header.
8:59 pm on Apr 18, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1094
votes: 103


How was she able to open Adsense in a new tab (you do some CSS tricks there? ;) 

In retrospect, I have it going through DFP (a requirement for infinite scroll), so I probably set the target there. I know you USED to be able to do that, anyway... I haven't messed with it in a few years.

That's important for desktop users, so they can click an ad and not lose their place on my site. But for mobile users, it confused at least the one user. I don't really want it to open in the same tab for anyone, I just need to figure out some way to make it more obvious that it's an ad... but without Google saying that I'm drawing too much attention to it.

Simple text links for navigation, not hidden by any icons, are the fastest to access and the least confusing; should especially apply to the most used links in the header.

I have at least 60 things in the navigation, though :-( On desktop it was easy, I set up a horizontal navigation with 9 main things, and when you mouse over them you'll see several things in the sub-navigation.

But on mobile, where I have 300px of width to work with... that's a challenge.
9:28 pm on Apr 18, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15636
votes: 795


assume that this is the first website your user has ever seen
...
I'm using the hamburger icon next to my logo that's pretty standard
I had never heard of a hamburger menu, and would not have recognized one when I saw it, until I read about it on the present site ... which, last I checked, is not made for people who have never seen a website before.

This is really true. The damn things just sprang up like mushrooms and suddenly they’re everywhere.
10:32 pm on Apr 18, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9712
votes: 925


I prefer using words for navigation, it is more precise than hamburger/macaroon icons, though having the icon AND the word underneath it also works.

Menu
Index
Site Nav
Table of Contents

Have been tried on my various sites over the years. The two "winners" in my testing have been "Menu and "Index".

With convoluted menu structures destined to appear on small screens I try to break it down to three sections on front page, leading to second tier with the extended part (and more info, of course!). Mostly depends on the content and complexity of topic.

YMMV
10:44 pm on Apr 18, 2019 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Dec 11, 2013
posts:340
votes: 86


where I have 300px of width to work with...

Do you know anybody who would use 300px viewport? I'd focus on > 360px these days.
9:25 am on Apr 19, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9712
votes: 925


I deal with max-width, which fits anything less than that.

Presentation of content is the biggie, with priority of same, descending, secondary. Users have the attention span of gnats and pages should be offered with that in mind.

These are interesting things to address, but in all cases, KISS is the difference.
7:51 am on May 13, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:759
votes: 150


I restrict the navigation bar to the very strict minimum, no more than 3 links. Also, I make links t look like "buttons", different background color, borders, padding. Do not hesitate to add margins around links, to make them easily identifiable. Within text, I am also adding a background color to links, a light gray (on white background) to make them pop better, but not too much.

Avoid getting too many links on the screen at the same time, it makes it hard to scroll a page without accidentally taping a link.

As for page layout itself, I increase font size, I am getting old, and hate small text, even 1rem looks "small" to me :). Also, I am increase line spaces.

No ads , on mobile. More precisely, and as I already said it in the Adsense's topic. I removed all ad slots (for mobile visitors) and just use the anchor ads. (not vignette) I sill can't make my mind if these ads are better on top or bottom of the screen.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members