Speedtest Redesign: Work in progress II

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.

Speedtest Redesign: Work in progress I

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).

Speedtest Redesign

Update: Work in Progress I

After almost 4 years I finally decided to start redesigning my typing speedtest. Redesign might not be the appropriate word though there will be definitely a new design but I also plan to improve and extend the functionality (without corrupting the core experience).

These are the features/improvements I currently plan on implementing:

  • a new Layout
  • improved WPM calculation – currently I just count the number of words (silly me) which is apparently wrong: Words per minute
  • higher cheat prevention – as for almost every application which runs client-side, its really hard to prevent cheating. I will research possibilities to prevent cheating, maybe we can finally have a nice little ranking list without those pesky cheater ūüôā
  • “smooth” next line – everytime users reach the last word and wait for the next block of words, their typing flow is interrupted. This is bad… really bad! Definitely need to fix that.
  • Increased site speed – the speedtest is quiet optimized already and with the additional features I’m a little bit concerned about the site performance (afterall over 1.000.000 users worldwide use the speedtest every month). A few things I will try to keep the load as small as possible:
  • Login with Facebook or Twitter, save your results and see if you improve over time
  • Gamification/Badges: I might add badges to improve your typing experience like: “typing more than 80 WPM, 10 times in a row” or “typing more than 100 WPM”. This won’t be in the first release but if the login system will be implemented there is a high chance that I add a few game elements
  • I’m not yet a logo designer but I will try to create something sexy and recognizable

But before I start hacking one line of code I need your feedback. If you have any suggestions, things you don’t like with the current version or features you might enjoy, just leave me a comment. Or, and this might be even better, participate on my uservoice forum. You can make suggestions or vote up suggested features from other users. I won’t implement every feature. Actually I will only implement the most requested features, so VOTE!

If you are interested in the current development, just follow me on twitter. If you find a mistake, please let me know in the comments!

ZenTodo.net – mein “inhouse” Todo-Tool jetzt f√ľr jederman

Update 21.03.2011: MakeUseOf.com Review => ZenToDo: Easy-To-Use & Effective Todo List Manager
Update 31.03.2011: Allblogs.de Review => ToDo Listen online verwalten ‚Äď ZenToDo

Warum ein weiteres Todo-Tool wo es doch schon abertausende davon gibt?
Nunja, √ľberzeugende Argumente habe ich daf√ľr ehrlich gesagt keine, ich kann nur sagen etliche davon ausprobiert zu haben und keins wurde meinen Anspr√ľchen gerecht. Ich brauche kein Tool was mit Features nur so √ľberquillt. Ich m√∂chte damit keinen Einkaufszettel schreiben, noch m√∂chte ich alle Aufgaben eines Projekts aufeinmal sehen. Ich m√∂chte:

  • ein harmonisch, minimalistisches Design
  • nur die wichtigsten Features (abhaken, l√∂schen editieren)
  • Todo’s einfach hinzuf√ľgen
  • meine aktuelle Aufgabe hervorgehoben
  • maximal 7 Aufgaben aufeinmal sehen
  • Aufgaben einfach sortieren (per drag&drop)
  • meine Aufgaben nach Projekten sortieren

deshalb => Zentodo.net

Entstehung von Zentodo

Die erste interne Version habe ich im August 2010 erstellt, man konnte die Aufgaben beliebig auf dem Monitor platzieren, auch √ľberlappend und sogar ein Verlauf war eingebaut (gel√∂schte/abgehackte Elemente konnten dadurch wiederhergestellt werden). Die Entwicklung hat noch Spass gemacht, doch benutzt habe ich es danach nicht mehr (nur ein paar Zeilen Code wurden f√ľr die neue Version recycled).

Es ist eigentlich zu peinlich den Screenshot zu zeigen, aber was solls:

Die ersten Wireframes und Skizzen

Danach passierte erstmal ein paar Monate garnichts, bis ich im Dezember wieder Stift und Papier zur Hand nahm:

(Skizze 4 und 5 kamen erst nach dem Layout in Photoshop)

Das ganze nun mit Photoshop

Da ich nun eine grobe Vorstellung hatte, konnte ich mit Photoshop ein wenig rumspielen:


(leider habe ich keine Zwischenschritte)

Fazit

Viele werden kein Interesse an ZenTodo haben, noch mehr werden mit ihrem jetzigen Tool zufrieden sein. Dennoch, gerade wenn man selbst Webentwickler/Designer ist oder generell seine Projekte mit dem PC erstellt, f√ľr den k√∂nnte ZenTodo ein Blick wert sein. Einfach anmelden, ausprobieren und selbst entscheiden, viel Spass dabei! ūüôā

Speedtest – neue Sprachenauswahl

