I’m currently testing which system I’ll use for displaying and processing the words.
At first I thought about a word slideshow (as you can see in work in progress I – the photoshop screenshot). After Austin mentioned in the comments that this might not be such a good idea, I prototyped this solution and discovered that he was right. You can check the “word slideshow”-approach here: word slideshow
Especially if you are typing fast this gets very irritating.
Another approach is the “line switcher”. You basically have two rows of words. The first row is the one you are currently typing, the second one contains the ensuing ones. After finishing row 1, row 2 will jump one line (now being in row 1) and row 2 will be filled with the next line of words. Check it out here: line switcher
If you have any thoughts on improvements or maybe even a better approach, let me know in the comments.
After collecting your feedback and suggestions I created a few paper mockups and arranged the most important elements.
I’m currently working on the design (using Photoshop CS5).
Paper prototyping / Mockups
(the mockups are posted in chronological order)
Photoshop Mockup and Implementation
First I create a mockup in Photoshop (I usually use a dark background and a light color for the main areas).
After creating the mockup I start working on the most important area first (for the speedtest it is the Input field and the words the user has to type).
If you compare the Photoshop Implementation with the last paper mockup you can see a difference in how the words will be displayed. Instead of having a huge word block with 3 rows I now experiment with a “word-slideshow”. This hopefully saves space and will get rid of the irritating “line-switching”.
(Please help me improve my english by telling me my mistakes).