We start to publish articles, related not only to business models but to also. Let’s start with on a well known .

Classical subscribe form

Most of you, of course, face to the problem, when a business problem must be solved in the existing system, but you can’t break anything or redesign from scratch. In the vast majority of cases, all attempts (especially in large companies) are smashing at stages of coordination, development, security and other related systems and departments. 
So, we’ll call “refactoring UX” the process, when you change only your part in an interface. Isolated. Don’t touch backend or even API of the main system.

Refactoring and redesign — not the same things. Not mix it.

So, let’s back to subscribe form. It was a rainy autumn evening. We have taken standard form of two elements (input field and a button) and drawn what transitions could be between screens.

Transitions between screens

We get six screens, two of them are the result of the user error (defects):

  1. In the beginning, when the user tries to subscribe with an empty email field;
  2. When the user already has been subscribed and want to unsubscribe, he clicked not on the button “Unsubscribe”, but on the input field.

We have set the goal to leave the same elements, with the same functionality, and change nothing, except the site (layout, maximum). By applying “signs and properties” conception, we wanted to change functional, to vanish this two defects.

Once again, please note that this is not a redesign of the subscription form. This is refactoring, maximally isolated changes, concerning only on UX.

Here you can see the whole prototype in Figma:

Six screens transform to four. Plus, there are some very interesting effects.

But, step by step. Below is an analysis of the screens, with comments on the image and in the text.



Source link https://uxplanet.org/refactoring-ux-on-subscribe-form-e1e9f03d693f?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here