Over the last year, we’ve spent a ton of time on little details that really make using the all new Basecamp a real pleasure. That’s not to say it’s perfect – we still have a lot of work to do to realize our full vision – but we’re very happy with what we’ll be launching with. And launch is literally right around the corner.
Here’s a video showcasing some of the little details and power user features we’ve baked in. We think you’re really going to enjoy exploring these little corners once you start using the all new Basecamp.
Peter Baker
on 28 Feb 12“Literally right around the corner” eh? Like it’s lurking in a Chicago alley, waiting to pounce?
Matt Radel
on 28 Feb 12We spend so much time thinking about how to build the product for the lowest common denominator that it’s easy to forget the power users. Great stuff.
AC
on 28 Feb 12@Jason
1. What typeface are you using for copy in Basecamp?
2. Are you not concerned that people will accidentally click the corner of a screen and not understand why the page scrolled on them. Seems like a Support nightmare.
choonkeat
on 28 Feb 12some lights at the calendar arrows to indicate “active” state on dragstart would be useful for discovery of the nice [albeit an expert-mode] ui
Denis
on 28 Feb 12Jason,
I agree with AC on point #2 that the margin click feature is TOO nuanced because without the limitations of a target, the possibility for accidental clicks especially by the lowest common denominator is going to have people jumping and wondering “what the hell just happened”
I’m also curious to see how this feels on a 27”+ Apple screen ala an iMac or 30” display. The size of the display often leaves designs feeling out of place or too small. We can’t design for every size screen BUT is the scroll down bottom-right margin target on BCX now a 6” square on the bottom of the screen?
Thanks for sharing – it’s always wonderfully insightful.
Federico Holgado
on 28 Feb 12It’s interesting that you spent some time talking about how each page remembers scroll position.
In a traditional web page where you navigate between pages using a full page refresh, the browser actually handles this for you. In these new Javascript/HTML5 apps, this doesn’t always happen.
I ran into the same issue with a single-page JS/HTML5 app I’m working on, and I thought it was comical that I had to build this functionality. My conclusion was that it’s something that’s absolutely necessary and would make the app unusable otherwise.
Bottom line, it’s not a feature :) Awesome job with the power user stuff, this thing is looking like a full-fledged desktop app!
JF
on 28 Feb 12AC/Denis: It’s a double click in empty space in the corners of the screen (the top nav doesn’t respond to the double clicks so it’s safe up there). We have over 900 people beta testing right now and we haven’t heard of any confusion.
We’re comfortable with the feature as it stands, but of course we’ll keep an eye on long-term feedback.
JF
on 28 Feb 12In a traditional web page where you navigate between pages using a full page refresh, the browser actually handles this for you. In these new Javascript/HTML5 apps, this doesn’t always happen.
Right. That’s why we paid extra attention to it.
dontforgetmario
on 28 Feb 12What I see is that the UI is really fast, I love everything except one thing that makes me think, the lack of a breadcum.
Once you click on something within a project you see where you are within in a form of a “layer” which is ok, but the lack of a menu on the overside within that layer makes that I have to click to “come back” and click again to go somewhere else in the menu, so I have to make double of clicks to go somewhere else when navigating on everything related to menus, which is a pitty, it would be nice to make this menus to appear when you run your mouse over the top so that you can see the menu and click to go somewhere else not just the possibility to come back.
Raymond Brigleb
on 28 Feb 12It’s comforting to see that 37signals is still pushing UI convention. I remember the Yellow Fade Technique like it was yesterday. How times have changed! sniff
Yuri Goytacaz
on 28 Feb 12@AC, it’s not just a single click in the corner, it’s a double click. I think if you double click in a corner and the page get scrolled up/down, you’ll know what you just did. It will be a “discover”. And maybe you will even talk to some people you know about this. (=
AC
on 28 Feb 12Everyone
Does anyone else find the user icon/images distracting? Especially on the dashboard page and given that they are circle. (My eye is immediately attracted to the user icons, which obviously is not the focus of the page … which makes me wonder why the user icons are even shown at all).
Gray scale would be a lot better.
LC
on 28 Feb 12@JF
Is this new version completely replacing the old version or will there be a transition period before it’s rolled out completely? I’m wondering if I should give my client’s a heads up as we’re using BC for some large web projects at the moment.
Looks awesome though!
JF
on 28 Feb 12LC: New version is completely separate from the current version. Both versions will live side by side. You choose what you want.
AC
on 28 Feb 12@Jason
Will Basecamp not have an entirely free version?
At the 3:00 minute mark in the video, the screenshot of the Sign Up page states only a “45 day free trial”.
(Having an entirely free version of your product is what made you guys so popular)
Steve Woods
on 28 Feb 12I get the whole “sheet” motif that’s going on but damn…. there’s a LOT of wasted space.
You could put the discussions and todo items side by side for instance to cut down on all of the scrolling (which is annoying!)
I usually get excited about 37signals stuff but I have to say, different doesn’t automatically mean better.
The fact that you have to put “active areas” to jump to the top/bottom of the page suggests there is an issue with the amount of scrolling that the app requires.
Jason
on 28 Feb 12How will the new Basecamp work with applications that use the Basecamp API? We have written an app which we use every day which works perfect with Basecamp. Will it also be able to pull back and post data to the new Basecamp using the same API? Will it just update both versions of Basecamp?
DHH
on 28 Feb 12Jason, all your existing Basecamp API applications will continue to work with Basecamp Classic. No change required.
Basecamp Next will have a new API, though, which will require new integration work if you want to use the same application against Next as well.
AC
on 28 Feb 12@Steve Woods
+1
You clarified the confusion that I was having looking at this UI/UX and now I can explain it.
@37signals
Just some candid feedback, the UI/UX “looks” great but fails because you are constantly showing summarized/dashboard information everyone – without making it obvious to the user that it’s a summarized view.
For example, you have both a Daily Progress screen and the main page of a project, which dashboard the same information. (Repetitive)
The “sheets” concept is what’s actually failing you. Since now you are trying to jam as much information on the frontpage of the project screen (to make this a quasi-one-page-app), the sheet concept forces you to be repetitive on UI … which means, even though you didn’t like it, Tabs actually solved this issue of not having to dashboard/summarize this information constantly.
Jason
on 28 Feb 12Is it much different? When is the API likely to be available? Slightly disappointing that everyone will have to re-write their apps to work with Basecamp Next…
Butters
on 28 Feb 12I agree that the scrolling and the need to design for that is distracting. Doesn’t help that every man and his dog using widescreen monitors.
I wonder if having some sort of fade effect on the area you’ve just been returned to would be useful for further focusing on where you just came from.
Butters
on 28 Feb 12[Just clarifying my badly written navigation suggestion]
I wonder if having some sort of fade effect on the area you’ve just been returned to would be useful – to remind you of your original starting point.
Ben Garvey
on 28 Feb 12Jason, I like the keyboard shortcuts. Any reason you picked G1, G2, Ge, etc.?
Eric
on 28 Feb 12I agree that the need for scroll-to-bottom functionality is a symptom of a bad design.
Eric
on 28 Feb 1237signals, how is forcing the user to use both hands to press “G” + “1” a shortcut. Seems incredibly inconvenient to be a shortcut.
Elliott
on 28 Feb 12@Eric – Both hands for G + 1?
Anonymous Coward
on 28 Feb 12The G+# keyboard shortcut has precedence on Google and Twitter.
JF
on 28 Feb 12I agree that the need for scroll-to-bottom functionality is a symptom of a bad design.
Why’s that? What’s wrong with scrolling? Is scrolling down to this comment on this blog bad design too? Is having to scroll down through a multi-page text document bad design too? Would you prefer having to click through page 1, 2, 3, 4, 5 on a new site or a single page to read a whole article?
I happen to believe scrolling is one of the best interface conventions ever designed.
Scrolling is simple, everyone knows how to do it, there’s nothing to learn, it works on every computer and every mobile device. In fact, modern mobile devices lean heavily on scrolling.
Anand
on 28 Feb 12Overdone.
Tim Grahl
on 28 Feb 12Hi I’m curious about the whole new section just for text files. Why is that it’s own separate thing? Have you seen a ton of need for this?
JF
on 28 Feb 12Tim: Writeboards are one of the most popular features in Basecamp. Writeboards are basically just text documents. Everyone just needs a place to write/keep some text. We expect them to be very popular in the new Basecamp as well. We’re getting a ton of use out of them so far.
Jason
on 28 Feb 12Looks like my comment has been missed:
Carrying on with the Basecamp Api:
“Is it much different? When is the API likely to be available? Slightly disappointing that everyone will have to re-write their apps to work with Basecamp Next…”
Eric
on 28 Feb 12Elliot, to press the “1” – you have to awkwardly use your left pinky coming way off the home keys.
Eric
on 28 Feb 12JF, you’re missing the point. This design forces the user to double-scroll. First to scroll to get to the “More…” link, then scroll once the longer list is displayed.
Eric
on 28 Feb 12What’s unfornuate is that, obviously – I won’t be using the new Basecamp and instead keep using the Classic version.
Now my concern is that I’ll be on a technology platform 37signals will no longer be focusing on.
Makes me wonder if I should completely abandon ship now, since 37signals is almost forcing me too.
Butters
on 28 Feb 12I have actually always found scrolling to be potentially an annoyance on various kinds of devices and apps/sites. It does hinge on how well it’s designed for.
Often I’ve paged down or up quickly and suddenly forgotten where I was and the interface isn’t helping me. As I said before losing 4:3 monitors didn’t help matters. Hence my fade-effect suggestion so when you switch pages in the stack you’re not mentally reloading the whole page.
On mobile devices we just accept we’re scrolling over a much larger surface – I still prefer viewing the web on a much larger display.
Alejandro Moreno
on 28 Feb 12@Eric, scrolling is a natural action on the web, and it should be embraced as such. If you don’t like scrolling, and/or don’t like designing for it, you should probably stick to desktop apps. (Or Flash, but most Flash apps already look like desktop apps, so it’s kind of the same.)
On another matter, I’m also curious about the G+x shortcuts. G+1 is easily hit with index+pinky fingers (if your hands are big enough, or your keyboard small enough), but things get increasingly complicated as you get closer to G+5. And as a 10-finger typist, my instinct is that both of those keys should be hit with the index finger, which is obviously not possible (if you have to hold both keys down).
So then I thought the G was supposed to be hit with the thumb. And that’s actually pretty good (G+1 is thumb+pinky, G+5 is thumb+index). But why G? It’s hard to find with the thumb. F might be better, because most keyboards have that little nub on the F and J keys.
And G+F for find? That’s not friendly at all to 10-finger typists. Are you hitting G with your right hand?
Why not just change G to any key on the right side of the keyboard? Take your pick. Then that could be hit with any finger on your right hand, and 1-5,F could be hit with any finger on the left.
Heh, I feel like your mention of keyboard shortcuts left me with more questions than answers.
DHH
on 28 Feb 12The G-shortcuts do not require you to hold down the G. You can press G, then press 1. So it works even if you only have one finger to operate your keyboard with!
Eric
on 28 Feb 12DHH, regardless – just seems like feature bloat.
Alejandro Moreno
on 28 Feb 12The G-shortcuts do not require you to hold down the G. You can press G, then press 1. So it works even if you only have one finger to operate your keyboard with!
That makes sense! Thanks for the clarification.
Emerson Taymor
on 28 Feb 12We noticed in the beta that “time tracking” appears to have been nixed. We use this to collect data so we can do a better job on future projects.
Is this something that was consciously dropped or are there plans to add this back in? Or does the beta just not include this functionality?
Tony
on 28 Feb 12Jason,
Really nice demo with some interesting design choices. I’ve always felt that developers have inexplicably decided that pagination is better than scrolling, when scrolling is far more human natural (humans used to write on scrolls, after all, and I think a modern book is more like an indexed scroll as opposed to a paginated list).
I also like how the UX patterns retain context without losing negative space.
It feels to me that a lot of your interface decisions are looking forward to a more tablet/mobile dominated human interface world, as opposed to the desktop driven world of the past decade.
Are you consciously thinking about the new Basecamp from a touch rather than mouse perspective? Or is that serendipitous.
Also – having a single scroll page invites reordering the elements on that page so that I save even the scrolling down effort for what I normally look at. Any thoughts of allowing for custom ordering of project page elements?
Thanks for the demo – looking forward to the new Basecamp!
Benedikt Breinbauer
on 28 Feb 12Hey,
nice to see some new navigational concepts!
Two thoughts: 1. Funny that the scrolling with Shift+click would take longer than the instant loading of the sheet.
2. Shortcuts: Why use G as a modifier key and not use the accesskey attribute or are you using them additionally?
Cheers!
DHH
on 28 Feb 12Emerson, Basecamp Next won’t ship with time tracking on day 1. We may well implement it in the future, though. But if you need time tracking, and don’t want to make do with an external system in addition to Basecamp Next, you’ll probably have to stick with Basecamp Classic for now.
Butters
on 28 Feb 12BTW when I was using Basecamp to get to the bottom or the top I would use Ctrl+End or Ctrl+Home (using Firefox)
I presume that would still work here?
Butters
on 28 Feb 12Again, silly me, I forgot the video addressed home/end keys. :)
AC
on 28 Feb 12Looks like 37signals stole this shortcut feature from Asana.
See the following Asana video that does keyboard shortcuts correctly, using Tab+X
Josh Henry
on 28 Feb 12Looks great. Look forward to taking a live look at it.
Question about how you utilize the calendar. Looked like there were quite a few employee specific entries about being out of the office, etc. Do you use Basecamp as your internal shared calendar? We currently each have a shared Google calendar. Is there a way to integrate?
Sandro
on 28 Feb 12Nice work! I really like the attention to details for the power-user features. That’s one of the most lacking areas with UX for web apps.
I almost wish there was some uniformity to keyboard shortcuts for web apps in general though. You have tons of different shortcuts; Desktop apps, Gmail, multiple others.. just too much to remember. Oh well. The features are still very welcome.
Sandro
Simte
on 28 Feb 12Any additional shortcut? I.e. Adding a new task in todo? Edit a todo?
I must say that Basecamp classic has fields editing / inserting well designed to be done by keyboard, but I miss some good shortcuts for recurring task.
JF
on 28 Feb 12Do you use Basecamp as your internal shared calendar?
We do. Basecamp is our company calendar as well as our project calendar. We keep everything together in one place.
Emerson Taymor
on 28 Feb 12@DHH: Thanks! We’ll probably use an external system.
Update looks great! Congrats
Mr Peter Connor
on 28 Feb 12Hi JF,
First time commenter, long time listener :) Hope I haven’t missed the boat on the Q&A. It’s a Q actually on the video, I’ve been following the updates and I love the new product. I’m wondering how did you get the video quality so good. I’m using camtasia but the expanded view in vimeo isn’t great see www.vimeo.com/bullethq :(
PS did you see the vimeo new homepage – nice.
Thanks in advance
Benedikt Breinbauer
on 28 Feb 12Peter: JF mentioned this in a tweet: ScreenFlow https://twitter.com/#!/jasonfried/status/174539824550772736 hth
Steve Woods
on 29 Feb 12@JF I get the whole argument about scrolling being useful, but there is a difference between scrolling while reading, and scrolling to reach something to perform an action. I prefer my actions to be in a consistent place every time I go to the app, and not rendered differently depending on how much content there is.
For instance, if I want to reach something in “Text Files” I have to scroll through all of the discussions, then the whatever-else-was-on-the-page, UNLESS I click on Text Files first in which case I might as well have just had a tab to give me navigation context. In your case, if you have 500 discussions, that’s a lot of scrolling!
I dunno mate, it just seems a little bit muddled on first impressions. Maybe it becomes second nature when you’ve used the app for a while… maybe not.
To me it just makes everything seem a bit disjointed, like the workflow is interrupted because you’re not subconsciously prompted by the navigation to proceed to the next section in the hierarchy – everything is top-level at the moment.
Peter Connor
on 29 Feb 12Tks Benedikt Breinbauer your the new BBKing.
JF
on 29 Feb 12Steve: There’s more to it than meets the eye. You have to think about the whole picture, the whole project lifecycle.
Projects come in all shapes and sizes. You’re looking at a very long project. In that case, scrolling down may not be desirable. So you can click the Text Documents link in the toolbar and instantly pop the text documents sheet.
But if you’re just starting a project, or you have a small project (every project starts small), then it’s killer to see everything on one page or maybe an extra half page scroll. It’s significantly better than having to click through sections. If I have two files, a discussion, a to-do list with a few things, and a text document, I’ll take that on one page every day. This is what most projects look like most of the time.
Before you judge based on a video, try it, use it, make a handful of different kind of projects. You’ll see that it makes a lot of sense.
Paul
on 29 Feb 12I think all links should be underlined.
Jeffrey D
on 29 Feb 12These features are great; I love the scroll corners. G is a little awkward for keyboard shortcuts — it’s a left-hand key I’ll be hitting with my right — but I’m sure I’ll get used to it. Cheers.
Arik Jones
on 29 Feb 12Will you guys be maintaining the same pricing?
Brian Armstrong
on 29 Feb 12Great work!
Did you guys think about using the escape key to remove a sheet? This would preserve your mouse position on the underlying sheet and make that “remembered scroll position” so much more powerful I think.
As it stands, you have to keep moving your mouse up to the top to tear off a sheet.
In general really impressive UI work though as always. Love it!
Milan R
on 29 Feb 12I hope that 6th March launch day spotted on calendar is real :-)
This video finally made me realize what everything is behind new BCX interface and that a complete rewrite was a good idea together with support for new browsers only. It is nice to see that Apple loving company is not taking it with cold heart that Chrome is ahead of Safari (in something) and providing people with a useful feature even though Safari cannot support it yet.
And it conviced me that holding my students to sign up and fire their project in BCX was not a bad idea, I am sure they will love it.
Jamesy
on 29 Feb 12Love the new UI, splitting the page into thirds to create ‘page-down’ and ‘back-to-top’ links is so simple yet brilliant. I also love the stacking of pages, creating a tree like breadcrumb right in front of you, yet done so subtly.
Are there any other conventions you considered from real-world experiences?
Noise Figure
on 29 Feb 12That comment is either misplaced from another page or some sort of post-ironic remark. In which case, I like it!
Ben sima
on 29 Feb 12Love it.
iCal support for the BCX calendar would be a-maze-ing. (So it can integrate with my gcal).
Sunil
on 29 Feb 12I’m pretty giddy about Basecamp Next. That said, I’m wondering if we can use it on our team.
I’m a product manager for a small team. We use our own loose brand of agile/scrum. We rely on very high-level, loose estimates so we can plan how much work someone should attempt to do in the next 2 weeks. We do this in Sprint.ly, our current tool, by using their S, M, L and XL “sizes”. Is there some way I could do time estimation in BCX? Either an explicit option, tagging, or something else?
ToddB
on 29 Feb 12In respect to the replacement of Writeboards with Text files, will the Text files have means of easy bulleting/formatting? I preferred writeboards over document type file edits/revisions.
Additionally, one of the things I was going to request (when I noticed that 37signals was working on new BaseCamp) was ability to have a parent level set of writeboards (or even files) that could be referenced to any project.
For example, we may have a reference for a conversion utility we provide for migrating data from one of our software solutions to another. It gets updated from time-to-time and numbered for reference. At the present, I have to go back and update all of the writeboards across projects.
If I could maintain a common reference at a parent level, I would then find it easier to keep multiple open projects (in same stage of implementation) up-to-speed with new developments/findings in respect to tool.
As things progress for a client, I can then draw attention to a particular item in the writeboard, and use another writeboard or message to track discussion and annotate findings/decisions.
ToddB
on 29 Feb 12In one of the blogs/threads I thought I saw reference to People pages. Will People pages offer their own Calendar view (which aggregates their assignments in a project or multiple projects)? I previewed the new Calendar but only saw user defined Calendars not a Personal Calendar view.
If so, would there also be means of allowing to drill down to view by assigned person/user?
Nathan Youngman
on 29 Feb 12Does the potential exist to do little widget/extensions? Such as if a client’s comment would be better addressed by support, being able to snip it and send it off to Zendesk/FogBugz/Tender?
Nathan.
Anonymous Coward
on 29 Feb 12Why did you do the product videos in Vimeo vs. YouTube?
Ron Stauffer
on 01 Mar 12Nice! I’m glad there are keyboard shortcuts—those are the biggest time-savers in my workflow. Everything looks nice and intuitive, but it’s gonna take a while to get used to the “new” layout and learn all the new tricks, because I’m so used to the old way. I can’t figure out why you chose the “G” key, but I’m glad you don’t have to hold it down. Nice touch. Really looking forward to giving it a try.
wadmiraal
on 01 Mar 12These sneak peeks at the new Basecamp UI are just inspiring. You guys rock! I hope you guys will do some more videos for all the impatient guys like me ;-)
Katie @ Women Magazine
on 01 Mar 12As always this basecamp design too is pretty cool.
Josh
on 01 Mar 12Sorry if this has already been covered, but is IE8 supported? I assume IE7 has been dropped.
JZ
on 01 Mar 12@Josh – the new Basecamp supports Chrome, Safari, Firefox 4+, and IE9+
@ToddB – Text Documents are WYSIWYG, just like Messages and Comments. No more weird mark-up based formatting and yes, bullets are supported by the editor. Right now they’re part of projects only, but global docs is an interesting idea. We’ll think more about it.
Phil Kabza
on 02 Mar 12Will the new Basecamp incorporate a folder tree interface, so that each project’s files can be organized. We develop projects with 100 to 500 separate files – without a folder structure, we can’t use Basecamp, unless there’s something I’m missing.
JF
on 02 Mar 12Phil, no folder tree. You can attach files to messages to keep them organized around a topic if you’d like.
Werner Siemens
on 02 Mar 12Hi Folks - looks slick - one Q: what kind of support does Next have for project templates?
JF
on 02 Mar 12Werner: No templates at launch. We’ll be exploring adding templates down the road. Likely this year, but can’t say for sure.
Patrick Monaghan
on 05 Mar 12Hey guys,
Sorry to drift a little off topic, Im looking at picking up a book on some good UX design and general user experience principles.
I’m a developer and I’ve decided to get more invovled in the user exp side of things..
I read the blog all the time.
P
This discussion is closed.