Best practice for requiring an “access code” before user can use app

To put things into context, we have an app that lets users earn money by just learning.

Because of this, we have to be quite strict about which users are allowed to sign up as we obviously have limited funds and we only want “authorized” users to be able to use the app.

We’ve created an access code system and previously we’d ask how they heard about the app and then after they select an option we ask them to enter an access code. It looked like this:

enter image description here

The problem we had with this implementation was:

  • Users got confused and would sometimes drop off.
  • Users who didn’t have an access code got confused why they couldn’t access the app and left bad reviews.

So, now we’re redesigning the flow, and our idea is to just have 1 textarea where they can enter their access code:

enter image description here

With this new design we’re hoping that it’ll be a lot more clear, and for the users that select that they don’t have an access code we’re thinking about letting them use the app without being able to earn money.

I’m wondering if all you experienced UX designers have come across an implementation like this before.

Any tips or advice would be great. Thank you.

Is it a valid or acceptable practice to develop a separate page to meet accessibility requirements?

I recently visited some websites that seems to be using either deprecated technology (e.g. Flash) or contain a lot of complex front end javascript code to create the interaction of the user interface.

Some of these websites provide a link or button that takes you to a accessibility mode page which strips all the unnecessary features and provide just the content that is optimised for screen readers and provide other accessible features (e.g. keyboard navigation).

With accessibility being such a big focus today, and inclusive design slowly being incorporated into many of the standard design systems, is it still seen as an acceptable practice to provide a separate page to meet accessibility guidelines (i.e. WCAG 2.0)? Are there other reasons why this might be a better strategy/option in the current design and development culture?

Best practice to link main website page to BETA website

I will explain briefly.

I am working for a new booking accommodation platform. They currently have two different websites:

  • the main website [landing page] with all the info about the business

  • the BETA platform [with the listings, profile dashboard and search bar]

For the moment if you are on the BETA and then click on the company logo on the nav bar you go back to the main landing page.

To go back to the BETA when you’re on the Landing there is a link on its respective nav bar and also all over the site.

NOTE: the BETA platform and the Landing page have different and separate nav bars and links [the design is similar] – The BETA has a profile dropdown menu that cannot be replicated in the main landing page since the websites have been done using two different services.

→ Now the company needs to have a proper homepage for the BETA platform with also some new features, but it also still needs to keep the main landing page.

Which you think is the best practice to link the two homepages without confusing the users?

Hope I was clear enough,

Thank you for you kind feedbacks


Is opening a dropdown after clearing it a good practice?

Currently in our application we have a dropdown that opens again directly after getting cleared. I imagine this can be handy for some users, but annoying for others. Is this a good practice to follow?

enter image description here

Context: This is being used in combination with other dropdowns that all act as filters. A list will get limited or extended based on the values (or when they’re empty) in those dropdowns.

What’s the best practice for screen navigation after invalid user input?

Consider an Angular app with many user inputs over screens A, B and C. Screen C needs valid inputs from A and B; B from A only; and A is independent. Suppose while on screen B the user enters invalid inputs.

Question: What navigation should I support for B in this case?

My current thinking is to disallow navigation to C due to data validity issues. But what about navigating back to B? On the one hand, there are no validity issues, and the user may want to look up screen A to help with screen B inputs. On the other hand, this would complicate the app’s state management. An alternative is to disallow such navigation, possibly with an option to restore the last valid inputs at B. As I lack experience in UX, I’d appreciate answers to help me with this trade-off.

What would be the best practice for creating an element with two actions?

Context: The user must navigate through a tree structure and select any one item from it’s contents (including its parents)

I find myself coming up against this situation often. I have a component that requires two actions of the user. In this instance, the user needs to be able to expand all the parents and children AND be able to select(or highlight) them.

enter image description here

I am struggling to find any good examples of this so I thought i’d put it out to the community to see if there is anything I could do.

The fragmentation of the page status introduced by multiple design patterns – best practice for page loading?

In one of the recent updates to Google Chrome, we have seen yet another method of dealing with page loading status with the introduction of the loading animation in the favicon area of the browser tab (by the way, the Firefox browser uses the side to side indeterminate loading state animation made notorious by LinkedIn).

enter image description here

As far as I can tell, this makes at least five or six different ways that you can indicate a loading status on a page, many of which occur simultaneously and makes the current state of the page content rather confusing for users.

So the ones that I have seen include:

  • Browser tab favicon area loading indicator seen in image above (is there a name for this?)
  • Mouse cursor loading indicator
  • Page header loading progress indicator
  • Modal/pop-up page loading progress indicator
  • Call-to-action button progress indicator animation
  • Bottom of the page loading indicator (e.g. when infinite scrolling is implemented)

Assuming that there is a ‘best practice’ when it comes to dealing with page content status, is there a reason why there needs to be so many different ways of indicating to the user that the status of the page is not completed loaded? Doesn’t this provide a very inconsistent user experience and add to the user frustration?

Best practice for long operations in webpart

What is best practice to implement a long running operation in a web part.

From what I have read so far it is recommended to use PageAsyncTask or a timer which ticks once to initiate data loading.

Now I have tested PageAsyncTask and the timeout is reached after ~7 seconds in my dev environment which is not enough time for my operation. The timer way causes another problem because it fires a postback which causes an issue in combination with the project summary web part. You you can find the problem description here: New SP Timeline web part not ajax friendly!

I need to make some calls in code behind so the only way around this I can think of at the moment would be to create a web service which is then called by JS inside the web part.