I've gotten some criticism that Appleseed's design and user experience was lacking, so I decided to work on a set of mockups for where I'd like to see Appleseed go for a 1.0 release. While we're still on version 0.7.9 (publicly), I usually feel that solid mockups can set good guidelines for building software for the future.
I would love to hear HN's thoughts on these, I'll be taking criticism to heart as I break these out into HTML over the next few weeks.
Thank you very much! There is definitely some Facebook influence, I tried to take the best from the best, so you'll see some Gmail in there, some Livejournal, and some Facebook, along with a little bit of others. No MySpace, though. :)
I did these myself, I'm not a designer instinctively, but I had a vision for how I saw things working, so I just started hacking away and refining things until I found something I liked.
And I did them in Photoshop, that's how I usually do web design, since it's what I'm most comfortable in.
I know its a matter of opinion, but I suggest doing these in HTML/CSS. I could tell these were done in Photoshop. I think HTMl/CSS will let you fine-tune these to make them very presentable.
Gut reaction is that you are clearly inspired by Facebook, but there's only so many ways to peel this particular orange. I'd consider a primary color change as a quick and painless way to distance the two; I think it's the blue that's keying me to Facebook the most. There's an argument about whether that's fair, that they psychologically own social blue in my mind, but better to differentiate (in my mind).
there's only so many ways to peel this particular orange.
It's true, there's certain paradigms that just work, and I played around quite a bit with more experimental approaches, and I just couldn't see the user flow working in a way that didn't throw users completely for a loop.
I'd consider a color change as a quick and painless way to distance the two.
With the beauty of Appleseed themes and CSS, I'll probably try and have three or four variations on this layout for the 1.0 release.
Fair enough. But from a positioning perspective, Diaspora's got a lot more visibility than Appleseed; so it's important for Michael to highlight the differentiation.
I'll concur with this. Originally, Appleseed was green, and people hated it. I tried various different color schemes, and while I don't think social software has to be blue, blue color schemes are definitely the easiest to make work.
What concerns me is the emphasis on open-source and decentralization on the front page. They are marketing the features like this is a software product, which is not how one should market a social network.
If they ever want this to appeal to anyone but alpha-geeks, they should emphasize how the unique features make the _experience_ on Appleseed better than it is on Facebook/other networks.
This is a common concern, and I understand where it comes from, but I actually disagree that we should be marketing directly to users
Instead, I think the most important thing is to become the de facto foundational software for anyone who wants to build a social networking site.
Do you want to set up a social network just for cat owners? How about one for orchestra students around the world? Or a fan club of the Anime series, Cowboy Bebop? Then we want you to run Appleseed. It being open source is a huge benefit for that. And the distributed features are gravy. Or icing. Depending on your tastes.
Users may not ever know what Appleseed is, and that's fine.
In other words, Appleseed isn't the next big thing, but we want the next big thing (or things) to be built using Appleseed.
You would choose which site best represents your identity. Say that's the Cowboy Bebop site, so your identity becomes wmf@cowboybebop.example.com
You can now login to lolcats.example.org using that identity. So it acts as a single sign-on.
There are other planned features, like profile linking and cloning so that you can have multiple identities tied to a single user, but that's how it works for now.
I don't think it's a good idea for a person's identity to be anchored in one particular community, because people join and leave communities over time. In a generic system like Facebook, I can cut all ties with high school if I want to.
I'll write something up for Appleseed's wiki when I get a chance, for the most part they're original concepts that are being worked out within Appleseed. But basically, they work similarly to what their names imply.
Linking, Cloning: I have two accounts, on a.com, and b.org. When the two are linked, actions taken on a.com are duplicated on b.org as my b.org identity. Friends on b.org are not made aware of the existence of my a.com identity. There are subtle differences between linking and cloning that are still being worked out.
Profile forwarding: Works just like email forwarding. I leave one site, and move to another, and at the original site, I leave a forwarding address.
I don't care as much as other people that Facebook === blue.
But, IMO it needs a bit more polish. To a designer's eye, this immediately screams "programmer-designed". You may want to hire a designer - hand them these mockups - and let them add a "designers' touch" [more padding, better typographic alignment, softer contrasts, etc].
That said - this is a big improvement over the previous design. Also, please don't feel like I am ragging on your work, just a bit of constructive criticism.
Not related to the mockup, but while you're looking at the thread - have you thought about making appleseed bittorrent-distributed instead of diaspora-distributed? In other words, no server at all, just a swarm of computers storing the social graph data, photos, comments etc. between them with some amount of replication?
I actually don't think that's practical, at this time. Diaspora originally started out with that goal, but quickly moved over to the same server-to-server approach that Appleseed had been using.
Just adding the required usability to allow single-users to administer a social networking instance adds a whole ton of complexity to the software. Way more than something like Bittorrent.
I think it's possible, at some point, but for now, I think a more conservative server-to-server approach is necessary.
I'm going to be a dissenting voice here and say that these need a lot of work, because I think that's a lot more useful than saying they look nice. Please don't take this too negatively, because I'm not trying to tear you down and say these are terrible or anything--I'm trying to help you make them better. Mostly the issues are in the details, but there are larger things too. I don't have a lot of time right now (or any time between now and Tuesday), but if you'd like more specifics, feel free to send me an email (it's in my profile) and I'll be happy to get back to you later this week.
There are definitely good reasons to look like Facebook (which I'm pretty sure is intentional). The most obvious reason is user familiarity: people know how Facebook works and they're going to be a lot less intimidated if they've seen something like it before. However, one not-necessarily-obvious downside to doing this is that people know Facebook and know how it works, and if things look like they do on Facebook but don't behave the same then they're going to be confused. That's not necessarily a reason to change the look entirely, but it definitely is something you need to be aware of if you're going this route with your design. Another potential issue is that people really don't like change. (For an example, see your Facebook news feed any time there's a design change.) If you look similar to Facebook but not as good, you may have issues getting over people's initial reactions.
There are a lot of little details I could pick out, but I think your biggest problem right now is with spacing and whitespace. The info page, for example (http://opensource.appleseedproject.org/preview/images/info.p...) has way too much whitespace around the actual information. Whitespace can be a good thing when your content is balanced with it, but right now the whitespace is dominating the page and it looks very empty, which is not at all the impression you want to give off.
The other thing I think you can improve on immediately is your use of gradients and drop shadows. Right now they're too obvious: a little goes a long way. The design is otherwise very flat and text-based (not a bad thing!), and so they stand out a ton and look out of place. The combination of the square tabs and the very large drop shadow is especially jarring. As a first step, I'd suggest getting rid of all (or almost all: the subtle blue to white from top to bottom is working pretty well) of them. Focus on getting the basics of spacing and hierarchy right first, because that's much more important.
As a final note, the Appleseed logo in the top left is going to cause some undesirable behavior if left like that. Either the logo is going to be hidden by the edge of the window or the picture when the browser gets narrower, or it's going to cause a horizontal scrollbar. Both are bad things.
Hopefully that was at least somewhat helpful and gave you some things to think about. And like I said above, I'd be happy to give more (and more specific feedback) later in the week once my thesis is finished.
I think web designs can fit into 1 of 3 categories:
- Designs that immediately make you cringe
- Designs that make you analyze for areas of improvement
- Designs that are so elegant you simply admire
I think these mockups fall into the "areas of improvement" category. They aren't bad by any means, but I immediately saw myself saying "that shade of blue contrasts with the rest of the color scheme" and "that is an inappropriate use of whitespace" and "the padding for that navigation looks unbalanced."
I think with some iterations and a "designers eye for the developer guy" these could jump to the elegant category. I think you're past the chasm; designs that make you cringe can't be iterated upon.
As a final note, the Appleseed logo in the top left is going to cause some undesirable behavior if left like that.
I also thought this was kind of strange. It looks alright in the mockups, but I can't think of a behavior for that logo that would deal well when you shrink the view horizontally. The design seems to suggest that the left margin will remain empty space, as trying to slide it to the left would cause the profile picture to overlap the logo entirely.
Neither leaving the blank space nor covering up the logo seems ideal to me.
I took a quick look through the mocks and my gut tells me it's a little too ambitious for a first version. Focus on one problem real people have that other social platforms don't solve well, and do it well. Cloning facebook's featureset does not a social network make.
It's not a first version, I've been developing this for a few years now, there's around 50 sites running the software, and our beta site has around 600 users.
It's probably still too ambitious, though, but that's why it's fun. :)
There are so many minor design improvements and "don't dos" that I'd love to share. If you are interested, I'd be up for skyping and rapidly spouting out all my feedback instead of typing it. Email is in my profile.
I hate the blue. I think the UI is facebook 2.0 completely, and while I think they are well done - I think they look like a cold corporate site profile and is one of the things that I have always hated about facebook - the UI is really not that good. Sure its functional - but you cant argue that its something revolutionary.
Luckily, Appleseed is very flexible, so it's not only possible to change the colors, but to radically rearrange the layout while maintaining the functionality.
I expect many sites running Appleseed will hire designers to "brand" their site in a way that appeals to their users.
but you cant argue that its something revolutionary.
I wouldn't, actually. I think social software works best when it's pragmatic and conservative. The revolution is under the hood with distributed social networking.
BTW - I dont mean to take away from Appleseed or what you're doing - but I just have a gut reaction against all things facebook. I have never had an account and never will and I have a very dystopian view of what that service really is.
I would love to hear HN's thoughts on these, I'll be taking criticism to heart as I break these out into HTML over the next few weeks.