I have implemented an on-scroll loading which fetches some chunk of data every time the scroll reaches the end of the viewing area. After some point of time when there would be no more new data to be shown, how should I convey to this to the end-user from a UX point of view?
I was thinking of few options such as displaying a tooltip which automatically vanishes after few seconds. Other option would be something similar to rubber banding scrolling from Apple. Any other approach that can be used here?
Without knowledge of what the use-case is (i.e. has user performed a search or just scrolling a list from elsewhere), in general, two good options:
Follow Slack's "You are upto date! + icon" little image on the last
elastic scroll at bottom. Or, for example, "That's all we've got just
yet! Check your email for more or Search for [term] instead".
Use a progress-bar type of indicator like when you read an article on
Medium --> as people scroll down, they'll have a live indicator of
getting to the bottom of the list.
I don't like dead ends in my applications. If the user hits the bottom of your list and is still searching, he probably has the wrong search terms. I'd place a box along the line of "Haven't found what you're looking for? Try a different search term" and link that to the search box.
Even if it's not a search, once the user hits the bottom without successfully finding what they where looking for provide them with an alternative.
Hope this helps you.
Related
I've read many posts about this, but never found something satisfying and I wonder if perhaps new techniques have been developed since those posts.
Basically, I have a fixed navigation header on my site, and a search bar that will get nested and fixed just under it as users start scrolling down.
Most of my anchor/section links are located on different pages than where the user is getting re-directed to when clicking them (so, no "smooth scroll" is happening).
I cannot add padding or a class manually to each of these points because most of them are generated automatically...
Is there perhaps some jquery I could apply that would automatically show these anchor/sections point lower in the screen?
Help :)
what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks
Basically, they're your browser figuring out how to draw the changes that you made to the page.
Don't worry about getting rid of them -- if you did that, your site would be static.
However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.
Lets say that you got a job at Twitter.
And your job is to write the next version of the window that adds each twitter post to the screen.
If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).
A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once.
This cuts down on the number of times that a browser has to figure out where everything needs to go.
#Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference.
Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.
Here's a very handy list of properties and methods that trigger the layout (reflow) of a page:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
You want to minimize these calls as much as possible -- especially in situations where performance is critical, such as during the scroll event, or when animating large blocks of content.
You can use the "Profiles" tab and "Audits" tab to detect the performance of your code. The will give you a report about your codes.
You can reduce the page Recalculate,Layout and Paint's count by many ways.
Append many child at one time.
Hide elements before change them.
Give images and other elements height and width.
Firstly this is more of a design / interface type question, so has no right / wrong answer, but I would appreciate peoples opinions on this.
I am creating a comparison site, and I am unsure how to proceed with the search interface. There are going to be lots of fields, and each field will potentially have many values. Some of these fields will condense the values by using a slider, but others will need a checkbox for each value available (as multiple values may be needed).
When you change any field, it will automatically update the results below, and each fields options to show whats left to filter / search.
Now I had originally intended to have the top 5 search fields visible at the top of the page in columns, and limit those fields to the top 5 most frequently occurring values. Each field would have a show more to expand the options, and there would also be a show more fields button to expand the search even more.
When fully expanded, this definitely has the capability to fill a good size screen resolution. Obviously it has the option to minimise the form again, and the results will be shown underneath, but has anyone got any ideas how this can be layed out?
We have toyed with having all the search options in a side bar, but there are so many you would probably have to scroll down a full page height 2 or 3 times to see everything which would get annoying. Clicking the max / minimise button would definitely be easier in my opinion.
A few examples but in reality are not as complicated as what we need are:
http://www.autotrader.co.uk/
http://www.holidaylettings.co.uk/homesearch.asp
Any good examples / ideas?
Ended up just having it have the 5 most important fields, with the less important options hidden, then you can show more options, and show more fields.
Simples :)
I'm trying to modify overflow7 so that its even quicker to navigate - trying to make it more quickly browsable.
To do this, I want to add the notion of navigating "up" as well as the "back" direction that's so natural in WP7. So, if a user is browsing a StackOverflow question then I want them to be able to:
quickly navigate "up" to the StackOverflow page (this could be ten steps "back" otherwise)
quickly navigate "up" again to the list of all StackExchange sites.
Currently, I've experimented with using a "Home" icon on the application bar (but this goes too far currently - all Home requests go to the top level), and I've experimented with putting a hyperlink top-left on the page. I've also tried putting a series of them as a breadcrumb.
These experiments have so far had several problems:
they've required too much thumb dexterity - links at the top of the page are a bit of a stretch
they've looked a bit ugly
they've taken up too much screen real-estate (especially the breadcrumb)
I think I'm currently heading towards trying to use some sort of Up icon on the Application Bar - although the designs I've looked at so far don't really look like they fit with Metro...
So... I'm asking the Metro design gurus among us: what's a nice Metro-friendly way to achieve the effect I'm looking for? Is there a Metro-friendly concept I could link to in terms of verb and icon? I am trying to work with Metro, rather than against it.
This is one of those situations where there just isn't a good "metro" way to do this - the guidance really is, back key presses, until "home". In fact, some of the marketplace ingestion requirements enforce this in some situations.
In a project I'm working on, we have a nav menu where items are colored when the relevant section has information beneath it, or faded when there's nothing available to the user. In the case of an admin, these items may have no useful information but may still be clickable (since things like "Add news item" or "Add file" are implemented as sub-menus).
The call from On High has come down to make these admin items stand apart somehow. Since we're already using the faded text for unclickable items, I was wondering if there's an established UI convention for denoting that an item is clickable, yet contains no information.
And yes, I've already asked why we're bothering to show items that aren't available to the user. The short of it: because On High wants to.
Short answer, no I don't think there's a convention for this. Lots of people would say if its not applicable, don't show it. However, there's some debate on this. One of the reasons Microsoft started using The Ribbon in MS Office is because they wanted to get away from dynamic menus where options hid and showed 'intelligently'. Users couldn't figure out the rules for what appered where, and when.
Maybe separate the concerns here: 1) how to indicate the item is clickable, and then 2) how to indicate the item contains no information.
The first one is relatively well established -- blue underlined text. You can also make it look like a button Of course, if you've got a site-specific look for your hyperlinks, use that. Basically don't break the users' expectiations of what things are clickable.
Second, how to show there's nothing there worth clicking on. I think what you want is some visual indication of the priority/utility of these admin links relatively to others. Some options:
Can you move the admin links to the bottom of a list?
Add a number indication how many things are on the other side of the link?
Strikethrough on the text?
Since there are no hard-and-fast conventions on this sort of thing, just remember that anything you do which is consistent will work. Some things will just work better than others.
No matter what you choose, the user will learn after a few tries what the new method of empty indication is.
If it is well thought out and consistent, they will probably get it after a couple of clicks.
Also, remember that too many highlights, colors, fades, and underlines will wash out any amount of effectiveness at visually organizing your menu so it is easy to use. At some point it can actually get harder to use by over-organizing things.
Think about it this way: There are two boxes sitting on a virtual shelf. One is red and the other is blue. The selected box is identified by a differing color than the other box... Now, which is the selected box?