On Infinite Scroll

Infinite scroll can definitely be useful. This is what you see on sites like Twitter where more results load as you get to the bottom of the page content. This asynchronous behavior helps moderate page load times by requesting more data as needed.

What doesn’t always work with infinite scroll is a footer. I was on a site where I was trying to read its “about us” statement, linked in the footer, but could never click on it since the page had infinite scroll.

screen shot of a webpage with the message "loading next set of posts" above a footer
Infinite scroll with a footer

As hard as I tried, I could not click the “Read more…” link. Even getting the screen shot took some ninja tricks.

Design Recommendations

  1. Don’t have a footer. Is it really necessary? I eventually found a link to the “About” page in the global navigation menu.
  2. Have a “sticky” footer. This could work like sticky headers do, where if you’re scrolling down the page it gets smaller or even hidden, then if you scroll back up, it shows again.
  3. Instead of loading more posts automatically, provide the user with a link to manually load more instead.

What’s the right solution? That comes down to testing and finding out what the site’s typical visitors expect. I’d opt for no footer on this page.

Adding a Bookmark in Safari – Part 1

I was on a call with my manager trying to login to an application that requires Safari or Firefox. He was using a Mac with Safari so I decided to use Safari as well, but on Windows.

Apple uses what I consider non-standard design patterns for some features. I say non-standard because if the other three major browsers are using similar patterns but Safari uses something different, well, it’s annoying.

I was trying to bookmark this application. Nothing in the Safari UI jumped out at me. I didn’t see anything that said ‘bookmark’ or ‘favorite’. I didn’t see a star icon. I was stumped.

screen shot of the Safari menu bar on Windows
Safari menu bar

I did notice the ‘plus’ icon to the left of the address bar but I was not willing to click it. Neither its location nor icon led me to believe it had anything to do with bookmarking a page.

I eventually clicked the ‘book’ icon, which opens a pane called “Collections” and allows one to manage existing bookmarks but does not include a way to bookmark the current page. UGH!

As it turns out, the ‘plus’ icon is the way to bookmark the current page. Such a simple task should not cause this level of uncertainty or confusion.

screen shot of Safari menu bar with plus icon highlighted
Safari menu bar ‘bookmark’ button

Design Recommendation for Safari on Windows

Safari on Windows should use the ‘star’ icon for adding a bookmark and that icon should be to the right instead of on the left, the pattern familiar to Windows users.

For comparison, here is how the other three major browsers do it.

screen shot of Chrome menu bar with star icon highlighted
Chrome menu bar

screen shot of Firefox menu bar with star icon highlighted
Firefox menu bar

screen shot of IE menu bar with star icon highlighted
Internet Explorer menu bar

Next time, I’ll examine the bookmarking UI patterns on mobile.