Da gerade der 3. Geburtstag meines Speedtest war, dachte ich mir mal wieder was daran zu optimieren. Eigentlich bin ich gerade beim Speedtest vorsichtig was zu ändern (never change a running system). Da aber in letzter Zeit immer häufiger eMails bei mir eintreffen, indenen jemand eine bestimmte Sprache vermisst, die aber in der Liste vorhanden ist, dachte ich mir die Sprachenauswahl ein wenig zu tunen. Das ist dabei herausgekommen:

Sollte jemand kein Javascript aktiviert haben, bekommt er folgendes zu sehen (auch wenn der Speedtest ohne JS nicht funktioniert ist es eine gute Ergänzung):

Und hier nun noch wie es die letzten 3 Jahre aussah:

Das Flaggen Paket habe ich mir hier gekauft: IconDrawer.com

WordPress Handbuch kommt gut an

Eben habe ich eine nette Email bekommen, die mir jemand zum WordPress Handbuch geschrieben hat:

Hallo Christian,

mit Vergn√ľgen habe ich dein Handbuch f√ľr WordPress verschlungen und jeden einzelnen Schritt gleich umgesetzt.

Leider kam ich irgendwann an den Punkt, an dem es nicht mehr weiter ging. Wie ich gesehen habe, sind weitere Kapitel vorgesehen, jedoch noch nicht anklickbar.

Nun wollte ich nachfragen, ob Sie weiterhin an dem WordPress Handbuch arbeiten oder ob es mittlerweile stillgelegt worden ist, was ich sehr schade f√§nde. Ihr Handbuch hat mir sehr gut gefallen und ich habe mich durch Ihre klare und einfache Schreibweise sehr gut aufgehoben gef√ľhlt.
Gerne w√ľrde ich noch mehr √ľber dieses Thema lernen.

Ich w√ľrde mich √ľber eine Antwort freuen.

(leicht gek√ľrzt und anonymisiert)

Das freut mich nat√ľrlich sehr! Ich hatte schon vorgehabt, weitere Kapitel zu schreiben und auch √ľber die kommenden Jahre das Tutorial zu erweitern und an √Ąnderungen anzupassen. Diese E-Mail hat mich aber nun motiviert damit direkt weiterzumachen!

Speedtest РVerbesserungsvorschläge

Seit ca. 2,5 Jahren gibt es nun den Tipp Speedtest bzw. den Typing Speed Test (engl. Version). Seitdem habe ich auch einige Verbesserungsvorschl√§ge bekommen die ich nun hier im Blog auch mal festhalten werde. Ob und wann ich diese Vorschl√§ge umsetze steht allerdings noch in den Sternen, aufjedenfall werde ich hier im Blog dann dr√ľber schreiben.

Richtige Texte statt zufälliger Wörter

Die wohl häufigste Anfrage, zusätzlich zum tippen von zufälligen Wörtern soll man auch die Möglichkeit haben, sinnvolle Texte zu tippen. Viele erfahrene Tastschreiber sagen dazu, dass dies eher die echte Schreibgeschwindigkeit wiedergibt, als eine Zusammenkettung von zufälligen Wörtern.

Highscore

Leider ist der Speedtest nicht ganz cheat-sicher und wird er auch nicht sein, da es sich hierbei um eine (hauptsächlich) client-seitige Anwendung handelt. Dennoch habe ich in einer 2. Version des Speedtests mal einen Highscore eingebaut, der nur die Ergebnisse der letzten 60 Minuten in die Wertung einbezieht. Dadurch kann man zumindest den Einfluss der Cheater etwas rausnehmen.

Facebook-Empfehlung, Badge korrekt darstellen

Einige User möchten ihr Ergebnis auf Facebook posten, doch im Vorschau-Fenster wird bislang nur das Werbebanner angezeigt und als Text wird nur der Speedtest-Werbespruch veröffentlicht. Ideal wäre es, wenn einerseits das Ergebnis des Users als Text und zusätzlich noch der Badge mit dem aktuellen Ergebnis angezeigt wird.

…weitere werden folgen…

Aufenthaltsraum – neue Scribble Icons

Ich bin immernoch auf der Suche nach einem passenden, einfachen Icon f√ľr mein neues Projekt Aufenthaltsraum.net.

Nach ein bisschen scribblen kam ich zu folgendem Resultat:

Das Icon hat folgende Bedeutung: graue Kreise flie√üen in einen Raum und werden darin bunt. Ich denke als Metapher f√ľr den Aufenthaltsraum recht treffend und auch nachvollziehbar. Jetzt muss ich aber erstmal sehen wie sich das ganze in Photoshop umsetzt und ob es dann immernoch vern√ľnftig wirkt.