7

I'm working on an online auction site. We're working on functionality to make the user dashboard auto-update without refreshing, so a user can see bids update real-time. The bid price and time updates, along with the badge as the user is outbid or has won the item

auction site

We've come up with an idea to subtly highlight the tile when a new bid comes in. However our user won't realize it updates unless there happens to be a bid soon after they land on the page. They may also see the highlight, and no other bids come in for a while.

I'm looking for thoughts on what the right direction is:

  1. Should we just put a one-time notification to inform the user that they don't have to refresh?

  2. Or should we add a constant reminder in the form of a loading gif to indicate it's still communicating?

  3. Should we just leave it be and let the user discover they don't have to refresh the page?

Update

Took your advice. You can see the result in the gif: interaction

Improve this question
5
  • You might find some inspiration on financial websites that update stock information "realtime".
    – PlasmaHH
    Oct 15, 2014 at 9:31
  • Interesting idea. I just found this site: marketwatch.com Seems like they live update but don't always have something to show. to get around my problem, they actually reload the last change to give the impression that it's moving, even if it isn't. I'm not sure that's the best as it deceives the user that something is changing in the moment, although it had already changed. I wonder how 'truthful' to be to the user, if I get them to do what I want by fudging the experience.
    – Kristin L
    Oct 15, 2014 at 12:54
  • It currently experiences technical difficulties, what did you do? ;) I remember some website that did a "pulsing" of the price to very light green while trading was active, and when an ask/bid/trade came in, it was pulsing to a bright green for a longer moment.
    – PlasmaHH
    Oct 15, 2014 at 15:10
  • If anyone is interested, I implemented the 'searching' gif along with a pulsing when a new bid comes in. Second Story Auctions You have to sign up and look at your use dashboard to see the final result though!
    – Kristin L
    Oct 21, 2014 at 19:09
  • You might want to create an animated gif and upload to imgur and link it here..
    – PlasmaHH
    Oct 21, 2014 at 19:11

4 Answers 4

Reset to default
11

Proper feedback is one of the most important parts of creating good, intuitive UX. Leaving it be would provide very little feedback and may cause confusion among your users. From my experience in UX testing, the majority of users don't retain the information presented on many "one time" notifications, so its likely that this won't be the most successful option if used on its own.

A loading gif could be a decent solution but you have to be careful that the design isn't accidentally mistaken for an indication the page not loading fast enough. People often associate real-time information with continuous and seamless movement of some sort. Some examples could be that the timer actually counts down the seconds until the auction is closed, or a live stream of new auctions appears in the corner of the screen (excessive I know, but that example is just to help with elaboration), or even something as simple as a small red and green circle that rotates when an update is about to happen.

Overall I'd suggest a combination of the one time notification and a carefully designed (and well tested) loading gif as a refresh or real-time indicator. It would be best to point out what the indicator is within the notification itself, unless it is something completely intuitive (like a clock countdown) in which case pointing it out is not entirely necessary.

Improve this answer
2
  • All of this is spot on! I was really struggling with how to indicate things are updating without saying the page is slow. We actually discussed the idea of a stream of auctions, but we need to get an easier fix out first. I'm going to explore the idea of loading gif that doesn't scream slow. Thank you for your thoughtful response!
    – Kristin L
    Oct 14, 2014 at 20:02
  • +1 for highlighting that a loading animation could be misconstrued as the rest of the page is loading
    – Mervin
    Oct 14, 2014 at 20:05
2

In the case of bidding, history is relevant. I would add a ticker div on the page. Initially the ticker is hidden. When a new bid comes in, the ticker pops out a little with a message "New bids have arrived". The user can expand the ticker to show exactly what the bid change was ("+$105 on Wuesthof Knives"). As new bids come in, the ticker pushes them down in the stack (so newest is always at the top of the ticker). Timestamp each bid change.

Alternatively, consider placing a sparkline graph under each item, and show the changes since the user refreshed the page in a different color. That way, at a glance, the user can see the trend of the bid and the ones that have been updated.

Also yeah highlight the items that were updated with a subtle color.

Improve this answer
1
  • The sparkline graph may be a little extreme for my use, but the ticker with the timestamp is an interesting idea for this problem. Plus OI think it would be cool to see anyway!
    – Kristin L
    Oct 14, 2014 at 20:08
2

Nice Design :)

Coming to how you can show the content, I would recommend a combination of both using a loading animation to inform users that the new bid is being fetched. So it might look something like this

enter image description here Pulling in new bid from the server

This informs the user that a load is taking place.

Once the latest bid has been loaded, you could change the message to "Last updated 5 seconds ago" so that users are aware of the fact the content is being pulled in constantly and they dont have to refresh the page.

Here is a rough approximation of what I mean

enter image description here

Improve this answer
4
  • 1
    The "Last update 5 seconds ago" is an interesting thought. The updates come through a push system, so it could be a long time between updates. I like something in this vein though!
    – Kristin L
    Oct 14, 2014 at 19:56
  • I am not sure how much of a system load it is but if you could dynamically update the time the last update came in, that would help inform the user that the last update time is being pushed through as well and there is tracking for new data
    – Mervin
    Oct 14, 2014 at 19:59
  • That would be a pretty easy thing to accomplish. I like the idea of combining a loader and a last update as a quick fix to this problem.
    – Kristin L
    Oct 14, 2014 at 20:32
  • By the way, thank you for the compliment on the design! Also the advice
    – Kristin L
    Oct 14, 2014 at 23:31
0

Is this going to update at regular intervals (e.g. 10 seconds) or is it going to just be an open stream?

If it updates at specified intervals, a progress indicator that will notify when the next update will happen might be good.

Otherwise, I personally like a toggle above the updating content that will have live updating by default and allow you to turn it off. This allows both user preference, and it informs the user of the fact that live updating is occurring.

I like your idea of highlighting the individual items that were updated.

Improve this answer
1
  • The updates happen as they occur, so the timer wouldn't work. I like the idea of the toggle because it informs the user that there are these updates occurring.
    – Kristin L
    Oct 14, 2014 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.