Beer Geek Stats: Now Easier on the Eyes

Discussion in 'BeerAdvocate Talk' started by Todd, Aug 8, 2019.

  1. Todd

    Todd Founder (5,647) Aug 23, 1996 California
    Staff Moderator Fest Crew

    Overall, I love where we landed with recent updates thanks to everyone's feedback. But the page layout for beers has really been bugging me. Specifically the readability of the stats and other info. Things felt cluttered and incomplete.

    So I dropped all of the beer's stats into a list format, with plenty of whitespace to make things easier on the eyes, and labeled everything "Beer Geek Stats."

    Example: https://www.beeradvocate.com/beer/profile/26520/71820/

    I'll no doubt tweak things a bit more, but let me know what you think.

    Cheers!

    Todd

    (Note: If you can't see the changes, you're probably not logged in and viewing cached pages. Log in to see the updates now or wait until the cached page expires.)
     
  2. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    Nicley done! Not sure if your guys have a UX/UI designer on your team but this update was a nice touch. What are your thoughts if the beer image on the right side aligns to the center of the content box on the left where the stats are being shown.

    Also what are your thoughts on hover effects for each individual stat as a user moves their mouse over it to bring some emphasis and focus for that specific stat?
     
    AlcahueteJ, Bshaw22 and Todd like this.
  3. Todd

    Todd Founder (5,647) Aug 23, 1996 California
    Staff Moderator Fest Crew

    For the site, that would be me. :+1:
    I see where you're going with this. I'll test it out.
    That's already on my list of tweaks.
     
  4. superspak

    superspak Poo-Bah (31,691) May 5, 2010 Michigan
    Moderator Society Trader

    Awesome work Todd. I just noticed it right now. The lines separate everything in a very organized manner.
     
  5. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    Are you guys using WordPress as your CMS?
     
  6. Todd

    Todd Founder (5,647) Aug 23, 1996 California
    Staff Moderator Fest Crew

    We use a custom WordPress install and bridge for our Articles section, but nothing else.
     
    DEdesings57 likes this.
  7. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    That's awesome! I like wordpress. Anyhow keep us posted on your updates and the one thing I remember from my background in software is that - Your never done!
    Cheers!
     
    Sir_Winston_Beerhill and Todd like this.
  8. bbtkd

    bbtkd Poo-Bah (2,558) Sep 20, 2015 South Dakota
    Society Trader

    Much easier to pick out the ABV and style as compared to the last reformat.
     
    Bitterbill, FBarber and Todd like this.
  9. beergoot

    beergoot Poo-Bah (4,858) Oct 11, 2010 Colorado
    Society Trader

    Well done! It is easier to read.

    And I also like the idea of hover mouse-over effect for individual beer stats as suggested by @DEdesings57...
     
    DEdesings57 and Todd like this.
  10. ATL6245

    ATL6245 Initiate (86) Aug 16, 2018 Georgia

    I like it! I have returned to using the site more with the changes. Well done!
     
    DEdesings57 and Todd like this.
  11. Beer_Economicus

    Beer_Economicus Devotee (479) Apr 8, 2017 Indiana
    Trader

    @Todd The update looks great. I was always frustrated when looking up the stats before. As a result, I did not always use BA. I certainly now will. Great job.
     
    Todd likes this.
  12. rudzud

    rudzud Poo-Bah (6,721) Apr 28, 2010 Massachusetts
    Society Trader

    Looks more mobile friendly now.
     
    Bitterbill, Houborg1 and Todd like this.
  13. larryi86

    larryi86 Poo-Bah (3,596) Apr 4, 2010 Delaware
    Society Trader

    Not that I felt they were hard to read before, but I really like the changes that have been made, looks great!
     
    Todd likes this.
  14. TheGent

    TheGent Poo-Bah (1,932) Jun 29, 2010 New Jersey
    Society Trader

    Very easy on the eyes...VERY. As viewed on my iPhone. Thank you.
     
    Houborg1, BrewsOverHoes and Todd like this.
  15. FBarber

    FBarber Poo-Bah (2,825) Mar 5, 2016 Illinois
    Society Trader

    Not sure if this is just my browser, but the notes font seems a tad small for reading.

    Otherwise, looks great! Much, much easier to read through everything.
     
    Shaymus, Todd and DEdesings57 like this.
  16. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    try increasing the font size or "Zoom Size" under settings for your web browser.
     
    FBarber likes this.
  17. Todd

    Todd Founder (5,647) Aug 23, 1996 California
    Staff Moderator Fest Crew

    No change there, but I can play around with bumping it up a bit.
     
    DEdesings57 and FBarber like this.
  18. woodychandler

    woodychandler Poo-Bah (9,426) Apr 9, 2004 Pennsylvania
    Trader

    MUCH easier on the eyes! Really sleek. Me = likee! 8=) :grinning:
     
    Bitterbill and Todd like this.
  19. IronLover

    IronLover Poo-Bah (1,801) Apr 17, 2009 Pennsylvania
    Society

    Love and appreciate how you guys are always looking to enhance the site and improve the user experience. Cheers!!
     
    Bitterbill and Todd like this.
  20. Dmbphoenix

    Dmbphoenix Disciple (347) May 17, 2012 New York

    As the resident eye doctor here, I noticed. And was impressed and approved.
     
    Todd likes this.
  21. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    I actual felt the same at first viewing as well. I used to use "font-size: (x)em;" in my CSS style-sheets for increasing font size with relative units that would scale.
     
    Todd likes this.
  22. RagingBitch

    RagingBitch Initiate (42) Aug 4, 2019 Maryland

    Great job Todd! Much easier on the eyes. Thank You for the work you do.
     
    Todd likes this.
  23. jvgoor3786

    jvgoor3786 Poo-Bah (1,666) May 28, 2015 Arkansas
    Society Trader

    Yes, I like it a lot. It's very clean and easier to read now. Thanks for the updates, and thanks for taking our input to heart!
     
    DEdesings57 and Todd like this.
  24. Sammy

    Sammy Poo-Bah (13,402) Dec 1, 2003 Ontario (Canada)

    I love it. Classy job.
     
    Todd likes this.
  25. cryptichead

    cryptichead Meyvn (1,346) Jul 3, 2014 Illinois
    Society Trader

    The last few rows (Availability, Wants, and Gots) seem to be out of alignment and are wrapping around.
     
    meanmutt likes this.
  26. TrojanRB

    TrojanRB Meyvn (1,424) Jul 27, 2013 California
    Society Trader

    Looks pretty good. Not sexy, but functional. Thumbs up.
     
    Todd likes this.
  27. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    Functional is the backbone of sexy.
     
    NickSMpls and Todd like this.
  28. riptorn

    riptorn Initiate (159) Apr 26, 2018 North Carolina
    Trader

    Looks much better.
    Consider reducing the width of the labels column, unless there’s a reason to minimize the unoccupied real estate to the right of the data. Reducing that column width would bring the beer image more toward the center of the page, assuming you can define column width and justification.

    The font size for the “Notes:” looks to be the same as the rest of the stuff. It might just be an optical contusion because the text for the “Notes” is a long, wrapped string, which can give the illusion that it’s condensed.

    I view this on a 22" desktop monitor. so not sure how it's rendered on smartphones, tablets, phablets or whatever. That's the bane of needing to optimize display for multiple devices.

    What device/browser are you using? They're perfectly aligned (and no wrapping) for me.
     
    #28 riptorn, Aug 8, 2019
    Last edited: Aug 8, 2019
    Todd likes this.
  29. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    The above link given by @Todd is how this is viewed on a mobile Galaxy S9 Phone:
    [​IMG]
     
  30. DEdesings57

    DEdesings57 Zealot (517) Aug 26, 2012 New Jersey
    Trader

    The above link given by @Todd is how it appears on my Windows 10 Laptop:
    [​IMG]
     
  31. mig100

    mig100 Meyvn (1,360) Aug 3, 2014 Texas
    Society Trader

    Overall, this looks much better and more organized. However, the average score is not prominent enough or even bolded. Maybe have it under "Your Rating"?

    Untappd makes that info much easier to see/find. I think most users want to know the average score over the style or abv.
     
    Todd likes this.
  32. donspublic

    donspublic Poo-Bah (1,764) Aug 4, 2014 Texas
    Society Trader

    Man I love a well formatted list :slight_smile:. Looked up a beer on my phone earlier tonite and was like WTF, damned that looks clean. Love the tweaks
     
    FBarber and Todd like this.
  33. HopBelT

    HopBelT Meyvn (1,363) Mar 18, 2014 Belgium
    Society Trader

    That's an awesome overview. Thanks !
     
    Todd likes this.
  34. bubseymour

    bubseymour Poo-Bah (2,464) Oct 30, 2010 Maryland
    Trader

    All of the changes being made over the last week or 2 are really looking great. I love the style and world rankings being easily visible. Really gives people perspective of how many beers are out there and where the beer you are checking out fits into the beers of the world.
     
    FBarber and Todd like this.
  35. hopsputin

    hopsputin Poo-Bah (1,839) Apr 1, 2012 New Jersey
    Society

    Very easy on the eyes, and easy to pick out the info which you look for in purchasing & drinking decisions. Love it!
     
    Todd likes this.
  36. DIM

    DIM Poo-Bah (2,672) Sep 28, 2006 Pennsylvania
    Society

    Under beer geek stats there is a score, then style, ABV, and then more scores. I think it would be more harmonious to have style, ABV, then all the scores consecutively. I love the overall book.
     
    2beerdogs, Todd and Snowcrash000 like this.
  37. Ozzylizard

    Ozzylizard Poo-Bah (3,631) Oct 5, 2013 Pennsylvania
    Society Trader

    Thanks Todd! Definitely looking better and certainly easier to find data. Personally, I don't care about where it ranks, but I don't think you can ever have too much information.
     
    Todd likes this.
  38. JLaw55

    JLaw55 Meyvn (1,372) Jul 10, 2014 Missouri
    Society

    Love it! Much cleaner!
     
    Todd likes this.
  39. AmeriCanadian

    AmeriCanadian Savant (948) Jul 5, 2014 Tennessee
    Society

    Definitely a positive update all around. Much cleaner and more aesthetically pleasing. One tiny (nit-picky) request: would it be possible to change "Average" to "Average Rating"? This would help that frequently-referenced metric stand out a little more and also sync the naming convention up with "Your Rating" higher on the page? Thanks much.
     
    2beerdogs and Todd like this.
  40. Snowcrash000

    Snowcrash000 Poo-Bah (1,967) Oct 4, 2017 Germany
    Moderator Society Trader

    Looks the same on my iPod Touch.

    I wholeheartedly agree with this.
     
    Todd likes this.