Welcome to Hubski.   We share good ideas and conversation here.   Login or Join Us!
Hubski Update: Hubski gets a refresh.

by hubski · #hubskiblog
posted 373 days ago · shared by: 23
Today brings one of Hubski's biggest updates in a long time.

Over the past few months, I became convinced that Hubski's form could better fit its function. As an aggregator, Hubski has inherited some design choices. Some of this legacy is beneficial, and some is likely not. In an effort to separarte the two, I resolved to step back, and to reevaluate Hubski based upon how we use it. Today's update reflects the first major step in that process.

Importantly, I did not do this in a vaccuum. Along the way, I've been guided by continuing feedback from all of you, and the following people gave suggestions and critiques that significantly guided the redesign: thenewgreen, sounds_sound (the cool little follower icon in the top right was his idea), b_b, insomniasexx (who crashed a Google hangout!), gq, and kuli.

However, as I decided which advice to take, I hold responsibilty for any aspects of this update that fall short.

This is not the end of this process, but these changes are significant enough that we thought it would be best if further decisions were informed by use. As we tweak this update, we plan to test some other ideas that we have.

As always, feedback is much appreciated!



by rustle 372 days ago  ·  link
Frame the blocks ie a darker background then have the blocks with light or off white
by mk 372 days ago  ·  link
It's a good suggestion. I'm going to be trying something like that.
by caio 370 days ago  ·  link
So here are some of my ow thoughts on the new redesign:

0. I like it. I think it looks clean and minimalistic. If we were to compare, I'd say hubski is to social networks what Google was to search engines when it first hit: simple and full of white space, even though the columns are quite busy, as lessismore pointed out. However, it might just take a little getting used to. I don't want to be too quick to dismiss it.

1. It looks like TweetDeck. As such, a columned (if you will) arrangement will typically invite me to assign different functions to each column. Of course, that could be customizable for each user. Also, rustle's suggestion of framing the post is one I second, if just as an experiment.

2. The distance between the top and the bottom of the site is smaller. Which I appreciate. I like to scroll less.

3. The new sign-in page. The blue one reminds me of Earth and the red one, of Mars, which is cool.

That's about it. As an aside, I found a little deviation in the about page:

    Likewsie, if someone likes what you post and share, they can follow you and receive your hub posts in their feed.

Edit: I just noticed there's no "save" button in the feed page. I think it should be there.

by mk 369 days ago  ·  link
Thanks caio.

0. Thanks. The columns are a bit busy. I have adapted to it, but I currently feel like there's a better choice out there.

1. I'm not familiar with TweetDeck. I used Twitteriffic for some time, and now I just have the Twitter app. We've talked about the multi-functional columns some. However, I want to be careful that we don't build to the format; I want the format to build to the service. I'm not sure what functions would be best separated by the columns.

2. Yeah, I agree it's a plus.

3. I like it too. Funny, I was previously alerted to that typo, but forgot to correct it. I'll get it.

re: Edit: You might be right. We were trying to chip away every excess.

I've been thinking a lot about this update. I have some ideas that are starting to coalesce. IMO the pop-ups were the most successful change, because they align with use so well. We can do better with the feed.

by caio 369 days ago  ·  link
The pop-ups are indeed the stars of the show right now, which makes the assignment of functions to each columns more difficult. As I see it, those functions (the latest posts of a user and the latest ones from a tag) were already taken by the pop-ups.

TweetDeck has a little screenshot in their front page. http://www.tweetdeck.com/

by mk 368 days ago  ·  link
Ha! Look at that gear too! I ripped them right off!

Nice, you can add columns.

Thanks for the thoughts. I am getting some ideas. They'll probably lead to something just as jarring, but I hope more useful.

by caio 368 days ago  ·  link
Looking forward to them.
by steve 366 days ago  ·  link
yah... what happened to "save"? am I missing it somewhere?
by scarp 371 days ago  ·  link
What a refreshing refresh! I've been in and out lately, noticing the small changes here and there along the way but this one is so dramatic that I just have to comment!

My first impression is that it looks great -- very clean and modern -- but I'm no longer sure how to read my hub. My natural instinct is to read down the first column and then move to the next, but that requires me to scroll down and then back up which isn't optimal on my small screen. Reading from left to right feels weird, too, because the tiles aren't aligned. Either way, my eye moves around the page a lot and I'm not quite sure where the focus is.

I like the direction you're going; it just needs a few tweaks. If I were less tired I might offer some suggestions, but for now I should sleep.

Edit: As an aside, the "related posts" section of the page shows up under the comment box for me. Do you know how I can fix that? I'm on Chrome / OS X Lion.

by mk 371 days ago  ·  link
    -- but I'm no longer sure how to read my hub.

