21

My name is Paweł, I'm Senior Product Designer from StackOverflow and I'm going to work on your site's design and I need your help.

HELP

Right now I'm in the "research stage" which basically means that I'm trying to understand what this community is about, what kind of questions you post, what kind of answers, etc.

I'll be honest - I've never been part of this Community so it's something new for me (even though I've tried to find software cracks in my past.. ha ha.. omg.. this joke sound better in my mind. nevermind). It would be super helpful for me if you could also define in few words what this site is all about.. Don't try to find perfect definition - I just need to know what you guys think.

Technically it's simple: software recommendations - pretty straightforward. But I'd like to avoid clichés and misunderstandings. On the other hand it's sometimes hard to come up with good symbol / logo for something that seems to be so simple and clear. That's why I'm asking for help.

But there's another thing - I've designed few sites for other communities in my past and it's always interesting to know users' ideas for design, logo, branding, etc. So if you have something in your mind feel free to share it.


tl;dr: I'm going to work on your site's design and I'd appreciate two things from you: help me understand what this community is about AND share your ideas for design.

5
  • Some people made a few simple graphics to advertise this site on other SE sites, you can see them here. Mar 20, 2016 at 13:59
  • 6
    @Zerobinary99 One of Paweł's latest design is on Computer Science and we are glad that he listened to the community there. The result is a beautiful design that the community likes. Thank you for listening, Paweł (except, don't bother listening to the troll). Mar 20, 2016 at 17:42
  • 3
    Two links to give you a rope to draw on would be: What is required for a question to contain "enough information"? and What makes an answer high quality. The two should cover the "what kind of questions you post, what kind of answers" part at least; and of course there's always the scope tag :)
    – Izzy Mod
    Mar 20, 2016 at 18:07
  • Hmm, this means I'm going to lose privileges in the near future :/
    – Tom
    Mar 20, 2016 at 19:04
  • (I have listed two issues as answers, but overall I find Stack Exchange's design to be superior to most websites, and all QA websites I am aware of) Mar 22, 2016 at 3:36

3 Answers 3

8

Please make sure that the contrast between the text and the background is decently high (e.g., at least respecting the Web Content Accessibility Guidelines (WCAG) 2.0). This can be checked easily using http://webaim.org/resources/contrastchecker/


Bad (as it currently is on computer science SE):

enter image description here


Good (as it currently is on software recommendation SE):

enter image description here

(This issue isn't restricted to Stack Exchange websites: Internet is Becoming Unreadable Because of a Trend Towards Lighter, Thinner Fonts)

2
  • 1
    i will make sure, no worries. but i was more thinking about tips and ideas regarding style, branding, logo etc. :) but thanks anyway!
    – Paweł
    Mar 20, 2016 at 19:32
  • Indeed, accessibility is higher in our list of requirements. Bonus for both accessibility+style :-)
    – Nicolas Raoul Mod
    Mar 22, 2016 at 3:16
4

SR is about choosing what app fits a person's scenario the best (requirements, budget, environment, etc).

So it is easy to come up with the metaphor of shopping. And shopping is the most hated thing on SE. But you have to admit that what we are doing here bears similarities with shopping: someone has a need and a budget, several possible solutions, usually resulting in the choice and adoption of one. I actually designed one of the earliest SR advertisements reading "Shopping? There is a site for that!" and it is my most-downvoted post ever :-)

Another metaphor is consulting. That's actually my day job: helping companies choose the architecture/technology solution that will fit their needs. And before that, help them find out what their actual needs are. Unfortunately, the idea of consulting is difficult express visually without looking boring.

We are all about finding the right tool, so any image of something fitting perfectly could potentially work:

Perfectly fitting table Perfectly fitting jack cover

That was actually the idea behind the advertisement that we ended up using:

OCD wrench

The wrench idea is convenient but it might feel too industrial/manly. SR is for everyone, not just for programmers. Software is used in all domains of society, so we want to attract software users in all domains: sales experts, finance experts, human resources experts, agriculture experts, etc. A photography expert who has experience with various software suites of the field will be more able to answer photography software questions than a programmer who has only amateur-level knowledge about photography. An ideal logo would suggest this diversity rather than confirm stereotypes. Thinking about it, that's a possible strength of the shopping metaphor.

Similarly, a design showing bits, and 1s and 0s, would probably feel too geeky to attract domain experts. An ideal design would concentrate more on "recommendations" than on "software", because half of the SE sites are about software, but this site is the first one to be about recommendations (as you know, 99% of the SE sites are vehemently against recommendation questions).

A metaphor of tailoring would be misleading: we prefer ready-to-wear.

I am not sure what to think about the metaphor of installation media installation media. My new laptop does not have a DVD slot, and I install all of my software via apps stores or PPAs/source. But if the gaming SE is OK with big pixels, some here might be OK with floppies.

Anti-idea: enter image description here Rows of software boxes in a shop alley might convey the idea, and it allies the idea of shopping to the idea of software. But it presents software in a way that many of us here despise: reduced to a commercial good. All of us are volunteers, and maybe as a correlation most of us love open source software, which is the anti-thesis of buying a box from a megacorporation.

Recommendation metaphors include thumb up and green check mark enter image description hereenter image description here. Not sure how a design can be made out of that, but a professional might be able to do it without making the site look like an ecommerce scam :-)

Metaphors for consulting could be the best source of inspiration:

enter image description here Here a consultant found a puzzle piece that fits perfectly to the asker's scenario. The puzzle idea might actually be my favorite so far.

enter image description here Here a single light bulb works correctly. More nuance would be welcome, for instance with various brightnesses/shapes.

enter image description here Here a single path leads to the exit. It is more about strategy, but sometimes that is what we are doing here, for instance migration route recommendations.

enter image description here Here a bunch of smart-looking people are talking with passion. The most typical representation of consulting.

2
  • (I had upvoted the shopping logo, I have no issue with that, seems like a proper description to me, at least that's how I shop.) Mar 22, 2016 at 3:38
  • (I I have just noticed I had left a similar comment there) Mar 22, 2016 at 3:39
-3

Please don't use too much white space.

Bad: only a handful of questions per page => user keeps scrolling => user gets tired of it => user stops answering

enter image description here

4
  • 1
    Too much white space makes the site feels empty and deserted, which is a bad thing for a new site I'd say... +1.
    – einpoklum
    Mar 22, 2016 at 10:08
  • On the other side, white space can make a website more user-friendly if used correctly.
    – Nicolas Raoul Mod
    Mar 22, 2016 at 14:24
  • 1
    @NicolasRaoul I guess ideally there could be a compact and a non-compact view. Anyway since I barely write any answer nowadays, I don't mind anymore :) Mar 23, 2016 at 3:22
  • We miss your answers :-)
    – Nicolas Raoul Mod
    Mar 25, 2016 at 13:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .