BAGAAR’s User Inyerface – The hilarious worst practice

User Inyerface

 

BAGAAR’S FRUSTRATION ANALYZED AND FIXED

 

Some time ago I saw an article on futurezone about User Inyerface and I was curious to find out what it is. The name says it all and the first page is already giving you a first impression of the following challenge. During the challenge, I sometimes even had to laugh lustily because some things are so purposefully absurd and detailed designed. I would maybe call it an interface escape room. I also mentioned that I walk right into the trap because of learned habits and design patterns, even though I know the rules. But now I thought, I will try to quickly analyze and fix the biggest issues with some quick photoshoping as an exercise. But before you continue reading – try to escape the interface!

BAGAAR

This is the Agency that has created the User Inyerface Game. Their focus lies on the internet of things but they are also offering services like User Experience and User Interface Design.

The Start

Even though not much is going on, on the first page, it’s already hard to go to the next page. Because of the visual hierarchy, you tend to click the big green no button. The button also has a hover action, so you would expect that it’s a button. Additionally, there are two more words (click and next page) in the sentence below styled like links and this makes it also more visible than the actual button (HERE) who leads you to the next page. Also, the wording is tricky and trappy. To make this site useful and fulfill the expectations, the green button has to change into the “Go” button. Besides, I would change the text below the button.

The Registration

When you reach this site, you literally get it inyerface. An enormous red cookie notice, a blinking process bar, a big timer, an annoying popup that appears regularly and much more. But these fails are maybe too obvious to mention. A really funny detail was the support chat, because when you click on ‘”Send to bottom” it disappears in slow motion. Let’s start with the input fields. Normally you begin with the e-mail address and not with the password. If you click into the input fields you have to delete the sample text, which should normally disappear after you clicked into the field. Furthermore, the typed text should change into a more visual color. The input field for the e-mail is also very interesting because it is split into three different fields including a dropdown. This dropdown wouldn’t make sense in a real case and thankfully I’ve never seen such password requirements. In terms of UX, it’s normally good to show the password requirements but then you would have to redesign the complete form. Anyway, for now, I would hide the requirements if they are necessary and show them on a mouse-over action. In terms of the password field, I would stick with a common theme, hide it but also giving the possibility to show it and also the strength of it. If you want to accept the terms of use you also have to pay attention because of the wording. The checkbox is also already checked what should not be done. Last but not least the “Cancel” button is highlighted and not the “Next”, which should be the primary button. I’m not sure if the “Reset” button is necessary but I let it on the form.

The Profile

The next page is also very special, but some things keep on sucking like the popup, the support chat, and the blinking progress bar. At first, you should upload an image of you to complete the profile but also there the primary button isn’t meant to be the upload button. Instead, the upload button is hidden in the subtext. At least it is visible as a link through a different color. In the image placeholder is, besides, a static loading icon without a reason. So I would change the buttons, the subtext and maybe add a „Remove Image“ button but that’s maybe not necessary. The bigger mistake is the following section where you should choose 3 interests and all checkboxes are already selected. Inside the checkboxes are two important hidden functions that are difficult to identify because of the law of common region and the positioning on the right end of the list. They look like two interests but they are actually function. If the checkboxes aren’t preselected you even don’t need these two functions. In the end, it’s the same game, the next button should be green and the other one should be „Cancel“ or maybe „Back“.

The Personal Details

At this point, some pain points are repeating, like the input field info text and so on. The title input field, for example, shouldn’t be a dropdown. Normally you differentiate between preposed and postposed titles but in this case, it’s only one field. Mr and Mrs also don’t really make sense because you have to set your Gender. So one of them is obsolete. The street number field is an input spinner where you can’t fill in a number with your keyboard, only through clicking the arrows, really bad. Choosing your age with the slider bar is also annoying. Filling out your age shouldn’t be necessary when you have a birthdate field. Based on this the age could be automatically calculated. The grayscaled country flag dropdown is also not a good solution. In combination with the name, colored flags and a list it could work better but the flags are not necessary. The next trap is in the month dropdown of the birthdate. The months are sorted alphabetically but they should in the regular order (January, February, etc.). I’m not sure about the functionality of the gender switch but due to the other buttons, I think the unhighlighted gender is the selected one. Finally, the buttons are as always interchanged.

Humanity

Don’t you just hate it when such a Captcha appears? The „normal“ ones are also horrible but this one even more. The checkboxes should be below the images and not above them. This is also something we learned from common design patterns and in this case, it could lead you on the wrong path. Another obstacle is the vague definition of the pictures you should choose. Eventually, the correct answer is to choose all the pictures. Further, the Captcha shouldn’t be a whole step in a normal process, it should be at the end of the form.

The End

GIF, what else? It’s not surprising that the end has also something funny for you. Maybe some information about the time would be great. For example, if you have reached a good result or an average one. I’m not sure what the intention behind this challenge was but it’s a really nice gimmick. Below the GIF is kind of an invitation but I’m not sure if this is meant seriously. Anyway, I maybe forgot something but I’m open to feedback or a discussion about this experiment. I have to notice that I would redesign the whole onboarding process if it would be a serious interface 😉

Thanks for reading.

Comments (0)
Join the discussion
Read them all
 

Comment

Hide Comments
Back

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Share