Mockup previews of Appleseed 1.0, feedback appreciated.

http://opensource.appleseedproject.org/preview/

by michaelchisari • 15 years ago

41 38 15 years ago

opensource.appleseedproject.org

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.

e1ven• 15 years ago

Way to go! Those mockups look amazing- They're clearly Facebook inspired, but it brings it's own flavor to the party.

Did you make these in Photoshop, or HTML? Did you do these yourself, or have these made up?

Either way, FANTASTIC work.

michaelchisari14• 15 years ago

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.

jdp233• 15 years ago

Great approach, and kudos to you for going this route! It's a very clean look, and a great base to build on.

jedsmith• 15 years ago

The mockups look great.

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).

michaelchisari14• 15 years ago

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.

jdp233• 15 years ago

agreed, definitely try to lead with one that has less facebook-y and diaspora-y colors

oniTony• 15 years ago

Most social networks are in various shades of blue. http://www.quora.com/Why-are-most-social-networking-sites-bl...

michaelchisari14• 15 years ago

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.

sthatipamala• 15 years ago

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.

michaelchisari14• 15 years ago

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.

wmf4• 15 years ago

If I'm a cat owner and a Cowboy Bebop fan, would I have two profiles? Would I choose one site to "own" my profile?

In this Ning-like scenario, what's the value of the distributed protocol you spent so much time on?

phlux2• 15 years ago

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.

michaelchisari14• 15 years ago

I hate the blue.

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.

phlux2• 15 years ago

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.

See my post here on the subject: http://news.ycombinator.com/item?id=2429993

I believe in social networks, their value and need - but the current execution in the area is clearly leading us down a dark digital path.

I recall when appleseed was first announced, Ill need to look at it again...

blhack2• 15 years ago

Looks really really really really nice. Did you design it, or did you hire somebody?

A+ Job.

michaelchisari14• 15 years ago

Thank you! I designed it myself.

All those years throwing together flyers for my friends punk rock bands paid off, maybe. :)

sudonim• 15 years ago

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.

michaelchisari14• 15 years ago

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. :)

wmf4• 15 years ago

I love the polish. It is way too wide, though, and the left third of the window is wasted in most cases.

neutronicus2• 15 years ago

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?

michaelchisari14• 15 years ago

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.

neutronicus2• 15 years ago

Any specific roadblocks you'd like to comment on? Pieces of infrastructure that are still too weak or anything like that?

samdk• 15 years ago

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.

arrogant• 15 years ago

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.

bdclimber143• 15 years ago

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.

SpiralLab• 15 years ago

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.

bdclimber143• 15 years ago

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.

Mockup previews of Appleseed 1.0, feedback appreciated.

Related Stories