UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Putting in the numbers

22. März 2016, von stephan
Blog article image showing number inputs

Wuzzl.io is one of our own products. It’s the one and only foosball manager for you and your team. We at Liechtenecker love to play foosball! Since the beginning of the company it is a big part of our culture. It was only a question of time until we decided to create a lovely tool that manages all our games.

While we developed Wuzzl.io we focused on a few key challenges, one of these being the user’s need to quickly put in the results and go on with life.  On the result screen you’re able to fill in results for each team. It is just a small part of Wuzzl.io but still a quite challenging one. In this article we want to share our experiences of the design process and the thoughts we put into this part of our application.
 

You have to start with the customer experience and work backwards to the technology
Steve Jobs, 1997

animation_1
So this is how the screen looks like. After the game is finished the user needs to fill in the results. Our first approach was quite straightforward: A click on the score of each team will open an overlay with the numbers 0 to 10 to select. It takes the user five clicks to fill in the score and hit the save button.

The downsides of this approach

The first downside is, that five clicks are way too much to fill in the result, no matter how nice the UI looks while the second downside was something, we struggled while developing Wuzzl.io: not everybody plays until a team has 10 goals.
For a product like Wuzzlio every interaction is really important. People like it simple and every click you can avoid is often a good step towards a better experience. So we asked ourselves: How can we improve the interaction? First thing we did was automating the score input process. We always played till the first team scored 10 goals. That way the user can enter the lower score first and the app sets the second one automatically to 10. That made it three clicks instead of five. Yeah that’s a lot better but we still have got the second problem: We cannot be sure that everybody plays their games till ten. In fact, official games are played till 5. So this wasn’t the right solution.

Make it as easy as possible

We did some research prior developing Wuzzl.io, talked with people from other companies playing table foosball and read the official rules. At first, we decided to implement the rules by which we play in our company, but we already knew it was utterly important to provide a way to let each Organization choose their own rules. So we did a big update to the general settings of each organization in our February/2016 Update. Additionally to choosing how many goals are required for a victory, the user now has the option to play in „2 up mode“, which is frequently used in other companies. The „2 up mode“ requires the winning team to be 2 goals ahead of the other team. A game that has a limit of 5 goals may theoretically end with a score of 24:22.

Our result-input screen had to step up it’s game. We thought a lot about optimizing the way user input their scores, tried different approaches, measured the required time to put in the numbers and counted the clicks. We settled on an approach, that was visually comparable to the screen we used before the update. Under the hood is an utterly more complex logic to handle all the possible outcomes.
 
animation_2

The devil is in the details

This is how we changed a small but important part of Wuzzl.io. We put a lot of effort into these updates and spent hours researching but we are happy with the result and our users are too. You always have to refine your product and work on every detail to provide the best experience possible for your users.

 
 

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close