Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 5 down vote favorite

I am designing a system with the following characteristics:

  • Users view challenges that require them to submit a response
  • The challenges are broken up into 4-5 stages (e.g. submission, voting, finalists, winners).
  • Each stage has a set time (e.g. Voting lasts for 7 days before finalists are selected).
  • Users will be able to navigate to each stage, viewing the submission or activity taking place (or that had taken place).

Additional information that I want to communicate is:

  • The number of submissions or level of activity at each stage
  • A countdown to the next stage

I've considered using tabs, however I wonder whether there is a nicer way. Perhaps something that visually represents the situation.

What navigation approach can you recommend for this scenario?

share|improve this question
What personas have you identified? Who are the most of your users: participants or spectators? – Bartosz Rakowski Jun 27 '12 at 11:13
Also, I am not sure if the challenges have the same time line or are not synchronized? – Bartosz Rakowski Jun 27 '12 at 11:15
@BartoszRakowski To answer your questions: 1) In brief, the personas are potentially all staff internal to the organisation (it's an open platform). Some will require encouragement to participate initially. A large spread of familiarity with online tools but few novices. 2) The challenges may have different time lines. However the navigation in question would be for moving between stages within a single challenge. We have a separate gallery of challenges. – Jay Jun 27 '12 at 11:38
@Jay Might be worthwhile to look at StackExchange's election pages: StackOverflow example – C. Ross Jun 27 '12 at 12:35

2 Answers

up vote 2 down vote

I assume we land here as a result of navigating from "Hall of challenges":

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
I think there are some interesting ideas here. However I was a little confused about the intended area of user focus (This may be because I didn't provide enough details). Would the user have a clear idea what to do first? How the controls affect their journey? I like the icon approach and submission rank though. – Jay Jul 2 '12 at 9:50
I see you have an idea of the tabs with built-in progress indicators. Was your question about "tabs" only or also about a tab content? – Bartosz Rakowski Jul 2 '12 at 12:48
Navigation in general. Which could include many elements that enable and guide the user. The tab solution I've posted above is the core of the current direction. I've only shared a slice because I can't reveal the whole picture. Within the tabs I will have additional elements that allow the user to browse and interact with the submissions. The main problem was concerning the progression of these submissions through stages. – Jay Jul 2 '12 at 12:53
I've changed the mockup basing on your tab panel idea. – Bartosz Rakowski Jul 2 '12 at 13:19
up vote 3 down vote accepted

Update: After some experimenting I have decided to proceed with the following solution:

Tab timeline version 2 (Above this appears a summary of the challenge, below is tab contents)

Some of the reasons I think this works include:

  • They are identifyable as tabs and therefore the user knows how to interact with them.
  • They give a sense of progression. The tabs are a sequence.
  • The user can get a sense of when winners will be announced without being overwhelmed with information.
  • There is a sense of activity.

EDIT: Following JonW's toughtful feedback, I edited to include this updated version. It is still recognisable as tabs (you can see which one is selected) while the position and relationship of the timeline seems clearer. I didn't use the full width (yet) as I felt it obscured the tab effect.

share|improve this answer
1  
Not bad, but I'd put the large round items towards the left rather than the centre of the tabs. The way you currently have it the dark progress indicator path will flow over Ideas and then start filling over the top of the Finalists tab kind of giving the impression that the user is part-way through completing the Finalists information. If the round node is to the left at the start of each tab then the progress indicator will match the width of the tab you're progressing within. – JonW♦ Jul 2 '12 at 9:55
@JonW Thanks for the advice. Something very similar is one of the alternative layouts I experimented with. So it might be something to work on further. – Jay Jul 2 '12 at 10:00
Ah yes, I like your revision. Also it now shows that the tabs themselves are progressing, whereas your last version had a seperate feel to the progress indicators and the tabs. Combining them together works well. – JonW♦ Jul 2 '12 at 10:19
Nice layout. :) I'd suggest making inactive tabs appear as non-selectable. That's assuming there is no information to show before such stage occurs. But if you plan to display some info about the upcoming stages, then it's ok. – Bartosz Rakowski Jul 2 '12 at 12:45

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.