• Mobile App Design
• Tutorials

The Touch Screen Revolution – 4 Lessons to Mould your Mobile Web Designs and Learn for Better Mobile UX

Gone are the days when websites and web applications were developed just to fit your 15” inch devices (desktops and laptops). Now times have changed. Everything is happening via finger friendly devices that respond within nanoseconds to the touch based stimuli. Gartner in its recent report has revealed that the smartphone sales crossed 1 billion mark in 2013 alone. In fact, the no of Mobile internet users are exponentially increasing and are likely to completely surpass desktop internet users in the US by 2015. Most of them perform all the fun tasks (like shopping, reading mails etc) on mobile and everything else on their desktops.

In such a scenario, it becomes absolutely critical for web development companies to come up with a solid Mobile UX strategy that offer seamless experience regardless of the device the visitors are browsing on. Well, I must mention here that if you are one of them who are right now thinking that adopting one flexible solution – Responsive Web Design is more than enough to cater to multiple screen widths; you probably don’t know what importance User Experience holds when it comes to touch screen devices. A visually appealing responsive UI doesn’t necessarily promise a fantastic UX and can leave an overall bad User Experience if not optimized correctly. Visitors tend to fizzle when they’re browsing the web on mobile and come across a site that has an uneasy layout, unreadable text and dramatically frustrating buttons that don’t respond when tapped. What’s the use of a beautiful interface that is non-functional?? A Poor browsing experience on mobile kills your conversions as much as 50% and even a 1 second of delay in mobile page load time equals a 7% loss in conversion killing 50% of ROI mercilessly.

To deliver high performance user experiences on mobile phone devices, it’s high time you hire a team of highly experienced responsive designers who can streamline their web design practices in sync with small or medium sized gadgets to address usability issues for better conversions. In this article, I will throw light on the most critical considerations while designing mobile user interfaces and what you need to mend in your responsive design strategy. I would also recommend you to go through one of my previous posts on “Tools and Tricks to make websites device friendly”.

Lesson 1: Change your methodology – Experiment with Prototypes and approach with what that is best from User’s perspective

Moulding the web designs from User’s point of view is not as easy as it seems to be. You need to analyze the purpose of your web design, you have to know the psychology of your target customers and accordingly map the whole browsing journey to accomplish the business goals that you want to achieve from your website. The best way is to adopt a specific methodology and create a series of user interactions by taking care of usability concepts like the screen size, images, hyperlinks, font sizes and page navigation. I recommend to create at least 3 prototypes and experiment till you come up with the design that is amazing from user’s point of view. List out the most common fields that prompt users to take action and then create a list of interactions with the User interface that you have developed. Map everything from thoughts and feelings to touch points and actions. Ask questions with your design like “What is the first element the user is likely to jump on?? What should they first do while visiting my site on their mobile? How should my mobile web design win the patience of my customers?? What are the pain points with my design (like landing on the wrong page while on mobile)??

Lesson 2: Know your ultimate weapon – Optimize Content so that it is easy to read and easy to tap

Yes, delivering content in an efficient way is the ultimate weapon to create high performance mobile user experiences. All your content should be easy to read on eyes and easy to tap with fingers. If you miss on this, your mobile web design has no worth. I would like to explain the importance of this through an example –

Suppose you are optimizing an ecommerce site for mobile – the critical elements include the Login Button, the Registration Form, the Buy Now button , the quick navigation from Buy Now to Checkout out page, easy checkout etc. Now let me share my own experience that I find while browsing most of the ecommerce sites that are not optimized from Mobile UX point of view and let’s see how they kill their conversions with designing blunders.

• a) Less space between “Buy Now” and “Browse more” that worsens more when a visitor is browsing via mobile. There is 90% probability that users will end up clicking on Browse more if they want to click buy now and vice a versa. Hence, they tend to get frustrated and won’t look back to your site ever, even if God himself asks them to reconsider their decision. Yes, it happens!! Use common sense and at least craft your buttons with 44×44 px dimensions so that it is easily accessible via fingers.
• b) Slow loading of products and a completely messed up navigation – Yes, this one too!! I have seen mobile commerce websites in which the products really take too long to load. Plus, they have navigation that really frustrates visitors. Don’t you designers think that it would be better to include“swipe functionality” rather than “click” on the arrows that reveal “previous” and “next” functionalities? Is it not a great idea to make everything easy?? Using a click will probably let them wait for long till the next page loads while with swipe they will be able to quickly look through the next or previous product. Believe it or not, it affects their purchasing decisions!! You need to think like a complete nerd when it comes to mobile UX optimization.
• c) Including the “rollover with mouse” like feature on products page – Ah!! This is the biggest blunder I have come across. In most of the poorly optimized ecommerce sites, you will find that when they are displayed on desktop they are good because when a person rolls over the product image on the left via mouse, it zooms in on the right. But, when they browse on mobile, it won’t zoom in. Of course, there is no mouse that will zoom the product there automatically. You can’t hover with a mobile. The Touch screens of laptops and mobile devices are different and you need to take utmost care with mobile. To explain better, I have shared an image below.

• d) Misusing the small space – All the problem with Mobile UX optimization is that there is less screen area in mobile as compared to desktop, or laptop and you need to not just shrink the size of your web design(from desktop to mobile) by being responsive but you need to wisely use the small space too. The image shared below explains better. You yourself see the difference and figure out what I am trying to convey with this.

This is the best optimized mobile site from UX point of view –

And see this one – that is a desktop site shrinking just to fit the mobile screen to pretend everything is in place. But usability factor diminishes with this. Here you have to scroll here and there to reach to the product that you are looking for. Isn’t it??

Lesson 3 : Simplify as much as you can – Drop unnecessary design elements and remove the clutter

Dropping the unnecessary design elements corresponds to the minimalistic responsive designs that are ruling the web nowadays. But here from UX point of view, I mean to suggest simplifying the functionality as well. The moment you learn the art of enhancing usability, you will win half a battle!! Trust me, this is where the difference lies. Nobody loves fancy design elements that fail to offer the functionality they are meant to. You need to let your interactions work in real sense, you need to engage visitors for longer and simplify designs on smaller devices to showcase smooth flow while retaining the contextual charm. Repetitions are a big no-no here. Don’t repeat the same stuff above and below the fold. Include mobile friendly forms and widgets. Try to use stacked tabs (accordions) to reorganize the content. Consider removing the clutter on the landing page and drop everything that doesn’t looks nice from the mobile context. Realise the limited space that you have in a mobile screen and examine tactics to sync the layouts accordingly. Position everything wisely to fit the small space. Like, one tactic is to simplify the navigation to Icon Based Vertical Menus (The small icon to the topmost left that you see in the mobile site of Facebook and many other famous sites) that opens up only when it is tapped on.

The Design convention for desktop and mobile are absolutely different. Fingers and thumbs is all that you have to communicate with both of the devices. But due to the large difference in areas(the screen and keypad is different in desktop and laptop but in mobile, a single touch screen works as your screen ,keypad and mouse), you need to craft new patterns for Mobile UX optimization , shed large buttons and map finger based gestures into your design.

Lesson 4 : Test thoroughly before you Deliver – Get Hands on the RIGHT TOOLS

I would advise all the responsive developers to test every project for usability and don’t deliver it to your client until you get the best results. For this, you need to get your hands dirty with the important tools and watch your design critically from the eyes of users. Test the loading speed of the design using Google’s Page Speed Insights tool and run a usability test as well. Just go to https://developers.google.com/speed/pagespeed/insights/?url=www.tisindia.com and enter the URL in the space provided, click the “Analyze” button and see what happens. You will see your website being displayed inside a mobile phone with Analytics on the left. The best part that Google has included with this tool is that it shows the issues and also shares the guidelines that teach how to fix the issue. On the same page itself, you will see User Experience Beta at the bottom. Again, you will see the issues and the links that show how to fic the issues. I have shared a screenshot below to let you understand how this tool analyzes your content.

Lastly, all I want to share with you is a very famous quote from Brad Frost – “The beauty of the web is openness. Don’t arbitrarily lock people out because of browser, device or configuration”.

* * *

Author’s Bio:

Sandeep Sharma is a creative head at India-Designers.net. He has more than 15 years experience in the web designing domain. He is leading the team of more than 25 web designers in the company. All Web Design Projects of the company start and finish with him. You can follow him on Twitter and Google Plus.