Have you got a business-objective?
We have a solution.
Get a consultation right now!
The mobile first metodology is based on placing priority on paying attention to mobile version during all the process of development so that web architecture is built on the basis of mobile one.
When the question is about adaptation website to mobile version, developers hide all the excess elements that don`t fit in a small screen. When It`s about mobile first, there isn`t a need of hiding as the initial version is already concise and focused on the content and interests of consumers.
After opening such page in a broadsheet, informational blocs realign. For instance, carousels unfold in horizontal blocs of cards, navigation fills the place in a header without moving to burger menu.
Important point: after moving mobile first to broadsheet new blocs of information don`t appear. Fulfilling is achieved with quantity, design and placing of those data.
Such topics bring a storm of emotions among web designers and developers. After reading hundreds of similar holivars, we`ve pointed out the most common replicas of fans and opponents of mobile first.
One hundred people account for an average of 96 mobile phones. The highest concentration in Hong Kong is up to two and a half telephones per person, the smallest - in Cuba and North Korea, where statistics show twelve phones per group of the same volume. More than half of the total number of smartphones provide the ability to view web resources. At the same time, only 48% of the world's population is provided with stationary Internet access.
Almost half of users need a smartphone only for traditional methods of use - calls and messages. They do not download new applications and almost do not browse sites. Such people constitute a reserve for the capacity of the mobile Internet audience for a rainy day.
Statistics of habits and behavior from the agency ThinSlices:
To create a web site with high chances of becoming popular is much easier with an understanding of the behavioural mechanisms of its target audience and what people are willing to spend time on under certain conditions. Trends in website design in 2019 are changing and focus on the end consumer always remains relevant.
Rating of various activities using a smartphone:
The first three categories of the list concentrate 77% of the total time spent with the phone in hand.
To make a quality product, taking into account not only the 2019 web design trends, but also the convenience of the end user, a number of technical recommendations must be observed. They affect not only content but also menus, page weight optimization, object recognition.
!!!!“As a general rule, content takes precedence over navigation on mobile”!!! - Luke Wroblewski “Mobile First”
A mobile user wants to get the result immediately, not specifying questions. A very good illustration: imagine a person asking a question and holding a stack of answer cards. He takes out a card, studies it for two or three seconds and takes a new one. We do not know how many cards he looked before. And we don’t know how many more cards he is ready to view.
In most cases, smartphone users get to the site via a link from a search, email, messenger or social network. An open web page should immediately give a satisfying answer and draw attention to the further viewing of the page.
In addition to the time limit, people are constantly constrained by modest screen sizes. Therefore, it is doubly important to filter out content that does not lead the consumer to the goal.
Any decorative element, any extra picture is a weighty cobblestone on the way to solving the visitor's task. Not without reason, the interface of smartphone operating systems has come to reasonable minimalism - it completely lacks decorations. The new trends in web design in 2019 are functionality, minimalism and an abundance of “air”.
The similar concept should be adhered by developers during the process of developing mobile first web sites. It`s enough typography and color coding to highlight the important and emphasize. A picture without content is an extra load. Creating animations for the site should also be included in the concept of helping users move towards the goal.
Almost any adaptive website made by specialists has a minimalistic upper part and hidden navigation. Almost the entire visible area is given to the content.
Sometimes the part of navigation is placed on the main page to improve perception so that the user clearly understands what he wants and what he can get.
In other cases, navigation looks traditional: a modest icon and a burger menu that opens over the contents. But there are some tricks here.
Proven fact: the burger menu is a dubious decision that negatively affects the depth of page views, but often there is simply no alternative to it. To improve the user experience a bit, you can duplicate important navigation items right on the page. Alternatively, add on the first page a clearly visible “Product Catalog” button that opens the desired level of basic navigation without having to search for an icon or open a separate catalogue menu.
When working with mobile navigation, you must definitely track the path of movement on the site. It is important to adjust the design of the menu if, in terms of items, people move much less frequently.
Before committing any activity, the reader scans the space for several seconds in search of the necessary / interesting information. In this case, attention is directed along a well-defined path - from top to bottom, with periodic movements from left to right.
Renowned newspaper designer Edmund Arnold called this the “Gutenberg Principle." It illustrates well the gravity of reading, which helps determine the right places for any important blocks and calls to action.
The most natural option is to place a button at the end of the screen or block that calls for action. The gaze moves down and easily finds the active element that completes the logical construction. If you place it at the top, you have to come back and lose valuable time.
If the button implies repeated steps (settings, editing, mark “favourites”), it will be logical to place it at the top. In the case of the online store, only the shopping cart icon is added to the header, and “buy” to the bottom of the product card.
Call to action buttons can be grouped in a mobile screen. If two such elements are placed side by side, most often this implies that they are connected by a common task. For example, yes / no, forward / backward, accept / skip.
People got used to the idea that nearby things are somehow connected, so the choice of one object from two will be more understandable and appropriate. Also, the horizontal arrangement of the two buttons in a row carries the implication that they are equally important.
If you place them one under the other, it is perceived differently - as primary and secondary, with a completely different context. A good example is “Buy” and “Write to the seller” in the marketplace. One team does not cancel the other, but “Buy” looks more priority.
The main button does not always need to be tied to a strict position. A person will understand if it is highlighted in colour, differs in shape and size.
For example, the button “Start” literally gives the signals that it`s the main one.
Don`t forget: If the interface of the website is complex with dozen of different buttons, the visual hierarchy must be thought through to make their role intuitive.
A simple example: all the confirming buttons are green, all the rejecting ones are red. Button “Buy premium” is blue in order to emphasize exceptionality. After viewing several pages, the user is supposed to rely on visual hierarchy without reading the text on the buttons. It`s important not to break the habit after situation when user will find a green button “delete my account”.
We got used to “sticky” menu and other tools that take exact place on the screen despite scrolling. In a case with a smartphone, you should be attentive using the trick for fixation “Call-to-action” button.
The question is that mobile browsers automatically hide their interface If the user doesn`t interact with the lower or upper edge of the screen. It is implemented in order to create more free space.
Sometimes a developer puts a “sticky button” with an important target action at the bottom, thinking that the visitor will inevitably notice and react to it. And then it suddenly jumps up, because the phone regarded clicking at the bottom of the screen as a request to show the browser interface. It is worth remembering that web development trends do not matter if the user experiences discomfort when using the product.
Check-list for mobile site optimization:
A few points in favour of Google Mobile First Indexing:
The pace of interaction with the phone is much higher than with a computer. In addition, the smartphone is used in a distracting and annoying environment.
Google Product Director and author of Mobile First, Luc Wroblesci, noted that mobile interfaces must combine high-speed interaction with simple functions and crystal clear presentation of information. A typical user operates with a smartphone with one finger, capturing the screen with almost only one eye for frequent, but short sessions. Therefore, the trends in the 2019 UX design are more and more focused on the speed and use of gadgets in transport.
The “one finger and one eye” rule can be applied for a qualitative estimation of the design of a mobile application or adaptive website. Completely this principle sounds like a question: “Can a user in sixty seconds complete the necessary action with one finger and one eye?”
Why only in a minute? People who use a smartphone with different tasks more than 150 times a day do not have 5-10 minutes to master an incomprehensible interface. If you did not manage to meet the deadline for interaction or did not manage to take over the necessary information, the user will simply go to the one who was able to do this. The need for speed and accessibility is the cornerstone of mobile user motivation.
A good example is the experience of Luke Wobleski in working on the Polar service, designed to instantly create photo polls. Designers made a decision to give the user the opportunity to create a new poll with simple manipulations in just a minute.
The development of the Polar mobile application allowed us to conduct research and prove the shortcomings of the vector of development of interfaces in voice control. In an annoying environment, the high sensitivity of voice input becomes an insurmountable barrier - it’s worth activating Siri, when someone starts talking, and the sounds overlap, causing confusion among the voice assistant.
Brief conclusions for those who have not read the text entirely