In the WiFi authentication system, Portal certification pages are the most visual level of what users see.——The first impression of WiFi by the user is determined by how much it looks, how fast it loads and how difficult it is to fill out a page that automatically pops up after the cell phone connects to WiFi.
Load speed is the first thing to experience.
The most vulnerable to complaints about Portal certification pages is not actually design and look."Why are you so slow?". The experience is basically ruined when the user waits several seconds after it connects to WiFi and does not pop up a page for authentication, or comes out but keeps going around the loop. The slow root of the loading is usually not on the page itself, but at the infrastructure level.
The first common reason is the deployment location of Portal servers. If Portal servers are deployed on cloud or headquarters, and user terminals are located in branch WiFi networks, HTTP requests for authentication pages need to be made via public networks or cross-lines to reach the server. Delays in connection with page loading are bad.——At least one room or the same urban area network is guaranteed.
The second reason is the size of the page resources. Some Portal certification pages have a large number of images, CSS and JS files with single pages larger than 2MB for their visual effects. In uncertified state, the terminal's upper bandwidth may have been limited by speed——After all, you haven't passed the certification. Cyber-Tact is a limitation.——Loading a large volume page is very slow. Portal pages should be designed in the light of the minimum possible amount, with single pages within 200 kB and so do not have to be high-level maps if they can solve problems with text and small icons.
Show page on the moving end fit
Most WiFi users now use mobile phones, and Portal certification pages show abnormality on the phone.——Fonts are too small, input frames too narrow, button points are still intact——Basically it's useless. But there is a considerable amount of WiFi certification, and Portal pages have a very rough mobile end.
The moving end fits more than one."Respond Layout". There is also a site unique to WiFi: the terminal connects WiFi and automatically ejects a system-level Captive Portal test page. On iOS, this page is a simple WebView for Safari, and on some Android phones, it is a simplified version of the browser that is placed in the system. The renderer capacity and standard browsers vary from one system to another, with some CSS attributes and JS functions not supported. The practical experience is that Portal pages minimize too complex interactive designs, and form validation logic is placed on the server end rather than front-end JS, without relying on localStorage or cookies to keep them in a state.
There is also a detail that is often ignored: type properties for input boxes. On the Portal page, mobile phone numbers are entered if type="number", the iOS keyboard will show only numbers but also include spaces between numbers in input——This creates an additional workload for backend data cleansing.
Repeated click protection for text message authentication buttons
Portal authentication page"Get the authentication code"The double click protection for the buttons looks like a front-end detail, actually directly related to operating costs. Each text message code is lined up if one of the guest hands hurrys up a few times."Get the authentication code"A few cents of money goes out. If there's tens of thousands of people in one day, it's not a small amount of money.
The standard approach is to:"Get the authentication code"button clicks, and you count 60 seconds to no more. The countdown logic is put on the client, but there's also a brush protection mechanism at the back end——The same cell number cannot be repeated for 60 seconds, and the same IP will have a limited number of hits within a certain time.
Could not close temporary folder: %s
The question is often:"Authentication failed. Please try again."——The user sees no idea what the problem is, whether it lost the wrong number or not in the white list, or if there's a system problem? Different reasons should have different hints: input error."The cell phone number is not in the right format."、"The authentication code has expired. Please retrace it.", account permission question"This account is not open for WiFi. Please contact IT Department"。
The wording of these tips is better to look at them together with the people who are going to take IT to transport the peacekeeping passenger service. Because users see first reactions after the tip, probably not by their own eyes, but by calling for IT or a hotel front desk.
Portal certification page is the closest link to the user in the entire WiFi authentication system, and its design quality does not directly determine the technical capability of the system, but it will directly determine whether users want to use it again. The first impression is that all the impressions are there.——There is a dimension to this: Multilingual support for Portal. WiFi in hotels and high-end businesses, with an external user ratio, may not be low. If Portal has only Chinese, the foreign resident faces all the Chinese tips and buttons after he goes on to WiFi, basically blinding. Support for English is at least minimal, and some scenes may require Japanese or Korean.——The Accept-Language field in the HTTP request is judged or switched directly to the language of the device system. But it is important to prepare multilingual texts at the design stage, not after Chinese versions have been completed, and to find that English versions are not matched. Moreover, the jump page following Portal certification is a detailed experience.——It's one."Authentication successful". In the hotel scene, many brands want to authenticate automatically and jump onto a hotel network or activity page, which is tantamount to using WiFi certification as a free marketing exposure. But one thing needs to be noted: if the target page is loaded slowly or the user's web strategy is not fully operational at this time. It is suggested that a local confirmation mechanism should be added to the default logic of the validation.——Confirm that the user ' s network strategy is in effect before triggering a jump to avoid going to an unopenable page.