Which project box design do you prefer? [closed]

Question

Hi WikiTreers,

As many of you have noticed, we are playing with the design of project boxes.

Last week we finalized the rules for them, i.e. decided what belongs in a project box, where they go on a profile, which profiles they belong on, etc. These rules are explained here: https://www.wikitree.com/wiki/Project_Boxes

Now we have moved on to their design. Since what they contain and how they are used has been standardized, and because they all use the same project box container, it is easy to adjust their formatting.

We've created three designs for the community's consideration.

I'm posting an answer for each one of them. Please vote up your preference and comment if you have thoughts.

(If you're experienced with templates and CSS you could also experiment with your own design. If you're not a Leader you'll need to post here to implement it.)

Some notes:

1. We can mix-and-match a little with things like the border color, width, font size, etc. If you prefer one element of one design and another element of another design, write that in a comment.
2. Keep in mind that the same design will appear differently for different users depending on their web browser, computer, and whether they're logged-in. You might want to adjust your browser window size and see how it looks at different widths or in a single column like on mobile devices.
3. Part of the rationale for the orange box and right-alignment is to visually connect the project box with the Project-Protected Profile box in the right column. The PPP label makes clear that you need to coordinate and discuss changes. The project box explains how.
4. Some might ask if the project box design could be customized or selected by the viewing user, the profile manager, or the project. This isn't possible now and it's unlikely we'll do this anytime soon. Uniformity is one of our overarching principles for simpler collaboration.
5. The way the project boxes interact with other templates shouldn't be given too much consideration, e.g. how project boxes look next to an "Unsourced" template. We need to deal with template styles one at a time. The project boxes are just the first ones we're working on.

Thanks!

Chris

Comments

"Uniformity is one of our overarching principles for simpler collaboration."

Too much uniformity runs the risk of being boring though Chris.

Imagine reading a book with no line, paragraph or chapter breaks, no indentations or photos. No matter how interesting the topic, if it is not presented with at least some of those items it becomes pretty bland and difficult to read. The more interesting, visually and contextually, the profiles are the more likely they will be read, and the more likely they are to inspire non-WikiTreers to join. It is a truth that the young millennial generation (as a whole) are not as likely to read lengthy text only biographies. Visually diverse templates may help draw some in.

---

John, I could not agree more! 

---

I dislike the right-aligned versions - I prefer center alignment. As other profile managers have said, it affects the bio layout.

As far as wording, I believe "less is more!"

I would prefer that we be able to set the boxes side by side, at least 2 wide (3 would be better, in my opinion!). Also, borders would probably work better in this scenario.

For reference, what is the width of the biography area?

---

It looks to me (from occasional observations of the vote count, as well as my discovery of a sudden increase in the number of "Down" votes I've received in G2G) that answers to this question have been getting a number of "Down" votes in addition to the "Up" votes that I believe Chris was looking for when he posted the question.

---

hmmmm . . .

That would skew the voting terribly. Is there a method to remove down votes and/or prevent them?

---

John, sysops can see who up-voted and down-voted, so double votes can be accounted for. But, to be clear, the voting wasn't to decide the final design. The final design may evolve anyway. We are implementing changes now.

Answer 1

Option A

Right-aligned, 220 pixels wide, light orange border (ffee99), new lines for "Join" and "Discuss".

This is on most project boxes -- all except those mentioned in Options B and C.

Examples:
https://www.wikitree.com/wiki/Washington-2
https://www.wikitree.com/wiki/Rees-Williams-5

More examples:
https://www.wikitree.com/wiki/Special:Whatlinkshere/Template:British_Isles_1500-Present
https://www.wikitree.com/wiki/Special:Whatlinkshere/Template:Convicts

Comments

We don't all like this option so please be cautious with words.

Visually, right aligned  plus all the text in the right column looks way too busy.

I like the shortened text. I prefer centered.  I'm ambivalent about box outlines.

---

I like its appearance, but I also prefer a centered box without text-wrapping.

---

Ugh! I looked at Options A and C on my phone.

For background, on my Samsung smart phone (using Chrome), when I view a WikiTree profile I see one column width (and I scroll through the entire first column before I get to content at the top of the second column). Project boxes and other templates normally fill the whole width of the screen.

On my phone, the option A project box does not take the full width of the screen. The space to the left is empty, which looks like dumb use of the limited screen space, particularly when the narrow width of the box has forced odd breaks in the text, as in the example of https://www.wikitree.com/wiki/Ostrander-176 , where the first three lines of the template text appear to the right of the flag:

Pieter Ostrander was

a New Netherland

Descendant 1674-

and 1776 appears by itself over on the left underneath the flag.

The Rees-Williams-5 example looks even dumber on my screen. The hyperlinked words

Anzacs

on

Wikitree

appear to the left of the project box, looking exceptionally amateurish and making me wonder how they got there. (After viewing the page on a real computer, I figured it out.)

Option B fills the whole screen width on my phone, which looks much better.

In Option C, the template spills off the right-hand side of the phone screen, so I have to scroll laterally to read a full line of text. That looks amateurish!

---

I imagine that Smartphones are not really adequate to view many such content on, let alone WikiTree profiles.

---

Philip, the reality is that many people view a lot of Internet content from their phones, and websites need to able to accommodate the needs of mobile devices.

Smartphones are adequate (albeit not ideal) for viewing WikiTree content. I often look at WikiTree profiles on my phone, particularly when I've received an email about a profile. I've even made minor edits from my phone, and I've often posted to G2G from my phone. WikiTree is not optimized for mobile devices (optimal design would, for example, allow users to jump to the page sections they want to look at -- for example, so I wouldn't need to scroll through everything in column 1 in order to see if the profile is project-protected or set as public), but currently WikiTree profiles seldom force content to flow off the right-hand side of the screen. (In G2G, on the other hand, wide images and long URLs get cut off at the right margin.)

---

Thanks Ellen, great idea and Magnus mentioned it in a different G2G as well. 

Is there someone who can test how it looks using iPhone ? and other devices ? I think it is important to make sure it works and looks good on all or at least as many devices and browsers as possible. Indeed I have five kids and they all are only using their smartphones ..or maybe a tablet or chromebook ..but no computers or laptops ..

Tried to watch how it looked in google chrome-developer mode - device... but maybe if we could add some screenshots of how it looks it's more easy to choose ?

This helps screenfly  (allow scroll) you can all test and see how it looks on all kinds of different devices and browsers ...;) 

