SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Review my UX experement

    I need your opinion on graphical style and navigation.

    WARNINGS:
    • Cyrillic filler text! Generally, cyrillic fonts are ugly as if they carved with an ax, especially on the large letters, so i have spend reasonable time to find proper font and i want you to embrace it's typograpical beauty :P
    • Since it's not a commercial site i didn't include fallbacks. So only IE 11 and all fresh browsers.
    • It's adaptive (3 level) and touch enabled.


    What I want to accomplish:

    I like how Apple(http://www.apple.com/iphone-5c/) used partially obscured graphic elements to subconscious tell that this page is scroll-enabled and how scrolling isn't a scrolling as we know it but more like some parallax-scroll thingy without invalid state(when you half-scrolled from one section to another and content is out of place and looks weird or unreadable) and still it feels like scrolling. So i wanted to try something like this, but build around HTML5 video backgrounds and to be non-distracting.

    On the technical side:

    I have made this project to play with Google Dart language (just released from beta) SASS/compass, HTML5 goodies and a new grid systems from the Foundation + some Scala on the Google App Engine JVM.
    And it was pretty much good, well greased experience. I've managed to optimize pretty much every aspect of the page. Here's some benchmarks: 1, 2, 3 With js and vanilla css it would be too hard and to tediously to do for free :P

    Ah yes. Here is the link http://tvc-2m.appspot.com/

  2. #2
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    First time through the site the camera moved on its own on the selected pages. I didn't really "get" what the sliders were for. Then second time through the camera didn't move on its own so I got it. However not sure if I would have if I hadn't seen it move on its own the first time. Very clever. Upon minimizing the screen size everything responded beautifully EXCEPT the image of the camera completely disappeared. Not sure if I would understand on a mobile device if I never saw the product image. I was viewing on Chrome on a 15" screen laptop and resized the screen to check the responsiveness. Hope this is helpful. A.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Serbia
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JAre View Post
    Generally, cyrillic fonts are ugly...
    I'd suggest you try with more rounded font such as Calibri.

    I'd also get rid off the blue outline on the mouseover text or would test 1px border variant.

  4. #4
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey looks good to me.

    The only fault for me seems to be that when you mouse over the square page indicators the border of the div that opens runs over the square below. Which i think is what ClipartLab is also saying.
    If you got rid of the border i think the box with the pointed end and drop shadow would look better as well. Drop shadow within a border always looks a bit odd to me.

    I also couldn't get the first screen back. not sure if this is important (can't read russian) but i guess i would like to be able to at least click somewhere to drop the first blue screen down.

    Tested on FF26.0 Win7 64bit

    hth
    If i am a product of your imagination you should try harder!

  5. #5
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amy@hhd View Post
    I didn't really "get" what the sliders were for.
    It's really helpful feedback. Normally you should visually connect controller (slider) and controlled element(camera image). I took a compromise between "right" and "pretty" because left part of the page looked a bit "too heavy" so i grouped inputs with the text panels. Since there is nothing else that can be controlled on the page I thought that it is obvious. But of course I can't tell for shure since i designed it.

    Quote Originally Posted by ClipartLab View Post
    I'd suggest you try with more rounded font such as Calibri.
    Thanks, "Calibri" looks nicer and more readable. It's even more important for the big chunks of text. But "CondensedLight" might look more official and technical. On the firs "blue page" i use built-in font to deliver some content asap. Theoretically i can load another font in deferred way, but it will interrupt user. I definitely should play more with fonts and typography.

    Quote Originally Posted by ClipartLab View Post
    I'd also get rid off the blue outline on the mouseover text or would test 1px border variant.
    Quote Originally Posted by Noppy View Post
    The only fault for me seems to be that when you mouse over the square page indicators the border of the div that opens runs over the square below. Which i think is what ClipartLab is also saying.
    If you got rid of the border i think the box with the pointed end and drop shadow would look better as well. Drop shadow within a border always looks a bit odd to me.
    It's a Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=480888
    I made this tooltip thingy without JS on pure css (hover + before, after) out of curiosity. And it turned out to be non-agile and with some glitches. For example i can't make proper arrow size in IE. So yah it's not a good solution + this bug makes it look somewhat strange.

    Thanks guys! I appreciate your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •