This is the fifth day of my participation in the August Wen Challenge.More challenges in August

preface

Do I really need a login page?

Login page is the face of most systems, is the first page users see and use the current system, whether for product managers or front-end design engineers, this is the first war we must win. However, during the preliminary requirements review and before designing the application, we need to consider: does the system really need a login page? Then we need to think deeper.

1.1. The system of uncertain continuous use in the eyes of users

In the uncertain future will continue to use a system before, as the user itself is not willing to register and log in operations.

Although now information transparency is very high, almost everyone is running shorts on the Internet, however, with the growing popularity of the personal information protection and perfect, people pay more attention to information security, protect the privacy of personal information “art is cautious can catch cicada, caution is ten thousand ships”, to protect themselves only “shorts”.

In this case, if the system forces users to register and log in, it is likely to lose a large number of potential users.

The cautionary tale is many, such as the general students party, occasionally check a information online, just saw the original topic, be elated, but the site requires you to login before they can see the answer, in the land and need you to sign up and perfect a series of personal information, this time you get off, even disgust, “Lao tze change the site to see!”

Solution: We only need to make a reminder of the sticking point in the key functional steps, and the users who are interested in the system will naturally convert the force +1. Baidu Wenku has done a good job in this regard.

1.2. Functions realized without login can meet user needs

When users can see the content we need without logging in, there is no need to register and log in.

Operators and developers should be clear about what they really want to achieve. Here is the official website of Huawei Cloud:

Huawei cloud has more than 100 pages on its official website, which allows you to access massive amounts of information and knowledge through a browser or Huawei cloud APP without logging in.

Two, take a mobile terminal login example

Please carefully observe the following login interface layout and code implementation, and think about the problems you find:

The implementation code is as follows:

<body>
		<div class="phone-screen">
			<div class="form-title">Huawei Cloud Community</div>
			<div id="login-form" class="login-form">
				<div class="login-form-item">
					<span class="login-form-item-label">Mobile phone no.</span>
					<input class="login-form-item-input">
				</div>
				<div class="login-form-item">
					<span class="login-form-item-label">password</span>
					<input class="login-form-item-input">
				</div>
				<div class="login-form-btn">submit</div>
			</div>
		</div>
</body>
Copy the code

May now have a lot of people have the idea of ridicule, ha ha, don’t worry, we go below!

We will examine the above examples in terms of page layout, coding, and flow.

Front-end learning is not rocket building

For the study of the front-end content, some people may say that the front-end content is too difficult, technical points and endless framework too much, too miscellaneous.

However, doing front-end is not building rockets, you do not need to be a genius player, as long as you master certain rules, the same can be heaven and earth.

Fourth, front end layout design

The designer only provides the design draft, the real layout is up to the programmer to implement.

What’s more, if you encounter a project that can be freely played, the style should not be too “wonderful”.

5. Problems and challenges from PC to mobile

The majority of students’ initial learning and application of H5 is based on PC terminal, and there are some slight modifications and corrections in the transfer from PC terminal to mobile terminal. We will analyze the above cases in the following content.

5.1 Display mode of mobile phone screen

The display mode of mobile phone screen is different from that of PC. We classify it into four categories: small, large, long and short.

5.1.1 Smaller size and narrower width

With the development of The Times and the progress of science and technology, nowadays mobile phone manufacturers have abandoned the large screen of pad and turned to cellphone, which is much smaller than PC, limiting the content of the phone screen.

5.1.2 Larger content of the page

In order to greatly improve the interaction between users and the system, the migration from PC to mobile requires greater adjustments to the original content on the PC. For example, our common font size is 12 or 14 on the PC terminal, and it needs to be enlarged by 2 on the mobile terminal to meet the user’s reading demand. Of course, we can make uniform adjustments in the style of the CSS root node.

And page content bigger challenge not only exists in the font size, font, other such as alignment, line, ICONS, and so on, some flaws in the small PC may be users on the mobile end infinite amplification and even create new problems, it is entirely possible, it’s for the developers at a deeper level requirements are put forward.

5.1.3 Scrolling is longer

The vertical use of mobile phone screen leads to the reading effect from top to bottom and the unique finger sliding control effect of mobile phone. In order to prevent accidental touch, users are required to browse the mobile content in the Safe Area of mobile phone screen. Different mobile phones also have different differences, such as adaptation to bangs screen.

Note: The image above is from the Apple Developer’s Guide.

5.1.4 Adapt to users’ “short patience”

