design #2
Comments
|
currently looks like:
|
|
|
|
Landing page wireframe: |
|
Mobile wireframe: https://wireframe.cc/UMhsb2 |
Desktop
time agoDepends on layout (eg sidebar has no dates), but I like this version of time ago:
and at least for a while after launch, I'd like to be submitting enough links ourselves that the default front page won't have very old links. rowsI like current item rows—any reason for moving time ago to the right or not having the comment heads on right end? loginButton? I like Github links. Discuss if needed in #4 layoutI like the right column—rows don't need to be nearly as wide as current, see eg sidebar. It feels weird to me for search to be on the side? Usually in header or above list? I like current location, and there's plenty of room for it. For right column, in addition to newsletter signup, maybe a short description and tags & top users, like smarthost (a vulcan app, so maybe there's a component already for them, or maybe its OSS):
Mobile
current:
rowsI like the relative compactness of your rows, but I think width is optimistic. Both versions have image, title, and upvote on same line. I like the size of image & upvote on current, but the text feels squished. And current feels too tall—all the metadata doesn't need to be on different lines. I like Sidebar, with images on the right, but need a place for upvote:
commentsYour icon+45 for comments isn't as obviously clickable as the current link, which might result in people not reading comments or commenting. Problem with user next to "2 comments" is that they're both blue. Nice to have time ago between the two links. filtersI like yours—current takes needless vertical space. Dropdowns don't need to be full width, and search isn't a common enough use case to warrant an input—your search icon that shows the input is good. newsletterLooks like yours is fixed? I like it as a break in the rows:
|
|
I like links in lieu of View dropdown (not obvious to user what's behind that dropdown). Thinking top selected by default. Clicking Submit Link, when you're not logged in, should just open Github OAuth. Ditto with commenting and upvoting. So maybe we don't even need a "Sign up" link in header? For mobile, keep links instead of View. But Tags dropdown instead of tag cloud. Don't like "Topics"—feels like there should be one "topic" to an article, but like there can be multiple "tags/categories". For newsletter subscription dropdown:
|
Desktoptime agoI agree about submitting enough links ourselves that the default front page won’t have very old links rowsI think we should have the item that we think most users will look for be separate from the others and grab attention. I thought the age of the links might be what users will find interesting. If you think it’s the comments, then I would swap the where time-ago and comments are in the row…. Or put them side by side on the right side of the row where they are less likely to be crowded by the title of the link. layoutThe placement of the search button is a little arbitrary. Sidebar has their search button at the top; however, it acts more like a button that displays components with tags for the articles, an input field for the search and a calendar. Hacker News has their search button at the very bottom. A user can search only after scrolling all the way down on either desktop or mobile. Choosing to have the search button on the side gives the components at the top some room to breathe while also allowing users access to the search bar whenever they want. Doing a quick look at the pages I had open in my browser, https://www.apollographql.com/docs/ and https://docs.meteor.com/#/full/ both have their search fields on the left side. It doesn’t seem uncommon. I really like the idea of having some description, tags and top users on the side column! I would be cautious about the smaller details of this column so that it doesn’t visually overpower the main column. MobilerowsI agree that we can put all the metadata on the same line. HN doesn’t have any images on mobile and is able to display 11 links on pixel-2. Sidebar barely shows 3. commentsI agree the color of time ago gives a visual break between comments and user. We can always change the color scheme if we decide we want to have them in a different order. I left them in the current order to have some continuity between the desktop version and the mobile version. If we are not going to move time ago to the center on both, I would rather change the colors so that the comments look more enticing to click. newsletterSidebar had the newsletter signup come after the first day’s list of links. Since we aren’t planning to batch our links, perhaps what we can do is have the subscribe component disappear after the user has scrolled through X number of links? Or we can have it come up after a fixed number of links has been scrolled through by user? Currently, subscribe component takes up the space of at least 1 link that we could have been showing our users. It feels like a misuse of our real estate and I would love to change that. |
What about desktop rows as is, and matching for mobile, without these avatars?
It feels to me like it fits on top, as one of the ways to filter/change the list of items (in meteor docs/guide, it's filtering the list of chapters/sections, which is in the sidebar). But it's also probably not used much, so doesn't need to take up prime real estate. Right column under Tags?
I like the sidebar style of inline instead of an X-able box. And after a few rows. |
I like it.
That seems like a reasonable place to put it. If we find that it is getting more usage, we can move it to be placed above tags.
Seems good to me. rowsDo you have any opinions about numbered vs un-numbered rows. Sidebar links aren't numbered, HN numbers their links. What do you think? |
thinking not that useful, so not worth the mental & page space |
|
Agreed.
…On Thu, Oct 18, 2018 at 2:01 PM Loren
|
post design idea drawings here!
similar news sites
vulcan:
https://sidebar.io/
http://huttle.co/
https://www.smarthosts.org/
non-vulcan:
https://www.producthunt.com/
https://news.ycombinator.com/
graphql design exampes
https://graphql.guide/
http://graphql.org/
https://www.graphql.com/
https://summit.graphql.com/
https://www.apollographql.com/
The text was updated successfully, but these errors were encountered: