Why? Why would they do this?



  • http://www.topgear.com/magazine-new-design/ - turn a page, why don't you. What the blithering fuck were they thinking?



  •  electronics weekly used to have this (or similar) i think.  It was nice to find the little "download as .pdf" underneath otherwise i just wouldn't bother.



  • I fail to see the WTF here.



    It says "View the new look"

    I can view the new look. I can't read the content, but that's why you buy a physical copy.

    It serves it's purpose of giving you and overview of the new look. It's not meant for reading



    The layout itself doesn't strike me as wtf-ery either.



    @intertravel said:

    What the blithering fuck were they thinking?

    ... about what exactly?



  • Oh, I get it! The WTF is that they assume you turn the page of a magazine starting from the corners, right?



  • First I thought it was a tablet-only "swish-to-turn" design (because, as we all know, no one surfs the web on their PC anymore, nowadays), but then again, it uses flash, so that can't be it.
    On the other hand, it can't just be a simple static preview either, because, again, it uses flash.

    So I've no idea.



  • @MiffTheFox said:

    Oh, I get it! The WTF is that they assume you turn the page of a magazine starting from the corners, right?

    Yeah, very poor usability. Clicking the GIGANTIC IMAGE of the cover, or the two large pointing arrows does nothing. Unless the user just happens to mouse near the corners of the image, and see the "page turn" animation starting, they'll have no clue this image is interactive at all. Note that this requires a rollover, and thus doesn't happen on a touch- or pen-based computer at all, those users are just fucked.

    And then it gets worse. It's not enough to simply click the page turn animation, you have to actually hold down the mouse and drag it towards the left. The click region doesn't seem to match the "page turn" effect region at all, because several times I clicked and dragged, and nothing happened. Also, dragging the mouse too fast, or dragging outside the border seems to stop the page turn animation as well.

    Now let's see what happens with Flash disabled... that design concept is actually pretty damned easy to implement using only JavaScript and DOM, even with their stupid mouse-dragging behavior (honestly it would probably work better, since their mouse tracker wouldn't be limited to the Flash active area.) But did they? Nope! All you get is a tiny, left-align "get Flash Player" badge.

    So we're completely inaccessible to:
    1) Touch-based computers and pen-based computers
    2) Anybody who is incapable of dragging the mouse leftward without leaving the magazine rectangle (probably half of trackpad users)
    3) Anybody with Flash disabled, for whatever reason
    4) Anybody with JavaScript disabled, for whatever reason

    Here's a quick hallway usability test:

    @IM Conversation said:

    Blakeyrat says (11:53 AM): http://www.topgear.com/magazine-new-design/

    Here's a good exercise

    What's wrong with that magazine previewer?

    Anne says (11:53 AM): it doesn't work?

    Blakeyrat says (11:53 AM): Oh it works

    If you happen to know the secret of their lousy design

    Anne says (11:54 AM): I give up

    Blakeyrat says (11:54 AM): Hover near the upper right corner of the magazine cover image

    Anne says (11:55 AM): wow

    apparently it's also an IQ test

    Blakeyrat says (11:55 AM): Yup.

    For the record, Anne's using a normal laptop and mouse. An average person with no vested interested in TopGear Magazine took a look at that site and assumed it was broken. That's... pretty bad.



  • I found two WTFs.

    1. It's too small to read comfortably, and using zoom on the browser doesn't work.

    2. Every time I turn a page, it either won't turn all the way, or when it does, it thinks I want to turn it back. Even when I let go of the mouse button.



  • My biggest issue is the ugly as heck linear interpolated faux ambient occlusion they use to add a "fold" to the middle and under pages. Note that the default Flash behavior is to use a far more pleasing gamma-correct gradient that doesn't have a perceivable edge. It also detracts from their new layout because it looks dull down the middle. FAIL!

    That said, that page turning effect is LOVELY, if only it was a it more intuitively implemented.



  • @blakeyrat said:

    And then it gets worse. It's not enough to simply click the page turn animation, you have to actually hold down the mouse trackpad and drag it towards the left.
    FTFMyCase.



  • @woodywood245 said:

    I found two WTFs. 1. It's too small to read comfortably, and using zoom on the browser doesn't work. 2. Every time I turn a page, it either won't turn all the way, or when it does, it thinks I want to turn it back. Even when I let go of the mouse button.

     

    It's a previve. hence the bad image and now real zoom. But did you perchance happen to try double-clicking in the corners? Hint: Both top and bottom corners are active. Et Voila! Accessibility for people with pens, pressure sensitive screens and other strange I/Fs.

    But why didn't they not just take one of the established readers instead? Too expensive?



  • @nexekho said:

    My biggest issue is the ugly as heck linear interpolated faux ambient occlusion they use to add a "fold" to the middle and under pages.

    The WHAT?



  • @Obfuscator said:

    The WHAT?




    This:

    [img]http://i.imgur.com/KBGso.png[/img]


    It's clearly trying to imitate ambient occlusion (basically do a load of samples flying in all directions on a surface and perform a weighted average to darken it and create shadows in crevices) but doing a terrible job of it. Just thrown this together in Flash:

    [img]http://i.imgur.com/kmUAl.png[/img]


    On the top, I've left the gamma correction turned on and it nonlinearly fades from black to white with a little deceleration either end to make it look smoother. On the bottom is what they've set it up to do instead, linear interpolation, which looks ugly as hell and isn't much cheaper given how sluggish Flash's renderer is.



    Oh, and a bonus image of some AO if you don't fancy Googling it:

    [img]http://joomla.renderwiki.com/joomla/images/stories/render/tech_ambocc_02.jpg[/img]



  • @woodywood245 said:

    I found two WTFs.
     

    Also

     TypeError: Error #1009: Cannot access a property or method of a null object reference.
        at com.massiveProCreation.flipbook.ui::ControlPanel/resize()[C:\Documents and Settings\tdiggle1016\Desktop\maga_flash\com\massiveProCreation\flipbook\ui\ControlPanel.as:69]
        at flash.events::EventDispatcher/dispatchEventFunction()
        at flash.events::EventDispatcher/dispatchEvent()
        at flash.display::Stage/dispatchEvent()
        at com.massiveProCreation.flipbook::FlipBook/xmlLoaded()[C:\Documents and Settings\tdiggle1016\Desktop\maga_flash\com\massiveProCreation\flipbook\FlipBook.as:152]
        at com.massiveProCreation.flipbook::FlipBook/set xml()[C:\Documents and Settings\tdiggle1016\Desktop\maga_flash\com\massiveProCreation\flipbook\FlipBook.as:1621]
        at com.massiveProCreation.flipbook::MainAS/addFlipBook()[C:\Documents and Settings\tdiggle1016\Desktop\maga_flash\com\massiveProCreation\flipbook\MainAS.as:281]
        at com.massiveProCreation.flipbook::MainAS/coverLoaded()[C:\Documents and Settings\tdiggle1016\Desktop\maga_flash\com\massiveProCreation\flipbook\MainAS.as:257]



  • My company also has a magazin that is similarly implemented :(



  • @nexekho said:

    @Obfuscator said:
    The WHAT?


    This:

    It's clearly trying to imitate ambient occlusion (basically do a load of samples flying in all directions on a surface and perform a weighted average to darken it and create shadows in crevices) but doing a terrible job of it. Just thrown this together in Flash:

    On the top, I've left the gamma correction turned on and it nonlinearly fades from black to white with a little deceleration either end to make it look smoother. On the bottom is what they've set it up to do instead, linear interpolation, which looks ugly as hell and isn't much cheaper given how sluggish Flash's renderer is.

    Oh, and a bonus image of some AO if you don't fancy Googling it:
     



  • @Kiss me I'm Polish said:

     

    I don't get your response.

     

     



  • The filename's jawdrop... maybe he thought I was throwing around buzzwords for the heck of it?



  • @nexekho said:

    On the top, I've left the gamma correction turned on and it nonlinearly fades from black to white with a little deceleration either end to make it look smoother. On the bottom is what they've set it up to do instead, linear interpolation, which looks ugly as hell and isn't much cheaper given how sluggish Flash's renderer is.
     

    What verison of flash did you use and what options?

    I can't reproduce your harsh second gradient in Flash 8 unless I manually create colour points. I can approximate it by just turning on "Linear RBG", but it's still a lot smoother than what you posted. I don't have a gamma option, but perhaps that was added in a newer version.



  • That is linear RGB. I'm using CS3.



  • @nexekho said:

    The filename's jawdrop... maybe he thought I was throwing around buzzwords for the heck of it?
    Absolutely not. It's just... so much work to prove your point that the job is done ugly.



  • @nexekho said:

    My biggest issue is the ugly as heck linear interpolated faux ambient occlusion they use to add a "fold" to the middle and under pages.

    My biggest (well, only) issue is this:



  • I thought this was linear RGB:



  • Looking at the raw values, yes it is. Flash must be mangling its linear RGB slope to fit some colour management rubbish I've never told it to do or something. I didn't actually check the values it was kicking out, because I typically assume that when I tick "linear RGB" I get linear RGB. It's definitely a lerp artifact though.



  • [url]http://www.mediafire.com/?3u1f3jfp5uaw1ph[/url]

    In fact, here's a link to the exact file that was exported from.



  • @nexekho said:

    http://www.mediafire.com/?3u1f3jfp5uaw1ph

    In fact, here's a link to the exact file that was exported from.

     

    Your gradients have a single bar of black on the left of the document. If I kill that, it's the same as my Flash CS3.

     

    Yeah, I was using CS3. I didn't even realize that because I never open it :D



  • It's supposed to, otherwise how can you judge how abruptly it terminates?



  • @nexekho said:

    It's supposed to, otherwise how can you judge how abruptly it terminates?
    With my eyes.

     

    I think you cheated. :(

    Shame on you.



  • @nexekho said:

    It's definitely a lerp artifact though.



  • @blakeyrat said:

    lerpy lerpy
     

    LTFY



  • @dhromed said:

    @blakeyrat said:

    lerpy lerpy
    lerpy lerpy

    Ok I know that's not the right effect, but it looks funny.



  • With my eyes.

    I think you cheated. :(

    Shame on you.

    No, really, the artifact is that the edge of the gradient is visible because the colour abruptly stops changing. If it abruptly changes to something else, how could you see it?



  • @nexekho said:

    No, really, the artifact is that the edge of the gradient is visible because the colour abruptly stops changing. If it abruptly changes to something else, how could you see it?
     

    It's visible because the gradient is completely skewed towards the left. Brightness of the surroundings does the rest.



  • This thread has officialy gone to the dogs.



  • @blakeyrat said:

    @dhromed said:

    @blakeyrat said:

    lerpy lerpy
    lerpy lerpy

    Ok I know that's not the right effect, but it looks funny.

    U R DOIN IT WRONG I FTFY

    herp derp lerp

     


Log in to reply