Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We are writing an app that manages workflow processes. Users needs to be able to identify which task have been updated since their last log-in and which tasks require their input. The tasks are listed in a grid. There is also the added complexity of the tasks being updated by other users while the user is logged in. What would be an intuitive way to keep the user informed of the state of tasks?

I was thinking of using a orange dot next to tasks that require their input and bold-ing the text for tasks that have been updated since the previous log-in.

share|improve this question
add comment

4 Answers

up vote 12 down vote accepted

Try to use the Yellow Fade Technique (YFT), nifty way to make a spotlight on recently changed area. But the YFT can be indicated also for a case where the items are recently edited or updated.

Its also used here in stackexchange.

Next moving into another solution, where you may highlight the items with different color BG making the items prominent that they have been updated.

Also closest thing without a BG change but only by keeping the text bold, which is the way GMAIL handles items that have come in recently, which is once again a update on the inbox.

Unless the refresh happens in real-time, I believe the updates cannot be viewed by the logged in use, since their session will not be in real-time. If its real-time then the item needs to be treated in the same way as how GMAIL manages to bring in the new mail, while on clicking refresh.

share|improve this answer
    
I like the yellow fade technique idea –  Jaco Briers Feb 17 '12 at 16:48
    
I like this method too, but the problem I that if you have more than say 5-7 updated items, you only give the user a couple of seconds to memorize all the updated items. If its more than 5-7 (working memory size) the user is likely to not remember all of them. Which kinda defeats the purpose. I would suggest that along with YFT have some less transient method, like may be a symbol that means item edited right next to the updated items. –  Viraj Feb 21 '12 at 18:32
add comment
  • You could use the same idea that Facebook does with notifications. Show a message indicator as a dropdown menu which is great if you want to to track multiple to-do lists.
  • Or show a list of recent changes since last visit on the home page.
  • If the changes occur in real time also take advantage of the title tag so that people could see if something happens while they're working in another browser tab.
share|improve this answer
1  
+1 for suggesting to update the title tag –  Jaco Briers Feb 17 '12 at 16:48
add comment

Most email shows unread email by using bold titles, and read email with normal titles. This might work in your case, too. Depending on the size of the grid, you may want some other way to announce that there are issues (with changes) that need attention, such as putting the orange ball (like the badge used in some applications) in a fixed location on the screen.

There are some other things you might consider, if the grid is so large that the updated items might be missed when simply glanced at. A show-next-issue button, or a filter to show only open issues may be useful.

share|improve this answer
    
+1 for mentioning that the grid might be too large: it sparked the idea that all items would not be visible in the grid all the time, so maybe a update notification alert at the top of the grid might be the best option –  Jaco Briers Feb 20 '12 at 7:20
add comment

The YFT Yellow Fade Technique is a nice way to highlight a single updated item, however it sounds like you could have multiple posts updated, and once the yellow has faded you will need another UI signal to show which posts are new.

Other ideas to highlight updated posts in the grid:

  • You could use a thin orange border (1-2px) on the left of the post. Unread Google+ posts have a thin blue border. Post that are currently being edited could have dashed orange border.

  • Use the top right corner of the post as the area for indicating updates and editing, in a similar way to that in which twitter displays a post you have retweeted. Use an orange corner to show a post that has been updated. And use and orange corner with an editing icon when the post is currently being edited.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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