Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Are you asking whether you should use one design for mobile and another for the tablet or do you mean one design for the desktop and one for mobile and tablet? –  Michael May 16 '12 at 11:18
    
@Michael it's the latter he means. One version for desktop and one for mobile/tablet. –  AndroidHustle May 16 '12 at 11:29
    
Then you provide the answer yourself, right? You already said, that the UI is "unusable" if simply transferred 1:1. Hence, you have to build a seperate one for those devices. –  Michael May 16 '12 at 11:33
    
@AndroidHustle you are correct –  Shivanand May 16 '12 at 12:34
1  
@Michael If I design a separate site, I have to maintain 2 sites which is expensive. I wanted to check with the community how they are managing such issues. –  Shivanand May 16 '12 at 12:42

4 Answers 4

It's precisely because you only 'changed the layout' of your desktop app that your app seems cluttered and unusable on the tablet. It hasn't been designed for mobile - it was designed for desktop.

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.

Maybe in some cases, especially where media is consumed rather than engaged with, it's acceptable to add a dozen lines of javascript to make the layout responsive, but for a web app that requires engagement, it's rarely the right option.

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.

share|improve this answer
1  
Well, you should be reasonably consistent with the desktop version. Many times device conventions (panning instead of scrolling, no "hover" state) beat out your specific site's conventions. –  Ben Brocka May 16 '12 at 16:48
    
@Ben I am not clear by what you meant by "Many times device conventions (panning instead of scrolling, no "hover" state) beat out your specific site's conventions." Can you expand a bit with an example? –  Shivanand May 17 '12 at 5:57
1  
@Shivanand I think Ben is covering my point where I said about optimizing & consistency are two conflicting things due to the constraints of mobile/tablet. Eg there is no hover state, so tooltips, auto zoom, auto dropdown, etc are not possible. There are different mechanisms for moving about the canvas or within certain areas of the canvas - on desktop you can have nested scrollable areas with independent scrollbars; on mobile you effectively have only one large scrollable area. There are alternative methods of interaction but this is the forced 'optimization at the expense of consistency'. –  Roger Attrill May 17 '12 at 6:32

I 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.

Why Separate Mobile & Desktop Web Pages?

Responsive Web Design or Separate Mobile Site?

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.