---

@ Jillaine, I know of course not everyone is liking the same project box or just this one, what I meant though was that most members probably would like if they could choose if it was aligned or centered .. ;)

---

When i look on my Galaxy holding it normally (vertically), everything looks fine because it's only allowing one narrow column. When I turn the phone sideways for horizontal viewing, I get the same ugly results Ellen described, as the display tries to show more in that one column but doesn't have enough room for full 2-column display.

---

just to clarify my suggestion for centered when no contents/right-aligned when contents are present... I was suggesting this be an automated feature if technically possible, not something that the user could choose (well, without chosing "noTOC" or whatever the coding is for not displaying contents). I think allowing the choice of alignment defeats one of the reasons for changing the project boxes in the first place - uniformity. By having project boxes automatically either right-aligned with Contents or centered without, uniformity is maintained.

This, being a compromise, would still not make everyone happy but would resolve the wrapping of bio text around the project box which is making some people very unhappy (I like it, personally, so I would miss having the project box right-aligned on profiles I manage that don't have Contents).

Cheers, Liz

P.S. I've been going through profiles on my watchlist with project boxes. If the project box is not immediately followed by == Biography == things get ugly.

---

Thanks Liz, ok no choice... and yes it's of course logic not everyone will be happy....so we can try to make sure we all will be as happy as possible :) Testing them all now with Screenfly and it's interesting to see how they all look on different devices :

1. Option A on Apple iPhone 6/7 Plus

2. Option B on Apple iPhone 6/7 Plus

3. Option C on Apple iPhone 6/7 Plus

1a. Option A on Samsung Galaxy Tab

2a. Otion B on Samsung Galaxy Tab

3a. Option C on Samsung Galaxy Tab

And you can just click on the different devices and choose a brand which will show how it looks on that one... don't know if it's an accurate thing ...but some really look ugly indeed , but the above ones all look ok and of course also show how A is intruding the Bio on a device other than a phone. So this really could help decide when you need  to buy a new device as well eeh ;) 

 

