What is mobile design

8 rules for mobile design

Usability & UX design blog
Learn the key mobile design principles that will help you design your website.

A decade ago, designing for the web meant designing a desktop computer. For a while, it has also been a question of developing for mobile devices. According to Statista, there were 3.9 billion individual mobile internet users in October 2018, and more than 50% of global website traffic was generated via mobile phones. Great web design is no longer a luxury, it is a necessity.

However, creating a great user experience for mobile users requires more than just creating a responsive web design. This article can help you learn the basic design principles for mobile sites.

 

1. Build focused experiences

Mobile users are very goal-oriented users. Every time they visit a website they have a specific task that they want to accomplish. And they expect to get what they need really quickly. How can you do that?

Imagine your ideal users: Much like building a house, building a website starts with a solid foundation. And the foundation of great web design is the knowledge you have about your users. User research should be one of the first steps in product design. You need to find out exactly who your users are and what they are trying to achieve. Once you understand the wants and needs of your users, you can create a customer journey that you know perfectly meets their expectations. Then doing thorough user testing will make sure that you have achieved these goals.

Refine the UX in relation to your core objective: what do you want to achieve with this website? Finding the answers to this question is another important task in creating a mobile web experience. Are you trying to drive user engagement, get users to buy products, or sign up for a service? Be clear about the goal and how you can reduce the number of steps a user has to take to achieve it.

2. Adapt your content to a smaller space

Content has the greatest value to most websites. They are the main reason people visit them. When it comes to mobile web design, it is next to impossible to create a desktop variant first and then simply replicate it for mobile devices. It is important to design websites with mobile users in mind. That means we have to adapt content and functions to suit the screen size and habits of the user. What steps can you take to achieve this?

  • Avoid horizontal scrolling. Users can scroll vertically, but not horizontally. For this reason, there shouldn't be any pages that need to be scrolled horizontally to view content. Fixed-width elements are one of the most common reasons for horizontal scrolling. So check that you don't have any content that will only display well with a certain width of the viewport.

    Single column layouts help manage the limited space on a small screen and also allow for easy scaling between portrait and landscape. Users can easily scroll websites vertically, but not horizontally. Because of this, there shouldn't be any pages that need to be scrolled horizontally.
     
  • Make sure users don't need to zoom. Users can easily get frustrated when they have to zoom in or out to read text or see a picture. Design your mobile website so that users never have to resize it. Use a legible font size: 11 points is the absolute minimum size for text. This size allows users to read text at a typical viewing distance without zooming. Choose fonts that scale well. If website reading is required, consider using sans serif fonts like Helvetica or Roboto.
     
  • Use a finger-friendly design: When designing a mobile website, keep in mind that visitors use their fingers instead of a mouse arrow, and human fingertips are larger than a mouse pointer. Strive for a finger-friendly interface where each interactive element is the right size. Also consider the relative distance between the touch targets. If interactive elements are too close together, mobile users can accidentally tap the wrong button with their finger. Make sure the buttons are sized correctly and add enough space between the buttons to prevent this from happening.
     
  • Product images should be able to be enlarged. Many studies have shown that people mostly learn visually. Most people are able to better understand concepts when conveyed in this way. Hence, using images in web design is a great way to quickly summarize important messages. Images play an important role on ecommerce websites. People rely on product images when making a decision. It's important not only to provide high quality assets, but also to make them extensible so that users can easily see them in detail. Offer to enlarge the entire picture, not just part of it.
     
  • Be careful with promotions and advertisements. You can easily overshadow the content. While the ad's message might work for some visitors, in most cases people will skip it and get to more valuable information. This phenomenon is known as banner blindness.
     
  • Make it easy to find contact information. Mobile users often visit websites to find contact information. Depending on the urgency, users may want to call a company, fill out a contact form, or look up the address. For ecommerce websites, the phone number should be available right on the home screen.

 

3. Optimize the content for scanning

It is common knowledge that online users scan rather than read. When a new visitor is on a web page, they first scan the page and break the content down into digestible information. It is possible to make this task easier for users by following a few simple rules.

  • Notice the order in which you post content on a page: readers read from top to bottom. So it's important to keep the important information at the top of a page and move the rest of the hierarchy down accordingly.
     
  • Reduce the clutter. Prioritize user interface content, reduce distractions by removing unnecessary functional and decorative elements. Strive for a minimalist style as this will make it easier for users to focus on the task at hand.
     
  • Avoid long blocks of text without pictures. It is very likely that large amounts of content will be skipped. Use headings, paragraphs, or bullets to break up the text.
     
  • Bring key elements to the fore so visitors can see them right away. Emphasize elements with different sizes, spaces, or vivid colors.

 

4. Develop comprehensible navigation

