Given all the previous factors and notions, certain UI design principles can now be abstracted and understood.
Firstly, speed is important to users. So, if no other optimization of your application can be done, make sure your users have the possibility to start using the application even before the initial page has finished rendering. This means getting to the First Meaningful Paint (FMP) of the page as quickly as possible in order to reduce the time it takes to get to the "time to interactive," which is the first moment when a user can start to interact with the application. One basic technique that can help you load the page's "above the fold" content before anything else is to place all blocking JavaScript at the end of the body of the page. Also, certain parts of the page can be cached for faster rendering or can be loaded in the browser through AJAX requests that are triggered with a periodical timer for example. Finally, HTTP/2's server push feature and HTTP Reverse Proxy servers could prove to be very useful when dealing with web pages that depend on many CSS and JavaScript libraries and frameworks in order to complete their rendering.
Secondly, even if a website is taking less than one second to load any of its pages, it is possible to speed things up a little more by removing the mobile browser's tap delay. This can be accomplished by adding an HTML meta tag in the head section of your pages:
<meta name="viewport" content="width=device-width">
Moreover, you could use the Chrome CSS rule in order to accomplish the same thing:
touch-action: manipulation
For older browsers, please have a look at FastClick by FT Labs (https://github.com/ftlabs/fastclick).
Optionally, since the pages are loading so quickly, it could be possible to add simple animations in order to make page transitions smoother. It would be best to ease in when prompting the user and to ease out when requiring an instant reaction through buttons and menus. These basic transition animations should last from 200 to 500 milliseconds, and when using bounce or elastic effects, one should think of transitions as lasting between 800 and 1,200 milliseconds. Even though these types of visual effects will give the user the impression that the application is a quality product, do not over-animate web page transitions and try to prevent content jumping when the page is loading unknown image sizes in order to keep the whole user experience as smooth and as streamlined as possible.
Thirdly, if your pages are taking from two to five seconds to load, it is recommended that you send some feedback to the users through the use of progress bars, throbbers or any other smart distractions. Also, make sure to explain what is going on by using simple expressions such as "% of 32 MB uploaded", "Email is being sent" or "Estimated time left: 1 minute".
Finally, if a page takes more than five seconds to load, you should get the users in active mode by getting them to play a simple game, for example. Of course, you can continue using throbbers, progress bars and display short messages to explain what is going on. But getting users into active mode will get them to be less aware of the passing of time. This is particularly useful for pages requiring very long loading times. Indeed, a very active user can completely lose track of time and become amused by a pleasant game at hand. This technique can also be used if you know that users will be anxious, rushed or on the move when viewing your application. Moreover, when pages require very long loading times, it should always be possible for the user to abort the operation and retry later.
This will also have a positive impact on the user's overall satisfaction, as it allows a user to be in full control of the lengthy operation:
Now, let's have a look at how to implement a simple UI design using the previous principles and patterns.