Effective Webdesign Question

22 replies
Hey Warriors!

I'm working on a great Project, but I have a Question about website usability.

My website will be something like an online shop with a TON of information about the product including case studies etc etc.

So, the products will be listed in a row (quite normal), and just the most Important Information can be seen on the first look.

My idea is, that instead of creating an individual page for every product with all the details, I used JQuery to create "enlargable boxes". So with the click of a button in a product box, in enlarges and shows all Information. A second click and it closes again

What do you think is more user friendly? What would you like more?

best regards,
Michael S.
#effective #question #webdesign
  • Profile picture of the author InfoStudio
    istockphoto have something similar and it is very useful, but you need to watch for web page loading time! That mean, that you load that popup box only when visitor put mouse on it!
    {{ DiscussionBoard.errors[5233388].message }}
    • Profile picture of the author niceguy36
      istockphoto have something similar and it is very useful, but you need to watch for web page loading time! That mean, that you load that popup box only when visitor put mouse on it!
      I always check the loading time and try to make it faster. However, the boxes only open if you click on a button, not just through hovering.

      Thank you for your reply :-)

      best regards,
      Michael S.
      {{ DiscussionBoard.errors[5233415].message }}
  • Profile picture of the author zoomboy
    yes i agree with your idea. but you also have to think about the users cause it maybe get heavy then other as it will contain a different program so try to make it user friendly and easy to understand.
    {{ DiscussionBoard.errors[5233427].message }}
  • Profile picture of the author niceguy36
    I wouldn't have a problem with a site like that. However, keep in mind that building the site this way means that you'll have a hard time with SEO and search traffic.
    You are right. That was also a point against it, because I don't know if it works SEO wise like I had an additional page. However, as far as I know, something like Keyword density isn't that important anymore.
    One last thing: Although SEO wise it is maybe not that good of an idea, I want to provide the best user expierence possible.

    best regards,
    Michael S.

    edit:
    yes i agree with your idea. but you also have to think about the users cause it maybe get heavy then other as it will contain a different program so try to make it user friendly and easy to understand.
    I want it to be as user friendly as possible. I think, if the button is big enough, it shouldn't be a problem. :-)
    {{ DiscussionBoard.errors[5233496].message }}
  • Profile picture of the author curly sue
    jquery is good design, they encourage engagment.
    {{ DiscussionBoard.errors[5233504].message }}
  • From a design point point of view, it's a good idea since it keeps things visually clean. Question: do they work on mobile phones? do they work in old internet browsers? do they hurt your SEO rankings?
    {{ DiscussionBoard.errors[5233916].message }}
  • Profile picture of the author niceguy36
    From a design point point of view, it's a good idea since it keeps things visually clean. Question: do they work on mobile phones? do they work in old internet browsers? do they hurt your SEO rankings?
    I don't know if they work on mobile phones.
    Old Internet browsers... I believe IE6 doesn't get it, everything above does.
    If it hurts my SEO ranking... that would be good to know^^
    {{ DiscussionBoard.errors[5234004].message }}
    • Profile picture of the author SlicedGenius
      I agree this could work well if implemented right. But you do lose out with no product page. You might get all the pertinent details into a jquery box, but what about customer reviews, upsells, zoomed product images, gallery, etc?
      Also be careful where your buy now/add to cart button is. Would this be inside this box? Or on the original page? Or both? Would the pop over obscure the original button? etc.
      Signature
      Hot Topics PLR Pack - Get five high quality, exclusive reports on some of the hottest topics in IM. Complete with squeeze pages and e-covers.
      {{ DiscussionBoard.errors[5234062].message }}
    • Profile picture of the author zaco
      Originally Posted by niceguy36 View Post

      I don't know if they work on mobile phones.
      Old Internet browsers... I believe IE6 doesn't get it, everything above does.
      If it hurts my SEO ranking... that would be good to know^^
      That is a cool idea but as they said it will hurt your SEO rankings for sure, when Google visit your site and find new pages and fresh content added all the time then they will give you better rankings, and your site will have more pages and gain more authority but if everything is added in jqueries then google won't see that, it might see u r site as 100 pages but u have 10,000 which will kill your rankings for long tail keywords..
      {{ DiscussionBoard.errors[5245133].message }}
  • Profile picture of the author SJ048998
    Originally Posted by niceguy36 View Post

    Hey Warriors!

    I'm working on a great Project, but I have a Question about website usability.

    My website will be something like an online shop with a TON of information about the product including case studies etc etc.

    So, the products will be listed in a row (quite normal), and just the most Important Information can be seen on the first look.

    My idea is, that instead of creating an individual page for every product with all the details, I used JQuery to create "enlargable boxes". So with the click of a button in a product box, in enlarges and shows all Information. A second click and it closes again

    What do you think is more user friendly? What would you like more?

    best regards,
    Michael S.
    Not bad idea with a sub-menu or row. You could add some unique impression to it, if it wasn't just a mere row, but shaped like an ellipse, if you know, what I mean, somewhat Safari web-browser uses.

    Good luck with your web!
    Signature

    An Image & An URL One Day Soon, Hopefully..

    {{ DiscussionBoard.errors[5234203].message }}
  • Profile picture of the author niceguy36
    I agree this could work well if implemented right. But you do lose out with no product page. You might get all the pertinent details into a jquery box, but what about customer reviews, upsells, zoomed product images, gallery, etc?
    Also be careful where your buy now/add to cart button is. Would this be inside this box? Or on the original page? Or both? Would the pop over obscure the original button? etc.
    This will be a affiliate site, so no upsells (as far as I know). Zoomed product images should not be the problem. I'm using lightbox for that.
    What do you mean with gallery? Gallery for what?
    The Button is at the bottom, if opening the JQuery box. But I don't know if it is that clever.
    The Problem with this whole thing is that one of the reasons I think this site will be useful, is that I put every effort to get the best user expierence.

    Not bad idea with a sub-menu or row. You could add some unique impression to it, if it wasn't just a mere row, but shaped like an ellipse, if you know, what I mean, somewhat Safari web-browser uses.
    Sounds really cool. The problem is, I have no idea how to do that (I'm really bad at JQuery, and everything I know about HTML & CSS is through trying & implementing).

    But I think the usual row will be enough^^

    Good luck with your web!
    Thanks a lot!!

    best regards,
    Michael S.
    {{ DiscussionBoard.errors[5234459].message }}
    • Profile picture of the author SlicedGenius
      By Gallery, I meant if you had multiple images of the product to show, but sounds like that's not an issue for you!

      I would be concerned if the buy button is only in the pop up box - if they first load the page and take a quick look - it might be confusing how to proceed?
      Signature
      Hot Topics PLR Pack - Get five high quality, exclusive reports on some of the hottest topics in IM. Complete with squeeze pages and e-covers.
      {{ DiscussionBoard.errors[5234528].message }}
      • Profile picture of the author niceguy36
        Originally Posted by SlicedGenius View Post

        By Gallery, I meant if you had multiple images of the product to show, but sounds like that's not an issue for you!

        I would be concerned if the buy button is only in the pop up box - if they first load the page and take a quick look - it might be confusing how to proceed?
        I feel stupid that I have not considered this. Ouch. Very stupid. Actually it is obvious oO

        Hm, maybe a little pop-up bubble on the site who's saying smth like "If you need more Information or want to purchase the product, just click on the XYZ Button". But I don't know... I don't think it would be a good Idea... I mean, the main purpose was to make it easier and smoother, but if the user gets confused, It would just hurt the whole usability.

        I'm confused...

        But anyways, thanks a lot!

        best regards,
        Michael S.
        {{ DiscussionBoard.errors[5234721].message }}
  • Profile picture of the author DustinG
    Have you considered dividing the content up into tabs?
    {{ DiscussionBoard.errors[5235261].message }}
  • Profile picture of the author sbucciarel
    Banned
    I think all round, the thumbnails going to a single page is a better option. Gives you room for add-ons/accessories/upsells, customer reviews, and way better for SEO.
    {{ DiscussionBoard.errors[5235286].message }}
    • Profile picture of the author niceguy36
      Have you considered dividing the content up into tabs?
      Hm, I don't know exactly how you mean that.

      thank you for all the help

      best regards,
      Michael S.
      {{ DiscussionBoard.errors[5241494].message }}
      • Profile picture of the author tampaprogrammer
        I don't suggest this for several reasons:

        1. With jquery, even though you only show the product upon hover/click, the data IS loading in the background (unless you use AJAX/JSON to load as needed).

        2. Like others have said, I believe SEO likes a site with lots of pages. Having a dynamic "product" page that you can CMS the product info would be much easier to update long term.

        3. Few people disable javascript these days but "some" do and they won't see anything.

        I suggest you use the jquery lightbox as a "teaser" (more info than what is one the front page listing) but not the indepth detail that the final product page entails. Like someone else said, a comment/product review area for users would be nice PLUS a section that says "others who purchased this product also purchased these...." which could lead you to additional sales.

        Good luck,
        Rod
        {{ DiscussionBoard.errors[5241526].message }}
  • Profile picture of the author ibacklinkpro
    A few things:
    1) if you create your link like this:
    Code:
    <a href="productpage.html" class="popup" id="productid">...</a>
    And bind your jQuery to class popup, then it will not at all have any negative impact to SEO

    2) jQuery popups are great and add a sense of web2.0 professionalism to your site however, keep in mind that about 2% of people have javascript disabled because someone scared them into thinking that people can steal your crap with javascript enabled. If your product links are as described above, then that will be fine as long as the actual product page follows the same layout as the rest of your site... this may mess with how it looks in your popup so you will need to think about how to implement this so that it works in both places.
    Signature

    Here is How to Steal Your Competitor’s High PR Backlinks:
    http://www.warriorforum.com/warrior-...free-demo.html

    {{ DiscussionBoard.errors[5241537].message }}
    • Profile picture of the author tampaprogrammer
      Another good thing to remember about lightboxes is that they try to center themselves in the users window.

      If your content is longer than a typical page long (remember, many are on 15" laptops so their viewing screen is only about 700px high) some lightboxes get a little confused by this and look funny and/or have a hard time scrolling to view the content.

      Again, I suggest a lightbox with teaser info no larger than say 600x400 in size. That seems to work on most screens.

      Not sure if you want to address mobile viewing here or if you even plan to target a mobile design to accomodate.
      {{ DiscussionBoard.errors[5241559].message }}
      • Profile picture of the author niceguy36
        First of all, thank you all so much! This forum ROCKS! :-)

        1. With jquery, even though you only show the product upon hover/click, the data IS loading in the background (unless you use AJAX/JSON to load as needed).
        I know, I was worried about this, but I thought if I just use like 5~ products per page, and add a "library" (so they can get through the pages using ajax I believe), it should not affect the loading time too much. However, I still have to learn how to do this^^

        2. Like others have said, I believe SEO likes a site with lots of pages. Having a dynamic "product" page that you can CMS the product info would be much easier to update long term.
        You are absolutely right. However, I just worked a little bit with Typo3... so my expierence in CMS is very limited. Also, I love HTML + CSS coding. Hm... I don't know...

        I suggest you use the jquery lightbox as a "teaser" (more info than what is one the front page listing) but not the indepth detail that the final product page entails. Like someone else said, a comment/product review area for users would be nice PLUS a section that says "others who purchased this product also purchased these...." which could lead you to additional sales.
        That is a great Idea. I think I'll implement it that way. THANK YOU SO MUCH!!

        A few things:
        1) if you create your link like this:
        Code:
        <a href="productpage.html" class="popup" id="productid">...</a>
        And bind your jQuery to class popup, then it will not at all have any negative impact to SEO

        2) jQuery popups are great and add a sense of web2.0 professionalism to your site however, keep in mind that about 2% of people have javascript disabled because someone scared them into thinking that people can steal your crap with javascript enabled. If your product links are as described above, then that will be fine as long as the actual product page follows the same layout as the rest of your site... this may mess with how it looks in your popup so you will need to think about how to implement this so that it works in both places.
        Hm, I don't exactly know what you mean. Do you mean usual pop ups? (Like most list building pop ups)
        If you mean it that way, I think it would be more annoying than getting directly to a separate review page.
        But maybe I'm to stupid to understand you ^_^

        Another good thing to remember about lightboxes is that they try to center themselves in the users window.

        If your content is longer than a typical page long (remember, many are on 15" laptops so their viewing screen is only about 700px high) some lightboxes get a little confused by this and look funny and/or have a hard time scrolling to view the content.

        Again, I suggest a lightbox with teaser info no larger than say 600x400 in size. That seems to work on most screens.

        Not sure if you want to address mobile viewing here or if you even plan to target a mobile design to accomodate.
        I'll keep that in mind! Thank you!

        You guys are great! <3

        best regards,
        Michael S.
        {{ DiscussionBoard.errors[5241928].message }}
  • Profile picture of the author ibacklinkpro
    No, no a jquery lightbox like popup is what I'm talking about, you would use jquery like:

    Code:
     $('.popup').click(function(){
         // You popup code goes here
         // You can get product id that was clicked on like this:
         var productid = $(this).attr('id');
    });
    Signature

    Here is How to Steal Your Competitor’s High PR Backlinks:
    http://www.warriorforum.com/warrior-...free-demo.html

    {{ DiscussionBoard.errors[5244260].message }}
  • Profile picture of the author dollaranderson
    When you create a new web- design for the purpose of business use. Then your web design is simple and unique look and easy to recognise for all our clients. You select the simple font and unique colour combination for web-site design. Avoid to select for large and fancy font. You choose the good logo for web design.
    {{ DiscussionBoard.errors[5544937].message }}

Trending Topics