Guiding the users should be a top priority for any website. After all, the most compelling content is useless if users can't find it. For this reason, it is important to invest in developing a solid navigation system with the following steps.

  • Use familiar navigation patterns
    When creating a navigation mechanism for your website, there is one simple rule to remember: don't reinvent the wheel. It is always better to rely on the navigation patterns that most users are familiar with (such as the top navigation bar or the hamburger menu) than creating your own unique navigation system (such as a gesture-based navigation system) . By creating a familiar navigation, you will help users rely on their previous experience when interacting with your product.
     
  • Limit the total number of navigation options
    Don't put too many options in menus. A large menu might work well for desktop websites, but it doesn't fit the mobile design. Because not all navigation options are available in a visible area of ​​the screen, mobile users are forced to scroll through a list of options. Think about how you can present as few menu items as possible. Ideally, the menu you design should contain no more than seven different categories.
     
  • Prioritize navigation options
    Organize navigation based on how users work. The most popular navigation options should appear at the top and key actions should be available in a visible area of ​​the screen.
     
  • Use unique labels
    Each navigation option should have clear and concise labeling. Avoid jargon - the navigation you are designing should not contain terms that your visitors will not understand. Clear lettering gives visitors the opportunity to predict the outcome of their actions.
     
  • Make sure that interactive elements look like this too.
    As you design the buttons and links, think about how the design communicates the call for interaction. Do users see the element as an interactive object? The way an object looks tells users how to use it. Visual elements that look like links or buttons but are not interactive (e.g., underlined words that are not links, or rectangular boxes with words that are not buttons) can easily confuse the user.
     
  • Provide a search facility.
    If you run a complex website with a lot of content or features, make sure you provide a search bar for easy navigation. By implementing the search function, you offer mobile users who come to the website with a specific question quick access to information and functions. Don't hide the search option in the menu. It should be the first thing visitors see on your pages.
     
  • Make it easy for users to return to the home page.
    Visitors expect to return to the homepage when they tap the logo at the top of a page and are frustrated when that doesn't work.
     
  • Keep your user in a single window.
    Avoid functions that open a new window. Some users have trouble switching windows on a mobile browser and may not be able to find the previous page.

5. Avoid interruptions

Locks cause friction. And friction is users' worst enemy. Fortunately, there are simple things you can do to work around them.

Don't Interrupt Visitors: Large popups are one of the most common types of interruptions on the web. For a long time, such banners were dedicated to advertising messages, but recently, many websites have been using distracting pop-ups to get permission to use cookies. Regardless of what information you want to show your visitors, make sure they don't distract from the overall experience.

Don't let users just let your website go: identify places in the customer journey that could lead a user to further research outside of your website, and then provide content or functionality to keep them on your website. A promo code field on ecommerce websites is the most common example of visitors leaving a website to find the coupon. It is much better to offer some coupons directly on the website to prevent such behavior.

Do not force users to log in. The request to register before viewing information or using an online service creates a high level of interaction. Registering too early can result in users leaving the website. Before visitors provide personal information, they want to get an idea of ​​what a website has to offer them.

To develop a user experience with the lowest conversion barriers, mobile websites should allow visitors to browse content without having to log in. It is important for ecommerce websites that a user can also shop as a guest.

Make it easy to switch to another device to continue shopping or research. Don't think of mobile devices as experiences in their own right. A typical user has multiple devices, such as a desktop computer, mobile phone, and tablet, and expects that using your product on all of these devices will provide a seamless experience. For example, many users only use mobile devices to search for products and then go to the desktop to convert. Users expect to pick up from where they left off on the phone.

Here are a few things you can do to keep a user's current progress synced:

  • Synchronize wish lists, favorites and the shopping cart for a user account
  • Provide unregistered users with an easy way to save or share information on different devices (e.g. the option to send the link to an email).

 

6. Make forms efficient

Filling out forms is one of the most common tasks on the web. It is rare that users do not have to fill out forms. Since this is a ubiquitous practice, the ability to fill out a form painlessly is crucial. Here are some tips to help keep friction to a minimum.

Minimize entries in forms: The less data a user has to provide, the more fun he or she is with the web experience. You can use these pointers to reduce the number of keystrokes and inputs users have to make:

  • Minimize the total number of fields. Always keep forms as short and simple as possible by removing unnecessary fields. Just ask what you really need to know.
  • Use auto-correction, auto-capitalization, and auto-completion to reduce the risk of user error.
  • Avoid drop-down boxes. Drop-down lists hide the options and cause additional interactions. Users need to tap twice to select the correct option. If you are using a drop-down box to make a selection of options, you should replace it with radio buttons.
  • Automatically move to the next field when a user presses Enter.
  • Minimize form errors with real-time inline validation.
  • Use existing information to maximize the user experience. For example, you can pre-fill some fields such as the delivery address or payment information for your registered users.
  • Consider offering alternative input mechanisms. Think about what device features can be used for a better user experience. For example, instead of asking users to enter credit card details, you can use the device's camera to scan the card and integrate systems like Apple Pay and Google Pay to enable payment with a tap.

Mobile device users appreciate websites that provide a suitable keyboard for the field. This function prevents you from having to perform additional actions. For example, if users need to enter a phone number, your website should see the keypad 0-9.

Set the HTML input types to display the correct keyboard. Here are seven types of input that are relevant to form design:

  • input type = ”text” indicates the normal keyboard of the mobile device.
  • input type = ”email” shows the normal keyboard and '@' and '.com'.
  • Input type = "tel" shows the numeric keypad 0 to 9.
  • input type = ”number” displays a keyboard with numbers and symbols.
  • input type = ”date” indicates the date selection of the mobile device.
  • input type = ”datetime” indicates the date and time selection of the mobile device.
  • input type = "month" shows the month and year selection of the mobile device.

Many websites automatically detect the user's location and use this information to deliver relevant content. Allow users to change their location as in some cases they may want to see results for a different location.

 

7. Offer a consistent user experience

Consistency is one of the most important pillars of the user experience. Uniform design is user-friendly design. If you focus on consistent design, you will create more intuitive designs.Always try to make the website consistent, both internally and externally.

  • Internal consistency
    Build a library of design assets and use them across all areas of your website. Fonts, buttons, links, symbols and all other elements of the user interface must be consistent across the website to ensure visual recognition.
  • External consistency
    Make sure the website you are designing is also part of a larger family of products. For example, if you run a mobile app, your mobile website should make the users who use it feel familiar.

 

8. Build YOUR best mobile website

All of the points mentioned here can be viewed as best practices. But just because something is labeled "best practice" doesn't necessarily mean it is the best solution for your own website. Because of this, it is always important to test your decisions. Make usability testing a mandatory part of your design process and improve the user experience regularly.