In the era of high efficiency and fast pace, as a developer we can only adapt to the user’s “impatience”. If you know anything about design, you know that one of Nielsen’s top 10 Usability Rules is the “Elegant and simple Rule” — conversations should be stripped of irrelevant or barely needed information. Any irrelevant information makes important information harder to detect. In the interface design, we can enlarge the key content, bold, non-key content by folding menu, hidden message content to deal with.

For example, in the current version of Huawei Cloud APP (3.0.1), the title of the console interface is obviously large, while the body part is relatively small. Meanwhile, the folding menu is processed, which is the embodiment of the elegant and simple principle, as shown in the figure below:

5.2 Differences in control interaction between users and devices

5.2.1 Thumb control

Originally in the PC, the user use the mouse to control page for each part of the handling of the entire page is consistent, and users on a mobile phone, the logarithmic people accustomed to thumb sliding screen control, due to the compared with other fingers and thumbs touch screen is the biggest, easy to accidentally touch, for the manipulation of screen contents are hard to reach agreement, The bottom of the screen is always easier to manipulate than the top.

This requires us developers to deal with the screen content (menus and other information) and expand the scope of operation to meet the needs of users.

Not only do we need to consider these issues during development and design, but we also need to test them on a real machine before the project goes live, not just in a browser.

For example: wechat, which we use daily, although the four menus at the bottom occupy a small space, but can be touched by a large range, you can try, as shown in the picture below:

5.2.2 Special Styles

Realize a variety of special control interaction, such as multi – selection, drop – down menu and so on.

For example, as shown in the following figure, a good process has been done on the console of the elastic cloud server on huawei cloud official website. We can see that the interaction modes between PC and mobile terminals are different.

The console on PC is as follows:

The console on the mobile terminal is as follows:

Summary: We used to use simple adaptive to meet the needs of system functions, but now simple adaptive can no longer meet the growing needs of users on mobile terminals. Many developers specialize in two different apps to satisfy users.

5.3, coding

Coding is the foundation of developers, just “writing” is not enough, but a solid structure, beautiful form…

For the form content in the example above, we do the following analysis in code:

We use the following familiar front-end labels:

,

Someone might say, “Hey, why don’t you just use

,

and js?”

What can

and JS do to make you write unnecessary code? “The best ingredients often require only the most modest cooking.”

5.3.1 Form Label

can ensure the normal execution of functions as much as possible. It has functions that div+ JS +jquery cannot meet, including action and Method. At the same time, the form tag can ensure the normal submission of forms on the premise that JS and jquery cannot load successfully, and it does not depend on the loading of the whole front-end framework. This is a separate idea.

Only talk about technology, the domestic front benchmarking is Amoy team. As shown in the figure below, Taobao still uses the Form label on the login page, which indicates that it is completely ok for form to meet the login requirements of such a large number of users of Taobao.

5.3.2 Label

The

The label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on text within the Label element. That is, when the user selects the label, the browser automatically shifts focus to the form control associated with the label.

Note: The for attribute of the tag should be the same as the ID attribute of the associated element.

<body>

<p>Please click on one of the text tags to trigger the related control:</p>

<form>
<label for="phone">Mobile phone no.</label>
<input type="radio" name="sex" id="phone" />
<br />
<label for="password">password</label>
<input type="radio" name="sex" id="password" />
</form>

</body>
Copy the code

Note: The “for” attribute binds the label to another element. Set the value of the “for” attribute to the id attribute of the related element.

The result of the above code is shown below:

This greatly increases the range of fingers that can be touched, improving the user experience.

AIRA helps people with dyslexia by providing reading functions including screen Readers. The reverse is more difficult if you use div.

5.3.3 button label

The contents of the button TAB can be customized, such as adding ICONS. And the best part is that we can set it to Submit.

5.4 Compatibility

Multiple tests are required, even including, but not limited to, test runs using built-in browsers such as Tiktok.

6. Booby-trapped input boxes

6.1. Too many input boxes

To reduce unnecessary input fields, we can do split screen processing for a large number of input field forms.

6.2. Poor effect after focus

Too many input boxes cause some content to be blocked. A common one is that the keyboard blocks the submit button of the form, as shown below:

Huawei cloud APP solves this problem well, as shown in the figure below:

When we click on any module, the screen will automatically adjust itself to the most appropriate position, as shown below:

6.3 Error message is not visible

An error message that is not visible causes the user to think that the current page is unresponsive. There is no response after the user enters the information.

