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.

I'm new in user experience design. Now I started working on my first app idea, it is really interesting. I want to make this application for 3 main platforms right now. If it gets positive responses, then I'm also interesting launching this app as a web application, and for Blackberry too.

I am confused by one thing: Is it right to follow only one design and flow for all these three platforms? Or is it better to make all different mock-ups with basic platform standards, and I can spend my money and time as each platform needs it.

Does it make any sense if I spend money and time for different designs, or is it better that I use one single mock-up design for all platform?

share|improve this question
    
I don't really understand what you're asking here. That's probably a language translation issue though. It looks like your question is 'should I create mockups for each device I'm releasing to, or just use one global one'. Is that correct? –  JonW Oct 24 '13 at 14:09
    
for example android have back button and iphone don't have iphone ui guideline that put back button into top app title bar and in android we do not need that it platform user experience there are many stuff like that but i don't know is it matter or not –  Sanjay Patel Oct 25 '13 at 7:02
add comment

3 Answers

up vote 1 down vote accepted

You are extremely likely to benefit from adaptive design - a dedicated design for each display group. Twitter's Bootstrap defines 3 of these (and you can see the width range of each):

  • Mobile
  • Tablet
  • Desktops

With relation to template design, different display sizes affect the following:

  • The amount of content reasonable to put in a template.
  • The visibility of content/interaction elements (which is vital for high-usability).
  • The arrangement of items.
  • The size of the elements.
  • The way people interact with the application (no right-click, hover, or modified drag-and-drop behaviour on touch screens; can you imagine a drag-and-drop between two tables on a mobile device?).
  • The 'fold' height - while many already disregard this for desktop displays, it could be a factor if you take a 'one-design-fits-all' approach.
  • There is also the platform standard (Microsoft and Apple has differences in their design guidelines).

So unless your application is very simple (like a single scrollable page - when responsive design can provide a one-fits-all solution) you will most likely have to create alternative designs for each display group.

A small display design would typically involve more templates and deeper navigation, with each template involving less content and interaction elements. Your task models will typically be sliced to templates more often with small displays. Thus the arrangement will change. You will also have to account for the interaction variation between the devices.

If any guideline may be given, you may wish to start with the mobile design - it is typically easier to join templates for bigger displays than break them down for smaller ones. Designs for smaller devices also tend to promote higher proximity and minimalism (less is more), which are generally a good thing for designs.

Just to further exemplify, consider the differences:

A screenshot of evernote desktop

A screenshot of evernote mobile

share|improve this answer
add comment

If your 3 platforms are very different sized, you should go into 3 different-but-related mockups. You should google a bit about "Responsive Design".

I guess you are designing the interface for desktop, tablets and mobile devices.

Normally on Desktop you have plenty more space, and you can lay it out as you want (but following the common UX guidelines)

On the opposite, on mobile devices you will be looking for a more vertical design as they normally lack space.

A good example is Sony's website (I'm not related to sony at all xD) try to browse their site from your desktop and from your mobile.

On smaller devices some elements will change the layout and some even disappear/collapse normally in the responsive design, but you might keep the general feel/style/branding compared to the desktop/bigger version


Anyway if you have enough budget, I would really recommend you to do the website and different native apps for each platform. People always like the native apps more.

share|improve this answer
add comment

As a developer myself I find it useful to have responsive versions of sites mocked up or at least be given and indication of how styles and objects will change when the screen gets smaller.

For example at desktop size the base padding/margins on most elements can be around 20/30px comfortably, but what do we drop down to at tablet and mobile sizes? Do we only change down to around 10px at mobile or do we also drop at tablet size too?

Even without a full mockup of responsive versions of a site, it is good to have a clear understanding of how elements should be when the screen reaches certain breakpoints or sizes.

From a design point of view however it could be a good idea to experiment with how your elements will work at smaller screen sizes. I constantly come across instances where a widget beautifully crafted for a desktop display just won't fit nicely into the responsive frameworks that we are using.

share|improve this answer
add comment

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.