We have a desktop web app which we wanted to extend to Tablet device. When we changed the layout to fit the tablet, the interface got cluttered and unusable. We are thinking of doing a different design to remove unwanted stuff and keep only those features which a tablet user generally uses. Is it better to have a separate UI for a tablet/mobile to provide a good UX?
In my opinion, yes. It is better to develop different UI for mobile/tablet. Imagine a 1000px width information to be read in mobile device. As a user you would want minimal scroll when you are using handheld devices. The desktop design is built for larger resolutions. Therefore it is not a good idea to squeeze the same design into a smaller resolution device.
After all readability/usability is key in mobile UI development.
Here are some useful link you might want to read before considering my opinion.
In addition to mere layout problems, i.e. having much information on the screen that comes with transferring an application on to a device with a compromised screen size it also depends on the application you're developing and which user interactive controls it utilizes.
If the design pattern of an applications GUI heavily relies on desktop specific features (hovering, fine direct manipulation, multiple modal windows etc...) it will not work well for a hand held device, if at all.
If this is the case you would have to develop additional versions of the web app to have it accessible to hand held devices.
It's precisely because you only '
The fact is you can't just change the layout of a desktop app and expect that to transistion suddenly to different type of device with a different set of constraints, a different set of capabilities and with users that have a different set of behaviours and a different set of expectations.
You have to consider the bigger picture - the customer journey map that says how users arrive, use, engage, and leave your application on the tablet or mobile devices.
You have to design for the mobile experience, the use patterns, the location, the orientation, the sensors, and the decreased screen real estate - it's a completely different mindset than designing for desktop.
But as well as optimizing for the mobile device, you also have to be consistent with the desktop version. Yes they conflict sometimes, nobody is saying this stuff is easy.
Maybe one or two things are unlikely to be used in the mobile workflow, and they can be removed for tablet/mobile but in the process, ask yourself 'were they really needed in the first place'?.
Users who move between desktop and mobile versions may well be frustrated to find features missing on the mobile version so try not to remove features that do get used - sure, make them available, but don't make everything fight for space - be clever about the way the mobile experience is defined and designed.
In the process you may well learn something about your product that can feed back in to the desktop version. Designing within constraints really helps to focus on what is important. Look at the things you're considering removing, ask why was that feature ok to remove and not another, why was it there, who uses it, how does it get used? Question everything. Get user feedback.
You have to see the bigger picture when trying to provide what you might term a cross-channel experience - you're not designing for different users - it's the same user! It's not even really cross channel - it should be channel-less
Honestly I could go on for hours...In short - don't think of it as a different layout - think of it as a different experience.
The majority of web sites/apps will greatly benefit having a UI designed specifically for a device. Since it's not practical to create a design for every device out there, my general rule would be to develop four designs: mobile (smartphone), small tablet (Kindle Fire), large tablet (iPad), and desktop.
I noticed in your comment above you discuss creating separate code bases for each site. This is unnecessary duplication. I recommend looking into responsive design or at least creating different stylesheets to target devices.
If you're unfamiliar with responsive design, I recommend reading the brief Wikipedia page and check out the references.
A great responsive example site is Food Sense. It has four different states, which you can easily view as you re-size your browser window.