Answer 2

Option B [Template:Project_Box-300]

Right-aligned, 300 pixels wide, no border, smaller text, new lines for "Join" and "Discuss".

Used on:
https://www.wikitree.com/wiki/Template:Huguenot
https://www.wikitree.com/wiki/Template:New_Netherland_Settler
https://www.wikitree.com/wiki/Template:New_Netherland_Huguenot

Examples:
https://www.wikitree.com/wiki/Le_Maistre-5
https://www.wikitree.com/wiki/Soblet-5

More examples:
https://www.wikitree.com/wiki/Special:Whatlinkshere/Template:Huguenot

Comments

Can I vote for a hybrid? My preference is Option B, but with the light orange border. I think a border is important for clear separation between the boxes and the profile text.

I do like the right alignment and the slightly smaller font in this box, and I think the width is just fine.

---

Don't care much for the no-border versions. The size and general content seems fine.

---

I agree with Ellen.

Option B, with the larger box and smaller print is required for those projects where there is a lot of information in the box.  e.g. https://www.wikitree.com/wiki/Le_Maistre-5

For those that have little information, option A or B is fine.

Melissa

---

I agree with the hybrid suggestion; these examples would be perfect with the border.

---

Agree with the commenters above - this option + a border! :)

Answer 3

Option C [Template:Project_Box-400]

Centered, 400 pixels wide, no border, tag uses "Tag" class.

Used on:
https://www.wikitree.com/wiki/Template:Pirates
https://www.wikitree.com/wiki/Template:Bahamas

Examples:
https://www.wikitree.com/wiki/Darville-58
https://www.wikitree.com/wiki/Russell-836

More examples:
https://www.wikitree.com/wiki/Special:Whatlinkshere/Template:Bahamas

Comments

I would like this one -- except with the border from A, text from B, centered from C.

---

If we go with this one (I prefer A), I would ask that we adjust the tag class to use a higher contrast between the two greens. To increase consistency, we could use capitalized white text as on the tags on our profiles.

---

Definitely centered, but with a border.

---

I'll vote with Darlene on this one. I think mixing them up is the best of all worlds.

---

Well I don't know, I think many of us (DRP) very much liked the one with the border (don't know if that was A?) from the previous G2G, but the only thing is we would like to see it centered...is that an option or is it impossible ?

The down side from that one, many members mentioned and didn't like, was that it was intruding the Bio, so if there is a way this could be prevented ?

---

Bea, if you're imagining a narrow box like A centered with other project boxes, if any, appearing to the right of it instead of below it, I don't think that's possible. They would stack vertically.

---

Ok and thanks Chris. But what I mean is, I don't think people are really minding it is on the right side now, the projects we are collaborating with in general also prefer just one, tops two project boxes at one profile, so that's no problem on the right either.

The thing people don't like about it is if there are not a lot of contents, the projectbox(es) is (are) intruding (ruining) some Bio's. So if this could be fixed somehow ...not a template expert so I don't know if there's a way to keep it in the top right corner maybe and above the Bio ?

---

I like Darlene's solution = "C" with benefits...

and no matter which one is chosen, we need a BORDER around the pic/text to separate it from what is above and below.

I dislike "A" the most, especially where there are multiple boxes and so it goes down into the Biography etc. section.

I agree with Bea also.  I think "B" is the least good, especially without the border.

---

I think C is best. of the 3 choices.(I was perfectly satisfied with the templates as they were.  Now  the templates have jumped down into the biography, which means I have to edit every profile

---

If you go with "A", please find a way to center it, or at least keep it from intruding on the bio.

I personally like "C." I think it is fine just the way it is shown.

---

I like this wider and centered option C best, rather than the narrow right-shifted A and B. But I would like it with the orange border, so that the image and text of the "box" are not hanging so loose within the white space, with no clearly evident boundaries.

---

Absolutely - and this way it does not get "involved" with the Biography text.

---

This one, but with a border.  I think the border becomes more necessary when there are more than one template shown like in the first example. I'm not sure I like the color used for the border and would probably chose a light gray just to delineate the different templates and not distract from the actual "message"

---

Like some of the others, I prefer this one with a border as it doesn't interfere with the biography section.

---

Like many others, I prefer this one but with a border.

---

My preference. Ambivalent about border

---

As we said in the Navy, when in doubt, go with choice Charlie. Template "C" is the best. Centered, with no border, looks great, and it looks less cookie cutter-like.

---

I selected this as Best Answer as it appears to be the Most Favored . . . by a surprisingly large margin (at least to me).

Answer 4

I really like centered templates and will be less inclined to use them if they are right aligned. Right aligned makes the profile look unbalanced.

Comments

Just looking at some of our War of 1812 profiles and yes - please do away with the right centred templates! Borders - no borders, I don't care. But PLEASE don't leave them looking the way they do right now.

---

The Military and War Project Leaders were not collaborated with in regards to images. We apologize if some are not appropriate or possibly offensive. But for now what you see is what Wiki-tree Admin decided was best.

When the dust settles, we will address the images with collaborative project team members. There is no point in changing something that will just be changing again

---

Vote for option C, then, Sharon.

---

Actually, Terri, I let the Military and War Leaders know the images were placeholders and you could discuss and change them as you saw fit because all your templates used multiple images, which were not easily supported.

---

Yes, I know and we appreciate the message letting us know they were changed. When things settle we will address the images in a collaborative manner. We also appreciate the time it took for you to complete the actions to bring the templates into compliance with whatever will be the new format.

---

For reference, here are the standards for when project boxes should be used, the images they should contain, etc.

https://www.wikitree.com/wiki/Project_Boxes

Answer 5

While I appreciate the intent, I'm concerned about the implementation.  What are your rewording  plans for PGM?

I hope it's not that they a  Puritan immigrant because that's not accurate. Shortest and accurate:

This person migrated during the Puritan Great Migration

And Mayflower?

Comments

Jillaine, currently the PGM box has same text it has had for a while.  See https://www.wikitree.com/wiki/Bent-5

But I think it's ugly in its Option A format. On my computer (and also on my phone), I see seven lines of text, with text breaks strategically positioned to break up meaningful noun clusters: 

1. [ IMAGE ] Anne (Bent) Rice
2. [ IMAGE ] migrated to New
3. England during the Puritan Great
4. Migration (1620-1640).
5. Join: Puritan Great Migration
6. Project
7. Discuss: pgm

---

I just looked at it on my computer; the line breaks aren't there.

And... I still prefer Option C.

---

So where do the lines of text break on your screen? Surely the system doesn't get "migrated to New England during the Puritan Great Migration (1620-1640)" all on one line!

---

An 8-line variation on the computer I'm using at the moment (probably has a different default font):

1. [ IMAGE ] Mathew Beckwith
2. [ IMAGE ] migrated to New
3. England during the
4. Puritan Great Migration
5. (1620-1640).
6. Join: Puritan Great Migration
7. Project
8. Discuss: pgm

---

Ellen:

Anne (Bent) Rice migrated to New 

England during the Puritan Great 

Migration (1620-1640).

Join: Puritan Great Migration Project
Discuss: pgm

Answer 6

Problem with right aligned when combined with a centered maintenance category. Ugly:

https://www.wikitree.com/wiki/Sutton-1487

(Note: PGM project has no objection to use of Unsourced template on its profiles. And in fact finds it helpful.)

Comments

What it looks like on iPhone 

---

Chris has said that standards for maintenance templates will be addressed later, so we shouldn't make the interaction between different template types become a factor in our consideration.

PS to Jillaine: How did you upload that image from your phone to G2G? I can't see a way to upload an image here unless I can supply a URL for the file.

---

I added it as an image to my freespace page, to-do list.