6.4. Force repeated Input

It is not advisable to copy directly from PC to mobile, where the cost of typing is much lower.

Many vendors now encrypt the password automatically after it is displayed for a few seconds, converting plain text into ciphertext. It not only satisfies the function of prompting users, but also ensures the privacy of users. Or get rid of password input and let users log in with a mobile verification code.

6.5 Save the entered items

Cookies are implemented locally and sessions are implemented remotely. If you have obtained user rights, you do not need to enter the password again, for example, remember the login password.

6.6. Preview confirmation

After filling in the form information, users can add preview options for users to confirm the second information, which depends on the actual situation, such as ticket system, voluntary filling system, etc.

6.7. Input is more than just an input box

6.7.1, attributes,

With Type, Autocomplete, Autofocus, Name, placeholder… And so on. Developers need to set the properties where they should be.

If the user does not need autoComplete to reset the password, Autofocus guides the user to locate and perform operations.

While placeholder causes users to forget easily, so it should be used with caution to reduce users’ memory burden and improve user experience.

6.7.2, style,

You can set overall size, padding, margin, border…

6.7.3 Check by yourself

:invalid, :not(:placeholder-shown),…

We can also use required for a quick check of the input box. And the user input information verification, regular expression is the preferred.

We should use inputMode instead of number to qualify numbers.

See the MDN documentation for more details on tags.

“Under the clouds” – the logical flow of code

The flow for users to access resources is as follows:

6.1 Performance check

  • PageSpeed Insights
  • Lighthouse
  • The waterfall figure

6.2 Page opening process

  • The DNS
  • …
  • Three-way handshake
  • Sending a Resource Request
  • …
  • Server returns content
  • Continue to request + to render
  • …
  • Render the complete

6.3 Resource request

According to the page opening process above, we can find that resource request mainly lies in the optimization of the two parts of request quantity and request time, and there is a positive correlation between them. At this time, we improve the focus of the access speed. For this, “The Myth of man-month” has a clear introduction and explanation of this workload calculation. We suggest you to watch it, and at the same time, you can have a new understanding of the workload of enterprise management.

The larger the number of requests for the same resource, the shorter the time, the better the user experience!

6.3.1 Number of requests

You can increase the number of requests by:

  • The cache
  • Lazy loading
  • Merge resources (Sprite art, packaging tools)
  • Http2, http3

We used Akamai to test the loading differences of different HTTP in the same network environment: http2.akamai.com/demo

The effect is obvious, as shown below:

  • Use multiple resource domain names to increase the number of concurrent queries
  • …

6.3.2 Request time

Reduce the request time by:

  • speed
  • Reduce the size of access resources: Webpack compression, gzip, resource recompression, the same resource, we compress the efficiency of a lot more
  • CDN
  • Skeleton diagram
  • …

6.4. Browser rendering

  • Avoid too many JS blocks and put unimportant JS at the end to reduce load blocking
  • Avoid backflow
  • Tag attributes such as defer, Async, preload, and so on
  • Lazy loading, a way to reduce browser load during browser rendering
  • Preloading depends on the preprocessing of resources

6.6 Start browsing and interaction

  • Before operation friendly reminder, remind the user to do
  • Real-time awareness in operation, users follow the system
  • Feedback after operation, real-time check whether user information input is correct

6.7. Follow-up behavior

  • AB test
  • Burying point report, analysis, scientific burying point planning and multidimensional comprehensive analysis
  • …

One bright spot was the abtest Obama team’s efforts to improve the popularity of the campaign by modifying the slogan on the campaign website, as you can see below:

conclusion

Here is a summary of H5 page considerations in terms of layout, coding, flow, and goals.

For page layout

  • A programmer who doesn’t know how to plan pages is not a good designer
  • Pay attention to mobile features
  • Try it again from the user’s point of view

For design coding

  • Master the basic
  • Attention to detail
  • Seeking something

For the structural flow

  • Understand the whole link
  • Where did you come from? Where are you going
  • What is the explicit purpose

Programmer’s goals

Being a front-end programmer is more than just writing code. We’re not just writing H5 pages, widgets, but a product that communicates with users, generates value, and even a dream to change the world. For example, it is our pursuit to bring the digital world into every person, every family and every organization, and build a smart world where everything is connected.

I am White Deer, a tireless programmer ape. Hope this article can be beneficial to you, welcome everyone’s one key three even! If you have any other questions, suggestions or additions, please leave a comment at the bottom of this article. Thank you for your support!