The design in itself does not make it evident that you have to read from left to right, jumping zigzag up and down. You need to read and understand the text in order to see that. Even with the visual aids you propose the question would arise why the zigzag up and down, and it's a bit late here (around midnight) to try and think about a reason.

Andreas

Thanks, Andreas.

I went on assumption that an English-speaking person was going to scan the image from left to right, and given the content of the messages, it will be easy to recognize them as a sequence. It looks like I need to test this assumption on more people.

The reason for zigzaging is to allow for a larger font size without crowding things too much.

Hi apankrat
For me (non English speaker and around midnight:) it is: Conceive, Record > Prove and Reduce, Present...

apankrat - I think you could reduce this to 3 concepts/steps: Record, Present, Prove. this could help remove the zigzag confusion folks are experiencing. It also simplifies the information which can help in comprehension. And it may provide more room for you to expand the type size.

Thanks, guys. I appreciate the feedback.

Ben, what I was trying to do was to show how the timestamping augmented and fit into a typical creative process flow. It is really a smaller part of the process, and I am concerned that putting it front and forward may assign it too much importance, and that would rub people the wrong way.

I do agree with you that having whole five items to read through might be a bit too much for an average Internet Speedy Gonzales. I was considering employing an animation to reduce the number of simultaneous on-screen items, but then the animations are harder to get right than a static banner.

Yeah that is a conundrum - how to make it read just right but not lose any important details! Maybe the three steps should be: Create, Record, Prove. Then you can get into more of the details/explanations of the workflow with text content below the image?

Why not add a line?

Another proven solution: numbered steps (in circles or whatever)… could be on a line!

I agree with bert. Maybe add a timeline in between each line of text.

Or perhaps just arrows pointing from one step to the next.

Ben, that's a good point. I don't know why I haven't thought about that myself.

Bert, Darrel, I will give it another go. I had a version where there was a line waving up and down between the words, but it looked... erm... dorky... lol. Let me just put a simple straight line with five notches on it. It might just work.

The arrows too I tried, to me it looks unbalanced:

Now it looks like Conceive > Record > Prove, Conceive > Create > Present

It looks complex, which I'm sure it shouldn't. And frankly I think those arrows add to the confusion.

Scribble some alternate arrangements? I'd try to put it on one horizontal line, but there are many possibilities. For instance since you say it's a small step in the process, I'm thinking you might try making the type smaller, and the type for «conceive» very large, but use color/opacity and the background gradient magic you have to get the visual hierarchy right, and shift the visual focus onto the small step that your tool focuses on.

Kim, Nina, thanks for the comments. The version with arrows was an example of something that I tried and that didn't quite work. I should've been more clear about that.

Here is a version with a timeline. I think it is actually starting to get there. The background and gradients still need work, but my main concern if the implied left-to-right progression needs to be hinted in some way.

.

And a couple of more options:

.

.

I think the concept in the last one works the best.

I like this new approach. I also like the visual suggestion of a timeline - that fits well with the service. I would remove the arrows now (as I think it reads well now and doesn't require the visual hints), keep the timeline visual element, and use the brighter white "Record" text on the bottom. Try that out and see how it looks.

Thanks, Ben. I agree regarding the arrows to a degree. Some sort of directionality hint appears to be needed, few people I polled noted that the timeline reference is not obvious.

A simple animation would work, i.e. slide in Conceive, Implement, Record, Release and Assert from right to left in that order and assume the user is paying attention. Unfortunately for this option I just don't have time. So I have converged to the following version and this is what I will use for now:

Larger version is here if anyone's interested.

I would just extend the "Record" vertical stroke above the horizontal line.

A follow-up if anyone cares. In retrospect this banner was just too smart for its own good. The biggest problem was that it needed deciphering, it expected site visitors to think... lol.

In the end I converged to something far more simpler (not sure if the text is legible, but basically there's just a simple description of the site on the left and the invitation to join the beta on the right).

Don't know if anyone's following this thread, but here is the finalized version. Going for a minimalistic book cover look on the left hand side, and I think it's working.

Love the evolution of this project. Great work!