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.

Is it better UX wise, to build a web application with traditional multi-page transitions or to have a single page application where the other components of the page use AJAX and jQuery to load content without visible page loads?

I'm not talking about single/multi-page forms. It is the whole web application that I'm referring to here.

share|improve this question
    
There's no right answer to this question. One is not inherently better than the other. It all depends on the context of your particular project. –  DA01 Apr 19 '13 at 16:27

3 Answers 3

up vote 10 down vote accepted

It all depends on what your web application is supposed to do and how much of your site is changing on every page.

  • if there's a small section of your site that's supposed to change, AJAX is your best option
  • if a large piece of your site is changing (for example, only the navigation and footer are the same on all of your pages), then you should probably go for multiple pages.

NOTE: even if you choose AJAX, I think I'd be best if you have a separate URL for each of your pages (for example http://example.com/index#home and http://example.com/index#browse) so the user can refresh the page or get back to the page by its URL.

share|improve this answer
2  
Not breaking the back behaviour of the browser is a big plus –  Toni Toni Chopper Apr 19 '13 at 15:31
5  
+1 for mentioning unique URLs in ajax implementation. –  rk. Apr 19 '13 at 15:38

I say single page if built properly and for a mobile device that way the user doesn't have to navigate and load each page on a device with probably slower and limited bandwidth.

There are user research studies that show that mobile-users understand that they will have to scroll more or click more to get to the content since they are on a mobile device.

Then you can choose to keep the single page layout for the desktop experience or choose to do a multi-page layout.

If you are doing a single-page layout, I recommend making the sections of the page navigable with anchors.

so the navigation will have links such as

<nav role="navigation">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#content1">Content 1</a></li>
        <li><a href="#content2">Content 2</a></li>
        <li><a href="#content3">Content 3</a></li>
     </ul>
</nav>

Then have the markup that makes up the content look like:

<section id="about">
    <a name="about"></a>
    About content goes here
</section>
<section id="content1">
    <a name="content1"></a>
    Content 1 content goes here
</section>
<section id="content2">
    <a name="content2"></a>
    Content2 content goes here
</section>
<section id="content3">
    <a name="content3"></a>
    Content 3 content goes here
</section>

I would also recommend giving the navigation fixed positioning ( in CSS ) so that as the user scroll down to these pages or clicks the links in the navigation and the browsers goes to these sections of the page, that the navigation is always on top of the viewport. Yes, this gives less viewing area for the content, which may be a problem on mobile devices, but it allows the user to navigate the site without having to scroll up all the time to go to the navigation.

Hope I helped some!

share|improve this answer

If "single page" app is built properly, you can't see a difference except for faster "page loads".

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.