I agree that this is the biggest downside to columns. The way that posts were rising and falling was left to right. IMO that made it difficult to find a post again, even if it were just a few minutes before.

In an attempt to correct for this, I just changed it so posts rise and fall up and down the columns. The top left is the top, and the bottom right is the bottom. We'll see how this feels for a few days. This is definitely still a testing phase for this layout.

    Edit: As an aside, the "related posts" section of the page shows up under the comment box for me. Do you know how I can fix that? I'm on Chrome / OS X Lion.

Yeah, I know about this one. I just tried a fix for it, but I don't have the MacBook I use with me. It looks good on Windows Chrome. Any improvement? I'll have a Mac to test with in a few hours.

by scarp 370 days ago  ·  link
Simliar posts works fine for me now -- thanks.
by thenewgreen 338 days ago  ·  link
Hey scarp, not sure if you've been back since but you'll see that the "columns" are gone. While it looked nice, it didn't seem to provide functionality -pretty much what you described here. What do you think of the current layout?

Hope all is well and that you're kicking ass.

by thenewgreen 369 days ago  ·  link
Scarp, how are you doing? I'm guessing the "tired" is because you are working a ton? Good luck! I have gone back several times and listened to this post you made a while back. It's hilarious and informative. I've also shared it with a number of others. Thanks.
by scarp 369 days ago  ·  link
I'm doing well now, but the last few months have been a little stressful. I'm not really sure what happened, but the long and short of it is that I ended up taking a medical leave of absence from school so that I could focus on what I really want to do with my education and with my life as a whole.

But I think I've got things ironed out for now. I just needed some time to clear my head. On the upside, I celebrated my birthday a few days ago so that was fun. How have you been?

by thenewgreen 369 days ago  ·  link
    I think I've got things ironed out for now
-I'm glad to hear it. Sometimes it's hard to be self aware enough to know when to take a step back and re-access. My compliments to you for doing so.

I've been good, very busy with work/family. I'm looking forward to this Michigan Hubski Gathering. It will be nice to meet some Hubskiers and to see mk. -it's been a while.

I've been running a lot. Just finished my first 1/2 marathon a couple weeks ago. Running has really changed my life, I highly recommend to anyone thats interested.

Happy Birthday scarp! I'm glad to hear you are doing well, good to see you here.

by lessismore 373 days ago  ·  link
Wow!! You were not kidding when you said that it would be quite a departure from the old UI. My initial reaction is very similar to that of my first visit to Jiefangbei during Chinese New Year. It is BUSY. I find it difficult to digest. Previously, I could lazily scroll through the pages and go through the titles without much effort or concentration. Now, it requires a lot more attention on the individual titles. If I am looking at the leftmost titles, the center titles are fighting for my attention. If I am reading the center titles, leftmost titles are tugging my pants while the rightmost titles are yanking my arms. It is very disorienting.

Perhaps it is the newness of it and I have not adjusted to it. In time, I might even to grow to prefer it as mk did.

by mk 373 days ago  ·  link
It is an adjustment to be sure. And, my impression is that your reaction is a common one. sounds_sound had a similar response. I think that there are ways to minimize this effect, and I am going to experiment with them. Let me know if you have any suggestions.
by steve 373 days ago  ·  link
I'm.... still looking... and thinking.....

Does this layout actually provide me with more information at a glance? Is there a method to the columns? or could/should there be? Could the layout be customizable? (eg. first column is my feed, second column is trending, third is newest - or something like that?)

I'm not opposed to this... or offended by the new design. I might email you some mockups of a few tweaks that I think might look nice.

by steve 373 days ago  ·  link
and I'm intrigued - the width is fixed. What if some one with a widescreen monitor is viewing it?

(none of this is criticism - just questions which you and the others have undoubtedly asked - just curious)

by insomniasexx 373 days ago  ·  link
http://imgur.com/IgBke,LGuxr,Dwltj

It's not too bad on my work mac. There is some sweet little animation when you zoom in and out on the front page.

This is my favorite new feature. So purty!!! http://imgur.com/0SMtt

I'll check it out when I get home. If you remember when we did the last update the discover text was "like a satellite out there."

by mk 373 days ago  ·  link
    This is my favorite new feature. So purty!!!

Mine too. It's my goal that every aspect will be so pleasant.

by ecib 370 days ago  ·  link
Mine three. It turned out great!
by thenewgreen 373 days ago  ·  link
Ooohhh, good call on the zoom in/out. If you zoom out far enough it aligns to two columns. -Interesting.

Rocking out to Wasted Gucci Mane?

