Mobile First: A Future-Friendly Approach to UX Design
Mobile App is becoming increasing popular for staying in touch with your target audience and developing loyal customer base. Online business giants like Amazon, Starbucks, Wal-Mart and Target have been the early adopters of mobile strategy and benefited greatly by taking advantage of changing user behavior in the recent years. More and more businesses are finding it worthwhile to invest time and money in developing a mobile strategy for their businesses. There are numerous benefits of having a mobile app for your business. Let’s explore the most important ones here.
- Increased visibility to your target audience.
- Communicate general information about your company, special promotional offers to your target audience instantly and help them to convert to your loyal customers.
- Build a strong image of your brand and company.
- Higher engagement level with your customers.
- Stay ahead of your competition, like for small local businesses one can become a trendsetter through launching a mobile app.
- Building stronger connect with your customers by staying closer to them.
- A wonderful marketing tool which you can use to provide value added services and encourage your customers to download. More downloads will lead to more return customers.
Since browsing the Internet through computers are still much prevalent, while designing website traditionally a designer still starts with desktop first and then customizes the design in order to fit smaller devices like tablets and smartphones. It is important to note here that today computers are mostly used for content creation which may be tedious or difficult to do on a mobile device. But when it comes to consumption of content, it is the mobile devices that are far ahead of computers. Therefore, while developing User Experience Design (UXD) you should start designing for the mobile devices and then work way up to desktop/laptops so that usability and the functionality of the website is not compromised across devices.
Progressive Enhancement versus Graceful Degradation:
There are two approaches usually adopted by UX designers and developers. The first approach and the traditional one is to start designing for computers and then gradually exclude features and content so as to make it suitable for smaller screen sizes like in mobile devices. There are components like flash-based objects, which you may have in your computer version of the website but that are not supported in mobile devices and are to be dealt with separately. In this approach, the designers start with all possible features and complexities and then eliminates one after another keeping only those that are supported by smaller devices.
On the contrary, in Progressive Enhancement approach the designers start with mobile devices having the smallest screen size and include features and content that is absolutely essential for user experience and build on that by adding features and content to suit larger screens. This ensures that the user experience is not compromised at any devices because you start with bare minimum and then go on adding. The main component that enhances user experience is content whether it is text, image or rich media. The designers have the liberty to choose the content that gives the message you want to communicate to your users for each device.
Another advantage of this approach is that the developers can design the content based on the breakpoints of the smaller screen size so that it looks natural unlike the case of Graceful Degradation where it looks like the components have been “squeezed to fit”.
While comparing these two approaches, they may seem equivalent as the objective of both the approaches is to develop a website having great functionalities. But, actually, the case is quite different. In case of Graceful Degradation you start with all the features and take full advantages of the desktop platform to develop an amazing website. But as you go along you realize that many of the features must be trimmed to finally get a website for mobile device that is really a watered down version. Worse will be the case when you may have to exclude an important element just for the reason it is not supported by mobile devices.
In the case of Progressive enhancement, you first develop a lean and impressive design that is fully functional in mobile devices and then add features for larger devices, being completely aware of the support offered by each of the technologies. This process ensures that the basic purpose of the website is always taken care of and the message is well-communicated to the users, without any compromise even in the smallest device.
Process of Mobile-First Approach:
- The first and foremost step is to decide on the layout considering the breakpoints of different devices starting with the smallest screen size. Prototyping or wireframing is recommended to structure your layout most efficiently. Once this is done, it gives a clear idea on the layout for each screen size and you can develop the content accordingly.
- The next step is to develop the content inventory. Content inventory is typically your wish list of elements that you would like to include in your website. Then you start prioritizing the content based on the preset layout and breakpoints for small devices. Make sure that the most important elements are clearly visible even in the smallest device and it is supported by the operating system of the device. Also, pay attention to finer details like size of the call-to-action buttons and the hyperlinks so that they are easily clickable by the fingers, which is otherwise not so critical for larger screens where it is clicked by mouse cursors. It is also important to avoid any mouse-over effects in your design as hover control for fingertips is not available. Choose the images carefully so that they are displayed properly in smaller screens and load quickly considering limitation in bandwidth.
- The last and the most important step is to put yourself in place of the users. Test the usability and functionality of the website across different devices. Check whether the texts and images can be viewed properly in each device. Also check the page loading speed and navigability of each page of the website.
Mobile is the future and so is Mobile-First approach:
It is indeed a delight for a designer or developer to see a website that they have developed using latest tools and technology, working with all features and functionalities. But in the process, one must remember that the business goal or objective of a great website is to generate more lead and in turn more revenue. This can only be possible if the website offers great user experience. After all, it is the users who are your potential leads and you interact with them through your website. Hence, though the design has its own importance for overall success of the website, user experience across devices should be given top priority.
Internet has changed our life dramatically and mobile devices are becoming more popular for accessing internet. Any design that is only meant for traditional computers will get outdated soon, and you may lose the attention of a large chunk of your target audience if your design is not mobile friendly. So, it is more important now than ever before to adopt Mobile-First approach while developing your website. This approach also allows you to make use of extended capabilities like GPS, touch features etc. which is great for enhancing user experience.
Change is must
Changing to Mobile-First approach will need a change in thought process of both of the developers and clients. A developer is still quite used to start with “desktop-first” approach while the clients have also got used to include heavy images or graphics which affects the user experience for the mobile devices. But change is must at this juncture if, as a business owner, you want to exploit the explosive growth that is taking place in the mobile space.
With Mobile-First approach the developer can now align their designs keeping in mind the users and decide on the design and select the technology accordingly to develop the website. It will ensure the most important element of your website is prioritized and always presented to the users for better communication and ease of interaction. It also ensures intelligent use of screen real estate, page element and technology keeping a minimalistic approach.
Additionally, Mobile-First approach also focuses more on content than on technology deployed to develop the website. It clearly leads to simple yet elegant and user-friendly design ideas. It also provides an insight to optimize existing desktop design to make it more user-friendly. With this approach you can now have a website that is future-friendly and makes real business sense for your potential customers.