by insomniasexx 373 days ago  ·  link
That's what my boss wants his ringtone to be. :P
by thenewgreen 373 days ago  ·  link
further aside: are you and your boss in?
by insomniasexx 373 days ago  ·  link
I'm in. I started it yesterday when I was hungover. I don't think he is.
by mk 373 days ago  ·  link
Width as a % can become problematic. Here's an example of this: http://hubski.com/pub?id=27891

Basically, it can become a nightmare when elements rearrange based on a monitor's aspect ratio.

We could get away with it before because the main div handled changes in whitespace well. Now those changes simply occur on the borders instead.

by NotPhil 373 days ago  ·  link
    the width is fixed.

This is a problem for me too. Not because I have a widescreen monitor, but because I never run any app full screen. My Web browser is about 800 pixels wide, no matter what size screen I'm using. About half of the third column is off the edge of the page.

This isn't a problem that's unique to Hubski, but I liked the fact that Hubski used to word-wrap to my browser's size, instead of making me scroll left and right, or making me go fullscreen and read 50 words to a line.

by mk 373 days ago  ·  link
Interesting, I didn't suspect that it might come up too wide. A possible solution to this might look a bit odd; it might force the posts into two columns. Would you be ok with that?
by NotPhil 373 days ago  ·  link
    A possible solution to this might look a bit odd; it might force the posts into two columns. Would you be ok with that?

Yes, that would work.

I'm just curious, how does Hubski look on mobile phones with the new design?

by steve 373 days ago  ·  link
it actually works pretty well. When the posts are limited to that width, a quick double tap brings one column into view at a time... not a bad touch (even if unintended)
by mk 373 days ago  ·  link
I'll take credit for it, unintended as it might be.
by steve 373 days ago  ·  link
you deserve a TON of credit. You took some existing code. You learned to re-code. You created a community. Amazing stuff mk... truly amazing stuff.

(and I know you had help - so all you behind the scenes people that none of us know about who help, dream, and consult in little ways... I'm looking at you and saying cheers)

by thenewgreen 373 days ago  ·  link
Good call steve!! This will really come in Handy for me. I wonder if that should be a function on the computer too? Click a column and it populates like a pop-up down the center much like the previews do now. Thanks for the heads up steve, I'll use that often.
by thenewgreen 373 days ago  ·  link
here is what it looks like on my iPhone. I've not played around with it much.
by steve 373 days ago  ·  link
I like the new layout. My eyes wanted something to break up the block... so I mocked this up -http://imgur.com/a2srX - but looking at it now - it looks too much like the columns are related or sequential or something. And I think that's what spurred the question about if the columns had a meaning or not.

huh... still adjusting. change is good. I'm no UX expert or web designer (clearly from my mockup) but my brain wants to assign meaning or relation to posts in a column where currently there is none.

by thenewgreen 373 days ago  ·  link
I felt the same way about the columns when I saw them steve. I think we all recognize that they will be able to serve functions beyond just a "list". They could be used for curation as you suggested. Perhaps column 1 for links, 2 for video or 3 for text/image? Who knows, there are a number of ways they could be used. Eventually, Hubski could be more customizable. Great work mk, I'm having fun using it. I love the little hubwheel that spins when pages load. -ah the little things in life..
by mk 373 days ago  ·  link
Currently the columns don't represent anything, but we have considered something like you suggest, and that might be a direction we take. Having the content layed out this way provides options that we haven't fully explored yet (such as image thumbnails). We've opened up a dimension, but we aren't making the most of it yet, IMO.

Personally, I expect to be making some changes there. Definitely send along any ideas you have, it would be much appreciated.

I admit it is a bit jarring for the layout to change so drastically. But soon, going back and forth between the two, I came to prefer it.

One of the things I am most pleased with is the navigation through names, tags, etc. Make sure to those out.

by steve 373 days ago  ·  link
I will those out.

I will say that the magnifying click is a nice touch - very svelte.

by khaaan 372 days ago  ·  link
I was thinking something like this to define the blocks a bit more http://i.imgur.com/7pG85.jpg

also gives options for background colours if you want to highlight a specific article.

Also on a side note i was looking at hubski on my phone and it was one column which is great http://i.imgur.com/2wA8C.png

by mk 372 days ago  ·  link
I'm going to try something out along those lines. Stay tuned. Also I think you are right about sans serif.
by cgod 373 days ago  ·  link
I like everything but the columns. If there is no structure to the columns then it's just a bit busier then before without an added functionality, not terrible, but not useful.
by mk 373 days ago  ·  link
Point taken. There seems an agreement that the columns aren't sufficiently justified. As we try a few things, they might become moreso. If not, I'll have to rethink it.
by mk 373 days ago  ·  link
khaaan suggested that a sans serif font for titles might be easier to read.

http://hubski.com/pub?id=32322

Anyone else have thoughts on this?

by AnSionnachRua 372 days ago  ·  link
The brightness is a tad hard on the eyes compared to how it used to be.

I think it would look less confusing if the columns were organised into rows rather than being based on size.

by mk 372 days ago  ·  link
I did a bit to tone down the brightness, adding a border and a muted background. Any better?

    I think it would look less confusing if the columns were organised into rows rather than being based on size.

I'm not sure what you mean by 'based on size'.

by AnSionnachRua 372 days ago  ·  link
Sorry, it was phrased a bit poorly. By based on size I meant that submissions with less text in the title have "shorter" spaces in the list outside. Right now on my hub, the leftmost column has 9 links, and the middle column has 10. The links aren't arranged symmetrically, which looks weird to the eye.

The brightness looks better. Specifically, though, it'd be great if there was an option to have a darker theme, if that's not too much bother.

I really like the magnifying glass preview. Very handy.

Oh, by the way, I received the hubski stickers a while back - thanks! Unfortunately I've moved across the country for the summer, and don't want to put up the stickers here, so it'll have to wait until I go back. Sorry about that.

by mk 372 days ago  ·  link
Thanks for clarifying. This is definitely a work in progress. I think that the popup boxes for previews, tags and user info, are a definite improvement. However, the feed format is just ok. We will get there... I am determined.

No problem about the stickers. Do whatever you like with them!

by AnSionnachRua 372 days ago  ·  link
Oh wow I didn't realise you'd changed the popup boxes for user info and tags! It's fantastic.
by ecib 372 days ago  ·  link
Columns are hell on a mobile phone. Everything is microscopic. Just a first impression.
by mk 372 days ago  ·  link
Double tap a column, it works really well.
by ecib 372 days ago  ·  link
Yeah it tried that. Pretty much just zooms in, but when you are scrolling up and down to see the headlines, it swings left and right off center unless you are careful. Also more scrolling required for same amount of info. when blowing up the text to the same readable size, you get fewer headlines displayed, so it's just harder to browse your main page.

But I'm going to keep playing with it and also check it out on desktop. Even if I'm not sold on it, it's a really impressive departure from the inherited layout. You're kicking some ass I must say.

by thenewgreen 372 days ago  ·  link
Hey ecib, I use my mobile (iPhone) for about 40% of my time on the site. I've been playing around with it and actually find the new layout easier to see/navigate from feed to post, using the double click expander and just sliding from column to column. That said, the previews render right of center for me and are a bit awkward. I think the only real fix for this is for Hubski to have a real mobile application.
by ecib 371 days ago  ·  link
I'm still trying to dig it on mobile. A mobile version would be the best solution for sure, but mk is but one man. He also fights crime in his spare time, and you can only be spread so thin.
by thenewgreen 371 days ago  ·  link
No doubt! Nobody I know match his drive, creativity and work ethic. He is a super-human dude for sure. Maybe the mobile app should be outsourced and financed through a kickstarter campaign ;-)
by lessismore 373 days ago  ·  link
mk It seems that the badges page is still using the old layout. Is it because it also has comments?
by mk 373 days ago  ·  link
Yes, I haven't completely finished there. Since badges can be attached to both posts and comments, I am working on how comments will appear in the new layout. :)
by Mindwolf 373 days ago  ·  link
I have not been on since Friday so this is the first I've had a chance to see it. Here's my first impressions:

Overall, I like the redesign. I have not used it yet but I think I will like it.

Suggestion: Make a setting where links open in a new tab/window.

by mk 373 days ago  ·  link
    Suggestion: Make a setting where links open in a new tab/window.

If you click 'tabs' it will open both the comments and the link in new tabs. Do you mean that you would just like the link only to do so?

by Mindwolf 373 days ago  ·  link
The way 'tabs, works for me (I'm unfortunately using Opera since FF is blocked at work), if I click on tabs, it open into another tab where I have to click onit again to open the link. I would suggest opening the link itself in a new tab.
by mk 372 days ago  ·  link
Ok. Maybe I could create a optional behavior for tabs that you can change in the control panel.
by Mindwolf 372 days ago  ·  link
That would be awesome. Thanks!
by ou812dot 373 days ago  ·  link
What if each column could be used to tailor your own experience? You could have many columns all geared around the people and tags you follow, with only 3 being shown at a time. You could customize their names and you could scroll through them the way one scrolls through pages on an iPad. There are more possibilities now from a design standpoint.


about hubski  ·  faq  ·  rss  ·  tmi  ·  twitter  ·  buttons  ·  tools  ·  arc  ·  privacy & terms  ·  login